@dative-gpi/foundation-shared-components 0.0.8 → 0.0.10

package/components/lists/FSFilterButton.vue

@@ -0,0 +1,177 @@
+<template>
+  <v-menu
+    :closeOnContentClick="false"
+    v-model="expanded"
+  >
+    <template #activator="{ props }">
+      <FSChip
+        class="fs-filter-button"
+        variant="standard"
+        prependIcon="mdi-filter-variant"
+        :color="ColorEnum.Dark"
+        :editable="true"
+        :label="label"
+        v-bind="props"
+      />
+    </template>
+    <FSCard
+      class="fs-filter-button-menu"
+      :elevation="true"
+      :border="false"
+    >
+      <FSCol
+        gap="16px"
+        padding="6px 16px"
+      >
+        <FSSpan
+          font="text-overline"
+        >
+          {{ $tr("ui.data-table.filter", "Filter") }}
+        </FSSpan>
+        <FSChip
+          class="fs-filter-button-all"
+          :editable="true"
+          :color="$props.color"
+          :variant="all ? 'full' : 'standard'"
+          :label="$tr('ui.data-table.all-values', 'All values')"
+          @click="onToggleAll"
+        />
+        <FSSearchField
+          class="fs-filter-button-all"
+          prependInnerIcon="mdi-magnify"
+          v-model="search"
+        />
+        <v-divider />
+        <FSFadeOut
+          class="fs-filter-button-fade"
+        >
+          <FSCol>
+            <FSChip
+              v-for="(filter, index) in searchedFilters"
+              class="fs-filter-button-chip"
+              :key="index"
+              :editable="true"
+              :label="filter.text"
+              :color="$props.color"
+              :variant="getVariant(filter)"
+              @click="() => onToggle(filter)"
+            >
+              <template #default>
+                <slot v-bind="{ filter }" />
+              </template>
+            </FSChip>
+          </FSCol>
+        </FSFadeOut>
+      </FSCol>
+    </FSCard>
+  </v-menu>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from "vue";
+
+import { ColorBase, ColorEnum, FSDataTableColumn, FSDataTableFilter } from "@dative-gpi/foundation-shared-components/models";
+import { useTranslationsProvider } from "@dative-gpi/foundation-shared-services/composables";
+
+import FSSearchField from "../FSSearchField.vue";
+import FSFadeOut from "../FSFadeOut.vue";
+import FSCard from "../FSCard.vue";
+import FSChip from "../FSChip.vue";
+import FSSpan from "../FSSpan.vue";
+import FSCol from "../FSCol.vue";
+
+export default defineComponent({
+  name: "FSFilterButton",
+  components: {
+    FSSearchField,
+    FSFadeOut,
+    FSCard,
+    FSChip,
+    FSSpan,
+    FSCol
+  },
+  props: {
+    header: {
+      type: Object as PropType<FSDataTableColumn>,
+      required: true
+    },
+    filters: {
+      type: Array as PropType<FSDataTableFilter[]>,
+      required: false,
+      default: () => []
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    }
+  },
+  emits: ["update:filter"],
+  setup(props, { emit }) {
+    const { $tr } = useTranslationsProvider();
+
+    const expanded = ref(false);
+    const search = ref(null);
+    const all = ref(!props.filters?.some(f => f.hidden) ?? true);
+
+    const label = computed(() => {
+      if (props.filters) {
+        const hidden = props.filters.filter(f => f.hidden).length;
+        if (hidden > 0) {
+          return $tr("ui.data-table.some-filters-visible", "{0}: {1} visible", props.header.text, (props.filters.length - hidden).toString());
+        }
+      }
+      return $tr("ui.data-table.all-filters-visible", "{0}: All visible", props.header.text);
+    });
+
+    const searchedFilters = computed((): FSDataTableFilter[] => {
+      if (search.value) {
+        return props.filters.filter(f => (f.text + f.value).includes(search.value));
+      }
+      return props.filters;
+    });
+
+    const getVariant = (filter: FSDataTableFilter): "standard" | "full" => {
+      if (all.value || filter.hidden) {
+        return "standard";
+      }
+      return "full";
+    };
+
+    const onToggle = (filter: FSDataTableFilter): void => {
+      if (all.value) {
+        all.value = false;
+        emit("update:filter", props.filters.map(f => ({ ...f, hidden: f.value !== filter.value })));
+      }
+      else {
+        if (filter.hidden && !props.filters.some(f => !f.hidden && f.value !== filter.value)) {
+          all.value = true;
+        }
+        emit("update:filter", props.filters.map(f => ({ ...f, hidden: f.value === filter.value ? !f.hidden : f.hidden })));
+      }
+    };
+
+    const onToggleAll = (): void => {
+      if (all.value) {
+        all.value = false;
+      }
+      else {
+        all.value = true;
+        emit("update:filter", props.filters.map(f => ({ ...f, hidden: false })));
+      }
+    };
+
+    return {
+      searchedFilters,
+      ColorEnum,
+      expanded,
+      search,
+      label,
+      all,
+      getVariant,
+      onToggle,
+      onToggleAll
+    };
+  }
+});
+</script>

