@dative-gpi/foundation-shared-components 1.0.87 → 1.0.88

package/components/fields/FSTimeRangeField.vue

@@ -16,19 +16,16 @@
           :editable="$props.editable"
           :validateOn="validateOn"
           :rules="$props.rules"
-          :items="daysObject"
+          :items="daysItems"
           :hideHeader="true"
           :clearable="false"
-          :style="style"
           :modelValue="realTime?.startDay ?? 0"
           @update:modelValue="onChangeDayStart"
         />
         <FSClock
-          class="fs-time-slot-field-number"
           :editable="$props.editable"
           :color="ColorEnum.Light"
           :slider="false"
-          :style="style"
           :modelValue="startTime"
           @update:modelValue="onChangeHourStart"
         />
@@ -37,42 +34,50 @@
         :wrap="false"
       >
         <FSSelectField
-          class="fs-time-slot-field-select"
           :editable="$props.editable"
-          :items="daysObject"
+          :items="daysItems"
           :hideHeader="true"
           :clearable="false"
-          :style="style"
           :modelValue="realTime?.endDay ?? 0"
           @update:modelValue="onChangeDayEnd"
         />
         <FSClock
-          class="fs-time-slot-field-number"
           :editable="$props.editable"
           :color="ColorEnum.Light"
           :slider="false"
-          :style="style"
           :modelValue="endTime"
           @update:modelValue="onChangeHourEnd"
         />
       </FSRow>
+      <FSSelectField
+        v-if="$props.showVariant"
+        width="hug"
+        :label="$tr('ui.common.type', 'Type')"
+        :items="dateTypeItems"
+        :hideHeader="true"
+        :clearable="false"
+        :modelValue="modelValue?.variant ?? DateType.Local"
+        @update:modelValue="onUpdateVariant"
+      />
     </FSRow>
   </FSBaseField>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
