@dative-gpi/foundation-core-components 0.0.96 → 0.0.98

package/components/customProperties/FSMetaField.vue

@@ -0,0 +1,195 @@
+<template>
+  <FSSelectField
+    v-if="$props.customProperty.useOnlyAllowedValues"
+    :label="$props.customProperty.label"
+    :items="Object.keys($props.customProperty.allowedValues)"
+    :disabled="!editable"
+    :modelValue="$props.modelValue"
+    @update:modelValue="(event) => $emit('update:modelValue', event)"
+  >
+    <template
+      #selection="{ item }"
+    >
+      <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, PropertyDataType.DateTime].includes(customProperty.dataType)"
+        class="text-body-1"
+      >
+        {{ asSelector(item.value) }}
+      </FSSpan>
+      <FSIcon
+        v-else-if="[PropertyDataType.Boolean, PropertyDataType.Icon].includes(customProperty.dataType)"
+      >
+        {{ asSelector(item.value) }}
+      </FSIcon>
+    </template>
+    <template
+      #item="{ props, item }"
+    >
+      <v-list-item
+        v-bind="{ ...props, title: '' }"
+      >
+        <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>
+    </template>
+  </FSSelectField>
+  <template
+    v-else
+  >
+    <FSNumberField
+      v-if="$props.customProperty.dataType === PropertyDataType.Number"
+      :label="$props.customProperty.label"
+      :disabled="!editable"
+      :modelValue="asNumber()"
+      @update:modelValue="(event) => $emit('update:modelValue', event.toString())"
+    />
+    <FSSwitch
+      v-else-if="$props.customProperty.dataType === PropertyDataType.Boolean"
+      :label="$props.customProperty.label"
+      :editable="editable"
+      :modelValue="asBoolean()"
+      @update:modelValue="(event) => $emit('update:modelValue', event.toString())"
+    />
+    <FSTextField
+      v-else-if="$props.customProperty.dataType === PropertyDataType.String"
+      :label="$props.customProperty.label"
+      :disabled="!editable"
+      :modelValue="$props.modelValue"
+      @update:modelValue="(event) => $emit('update:modelValue', event)"
+    />
+    <FSDateTimeField
+      v-else-if="$props.customProperty.dataType === PropertyDataType.DateTime"
+      :label="$props.customProperty.label"
+      :editable="editable"
+      :modelValue="asNumber()"
+      @update:modelValue="(event) => $emit('update:modelValue', (event + getMachineOffsetMillis() - getUserOffsetMillis()).toString())"
+    />
+    <FSIconField
+      v-else-if="$props.customProperty.dataType === PropertyDataType.Icon"
+      :label="$props.customProperty.label" 
+      :editable="editable"
+      :modelValue="modelValue"
+      @update:modelValue="(event) => $emit('update:modelValue', event.toString()) "
+    />
+  </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 { CustomPropertyInfos, PropertyDataType } from "../../../foundation-core-domain/models";
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+
+
+export default defineComponent({
+  name: "FSMetaField",
+  components: {
+    FSSwitch,
+    FSIconField,
+    FSSelectField,
+    FSNumberField,
+    FSDateTimeField
+  },
+  props: {
+    customProperty: {
+      type: Object as PropType<CustomPropertyInfos>,
+      required: true
+    },
+    modelValue: {
+      type: String,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  setup(props) {
+    const { epochToLongTimeFormat, epochToPicker, getUserOffsetMillis, getMachineOffsetMillis } = useAppTimeZone();
+
+    const asSelector = (item: string): string => {
+      switch (props.customProperty.dataType) {
+        case PropertyDataType.Boolean: {
+          if (item?.toLowerCase() === "true") {
+            return "mdi-check-circle-outline";
+          }
+          return "mdi-close-circle-outline";
+        }
+        case PropertyDataType.DateTime: {
+          return epochToLongTimeFormat(parseInt(item));
+        }
+        default: {
+          return item;
+        }
+      }
+    }
+
+    const asNumber = (): number | undefined => {
+      if (!isNaN(parseFloat(props.modelValue))) {
+        return parseFloat(props.modelValue);
+      }
+      return undefined;
+    }
+
+    const asBoolean = (): boolean => {
+      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);
+      }
+      return epochToPicker(epoch) ?? undefined;
+    }
+
+    return {
+      PropertyDataType,
+      getMachineOffsetMillis,
+      getUserOffsetMillis,
+      asSelector,
+      asDateTime,
+      asBoolean,
+      asNumber
+    };
+  }
+});
+</script>

package/components/customProperties/FSMetaFormContent.vue

