Add version row styling and click event; Linting fixes

frontend/src/assets/main.scss

@@ -165,9 +165,18 @@ td .wrap-block {
   }
 }
 
+// ---------- datatables
+
 .p-datatable {
   .p-datatable-loading-overlay {
     background: white;
     opacity: 0.8;
   }
 }
+
+.versions-table .p-datatable-table tbody tr:not(.selected-row) {
+  &:hover{
+    background-color: $bcbox-highlight-background !important;
+    cursor: pointer;
+  }
+}

frontend/src/components/object/ObjectAccess.vue

@@ -29,26 +29,29 @@ async function load() {
   await permissionStore.fetchObjectPermissions({ objectId: props.objectId });
 
   const uniqueIds = [...new Set(getObjectPermissions.value
-    .filter( (x: COMSObjectPermission) => x.objectId === props.objectId && x.permCode === Permissions.MANAGE )
-    .map( (x: COMSObjectPermission) => x.userId) )];
+    .filter((x: COMSObjectPermission) => x.objectId === props.objectId && x.permCode === Permissions.MANAGE)
+    .map((x: COMSObjectPermission) => x.userId))];
 
-  if( uniqueIds.length ) {
+  if (uniqueIds.length) {
     await userStore.fetchUsers({ userId: uniqueIds });
-    managedBy.value = userStore.findUsersById(uniqueIds).map( x => x.fullName ).join(', ');
+    managedBy.value = userStore.findUsersById(uniqueIds).map(x => x.fullName).join(', ');
   }
 }
 
 onMounted(() => {
   load();
 });
 
