@dative-gpi/foundation-core-components 0.0.229 → 0.1.68

package/components/customProperties/FSMetaValue.vue

@@ -1,54 +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 type { PropType} from "vue";
-import { computed, defineComponent } from "vue";
+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} from "../../../foundation-core-domain/models";
-import { 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
@@ -59,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,8 +1,9 @@
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
-import type { CustomPropertyInfos} from "../../../foundation-core-domain/models";
-import { FilterType, PropertyDataType } from "../../../foundation-core-domain/models";
+import { FilterType, PropertyDataType } from "@dative-gpi/foundation-shared-domain/enums";
 
-const { getUserOffsetMillis, getMachineOffsetMillis } = useAppTimeZone();
+import { type CustomPropertyInfos,  } from "../../../foundation-core-domain/models";
+
+const { getOffsetDifference } = useAppTimeZone();
 
 export const getColor = (property: CustomPropertyInfos, value: string): string | undefined => {
     if (property.colorful) {
@@ -187,5 +188,5 @@ const getEpoch = (expression: string): string => {
         expression = expression.substring(match[0].length);
         match = /(?:(?:([-+])(\d*))?(\w+))?(?:\/(\w))?/g.exec(expression);
     }
-    return (date.getTime() + getMachineOffsetMillis() - getUserOffsetMillis()).toString();
+    return (date.getTime() + getOffsetDifference()).toString();
 }

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,76 @@
+<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
+        :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:modelValue", "update:selecteds"],
+  props: {
+    entityType: {
+      type: Number as PropType<EntityType>,
+      required: true
+    },
+    selecteds: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    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);
+    }
+
+    watch(() => props.selecteds, (value) => {
+      actualSelecteds.value = value;
+    }, { immediate: true });
+
+    return {
+      onSubmit,
+      actualSelecteds
+    }
+  }
+});
+</script>

package/components/entities/FSEntityField.vue

@@ -0,0 +1,149 @@
+<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="$emit('update:entityType', $event); $emit('update:modelValue', [])"
+    :showEntities="$props.showEntities"
+    :showCount="$props.showCount"
+    @click:select="dialog = true"
+  >
+    <template
+      #items
+    >
+      <FSSimpleEntitiesList
+        :entity-type="$props.entityType"
+        :filters="listComponentFilters"
+        :showEdit="false"
+        @click:remove="onRemove"
+      />
+    </template>
+  </FSEntityFieldUI>
+  <FSDialogSelectEntities
+    :entity-type="$props.entityType"
+    :filters="$props.filters"
+    v-model="dialog"
+    :selecteds="$props.modelValue || []"
+    @update:selecteds="$emit('update:modelValue', $event)"
+  />
+</template>
+
+
+<script lang="ts">
+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 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
+    },
+    showCount: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue", "update:entityType"],
+  setup(props, { emit }) {
+    const dialog = ref(false);
+
+    const listComponentFilters = computed(() => {
+      switch(props.entityType) {
+        case EntityType.Device:
+          return { 
+            deviceOrganisationsIds: props.modelValue
+          } satisfies DeviceOrganisationFilters;
+        default:
+          return {};
+      };
+    });
+
+    const onRemove = (id: string) => {
+      emit("update:modelValue", props.modelValue.filter((i) => i !== id));
+    }
+
+    return {
+      dialog,
+      listComponentFilters,
+      onRemove
+    }
+  }
+});
+</script>

package/components/entities/FSSelectEntitiesList.vue

@@ -0,0 +1,192 @@
+<template>
+  <FSCol
+    gap="24px"  
+  >
+    <FSCol>
+      <FSText
+        font="text-button"
+      >
+        {{ $tr("ui.common.selection-reminder", "Selection reminder") }}
+      </FSText>
+      <FSRow
+        align="center-left"
+        height="50px"
+      >
+        <FSSlideGroup
+          v-if="$props.modelValue && $props.modelValue.length > 0"
+        >
+          <FSSimpleEntitiesList
+            :entity-type="$props.entityType"
+            :filters="simpleListFilters"
+            :showEdit="false"
+            :showRemove="false"
+            direction="row"
+          />
+        </FSSlideGroup>
+        <FSText
+          v-else
+        >
+          {{ $tr("ui.common.no-selection", "No selection") }}
+        </FSText>
+      </FSRow>
+    </FSCol>
+
+    <FSCol>
+      <FSText
+        font="text-button"
+      >
+        {{ $tr("ui.common.entities-list", "Entities list") }}
+      </FSText>
+      <FSBaseEntitiesList
+        :entity-type="$props.entityType"
+        :tableCode="tableCode"
+        :modelValue="$props.modelValue"
+        @update:modelValue="$emit('update:modelValue', $event)"
+        v-bind="baseTableAttrs"
+      />
+    </FSCol>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { defineComponent, 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 { TABLES as T } from "../../utils";
+
+import FSSlideGroup from "@dative-gpi/foundation-shared-components/components/FSSlideGroup.vue";
+import FSCol from "@dative-gpi/foundation-shared-components/components/FSCol.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+import FSText from "@dative-gpi/foundation-shared-components/components/FSText.vue";
+
+
+import FSSimpleEntitiesList from "./FSSimpleEntitiesList.vue";
+import FSBaseEntitiesList from "./FSBaseEntitiesList.vue";
+
+export default defineComponent({
+  name: "FSSelectEntitiesList",
+  components: {
+    FSSimpleEntitiesList,
+    FSBaseEntitiesList,
+    FSSlideGroup,
+    FSCol,
+    FSRow,
+    FSText
+  },
+  emits: ["update:modelValue"],
+  props: {
+    entityType: {
+      type: Number as PropType<EntityType>,
+      required: true
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    filters: {
+      type: Object,
+      required: false,
+      default: null
+    }
+  },
+  setup(props, { attrs }){
+    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 tableCode = computed(() => {
+      switch(props.entityType) {
+        case EntityType.Device:
+          return T.DEVICES_SELECT;
+        default:
+          return null;
+      };
+    })
+
+    const baseTableAttrs = computed(() => {
+      switch(props.entityType) {
+        case EntityType.Device:
+          return { 
+            deviceOrganisationFilters: props.filters,
+            ...attrs
+          };
+        case EntityType.Dashboard:
+          return {
+            dashboardShallowsFilters: props.filters,
+            dashboardOrganisationsFilters: props.filters,
+            dashboardOrganisationTypeFetchFilter: props.filters,
+            ...attrs
+          };
+        case EntityType.Group:
+          return {
+            groupsFilters: props.filters,
+            ...attrs
+          };
+        case EntityType.Folder:
+          return {
+            foldersFilters: props.filters,
+            ...attrs
+          };
+        case EntityType.Location:
+          return {
+            locationsFilters: props.filters,
+            ...attrs
+          };
+        case EntityType.User:
+          return {
+            userOrganisationsFilters: props.filters,
+            ...attrs
+          };
+        case EntityType.Model:
+          return {
+            modelsFilters: props.filters,
+            ...attrs
+          };
+        default:
+          return null;
+      };
+    });
+
+    return {
+      simpleListFilters,
+      baseTableAttrs,
+      tableCode
+    }
+  }
+});
+</script>