@dative-gpi/foundation-core-components 0.0.11 → 0.0.13

package/components/lists/FSDataTable.vue

@@ -1,107 +1,172 @@
 <template>
+  <FSLoadDataTable
+    v-if="getting"
+  />
   <FSDataTableUI
-    v-if="!getting"
-    :filters="getFilters()"
+    v-else
+    :headers="innerHeaders"
+    :mode="innerMode"
+    :sortBy="innerSortBy"
+    :rowsPerPage="innerRowsPerPage"
+    :filters="innerFilters"
+    :page="innerPage"
+    @update:headers="updateHeaders"
+    @update:mode="updateMode"
+    @update:sortBy="updateSortBy"
+    @update:rowsPerPage="updateRowsPerPage"
     @update:filters="updateFilters"
-    v-model:rowsPerPage="innerRowsPerPage"
-    v-model:headers="innerHeaders"
-    v-model:sortBy="innerSortBy"
-    v-model:page="innerPage"
-    v-model:mode="innerMode"
+    @update:page="updatePage"
     v-bind="$attrs"
   />
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, onUnmounted, PropType, ref, Ref, watch } from "vue";
+import { defineComponent, onMounted, onUnmounted, ref, Ref, watch } from "vue";
+import { useRouter } from "vue-router";
 
-import { ColumnInfos, TableFilter, TableOrder } from "@dative-gpi/foundation-core-domain/models";
+import { FSDataTableColumn, FSDataTableFilter, FSDataTableOrder } from "@dative-gpi/foundation-shared-components/models";
 import { useTable, useUpdateTable } from "@dative-gpi/foundation-core-services/composables";
-import { FSDataTableFilter } from "@dative-gpi/foundation-shared-components/models";
+import { useDebounce } from "@dative-gpi/foundation-shared-components/composables";
 
