@dative-gpi/foundation-core-components 1.0.27 → 1.0.28-remove-deprecated2

package/components/customProperties/FSMetaField.vue

@@ -1,49 +1,27 @@
 <template>
   <FSSelectField
     v-if="$props.customProperty.useOnlyAllowedValues"
-    class="fs-meta-field"
     :editable="$props.editable"
+    :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>
@@ -91,9 +69,10 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
-import { type CustomPropertyInfos, PropertyDataType } from "../../../foundation-core-domain/models";
+import { type CustomPropertyInfos } from "../../../foundation-core-domain/models";
+import { PropertyDataType } from "@dative-gpi/foundation-shared-domain/enums";
 
 import FSDateTimeField from "@dative-gpi/foundation-shared-components/components/fields/FSDateTimeField.vue";
 import FSNumberField from "@dative-gpi/foundation-shared-components/components/fields/FSNumberField.vue";
@@ -102,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",
@@ -113,8 +91,7 @@ export default defineComponent({
     FSIconField,
     FSSwitch,
     FSIcon,
-    FSSpan,
-    FSText
+    FSSpan
   },
   props: {
     label: {
@@ -139,7 +116,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToLongTimeFormat } = useAppTimeZone();
+    const { epochToLongTimeFormat } = useDateFormat();
 
     const items = computed((): { id: string, label: string, icon: string | null }[] => {
       return Object.keys(props.customProperty.allowedValues).map((key: string) => {
@@ -179,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;
@@ -215,6 +209,8 @@ export default defineComponent({
 
     return {
       PropertyDataType,
+      itemTitle,
+      classes,
       items,
       asBoolean,
       asNumber,

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
@@ -38,7 +38,7 @@
 import { defineComponent, type PropType, ref, watch } from "vue";
 import _ from "lodash";
 
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
 import { type CustomPropertyInfos, type PropertyEntity } from "../../../foundation-core-domain/models";
 import { useCustomPropertyValues } from "../../../foundation-core-services/composables";
@@ -70,7 +70,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { epochToLongTimeFormat } = useAppTimeZone();
+    const { epochToLongTimeFormat } = useDateFormat();
     const { fetch, entity: customPropertyValues } = useCustomPropertyValues();
 
     const dialog = ref(false);

package/components/customProperties/FSMetaValue.vue

@@ -1,52 +1,84 @@
 <template>
-  <div
-    v-if="!value"
-  />
-  <FSText
-    v-else-if="$props.customProperty.useOnlyAllowedValues && $props.customProperty.allowedValues[meta[$props.customProperty.code]] != null"
-    :color="getColor($props.customProperty, meta[$props.customProperty.code])"
+  <template
+    v-if="$props.variant === 'standard'"
   >
-    {{ value }}
-  </FSText>
-  <FSText
-    v-else-if="[PropertyDataType.Number, PropertyDataType.String, PropertyDataType.DateTime].includes($props.customProperty.dataType)"
-    :color="getColor($props.customProperty, meta[$props.customProperty.code])"
+    <FSText
+      v-if="$props.customProperty.useOnlyAllowedValues"
+      :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.Icon].includes($props.customProperty.dataType)"
+      :color="getColor($props.customProperty, meta[$props.customProperty.code])"
+    >
+      {{ value }}
+    </FSIcon>
+    <FSIconCheck
+      v-else-if="[PropertyDataType.Boolean].includes($props.customProperty.dataType) && value"
+      :color="getColor($props.customProperty, meta[$props.customProperty.code])"
+      :value="value.toLowerCase() === 'true'"
+    />
+  </template>
+  <template
+    v-else-if="$props.variant === 'colorless'"
   >
-    {{ value }}
-  </FSText>
-  <FSIcon
-    v-else-if="[PropertyDataType.Icon].includes($props.customProperty.dataType)"
-    :color="getColor($props.customProperty, meta[$props.customProperty.code])"
-  >
-    {{ value }}
-  </FSIcon>
-  <FSIconCheck
-    v-else-if="[PropertyDataType.Boolean].includes($props.customProperty.dataType)"
-    :color="getColor($props.customProperty, meta[$props.customProperty.code])"
-    :value="value.toLowerCase() === 'true'"
-  />
+    <FSSpan
+      v-if="$props.customProperty.useOnlyAllowedValues"
+    >
+      {{ value }}
+    </FSSpan>
+    <FSSpan
+      v-else-if="[PropertyDataType.Number, PropertyDataType.String, PropertyDataType.DateTime].includes($props.customProperty.dataType)"
+    >
+      {{ value }}
+    </FSSpan>
+    <FSIcon
+      v-else-if="[PropertyDataType.Icon].includes($props.customProperty.dataType)"
+    >
+      {{ value }}
+    </FSIcon>
+    <FSIconCheck
+      v-else-if="[PropertyDataType.Boolean].includes($props.customProperty.dataType) && value"
+      :value="value.toLowerCase() === 'true'"
+    />
+  </template>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
+import { PropertyDataType } from "@dative-gpi/foundation-shared-domain/enums";
 
-import { type CustomPropertyInfos, PropertyDataType } from "../../../foundation-core-domain/models";
+import { type CustomPropertyInfos } from "../../../foundation-core-domain/models";
 import { getColor } from "./helpers";
 
 import FSIconCheck from "@dative-gpi/foundation-shared-components/components/FSIconCheck.vue";
-import FSText from "@dative-gpi/foundation-shared-components/components/FSText.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: "FSMetaValue",
   components: {
     FSIconCheck,
-    FSText,
-    FSIcon
+    FSIcon,
+    FSSpan,
+    FSText
   },
   props: {
+    variant: {
+      type: String as PropType<"standard" | "colorless">,
+      required: false,
+      default: "standard"
+    },
     customProperty: {
       type: Object as PropType<CustomPropertyInfos>,
       required: true
@@ -57,18 +89,19 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { epochToLongTimeFormat } = useAppTimeZone();
+    const { epochToLongTimeFormat } = useDateFormat();
 
     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]];
-        }
+        return props.customProperty.allowedValues[props.meta[props.customProperty.code]] ?? "";
       }
       switch (props.customProperty.dataType) {
         case PropertyDataType.DateTime: {
           return epochToLongTimeFormat(parseInt(props.meta[props.customProperty.code]));
         }
+        case PropertyDataType.Boolean: {
+          return props.meta[props.customProperty.code];
+        }
         default: {
           return props.meta[props.customProperty.code];
         }

package/components/customProperties/helpers.ts

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

package/components/entities/FSBaseEntitiesList.vue

@@ -0,0 +1,50 @@
+<template>
+  <component 
+    :is="component"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent, type PropType, computed } from "vue";
+
+import { EntityType } from "@dative-gpi/foundation-shared-domain/enums";
+
+export default defineComponent({
+  name: "FSBaseEntitiesList",
+  components: {
+  },
+  props: {
+    entityType: {
+      type: Number as PropType<EntityType>,
+      required: true
+    }
+  },
+  setup(props) {
+    const component = computed(() => {
+      switch(props.entityType) {
+        case EntityType.Device:
+          return defineAsyncComponent(() => import("../lists/deviceOrganisations/FSBaseDeviceOrganisationsList.vue"));
+        case EntityType.Dashboard:
+          return defineAsyncComponent(() => import("../lists/dashboards/FSBaseDashboardsList.vue"));
+        case EntityType.Folder:
+          return defineAsyncComponent(() => import("../lists/folders/FSBaseFoldersList.vue"));
+        case EntityType.User:
+          return defineAsyncComponent(() => import("../lists/userOrganisations/FSBaseUserOrganisationsList.vue"));
+        case EntityType.Group:
+          return defineAsyncComponent(() => import("../lists/groups/FSBaseGroupsList.vue"));
+        case EntityType.Location:
+          return defineAsyncComponent(() => import("../lists/locations/FSBaseLocationsList.vue"));
+        case EntityType.Model:
+          return defineAsyncComponent(() => import("../lists/models/FSBaseModelsList.vue"));
+        default:
+          return null;
+      };
+    });
+
+    return {
+      component,
+    }
+  }
+});
+</script>

package/components/entities/FSDialogSelectEntities.vue

@@ -0,0 +1,83 @@
+<template>
+  <FSDialogSubmit
+    :title="$tr('ui.common.select-entities', 'Select entities')"
+    width="1130px"
+    :model-value="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    @click:submit-button="onSubmit"
+  >
+    <template
+      #body
+    >
+      <FSSelectEntitiesList
+        :singleSelect="$props.singleSelect"
+        :entityType="$props.entityType"
+        :modelValue="actualSelecteds"
+        :filters="$props.filters"
+        @update:modelValue="actualSelecteds = $event"
+      />
+    </template>
+  </FSDialogSubmit>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, ref, watch } from "vue";
+
+import type { EntityType } from "@dative-gpi/foundation-shared-domain/enums";
+
+import FSDialogSubmit from "@dative-gpi/foundation-shared-components/components/FSDialogSubmit.vue";
+import FSSelectEntitiesList from "./FSSelectEntitiesList.vue";
+
+export default defineComponent({
+  name: "FSDialogSelectEntities",
+  components: {
+    FSSelectEntitiesList,
+    FSDialogSubmit,
+  },
+  emits: ["update", "update:modelValue", "update:selecteds"],
+  props: {
+    entityType: {
+      type: Number as PropType<EntityType>,
+      required: true
+    },
+    selecteds: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    singleSelect: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    filters: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  setup(props, { emit }){
+    const actualSelecteds = ref<string[]>([]);
+
+    const onSubmit = () => {
+      emit("update:selecteds", actualSelecteds.value);
+      emit("update:modelValue", false);
+      emit("update", { selecteds: actualSelecteds.value, modelValue: false });
+    }
+
+    watch(() => props.selecteds, (value) => {
+      actualSelecteds.value = value;
+    }, { immediate: true });
+
+    return {
+      onSubmit,
+      actualSelecteds
+    }
+  }
+});
+</script>

package/components/entities/FSEntityField.vue

@@ -0,0 +1,203 @@
+<template>
+  <FSEntityFieldUI
+    :description="$props.description"
+    :hideHeader="$props.hideHeader"
+    :required="$props.required"
+    :editable="$props.editable"
+    :label="$props.label"
+    :messages="$props.messages"
+    :entityType="$props.entityType"
+    :allowedEntityTypes="$props.allowedEntityTypes || []"
+    :itemsCount="($props.modelValue || []).length"
+    @update:entityType="onEntityTypeChanged"
+    :showEntities="$props.showEntities"
+    :showCount="$props.showCount"
+    @click:select="dialog = true"
+  >
+    <template
+      #items
+    >
+      <FSSimpleEntitiesList
+        :entity-type="$props.entityType"
+        :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="onModelValueChanged"
+  />
+</template>
+
+
+<script lang="ts">
+import { defineComponent, ref, type PropType, computed } from "vue";
+
+import { EntityType } from "@dative-gpi/foundation-shared-domain/enums";
+
+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";
+
+import FSSimpleEntitiesList from "./FSSimpleEntitiesList.vue";
+import FSDialogSelectEntities from "./FSDialogSelectEntities.vue";
+
+export default defineComponent({
+  name: "FSEntityField",
+  components: {
+    FSEntityFieldUI,
+    FSSimpleEntitiesList,
+    FSDialogSelectEntities
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: true,
+      default: () => []
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    filters: {
+      type: Object,
+      required: false,
+      default: () => null
+    },
+    rules: {
+      type: Array as PropType<any[]>,
+      required: false,
+      default: () => []
+    },
+    messages: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: null
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    entityType: {
+      type: Number as PropType<EntityType>,
+      required: true
+    },
+    allowedEntityTypes: {
+      type: Array as PropType<EntityType[]>,
+      required: false,
+      default: () => []
+    },
+    showEntities: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    singleSelect: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    showCount: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update","update:modelValue", "update:entityType"],
+  setup(props, { emit }) {
+    const dialog = ref(false);
+
+    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
+          } 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 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,
+      simpleListFilters,
+      onRemove,
+      onEntityTypeChanged,
+      onModelValueChanged
+    }
+  }
+});
+</script>