Merge pull request #181 from bcgov/bucket-object-lastSyncDate

Display last sync date for buckets and objects

frontend/src/components/bucket/BucketSidebar.vue

@@ -5,6 +5,7 @@ import { onBeforeMount, ref, watch } from 'vue';
 import { Button } from '@/lib/primevue';
 import { usePermissionStore, useUserStore } from '@/store';
 import { Permissions } from '@/utils/constants';
+import { formatDateLong } from '@/utils/formatters';
 
 import type { Ref } from 'vue';
 import type { Bucket, BucketPermission } from '@/types';
@@ -93,6 +94,21 @@ watch(props, () => {
           {{ props.sidebarInfo?.bucketId }}
         </div>
       </div>
+      <div class="grid">
+        <div class="col-fixed">Last sync date:</div>
+        <div
+          v-if="props.sidebarInfo.lastSyncRequestedDate"
+          class="col"
+        >
+          {{ formatDateLong(props.sidebarInfo?.lastSyncRequestedDate as string) }}
+        </div>
+        <div
+          v-else
+          class="col"
+        >
+          (none)
+        </div>
+      </div>
     </div>
     <div class="grid details-grid grid-nogutter">
       <div class="col-12">

frontend/src/components/common/SyncButton.vue

@@ -4,6 +4,7 @@ import { ref } from 'vue';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { Button, Dialog, useToast } from '@/lib/primevue';
 import { useObjectStore, useBucketStore } from '@/store';
+import { formatDateLong } from '@/utils/formatters';
 
 import type { Ref } from 'vue';
 
@@ -22,6 +23,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 // State
 const name: Ref<String> = ref('');
+const lastSyncedDate: Ref<String> = ref('');
+const lastSyncRequestedDate: Ref<String> = ref('');
 
 // Store
 const objectStore = useObjectStore();
@@ -47,9 +50,13 @@ const onSubmit = () => {
 const onClick = () => {
   displaySyncDialog.value = true;
   if (props.bucketId) {
-    name.value = bucketStore.getBucket(props.bucketId)?.bucketName ?? '';
+    const bucket = bucketStore.getBucket(props.bucketId);
+    name.value = bucket?.bucketName ?? '';
+    lastSyncRequestedDate.value = formatDateLong(bucket?.lastSyncRequestedDate as string);
   } else if (props.objectId) {
-    name.value = objectStore.getObject(props.objectId)?.name ?? '';
+    const object = objectStore.getObject(props.objectId);
+    name.value = object?.name ?? '';
+    lastSyncedDate.value = formatDateLong(object?.lastSyncedDate as string);
   }
 };
 </script>
@@ -85,6 +92,15 @@ const onClick = () => {
       {{ name }}
     </h3>
 
+    <span class="mr-2">Last sync date:</span>
+    <span v-if="lastSyncRequestedDate">
+      {{ lastSyncRequestedDate }}
+    </span>
+    <span v-else-if="lastSyncedDate">
+      {{ lastSyncedDate }}
+    </span>
+    <span v-else>(none)</span>
+
     <ul class="mb-4 ml-1.5">
       <li v-if="props.bucketId">This will schedule a synchronization of the bucket's contents</li>
       <li v-else>This will schedule a synchronization of the file</li>

frontend/src/components/object/ObjectProperties.vue

@@ -80,5 +80,10 @@ onMounted(() => {
       label="Updated date"
       :value="formatDateLong(object?.updatedAt as string)"
     />
+    <GridRow
+      v-if="fullView"
+      label="Last sync date"
+      :value="formatDateLong(object?.lastSyncedDate as string)"
+    />
   </div>
 </template>

frontend/src/types/Bucket.ts

@@ -8,6 +8,7 @@ export type Bucket = {
   bucketName: string;
   endpoint: string;
   key: string;
+  lastSyncRequestedDate?: string;
   region: string;
   secretAccessKey: string;
 } & IAudit;

frontend/src/types/COMSObject.ts

@@ -4,6 +4,7 @@ export type COMSObject = {
   active: boolean;
   bucketId: string;
   id: string;
+  lastSyncedDate?: string;
   name: string;
   path: string;
   public: boolean;

frontend/vite.config.ts

@@ -21,7 +21,7 @@ export default defineConfig({
       }
     }
   },
-  plugins: [vue(), vueJsx()],
+  plugins: [vue({ script: { defineModel: true } }), vueJsx()],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))