@dative-gpi/foundation-core-components 1.0.51 → 1.0.52

package/components/lists/dataDefinitions/FSBaseDataDefinitionsList.vue

@@ -0,0 +1,128 @@
+<template>
+  <FSDataTable
+    :loading="fetchingDataDefinitions"
+    :items="dataDefinitions"
+    :tableCode="$props.tableCode"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+    <template
+      #toolbar
+    >
+      <FSButtonCheckbox
+        :label="$tr('ui.common.data-correlated','Correlated only')"
+        :color="ColorEnum.Success"
+      />
+    </template>
+    <template
+      #item.tile="{ item }"
+    >
+      <FSClickable
+        padding="12px"
+        height="60px"
+        width="233px"
+        :color="isSelected(item.id) ? ColorEnum.Primary : ColorEnum.Light"
+        @click="$emit('update:modelValue', [item.id])"
+        v-bind="$attrs"
+      >
+        <template
+          #default
+        >
+          <FSRow
+            align="center-center"
+          >
+            <FSIcon
+              icon="mdi-thermometer"
+            />
+            <FSSpan
+              :lineClamp="1"
+            >
+              {{ item.label }}
+            </FSSpan>
+            <v-spacer/>
+            <FSIcon
+              :color="ColorEnum.Primary"
+              icon="mdi-link"
+            />
+          </FSRow>
+        </template>
+      </FSClickable>
+    </template>
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, watch } from "vue";
+import _ from "lodash";
+
+import {ColorEnum} from "@dative-gpi/foundation-shared-components/models";
+
+import { useDataDefinitions } from "@dative-gpi/foundation-core-services/composables";
+import type { DataDefinitionFilters } from "@dative-gpi/foundation-core-domain/models";
+
+import FSDataTable from "../FSDataTable.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSClickable from "@dative-gpi/foundation-shared-components/components/FSClickable.vue";
+import FSButtonCheckbox from "@dative-gpi/foundation-shared-components/components/buttons/FSButtonCheckbox.vue";
+
+export default defineComponent({
+  name: "FSBaseDataDefinitionsList",
+  components: {
+    FSButtonCheckbox,
+    FSDataTable,
+    FSClickable,
+    FSSpan,
+    FSIcon,
+    FSRow,
+  },
+  props: {
+    dataDefinitionFilters: {
+      type: Object as PropType<DataDefinitionFilters>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: false
+    },
+    tableCode: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { getMany: fetchDataDefinitions, fetching: fetchingDataDefinitions, entities: dataDefinitions } = useDataDefinitions();
+
+    const isSelected = (id: string): boolean => {
+      return props.modelValue.includes(id);
+    };
+
+    watch(() => props.dataDefinitionFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        fetchDataDefinitions(props.dataDefinitionFilters);
+      }
+    }, { immediate: true });
+
+    return {
+      fetchingDataDefinitions,
+      dataDefinitions,
+      ColorEnum,
+      isSelected
+    };
+  }
+});
+</script>

package/components/lists/deviceOrganisations/FSBaseDeviceOrganisationsList.vue

@@ -3,6 +3,7 @@
     :items="deviceOrganisations"
     :customSorts="customSorts"
     :itemTo="$props.itemTo"
+    :loading="fetchingDeviceOrganisations"
     :tableCode="$props.tableCode"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"

package/components/lists/folders/FSBaseFoldersList.vue

@@ -1,11 +1,8 @@
 <template>
-  <FSLoadDataTable
-    v-if="fetchingFolders || fetchingDashboardOrganisations || fetchingDashboardShallows"
-  />
   <FSDataTable
-    v-else
     :items="items"
     :item-to="$props.itemTo"
+    :loading="fetchingFolders || fetchingDashboardOrganisations || fetchingDashboardShallows"
     :tableCode="$props.tableCode"
     :modelValue="selecteds"
     @update:modelValue="onSelect"
