@dative-gpi/foundation-core-components 1.0.66 → 1.0.67-map-edit

package/components/customProperties/FSMetaField.vue

@@ -1,49 +1,27 @@
 <template>
   <FSSelectField
     v-if="$props.customProperty.useOnlyAllowedValues"
-    class="fs-meta-field"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
+    :itemTitle="itemTitle"
     :label="$props.label"
+    :class="classes"
     :items="items"
     :modelValue="$props.modelValue"
     @update:modelValue="onUpdate"
   >
     <template
-      #selection="{ item }"
+      v-if="$props.customProperty.dataType === PropertyDataType.Icon"
+      #item-prepend="{ item }"
     >
       <FSIcon
-        v-if="item.raw.icon"
+        v-if="item.icon"
       >
-        {{ item.raw.icon }}
-      </FSIcon>
-      <FSText
-        v-else
-      >
-        {{ item.raw.label }}
-      </FSText>
-    </template>
-    <template
-      #selection-mobile="{ item }"
-    >
-      <FSIcon
-        v-if="item.raw.icon"
-      >
-        {{ item.raw.icon }}
-      </FSIcon>
-    </template>
-    <template
-      #item-label="{ item, font }"
-    >
-      <FSIcon
-        v-if="item.raw.icon"
-      >
-        {{ item.raw.icon }}
+        {{ item.icon }}
       </FSIcon>
       <FSSpan
         v-else
-        :font="font"
       >
-        {{ item.raw.label }}
+        {{ item.label }}
       </FSSpan>
     </template>
   </FSSelectField>
@@ -52,35 +30,35 @@
   >
     <FSNumberField
       v-if="$props.customProperty.dataType === PropertyDataType.Number"
-      :editable="$props.editable"
+      :disabled="$props.disabled"
       :label="$props.label"
       :modelValue="asNumber()"
       @update:modelValue="onUpdate"
     />
     <FSSwitch
       v-else-if="$props.customProperty.dataType === PropertyDataType.Boolean"
-      :editable="$props.editable"
+      :disabled="$props.disabled"
       :label="$props.label"
       :modelValue="asBoolean()"
       @update:modelValue="onUpdate"
     />
     <FSTextField
       v-else-if="$props.customProperty.dataType === PropertyDataType.String"
-      :editable="$props.editable"
+      :disabled="$props.disabled"
       :label="$props.label"
       :modelValue="$props.modelValue"
       @update:modelValue="onUpdate"
     />
     <FSDateTimeField
       v-else-if="$props.customProperty.dataType === PropertyDataType.DateTime"
-      :editable="$props.editable"
+      :disabled="$props.disabled"
       :label="$props.label"
       :modelValue="asNumber()"
       @update:modelValue="onUpdate"
     />
     <FSIconField
       v-else-if="$props.customProperty.dataType === PropertyDataType.Icon"
-      :editable="$props.editable"
+      :disabled="$props.disabled"
       :label="$props.label" 
       :modelValue="modelValue"
       @update:modelValue="onUpdate"
@@ -103,7 +81,6 @@ import FSIconField from "@dative-gpi/foundation-shared-components/components/fie
 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",