@@ -0,0 +1,73 @@
+<template>
+  <FSCol
+    :gap="24"
+  >
+    <FSCol
+      v-for="(properties, category) in categories"
+      :key="category"
+      :gap="16"
+    >
+      <FSRow>
+        <FSText
+          font="text-h3"
+        >
+          {{ category }}
+        </FSText>
+      </FSRow>
+      <FSMetaField
+        v-for="(property, index) in properties"
+        :customProperty="property"
+        :editable="editable"
+        :key="index"
+        :modelValue="modelValue[property.code]"
+        @update:modelValue="(event) => $emit('update:modelValue', { ...modelValue, [property.code]: event})"
+      />
+    </FSCol>
+  </FSCol>
+</template>
+
+  <script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+import { CustomPropertyInfos } from '@dative-gpi/foundation-core-domain/models';
+
+import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
+
+import FSMetaField from './FSMetaField.vue';
+
+export default defineComponent({
+  name: "FSMetaFormContent",
+  components: {
+    FSMetaField,
+    FSText
+  },
+  props: {
+    customProperties: {
+      type: [Object] as PropType<CustomPropertyInfos[]>,
+      required: true
+    },
+    modelValue: {
+      type: Object as PropType<{ [key: string]: string }>,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  setup(props) {
+    const categories = props.customProperties.reduce((acc, curr) => {
+      if (acc[curr.categoryLabel] === undefined) {
+        acc[curr.categoryLabel] = [];
+      }
+      acc[curr.categoryLabel].push(curr);
+      return acc;
+    }, {} as { [key: string]: CustomPropertyInfos[] });
+
+    return {
+      categories
+    };
+  }
+});
+</script>

package/components/customProperties/FSMetaHistory.vue

@@ -0,0 +1,89 @@
+<template>
+  <FSButton
+    prependIcon="mdi-history"
+    label="history"
+    @click="dialog = !dialog"
+  />
+  <FSDialog
+    title="History"
+    width="500px"
+    v-model="dialog"
+  >
+    <template
+      #body
+    >
+      <FSCol>
+        <FSRow
+          v-for="(customPropertyValue, index) in customPropertyValues"
+          :key="index"
+        >
+          <FSText>{{ epochToLongTimeFormat(customPropertyValue.timestamp) }}</FSText>
+          <FSCol
+            padding="0 8px 0 0"
+            align="center-right"
+          >
+            <FSMetaValue
+              :customProperty="$props.customProperty"
+              :meta="{ code: customPropertyValue.value }"
+            />
+          </FSCol>
+        </FSRow>
+      </FSCol>
+    </template>
+  </FSDialog>
+</template>
+<script lang="ts">
+import { PropType, defineComponent, ref, watch } from 'vue';
+import _ from 'lodash';
+
+import { useAppTimeZone } from '@dative-gpi/foundation-shared-services/composables';
+
+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 { useCustomPropertyValues } from '../../../foundation-core-services/composables';
+
+import FSMetaValue from './FSMetaValue.vue';
+
+export default defineComponent({
+  name: 'FSMetaHistory',
+  components: {
+    FSMetaValue,
+    FSButton,
+    FSDialog
+  },
+  props: {
+    customProperty: {
+      type: Object as PropType<CustomPropertyInfos>,
+      required: true
+    },
+    entityType: {
+      type: Number as PropType<PropertyEntity>,
+      required: true
+    },
+    entityId: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    const { epochToLongTimeFormat } = useAppTimeZone();
+    const { fetch, entity: customPropertyValues } = useCustomPropertyValues();
+
+    const dialog = ref(false);
+
+    watch(() => props.entityId, async (next, previous) => {
+      if (!_.isEqual(next, previous)) {
+        await fetch(props.entityType, props.entityId, props.customProperty.code);
+      }
+    }, { immediate: true });
+
+    return {
+      customPropertyValues,
+      dialog,
+      epochToLongTimeFormat
+    }
+  }
+});
+</script>

package/components/customProperties/FSMetaValue.vue

@@ -0,0 +1,75 @@
+<template>
+  <FSText
+    v-if="$props.customProperty.useOnlyAllowedValues && $props.customProperty.allowedValues[meta[$props.customProperty.code]] != null"
+    :color="getColor($props.customProperty, meta[$props.customProperty.code])"
+  >
+    {{ value }}
+  </FSText>
+  <FSText
+    v-else-if="[PropertyDataType.Number, PropertyDataType.String, PropertyDataType.DateTime].includes($props.customProperty.dataType)"
+    :color="getColor($props.customProperty, meta[$props.customProperty.code])"
+  >
+    {{ value }}
+  </FSText>
+  <FSIcon
+    v-else-if="[PropertyDataType.Boolean, PropertyDataType.Icon].includes($props.customProperty.dataType)"
+    :color="getColor($props.customProperty, meta[$props.customProperty.code])"
+  >
+    {{ value }}
+  </FSIcon>
+</template>
+
+<script lang="ts">
+import { PropType, computed, defineComponent } from "vue";
+
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+
+import { CustomPropertyInfos, PropertyDataType } from "../../../foundation-core-domain/models";
+import { getColor } from "./helpers";
+
+
+export default defineComponent({
+  name: "FSMetaValue",
+  props: {
+    customProperty: {
+      type: Object as PropType<CustomPropertyInfos>,
+      required: true
+    },
+    meta: {
+      type: Object as PropType<{ [key: string]: string }>,
+      required: true
+    }
+  },
+  setup(props) {
+    const { epochToLongTimeFormat } = useAppTimeZone();
+
+    const value = computed((): string => {
+      if (props.customProperty.useOnlyAllowedValues) {
+        if (props.customProperty.allowedValues[props.meta[props.customProperty.code]] != null) {
+          return props.customProperty.allowedValues[props.meta[props.customProperty.code]];
+        }
+      }
+      switch (props.customProperty.dataType) {
+        case PropertyDataType.Boolean: {
+          if (props.meta[props.customProperty.code]?.toLowerCase() === "true") {
+            return "mdi-check-circle-outline";
+          }
+          return "mdi-close-circle-outline";
+        }
+        case PropertyDataType.DateTime: {
+          return epochToLongTimeFormat(parseInt(props.meta[props.customProperty.code]));
+        }
+        default: {
+          return props.meta[props.customProperty.code];
+        }
+      }
+    });
+
+    return {
+      PropertyDataType,
+      value,
+      getColor
+    };
+  }
+});
+</script>

package/components/customProperties/helpers.ts

@@ -0,0 +1,190 @@
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { CustomPropertyInfos, FilterType, PropertyDataType } from "../../../foundation-core-domain/models";
+
+const { getUserOffsetMillis, getMachineOffsetMillis } = useAppTimeZone();
+
+export const getColor = (property: CustomPropertyInfos, value: string): string | undefined => {
+    if (property.colorful) {
+        for (const color of [...property.colorMap].sort((a, b) => b.priority - a.priority)) {
+            let filterValues = [...color.filterValues];
+            if ([PropertyDataType.DateTime].includes(property.dataType)) {
+                filterValues = filterValues.map(fv => getEpoch(fv));
+            }
+            switch (color.filterType) {
+                case FilterType.None: return color.color;
+                case FilterType.Equal: {
+                    if (filterValues.includes(value)) {
+                        return color.color;
+                    }
+                    break;
+                }
+                case FilterType.More: {
+                    if (!isNaN(parseFloat(value))) {
+                        if (filterValues.some(fv => !isNaN(parseFloat(fv)) && parseFloat(fv) < parseFloat(value))) {
+                            return color.color;
+                        }
+                    }
+                    break;
+                }
+                case FilterType.Less: {
+                    if (!isNaN(parseFloat(value))) {
+                        if (filterValues.some(fv => !isNaN(parseFloat(fv)) && parseFloat(fv) > parseFloat(value))) {
+                            return color.color;
+                        }
+                    }
+                    break;
+                }
+                case FilterType.MoreOrEqual: {
+                    if (!isNaN(parseFloat(value))) {
+                        if (filterValues.some(fv => !isNaN(parseFloat(fv)) && parseFloat(fv) <= parseFloat(value))) {
+                            return color.color;
+                        }
+                    }
+                    break;
+                }
+                case FilterType.LessOrEqual: {
+                    if (!isNaN(parseFloat(value))) {
+                        if (filterValues.some(fv => !isNaN(parseFloat(fv)) && parseFloat(fv) >= parseFloat(value))) {
+                            return color.color;
+                        }
+                    }
+                    break;
+                }
+                case FilterType.Different: {
+                    if (!filterValues.includes(value)) {
+                        return color.color;
+                    }
+                    break;
+                }
+                case FilterType.Contains: {
+                    if (filterValues.some(fv => value.includes(fv))) {
+                        return color.color;
+                    }
+                    break;
+                }
+                case FilterType.StartsWith: {
+                    if (filterValues.some(fv => value.startsWith(fv))) {
+                        return color.color;
+                    }
+                    break;
+                }
+                case FilterType.EndsWith: {
+                    if (filterValues.some(fv => value.endsWith(fv))) {
+                        return color.color;
+                    }
+                    break;
+                }
+            }
+        }
+    }
+}
+
+const getEpoch = (expression: string): string => {
+    if (!isNaN(parseInt(expression))) {
+        return expression;
+    }
+
+    const date = new Date();
+    if (expression.startsWith("now")) {
+        expression = expression.substring(3).replace(/\s/g, "");
+    }
+    else {
+        return (date.getTime()).toString();
+    }
+    let match = /^(?:(?:([-+])(\d*))?(\w+))?(?:\/(\w))?/g.exec(expression);
+    while (match != null && (match[0] != null && match[0].length > 0)) {
+        if (match[1] != null && match[3] != null) {
+            if (!["-", "+"].includes(match[1]) || isNaN(parseInt(match[2])) || !["s", "m", "h", "d", "w", "M", "y"].includes(match[3])) {
+                return (date.getTime()).toString();
+            }
+            const offset = match[1] == "-" ? -1 * parseInt(match[2]): 1* parseInt(match[2]);
+            switch (match[3]) {
+                case "s": {
+                    date.setSeconds(date.getSeconds() + offset);
+                    break;
+                }
+                case "m": {
+                    date.setMinutes(date.getMinutes() + offset);
+                    break;
+                }
+                case "h": {
+                    date.setHours(date.getHours() + offset);
+                    break;
+                }
+                case "d": {
+                    date.setDate(date.getDate() + offset);
+                    break;
+                }
+                case "w": {
+                    date.setDate(date.getDate() + offset * 7);
+                    break;
+                }
+                case "M": {
+                    date.setMonth(date.getMonth() + offset);
+                    break;
+                }
+                case "y": {
+                    date.setFullYear(date.getFullYear() + offset);
+                    break;
+                }
+            }
+        }
+        if (match[4] != null) {
+            if (!["s", "m", "h", "d", "w", "M", "y"].includes(match[4])) {
+                return (date.getTime()).toString();
+            }
+            switch (match[4]) {
+                case "s": {
+                    date.setMilliseconds(0);
+                    break;
+                }
+                case "m": {
+                    date.setMilliseconds(0);
+                    date.setSeconds(0);
+                    break;
+                }
+                case "h": {
+                    date.setMilliseconds(0);
+                    date.setSeconds(0);
+                    date.setMinutes(0);
+                    break;
+                }
+                case "d": {
+                    date.setMilliseconds(0);
+                    date.setSeconds(0);
+                    date.setMinutes(0);
+                    date.setHours(0);
+                    break;
+                }
+                case "w": {
+                    date.setMilliseconds(0);
+                    date.setSeconds(0);
+                    date.setMinutes(0);
+                    date.setHours(0);
+                    date.setDate(date.getDate() - date.getDay() + (date.getDay() === 0 ? -6 : 1));
+                    break;
+                }
+                case "M": {
+                    date.setMilliseconds(0);
+                    date.setSeconds(0);
+                    date.setMinutes(0);
+                    date.setHours(0);
+                    date.setDate(1);
+                    break;
+                }
+                case "y": {
+                    date.setMilliseconds(0);
+                    date.setSeconds(0);
+                    date.setMinutes(0);
+                    date.setHours(0);
+                    date.setDate(1);
+                    date.setMonth(0);
+                    break;
+                }
+            }
+        }
+        expression = expression.substring(match[0].length);
+        match = /(?:(?:([-+])(\d*))?(\w+))?(?:\/(\w))?/g.exec(expression);
+    }
+    return (date.getTime() + getMachineOffsetMillis() - getUserOffsetMillis()).toString();
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-core-components",
   "sideEffects": false,
-  "version": "0.0.96",
+  "version": "0.0.98",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,11 +10,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-core-domain": "0.0.96",
-    "@dative-gpi/foundation-core-services": "0.0.96",
-    "@dative-gpi/foundation-shared-components": "0.0.96",
-    "@dative-gpi/foundation-shared-domain": "0.0.96",
-    "@dative-gpi/foundation-shared-services": "0.0.96",
+    "@dative-gpi/foundation-core-domain": "0.0.98",
+    "@dative-gpi/foundation-core-services": "0.0.98",
+    "@dative-gpi/foundation-shared-components": "0.0.98",
+    "@dative-gpi/foundation-shared-domain": "0.0.98",
+    "@dative-gpi/foundation-shared-services": "0.0.98",
     "color": "^4.2.3",
     "vue": "^3.4.23",
     "vuedraggable": "^4.1.0"
@@ -24,5 +24,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "36732331c6f295bbcd3abc4fe5e32d877fb8d80c"
+  "gitHead": "3e3b2cf8888bd50741bd2d91a76ebb7f53ff5f27"
 }