@dative-gpi/foundation-core-components 1.0.70 → 1.0.71-groupings-2

package/components/fields/FSMagicConfigField.vue

@@ -0,0 +1,171 @@
+<template>
+  <FSRow
+    class="fs-magic-config-field"
+  >
+    <component
+      v-if="$props.type"
+      class="fs-magic-config-field-value"
+      :is="get($props.type)"
+      :label="$tr('ui.common.value', 'Value')"
+      :disabled="$props.disabled"
+      :required="true"
+      :rules="rules"
+      :modelValue="valueToInput"
+      @update:modelValue="inputToValue"
+    />
+    <FSRow
+      gap="24px"
+    >
+      <FSTranslateField
+        :label="$tr('entity.common.label', 'Label')"
+        :disabled="$props.disabled"
+        :modelValue="$props.labelDefault"
+        :translations="$props.translations"
+        @update:modelValue="$emit('update:labelDefault', $event)"
+        @update:translations="$emit('update:translations', $event)"
+      />
+      <FSRow
+        class="fs-magic-config-field-actions"
+        width="hug"
+        :wrap="false"
+      >
+        <FSButtonRemoveIcon
+          @click="$emit('click:remove')"
+        />
+        <FSButtonAddIcon
+          @click="$emit('click:add')"
+        />
+      </FSRow>
+    </FSRow>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { DateRules, IconRules, NumberRules, TextRules, TimeRules, TimeStepRules, AutocompleteRules } from "@dative-gpi/foundation-shared-components/models";
+import { useMagicFieldProvider } from "@dative-gpi/foundation-core-services/composables";
+import { MagicFieldType } from "@dative-gpi/foundation-shared-domain/enums";
+
+import FSButtonRemoveIcon from "@dative-gpi/foundation-shared-components/components/buttons/FSButtonRemoveIcon.vue";
+import FSButtonAddIcon from "@dative-gpi/foundation-shared-components/components/buttons/FSButtonAddIcon.vue";
+import FSTranslateField from "@dative-gpi/foundation-shared-components/components/fields/FSTranslateField.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+
+export default defineComponent({
+  name: "FSMagicConfigField",
+  components: {
+    FSButtonRemoveIcon,
+    FSTranslateField,
+    FSButtonAddIcon,
+    FSRow
+  },
+  props: {
+    type: {
+      type: Number as PropType<MagicFieldType>,
+      required: false,
+      default: MagicFieldType.TextField
+    },
+    labelDefault: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    translations: {
+      type: Array as PropType<{ languageCode: string; label: string }[]>,
+      required: false,
+      default: () => []
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["click:remove", "click:add", "update:modelValue", "update:labelDefault", "update:translations"],
+  setup(props, { emit }) {
+    const { get } = useMagicFieldProvider();
+
+    const rules = computed((): Function[] => {
+      switch (props.type) {
+        case MagicFieldType.NumberField:
+          return [NumberRules.required()];
+        case MagicFieldType.TextField:
+          return [TextRules.required()];
+        case MagicFieldType.DateTimeField:
+          return [DateRules.required()];
+        case MagicFieldType.IconField:
+          return [IconRules.required()];
+        case MagicFieldType.TimeField:
+          return [TimeRules.required()];
+        case MagicFieldType.TimeStepField:
+          return [TimeStepRules.required()];
+        case MagicFieldType.PlotPerField:
+          return [AutocompleteRules.required()];
+      }
+      return [];
+    });
+
+    const valueToInput = computed((): any => {
+      if (!props.modelValue) {
+        return null;
+      }
+
+      switch (props.type) {
+        case MagicFieldType.NumberField:
+        case MagicFieldType.DateTimeField:
+        case MagicFieldType.TimeField:
+          if (isNaN(parseFloat(props.modelValue))) {
+            return null;
+          }
+          return parseFloat(props.modelValue);
+        case MagicFieldType.Switch: 
+          return props.modelValue === "true";
+        case MagicFieldType.TimeStepField:
+          return JSON.parse(props.modelValue);
+        case MagicFieldType.PlotPerField:
+          return parseInt(props.modelValue);
+        default:
+          return props.modelValue;
+      }
+    });
+
+    const inputToValue = (value: any) => {
+      if (!value) {
+        emit("update:modelValue", null);
+      }
+
+      switch (props.type) {
+        case MagicFieldType.NumberField:
+        case MagicFieldType.Switch: 
+        case MagicFieldType.DateTimeField:
+        case MagicFieldType.TimeField:
+          emit("update:modelValue", value.toString());
+          break;
+        case MagicFieldType.TimeStepField:
+          emit("update:modelValue", JSON.stringify(value));
+          break;
+        case MagicFieldType.PlotPerField:
+          emit("update:modelValue", value.toString());
+          break;
+        default:
+          emit("update:modelValue", value);
+          break;
+      }
+    };
+
+    return {
+      MagicFieldType,
+      valueToInput,
+      rules,
+      inputToValue,
+      get
+    };
+  },
+});
+</script>

package/components/fields/FSMagicField.vue

@@ -0,0 +1,214 @@
+<template>
+  <component
+    v-if="!$props.useOnlyAllowedValues"
+    :is="get($props.type)"
+    :modelValue="valueToInput"
+    @update:modelValue="inputToValue"
+    v-bind="{ ...$attrs, ...bindedProps }"
+  />
+  <FSSelectField
+    v-else
+    itemValue="value"
+    :items="items"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-if="$props.type === MagicFieldType.IconField"
+      #selection="{ item }"
+    >
+      <FSRow
+        align="center-center"
+        :wrap="false"
+      >
+        <FSIcon
+          v-if="item.raw.value"
+        >
+          {{ item.raw.value }}
+        </FSIcon>
+        <FSSpan
+          v-if="item.raw.value !== item.raw.label"
+        >
+          {{ item.raw.label }}
+        </FSSpan>
+      </FSRow>
+    </template>
+    <template
+      v-if="$props.type === MagicFieldType.IconField"
+      #item-label="{ item }"
+    >
+      <FSRow
+        align="center-center"
+        :wrap="false"
+      >
+        <FSIcon
+          v-if="item.raw.value"
+        >
+          {{ item.raw.value }}
+        </FSIcon>
+        <FSSpan
+          v-if="item.raw.value !== item.raw.label"
+        >
+          {{ item.raw.label }}
+        </FSSpan>
+      </FSRow>
+    </template>
+  </FSSelectField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
+
+import { useMagicFieldProvider } from "@dative-gpi/foundation-core-services/composables";
+import { MagicFieldType } from "@dative-gpi/foundation-shared-domain/enums";
+import { getTimeBestString, timeStepToString } from "@dative-gpi/foundation-shared-components/utils";
+
+import FSSelectField from "@dative-gpi/foundation-shared-components/components/fields/FSSelectField.vue";
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+
+export default defineComponent({
+  name: "FSMagicField",
+  components: {
+    FSSelectField,
+    FSIcon,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    type: {
+      type: Number as PropType<MagicFieldType>,
+      required: false,
+      default: MagicFieldType.TextField
+    },
+    modelValue: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    allowedValues: {
+      type: Array as PropType<{ value: string; label: string }[]>,
+      required: false,
+      default: () => []
+    },
+    useOnlyAllowedValues: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    meta: {
+      type: Object as PropType<Record<string, any>>,
+      required: false,
+      default: () => ({})
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { epochToShortTimeFormat } = useDateFormat();
+    const { $tr } = useTranslationsProvider();
+    const { get } = useMagicFieldProvider();
+
+    const items = computed(() => props.allowedValues.map((av) => ({
+      value: av.value,
+      label: av.label || asString(av.value),
+    })));
+
+    const valueToInput = computed((): any => {
+      if (props.modelValue == null) {
+        return null;
+      }
+
+      switch (props.type) {
+        case MagicFieldType.NumberField:
+        case MagicFieldType.DateTimeField:
+        case MagicFieldType.TimeField:
+          if (isNaN(parseFloat(props.modelValue))) {
+            return null;
+          }
+          return parseFloat(props.modelValue);
+        case MagicFieldType.Switch: 
+          return props.modelValue === "true";
+        case MagicFieldType.TimeStepField:
+        case MagicFieldType.PlotPerField:
+          return JSON.parse(props.modelValue);
+        default:
+          return props.modelValue;
+      }
+    });
+
+    const asString = (value: string): string | null => {
+      if (value == null) {
+        return "";
+      }
+      
+      switch (props.type) {
+        case MagicFieldType.NumberField:
+          return value.toString();
+        case MagicFieldType.Switch:
+          if (value) {
+            return $tr("magic-field.true", "True");
+          }
+          return $tr("magic-field.false", "False");
+        case MagicFieldType.DateTimeField:
+          return epochToShortTimeFormat(parseFloat(value));
+        case MagicFieldType.TimeField:
+          return getTimeBestString(parseFloat(value));
+        case MagicFieldType.TimeStepField:
+          return timeStepToString(JSON.parse(value));
+        case MagicFieldType.PlotPerField:
+          return JSON.parse(value).plotPer;
+        default:
+          return value;
+      }
+    }
+
+    const inputToValue = (value: any) => {
+      if (value == null) {
+        emit("update:modelValue", null);
+      }
+
+      switch (props.type) {
+        case MagicFieldType.NumberField:
+        case MagicFieldType.Switch: 
+        case MagicFieldType.DateTimeField:
+        case MagicFieldType.TimeField:
+          emit("update:modelValue", value.toString());
+          break;
+        case MagicFieldType.TimeStepField:
+        case MagicFieldType.PlotPerField:
+          emit("update:modelValue", JSON.stringify(value));
+          break;
+        default:
+          emit("update:modelValue", value);
+          break;
+      }
+    };
+
+    const bindedProps = computed(() => {
+      switch (props.type) {
+        case MagicFieldType.PlotPerField:
+          return {
+            showSelector: props.meta.showSelector ?? true
+          }
+        default:
+          return {};
+      }
+    });
+
+    return {
+      MagicFieldType,
+      valueToInput,
+      bindedProps,
+      items,
+      inputToValue,
+      get
+    };
+  },
+});
+</script>

package/components/lists/FSDataTable.vue

@@ -1,10 +1,11 @@
 <template>
   <FSLoadDataTable
-    v-if="!initialized || gettingUserOrganisationTable"
+    v-if="($props.tableCode && !initialized) || gettingUserOrganisationTable || !table"
   />
   <FSDataTableUI
     v-else
     @update:rowsPerPage="table.rowsPerPage = $event"
+    @update:showFilters="table.showFilters = $event"
     @update:filters="table.filters = $event"
     @update:headers="table.headers = $event"
     @update:sortBy="table.sortBy = $event"
@@ -41,15 +42,26 @@ export default defineComponent({
     FSDataTableUI
   },
   props: {
+    defaultMode: {
+      type: String as PropType<"table" | "iterator">,
+      required: false,
+      default: "table"
+    },
     tableCode: {
-      type: String,
-      required: true
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     },
     debounceTime: {
       type: Number,
       required: false,
       default: 1000
     },
+    extraHeaders: {
+      type: Array as PropType<FSDataTableColumn[]>,
+      required: false,
+      default: () => []
+    },
     headersOptions: {
       type: Object as PropType<{ [key: string]: Partial<FSDataTableColumn> }>,
       required: false,
@@ -63,7 +75,7 @@ export default defineComponent({
     const { getTable, setTable } = useTables();
     const { debounce, cancel } = useDebounce();
 
-    const computedTable = computed(() => computeTable(props.headersOptions));
+    const computedTable = computed(() => computeTable(props.headersOptions, props.defaultMode, props.extraHeaders));
 
     onUnmounted(() => {
       cancel();
@@ -71,23 +83,17 @@ export default defineComponent({
     });
 
     const update = () => {
-      updateTable(
-        updateUserOrganisationTable,
-        setTable,
-        props.tableCode
-      );
+      if (props.tableCode) {
+        updateTable(updateUserOrganisationTable, setTable, props.tableCode, props.defaultMode);
+      }
     }
 
     watch(() => props.tableCode, async (): Promise<void> => {
-      onTableCodeChange(
-        getUserOrganisationTable,
-        getTable,
-        props.tableCode
-      );
+      onTableCodeChange(getUserOrganisationTable, getTable, props.tableCode, props.defaultMode);
     }, { immediate: true });
 
-    watch(() => table.value, () => {
-      if (table.value && initialized.value) {
+    watch(() => (table.value ? { ...table.value } : null), (_, former) => {
+      if (table.value && former && initialized.value) {
         debounce(update, props.debounceTime);
       }
     }, { deep: true });