refresh cache button plugin : add last cache update date and time on button title

public/site/blueprints/pages/project.yml

@@ -19,6 +19,8 @@ tabs:
     columns:
       - width: 1/1
         fields:
+          lastCacheUpdate:
+            type: hidden
           isClientRequest:
             type: hidden
             default: "false"

public/site/plugins/refresh-cache-button/index.js

@@ -1 +1 @@
-(function(){"use strict";function f(n,e,c,t,r,o,i,u){var a=typeof n=="function"?n.options:n;return e&&(a.render=e,a.staticRenderFns=c,a._compiled=!0),{exports:n,options:a}}const l={__name:"RefreshCacheButton",props:{pageUri:String,pageStatus:String},setup(n){const{pageUri:e,pageStatus:c}=n,t=Vue.ref("Rafraîchir"),r=Vue.ref("refresh"),o=Vue.ref("aqua-icon");async function i(){t.value="En cours…",r.value="loader",o.value="orange-icon";const u={method:"POST","Content-Type":"application/json",body:JSON.stringify({pageUri:e})},s=await(await fetch("/refresh-cache.json",u)).json();s.status==="error"?(console.error(s),t.value="Erreur",r.value="alert",o.value="red-icon"):(console.log(s),t.value="Terminé",r.value="check",o.value="green-icon",setTimeout(()=>{t.value="Rafraîchir",r.value="refresh",o.value="aqua-icon"},2e3))}return{__sfc:!0,text:t,icon:r,theme:o,refreshCache:i}}};var h=function(){var e=this,c=e._self._c,t=e._self._setupProxy;return e.pageStatus!=="draft"?c("k-button",{attrs:{theme:t.theme,variant:"dimmed",icon:t.icon,title:"Rafraîchir le cache front"},on:{click:function(r){return t.refreshCache()}}},[e._v(e._s(t.text))]):e._e()},_=[],p=f(l,h,_);const v=p.exports;window.panel.plugin("adrienpayet/refresh-cache-button",{components:{"refresh-cache-button":v}})})();
+(function(){"use strict";function f(n,e,a,t,r,c,s,u){var o=typeof n=="function"?n.options:n;return e&&(o.render=e,o.staticRenderFns=a,o._compiled=!0),{exports:n,options:o}}const l={__name:"RefreshCacheButton",props:{pageUri:String,pageStatus:String,lastCacheUpdate:String},setup(n){const{pageUri:e,pageStatus:a,lastCacheUpdate:t}=n,r=Vue.ref("Rafraîchir"),c=Vue.ref("refresh"),s=Vue.ref("aqua-icon"),u=Vue.computed(()=>(t==null?void 0:t.length)>0?"Dernière mise à jour : "+t:"Mettre à jour le cache front");async function o(){r.value="En cours…",c.value="loader",s.value="orange-icon";const m={method:"POST","Content-Type":"application/json",body:JSON.stringify({pageUri:e})},i=await(await fetch("/refresh-cache.json",m)).json();i.status==="error"?(console.error(i),r.value="Erreur",c.value="alert",s.value="red-icon"):(console.log(i),r.value="Terminé",c.value="check",s.value="green-icon",setTimeout(()=>{location.href=location.href},1500))}return{__sfc:!0,text:r,icon:c,theme:s,title:u,refreshCache:o}}};var h=function(){var e=this,a=e._self._c,t=e._self._setupProxy;return a("div",{attrs:{id:"refresh-cache-button"}},[e.pageStatus!=="draft"?a("k-button",{attrs:{theme:t.theme,variant:"dimmed",icon:t.icon,title:t.title},on:{click:function(r){return t.refreshCache()}}},[e._v(e._s(t.text))]):e._e()],1)},_=[],p=f(l,h,_);const d=p.exports;window.panel.plugin("adrienpayet/refresh-cache-button",{components:{"refresh-cache-button":d}})})();

public/site/plugins/refresh-cache-button/index.php

@@ -10,7 +10,8 @@ Kirby::plugin('adrienpayet/refresh-cache-button', [
               'component' => 'refresh-cache-button',
               'props' => [
                 'pageUri' => $page->uri(),
-                'pageStatus' => $page->status()
+                'pageStatus' => $page->status(),
+                'lastCacheUpdate' => $page->lastCacheUpdate()->value(),
               ]
             ];
           }

public/site/plugins/refresh-cache-button/src/components/RefreshCacheButton.vue

@@ -1,26 +1,34 @@
 <template>
-  <k-button
+  <div id="refresh-cache-button">
-    v-if="pageStatus !== 'draft'"
+    <k-button
-    :theme="theme"
+      v-if="pageStatus !== 'draft'"
-    variant="dimmed"
+      :theme="theme"
-    :icon="icon"
+      variant="dimmed"
-    title="Rafraîchir le cache front"
+      :icon="icon"
-    @click="refreshCache()"
+      :title="title"
-    >{{ text }}</k-button
+      @click="refreshCache()"
-  >
+      >{{ text }}</k-button
+    >
+  </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
-const { pageUri, pageStatus } = defineProps({
+const { pageUri, pageStatus, lastCacheUpdate } = defineProps({
   pageUri: String,
   pageStatus: String,
+  lastCacheUpdate: String,
 });
 
 const text = ref("Rafraîchir");
 const icon = ref("refresh");
 const theme = ref("aqua-icon");
+const title = computed(() => {
+  return lastCacheUpdate?.length > 0
+    ? "Dernière mise à jour : " + lastCacheUpdate
+    : "Mettre à jour le cache front";
+});
 
 async function refreshCache() {
   text.value = "En cours…";
@@ -48,10 +56,8 @@ async function refreshCache() {
     theme.value = "green-icon";
 
     setTimeout(() => {
-      text.value = "Rafraîchir";
+      location.href = location.href;
-      icon.value = "refresh";
+    }, 1500);
-      theme.value = "aqua-icon";
-    }, 2000);
   }
 }
 </script>

public/site/plugins/refresh-cache-button/src/routes/refresh-cache.php

@@ -12,6 +12,11 @@ return [
       $projects = page('projects')->children();
       foreach ($projects as $project) {
         $project->rebuildStepsCache();
+
+        $formatter = new IntlDateFormatter('fr_FR', IntlDateFormatter::SHORT, IntlDateFormatter::SHORT, 'Europe/Paris');
+        $project->update([
+          'lastCacheUpdate' => $formatter->format(time())
+        ]);
       }
       return [
         'satus' => 'success',
@@ -43,6 +48,12 @@ return [
 
       $project->rebuildStepsCache();
       
+      $formatter = new IntlDateFormatter('fr_FR', IntlDateFormatter::SHORT, IntlDateFormatter::SHORT, 'Europe/Paris');
+      $project->update([
+        'lastCacheUpdate' => $formatter->format(time())
+      ]);
+
+      
       return [
         'satus' => 'success',
         'message' => 'Données de la page ' . $data->pageUri . ' rafraîchie avec succès.'