@dative-gpi/foundation-shared-components 1.0.137-override-widgets → 1.0.137-reportV2

package/components/FSCheckbox.vue

@@ -50,7 +50,6 @@
         v-if="$props.description"
         class="fs-checkbox-description"
         font="text-overline"
-        :lineClamp="2"
         :style="style"
       >
         {{ $props.description }}

package/components/FSRadio.vue

@@ -50,7 +50,6 @@
         v-if="$props.description"
         class="fs-radio-description"
         font="text-overline"
-        :lineClamp="2"
         :style="style"
       >
         {{ $props.description }}

package/components/FSSlider.vue

@@ -35,7 +35,7 @@
       :elevation="0"
       :tickSize="4"
       :modelValue="$props.modelValue ?? undefined"
-      @update:modelValue="$emit('update:modelValue', $event)"
+      @update:modelValue="(value) => $emit('update:modelValue', value)"
       v-bind="$attrs"
     >
       <template
@@ -55,7 +55,6 @@
         v-if="$props.description"
         class="fs-slider-description"
         font="text-overline"
-        :lineClamp="2"
         :style="style"
       >
         {{ $props.description }}

package/components/FSSwitch.vue

@@ -1,25 +1,29 @@
 <template>
-  <FSCol
+  <FSRow
+    width="hug"
+    align="top-left"
+    gap="16px"
     padding="8px 0px"
+    :wrap="false"
   >
-    <FSRow
-      gap="16px"
-      :wrap="false"
-    >
-      <v-switch
-        v-if="variant == 'left'"
-        class="fs-switch"
-        hide-details
-        inset
-        :validateOn="validateOn"
-        :rules="$props.rules"
-        :ripple="false"
-        :style="style"
-        :modelValue="$props.modelValue"
-        @update:modelValue="onToggle"
-        v-bind="$attrs"
-      />
-      <FSCol>
+    <v-switch
+      v-if="variant == 'left'"
+      class="fs-switch"
+      hide-details
+      inset
+      :validateOn="validateOn"
+      :rules="$props.rules"
+      :ripple="false"
+      :style="style"
+      :modelValue="$props.modelValue"
+      @update:modelValue="onToggle"
+      v-bind="$attrs"
+    />
+    <slot>
+      <FSCol
+        width="hug"
+        v-if="$props.label || $props.description || $slots.description"
+      >
         <FSSpan
           v-if="$props.label"
           class="fs-switch-label"
@@ -37,31 +41,33 @@
             class="fs-switch-description"
             font="text-overline"
             :style="style"
-            :lineClamp="2"
           >
             {{ $props.description }}
           </FSSpan>
         </slot>
-      </FSCol>
-      <FSRow
-        v-if="variant == 'right'"
-        align="center-right"
-      >
-        <v-switch
-          class="fs-switch"
-          hide-details
-          inset
-          :validateOn="validateOn"
-          :rules="$props.rules"
-          :ripple="false"
-          :style="style"
-          :modelValue="$props.modelValue"
-          @update:modelValue="onToggle"
-          v-bind="$attrs"
+        <slot
+          name="footer"
         />
-      </FSRow>
+      </FSCol>
+    </slot>
+    <FSRow
+      v-if="variant == 'right'"
+      align="center-right"
+    >
+      <v-switch
+        class="fs-switch"
+        hide-details
+        inset
+        :validateOn="validateOn"
+        :rules="$props.rules"
+        :ripple="false"
+        :style="style"
+        :modelValue="$props.modelValue"
+        @update:modelValue="onToggle"
+        v-bind="$attrs"
+      />
     </FSRow>
-  </FSCol>
+  </FSRow>
 </template>
 
 <script lang="ts">

package/components/fields/FSBaseField.vue

@@ -54,7 +54,6 @@
         v-if="$props.description"
         class="fs-base-field-description"
         font="text-overline"
-        :lineClamp="2"
       >
         {{ $props.description }}
       </FSSpan>

package/components/fields/FSEntityFieldUI.vue

@@ -14,20 +14,18 @@
         :wrap="false"
       >
         <FSSelectField
