Set up custom primevue theme

webapp/src/components/DynamicDataTable.vue

@@ -236,6 +236,15 @@ export default {
 
       if (event.originalEvent.target.classList.contains("checkbox")) {
         return null;
+      } else if (event.originalEvent.target.classList.contains("p-checkbox-input")) {
+        const selectedIndex = this.itemsSelected.findIndex((item) => item.item_id === row.item_id);
+
+        if (selectedIndex === -1) {
+          this.itemsSelected.push(row);
+        } else {
+          this.itemsSelected.splice(selectedIndex, 1);
+        }
+        return null;
       }
 
       if (
@@ -314,7 +323,11 @@ export default {
         return false;
       }
       return visibleItems.every((currentItem) =>
-        this.itemsSelected.some((selectedItem) => selectedItem.item_id === currentItem.item_id),
+        this.itemsSelected.some(
+          (selectedItem) =>
+            (selectedItem.item_id || selectedItem.collection_id) ===
+            (currentItem.item_id || currentItem.collection_id),
+        ),
       );
     },
     onFilter(event) {
@@ -326,15 +339,21 @@ export default {
       const itemsToSelect = this.getVisibleItems();
 
       if (this.allSelected) {
-        const selectedIds = new Set(this.itemsSelected.map((item) => item.item_id));
+        const selectedIds = new Set(
+          this.itemsSelected.map((item) => item.item_id || item.collection_id),
+        );
         itemsToSelect.forEach((item) => {
-          if (!selectedIds.has(item.item_id)) {
+          if (!selectedIds.has(item.item_id || item.collection_id)) {
             this.itemsSelected.push(item);
           }
         });
       } else {
-        const idsToRemove = new Set(itemsToSelect.map((item) => item.item_id));
-        this.itemsSelected = this.itemsSelected.filter((item) => !idsToRemove.has(item.item_id));
+        const idsToRemove = new Set(
+          itemsToSelect.map((item) => item.item_id || item.collection_id),
+        );
+        this.itemsSelected = this.itemsSelected.filter(
+          (item) => !idsToRemove.has(item.item_id || item.collection_id),
+        );
       }
     },
     deleteSelectedItems() {
@@ -351,48 +370,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-:deep .p-datatable-column-header-content .p-datatable-sort-icon {
-  visibility: hidden !important;
-}
-
-:deep
-  .p-datatable-column-header-content[data-pc-section="columnheadercontent"]
-  .p-datatable-sort-icon[sorted="true"] {
-  visibility: visible !important;
-}
-
-:deep .p-datatable-header-cell:hover .p-datatable-column-header-content .p-datatable-sort-icon {
-  visibility: visible !important;
-}
-
-:deep .p-datatable .p-datatable-tbody > tr > td {
-  min-width: 1em;
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-:deep .p-datatable .p-datatable-thead > tr > th {
-  min-width: 1em;
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-:deep .p-datatable-header-cell.filter-active svg {
-  color: #10b981;
-}
-:deep .p-datatable-header-cell.filter-active {
-  color: #047857;
-}
-
-:deep .p-datatable-thead th {
-  padding: 0.5rem !important;
-}
-:deep .p-datatable-tbody tr td {
-  padding: 0.5rem !important;
-}
-</style>

webapp/src/main.js

@@ -118,20 +118,15 @@ import "vue-select/dist/vue-select.css";
 
 // import "primevue";
 import PrimeVue from "primevue/config";
-import Aura from "@primevue/themes/aura";
+import DatalabPreset from "./primevue-theme-preset.js";
 
 const app = createApp(App);
 
 app
   .use(store)
   .use(router)
   .use(PrimeVue, {
-    theme: {
-      preset: Aura,
-      options: {
-        darkModeSelector: "none",
-      },
-    },
+    theme: DatalabPreset,
   })
   .component("font-awesome-icon", FontAwesomeIcon)
   .component("editor", Editor)

webapp/src/primevue-theme-preset.js

@@ -0,0 +1,67 @@
+import Aura from "@primevue/themes/aura";
+import { definePreset } from "@primevue/themes";
+
+const DatalabPreset = definePreset(Aura, {
+  semantic: {
+    transitionDuration: "0.05s",
+  },
+  components: {
+    datatable: {
+      extend: {
+        filterActiveBackground: "{primary.50}",
+        filterActiveColor: "{primary.700}",
+        maxWidth: "1rem",
+        whitespace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        divCheckboxHover: "#6C757D",
+        divCheckboxCheckedHover: "#5A6268",
+      },
+      bodyCellPadding: "0.4rem",
+      sortIconColor: "transparent",
+    },
+    checkbox: {
+      hoverBorderColor: "#6C757D",
+      checkedBackground: "#6C757D",
+      checkedBorderColor: "#6C757D",
+      iconCheckedColor: "#F8F9FA",
+      checkedHoverBackground: "#5A6268",
+      checkedHoverBorderColor: "#5A6268",
+      iconCheckedHoverColor: "#F8F9FA",
+    },
+    button: {
+      extend: {
+        activeSVG: "{primary.700}",
+      },
+    },
+  },
+  css: ({ dt }) => `
+        .p-datatable-thead tr th.filter-active {
+          background: ${dt("datatable.filterActiveBackground")};
+          color: ${dt("datatable.filterActiveColor")}
+        }
+        th.filter-active .p-button-text.p-button-secondary {
+          color: ${dt("datatable.activeSVG")};
+        }
+        .p-datatable-tbody tr td {
+          max-width: ${dt("datatable.maxWidth")};
+          white-space: ${dt("datatable.whitespace")};
+          overflow: ${dt("datatable.overflow")};
+          text-overflow: ${dt("datatable.textOverflow")};
+        }
+        .checkbox:hover .p-checkbox-box {
+          border-color: ${dt("datatable.divCheckboxHover")};
+        }
+        .checkbox:hover .p-checkbox-checked .p-checkbox-box {
+          border-color: ${dt("datatable.divCheckboxCheckedHover")};
+          background: ${dt("datatable.divCheckboxCheckedHover")};
+        }
+      `,
+});
+
+export default {
+  preset: DatalabPreset,
+  options: {
+    darkModeSelector: "none",
+  },
+};