@dative-gpi/foundation-core-components 0.1.120 → 1.0.0

package/components/customProperties/FSMetaField.vue

@@ -1,67 +1,50 @@
 <template>
   <FSSelectField
     v-if="$props.customProperty.useOnlyAllowedValues"
-    :label="$props.customProperty.label"
-    :items="Object.keys($props.customProperty.allowedValues)"
-    :disabled="!editable"
+    class="fs-meta-field"
+    :editable="$props.editable"
+    :label="$props.label"
+    :items="items"
     :modelValue="$props.modelValue"
-    @update:modelValue="(event) => $emit('update:modelValue', event)"
+    @update:modelValue="onUpdate"
   >
     <template
       #selection="{ item }"
     >
-      <FSSpan
-        v-if="customProperty.allowedValues[item.value] != null"
-        class="text-body-1"
+      <FSIcon
+        v-if="item.raw.icon"
       >
-        {{ customProperty.allowedValues[item.value] }}
-      </FSSpan>
-      <FSSpan
-        v-else-if="[PropertyDataType.Number, PropertyDataType.String, PropertyDataType.DateTime].includes(customProperty.dataType)"
-        class="text-body-1"
+        {{ item.raw.icon }}
+      </FSIcon>
+      <FSText
+        v-else
       >
-        {{ asSelector(item.value) }}
-      </FSSpan>
+        {{ item.raw.label }}
+      </FSText>
+    </template>
+    <template
+      #selection-mobile="{ item }"
+    >
       <FSIcon
-        v-else-if="[PropertyDataType.Boolean, PropertyDataType.Icon].includes(customProperty.dataType)"
+        v-if="item.raw.icon"
       >
-        {{ asSelector(item.value) }}
+        {{ item.raw.icon }}
       </FSIcon>
     </template>
     <template
-      #item="{ props, item }"
+      #item-label="{ item, font }"
     >
-      <v-list-item
-        v-bind="{ ...props, title: '' }"
+      <FSIcon
+        v-if="item.raw.icon"
+      >
+        {{ item.raw.icon }}
+      </FSIcon>
+      <FSSpan
+        v-else
+        :font="font"
       >
-        <FSRow
-          align="center-left"
-        >
-          <FSSpan
-            v-if="customProperty.allowedValues[item.value] != null"
-            class="text-body-1"
-          >
-            {{ customProperty.allowedValues[item.value] }}
-          </FSSpan>
-          <FSSpan
-            v-else-if="[PropertyDataType.Number, PropertyDataType.String].includes($props.customProperty.dataType)"
-            class="text-body-1"
-          >
-            {{ asSelector(item.value) }}
-          </FSSpan>
-          <FSSpan
-            v-else-if="[PropertyDataType.DateTime].includes($props.customProperty.dataType)"
-            class="text-body-1"
-          >
-            {{ asSelector(item.value) }}
-          </FSSpan>
-          <FSIcon
-            v-else-if="[PropertyDataType.Boolean, PropertyDataType.Icon].includes($props.customProperty.dataType)"
-          >
-            {{ asSelector(item.value) }}
-          </FSIcon>
-        </FSRow>
-      </v-list-item>
+        {{ item.raw.label }}
+      </FSSpan>
     </template>
   </FSSelectField>
   <template
@@ -69,72 +52,86 @@
   >
     <FSNumberField
       v-if="$props.customProperty.dataType === PropertyDataType.Number"
-      :label="$props.customProperty.label"
-      :disabled="!editable"
+      :editable="$props.editable"
+      :label="$props.label"
       :modelValue="asNumber()"
-      @update:modelValue="(event) => $emit('update:modelValue', event.toString())"
+      @update:modelValue="onUpdate"
     />
     <FSSwitch
       v-else-if="$props.customProperty.dataType === PropertyDataType.Boolean"
-      :label="$props.customProperty.label"
-      :editable="editable"
+      :editable="$props.editable"
+      :label="$props.label"
       :modelValue="asBoolean()"
-      @update:modelValue="(event) => $emit('update:modelValue', event.toString())"
+      @update:modelValue="onUpdate"
     />
     <FSTextField
       v-else-if="$props.customProperty.dataType === PropertyDataType.String"