-          :editable="$props.editable"
-          :items="actualEntityTypes"
           :hideHeader="true"
-          :clearable="false"
           :modelValue="$props.entityType"
           @update:modelValue="$emit('update:entityType', $event)"
+          :items="actualEntityTypes"
+          :clearable="false"
         />
         <template
           v-if="itemsCount > 0"
         >
           <FSButton
-            icon="mdi-pencil"
             :label="$tr('ui.common.edit', 'Edit')"
-            :editable="$props.editable"
+            icon="mdi-pencil"
             @click="$emit('click:select')"
           />
         </template>
@@ -35,9 +33,8 @@
           v-else
         >
           <FSButton
-            icon="mdi-plus-circle-multiple-outline"
             :label="$tr('ui.common.select', 'Select')"
-            :editable="$props.editable"
+            icon="mdi-plus-circle-multiple-outline"
             @click="$emit('click:select')"
           />
         </template>

package/components/fields/FSRichTextField.vue

@@ -215,8 +215,7 @@
       <FSSpan
         v-if="!readonly && $props.description"
         class="fs-rich-text-field-description"
-        font="text-overline"
-        :lineClamp="2"
+        font="text-underline"
         :style="style"
       >
         {{ $props.description }}

package/components/fields/FSTranslateRichTextField.vue

@@ -32,9 +32,7 @@
             >
               {{ $tr('translate-rich-text-field.translate-in', 'Translate in {0}', language.label) }}
             </FSSpan>
-            <FSIcon>
-              {{ language.icon }}
-            </FSIcon>
+            <FSIcon>{{ language.icon }}</FSIcon>
           </FSRow>
         </template>
       </FSRichTextField>

package/components/tiles/FSGroupTileUI.vue

@@ -97,13 +97,6 @@
           :imageId="$props.imageId"
           :width="imageSize"
         />
-        <FSIconCard
-          v-else-if="$props.icon"
-          backgroundVariant="standard"
-          :backgroundColor="ColorEnum.Background"
-          :icon="$props.icon"
-          :size="imageSize"
-        />
       </FSRow>
     </FSCol>
   </FSTile>
@@ -115,7 +108,6 @@ import { computed, defineComponent, type PropType } from "vue";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSIconCard from "../FSIconCard.vue";
 import FSImage from "../FSImage.vue";
 import FSColor from "../FSColor.vue";
 import FSSpan from "../FSSpan.vue";