+import FSLoadDataTable from "@dative-gpi/foundation-shared-components/components/lists/FSLoadDataTable.vue";
 import FSDataTableUI from "@dative-gpi/foundation-shared-components/components/lists/FSDataTableUI.vue";
 
 export default defineComponent({
   name: "FSDataTable",
   components: {
+    FSLoadDataTable,
     FSDataTableUI
   },
   props: {
     tableCode: {
       type: String,
       required: true
-    },
-    mode: {
-      type: String as PropType<"table" | "iterator">,
-      required: false,
-      default: "table"
     }
   },
   setup(props) {
-    const { update: updateTable } = useUpdateTable();
-    const { get: getTable, getting, entity } = useTable();
+    const { get, getting, entity } = useTable();
+    const { debounce, cancel } = useDebounce();
+    const { update } = useUpdateTable();
+    const router = useRouter();
 
-    const innerHeaders: Ref<ColumnInfos[]> = ref([]);
-    const innerFilters = ref<TableFilter[]>([]);
+    const innerHeaders: Ref<FSDataTableColumn[]> = ref([]);
+    const innerSortBy: Ref<FSDataTableOrder | null> = ref(null);
+    const innerMode: Ref<"table" | "iterator"> = ref("table");
     const innerRowsPerPage = ref(10);
-    const innerSortBy: Ref<TableOrder | null> = ref(null);
-    const innerMode = ref(props.mode);
+    const innerFilters = ref<{ [key: string]: FSDataTableFilter[] }>({});
     const innerPage = ref(1);
 
-    const getFilters = (): { [key: string]: FSDataTableFilter[] } => {
-      return innerFilters.value.reduce((acc, filter) => {
-        if (!acc[filter.key]) {
-          acc[filter.key] = [];
-        }
-        acc[filter.key].push({ value: filter.value, hidden: filter.hidden });
-        return acc;
-      }, {});
-    }
+    const reset = (): void => {
+      if (router && router.currentRoute.value.query[props.tableCode]) {
+        const query = JSON.parse(router.currentRoute.value.query[props.tableCode] as string);
+        innerHeaders.value = query.columns;
+        innerRowsPerPage.value = query.rowsPerPage;
+        innerSortBy.value = query.sortBy;
+        innerMode.value = query.mode;
+        innerFilters.value = query.filters;
+        innerPage.value = query.page;
+      }
+      else {
+        innerHeaders.value = entity.value.columns;
+        innerRowsPerPage.value = entity.value.rowsPerPage;
+        innerSortBy.value = entity.value.sortBy;
+        innerMode.value = entity.value.mode;
+      }
+    };
+
+    const updateHeaders = (value: FSDataTableColumn[]): void => {
+      innerHeaders.value = value;
+      debounce(updateTable, 5000);
+    };
+
+    const updateMode = (value: "table" | "iterator"): void => {
+      innerMode.value = value;
+      debounce(updateTable, 5000);
+    };
+
+    const updateSortBy = (value: FSDataTableOrder | null): void => {
+      innerSortBy.value = value;
+      debounce(updateTable, 5000);
+    };
+
+    const updateRowsPerPage = (value: -1 | 10 | 30): void => {
+      innerRowsPerPage.value = value;
+      debounce(updateTable, 5000);
+    };
 
     const updateFilters = (value: { [key: string]: FSDataTableFilter[] }): void => {
-      innerFilters.value = Object.entries(value).map(([key, filters]) => filters.map((filter) => ({
-        key: key,
-        value: filter.value,
-        hidden: filter.hidden
-      }))).reduce((acc, filters) => acc.concat(filters), []);
+      innerFilters.value = value;
+      updateRouter();
     };
 
-    const reset = (): void => {
-      innerHeaders.value = entity.value.columns;
-      innerRowsPerPage.value = entity.value.rowsPerPage;
-      innerSortBy.value = entity.value.sortBy;
-      innerMode.value = entity.value.mode;
+    const updatePage = (value: number): void => {
+      innerPage.value = value;
+      updateRouter();
+    };
+
+    const updateTable = (): void => {
+      updateRouter();
+      update(props.tableCode, {
+        columns: innerHeaders.value.map(column => ({
+          columnId: column.columnId,
+          hidden: column.hidden,
+          index: column.index
+        })),
+        rowsPerPage: innerRowsPerPage.value,
+        sortBy: innerSortBy.value,
+        mode: innerMode.value
+      });
+    };
+
+    const updateRouter = (): void => {
+      if (router) {
+        router.replace({
+          query: {
+            ...router.currentRoute.value.query,
+            [props.tableCode]: JSON.stringify({
+              columns: innerHeaders.value,
+              rowsPerPage: innerRowsPerPage.value,
+              sortBy: innerSortBy.value,
+              mode: innerMode.value,
+              filters: innerFilters.value,
+              page: innerPage.value
+            })
+          }
+        });
+      }
     };
 
     onMounted(() => {
-      getTable(props.tableCode);
+      get(props.tableCode);
     });
 
     onUnmounted(() => {
-      // update();
+      cancel();
+      updateTable();
     });
 
     watch(() => props.tableCode, () => {
-      getTable(props.tableCode);
+      get(props.tableCode);
     });
 
     watch(entity, () => {
       reset();
     });
 
-    watch([innerHeaders, innerFilters, innerRowsPerPage, innerSortBy, innerMode, ], () => {
-      // update();
-    });
-
     return {
       getting,
       innerHeaders,
       innerRowsPerPage,
-      innerPage,
       innerSortBy,
       innerMode,
-      getFilters,
-      updateFilters
+      innerFilters,
+      innerPage,
+      updateHeaders,
+      updateMode,
+      updateSortBy,
+      updateRowsPerPage,
+      updateFilters,
+      updatePage
     };
   },
 });

package/components/tiles/FSDeviceOrganisationTile.vue

@@ -27,7 +27,7 @@ import { defineComponent, onMounted, watch } from "vue";
 import { useDeviceOrganisation } from "@dative-gpi/foundation-core-services/composables";
 
 import FSDeviceOrganisationTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDeviceOrganisationTileUI.vue";
-import FSLoadTile from "@dative-gpi/foundation-shared-components/components/FSLoadTile.vue";
+import FSLoadTile from "@dative-gpi/foundation-shared-components/components/tiles/FSLoadTile.vue";
 
 export default defineComponent({
   name: "FSDeviceOrganisationTile",

package/components/tiles/FSGroupTile.vue

@@ -24,7 +24,7 @@ import { defineComponent, onMounted, watch } from "vue";
 import { useGroup } from "@dative-gpi/foundation-core-services/composables";
 
 import FSGroupTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSGroupTileUI.vue";
-import FSLoadTile from "@dative-gpi/foundation-shared-components/components/FSLoadTile.vue";
+import FSLoadTile from "@dative-gpi/foundation-shared-components/components/tiles/FSLoadTile.vue";
 
 export default defineComponent({
   name: "FSGroupTile",

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@dative-gpi/foundation-core-components",
-  "version": "0.0.11",
+  "sideEffects": false,
+  "version": "0.0.13",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -9,11 +10,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-core-domain": "0.0.11",
-    "@dative-gpi/foundation-core-services": "0.0.11",
-    "@dative-gpi/foundation-shared-components": "0.0.11",
-    "@dative-gpi/foundation-shared-domain": "0.0.11",
-    "@dative-gpi/foundation-shared-services": "0.0.11",
+    "@dative-gpi/foundation-core-domain": "0.0.13",
+    "@dative-gpi/foundation-core-services": "0.0.13",
+    "@dative-gpi/foundation-shared-components": "0.0.13",
+    "@dative-gpi/foundation-shared-domain": "0.0.13",
+    "@dative-gpi/foundation-shared-services": "0.0.13",
     "color": "^4.2.3",
     "vue": "^3.2.0",
     "vuedraggable": "^4.1.0"
@@ -23,5 +24,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "4f28939e7d42ab1ef8319c614fbc210b1291fd79"
+  "gitHead": "c99a5f4be0427449b3b00ef6d467528bae8b1ada"
 }