@dative-gpi/foundation-shared-components 1.0.57 → 1.0.58-groupings

package/components/deviceOrganisations/FSWorstAlertCard.vue

@@ -1,55 +1,44 @@
 <template>
   <FSCard
-    padding="2px 2px 8px 2px"
+    padding="12px 24px"
     :elevation="true"
-    :border="false"
   >
     <FSCol
       align="center-center"
+      gap="12px"
     >
+      <FSChip
+        :label="$tr('ui.common.alert', 'Alert')"
+        :prependIcon="AlertTools.statusIcon($props.deviceAlert?.status)"
+        :color="AlertTools.criticityColor($props.deviceAlert?.criticity)"
+      />
       <FSCol
         align="center-center"
         gap="0px"
       >
-        <FSRow
-          align="center-right"
+        <FSText>
+          {{ $tr('entity.alert.current-status', 'Status') }} : {{ AlertTools.statusLabel($props.deviceAlert?.status) }}
+        </FSText>
+        <FSText
+          font="text-button"
+          :color="AlertTools.criticityColor($props.deviceAlert?.criticity)"
         >
-          <FSButton
-            icon="mdi-close"
-            variant="icon"
-            @click="$emit('close')"
-          />
-        </FSRow>
-        <FSCol
-          align="center-center"
-          padding="0px 24px"
-          gap="12px"
-        >
-          <FSChip
-            :label="$props.deviceAlert.label"
-            :prependIcon="statusIcon"
-            :color="criticityColor"
-          />
-          <FSRow
-            width="hug"
-          >
-            <FSText>
-              {{ statusLabel }}
-            </FSText>
-          </FSRow>
-        </FSCol>
+          {{ $props.deviceAlert.label }}
+        </FSText>
       </FSCol>
-      <FSRow
+      <FSText
         v-if="deviceTimestamp"
-        padding="0px 24px"
-        width="hug"
+        font="text-overline"
+        variant="dark"
       >
-        <FSSpan
-          font="text-overline"
-        >
-          {{ deviceTimestamp }}
-        </FSSpan>
-      </FSRow>
+        {{ deviceTimestamp }}
+      </FSText>
+      <FSButton
+        v-if="$props.alertTo"
+        icon="mdi-information-outline"
+        :label="$tr('ui.alert.details', 'Alert details')"
+        :to="$props.alertTo($props.deviceAlert.id)"
+      />
     </FSCol>
   </FSCard>
 </template>