package/components/lists/FSHeaderButton.vue

@@ -0,0 +1,99 @@
+<template>
+  <v-menu
+    v-model="expanded"
+  >
+    <template #activator="{ props }">
+      <FSButton
+        class="fs-header-button"
+        icon="mdi-dots-vertical"
+        variant="icon"
+        :color="ColorEnum.Light"
+        v-bind="props"
+      />
+    </template>
+    <FSCard
+      :elevation="true"
+      :border="false"
+    >
+      <FSCol
+        gap="16px"
+        padding="16px"
+      >
+        <FSSpan
+          font="text-overline"
+        >
+          {{ $tr("ui.data-table.column-options", "Options for this column") }}
+        </FSSpan>
+        <FSCol
+          padding="16px"
+        >
+          <FSButton
+            variant="icon"
+            icon="mdi-eye-off-outline"
+            :label="$tr('ui.data-table.hide-column', 'Hide column')"
+            :color="ColorEnum.Dark"
+            @click="$emit('update:hide')"
+          />
+          <FSButton
+            v-if="!$props.first"
+            variant="icon"
+            icon="mdi-chevron-left"
+            :label="$tr('ui.data-table.move-left', 'Move to the left')"
+            :color="ColorEnum.Dark"
+            @click="$emit('update:left')"
+          />
+          <FSButton
+            v-if="!$props.last"
+            variant="icon"
+            icon="mdi-chevron-right"
+            :label="$tr('ui.data-table.move-right', 'Move to the right')"
+            :color="ColorEnum.Dark"
+            @click="$emit('update:right')"
+          />
+        </FSCol>
+      </FSCol>
+    </FSCard>
+  </v-menu>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+import FSCard from "../FSCard.vue";
+import FSSpan from "../FSSpan.vue";
+import FSCol from "../FSCol.vue";
+
+export default defineComponent({
+  name: "FSHeaderButton",
+  components: {
+    FSButton,
+    FSCard,
+    FSSpan,
+    FSCol
+  },
+  props: {
+    first: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    last: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["update:hide", "update:left", "update:right"],
+  setup() {
+    const expanded = ref(false);
+
+    return {
+      ColorEnum,
+      expanded
+    };
+  }
+})
+</script>

package/components/lists/FSHiddenButton.vue

@@ -0,0 +1,81 @@
+<template>
+  <v-menu
+    :closeOnContentClick="false"
+    v-model="expanded"
+  >
+    <template #activator="{ props }">
+      <FSChip
+        prependIcon="mdi-eye-off-outline"
+        :color="ColorEnum.Light"
+        :editable="true"
+        :label="$tr('ui.data-table.hidden-columns', '{0} hidden column(s)', $props.headers.length.toString())"
+        v-bind="props"
+      />
+    </template>
+    <FSCard
+      class="fs-hidden-button-menu"
+      :elevation="true"
+      :border="false"
+    >
+      <FSCol
+        gap="16px"
+        padding="6px 16px"
+      >
+        <FSSpan
+          font="text-overline"
+        >
+          {{ $tr("ui.data-table.show-columns", "Show columns") }}
+        </FSSpan>
+        <FSChip
+          v-for="(header, index) in $props.headers"
+          class="fs-hidden-button-chip"
+          :color="$props.color"
+          :label="header.text"
+          :editable="true"
+          :key="index"
+          @click="$emit('update:show', header)"
+        />
+      </FSCol>
+    </FSCard>
+  </v-menu>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref } from "vue";
+
+import { ColorBase, ColorEnum, FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
+
+import FSCard from "../FSCard.vue";
+import FSChip from "../FSChip.vue";
+import FSSpan from "../FSSpan.vue";
+import FSCol from "../FSCol.vue";
+
+export default defineComponent({
+  name: "FSHiddenButton",
+  components: {
+    FSCard,
+    FSChip,
+    FSSpan,
+    FSCol
+  },
+  props: {
+    headers: {
+      type: Array as PropType<FSDataTableColumn[]>,
+      required: true
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    }
+  },
+  setup() {
+    const expanded = ref(false);
+
+    return {
+      ColorEnum,
+      expanded
+    };
+  }
+});
+</script>

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -0,0 +1,232 @@
+<template>
+  <FSTile
+    :bottomColor="ColorEnum.Primary"
+    :editable="$props.editable"
+    :modelValue="$props.modelValue"
+    v-bind="$attrs"
+  >
+    <FSCol
+      align="center-center"
+      width="fill"
+    >
+      <FSRow
+        align="center-center"
+        gap="24px"
+        :wrap="false"
+        :height="infoHeight"
+      >
+        <FSCol
+          gap="12px"
+        >
+          <FSCol
+            gap="6px"
+            :width="infoWidth"
+          >
+            <FSSpan
+              font="text-button"
+              :lineClamp="2"
+            >
+              {{ $props.label }}
+            </FSSpan>
+            <FSSpan
+              font="text-overline"
+            >
+              {{ $props.code }}
+            </FSSpan>
+          </FSCol>
+          <FSRow
+            gap="4px"
+          >
+            <FSConnectivity
+              :deviceConnectivity="$props.deviceConnectivity"
+            />
+            <FSWorstAlert
+              v-if="$props.deviceWorstAlert"
+              :deviceAlert="$props.deviceWorstAlert"
+              :deviceAlerts="$props.deviceAlerts.length"
+            />
+            <FSStatusesRow
+              :modelStatuses="lineModelStatuses"
+              :deviceStatuses="lineDeviceStatuses"
+            />
+          </FSRow>
+        </FSCol>
+        <FSImage
+          v-if="$props.imageId"
+          :imageId="$props.imageId"
+          :width="imageSize"
+        />
+      </FSRow>
+      <template v-if="carouselModelStatuses.length">
+        <FSDivider />
+        <FSStatusesCarousel
+          :modelStatuses="carouselModelStatuses"
+          :deviceStatuses="carouselDeviceStatuses"
+        />
+      </template>
+    </FSCol>
+  </FSTile>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { FSModelStatus, FSDeviceStatus, FSDeviceAlert, 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 FSConnectivity from "../deviceOrganisations/FSConnectivity.vue";
+import FSStatusesRow from "../deviceOrganisations/FSStatusesRow.vue";
+import FSWorstAlert from "../deviceOrganisations/FSWorstAlert.vue";
+import FSDivider from "../FSDivider.vue";
+import FSImage from "../FSImage.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: "FSDeviceOrganisationTileUI",
+  components: {
+    FSStatusesCarousel,
+    FSConnectivity,
+    FSStatusesRow,
+    FSWorstAlert,
+    FSDivider,
+    FSImage,
+    FSTile,
+    FSSpan,
+    FSCol,
+    FSRow
+  },
+  props: {
+    imageId: {
+      type: String,
+      required: false,
+      default: null
+    },
+    label: {
+      type: String,
+      required: false,
+      default: null
+    },
+    code: {
+      type: String,
+      required: false,
+      default: null
+    },
+    deviceConnectivity: {
+      type: Object as PropType<FSDeviceConnectivity>,
+      required: false,
+      default: null
+    },
+    deviceWorstAlert: {
+      type: Object as PropType<FSDeviceAlert>,
+      required: false,
+      default: null
+    },
+    deviceAlerts: {
+      type: Array as PropType<FSDeviceAlert[]>,
+      required: false,
+      default: null
+    },
+    modelStatuses: {
+      type: Array as PropType<FSModelStatus[]>,
+      required: true,
+      default: () => []
+    },
+    deviceStatuses: {
+      type: Array as PropType<FSDeviceStatus[]>,
+      required: true,
+      default: () => []
+    },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  setup(props) {
+    const { isMobileSized } = useBreakpoints();
+
+    const lineModelStatuses = computed((): FSModelStatus[] => {
+      return props.modelStatuses.filter(modelStatus => {
+        if (!modelStatus.inline || modelStatus.groupById) {
+          return false;
+        }
+        if (!modelStatus.showDefault) {
+          if (!props.deviceStatuses.some(deviceStatus => deviceStatus.modelStatusId === modelStatus.id)) {
+            return false;
+          }
+        }
+        return true;
+      }).slice(0, 4).sort((a, b) => a.index - b.index);
+    });
+
+    const lineDeviceStatuses = computed((): FSDeviceStatus[] => {
+      return props.deviceStatuses.filter(deviceStatus => {
+        return lineModelStatuses.value.some(modelStatus => modelStatus.id === deviceStatus.modelStatusId)
+      });
+    });
+
+    const carouselModelStatuses = computed((): FSModelStatus[] => {
+      const notCarouselModelStatuses = props.modelStatuses.filter(modelStatus => {
+        if (!modelStatus.inline || modelStatus.groupById) {
+          return false;
+        }
+        return true;
+      }).slice(0, 4);
+      return props.modelStatuses.filter(modelStatus => {
+        if (notCarouselModelStatuses.some(lineModelStatus => modelStatus.id === lineModelStatus.id)) {
+          return false;
+        }
+        if (!modelStatus.showDefault) {
+          if (!props.deviceStatuses.some(deviceStatus => deviceStatus.modelStatusId === modelStatus.id)) {
+            return false;
+          }
+        }
+        return true;
+      }).sort((a, b) => (a.index + (a.inline ? b.index : 0)) - b.index);
+    });
+
+    const carouselDeviceStatuses = computed((): FSDeviceStatus[] => {
+      return props.deviceStatuses.filter(deviceStatus => {
+        return carouselModelStatuses.value.some(modelStatus => modelStatus.id === deviceStatus.modelStatusId)
+      });
+    });
+
+    const imageSize = computed((): number => {
+      return isMobileSized.value ? 90 : 100;
+    });
+
+    const infoWidth = computed((): string => {
+      let width = isMobileSized.value ? 288 : 304;
+      if (props.imageId) {
+        width -= imageSize.value;
+      }
+      return `${width}px`;
+    });
+
+    const infoHeight = computed((): string => {
+      return `${imageSize.value}px`;
+    });
+
+    return {
+      ColorEnum,
+      lineModelStatuses,
+      lineDeviceStatuses,
+      carouselModelStatuses,
+      carouselDeviceStatuses,
+      imageSize,
+      infoWidth,
+      infoHeight
+    };
+  }
+});
+</script>