@@ -89,7 +86,6 @@ import { FoldersListType, type FoldersListItem } from "@dative-gpi/foundation-co
 import type { FolderFilters, DashboardOrganisationFilters, DashboardShallowFilters, DashboardInfos } from "@dative-gpi/foundation-core-domain/models";
 
 import FSDataTable from "../FSDataTable.vue";
-import FSLoadDataTable from "@dative-gpi/foundation-shared-components/components/lists/FSLoadDataTable.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
 import FSFolderTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSFolderTileUI.vue";
 import FSDashboardOrganisationTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardOrganisationTileUI.vue";
@@ -100,7 +96,6 @@ export default defineComponent({
   name: "FSBaseFoldersList",
   components: {
     FSDataTable,
-    FSLoadDataTable,
     FSIcon,
     FSFolderTileUI,
     FSDashboardOrganisationTileUI,

package/components/lists/models/FSBaseModelsList.vue

@@ -0,0 +1,126 @@
+<template>
+  <FSDataTable
+    :loading="fetchingModels"
+    :items="models"
+    :tableCode="$props.tableCode"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+    <template
+      #header.connectable-title
+    >
+      <FSIcon>
+        mdi-wifi
+      </FSIcon>
+    </template>
+    <template
+      #item.imageId="{ item }"
+    >
+      <FSImage
+        v-if="item.imageId"
+        height="32px"
+        width="32px"
+        :imageId="item.imageId"
+      />
+    </template>
+    <template
+      #item.icon="{ item }"
+    >
+      <FSIcon >
+        {{ item.icon }}
+      </FSIcon>
+    </template>
+    <template
+      #item.connectable="{ item }"
+    >
+      <FSIconCheck
+        :value="item.connectable"
+      />
+    </template>
+    <template
+      #item.tile="{ item }"
+    >
+      <FSModelTileUI
+        :imageId="item.imageId"
+        :label="item.label"
+        :color="isSelected(item.id) ? ColorEnum.Primary : ColorEnum.Background"
+        @click="$emit('update:modelValue', [item.id])"
+        v-bind="$attrs"
+      />
+    </template>
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, watch } from "vue";
+import _ from "lodash";
+
+import {ColorEnum} from "@dative-gpi/foundation-shared-components/models";
+
+import { useModels } from "@dative-gpi/foundation-core-services/composables";
+import type { ModelFilters } from "@dative-gpi/foundation-core-domain/models";
+
+import FSDataTable from "../FSDataTable.vue";
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSImage from "@dative-gpi/foundation-shared-components/components/FSImage.vue";
+import FSIconCheck from "@dative-gpi/foundation-shared-components/components/FSIconCheck.vue";
+import FSModelTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSModelTileUI.vue";
+
+export default defineComponent({
+  name: "FSBaseModelsList",
+  components: {
+    FSModelTileUI,
+    FSDataTable,
+    FSIconCheck,
+    FSImage,
+    FSIcon,
+  },
+  props: {
+    modelFilters: {
+      type: Object as PropType<ModelFilters>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: false
+    },
+    tableCode: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { getMany: fetchModels, fetching: fetchingModels, entities: models } = useModels();
+
+    const isSelected = (id: string): boolean => {
+      return props.modelValue.includes(id);
+    };
+
+    watch(() => props.modelFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        fetchModels(props.modelFilters);
+      }
+    }, { immediate: true });
+
+    return {
+      fetchingModels,
+      models,
+      ColorEnum,
+      isSelected
+    };
+  }
+});
+</script>

package/components/lists/roleOrganisationTypes/FSBaseRoleOrganisationTypesList.vue

