@dative-gpi/foundation-shared-components 1.0.35 → 1.0.37-report-v1

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

@@ -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

package/components/tiles/FSLocationTileUI.vue

@@ -0,0 +1,192 @@
+<template>
+  <FSTile
+    :activeColor="$props.color"
+    :bottomColor="$props.color"
+    :modelValue="$props.modelValue"
+    :width="$props.width"
+    v-bind="$attrs"
+  >
+    <FSCol
+      align="center-center"
+      width="fill"
+    >
+      <FSRow
+        align="center-left"
+        gap="24px"
+        :height="imageSize"
+        :wrap="false"
+      >
+        <FSCol 
+          gap="12px"
+          :width="infoWidth"
+        >
+          <FSCol
+            gap="4px"
+          >
+            <FSSpan
+              font="text-button"
+              :lineClamp="1"
+            >
+              {{ $props.label }}
+            </FSSpan>
+            <FSSpan
+              v-if="$props.code"
+              font="text-overline"
+              variant="soft"
+            >
+              {{ $props.code }}
+            </FSSpan>
+          </FSCol>
+          <FSCol
+            gap="8px"
+          >
+            <FSRow
+              v-if="$props.deviceCount"
+              :wrap="false"
+              align="center-left"
+            >
+              <FSColor
+                padding="0 8px"
+                height="24px"
+                :color="ColorEnum.Light"
+                :border="false"
+              >
+                <FSRow
+                  align="center-center"
+                >
+                  <FSSpan
+                    font="text-overline"
+                  >
+                    {{ $props.deviceCount <= 99 ? $props.deviceCount : "99+" }}
+                  </FSSpan>
+                </FSRow>
+              </FSColor>
+              <FSSpan
+                font="text-overline"
+              >
+                {{ $tr("ui.common.devices", "Equipment(s)") }}
+              </FSSpan>
+            </FSRow>
+            <FSRow
+              v-if="$props.address"
+              :wrap="false"
+              align="center-left"
+            >
+              <FSColor
+                width="24px"
+                height="24px"
+                :color="ColorEnum.Light"
+                :border="false"
+              >
+                <FSRow
+                  align="center-center"
+                >
+                  <FSIcon
+                    icon="mdi-map-marker"
+                    size="16px"
+                  />
+                </FSRow>
+              </FSColor>
+              <FSSpan
+                font="text-overline"
+              >
+                {{ $props.address }}
+              </FSSpan>
+            </FSRow>
+          </FSCol>
+        </FSCol>
+        <FSIconCard
+          backgroundVariant="standard"
+          :backgroundColor="ColorEnum.Background"
+          :iconColor="$props.color"
+          :icon="$props.icon"
+          :size="imageSize"
+        />
+      </FSRow>
+    </FSCol>
+  </FSTile>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSIconCard from "../FSIconCard.vue";
+import FSColor from "../FSColor.vue";
+import FSSpan from "../FSSpan.vue";
+import FSTile from "./FSTile.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSLocationTileUI",
+  components: {
+    FSIconCard,
+    FSColor,
+    FSSpan,
+    FSTile,
+    FSCol,
+    FSRow
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    code: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: "mdi-map-marker"
+    },
+    address: {
+      type: String,
+      required: false
+    },
+    deviceCount: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [352, 336]
+    },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  setup() {
+    const { isMobileSized } = useBreakpoints();
+
+    const imageSize = computed((): number => {
+      return isMobileSized.value ? 90 : 100;
+    });
+
+    const infoWidth = computed((): string => {
+      return `calc(100% - ${imageSize.value}px - 24px)`;
+    });
+
+    return {
+      ColorEnum,
+      imageSize,
+      infoWidth
+    };
+  }
+});
+</script>

package/components/tiles/FSModelTileUI.vue

@@ -0,0 +1,18 @@
+<template>
+  <FSSimpleTileUI
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import FSSimpleTileUI from "./FSSimpleTileUI.vue";
+
+export default defineComponent({
+  name: "FSModelTileUI",
+  components: {
+    FSSimpleTileUI,
+  }
+});
+</script>

package/components/tiles/FSSimpleTileUI.vue

@@ -12,7 +12,7 @@
       width="fill"
     >
       <FSRow
-        align="center-center"
+        align="center-left"
         gap="24px"
         :height="imageSize"
         :wrap="false"
@@ -41,9 +41,10 @@
           :width="imageSize"
         />
         <FSIconCard
-          v-else
+          v-else-if="$props.icon"
           :backgroundVariant="$props.iconBackgroundVariant"
           :backgroundColor="$props.iconBackgroundColor"
+          :iconColor="$props.iconColor"
           :border="$props.iconBorder"
           :icon="$props.icon"
           :size="imageSize"
@@ -95,12 +96,11 @@ export default defineComponent({
     icon: {
       type: String as PropType<string>,
       required: false,
-      default: "mdi-ab-testing"
     },
     iconBackgroundVariant: {
       type: String as PropType<"background" | "standard" | "full" | "gradient">,
       required: false,
-      default: "background"
+      default: "standard"
     },
     iconBackgroundColor: {
       type: [Array, String] as PropType<ColorBase | ColorBase[]>,
@@ -112,6 +112,11 @@ export default defineComponent({
       required: false,
       default: true
     },
+    iconColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Light
+    },
     activeColor: {
       type: String as PropType<ColorBase>,
       required: false,