@dative-gpi/foundation-core-components 1.0.69 → 1.0.71-groupings-2

package/components/lists/serviceAccountRoleOrganisations/{FSBaseServiceAccountRoleOrganisations.vue → FSBaseServiceAccountRoleOrganisationsList.vue}

@@ -2,7 +2,7 @@
   <FSDataTable
     :loading="fetchingServiceAccountRoleOrganisations"
     :items="serviceAccountRoleOrganisations"
-    :showSelect="$props.editable"
+    :selectable="$props.selectable"
     :tableCode="$props.tableCode"
     :itemTo="$props.itemTo"
     :modelValue="$props.modelValue"
@@ -44,7 +44,7 @@
     >
       <FSTagGroup
         variant="slide"
-        :editable="false"
+        :showRemove="false"
         :tags="item.tags"
       />
     </template>
@@ -78,8 +78,9 @@ export default defineComponent({
   },
   props: {
     tableCode: {
-      type: String,
-      required: true
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     },
     serviceAccountRoleOrganisationsFilters: {
       type: Object as PropType<ServiceAccountRoleOrganisationFilters | null>,
@@ -90,7 +91,7 @@ export default defineComponent({
       type: Function as PropType<(item: ServiceAccountRoleOrganisationInfos) => Partial<RouteLocation>>,
       required: false
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true

package/components/lists/userOrganisations/FSBaseUserOrganisationsList.vue

@@ -3,7 +3,7 @@
     :items="userOrganisations"
     :itemTo="$props.itemTo"
     :loading="fetchingUserOrganisations"
-    :showSelect="$props.editable"
+    :selectable="$props.selectable"
     :tableCode="$props.tableCode"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
@@ -33,6 +33,7 @@
         height="32px"
         width="32px"
         :imageId="item.imageId"
+        :thumbnail="true"
       />
     </template>
     <template
@@ -54,7 +55,7 @@
     >
       <FSTagGroup
         variant="slide"
-        :editable="false"
+        :showRemove="false"
         :tags="item.tags"
       />
     </template>
@@ -77,11 +78,12 @@
       </FSSpan>
     </template>
     <template
-      #item.tile="{ item, toggleSelect }"
+      #item.tile="{ index, item, toggleSelect }"
     >
       <FSUserOrganisationTileUI
+        :key="index"
         :to="$props.itemTo && $props.itemTo(item)"
-        :editable="$props.editable"
+        :selectable="$props.selectable"
         :modelValue="isSelected(item.id)"
         @update:modelValue="toggleSelect(item)"
         v-bind="item"
@@ -120,8 +122,9 @@ export default defineComponent({
   },
   props: {
     tableCode: {
-      type: String,
-      required: true
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     },
     userOrganisationsFilters: {
       type: Object as PropType<UserOrganisationFilters | null>,
@@ -132,7 +135,7 @@ export default defineComponent({
       type: Function as PropType<(item: UserOrganisationInfos) => Partial<RouteLocation>>,
       required: false
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true

package/components/lists/userOrganisations/FSChipUserOrganisationsList.vue

@@ -0,0 +1,61 @@
+<template>
+  <FSRow
+    v-if="fetching"
+  >
+    <FSLoader
+      v-for="i in 4"
+      :key="i"
+      variant="chip"
+      height="12px"
+    />
+  </FSRow>
+  <FSChipGroup
+    v-else
+    :color="ColorEnum.Light"
+    :labels="userOrganisations?.map(u => u.name)"
+    v-bind="$attrs"
+  />
+</template>
+  
+  <script lang="ts">
+import { defineComponent, watch, type PropType } from "vue";
+  
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useUserOrganisations } from "@dative-gpi/foundation-core-services/composables";
+
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+import FSLoader from "@dative-gpi/foundation-shared-components/components/FSLoader.vue";
+import FSChipGroup from "@dative-gpi/foundation-shared-components/components/FSChipGroup.vue";
+  
+export default defineComponent({
+  name: "FSChipUserOrganisationsList",
+  components: {
+    FSChipGroup,
+    FSLoader,
+    FSRow
+  },
+  props: {
+    userOrganisationIds: {
+      type: Array as PropType<string[]>,
+      required: false
+    }
+  },
+  setup(props) {
+    const {getMany: fetchUserOrganisations, fetching, entities: userOrganisations} = useUserOrganisations();
+    
+    watch(() => props.userOrganisationIds, async () => {
+      if(props.userOrganisationIds && props.userOrganisationIds.length > 0){
+        fetchUserOrganisations({
+          userOrganisationsIds: props.userOrganisationIds
+        });
+      }
+    }, {immediate: true});
+  
+    return {
+      userOrganisations,
+      ColorEnum,
+      fetching
+    };
+  }
+});
+</script>

package/components/selects/FSPlotPerSelector.vue

@@ -1,50 +1,128 @@
 <template>
-  <FSAutocompleteField
-    :label="label ?? $tr('ui.common.plot-per','Plot per')"
-    :items="plotPerItems"
-    :modelValue="modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
+  <FSRow
     v-bind="$attrs"
-  />
+  >
+    <FSAutocompleteField
+      v-if="$props.showSelector"
+      :hideHeader="$props.hideHeader"
+      :clearable="$props.clearable"
+      :label="label ?? $tr('ui.common.plot-per','Plot per')"
+      :items="plotPerItems"
+      v-bind="$props.plotPerSelectorProps"
+      v-model="actualPlotPer"
+    />
+    <FSAutocompleteGrouping
+      v-if="actualPlotPer === PlotPer.Grouping && showGroupingAutocomplete"
+      :hideHeader="$props.hideHeader"
+      :clearable="$props.clearable"
+      :toggleSetDisabled="true"
+      v-bind="$props.groupingAutocompleteProps"
+      v-model="actualGroupingId"
+    />
+  </FSRow>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType } from "vue";
+import { computed, defineComponent, ref, watch, type PropType } from "vue";
 
-import {PlotPer} from "@dative-gpi/foundation-shared-domain/enums";
+import { PlotPer } from "@dative-gpi/foundation-shared-domain/enums";
 
-import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { plotPerLabel } from "@dative-gpi/foundation-shared-components/tools";
 
-import {plotPerLabel, getEnumEntries} from "../../utils";
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+import FSAutocompleteGrouping from "@dative-gpi/foundation-core-components/components/autocompletes/FSAutocompleteGrouping.vue";
 
 export default defineComponent({
   components: {
-    FSAutocompleteField
+    FSAutocompleteField,
+    FSAutocompleteGrouping
   },
   props: {
     modelValue: {
-      type: Number as PropType<PlotPer>,
-      required: false
+      type: Object as PropType<{ plotPer: PlotPer, groupingId: string | null }>,
+      required: false,
+      default: () => ({ plotPer: PlotPer.None, groupingId: null })
+    },
+    allowedPlotPers: {
+      type: Array as PropType<PlotPer[]>,
+      required: false,
+      default: null
+    },
+    plotPerSelectorProps: {
+      type: Object as PropType<Record<string, any>>,
+      required: false,
+      default: () => ({})
+    },
+    groupingAutocompleteProps: {
+      type: Object as PropType<Record<string, any>>,
+      required: false,
+      default: () => ({})
     },
     label: {
       type: String,
       required: false
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    showSelector: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    showGroupingAutocomplete: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   emits: ['update:modelValue'],
-  setup() {
+  setup(props, { emit }) {
+    const actualPlotPer = ref(PlotPer.None);
+    const actualGroupingId = ref<string | null>(null)
     
     const plotPerItems = computed(()=>{
+      if (props.allowedPlotPers != null) {
+        return props.allowedPlotPers.map((f)=>{
+          return {
+            id: f,
+            label: plotPerLabel(f)
+          }
+        })
+      }
       return getEnumEntries(PlotPer).filter(f=>f.value != PlotPer.None).map((f)=>{
         return {
           id: f.value,
           label: plotPerLabel(f.value)
         }
-      })
+      });
+    });
+
+    watch(() => props.modelValue, (newVal) => {
+      actualPlotPer.value = newVal?.plotPer ?? plotPerItems.value[0].id;
+      actualGroupingId.value = newVal?.groupingId ?? null;
+    }, { immediate: true });
+
+    watch([actualPlotPer, actualGroupingId], () => {
+      emit('update:modelValue', {
+        plotPer: actualPlotPer.value,
+        groupingId: actualGroupingId.value
+      });
     });
 
     return {
-      plotPerItems
+      actualGroupingId,
+      actualPlotPer,
+      plotPerItems,
+      PlotPer
     }
   }
 })

package/components/tiles/FSChartTile.vue

@@ -0,0 +1,71 @@
+<template>
+  <FSChartTileUI
+    v-if="chart"
+    :label="chart.label"
+    :icon="chart.icon"
+    :type="chart.chartType"
+    :scope="chart.scope"
+    :imageId="chart.imageId"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, watch } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { chartIcon } from "@dative-gpi/foundation-shared-components/tools";
+
+import { useChartOrganisation, useChartOrganisationType } from "@dative-gpi/foundation-core-services/composables";
+import { ApplicationScope } from "@dative-gpi/foundation-shared-domain/enums";
+
+import FSChartTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSChartTileUI.vue";
+
+export default defineComponent({
+  name: "FSChartTile",
+  components: {
+    FSChartTileUI
+  },
+  props: {
+    chartId: {
+      type: String,
+      required: true
+    },
+    scope: {
+      type: Object as PropType<ApplicationScope | number>,
+      required : true
+    }
+  },
+  setup(props) {
+    const { get : fetchChartOrganisationType, entity : chartOrganisationType } = useChartOrganisationType();
+    const { get : fetchChartOrganisation, entity : chartOrganisation } = useChartOrganisation();
+
+    const chart = computed(() => {
+      if (props.scope == ApplicationScope.Organisation) {
+        return chartOrganisation.value;
+      }
+      else if (props.scope == ApplicationScope.OrganisationType) {
+        return chartOrganisationType.value;
+      }
+      else {
+        return null
+      }
+    });
+
+    watch(() => [props.chartId, props.scope], () => {
+      if (props.scope == ApplicationScope.Organisation) {
+        fetchChartOrganisation(props.chartId);
+      }
+      else if (props.scope == ApplicationScope.OrganisationType) {
+        fetchChartOrganisationType(props.chartId)
+      }
+    }, {immediate : true})
+
+    return {
+      ColorEnum,
+      chart,
+      chartIcon
+    };
+  }
+});
+</script>

package/components/tiles/FSDashboardOrganisationTile.vue

@@ -1,7 +1,7 @@
 <template>
   <FSLoadTile
     v-if="getting"
-    :editable="$props.editable"
+    :selectable="$props.selectable"
     :modelValue="$props.modelValue"
     @update:modelValue="(value) => $emit('update:modelValue', value)"
   />
@@ -11,7 +11,7 @@
     :icon="entity.icon"
     :label="entity.label"
     :imageId="entity.imageId"
-    :editable="$props.editable"
+    :selectable="$props.selectable"
     :bottomColor="entity.colors"
     :modelValue="$props.modelValue"
     @update:modelValue="(value) => $emit('update:modelValue', value)"
@@ -43,7 +43,7 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true

package/components/tiles/FSDashboardOrganisationTypeTile.vue

@@ -1,7 +1,7 @@
 <template>
   <FSLoadTile
     v-if="getting"
-    :editable="$props.editable"
+    :selectable="$props.selectable"
     :modelValue="$props.modelValue"
     @update:modelValue="(value) => $emit('update:modelValue', value)"
   />
@@ -11,7 +11,7 @@
     :icon="entity.icon"
     :label="entity.label"
     :imageId="entity.imageId"
-    :editable="$props.editable"
+    :selectable="$props.selectable"
     :bottomColor="entity.colors"
     :modelValue="$props.modelValue"
     @update:modelValue="(value) => $emit('update:modelValue', value)"
@@ -43,7 +43,7 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true

package/components/tiles/FSDashboardShallowTile.vue

@@ -1,7 +1,7 @@
 <template>
   <FSLoadTile
     v-if="getting"
-    :editable="$props.editable"
+    :selectable="$props.selectable"
     :modelValue="$props.modelValue"
     @update:modelValue="(value) => $emit('update:modelValue', value)"
   />
@@ -11,7 +11,7 @@
     :code="entity.code"
     :label="entity.label"
     :imageId="entity.imageId"
-    :editable="$props.editable"
+    :selectable="$props.selectable"
     :bottomColor="entity.colors"
     :modelValue="$props.modelValue"
     @update:modelValue="(value) => $emit('update:modelValue', value)"
@@ -43,7 +43,7 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true

package/components/tiles/FSDeviceOrganisationTile.vue

@@ -1,7 +1,7 @@
 <template>
   <FSLoadTile
     v-if="getting"
-    :editable="$props.editable"
+    :selectable="$props.selectable"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
   />
@@ -15,7 +15,7 @@
     :deviceAlerts="entity.alerts"
     :modelStatuses="entity.modelStatuses"
     :deviceStatuses="entity.status?.statuses"
-    :editable="$props.editable"
+    :selectable="$props.selectable"
     :alertTo="$props.alertTo"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
@@ -47,7 +47,7 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true

package/components/tiles/FSFolderTile.vue

@@ -1,18 +1,20 @@
 <template>
   <FSLoadTile
     v-if="getting"
-    :editable="$props.editable"
+    :selectable="$props.selectable"
     :modelValue="$props.modelValue"
     @update:modelValue="(value) => $emit('update:modelValue', value)"
   />
   <FSFolderTileUI
     v-else-if="entity"
-    :label="entity.label"
     :code="entity.code"
-    :bottomColor="entity.colors"
     :icon="entity.icon"
+    :label="entity.label"
     :imageId="entity.imageId"
-    :editable="$props.editable"
+    :bottomColor="entity.colors"
+    :recursiveFoldersIds="entity.recursiveFoldersIds"
+    :recursiveDashboardsIds="entity.recursiveDashboardsIds"
+    :selectable="$props.selectable"
     :modelValue="$props.modelValue"
     @update:modelValue="(value) => $emit('update:modelValue', value)"
     v-bind="$attrs"
@@ -43,7 +45,7 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true

package/components/tiles/FSGroupTile.vue

@@ -1,7 +1,7 @@
 <template>
   <FSLoadTile
     v-if="getting"
-    :editable="$props.editable"
+    :selectable="$props.selectable"
     :modelValue="modelValue"
     @update:modelValue="(value) => $emit('update:modelValue', value)"
   />
@@ -12,7 +12,7 @@
     :code="entity.code"
     :recursiveGroupsIds="entity.recursiveGroupsIds"
     :recursiveDeviceOrganisationsIds="entity.recursiveDeviceOrganisationsIds"
-    :editable="$props.editable"
+    :selectable="$props.selectable"
     :modelValue="modelValue"
     @update:modelValue="(value) => $emit('update:modelValue', value)"
     v-bind="$attrs"
@@ -43,7 +43,7 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true

package/components/tiles/FSLocationTile.vue

@@ -1,7 +1,7 @@
 <template>
   <FSLoadTile
     v-if="getting"
-    :editable="$props.editable"
+    :selectable="$props.selectable"
     :modelValue="modelValue"
     @update:modelValue="(value) => $emit('update:modelValue', value)"
   />
@@ -11,8 +11,9 @@
     :label="entity.label"
     :code="entity.code"
     :color="entity.color"
+    :address="entity.address.placeLabel"
     :deviceCount="entity.deviceOrganisationsCount"
-    :editable="$props.editable"
+    :selectable="$props.selectable"
     :modelValue="modelValue"
     @update:modelValue="(value) => $emit('update:modelValue', value)"
     v-bind="$attrs"
@@ -43,12 +44,13 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true
     }
   },
+  emits: ['update:modelValue'],
   setup(props) {
     const { get, getting, entity } = useLocation();
 

package/components/tiles/FSModelTile.vue

@@ -0,0 +1,64 @@
+<template>
+  <FSLoadTile
+    v-if="getting"
+    :selectable="$props.selectable"
+    :modelValue="modelValue"
+    @update:modelValue="(value) => $emit('update:modelValue', value)"
+  />
+  <FSModelTileUI
+    v-else-if="entity"
+    :imageId="entity.imageId"
+    :label="entity.label"
+    :code="entity.code"
+    :selectable="$props.selectable"
+    :modelValue="modelValue"
+    @update:modelValue="(value) => $emit('update:modelValue', value)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, watch } from "vue";
+
+import { useModel } from "@dative-gpi/foundation-core-services/composables";
+
+import FSModelTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSModelTileUI.vue";
+import FSLoadTile from "@dative-gpi/foundation-shared-components/components/tiles/FSLoadTile.vue";
+
+export default defineComponent({
+  name: "FSModelTile",
+  components: {
+    FSModelTileUI,
+    FSLoadTile
+  },
+  props: {
+    modelId: {
+      type: String,
+      required: true
+    },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    selectable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ['update:modelValue'],
+  setup(props) {
+    const { get, getting, entity } = useModel();
+
+    watch(() => props.modelId, () => {
+      get(props.modelId);
+    }, { immediate: true });
+
+    return {
+      getting,
+      entity
+    };
+  }
+});
+</script>

package/components/tiles/FSServiceAccountOrganisationTile.vue

@@ -1,7 +1,7 @@
 <template>
   <FSLoadTile
     v-if="getting"
-    :editable="$props.editable"
+    :selectable="$props.selectable"
     :modelValue="modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
   />
@@ -11,7 +11,7 @@
     :label="entity.label"
     :roleLabel="entity.roleLabel"
     :roleIcon="entity.roleIcon"
-    :editable="$props.editable"
+    :selectable="$props.selectable"
     :modelValue="modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
@@ -42,7 +42,7 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true