@@ -0,0 +1,121 @@
+<template>
+  <FSDataTable
+    :items="roleOrganisationTypes"
+    :itemTo="$props.itemTo"
+    :loading="fetchingRoleOrganisations"
+    :tableCode="$props.tableCode"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+    <template
+      #item.icon="{ item }"
+    >
+      <FSIcon>
+        {{ item.icon }}
+      </FSIcon>
+    </template>
+    <template
+      #item.userType="{ item }"
+    >
+      <FSRow
+        align="center-left"
+      >
+        <FSIcon>
+          {{ userTypeIcon(item.userType) }}
+        </FSIcon>
+        <FSText>
+          {{ userTypeLabel(item.userType) }}
+        </FSText>
+      </FSRow>
+    </template>
+    <template
+      #item.tags="{ item }"
+    >
+      <FSTagGroup
+        variant="slide"
+        :editable="false"
+        :tags="item.tags"
+      />
+    </template>
+  </FSDataTable>
+</template>
+  
+<script lang="ts">
+import type { PropType} from "vue";
+import { defineComponent, watch } from "vue";
+import type { RouteLocation } from "vue-router";
+import _ from "lodash";
+
+import type { RoleOrganisationTypeFilters, RoleOrganisationTypeInfos } from "@dative-gpi/foundation-core-domain/models";
+import { userTypeIcon, userTypeLabel } from "@dative-gpi/foundation-core-components/utils";
+import { useRoleOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
+
+import FSDataTable from "../FSDataTable.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+import FSText from "@dative-gpi/foundation-shared-components/components/FSText.vue";
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
+  
+export default defineComponent({
+  name: "FSBaseRoleOrganisationTypesList",
+  components: {
+    FSRow,
+    FSIcon,
+    FSText,
+    FSTagGroup,
+    FSDataTable,
+  },
+  props: {
+    roleOrganisationTypesFilters: {
+      type: Object as PropType<RoleOrganisationTypeFilters | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    tableCode: {
+      type: String,
+      required: true
+    },
+    itemTo: {
+      type: Function as PropType<(item: RoleOrganisationTypeInfos) => Partial<RouteLocation>>,
+      required: false
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { getMany: getManyRoleOrganisationTypes, entities: roleOrganisationTypes, fetching: fetchingRoleOrganisations } = useRoleOrganisationTypes();
+
+    const isSelected = (id: string): boolean => {
+      return props.modelValue.includes(id);
+    };
+
+    watch(() => props.roleOrganisationTypesFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        getManyRoleOrganisationTypes(props.roleOrganisationTypesFilters ?? undefined);
+      }
+    }, { immediate: true });
+
+    return {
+      fetchingRoleOrganisations,
+      roleOrganisationTypes,
+      userTypeLabel,
+      userTypeIcon,
+      isSelected
+    };
+  }
+});
+</script>

package/components/lists/roleOrganisations/FSBaseRoleOrganisationsList.vue

@@ -0,0 +1,121 @@
+<template>
+  <FSDataTable
+    :items="roleOrganisations"
+    :itemTo="$props.itemTo"
+    :loading="fetchingRoleOrganisations"
+    :tableCode="$props.tableCode"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+    <template
+      #item.icon="{ item }"
+    >
+      <FSIcon>
+        {{ item.icon }}
+      </FSIcon>
+    </template>
+    <template
+      #item.userType="{ item }"
+    >
+      <FSRow
+        align="center-left"
+      >
+        <FSIcon>
+          {{ userTypeIcon(item.userType) }}
+        </FSIcon>
+        <FSText>
+          {{ userTypeLabel(item.userType) }}
+        </FSText>
+      </FSRow>
+    </template>
+    <template
+      #item.tags="{ item }"
+    >
+      <FSTagGroup
+        variant="slide"
+        :editable="false"
+        :tags="item.tags"
+      />
+    </template>
+  </FSDataTable>
+</template>
+  
+<script lang="ts">
+import type { PropType} from "vue";
+import { defineComponent, watch } from "vue";
+import type { RouteLocation } from "vue-router";
+import _ from "lodash";
+
+import type { RoleOrganisationFilters, RoleOrganisationInfos } from "@dative-gpi/foundation-core-domain/models";
+import { userTypeIcon, userTypeLabel } from "@dative-gpi/foundation-core-components/utils";
+import { useRoleOrganisations } from "@dative-gpi/foundation-core-services/composables";
+
+import FSDataTable from "../FSDataTable.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSText from "@dative-gpi/foundation-shared-components/components/FSText.vue";
+import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
+
+export default defineComponent({
+  name: "FSBaseRoleOrganisationsList",
+  components: {
+    FSDataTable,
+    FSRow,
+    FSIcon,
+    FSText,
+    FSTagGroup
+  },
+  props: {
+    roleOrganisationsFilters: {
+      type: Object as PropType<RoleOrganisationFilters | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    tableCode: {
+      type: String,
+      required: true
+    },
+    itemTo: {
+      type: Function as PropType<(item: RoleOrganisationInfos) => Partial<RouteLocation>>,
+      required: false
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { getMany: getManyRoleOrganisations, entities: roleOrganisations, fetching: fetchingRoleOrganisations } = useRoleOrganisations();
+
+    const isSelected = (id: string): boolean => {
+      return props.modelValue.includes(id);
+    };
+
+    watch(() => props.roleOrganisationsFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        getManyRoleOrganisations(props.roleOrganisationsFilters ?? undefined);
+      }
+    }, { immediate: true });
+
+    return {
+      fetchingRoleOrganisations,
+      roleOrganisations,
+      userTypeLabel,
+      userTypeIcon,
+      isSelected
+    };
+  }
+});
+</script>

package/components/lists/scenarioOrganisationTypes/FSBaseScenarioOrganisationTypesList.vue

@@ -0,0 +1,114 @@
+<template>
+  <FSDataTable
+    :items="scenarioOrganisationTypes"
+    :itemTo="$props.itemTo"
+    :loading="fetchingScenarioOrganisationTypes"
+    :modelValue="$props.modelValue"
+    :tableCode="$props.tableCode"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+
+    <template
+      #item.icon="{ item }"
+    >
+      <FSIcon>
+        {{ item.icon }}
+      </FSIcon>
+    </template>
+
+    <template
+      #item.imageId="{ item }"
+    >
+      <FSImage
+        v-if="item.imageId"
+        height="32px"
+        width="32px"
+        :imageId="item.imageId"
+      />
+    </template>
+
+    <template
+      #item.tags="{ item }"
+    >
+      <FSTagGroup
+        variant="slide"
+        :editable="false"
+        :tags="item.tags"
+      />
+    </template>
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, watch } from "vue";
+import type { RouteLocation } from "vue-router";
+import _ from "lodash";
+
+import type { ScenarioOrganisationTypeFilters, ScenarioOrganisationTypeInfos } from "@dative-gpi/foundation-core-domain/models";
+import { useScenarioOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
+
+import FSDataTable from "../FSDataTable.vue";
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSImage from "@dative-gpi/foundation-shared-components/components/FSImage.vue";
+import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
+
+export default defineComponent({
+  name: "FSBaseScenarioOrganisationTypesList",
+  components: {
+    FSDataTable,
+    FSIcon,
+    FSImage,
+    FSTagGroup
+  },
+  props: {
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: false
+    },
+    scenarioOrganisationTypeFilters: {
+      type: Object as PropType<ScenarioOrganisationTypeFilters>,
+      required: false,
+      default: null
+    },
+    tableCode: {
+      type: String,
+      required: true
+    },
+    itemTo: {
+      type: Function as PropType<(item: ScenarioOrganisationTypeInfos) => Partial<RouteLocation>>,
+      required: false
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { entities: scenarioOrganisationTypes, fetching: fetchingScenarioOrganisationTypes, getMany: getManyScenarioOrganisationTypes } = useScenarioOrganisationTypes();
+
+    const isSelected = (id: string): boolean => {
+      return props.modelValue.includes(id);
+    };
+
+    watch(() => props.scenarioOrganisationTypeFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        getManyScenarioOrganisationTypes(props.scenarioOrganisationTypeFilters);
+      }
+    }, { immediate: true });
+
+    return {
+      fetchingScenarioOrganisationTypes,
+      scenarioOrganisationTypes,
+      isSelected
+    };
+  }
+});
+</script>