@dative-gpi/foundation-core-components 1.0.56 → 1.0.58-groupings

package/components/entities/FSDialogSelectEntities.vue

@@ -9,86 +9,42 @@
     <template
       #body
     >
-      <FSCol
-        gap="24px"  
+      <FSSelectEntitiesList
+        :singleSelect="$props.singleSelect"
+        :entityType="$props.entityType"
+        :modelValue="actualSelecteds"
+        :filters="$props.filters"
+        @update:modelValue="actualSelecteds = $event"
       >
-        <FSCol>
-          <FSText
-            font="text-button"
-          >
-            {{ $tr("ui.common.selection-reminder", "Selection reminder") }}
-          </FSText>
-          <FSRow
-            align="center-left"
-            height="50px"
-          >
-            <FSSlideGroup
-              v-if="actualSelecteds.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"
-            v-model="actualSelecteds"
-            v-bind="baseTableAttrs"
+        <template
+          v-for="(_, name) in $slots"
+          v-slot:[name]="slotData"
+        >
+          <slot
+            :name="name"
+            v-bind="slotData"
           />
-        </FSCol>
-      </FSCol>
+        </template>
+      </FSSelectEntitiesList>
     </template>
   </FSDialogSubmit>
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, computed, ref, watch } from "vue";
-
-import { EntityType } from "@dative-gpi/foundation-shared-domain/enums";
-import type { DashboardOrganisationFilters, DashboardOrganisationTypeFilters, DeviceOrganisationFilters } from "@dative-gpi/foundation-core-domain/models";
+import { defineComponent, type PropType, ref, watch } from "vue";
 
-import { TABLES as T } from "../../utils";
+import type { EntityType } from "@dative-gpi/foundation-shared-domain/enums";
 
-import FSSlideGroup from "@dative-gpi/foundation-shared-components/components/FSSlideGroup.vue";
 import FSDialogSubmit from "@dative-gpi/foundation-shared-components/components/FSDialogSubmit.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";
+import FSSelectEntitiesList from "./FSSelectEntitiesList.vue";
 
 export default defineComponent({
   name: "FSDialogSelectEntities",
   components: {
-    FSSimpleEntitiesList,
-    FSBaseEntitiesList,
-    FSSlideGroup,
+    FSSelectEntitiesList,
     FSDialogSubmit,
-    FSCol,
-    FSRow,
-    FSText
   },
-  emits: ["update:modelValue", "update:selecteds"],
+  emits: ["update", "update:modelValue", "update:selecteds"],
   props: {
     entityType: {
       type: Number as PropType<EntityType>,
@@ -99,6 +55,11 @@ export default defineComponent({
       required: false,
       default: () => []
     },
+    singleSelect: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     filters: {
       type: Object,
       required: false,
@@ -110,49 +71,13 @@ export default defineComponent({
       default: false
     }
   },
-  setup(props, { attrs, emit }){
+  setup(props, { emit }){
     const actualSelecteds = ref<string[]>([]);
 
-    const simpleListFilters = computed(() => {
-      switch(props.entityType) {
-        case EntityType.Device:
-          return { 
-            deviceOrganisationsIds: actualSelecteds.value
-          } satisfies DeviceOrganisationFilters;
-        case EntityType.Dashboard:
-          return {
-            dashboardOrganisationIds: actualSelecteds.value,
-            dashboardOrganisationTypeIds: actualSelecteds.value
-          } satisfies DashboardOrganisationFilters & DashboardOrganisationTypeFilters;
-        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
-          };
-        default:
-          return null;
-      };
-    });
-
     const onSubmit = () => {
       emit("update:selecteds", actualSelecteds.value);
       emit("update:modelValue", false);
+      emit("update", { selecteds: actualSelecteds.value, modelValue: false });
     }
 
     watch(() => props.selecteds, (value) => {
@@ -161,10 +86,7 @@ export default defineComponent({
 
     return {
       onSubmit,
-      actualSelecteds,
-      simpleListFilters,
-      baseTableAttrs,
-      tableCode
+      actualSelecteds
     }
   }
 });

package/components/entities/FSEntityField.vue

@@ -3,14 +3,15 @@
     :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"
   >
     <template
@@ -18,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>
 
@@ -39,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";
 
@@ -94,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>,
@@ -112,32 +114,91 @@ export default defineComponent({
       type: Boolean,
       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
     }
   }
 });
-</script>
+</script>

package/components/entities/FSSelectEntitiesList.vue

@@ -0,0 +1,225 @@
+<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="showRemove"
+            @click:remove="onRemove"
+            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
+        :singleSelect="$props.singleSelect"
+        :entity-type="$props.entityType"
+        :tableCode="tableCode"
+        :modelValue="$props.modelValue"
+        @update:modelValue="$emit('update:modelValue', $event)"
+        v-bind="baseTableAttrs"
+      >
+        <template
+          v-for="(_, name) in $slots"
+          v-slot:[getNameSlot(name)]="slotData"
+        >
+          <slot
+            :name="name"
+            v-bind="slotData"
+          />
+        </template>
+      </FSBaseEntitiesList>
+    </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, DashboardShallowFilters, 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
+    },
+    singleSelect: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    filters: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    showRemove: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  setup(props, { emit, 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,
+            dashboardShallowsIds: props.modelValue
+          } satisfies DashboardOrganisationFilters & DashboardOrganisationTypeFilters & DashboardShallowFilters;
+        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;
+      };
+    });
+
+    const onRemove = (id: string) => {
+      emit("update:modelValue", props.modelValue.filter((i) => i !== id));
+    }
+
+    const getNameSlot = (name: string | number) => {
+      return name.toString().replace("base-list-", "");
+    }
+
+    return {
+      simpleListFilters,
+      baseTableAttrs,
+      tableCode,
+      onRemove,
+      getNameSlot
+    }
+  }
+});
+</script>