-watch( props, () => {
+watch(props, () => {
   load();
 });
 </script>
 
 <template>
-  <div  v-if="managedBy" class="grid details-grid grid-nogutter mb-2">
+  <div
+    v-if="managedBy"
+    class="grid details-grid grid-nogutter mb-2"
+  >
     <div class="col-12">
       <h2 class="font-bold">
         Access

frontend/src/components/object/ObjectFileDetails.vue

@@ -198,7 +198,6 @@ watch( [props, getObjects], async () => {
         />
         <ObjectAccess :object-id="props.objectId" />
         <ObjectMetadata
-          :bucket-id="bucketId"
           :editable="props.versionId === latestVersionId"
           :object-id="props.objectId"
           :version-id="props.versionId"
@@ -223,8 +222,6 @@ watch( [props, getObjects], async () => {
           :version-id="props.versionId"
         />
         <ObjectTag
-          :bucket-id="bucketId"
-          :editable="props.versionId === latestVersionId"
           :object-id="props.objectId"
           :version-id="props.versionId"
           @on-file-uploaded="onFileUploaded"

frontend/src/components/object/ObjectMetadata.vue

@@ -14,7 +14,6 @@ import type { Metadata } from '@/types';
 
 // Props
 type Props = {
-  bucketId: string | undefined ;
   editable?: boolean;
   objectId: string;
   versionId?: string;
@@ -31,6 +30,7 @@ const emit = defineEmits(['on-file-uploaded']);
 // Store
 const metadataStore = useMetadataStore();
 const versionStore = useVersionStore();
+const objectStore = useObjectStore();
 const permissionStore = usePermissionStore();
 const { getUserId } = storeToRefs(useAuthStore());
 const { getMetadata: tsGetMetadata } = storeToRefs(metadataStore);
@@ -43,6 +43,10 @@ const formData: Ref<ObjectMetadataTagFormType> = ref({
 });
 const objectMetadata: Ref<Metadata | undefined> = ref(undefined);
 
+
+// Object
+const obj = objectStore.findObjectById(props.objectId);
+
 // Actions
 const confirm = useConfirm();
 
@@ -57,7 +61,7 @@ const confirmUpdate = (values: ObjectMetadataTagFormType) => {
 };
 
 const showModal = () => {
-  formData.value.filename = useObjectStore().findObjectById(props.objectId)?.name ?? '';
+  formData.value.filename = obj?.name ?? '';
   formData.value.metadata = objectMetadata.value?.metadata;
 
   editing.value = true;
@@ -108,7 +112,7 @@ watch([props, tsGetMetadata,vsGetMetadata] , () => {
   </div>
   <div
     v-if="editable &&
-      permissionStore.isObjectActionAllowed(props.objectId, getUserId, Permissions.UPDATE, props.bucketId)"
+      permissionStore.isObjectActionAllowed(props.objectId, getUserId, Permissions.UPDATE, obj?.bucketId)"
   >
     <Button
       outlined

frontend/src/components/object/ObjectProperties.vue

@@ -4,7 +4,7 @@ import { onMounted, ref, watch } from 'vue';
 
 import GridRow from '@/components/form/GridRow.vue';
 import { useBucketStore, useMetadataStore, useObjectStore, useUserStore } from '@/store';
-import { RouteNames, SYSTEM_USER } from '@/utils/constants';
+import { RouteNames } from '@/utils/constants';
 import { formatDateLong } from '@/utils/formatters';
 
 import type { Ref } from 'vue';
@@ -43,7 +43,7 @@ async function load() {
 
   if( props.fullView ) {
     objectMetadata.value = metadataStore.findMetadataByObjectId(object.value?.id as string);
-    await userStore.fetchUsers({userId:[object.value?.createdBy, object.value?.updatedBy].filter((userId) => userId != SYSTEM_USER)});
+    await userStore.fetchUsers({userId:[object.value?.createdBy, object.value?.updatedBy]});
     createdBy.value = getUserSearch.value.find( x => x.userId === object.value?.createdBy )?.fullName;
     updatedBy.value = getUserSearch.value.find( x => x.userId === object.value?.updatedBy )?.fullName;
   }

frontend/src/components/object/ObjectSidebar.vue

@@ -33,7 +33,7 @@ const closeObjectInfo = async () => {
 };
 
 const obj = objectStore.findObjectById(props.objectId);
-const bucketId = obj ? obj.bucketId : undefined;
+const bucketId = obj?.bucketId;
 
 watch( props, () => {
   if( obj &&

frontend/src/components/object/ObjectTag.vue

@@ -13,7 +13,6 @@ import type { Tagging } from '@/types';
 
 // Props
 type Props = {
-  bucketId: string | undefined;
   editable?: boolean;
   objectId: string;
   versionId?: string;
@@ -28,6 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits(['on-file-uploaded']);
 
 // Store
+const objectStore = useObjectStore();
 const tagStore = useTagStore();
 const versionStore = useVersionStore();
 const permissionStore = usePermissionStore();
@@ -42,9 +42,12 @@ const formData: Ref<ObjectMetadataTagFormType> = ref({
 });
 const objectTagging: Ref<Tagging | undefined> = ref(undefined);
 
+// Object
+const obj = objectStore.findObjectById(props.objectId);
+
 // Actions
 const showModal = () => {
-  formData.value.filename = useObjectStore().findObjectById(props.objectId)?.name ?? '';
+  formData.value.filename = obj?.name ?? '';
   formData.value.tagset = objectTagging.value?.tagset;
 
   editing.value = true;
@@ -101,16 +104,19 @@ watch( [props, tsGetTagging, vsGetTagging], () => {
     >
       <div class="grid">
         <div class="col mr-2">
-          <Tag value="Primary" rounded>
+          <Tag
+            value="Primary"
+            rounded
+          >
             {{ tag.key + "=" + tag.value }}
-        </Tag>
+          </Tag>
         </div>
       </div>
     </div>
   </div>
   <div
     v-if="editable &&
-      permissionStore.isObjectActionAllowed(props.objectId, getUserId, Permissions.UPDATE, props.bucketId)"
+      permissionStore.isObjectActionAllowed(props.objectId, getUserId, Permissions.UPDATE, obj?.bucketId)"
   >
     <Button
       outlined

frontend/src/components/object/ObjectVersion.vue

@@ -60,6 +60,13 @@ async function onDeletedSuccess(versionId: string) {
   }
 }
 
+const rowClick = function(e: any){
+  router.push({
+    name: RouteNames.DETAIL_OBJECTS,
+    query: { objectId: e.data.objectId, versionId: e.data.id }
+  });
+};
+
 async function load() {
   await versionStore.fetchVersions({ objectId: props.objectId });
   const versions = versionStore.findVersionsByObjectId(props.objectId);
@@ -97,14 +104,15 @@ watch( getVersions, async () => {
       <DataTable
         :value="tableData"
         data-key="id"
-        class="p-datatable-sm"
+        class="versions-table p-datatable-sm"
         responsive-layout="scroll"
         :paginator="true"
         :rows="5"
         :row-class="rowClass"
         paginator-template="RowsPerPageDropdown CurrentPageReport PrevPageLink NextPageLink "
         current-page-report-template="{first}-{last} of {totalRecords}"
         :rows-per-page-options="[5, 10, 20]"
+        @row-click="rowClick($event)"
       >
         <template #empty>
           <div
@@ -133,15 +141,8 @@ watch( getVersions, async () => {
         >
           <template #body="{ data }">
             <div>
-              <router-link
-                v-if="data.id !== props.versionId"
-                :to="{ name: RouteNames.DETAIL_OBJECTS,
-                       query: { objectId: props.objectId, versionId: data.id } }"
-              >
-                {{ data.s3VersionId ? formatDateLong(data.createdAt) : formatDateLong(data.createdAt?? data.updatedAt) }}
-              </router-link>
-              <span v-else>
-                {{ data.s3VersionId ? formatDateLong(data.createdAt) : formatDateLong(data.createdAt?? data.updatedAt) }}
+              <span>
+                {{ formatDateLong(data.s3VersionId ? data.createdAt : data.createdAt ?? data.updatedAt) }}
               </span>
             </div>
           </template>