@@ -57,19 +46,15 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import type { FSDeviceAlert} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/enums";
+import { type FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
 import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
+import { AlertTools } from "@dative-gpi/foundation-shared-components/tools";
 
 import FSButton from "../FSButton.vue";
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";
 import FSText from "../FSText.vue";
-import FSSpan from "../FSSpan.vue";
 import FSCol from "../FSCol.vue";
-import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSWorstAlertCard",
@@ -78,67 +63,33 @@ export default defineComponent({
     FSCard,
     FSChip,
     FSText,
-    FSSpan,
     FSCol,
-    FSRow
   },
   props: {
     deviceAlert: {
       type: Object as PropType<FSDeviceAlert>,
       required: true
+    },
+    alertTo: {
+      type: Function,
+      required: false,
+      default: null
     }
   },
   emits: ["close"],
   setup(props) {
     const { epochToLongTimeFormat } = useDateFormat();
-    const { $tr } = useTranslationsProvider();
-
-    const criticityColor = computed(() => {
-      switch (props.deviceAlert?.criticity) {
-        case Criticity.Error: return ColorEnum.Error;
-        case Criticity.Warning: return ColorEnum.Warning;
-        default: return ColorEnum.Primary;
-      }
-    });
-
-    const statusIcon = computed(() => {
-      switch (props.deviceAlert?.status) {
-        case AlertStatus.Pending:     return "mdi-timer-outline";
-        case AlertStatus.Untriggered: return "mdi-timer-off-outline";
-        case AlertStatus.Unresolved:  return "mdi-alert-circle-outline";
-        case AlertStatus.Resolved:    return "mdi-check-circle-outline";
-        case AlertStatus.Expired:     return "mdi-clock-outline";
-        case AlertStatus.Triggered:   return "mdi-alert-circle-outline";
-        case AlertStatus.Abandoned:   return "mdi-cancel"
-        default:                      return "";
-      }
-    });
-
-    const statusLabel = computed(() => {
-      switch (props.deviceAlert?.status) {
-        case AlertStatus.Pending:     return $tr("ui.alert-status.pending", "Pending");
-        case AlertStatus.Untriggered: return $tr("ui.alert-status.untriggered", "Untriggered");
-        case AlertStatus.Unresolved:  return $tr("ui.alert-status.unresolved", "Unresolved");
-        case AlertStatus.Resolved:    return $tr("ui.alert-status.resolved", "Resolved");
-        case AlertStatus.Expired:     return $tr("ui.alert-status.expired", "Expired");
-        case AlertStatus.Triggered:   return $tr("ui.alert-status.triggered", "Triggered");
-        case AlertStatus.Abandoned:   return $tr("ui.alert-status.abandoned", "Abandoned");
-        default:                      return "";
-      }
-    });
 
     const deviceTimestamp = computed((): string => {
       if (props.deviceAlert.sourceTimestamp) {
-        return epochToLongTimeFormat(props.deviceAlert.sourceTimestamp);
+        return epochToLongTimeFormat(props.deviceAlert.actualTimestamp);
       }
       return "";
     });
 
     return {
       deviceTimestamp,
-      criticityColor,
-      statusLabel,
-      statusIcon
+      AlertTools
     };
   }
 });

package/components/fields/FSAutocompleteField.vue

@@ -1,6 +1,7 @@
 <template>
   <FSCol
     v-if="$props.loading"
+    :maxWidth="$props.maxWidth"
   >
     <FSLoader
       v-if="!$props.hideHeader"
@@ -14,13 +15,14 @@
   </FSCol>
   <FSCol
     v-else-if="isExtraSmall"
+    :maxWidth="$props.maxWidth"
   >
     <FSTextField
       :validationValue="$props.modelValue"
       :description="$props.description"
       :hideHeader="$props.hideHeader"
       :clearable="$props.clearable"
-      :editable="$props.editable"
+      :disabled="$props.disabled"
       :required="$props.required"
       :label="$props.label"
       :rules="$props.rules"
@@ -63,7 +65,7 @@
             name="clear"
           >
             <FSButton
-              v-if="$props.clearable && $props.editable && !!$props.modelValue"
+              v-if="$props.clearable && !$props.disabled && !!$props.modelValue"
               icon="mdi-close"
               variant="icon"
               :color="ColorEnum.Dark"
@@ -78,7 +80,7 @@
         <FSButton
           icon="mdi-chevron-down"
           variant="icon"
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :color="ColorEnum.Dark"
           @click="openMobileOverlay"
         />
@@ -121,12 +123,14 @@
       </FSCard>
     </FSSlideGroup>
     <FSDialogMenu
+      padding="16px"
       v-model="dialog"
     >
       <template
         #body
       >
         <FSSearchField
+          :clearable="$props.clearable"
           :hideHeader="true"
           v-model="search"
         />
@@ -138,69 +142,52 @@
           >
             <FSRow
               v-for="(item, index) in searchItems"
+              align="center-left"
+              height="36px"
+              :wrap="false"
               :key="index"
+              @click="$props.multiple ?
+                onCheckboxChange(item[$props.itemValue!]) :
+                onRadioChange(item[$props.itemValue!])
+              "
             >
