@dative-gpi/foundation-shared-components 1.0.66 → 1.0.67-map-edit

package/components/selects/chartSelectors/FSPlotPerSelector.vue

@@ -0,0 +1,52 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('ui.common.plot-per','Plot per')"
+    :items="plotPerItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import {PlotPer} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { plotPerLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<PlotPer>,
+      required: false
+    },
+    label: {
+      type: String,
+      required: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup() {
+    
+    const plotPerItems = computed(()=>{
+      return getEnumEntries(PlotPer).filter(f=>f.value != PlotPer.None).map((f)=>{
+        return {
+          id: f.value,
+          label: plotPerLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      plotPerItems
+    }
+  }
+})
+</script>

package/components/selects/chartSelectors/FSSelectEntityType.vue

@@ -0,0 +1,59 @@
+<template>
+  <FSSelectField
+    :items="entityTypes"
+    :clearable="false"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import type { PropType} from "vue";
+import { computed, defineComponent } from "vue";
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { EntityType } from "@dative-gpi/foundation-shared-domain/enums";
+
+import FSSelectField from "@dative-gpi/foundation-shared-components/components/fields/FSSelectField.vue";
+
+export default defineComponent({
+  name: "FSSelectEntityType",
+  components: {
+    FSSelectField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<EntityType>,
+      required: false,
+      default: EntityType.Device
+    },
+    useNone: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { $tr } = useTranslationsProvider();
+
+    const entityTypes = computed((): { id: EntityType; label: string }[] => {
+      const items = [
+        { id: EntityType.Model, label: $tr("ui.common.models", "Model(s)") },
+        { id: EntityType.Device, label: $tr("ui.common.devices", "Device(s)") },
+        { id: EntityType.Group, label: $tr("ui.common.groups", "Group(s)") },
+        { id: EntityType.Location, label: $tr("ui.common.locations", "Location(s)") }
+      ];
+      if (props.useNone) {
+        items.unshift({ id: EntityType.None, label: $tr("ui.common.none", "None") });
+      }
+      return items;
+    });
+
+    return {
+      entityTypes
+    };
+  }
+});
+</script>

package/components/selects/chartSelectors/FSSerieTypeSelector.vue

@@ -0,0 +1,53 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('autocomplete.serie-type.label','Serie type')"
+    :items="serieTypeItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import {SerieType} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { serieTypeLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<SerieType>,
+      required: false
+    },
+    label: {
+      type: String,
+      required: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup() {
+    
+    const serieTypeItems = computed(()=>{
+      return getEnumEntries(SerieType).filter(f=>f.value != SerieType.None).map((f)=>{
+        return {
+          id: f.value,
+          label: serieTypeLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      serieTypeItems
+    }
+  }
+})
+</script>

package/components/tiles/FSAlertTileUI.vue

@@ -0,0 +1,90 @@
+
+<template>
+  <FSTile
+    width="200px"
+    height="130px"
+    borderRadius="6px"
+    v-bind="$attrs"
+  >
+    <FSCol
+      align="center-center"
+      gap="6px"
+    >
+      <FSIcon
+        :icon="$props.icon"
+        size="24px"
+      />
+      <FSSpan
+        :lineClamp="1"
+      >
+        {{ $props.label }}
+      </FSSpan>
+      <FSSpan
+        font="text-overline"
+        :lineClamp="1"
+      >
+        {{ epochToShortTimeFormat($props.triggerProcessedTimestamp) }}
+      </FSSpan>
+      <FSSpan
+        font="text-overline"
+        :lineClamp="1"
+      >
+        {{ $props.deviceOrganisationLabel }}
+      </FSSpan>
+    </FSCol>
+  </FSTile>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import type { PropType } from "vue";
+
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSTile from "./FSTile.vue";
+import FSSpan from "../FSSpan.vue";
+import FSIcon from "../FSIcon.vue";
+import FSCol from "../FSCol.vue";
+
+
+export default defineComponent({
+  name: "FSAlertTileUI",
+  components: {
+    FSTile,
+    FSIcon,
+    FSSpan,
+    FSCol,
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    deviceOrganisationLabel: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    icon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    triggerProcessedTimestamp: {
+      type: Number as PropType<number | null>,
+      required: false,
+      default: null
+    }
+  },
+  setup() {
+    const { epochToShortTimeFormat } = useDateFormat();
+
+    return {
+      ColorEnum,
+      epochToShortTimeFormat
+    };
+  }
+});
+</script>

package/components/tiles/FSChartTileUI.vue

@@ -1,56 +1,61 @@
 <template>
-  <FSClickable
-    padding="16px"
-    height="124px"
-    width="275px"
+  <FSTile
+    :width="['296px','336px']"
+    :height="['132px', '116px']"
+    :padding="['16px', '12px']"
+    borderRadius="8px"
     v-bind="$attrs"
   >
-    <template
-      #default
+    <FSRow
+      align="center-left"
+      gap="16px"
+      :wrap="false"
     >
-      <FSRow
+      <FSCol
         align="center-left"
-        :wrap="false"
+        :gap="['12px', '8px']"
       >
-        <FSCol
+        <FSSpan
+          font="text-overline"
+          :lineClamp="4"
+        >
+          {{ $props.label }}
+        </FSSpan>
+        <FSRow
           align="center-left"
+          :gap="['12px', '8px']"
         >
-          <FSSpan
-            font="text-button"
-            :lineClamp="2"
-          >
-            {{ $props.label }}
-          </FSSpan>
           <FSIcon
-            :color="ColorEnum.Error"
+            :color="ColorEnum.Primary"
+            :size="['18px', '16px']"
           >
             {{ chartIcon(type) }}
           </FSIcon>
-          <FSSpan
-            font="text-overline"
-          >
-            {{ $props.categoryLabel }}
-          </FSSpan>
-        </FSCol>
-        <FSCol
-          align="center-right"
-          width="hug"
-        >
-          <FSImage
-            v-if="$props.imageId"
-            height="92px"
-            width="92px"          
-            :imageId="$props.imageId"
+          <FSChip
+            v-if="$props.scope === ApplicationScope.OrganisationType"
+            :color="ColorEnum.Light"
+            :label="$tr('ui.chart-origin.organisation-type', 'Shared')"
           />
-          <FSIcon
-            v-else-if="$props.icon"
-            size="92px"
-            :icon="$props.icon"
-          />
-        </FSCol>
-      </FSRow>
-    </template>
-  </FSClickable>
+        </FSRow>
+      </FSCol>
+      <FSCol
+        align="center-right"
+        width="hug"
+      >
+        <FSImage
+          v-if="$props.imageId"
+          :imageId="$props.imageId"
+          :height="['84px', '72px']"
+          :width="['84px', '72px']"  
+        />
+        <FSIconCard
+          v-else-if="$props.icon"
+          :size="['84px', '72px']"
+          :icon="$props.icon"
+        />
+      </FSCol>
+    </FSRow>
+  </FSTile>
 </template>
 
 <script lang="ts">
@@ -58,26 +63,29 @@ import { defineComponent } from "vue";
 import type { PropType } from "vue";
 
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import type { ChartType } from "@dative-gpi/foundation-shared-domain/enums";
+import { ApplicationScope, ChartType } from "@dative-gpi/foundation-shared-domain/enums";
 
 import { chartIcon } from "@dative-gpi/foundation-shared-components/tools";
 
-import FSClickable from "../FSClickable.vue";
 import FSImage from "../FSImage.vue";
+import FSTile from "./FSTile.vue";
 import FSSpan from "../FSSpan.vue";
-import FSIcon from "../FSIcon.vue";
 import FSRow from "../FSRow.vue";
 import FSCol from "../FSCol.vue";
+import FSIconCard from '../FSIconCard.vue';
+import FSChip from '../FSChip.vue';
+
 
 export default defineComponent({
   name: "FSChartTileUI",
   components: {
-    FSIcon,
     FSImage,
+    FSTile,
     FSRow,
     FSCol,
     FSSpan,
-    FSClickable
+    FSChip,
+    FSIconCard
   },
   props: {
     label: {
@@ -90,11 +98,6 @@ export default defineComponent({
       required: false,
       default: null
     },
-    categoryLabel: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
     icon: {
       type: String as PropType<string | null>,
       required: false,
@@ -103,12 +106,18 @@ export default defineComponent({
     type: {
       type: Number as PropType<ChartType>,
       required: false,
-      default: null
-    }
+      default: ChartType.None
+    },
+    scope: {
+      type: Number as PropType<ApplicationScope>,
+      required: false,
+      default: ApplicationScope.None
+    },
   },
   setup() {
     return {
       ColorEnum,
+      ApplicationScope,
       chartIcon
     };
   }

package/components/tiles/FSCommentTileUI.vue

@@ -26,15 +26,19 @@
             -
             {{ timestamp }}
           </FSText>
-          <v-spacer />
-          <FSButtonEditIcon
-            v-if="canEditRemove"
-            @click="showEditComment = true"
-          />
-          <FSButtonRemoveIcon
-            v-if="canEditRemove"
-            @click="$emit('remove')"
-          />
+          <FSRow
+            align="center-right"
+            :wrap="false"
+          >
+            <FSButtonEditIcon
+              v-if="canEditRemove"
+              @click="showEditComment = true"
+            />
+            <FSButtonRemoveIcon
+              v-if="canEditRemove"
+              @click="removeDialog = true"
+            />
+          </FSRow>
         </FSRow>
       </template>
       <template
@@ -63,18 +67,25 @@
         @submit="updateComment"
       />
     </FSCol>
+    <FSDialogRemove 
+      v-model="removeDialog"
+      :removeTotal="1"
+      :removing="removing"
+      @click:submitButton="$emit('remove')"
+    />
   </FSCol>
 </template>
 
 <script lang="ts">
 import type { PropType} from "vue";
-import { defineComponent, ref } from "vue";
+import { defineComponent, ref, watch } from "vue";
 
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButtonRemoveIcon from "../buttons/FSButtonRemoveIcon.vue";
-import FSCommentField from "../fields/FSCommentField.vue";
 import FSButtonEditIcon from "../buttons/FSButtonEditIcon.vue";
+import FSCommentField from "../fields/FSCommentField.vue";
+import FSDialogRemove from "../FSDialogRemove.vue";
 import FSImage from "../FSImage.vue";
 import FSCard from "../FSCard.vue";
 import FSText from "../FSText.vue";
@@ -85,8 +96,9 @@ export default defineComponent({
   name: "FSCommentTileUI",
   components: {
     FSButtonRemoveIcon,
-    FSCommentField,
     FSButtonEditIcon,
+    FSCommentField,
+    FSDialogRemove,
     FSImage,
     FSCard,
     FSText,
@@ -128,20 +140,33 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    removing: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   emits: ["edit", "remove"],
   setup(props, { emit }) {
     const showEditComment = ref(false);
+    const removeDialog = ref(false);
 
     const updateComment = (comment: string) => {      
       emit('edit',{commentId : props.id, comment : comment})
       showEditComment.value = false;
     };
 
+    watch(() => props.removing, () => {
+      if (!props.removing) {
+        removeDialog.value = false;
+      }
+    });
+
     return {
-      ColorEnum,
       showEditComment,
+      removeDialog,
+      ColorEnum,
       updateComment
     };
   }

package/components/tiles/FSDashboardOrganisationTypeTileUI.vue

@@ -3,7 +3,16 @@
     :bottomColor="color"
     :icon="$props.icon"
     v-bind="$attrs"
-  />
+  >
+    <template
+      #append-info
+    >
+      <FSChip
+        :label="$tr('ui.dashboard-type.organisation-type', 'Shared')"
+        :color="ColorEnum.Light"
+      />
+    </template>
+  </FSSimpleTileUI>
 </template>
 
 <script lang="ts">
@@ -12,10 +21,12 @@ import { computed, defineComponent, type PropType } from "vue";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSimpleTileUI from "./FSSimpleTileUI.vue";
+import FSChip from '@dative-gpi/foundation-shared-components/components/FSChip.vue';
 
 export default defineComponent({
   name: "FSDashboardOrganisationTypeTileUI",
   components: {
+    FSChip,
     FSSimpleTileUI
   },
   props: {
@@ -39,7 +50,8 @@ export default defineComponent({
     });
 
     return {
-      color
+      color,
+      ColorEnum
     };
   }
 });

package/components/tiles/FSDashboardShallowTileUI.vue

@@ -3,7 +3,16 @@
     :bottomColor="color"
     :icon="$props.icon"
     v-bind="$attrs"
-  />
+  >
+    <template
+      #append-info
+    >
+      <FSChip
+        :label="$tr('ui.dashboard-type.shallow', 'Shallow copy')"
+        :color="ColorEnum.Light"
+      />
+    </template>
+  </FSSimpleTileUI>
 </template>
 
 <script lang="ts">
@@ -12,10 +21,12 @@ import { computed, defineComponent, type PropType } from "vue";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSimpleTileUI from "./FSSimpleTileUI.vue";
+import FSChip from '@dative-gpi/foundation-shared-components/components/FSChip.vue';
 
 export default defineComponent({
   name: "FSDashboardShallowTileUI",
   components: {
+    FSChip,
     FSSimpleTileUI
   },
   props: {
@@ -39,7 +50,8 @@ export default defineComponent({
     });
 
     return {
-      color
+      color,
+      ColorEnum
     };
   }
 });

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -2,7 +2,6 @@
   <FSTile
     :activeColor="ColorEnum.Primary"
     :bottomColor="ColorEnum.Primary"
-    :editable="$props.editable"
     :width="$props.width"
     :modelValue="$props.modelValue"
     v-bind="$attrs"
@@ -147,11 +146,6 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
-    },
-    editable: {
-      type: Boolean,
-      required: false,
-      default: true
     }
   },
   setup(props) {

package/components/tiles/FSEntityCountBadge.vue

@@ -0,0 +1,72 @@
+<template>
+  <FSRow
+    align="center-left"
+  >
+    <FSColor
+      height="24px"
+      :color="$props.color"
+      :border="false"
+    >
+      <FSRow
+        align="center-center"
+        width="24px"
+      >
+        <FSSpan
+          font="text-overline"
+        >
+          {{ badgeContent }}
+        </FSSpan>
+      </FSRow>
+    </FSColor>
+    <FSSpan
+      font="text-overline"
+    >
+      {{ $props.label }}
+    </FSSpan>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { capNumberToString } from '@dative-gpi/foundation-shared-components/utils';
+
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSColor from "../FSColor.vue";
+import FSSpan from "../FSSpan.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSEntityCountBadge",
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    count: {
+      type: Number,
+      required: true
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: () => ColorEnum.Primary
+    }
+  },
+  components: {
+    FSColor,
+    FSSpan,
+    FSRow
+  },
+  setup(props){
+
+    const badgeContent = computed(() => capNumberToString(props.count));
+
+    return {
+      ColorEnum,
+      badgeContent
+    };
+  }
+});
+</script>