@dative-gpi/foundation-shared-components 0.0.229 → 0.1.68

package/components/selects/FSSelectListMode.vue

@@ -0,0 +1,51 @@
+<template>
+  <FSSelectField
+    :clearable="false"
+    :items="items"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      #item-prepend="{ item }"
+    >
+      <v-icon>{{ item.icon }}</v-icon>
+    </template>
+  </FSSelectField>
+</template>
+  
+  <script lang="ts">
+import type { PropType} from "vue";
+import { defineComponent } from "vue";
+  
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { ListModes } from "@dative-gpi/foundation-shared-domain/enums";
+  
+import FSSelectField from "../fields/FSSelectField.vue";
+  
+export default defineComponent({
+  name: "FSSelectViewMode",
+  components: {
+    FSSelectField
+  },
+  props: {
+    modelValue: {
+      type: String as PropType<ListModes>,
+      required: true
+    },
+  },
+  emits: ["update:modelValue"],
+  setup() {
+    const { $tr } = useTranslationsProvider();
+  
+    const items = [
+      { id: ListModes.Table, label: $tr("ui.common.table-mode", "Table"), icon: "mdi-format-list-bulleted" },
+      { id: ListModes.Iterator, label: $tr("ui.common.tile-mode", "Tuile"), icon: "mdi-view-grid-outline" },
+    ];
+  
+    return {
+      items
+    };
+  }
+});
+  </script>

package/components/selects/FSSelectMonths.vue

@@ -0,0 +1,67 @@
+<template>
+  <FSSelectField
+    :clearable="false"
+    :items="months"
+    :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 { Months } from "@dative-gpi/foundation-shared-domain/enums";
+
+import FSSelectField from "../fields/FSSelectField.vue";
+
+export default defineComponent({
+  name: "FSSelectMonths",
+  components: {
+    FSSelectField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<Months>,
+      required: false,
+      default: Months.January
+    },
+    useAllMonths: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { $tr } = useTranslationsProvider();
+
+    const months = computed((): { id: Months; label: string }[] => {
+      const items = [
+        { id: Months.January, label: $tr("ui.months.january", "January") },
+        { id: Months.February, label: $tr("ui.months.february", "February") },
+        { id: Months.March, label: $tr("ui.months.march", "March") },
+        { id: Months.April, label: $tr("ui.months.april", "April") },
+        { id: Months.May, label: $tr("ui.months.may", "May") },
+        { id: Months.June, label: $tr("ui.months.june", "June") },
+        { id: Months.July, label: $tr("ui.months.july", "July") },
+        { id: Months.August, label: $tr("ui.months.august", "August") },
+        { id: Months.September, label: $tr("ui.months.september", "September") },
+        { id: Months.October, label: $tr("ui.months.october", "October") },
+        { id: Months.November, label: $tr("ui.months.november", "November") },
+        { id: Months.December, label: $tr("ui.months.december", "December") }
+      ];
+      if (props.useAllMonths) {
+        items.unshift({ id: Months.AllMonths, label: $tr("ui.months.all-months", "All months") });
+      }
+      return items;
+    });
+
+    return {
+      months
+    };
+  }
+});
+</script>

package/components/tiles/FSChartTileUI.vue

@@ -0,0 +1,116 @@
+<template>
+  <FSClickable
+    padding="16px"
+    height="124px"
+    width="275px"
+    v-bind="$attrs"
+  >
+    <template
+      #default
+    >
+      <FSRow
+        align="center-left"
+        :wrap="false"
+      >
+        <FSCol
+          align="center-left"
+        >
+          <FSSpan
+            font="text-button"
+            :lineClamp="2"
+          >
+            {{ $props.label }}
+          </FSSpan>
+          <FSIcon
+            :color="ColorEnum.Error"
+          >
+            {{ 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"
+          />
+          <FSIcon
+            v-else-if="$props.icon"
+            size="92px"
+            :icon="$props.icon"
+          />
+        </FSCol>
+      </FSRow>
+    </template>
+  </FSClickable>
+</template>
+
+<script lang="ts">
+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 { chartIcon } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSClickable from "../FSClickable.vue";
+import FSImage from "../FSImage.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: {
+    FSIcon,
+    FSImage,
+    FSRow,
+    FSCol,
+    FSSpan,
+    FSClickable
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    imageId: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    categoryLabel: {
+      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: null
+    }
+  },
+  setup() {
+    return {
+      ColorEnum,
+      chartIcon
+    };
+  }
+});
+</script>