-              <FSCheckbox
-                v-if="$props.multiple"
-                :label="item[$props.itemTitle!]"
-                :editable="$props.editable"
-                :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
-                @update:modelValue="() => onCheckboxChange(item[$props.itemValue!])"
-              >
-                <template
-                  #label="{ font }"
-                >
-                  <FSRow
-                    align="center-left"
-                    :wrap="false"
-                  >
-                    <slot
-                      name="item-prepend"
-                      v-bind="{ item }"
-                    />
-                    <FSSpan
-                      :font="font"
-                    >
-                      {{ item[$props.itemTitle!] }}
-                    </FSSpan>
-                  </FSRow>
-                </template>
-              </FSCheckbox>
-              <FSRadio
-                v-else
-                :selected="$props.modelValue === item[$props.itemValue!]"
-                :label="item[$props.itemTitle!]"
-                :editable="$props.editable"
-                :item="item"
-                :modelValue="item[$props.itemValue!]"
-                @update:modelValue="() => onRadioChange(item[$props.itemValue!])"
+              <FSRow
+                style="min-width: 0;"
+                :wrap="false"
               >
-                <template
-                  #label="{ font }"
+                <slot
+                  name="item-prepend"
+                  v-bind="{ item }"
+                />
+                <FSSpan
+                  :font="selectedItems.includes(item) ? 'text-button' : 'text-body'"
                 >
-                  <FSRow
-                    align="center-left"
-                    :wrap="false"
-                  >
-                    <slot
-                      name="item-prepend"
-                      v-bind="{ item }"
-                    />
-                    <FSSpan
-                      :font="font"
-                    >
-                      {{ item[$props.itemTitle!] }}
-                    </FSSpan>
-                  </FSRow>
-                </template>
-              </FSRadio>
+                  {{ item[$props.itemTitle!] }}
+                </FSSpan>
+              </FSRow>
               <FSRow
                 align="center-right"
+                width="hug"
+                :wrap="false"
               >
                 <slot
                   name="item-append"
                   v-bind="{ item }"
                 />
+                <FSCheckbox
+                  v-if="$props.multiple"
+                  :disabled="$props.disabled"
+                  :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
+                  @update:modelValue="onCheckboxChange(item[$props.itemValue!])"
+                />
+                <FSRadio
+                  v-else
+                  :selected="$props.modelValue === item[$props.itemValue!]"
+                  :disabled="$props.disabled"
+                  :item="item"
+                  :modelValue="item[$props.itemValue!]"
+                  @update:modelValue="onRadioChange(item[$props.itemValue!])"
+                />
               </FSRow>
             </FSRow>
           </FSCol>
@@ -211,7 +198,7 @@
         >
           <FSButton
             variant="icon"
-            :label="$tr('ui.autocomplete-field.add-item', 'Add new item')"
+            :label="$tr('autocomplete-field.add-item', 'Add new item')"
             :color="ColorEnum.Primary"
             @click="$emit('add:item', search)"
           />
@@ -221,7 +208,7 @@
           padding="4px 3px"
         >
           <FSSpan>
-            {{ $tr("ui.autocomplete-field.no-data", "No data") }}
+            {{ $tr("ui.common.no-data", "No data") }}
           </FSSpan>
         </FSRow>
       </template>
@@ -232,13 +219,14 @@
     :description="$props.description"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :label="$props.label"
     :messages="messages"
+    :maxWidth="$props.maxWidth"
   >
     <FSToggleSet
       v-if="$props.toggleSet"
-      :editable="$props.editable"
+      :disabled="$props.disabled"
       :multiple="$props.multiple"
       :required="$props.required"
       :values="$props.items"
@@ -263,10 +251,11 @@
       <v-autocomplete
         class="fs-autocomplete-field"
         variant="outlined"
-        :clearable="$props.clearable && $props.editable && !!$props.modelValue"
+        :clearable="$props.clearable && !$props.disabled && !!$props.modelValue"
         :itemTitle="$props.itemTitle"
         :itemValue="$props.itemValue"
