@dative-gpi/foundation-shared-components 1.0.26 → 1.0.28-remove-deprecated2

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/FSChartTile.vue

@@ -0,0 +1,73 @@
+<template>
+  <FSChartTileUI
+    v-if="chart"
+    :label="chart.label"
+    :icon="chart.icon"
+    :type="chart.chartType"
+    :imageId="chart.imageId"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, watch, computed } from "vue";
+import type { PropType } 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 "./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 : fetchChartOrganisation, entity : chartOrganisation } = useChartOrganisation();
+    const {get : fetchChartOrganisationType, entity : chartOrganisationType } = useChartOrganisationType();
+
+    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/FSChartTileUI.vue

@@ -0,0 +1,111 @@
+<template>
+  <FSTile
+    :width="['275px','336px']"
+    :height="['124px','156px']"
+    borderRadius="8px"
+    v-bind="$attrs"
+  >
+    <template
+      #default
+    >
+      <FSRow
+        align="center-left"
+        padding="4px 4px 4px 8px"
+        gap="16px"
+        :wrap="false"
+      >
+        <FSCol
+          align="center-left"
+          gap="4px"
+        >
+          <FSSpan
+            font="text-overline"
+            :lineClamp="4"
+          >
+            {{ $props.label }}
+          </FSSpan>
+          <FSIcon
+            :color="ColorEnum.Error"
+            size="18px"
+          >
+            {{ chartIcon(type) }}
+          </FSIcon>
+        </FSCol>
+        <FSCol
+          align="center-right"
+          width="hug"
+        >
+          <FSImage
+            v-if="$props.imageId"
+            :height="['82px','90px']"
+            :width="['82px','90px']"          
+            :imageId="$props.imageId"
+          />
+          <FSIcon
+            v-else-if="$props.icon"
+            :size="['82px','90px']"
+            :icon="$props.icon"
+          />
+        </FSCol>
+      </FSRow>
+    </template>
+  </FSTile>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import type { PropType } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { ChartType } from "@dative-gpi/foundation-shared-domain/enums";
+
+import { chartIcon } from "@dative-gpi/foundation-shared-components/tools";
+
+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";
+
+
+export default defineComponent({
+  name: "FSChartTileUI",
+  components: {
+    FSImage,
+    FSTile,
+    FSIcon,
+    FSRow,
+    FSCol,
+    FSSpan,
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    imageId: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    icon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    type: {
+      type: Number as PropType<ChartType>,
+      required: false,
+      default: ChartType.None
+    }
+  },
+  setup() {
+    return {
+      ColorEnum,
+      chartIcon
+    };
+  }
+});
+</script>

package/components/tiles/FSCommentTileUI.vue

@@ -0,0 +1,174 @@
+<template>
+  <FSCol
+    align="center-center"
+  >
+    <FSCard
+      padding="8px"
+      width="500px"
+    >
+      <template
+        #header
+      >
+        <FSRow
+          align="center-center"
+          gap="12px"
+        >
+          <FSImage
+            :imageId="userImageId"
+            width="24px"
+            height="24px"
+            rounded="circle"
+          />
+          <FSText
+            font="text-overline"
+          >
+            {{ userName }}
+            -
+            {{ timestamp }}
+          </FSText>
+          <FSRow
+            align="center-right"
+            :wrap="false"
+          >
+            <FSButtonEditIcon
+              v-if="canEditRemove"
+              @click="showEditComment = true"
+            />
+            <FSButtonRemoveIcon
+              v-if="canEditRemove"
+              @click="removeDialog = true"
+            />
+          </FSRow>
+        </FSRow>
+      </template>
+      <template
+        #body
+      >
+        <FSText 
+          class="text-wrap"
+        >
+          {{ comment }}
+        </FSText>
+      </template>
+      <template
+        #footer
+      >
+      </template>
+    </FSCard>
+    <FSCol
+      width="500px"
+      v-if="showEditComment"
+    >
+      <FSCommentField
+        :userImageId="userImageId"
+        :showCancelButton="true"
+        :text="comment"
+        @cancel="showEditComment = false"
+        @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, watch } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButtonRemoveIcon from "../buttons/FSButtonRemoveIcon.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";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSCommentTileUI",
+  components: {
+    FSButtonRemoveIcon,
+    FSButtonEditIcon,
+    FSCommentField,
+    FSDialogRemove,
+    FSImage,
+    FSCard,
+    FSText,
+    FSCol,
+    FSRow,
+  },
+  props: {
+    id: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    userName: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    userImageId: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    canEditRemove: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    timestamp: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    comment: {
+      type: String as PropType<string | undefined>,
+      required: false,
+      default: undefined
+    },
+    edited: {
+      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 {
+      showEditComment,
+      removeDialog,
+      ColorEnum,
+      updateComment
+    };
+  }
+});
+</script>

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -43,6 +43,7 @@
             :deviceStatuses="singleDeviceStatuses"
             :modelStatuses="singleModelStatuses"
             :deviceAlerts="$props.deviceAlerts"
+            :alertTo="$props.alertTo"
           />
         </FSCol>
         <FSImage
@@ -132,6 +133,11 @@ export default defineComponent({
       required: true,
       default: () => []
     },
+    alertTo: {
+      type: Function,
+      required: false,
+      default: null
+    },
     width: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,

package/components/tiles/FSGroupTileUI.vue

@@ -62,7 +62,7 @@
               <FSSpan
                 font="text-overline"
               >
-                {{ $tr("ui.group-tile.group(s)", "Group(s)") }}
+                {{ $tr("ui.common.groups", "Group(s)") }}
               </FSSpan>
             </FSRow>
             <FSRow
@@ -87,7 +87,7 @@
               <FSSpan
                 font="text-overline"
               >
-                {{ $tr("ui.group-tile.device(s)", "Device(s)") }}
+                {{ $tr("ui.common.devices", "Device(s)") }}
               </FSSpan>
             </FSRow>
           </FSCol>

package/components/tiles/FSLoadTile.vue

@@ -42,6 +42,8 @@
     <FSCard
       v-if="$props.editable"
       class="fs-tile-checkbox"
+      :height="['40px', '32px']"
+      :width="['40px', '32px']"
       :border="false"
     >
       <FSCheckbox