-      :label="$props.customProperty.label"
-      :disabled="!editable"
+      :editable="$props.editable"
+      :label="$props.label"
       :modelValue="$props.modelValue"
-      @update:modelValue="(event) => $emit('update:modelValue', event)"
+      @update:modelValue="onUpdate"
     />
     <FSDateTimeField
       v-else-if="$props.customProperty.dataType === PropertyDataType.DateTime"
-      :label="$props.customProperty.label"
-      :editable="editable"
+      :editable="$props.editable"
+      :label="$props.label"
       :modelValue="asNumber()"
-      @update:modelValue="(event) => $emit('update:modelValue', (event + getMachineOffsetMillis() - getUserOffsetMillis()).toString())"
+      @update:modelValue="onUpdate"
     />
     <FSIconField
       v-else-if="$props.customProperty.dataType === PropertyDataType.Icon"
-      :label="$props.customProperty.label" 
-      :editable="editable"
+      :editable="$props.editable"
+      :label="$props.label" 
       :modelValue="modelValue"
-      @update:modelValue="(event) => $emit('update:modelValue', event.toString()) "
+      @update:modelValue="onUpdate"
     />
   </template>
 </template>
 
 <script lang="ts">
-import { PropType, defineComponent } from "vue";
-
-import FSSwitch from "@dative-gpi/foundation-shared-components/components/FSSwitch.vue";
-import FSIconField from "@dative-gpi/foundation-shared-components/components/fields/FSIconField.vue";
-import FSSelectField from "@dative-gpi/foundation-shared-components/components/fields/FSSelectField.vue";
-import FSNumberField from "@dative-gpi/foundation-shared-components/components/fields/FSNumberField.vue";
-import FSDateTimeField from "@dative-gpi/foundation-shared-components/components/fields/FSDateTimeField.vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { CustomPropertyInfos, PropertyDataType } from "../../../foundation-core-domain/models";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
+import type { CustomPropertyInfos} from "../../../foundation-core-domain/models";
+import { PropertyDataType } from "../../../foundation-core-domain/models";
+
+import FSDateTimeField from "@dative-gpi/foundation-shared-components/components/fields/FSDateTimeField.vue";
+import FSNumberField from "@dative-gpi/foundation-shared-components/components/fields/FSNumberField.vue";
+import FSSelectField from "@dative-gpi/foundation-shared-components/components/fields/FSSelectField.vue";
+import FSIconField from "@dative-gpi/foundation-shared-components/components/fields/FSIconField.vue";
+import FSSwitch from "@dative-gpi/foundation-shared-components/components/FSSwitch.vue";
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
+import FSText from "@dative-gpi/foundation-shared-components/components/FSText.vue";
 
 export default defineComponent({
   name: "FSMetaField",
   components: {
-    FSSwitch,
-    FSIconField,
-    FSSelectField,
+    FSDateTimeField,
     FSNumberField,
-    FSDateTimeField
+    FSSelectField,
+    FSIconField,
+    FSSwitch,
+    FSIcon,
+    FSSpan,
+    FSText
   },
   props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
     customProperty: {
       type: Object as PropType<CustomPropertyInfos>,
       required: true
     },
     modelValue: {
-      type: String,
-      required: true
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     },
     editable: {
       type: Boolean,
@@ -142,53 +139,88 @@ export default defineComponent({
       default: true
     }
   },
-  setup(props) {
-    const { epochToLongTimeFormat, epochToPicker, getUserOffsetMillis, getMachineOffsetMillis } = useAppTimeZone();
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { epochToLongTimeFormat } = useAppTimeZone();
 
-    const asSelector = (item: string): string => {
-      switch (props.customProperty.dataType) {
-        case PropertyDataType.Boolean: {
-          if (item?.toLowerCase() === "true") {
-            return "mdi-check-circle-outline";
+    const items = computed((): { id: string, label: string, icon: string | null }[] => {
+      return Object.keys(props.customProperty.allowedValues).map((key: string) => {
+        // If the allowed value is translated
+        if (props.customProperty.allowedValues[key]) {
+          return {
+            id: key,
+            label: props.customProperty.allowedValues[key],
+            icon: null
           }
-          return "mdi-close-circle-outline";
-        }
-        case PropertyDataType.DateTime: {
-          return epochToLongTimeFormat(parseInt(item));
         }
-        default: {
-          return item;
+        // If we have the value without translation
+        else {
+          switch (props.customProperty.dataType) {
+            case PropertyDataType.Boolean: return {
+              id: key,
+              label: key,
+              icon: key === "true" ? "mdi-check-circle-outline" : "mdi-close-circle-outline"
+            }
+            case PropertyDataType.DateTime: return {
+              id: key,
+              label: epochToLongTimeFormat(parseInt(key)),
+              icon: null
+            }
+            case PropertyDataType.Icon: return {
+              id: key,
+              label: key,
+              icon: key
+            }
+            default: return {
+              id: key,
+              label: key,
+              icon: null
+            }
+          }
         }
-      }
-    }
+      });
+    });
 
-    const asNumber = (): number | undefined => {
+    const asNumber = (): number | null => {
+      if (!props.modelValue) {
+        return null;
+      }
       if (!isNaN(parseFloat(props.modelValue))) {
         return parseFloat(props.modelValue);
       }
-      return undefined;
-    }
+      return null;
+    };
 
-    const asBoolean = (): boolean => {
+    const asBoolean = (): boolean | null => {
+      if (!props.modelValue) {
+        return null;
+      }
       return props.modelValue === "true";
-    }
+    };
 
-    const asDateTime = (): Date | undefined => {
-      let epoch: number | undefined = undefined;
-      if (props.modelValue != null && isFinite(parseInt(props.modelValue))) {
-        epoch = parseInt(props.modelValue);
+    const onUpdate = (value: any) => {
+      switch (props.customProperty.dataType) {
+        case PropertyDataType.Boolean:
+        case PropertyDataType.DateTime:
+        case PropertyDataType.Number:
+          if (value) {
+            emit("update:modelValue", value.toString());
+            break;
+          }
+          emit("update:modelValue", null);
+          break;
+        default:
+          emit("update:modelValue", value);
+          break;
       }
-      return epochToPicker(epoch) ?? undefined;
-    }
+    };
 
     return {
       PropertyDataType,
-      getMachineOffsetMillis,
-      getUserOffsetMillis,
-      asSelector,
-      asDateTime,
+      items,
       asBoolean,
-      asNumber
+      asNumber,
+      onUpdate
     };
   }
 });

package/components/customProperties/FSMetaFormContent.vue

@@ -27,9 +27,10 @@
 </template>
 
   <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import type { PropType } from 'vue';
+import { defineComponent } from 'vue';
 
-import { CustomPropertyInfos } from '@dative-gpi/foundation-core-domain/models';
+import type { CustomPropertyInfos } from '@dative-gpi/foundation-core-domain/models';
 
 import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
 

package/components/customProperties/FSMetaGrid.vue

@@ -38,11 +38,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { FSGridItem } from "@dative-gpi/foundation-shared-components/models";
+import type { FSGridItem } from "@dative-gpi/foundation-shared-components/models";
 
-import { CustomPropertyInfos } from "../../../foundation-core-domain/models";
+import type { CustomPropertyInfos } from "../../../foundation-core-domain/models";
 
 import FSGrid from "@dative-gpi/foundation-shared-components/components/FSGrid.vue";
 

package/components/customProperties/FSMetaHistory.vue

@@ -33,7 +33,8 @@
   </FSDialog>
 </template>
 <script lang="ts">
-import { PropType, defineComponent, ref, watch } from 'vue';
+import type { PropType} from 'vue';
+import { defineComponent, ref, watch } from 'vue';
 import _ from 'lodash';
 
 import { useAppTimeZone } from '@dative-gpi/foundation-shared-services/composables';
@@ -41,7 +42,7 @@ import { useAppTimeZone } from '@dative-gpi/foundation-shared-services/composabl
 import FSDialog from "@dative-gpi/foundation-shared-components/components/FSDialog.vue";
 import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
 
-import { CustomPropertyInfos, PropertyEntity } from '../../../foundation-core-domain/models';
+import type { CustomPropertyInfos, PropertyEntity } from '../../../foundation-core-domain/models';
 import { useCustomPropertyValues } from '../../../foundation-core-services/composables';
 
 import FSMetaValue from './FSMetaValue.vue';

package/components/customProperties/FSMetaValue.vue

@@ -28,11 +28,13 @@
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent } from "vue";
+import type { PropType} from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
-import { CustomPropertyInfos, PropertyDataType } from "../../../foundation-core-domain/models";
+import type { CustomPropertyInfos} from "../../../foundation-core-domain/models";
+import { PropertyDataType } from "../../../foundation-core-domain/models";
 import { getColor } from "./helpers";
 
 import FSIconCheck from "@dative-gpi/foundation-shared-components/components/FSIconCheck.vue";

package/components/customProperties/helpers.ts

@@ -1,5 +1,6 @@
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
-import { CustomPropertyInfos, FilterType, PropertyDataType } from "../../../foundation-core-domain/models";
+import type { CustomPropertyInfos} from "../../../foundation-core-domain/models";
+import { FilterType, PropertyDataType } from "../../../foundation-core-domain/models";
 
 const { getUserOffsetMillis, getMachineOffsetMillis } = useAppTimeZone();
 

package/components/lists/FSDataTable.vue

@@ -1,22 +1,16 @@
 <template>
   <FSLoadDataTable
-    v-if="gettingUserOrganisationTable"
+    v-if="!initialized || gettingUserOrganisationTable"
   />
   <FSDataTableUI
     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"
-    @update:page="updatePage"
-    v-bind="$attrs"
+    @update:rowsPerPage="table.rowsPerPage = $event"
+    @update:filters="table.filters = $event"
+    @update:headers="table.headers = $event"
+    @update:sortBy="table.sortBy = $event"
+    @update:mode="table.mode = $event"
+    @update:page="table.page = $event"
+    v-bind="{ ...computedTable, ...$attrs }"
   >
     <template
       v-for="(_, name) in $slots"
@@ -31,12 +25,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onUnmounted, ref, Ref, watch } from "vue";
-import { useRouter } from "vue-router";
+import { computed, defineComponent, onUnmounted, type PropType, watch } from "vue";
 
-import { useUserOrganisationTable, useUpdateUserOrganisationTable } from "@dative-gpi/foundation-core-services/composables";
-import { FSDataTableColumn, FSDataTableFilter, FSDataTableOrder } from "@dative-gpi/foundation-shared-components/models";
-import { useDebounce } from "@dative-gpi/foundation-shared-components/composables";
+import { useUserOrganisationTable, useUpdateUserOrganisationTable, useDataTables } from "@dative-gpi/foundation-core-services/composables";
+import { useDebounce, useTables } 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";
@@ -56,136 +48,59 @@ export default defineComponent({
       type: Number,
       required: false,
       default: 1000
+    },
+    customSorts: {
+      type: Object as PropType<{ [key: string]: any }>,
+      required: false,
+      default: () => ({})
+    },
+    customSortRaws: {
+      type: Object as PropType<{ [key: string]: any }>,
+      required: false,
+      default: () => ({})
     }
   },
   setup(props) {
-    const { get: getUserOrganisationTable, getting: gettingUserOrganisationTable, entity: userOrganisationTable } = useUserOrganisationTable();
+    const { get: getUserOrganisationTable, getting: gettingUserOrganisationTable } = useUserOrganisationTable();
+    const { initialized, table, updateTable, computeTable, onTableCodeChange } = useDataTables();
     const { update: updateUserOrganisationTable } = useUpdateUserOrganisationTable();
+    const { getTable, setTable } = useTables();
     const { debounce, cancel } = useDebounce();
-    const router = useRouter();
-
-    const innerHeaders: Ref<FSDataTableColumn[]> = ref([]);
-    const innerSortBy: Ref<FSDataTableOrder | null> = ref(null);
-    const innerMode: Ref<"table" | "iterator"> = ref("table");
-    const innerRowsPerPage = ref(10);
-
-    const innerFilters = ref<{ [key: string]: FSDataTableFilter[] }>({});
-    const innerPage = ref(1);
-
-    const reset = (): void => {
-      if (router.currentRoute.value.meta.tables && (router.currentRoute.value.meta.tables as any)[props.tableCode]) {
-        const meta = (router.currentRoute.value.meta.tables as any)[props.tableCode];
-        innerHeaders.value = meta.columns;
-        innerRowsPerPage.value = meta.rowsPerPage;
-        innerSortBy.value = meta.sortBy;
-        innerMode.value = meta.mode;
-        
-        innerFilters.value = meta.filters;
-        innerPage.value = meta.page;
-      }
-      else if (userOrganisationTable.value) {
-        innerHeaders.value = userOrganisationTable.value.columns;
-        innerRowsPerPage.value = userOrganisationTable.value.rowsPerPage;
-        if (userOrganisationTable.value.sortByKey && userOrganisationTable.value.sortByOrder) {
-          innerSortBy.value = {
-            key: userOrganisationTable.value.sortByKey,
-            order: userOrganisationTable.value.sortByOrder
-          };
-        }
-        innerMode.value = userOrganisationTable.value.mode;
-      }
-    };
-
-    const updateHeaders = (value: FSDataTableColumn[]): void => {
-      innerHeaders.value = value;
-      debounce(updateTable, props.debounceTime);
-    };
 
-    const updateMode = (value: "table" | "iterator"): void => {
-      innerMode.value = value;
-      debounce(updateTable, props.debounceTime);
-    };
-
-    const updateSortBy = (value: FSDataTableOrder | null): void => {
-      innerSortBy.value = value;
-      debounce(updateTable, props.debounceTime);
-    };
-
-    const updateRowsPerPage = (value: -1 | 10 | 30): void => {
-      innerRowsPerPage.value = value;
-      debounce(updateTable, props.debounceTime);
-    };
-
-    const updateFilters = (value: { [key: string]: FSDataTableFilter[] }): void => {
-      innerFilters.value = value;
-      updateRouter();
-    };
-
-    const updatePage = (value: number): void => {
-      innerPage.value = value;
-      updateRouter();
-    };
-
-    const updateTable = (): void => {
-      updateRouter();
-      updateUserOrganisationTable(props.tableCode, {
-        columns: innerHeaders.value.map(column => ({
-          columnId: column.columnId,
-          hidden: column.hidden,
-          index: column.index
-        })),
-        rowsPerPage: innerRowsPerPage.value,
-        sortByKey: innerSortBy.value?.key ?? null,
-        sortByOrder: innerSortBy.value?.order ?? null,
-        mode: innerMode.value
-      });
-    };
-
-    const updateRouter = (): void => {
-      if (router) {
-        router.currentRoute.value.meta.tables = {
-          ...(router.currentRoute.value.meta.tables as any),
-          [props.tableCode]: {
-            columns: innerHeaders.value,
-            filters: innerFilters.value,
-            rowsPerPage: innerRowsPerPage.value,
-            sortBy: innerSortBy.value,
-            mode: innerMode.value,
-            page: innerPage.value
-          }
-        };
-      }
-    };
+    const computedTable = computed(() => computeTable(props.customSorts, props.customSortRaws));
 
     onUnmounted(() => {
       cancel();
-      updateTable();
+      update();
     });
 
-    watch(() => props.tableCode, () => {
-      if (props.tableCode) {
-        getUserOrganisationTable(props.tableCode);
-      }
+    const update = () => {
+      updateTable(
+        updateUserOrganisationTable,
+        setTable,
+        props.tableCode
+      );
+    }
+
+    watch(() => props.tableCode, async (): Promise<void> => {
+      onTableCodeChange(
+        getUserOrganisationTable,
+        getTable,
+        props.tableCode
+      );
     }, { immediate: true });
 
-    watch(userOrganisationTable, () => {
-      reset();
-    });
+    watch(() => table.value, () => {
+      if (table.value && initialized.value) {
+        debounce(update, props.debounceTime);
+      }
+    }, { deep: true });
 
     return {
       gettingUserOrganisationTable,
-      innerRowsPerPage,
-      innerFilters,
-      innerHeaders,
-      innerSortBy,
-      innerMode,
-      innerPage,
-      updateRowsPerPage,
-      updateFilters,
-      updateHeaders,
-      updateSortBy,
-      updateMode,
-      updatePage
+      computedTable,
+      initialized,
+      table
     };
   },
 });