-        :readonly="!$props.editable"
+        :disabled="$props.disabled"
+        :readonly="$props.readonly"
         :multiple="$props.multiple"
         :validateOn="validateOn"
         :autoSelectFirst="true"
@@ -381,7 +370,7 @@
               name="clear"
             >
               <FSButton
-                v-if="$props.clearable && $props.editable && !!$props.modelValue"
+                v-if="$props.clearable && !$props.disabled && !!$props.modelValue"
                 icon="mdi-close"
                 variant="icon"
                 :color="ColorEnum.Dark"
@@ -399,7 +388,7 @@
             <FSButton
               icon="mdi-chevron-down"
               variant="icon"
-              :editable="$props.editable"
+              :disabled="$props.disabled"
               :color="ColorEnum.Dark"
             />
           </slot>
@@ -413,7 +402,7 @@
           >
             <FSButton
               variant="icon"
-              :label="$tr('ui.autocomplete.add-item', 'Add new item')"
+              :label="$tr('autocomplete-field.add-item', 'Add new item')"
               :color="ColorEnum.Primary"
               @click="$emit('add:item', search)"
             />
@@ -578,10 +567,15 @@ export default defineComponent({
       required: false,
       default: true
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      required: false,
+      default: false
     },
     loading: {
       type: Boolean,
@@ -597,11 +591,16 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "600px"
     }
   },
   emits: ["update:modelValue", "update:search", "add:item"],
   setup: (props, { emit }) => {
-    const { isExtraSmall, isMobileSized } = useBreakpoints();
+    const { fontStyles, isExtraSmall, isMobileSized } = useBreakpoints();
     const { validateOn, getMessages } = useRules();
     const { getColors } = useColors();
     const { slots } = useSlots();
@@ -619,23 +618,27 @@ export default defineComponent({
     const showExtra = ref(true);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
-          "--fs-autocomplete-field-cursor":              "default",
-          "--fs-autocomplete-field-border-color":        lights.base,
-          "--fs-autocomplete-field-color":               lights.dark,
-          "--fs-autocomplete-field-active-border-color": lights.base
+          "--fs-autocomplete-field-cursor"             : "default",
+          "--fs-autocomplete-field-border-color"       : lights.base,
+          "--fs-autocomplete-field-color"              : lights.dark,
+          "--fs-autocomplete-field-active-border-color": lights.base,
+          "--fs-base-field-input-height"               : isMobileSized.value ? "34px" : "38px",
+          ...fontStyles.value
         };
       }
       return {
-        "--fs-autocomplete-field-cursor":                   "text",
-        "--fs-autocomplete-field-background-color":         backgrounds.base,
+        "--fs-autocomplete-field-cursor"                  : "text",
+        "--fs-autocomplete-field-background-color"        : backgrounds.base,
         "--fs-autocomplete-field-no-data-background-color": lights.light,
-        "--fs-autocomplete-field-border-color":             lights.dark,
-        "--fs-autocomplete-field-color":                    darks.base,
-        "--fs-autocomplete-field-active-border-color":      darks.dark,
-        "--fs-autocomplete-field-error-color":              errors.base,
-        "--fs-autocomplete-field-error-border-color":       errors.base
+        "--fs-autocomplete-field-border-color"            : lights.dark,
+        "--fs-autocomplete-field-color"                   : darks.base,
+        "--fs-autocomplete-field-active-border-color"     : darks.dark,
+        "--fs-autocomplete-field-error-color"             : errors.base,
+        "--fs-autocomplete-field-error-border-color"      : errors.base,
+        "--fs-base-field-input-height"                    : isMobileSized.value ? "34px" : "38px",
+        ...fontStyles.value
       };
     });
 
@@ -698,8 +701,8 @@ export default defineComponent({
     });
 
     const maxHeight = computed(() => {
-      const other = 8 + 8                // Paddings
-        + (isMobileSized ? 36 : 40) + 8; // Header
+      const other = 8 + 8                      // Paddings
+        + (isMobileSized.value ? 36 : 40) + 8; // Header
       return `calc(100vh - 40px - ${other}px)`;
     });
 
