Highlight table row for currently selected version

bcgov · Aug 2, 2023 · 6c4641c · 6c4641c
1 parent 1fd984d
commit 6c4641c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/frontend/src/assets/main.scss b/frontend/src/assets/main.scss
@@ -79,6 +79,10 @@ a:visited {
     }
   }
 }
+// highlight the row for the currently selected version
+.details-selected-version {
+  background-color: $bcbox-highlight-background !important;
+}
 .details-value-column {
   width: 40rem;
 }

diff --git a/frontend/src/components/object/ObjectVersion.vue b/frontend/src/components/object/ObjectVersion.vue
@@ -44,6 +44,11 @@ const tableData: Ref<Array<VersionDataSource>> = ref([]);
 const router = useRouter();
 const toast = useToast();
 
+// Highlight row for currently selected version
+const rowClass = (data: any) => {
+  return [{ 'details-selected-version': data.id === props.versionId}];
+};
+
 async function onDeletedSuccess(versionId: string) {
   toast.success('File deleted');
   await versionStore.fetchVersions({ objectId: props.objectId });
@@ -97,6 +102,7 @@ watch( getVersions, () => {
         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]"