@@ -114,8 +91,7 @@ export default defineComponent({
     FSIconField,
     FSSwitch,
     FSIcon,
-    FSSpan,
-    FSText
+    FSSpan
   },
   props: {
     label: {
@@ -132,10 +108,10 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -180,6 +156,23 @@ export default defineComponent({
       });
     });
 
+    const itemTitle = computed((): string => {
+      switch (props.customProperty.dataType) {
+        case PropertyDataType.Icon: return "";
+        default                   : return "label";
+      };
+    });
+
+    const classes = computed((): string[] => {
+      const classNames = ["fs-meta-field"];
+      switch(props.customProperty.dataType) {
+        case PropertyDataType.Icon: 
+          classNames.push("fs-meta-icon-field"); 
+          break;
+      }
+      return classNames;
+    });
+
     const asNumber = (): number | null => {
       if (!props.modelValue) {
         return null;
@@ -216,6 +209,8 @@ export default defineComponent({
 
     return {
       PropertyDataType,
+      itemTitle,
+      classes,
       items,
       asBoolean,
       asNumber,

package/components/customProperties/FSMetaFormContent.vue

@@ -17,7 +17,7 @@
       <FSMetaField
         v-for="(property, index) in properties"
         :customProperty="property"
-        :editable="editable"
+        :disabled="disabled"
         :key="index"
         :modelValue="modelValue[property.code]"
         @update:modelValue="(event) => $emit('update:modelValue', { ...modelValue, [property.code]: event})"
@@ -50,12 +50,13 @@ export default defineComponent({
       type: Object as PropType<{ [key: string]: string }>,
       required: true
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
+  emits: ["update:modelValue"],
   setup(props) {
     const categories = props.customProperties.reduce((acc, curr) => {
       if (acc[curr.categoryLabel] === undefined) {

package/components/customProperties/FSMetaHistory.vue

@@ -1,12 +1,12 @@
 <template>
   <FSButton
     prependIcon="mdi-history"
-    :label="$tr('entity.custom-property.history', 'History')"
+    :label="$tr('ui.common.history', 'History')"
     @click="dialog = !dialog"
   />
   <FSDialog
     width="500px"
-    :label="$tr('entity.custom-property.history', 'History')"
+    :label="$tr('ui.common.history', 'History')"
     v-model="dialog"
   >
     <template

package/components/customProperties/helpers.ts

@@ -1,192 +1,84 @@
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateExpression } from "@dative-gpi/foundation-shared-services/composables";
 import { FilterType, PropertyDataType } from "@dative-gpi/foundation-shared-domain/enums";
 
-import { type CustomPropertyInfos,  } from "../../../foundation-core-domain/models";
+import { type CustomPropertyInfos } from "@dative-gpi/foundation-core-domain/models";
 
-const { getOffsetDifference } = useAppTimeZone();
+const { convert: convertExpressionToEpoch } = useDateExpression();
 
 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;
+    if (!property.colorful) {
+        return undefined;
+    }
+
+    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 => convertExpressionToEpoch(fv).toString());
+        }
+        switch (color.filterType) {
+            case FilterType.None: return color.color;
+            case FilterType.Equal: {
+                if (filterValues.includes(value)) {
+                    return color.color;
                 }
-                case FilterType.Different: {
-                    if (!filterValues.includes(value)) {
+                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.Contains: {
-                    if (filterValues.some(fv => value.includes(fv))) {
+                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.StartsWith: {
-                    if (filterValues.some(fv => value.startsWith(fv))) {
+                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.EndsWith: {
-                    if (filterValues.some(fv => value.endsWith(fv))) {
+                break;
+            }
+            case FilterType.LessOrEqual: {
+                if (!isNaN(parseFloat(value))) {
+                    if (filterValues.some(fv => !isNaN(parseFloat(fv)) && parseFloat(fv) >= parseFloat(value))) {
                         return color.color;
                     }
-                    break;
                 }
+                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 FilterType.Different: {
+                if (!filterValues.includes(value)) {
+                    return color.color;
                 }
-                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();
+                break;
             }
-            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 FilterType.Contains: {
+                if (filterValues.some(fv => value.includes(fv))) {
+                    return color.color;
                 }
-                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;
+                break;
+            }
+            case FilterType.StartsWith: {
+                if (filterValues.some(fv => value.startsWith(fv))) {
+                    return color.color;
                 }
-                case "y": {
-                    date.setMilliseconds(0);
-                    date.setSeconds(0);
-                    date.setMinutes(0);
-                    date.setHours(0);
-                    date.setDate(1);
-                    date.setMonth(0);
-                    break;
+                break;
+            }
+            case FilterType.EndsWith: {
+                if (filterValues.some(fv => value.endsWith(fv))) {
+                    return color.color;
                 }
+                break;
             }
         }
-        expression = expression.substring(match[0].length);
-        match = /(?:(?:([-+])(\d*))?(\w+))?(?:\/(\w))?/g.exec(expression);
     }
-    return (date.getTime() + getOffsetDifference()).toString();
-}
+}

package/components/entities/FSBaseEntitiesList.vue

@@ -2,7 +2,17 @@
   <component 
     :is="component"
     v-bind="$attrs"
-  />
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </component>
 </template>
 
 <script lang="ts">
@@ -43,7 +53,7 @@ export default defineComponent({
     });
 
     return {
-      component,
+      component
     }
   }
 });

package/components/entities/FSDialogSelectEntities.vue

@@ -10,11 +10,22 @@
       #body
     >
       <FSSelectEntitiesList
+        :singleSelect="$props.singleSelect"
         :entityType="$props.entityType"
         :modelValue="actualSelecteds"
         :filters="$props.filters"
         @update:modelValue="actualSelecteds = $event"
-      />
+      >
+        <template
+          v-for="(_, name) in $slots"
+          v-slot:[name]="slotData"
+        >
+          <slot
+            :name="name"
+            v-bind="slotData"
+          />
+        </template>
+      </FSSelectEntitiesList>
     </template>
   </FSDialogSubmit>
 </template>
@@ -33,7 +44,7 @@ export default defineComponent({
     FSSelectEntitiesList,
     FSDialogSubmit,
   },
-  emits: ["update:modelValue", "update:selecteds"],
+  emits: ["update", "update:modelValue", "update:selecteds"],
   props: {
     entityType: {
       type: Number as PropType<EntityType>,
@@ -44,6 +55,11 @@ export default defineComponent({
       required: false,
       default: () => []
     },
+    singleSelect: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     filters: {
       type: Object,
       required: false,
@@ -61,6 +77,7 @@ export default defineComponent({
     const onSubmit = () => {
       emit("update:selecteds", actualSelecteds.value);
       emit("update:modelValue", false);
+      emit("update", { selecteds: actualSelecteds.value, modelValue: false });
     }
 
     watch(() => props.selecteds, (value) => {

package/components/entities/FSEntityField.vue

@@ -3,13 +3,13 @@
     :description="$props.description"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :label="$props.label"
     :messages="$props.messages"
     :entityType="$props.entityType"
     :allowedEntityTypes="$props.allowedEntityTypes || []"
     :itemsCount="($props.modelValue || []).length"
-    @update:entityType="$emit('update:entityType', $event); $emit('update:modelValue', [])"
+    @update:entityType="onEntityTypeChanged"
     :showEntities="$props.showEntities"
     :showCount="$props.showCount"
     @click:select="dialog = true"
@@ -19,18 +19,19 @@
     >
       <FSSimpleEntitiesList
         :entity-type="$props.entityType"
-        :filters="listComponentFilters"
+        :filters="simpleListFilters"
         :showEdit="false"
         @click:remove="onRemove"
       />
     </template>
   </FSEntityFieldUI>
   <FSDialogSelectEntities
+    :singleSelect="$props.singleSelect"
     :entity-type="$props.entityType"
     :filters="$props.filters"
     v-model="dialog"
     :selecteds="$props.modelValue || []"
-    @update:selecteds="$emit('update:modelValue', $event)"
+    @update:selecteds="onModelValueChanged"
   />
 </template>
 
@@ -40,7 +41,7 @@ import { defineComponent, ref, type PropType, computed } from "vue";
 
 import { EntityType } from "@dative-gpi/foundation-shared-domain/enums";
 
-import type { DeviceOrganisationFilters } from "@dative-gpi/foundation-core-domain/models";
+import type { DashboardOrganisationFilters, DashboardOrganisationTypeFilters, DeviceOrganisationFilters, FolderFilters, GroupFilters, LocationFilters, ModelFilters, UserOrganisationFilters } from "@dative-gpi/foundation-core-domain/models";
 
 import FSEntityFieldUI from "@dative-gpi/foundation-shared-components/components/fields/FSEntityFieldUI.vue";
 
@@ -95,10 +96,10 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     },
     entityType: {
       type: Number as PropType<EntityType>,
@@ -114,35 +115,89 @@ export default defineComponent({
       required: false,
       default: true
     },
+    singleSelect: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     showCount: {
       type: Boolean,
       required: false,
       default: true
     }
   },
-  emits: ["update:modelValue", "update:entityType"],
+  emits: ["update","update:modelValue", "update:entityType"],
   setup(props, { emit }) {
     const dialog = ref(false);
 
-    const listComponentFilters = computed(() => {
+    const simpleListFilters = computed(() => {
       switch(props.entityType) {
         case EntityType.Device:
           return { 
             deviceOrganisationsIds: props.modelValue
           } satisfies DeviceOrganisationFilters;
+        case EntityType.Dashboard:
+          return {
+            dashboardOrganisationsIds: props.modelValue,
+            dashboardOrganisationTypesIds: props.modelValue,
+            dashboardShallowsIds: props.modelValue
+          } satisfies DashboardOrganisationFilters & DashboardOrganisationTypeFilters;
+        case EntityType.Group:
+          return {
+            groupsIds: props.modelValue
+          } satisfies GroupFilters;
+        case EntityType.Folder:
+          return {
+            foldersIds: props.modelValue
+          } satisfies FolderFilters;
+        case EntityType.Location:
+          return {
+            locationsIds: props.modelValue
+          } satisfies LocationFilters;
+        case EntityType.User:
+          return {
+            userOrganisationsIds: props.modelValue
+          } satisfies UserOrganisationFilters;
+        case EntityType.Model:
+          return {
+            modelsIds: props.modelValue
+          } satisfies ModelFilters;
         default:
-          return {};
+          return undefined;
       };
-    });
+    })
 
     const onRemove = (id: string) => {
       emit("update:modelValue", props.modelValue.filter((i) => i !== id));
+      emit("update", {
+        entityType: props.entityType,
+        modelValue: props.modelValue.filter((i) => i !== id)
+      })
+    }
+
+    const onEntityTypeChanged = (entityType: EntityType) => {
+      emit('update:entityType', entityType); 
+      emit('update:modelValue', []);
+      emit("update", {
+        entityType,
+        modelValue: []
+      })
+    }
+
+    const onModelValueChanged = (modelValue: string[]) => {
+      emit('update:modelValue', modelValue);
+      emit("update", {
+        entityType: props.entityType,
+        modelValue
+      })
     }
 
     return {
       dialog,
-      listComponentFilters,
-      onRemove
+      simpleListFilters,
+      onRemove,
+      onEntityTypeChanged,
+      onModelValueChanged
     }
   }
 });