@@ -714,7 +717,7 @@ export default defineComponent({
     });
 
     const openMobileOverlay = () => {
-      if (!props.editable) {
+      if (props.disabled) {
         return;
       }
       dialog.value = true;

package/components/fields/FSAutocompleteTag.vue

@@ -62,7 +62,7 @@ export default defineComponent({
       if (!props.modelValue || props.modelValue.length === 0) {
         return null;
       }
-      return props.placeholder ?? $tr("ui.autocomplete-tag.items-selected", "{0} item(s) selected", props.modelValue?.length ?? 0);
+      return props.placeholder ?? $tr("autocomplete.tag.selecteds", "{0} item(s) selected", props.modelValue?.length ?? 0);
     });
 
     const onUpdateModelValue = (value: string[] | null): void => {

package/components/fields/FSBaseField.vue

@@ -1,44 +1,50 @@
 <template>
-  <FSCol>
+  <FSCol
+    :maxWidth="$props.maxWidth"
+    :style="style"
+  >
     <slot
       v-if="!$props.hideHeader"
       name="label"
     >
       <FSRow
+        gap="40px"
         :wrap="false"
       >
-        <FSSpan
-          class="fs-base-field-label"
-          font="text-overline"
-          :style="style"
+        <FSRow
+          gap="2px"
+          :width="widths.label"
+          :wrap="false"
         >
-          {{ $props.label }}
-        </FSSpan>
-        <FSSpan
-          v-if="$props.label && $props.required"
-          class="fs-base-field-label"
-          style="margin-left: -8px;"
-          font="text-overline"
-          :ellipsis="false"
-          :style="style"
-        >
-          *
-        </FSSpan>
-        <v-spacer
-          style="min-width: 40px;"
-        />
-        <template
-          v-if="$props.messages"
+          <FSSpan
+            class="fs-base-field-label"
+            font="text-overline"
+          >
+            {{ $props.label }}
+          </FSSpan>
+          <FSSpan
+            v-if="$props.label && $props.required"
+            class="fs-base-field-label"
+            font="text-overline"
+            :ellipsis="false"
+            :style="style"
+          >
+            *
+          </FSSpan>
+        </FSRow>
+        <FSRow
+          align="center-right"
+          :width="widths.messages"
         >
           <FSSpan
-            v-if="$props.messages.length > 0"
+            v-if="$props.messages && $props.messages.length > 0"
             class="fs-base-field-messages"
             font="text-overline"
             :style="style"
           >
             {{ $props.messages.join(", ") }}
           </FSSpan>
-        </template>
+        </FSRow>
       </FSRow>
     </slot>
     <slot />
@@ -49,7 +55,7 @@
         v-if="$props.description"
         class="fs-base-field-description"
         font="text-overline"
-        :style="style"
+        :lineClamp="2"
       >
         {{ $props.description }}
       </FSSpan>
@@ -100,10 +106,20 @@ export default defineComponent({
       required: false,
       default: () => []
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
+    },
+    minWidth: {
+      type: String,
+      required: false,
+      default: "120px"
+    },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "600px"
     }
   },
   setup(props) {
@@ -118,18 +134,26 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
-          "--fs-base-field-color": lights.dark
+          "--fs-base-field-color"    : lights.dark,
+          "--fs-base-field-min-width": props.minWidth
         };
       }
       return {
         "--fs-base-field-color"      : darks.base,
-        "--fs-base-field-error-color": errors.base
+        "--fs-base-field-error-color": errors.base,
+        "--fs-base-field-min-width"  : props.minWidth
       };
     });
 
+    const widths = computed(() => ({
+      label: props.messages && props.messages.length ? "calc(50% - 40px)" : "100%",
+      messages: props.messages && props.messages.length ? "50%" : "0"
+    }));
+
     return {
+      widths,
       style,
       slots
     };