package/components/tiles/FSCommentTileUI.vue

@@ -0,0 +1,149 @@
+<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>
+          <v-spacer />
+          <FSButtonEditIcon
+            v-if="canEditRemove"
+            @click="showEditComment = true"
+          />
+          <FSButtonRemoveIcon
+            v-if="canEditRemove"
+            @click="$emit('remove')"
+          />
+        </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>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import type { PropType} from "vue";
+import { defineComponent, ref } 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 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,
+    FSCommentField,
+    FSButtonEditIcon,
+    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
+    }
+  },
+  emits: ["edit", "remove"],
+  setup(props, { emit }) {
+    const showEditComment = ref(false);
+
+    const updateComment = (comment: string) => {      
+      emit('edit',{commentId : props.id, comment : comment})
+      showEditComment.value = false;
+    };
+
+    return {
+      ColorEnum,
+      showEditComment,
+      updateComment
+    };
+  }
+});
+</script>

package/components/tiles/FSDashboardOrganisationTileUI.vue

@@ -7,16 +7,17 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSimpleTileUI from "./FSSimpleTileUI.vue";
 
 export default defineComponent({
   name: "FSDashboardOrganisationTileUI",
+  components: {
+    FSSimpleTileUI
+  },
   props: {
     bottomColor: {
       type: [Array, String] as PropType<ColorBase | ColorBase[]>,
@@ -29,9 +30,6 @@ export default defineComponent({
       default: "mdi-view-dashboard"
     }
   },
-  components: {
-    FSSimpleTileUI
-  },
   setup(props){
     const color = computed(() => {
       if(Array.isArray(props.bottomColor) && !props.bottomColor.length) {
@@ -42,7 +40,7 @@ export default defineComponent({
 
     return {
       color
-    }
+    };
   }
 });
 </script>

package/components/tiles/FSDashboardOrganisationTypeTileUI.vue

@@ -7,16 +7,17 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSimpleTileUI from "./FSSimpleTileUI.vue";
 
 export default defineComponent({
   name: "FSDashboardOrganisationTypeTileUI",
+  components: {
+    FSSimpleTileUI
+  },
   props: {
     bottomColor: {
       type: [Array, String] as PropType<ColorBase | ColorBase[]>,
@@ -29,9 +30,6 @@ export default defineComponent({
       default: "mdi-view-dashboard"
     }
   },
-  components: {
-    FSSimpleTileUI
-  },
   setup(props){
     const color = computed(() => {
       if(Array.isArray(props.bottomColor) && !props.bottomColor.length) {
@@ -42,7 +40,7 @@ export default defineComponent({
 
     return {
       color
-    }
+    };
   }
 });
 </script>

package/components/tiles/FSDashboardShallowTileUI.vue

@@ -7,16 +7,17 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSimpleTileUI from "./FSSimpleTileUI.vue";
 
 export default defineComponent({
   name: "FSDashboardShallowTileUI",
+  components: {
+    FSSimpleTileUI
+  },
   props: {
     bottomColor: {
       type: [Array, String] as PropType<ColorBase | ColorBase[]>,
@@ -29,9 +30,6 @@ export default defineComponent({
       default: "mdi-view-dashboard"
     }
   },
-  components: {
-    FSSimpleTileUI
-  },
   setup(props){
     const color = computed(() => {
       if(Array.isArray(props.bottomColor) && !props.bottomColor.length) {
@@ -42,7 +40,7 @@ export default defineComponent({
 
     return {
       color
-    }
+    };
   }
 });
 </script>

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -1,9 +1,10 @@
 <template>
   <FSTile
+    :activeColor="ColorEnum.Primary"
     :bottomColor="ColorEnum.Primary"
     :editable="$props.editable"
-    :modelValue="$props.modelValue"
     :width="$props.width"
+    :modelValue="$props.modelValue"
     v-bind="$attrs"
   >
     <FSCol
@@ -18,23 +19,23 @@
       >
         <FSCol
           gap="12px"
-          :width="`calc(100% - ${imageSize}px - 24px)`"
+          :width="infoWidth"
         >
           <FSCol
             gap="6px"
           >
-            <FSText
+            <FSSpan
               font="text-button"
               :lineClamp="2"
             >
               {{ $props.label }}
-            </FSText>
-            <FSText
+            </FSSpan>
+            <FSSpan
               font="text-overline"
               variant="soft"
             >
               {{ $props.code }}
-            </FSText>
+            </FSSpan>
           </FSCol>
           <FSStatusesRow
             :deviceConnectivity="$props.deviceConnectivity"
@@ -42,6 +43,7 @@
             :deviceStatuses="singleDeviceStatuses"
             :modelStatuses="singleModelStatuses"
             :deviceAlerts="$props.deviceAlerts"
+            :alertTo="$props.alertTo"
           />
         </FSCol>
         <FSImage
@@ -64,18 +66,16 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import type { FSModelStatus, FSDeviceStatus, FSDeviceAlert, FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum, type FSModelStatus, type FSDeviceStatus, type FSDeviceAlert, type FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSStatusesCarousel from "../deviceOrganisations/FSStatusesCarousel.vue";
 import FSStatusesRow from "../deviceOrganisations/FSStatusesRow.vue";
 import FSDivider from "../FSDivider.vue";
 import FSImage from "../FSImage.vue";
-import FSText from "../FSText.vue";
+import FSSpan from "../FSSpan.vue";
 import FSTile from "./FSTile.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
@@ -87,7 +87,7 @@ export default defineComponent({
     FSStatusesRow,
     FSDivider,
     FSImage,
-    FSText,
+    FSSpan,
     FSTile,
     FSCol,
     FSRow
@@ -133,6 +133,16 @@ 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,
+      default: () => [352, 336]
+    },
     modelValue: {
       type: Boolean,
       required: false,
@@ -142,12 +152,7 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
-    },
-    width: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: () => [352, 336]
-    },
+    }
   },
   setup(props) {
     const { isMobileSized } = useBreakpoints();
@@ -196,6 +201,12 @@ export default defineComponent({
       return isMobileSized.value ? 90 : 100;
     });
 
+    const infoWidth = computed((): string => {
+      if (!props.imageId) {
+        return "100%";
+      }
+      return `calc(100% - ${imageSize.value}px - 24px)`;
+    });
 
     return {
       carouselDeviceStatuses,
@@ -204,6 +215,7 @@ export default defineComponent({
       singleModelStatuses,
       ColorEnum,
       imageSize,
+      infoWidth
     };
   }
 });

package/components/tiles/FSFolderTileUI.vue

@@ -1,18 +1,18 @@
 <template>
   <FSSimpleTileUI
-    :iconBackgroundColor="true"
+    iconBackgroundVariant="gradient"
+    :iconBackgroundColor="color"
     :bottomColor="color"
+    :iconBorder="false"
     :icon="$props.icon"
     v-bind="$attrs"
   />
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSimpleTileUI from "./FSSimpleTileUI.vue";
 
@@ -43,7 +43,7 @@ export default defineComponent({
 
     return {
       color
-    }
+    };
   }
 });
 </script>