@@ -126,7 +118,6 @@ import FSRow from "../FSRow.vue";
 export default defineComponent({
   name: "FSGroupTileUI",
   components: {
-    FSIconCard,
     FSImage,
     FSColor,
     FSSpan,
@@ -140,10 +131,6 @@ export default defineComponent({
       required: false,
       default: null
     },
-    icon: {
-      type: String,
-      required: false
-    },
     label: {
       type: String as PropType<string | null>,
       required: false,
@@ -196,7 +183,7 @@ export default defineComponent({
     });
 
     const infoWidth = computed((): string => {
-      if (!props.imageId && !props.icon) {
+      if (!props.imageId) {
         return "100%";
       }
       return `calc(100% - ${imageSize.value}px - 24px)`;

package/components/tiles/FSTile.vue

@@ -4,52 +4,48 @@
     :height="$props.height"
     :width="$props.width"
   >
-    <template
-      v-if="$props.editable"
+    <FSClickable
+      v-if="$props.singleSelect"
+      padding="12px"
+      :variant="variant"
+      :color="color"
+      :style="style"
+      width="100%"
+      height="100%"
+      @click="() => $emit('update:modelValue', !$props.modelValue)"
+      v-bind="$attrs"
     >
-      <FSClickable
-        v-if="$props.singleSelect"
-        padding="12px"
-        :variant="variant"
-        :color="color"
-        :style="style"
-        width="100%"
-        height="100%"
-        @click="() => $emit('update:modelValue', !$props.modelValue)"
-        v-bind="$attrs"
-      >
-        <slot />
-      </FSClickable>
-      <FSClickable
-        v-else-if="$props.href || $props.to || $attrs.onClick"
+      <slot />
+    </FSClickable>
+    <FSClickable
+      v-else-if="$props.href || $props.to || $attrs.onClick"
+      variant="background"
+      class="fs-tile"
+      padding="12px"
+      :color="ColorEnum.Background"
+      :href="$props.href"
+      width="100%"
+      height="100%"
+      :to="$props.to"
+      :style="style"
+      v-bind="$attrs"
+    >
+      <slot />
+      <FSCard
+        v-if="$props.editable"
+        class="fs-tile-checkbox"
         variant="background"
-        class="fs-tile"
-        padding="12px"
-        :color="ColorEnum.Background"
-        :href="$props.href"
-        width="100%"
-        height="100%"
-        :to="$props.to"
-        :style="style"
+        :height="['40px', '32px']"
+        :width="['40px', '32px']"
+        :border="false"
         v-bind="$attrs"
       >
-        <slot />
-        <FSCard
-          v-if="$props.editable"
-          class="fs-tile-checkbox"
-          variant="background"
-          :height="['40px', '32px']"
-          :width="['40px', '32px']"
-          :border="false"
-          v-bind="$attrs"
-        >
-          <FSCheckbox
-            :modelValue="$props.modelValue"
-            @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
-          />
-        </FSCard>
-      </FSClickable>
-    </template>
+        <FSCheckbox
+          :modelValue="$props.modelValue"
+          @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
+        />
+      </FSCard>
+    </FSClickable>
     <FSCard
       v-else
       variant="background"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.137-override-widgets",
+  "version": "1.0.137-reportV2",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.137-override-widgets",
-    "@dative-gpi/foundation-shared-services": "1.0.137-override-widgets"
+    "@dative-gpi/foundation-shared-domain": "1.0.137-reportV2",
+    "@dative-gpi/foundation-shared-services": "1.0.137-reportV2"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "1eff5a41302a336f7298d8198527030c6bbf4e65"
+  "gitHead": "57f88a90528a7849e930dbc8eea7223a84c58c9f"
 }

package/styles/components/index.scss

@@ -55,7 +55,6 @@
 @import "fs_slide_group.scss";
 @import "fs_slider.scss";
 @import "fs_span.scss";
-@import "fs_status_rich_card.scss";
 @import "fs_switch.scss";
 @import "fs_tag.scss";
 @import "fs_tabs.scss";

package/tools/index.ts

@@ -1,3 +1,4 @@
 export * from "./alertsTools";
 export * from "./chartsTools";
+export * from "./reportsTools";
 export * from "./timeRangeTools";

package/tools/reportsTools.ts

@@ -0,0 +1,38 @@
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { ColorEnum } from "../models";
+import { JobState } from "@dative-gpi/foundation-shared-domain/enums";
+
+const { $tr } = useTranslationsProvider();
+
+export const getColorByState = (state: number | JobState | undefined) => {
+  switch (state) {
+    case JobState.Succeeded:
+      return ColorEnum.Success;
+    case JobState.Failed:
+      return ColorEnum.Error;
+    default:
+      return ColorEnum.Primary;
+  }
+};
+
+export const getIconByState = (state: number | JobState | undefined) => {
+  switch (state) {
+    case JobState.Succeeded:
+      return 'mdi-check-circle-outline';
+    case JobState.Failed:
+      return 'mdi-alert-circle-outline';
+    default:
+      return 'mdi-alert-circle-outline';
+  }
+};
+
+export const getLabelByState = (state: number | JobState | undefined) => {
+  switch (state) {
+    case JobState.Succeeded:
+      return $tr('ui.common.success', 'Success');
+    case JobState.Failed:
+      return $tr('ui.common.error', 'Error');
+    default:
+      return $tr('ui.common.executed', 'Executed');
+  }
+};

package/components/deviceOrganisations/FSStatusRichCard.vue

@@ -1,170 +0,0 @@
-<template>
-  <component
-    v-if="$props.modelStatus"
-    class="fs-status-rich-card"
-    variant="standard"
-    :is="$attrs.onClick ? FSClickable : FSCard"
-    :padding="$props.padding"
-    :height="$props.height"
-    :width="$props.width"
-    :color="color"
-    :style="style"
-  >
-    <FSCol
-      align="center-center"
-      :gap="$props.gap"
-    >
-      <FSRow
-        align="top-center"
-      >
-        <FSIcon
-          v-if="icon"
-        >
-          {{ icon }}
-        </FSIcon>
-        <FSText
-          v-if="value"
-          font="text-button"
-        >
-          {{ value }}
-        </FSText>
-      </FSRow>
-      <FSText
-        font="text-overline"
-        align="center"
-        :lineClamp="$props.titleClamp"
-      >
-        {{ title }}
-      </FSText>
-      <slot
-        name="footer"
-        v-bind="{ color }"
-      />
-    </FSCol>
-    <div
-      class="fs-status-rich-card-corner"
-    >
-      <slot
-        name="corner"
-        v-bind="{ color }"
-      />
-    </div>
-  </component>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, type PropType, type StyleValue } from "vue";
-
-import { ColorEnum, type FSDeviceStatusGroup, type FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
-
-import FSClickable from "../FSClickable.vue";
-import FSCard from "../FSCard.vue";
-import FSIcon from "../FSChip.vue";
-import FSText from "../FSText.vue";
-import FSCol from "../FSCol.vue";
-
-export default defineComponent({
-  name: "FSStatusRichCard",
-  components: {
-    FSClickable,
-    FSCard,
-    FSIcon,
-    FSText,
-    FSCol
-  },
-  props: {
-    height: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: "100px"
-    },
-    width: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: "160px"
-    },
-    padding: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: "12px"
-    },
-    gap: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: "8px"
-    },
-    title: {
-      type: [String, null] as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    titleClamp: {
-      type: Number,
-      required: false,
-      default: 2
-    },
-    color: {
-      type: [String, null] as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    fillBackground: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    modelStatus: {
-      type: Object as PropType<FSModelStatus | undefined>,
-      required: true
-    },
-    statusGroup: {
-      type: Object as PropType<FSDeviceStatusGroup | undefined>,
-      required: true
-    }
-  },
-  setup(props) {
-    const { getColors } = useColors();
-
-    const color = computed((): string => {
-      return props.color ?? props.statusGroup?.color ?? props.modelStatus?.colorDefault ?? ColorEnum.Primary;
-    });
-
-    const icon = computed((): string | null => {
-      return props.statusGroup?.icon ?? props.modelStatus?.iconDefault ?? null;
-    });
-
-    const title = computed((): string => {
-      return props.title ?? props.modelStatus?.label;
-    });
-
-    const value = computed((): string | null => {
-      if (props.statusGroup?.label) {
-        return props.statusGroup.label;
-      }
-      if (props.statusGroup?.value && !isNaN(parseFloat(props.statusGroup?.value))) {
-        return `${parseFloat(props.statusGroup.value).toLocaleString("fullwide", { maximumFractionDigits: 2 })} ${props.statusGroup.unit}`;
-      }
-      if (props.statusGroup?.value) {
-        return `${props.statusGroup?.value} ${props.statusGroup?.unit}`;
-      }
-      return null;
-    });
-
-    const style = computed((): StyleValue => ({
-      "--fs-status-rich-card-background-color": props.fillBackground ? getColors(color.value).light : "transparent",
-      "--fs-status-rich-card-border-color": props.fillBackground ? getColors(color.value).base : getColors(ColorEnum.Light).dark
-    }));
-
-    return {
-      FSClickable,
-      FSCard,
-      color,
-      style,
-      title,
-      value,
-      icon
-    };
-  }
-});
-</script>

package/styles/components/fs_status_rich_card.scss

@@ -1,13 +0,0 @@
-.fs-status-rich-card {
-  position: relative;
-  flex-grow: 1;
-  background-color: var(--fs-status-rich-card-background-color);
-  border-color: var(--fs-status-rich-card-border-color);
-}
-
-.fs-status-rich-card-corner {
-  position: absolute;
-  display: flex;
-  right: 2px;
-  top: 2px;
-}