+import { useTranslations as useTranslationProvider } from "@dative-gpi/bones-ui/composables";
+import { useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { Days } from "@dative-gpi/foundation-shared-domain/enums";
+import { DateType, Days } from "@dative-gpi/foundation-shared-domain/enums";
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
 
 import FSSelectField from "./FSSelectField.vue";
 import FSBaseField from "./FSBaseField.vue";
 import FSClock from "../FSClock.vue";
 import FSRow from "../FSRow.vue";
 
-import { applyOffset, type DateTimeRange } from "../../tools";
+import { applyOffset, dayLabel, type DateTimeRange } from "../../tools";
 
 export default defineComponent({
   name: "FSTimeRangeField",
@@ -94,7 +99,7 @@ export default defineComponent({
       default: null
     },
     modelValue: {
-      type: Object as PropType<DateTimeRange | null>,
+      type: Object as PropType<DateTimeRange>,
       required: true,
       default: null
     },
@@ -122,51 +127,40 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
+    },
+    showVariant: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
+    const { $tr } = useTranslationProvider();
     const { validateOn, getMessages } = useRules();
-    const { getColors } = useColors();
 
-    const errors = getColors(ColorEnum.Error);
-    const lights = getColors(ColorEnum.Light);
-    const darks = getColors(ColorEnum.Dark);
-    
-    const daysObject: { id: number; label: string }[]  = Object.keys(Days).reduce((acc, key) => {
-      if (isNaN(Number(key))) {
-        acc.push({
-          id: Days[key],
-          label: key
-        });
+    const dateTypeItems = [
+      {
+        id: DateType.Local,
+        label: $tr('ui.common.local', 'Local')
+      },
+      {
+        id: DateType.UTC,
+        label: $tr('ui.common.utc', 'UTC')
       }
-      return acc;
-    }, [] as { id: number, label: string }[]);
+    ];
 
-    const style = computed((): StyleValue => {
-      if (!props.editable) {
+    const daysItems = computed(()=>{
+      return getEnumEntries(Days).map((f)=>{
         return {
-          "--fs-time-slot-field-cursor"             : "default",
-          "--fs-time-slot-field-border-color"       : lights.base,
-          "--fs-time-slot-field-color"              : lights.dark,
-          "--fs-time-slot-field-active-border-color": lights.base
-        };
-      }
-      return {
-        "--fs-time-slot-field-cursor"             : "text",
-        "--fs-time-slot-field-border-color"       : lights.dark,
-        "--fs-time-slot-field-color"              : darks.base,
-        "--fs-time-slot-field-active-border-color": darks.dark,
-        "--fs-time-slot-field-error-color"        : errors.base,
-        "--fs-time-slot-field-error-border-color" : errors.base
-      };
+          id: f.value as number,
+          label: dayLabel(f.value)
+        }
+      })
     });
 
     const realTime = computed(() => {
-      if (props.modelValue) {
-        return applyOffset(props.modelValue, false);
-      }
-      return null;
+      return applyOffset(props.modelValue, false);
     });
 
     const startTime = computed((): number => {
@@ -186,152 +180,76 @@ export default defineComponent({
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 
     const onChangeDayStart = (value: number) => {
-      if (value === 7) {
-        if (props.modelValue) {
-          emit("update:modelValue",
-               {
-                 startDay: 7,
-                 startHour: props.modelValue.startHour,
-                 startMinute: props.modelValue.startMinute,
-                 endDay: 7,
-                 endHour: props.modelValue.endHour,
-                 endMinute: props.modelValue.endMinute
-               }
-          );
-          return;
-        }
+      if (value === Days.AllDays) {
         emit("update:modelValue",
              {
-               startDay: 7,
-               startHour: 0,
-               startMinute: 0,
-               endDay: 7,
-               endHour: 0,
-               endMinute: 0
+               startDay: value,
+               startHour: props.modelValue.startHour,
+               startMinute: props.modelValue.startMinute,
+               endDay: value,
+               endHour: props.modelValue.endHour,
+               endMinute: props.modelValue.endMinute,
+               variant: props.modelValue.variant
              }
         );
-        return;
       }
-      if (props.modelValue) {
-        if (props.modelValue.endDay === 7) {
-          emit("update:modelValue",
-               {
-                 startDay: value,
-                 startHour: props.modelValue.startHour,
-                 startMinute: props.modelValue.startMinute,
-                 endDay: value,
-                 endHour: props.modelValue.endHour,
-                 endMinute: props.modelValue.endMinute
-               }
-          );
-          return;
-        }
+      else {
         const t = applyOffset({
           startDay: value,
-          startHour: props.modelValue.startHour,
-          startMinute: props.modelValue.startMinute,
-          endDay: props.modelValue.endDay,
-          endHour: props.modelValue.endHour,
-          endMinute: props.modelValue.endMinute
-        }, true);
-        emit("update:modelValue", t);
-        return;
+          startHour: realTime.value.startHour,
+          startMinute: realTime.value.startMinute,
+          endDay: props.modelValue.endDay == Days.AllDays ? value : realTime.value.endDay,
+          endHour: realTime.value.endHour,
+          endMinute: realTime.value.endMinute,
+          variant: realTime.value.variant
+        }, true); 
+        emit("update:modelValue",t);
       }
-      emit("update:modelValue",{
-        startDay: value,
-        startHour: 0,
-        startMinute: 0,
-        endDay: value,
-        endHour: 0,
-        endMinute: 0
-      });
     };
 
 
     const onChangeHourStart = (value: number) => {
       const innerHours = value ? Math.floor(value / (60 * 60 * 1000)) : 0;
       const innerMinutes = value ? Math.floor((value % (60 * 60 * 1000)) / (60 * 1000)) : 0;
-      if (realTime.value) {
-        const t = {
-          startDay: realTime.value.startDay,
-          startHour: innerHours,
-          startMinute: innerMinutes,
-          endDay: realTime.value.endDay,
-          endHour: realTime.value.endHour,
-          endMinute: realTime.value.endMinute
-        };
-        const newTime = applyOffset(t, true);
-        emit("update:modelValue", newTime);
-        return;
-      }
-      emit("update:modelValue", {
-        startDay: 0,
+      const t = {
+        startDay: realTime.value.startDay,
         startHour: innerHours,
         startMinute: innerMinutes,
-        endDay: 0,
-        endHour: 0,
-        endMinute: 0
-      });
+        endDay: realTime.value.endDay,
+        endHour: realTime.value.endHour,
+        endMinute: realTime.value.endMinute,
+        variant: realTime.value.variant
+      };
+      const newTime = applyOffset(t, true);
+      emit("update:modelValue", newTime);
     }
 
     const onChangeDayEnd = (value: number) => {
-      if (value === 7) {
-        if (props.modelValue) {
-          emit("update:modelValue",
-               {
-                 startDay: 7,
-                 startHour: props.modelValue.startHour,
-                 startMinute: props.modelValue.startMinute,
-                 endDay: 7,
-                 endHour: props.modelValue.endHour,
-                 endMinute: props.modelValue.endMinute
-               }
-          );
-          return;
-        }
-        emit("update:modelValue",
-             {
-               startDay: 7,
-               startHour: 0,
-               startMinute: 0,
-               endDay: 7,
-               endHour: 0,
-               endMinute: 0
-             }
-        );
-        return;
-      }
-      if (props.modelValue) {
-        if (props.modelValue.startDay === 7) {
-          emit("update:modelValue",{
-            startDay: value,
-            startHour: props.modelValue.startHour,
-            startMinute: props.modelValue.startMinute,
-            endDay: value,
-            endHour: props.modelValue.endHour,
-            endMinute: props.modelValue.endMinute
-          });
-          return;
-        }
-        const t = applyOffset({
-          startDay: props.modelValue.startDay,
+
+      if (value === Days.AllDays) {
+        emit("update:modelValue",{
+          startDay: value,
           startHour: props.modelValue.startHour,
           startMinute: props.modelValue.startMinute,
           endDay: value,
           endHour: props.modelValue.endHour,
-          endMinute: props.modelValue.endMinute
+          endMinute: props.modelValue.endMinute,
+          variant: props.modelValue.variant
+        });
+        return;
+      }
+      else {
+        const t = applyOffset({
+          startDay: props.modelValue.startDay == Days.AllDays ? value : realTime.value.startDay,
+          startHour: realTime.value.startHour,
+          startMinute: realTime.value.startMinute,
+          endDay: value,
+          endHour: realTime.value.endHour,
+          endMinute: realTime.value.endMinute,
+          variant: realTime.value.variant
         }, true);
         emit("update:modelValue", t);
-        return;
       }
-      emit("update:modelValue",{
-        startDay: value,
-        startHour: 0,
-        startMinute: 0,
-        endDay: value,
-        endHour: 0,
-        endMinute: 0
-      });
     };
 
     const onChangeHourEnd = (value: number) => {
@@ -344,35 +262,41 @@ export default defineComponent({
           startMinute: realTime.value.startMinute,
           endDay: realTime.value.endDay,
           endHour: innerHours,
-          endMinute: innerMinutes
+          endMinute: innerMinutes,
+          variant: realTime.value.variant
         };
         const newTime = applyOffset(t, true);
-        
         emit("update:modelValue", newTime);
-        return;
       }
-      emit("update:modelValue",{
-        startDay: 0,
-        startHour: 0,
-        startMinute: 0,
-        endDay: 0,
-        endHour: innerHours,
-        endMinute: innerMinutes
-      });
     }
 
+    const onUpdateVariant = (value: DateType) => {
+      const t = applyOffset({
+        startDay: realTime.value.startDay,
+        startHour: realTime.value.startHour,
+        startMinute: realTime.value.startMinute,
+        endDay: realTime.value.endDay,
+        endHour: realTime.value.endHour,
+        endMinute: realTime.value.endMinute,
+        variant: value
+      }, true);
+      emit("update:modelValue", t );
+    };
+
     return {
-      daysObject,
+      dateTypeItems,
       validateOn,
+      daysItems,
       ColorEnum,
       startTime,
       realTime,
       messages,
+      DateType,
       endTime,
-      style,
       onChangeHourStart,
       onChangeDayStart,
       onChangeHourEnd,
+      onUpdateVariant,
       onChangeDayEnd
     };
   }

package/components/fields/FSTranslateRichTextField.vue

@@ -112,12 +112,15 @@ export default defineComponent({
       default: true,
     },
     modelValue: {
-      type: String as PropType<string | null>,
+      type: [Object, String] as PropType<{ [key: string]: any } | string | null>,
       required: false,
       default: null
     },
     translations: {
-      type: Array as PropType<{ languageCode: string; [key: string]: string }[]>,
+      type: Array as PropType<{
+        languageCode: string;
+        [key: string]: string | object | null;
+      }[]>,
       required: false,
       default: () => []
     },
@@ -133,7 +136,7 @@ export default defineComponent({
 
     const innerTranslations = ref(props.translations);
 
-    const getTranslation = (languageCode: string): string => {
+    const getTranslation = (languageCode: string): string | object => {
       if (!innerTranslations.value) {
         return emptyLexicalState;
       }
@@ -141,7 +144,7 @@ export default defineComponent({
       if (!translation || !translation[props.property]) {
         return emptyLexicalState;
       }
-      return translation[props.property].toString();
+      return translation[props.property]!;
     };
 
     const setTranslation = (languageCode: string, value: string): void => {

package/components/lists/FSDataTableUI.vue

@@ -15,7 +15,6 @@
         v-if="$props.showSearch"
       >
         <FSSearchField
-          prependInnerIcon="mdi-magnify"
           :hideHeader="true"
           v-model="innerSearch"
         />
@@ -1344,6 +1343,7 @@ export default defineComponent({
             }, { threshold: [0.9] });
           }
           if (document.querySelector(`#${elementId}`)) {
+            intersectionObserver.value.unobserve(document.querySelector(`#${elementId}`)!);
             intersectionObserver.value.observe(document.querySelector(`#${elementId}`)!);
           }
           return;
@@ -1516,6 +1516,10 @@ export default defineComponent({
         .some((key) => filters.value[key].some((filter) => filter.hidden));
     }, { deep: true });
 
+    watch(size, () => {
+      observeIntersection();
+    });
+
     watch(innerMode, () => {
       emit("update:mode", innerMode.value);
       size.value = props.sizeIterator;

package/components/lists/FSFilterButton.vue

@@ -47,7 +47,6 @@
           <FSSearchField
             :hideHeader="true"
             class="fs-filter-button-search"
-            prependInnerIcon="mdi-magnify"
             v-model="search"
           />
         </FSCol>

package/components/lists/FSSimpleList.vue

@@ -7,7 +7,6 @@
       v-if="$props.searchable"
       :hideHeader="true"
       :modelValue="actualSearch"
-      placeholder="Search"
       @update:modelValue="onSearch"
     />
     <FSFadeOut

package/components/lists/FSSimpleListItem.vue

@@ -55,6 +55,7 @@
             </FSSpan>
           </slot>
           <FSRow
+            v-if="showEdit || showRemove"
             align="center-right"
             :wrap="false"
           >

package/components/tiles/FSCommentTileUI.vue

@@ -33,7 +33,7 @@
           />
           <FSButtonRemoveIcon
             v-if="canEditRemove"
-            @click="$emit('remove')"
+            @click="removeDialog = true"
           />
         </FSRow>
       </template>
@@ -63,18 +63,25 @@
         @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 } from "vue";
+import { defineComponent, ref, watch } 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 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";
@@ -85,8 +92,9 @@ export default defineComponent({
   name: "FSCommentTileUI",
   components: {
     FSButtonRemoveIcon,
-    FSCommentField,
     FSButtonEditIcon,
+    FSCommentField,
+    FSDialogRemove,
     FSImage,
     FSCard,
     FSText,
@@ -128,20 +136,33 @@ export default defineComponent({
       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 {
-      ColorEnum,
       showEditComment,
+      removeDialog,
+      ColorEnum,
       updateComment
     };
   }

package/models/variableNode.ts

@@ -51,14 +51,17 @@ export class VariableNode extends DecoratorNode<Element> {
       content.classList.add("fs-rich-text-field-node-variable-value");
       if (_editor._rootElement) {
         content.textContent = this.getValue(_editor._rootElement);
-      }
-      else {
+  
+        const observer = new MutationObserver(() => {
+          content.textContent = this.getValue(_editor._rootElement!);
+        });
+        observer.observe(_editor._rootElement, { attributes: true, attributeFilter: ['data-variable-values'] });
+      } else {
         content.textContent = this.__defaultValue;
       }
-    }
-    else {
+    } else {
       content.classList.add("fs-rich-text-field-node-variable-code");
-      content.textContent = `{${this.__code}}`
+      content.textContent = `{${this.__code}}`;
     }
     container.appendChild(content);
     return container;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.87",
+  "version": "1.0.88",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.87",
-    "@dative-gpi/foundation-shared-services": "1.0.87"
+    "@dative-gpi/foundation-shared-domain": "1.0.88",
+    "@dative-gpi/foundation-shared-services": "1.0.88"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "180b62cf6fa6a72b6eff933df6f245c7cdc341db"
+  "gitHead": "ab11b2d34cc774a15549d7450ae6d06a6c6023ee"
 }

package/styles/components/index.scss

@@ -65,7 +65,6 @@
 @import "fs_text.scss";
 @import "fs_tile.scss";
 @import "fs_time_field.scss";
-@import "fs_timeslot_field.scss";
 @import "fs_tooltip.scss";
 @import "fs_translate_field.scss";
 @import "fs_tree_view_field.scss";

package/tools/alertsTools.ts

@@ -1,6 +1,7 @@
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/enums";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models"
+import { getTimeBestString } from "../utils";
 
 const { $tr } = useTranslationsProvider();
 
@@ -51,4 +52,17 @@ export const AlertTools = {
       default: return $tr("ui.alert.information", "Information");
     }
   }
-}
+}
+
+export const prettyDuration = (n: number) => {
+  const day = Math.floor(n / 24 / 60 / 60);
+  const hours = Math.floor((n - day * 24 * 60 * 60) / 3600);
+  const minutes = Math.floor((n - day * 24 * 60 * 60 - hours * 60 * 60) / 60);
+  const seconds = Math.floor(n - day * 24 * 60 * 60 - hours * 60 * 60 - minutes * 60);
+
+  return day > 0 ?
+    `${getTimeBestString(day * 24 * 60 * 60)} ${getTimeBestString(hours * 60 * 60)} ${getTimeBestString(minutes * 60)} ${getTimeBestString(seconds)}`
+    : hours > 0
+      ? `${getTimeBestString(hours * 60 * 60)} ${getTimeBestString(minutes * 60)} ${getTimeBestString(seconds)}`
+      : `${getTimeBestString(minutes * 60)} ${getTimeBestString(seconds)}`;
+};