@dative-gpi/foundation-shared-components 1.0.67 → 1.0.69

package/components/FSTabs.vue

@@ -7,7 +7,7 @@
     :style="style"
     :grow="true"
     :modelValue="$props.tab"
-    @update:modelValue="$emit('update:tab', $event)"
+    @update:modelValue="onUpdateTab($event)"
     v-bind="$attrs"
   >
     <slot/>
@@ -15,7 +15,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+import { computed, defineComponent, onMounted, type PropType, type StyleValue } from "vue";
+import { useRouter } from "vue-router";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
@@ -24,7 +25,7 @@ export default defineComponent({
   name: "FSTabs",
   props: {
     tab: {
-      type: Number,
+      type: [String, Number, Object] as PropType<any>,
       required: false,
       default: 0
     },
@@ -32,10 +33,17 @@ export default defineComponent({
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Primary
+    },
+    recordNavigation: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
-  setup(props) {
+  emits: ["update:tab"],
+  setup(props, { emit }) {
     const { getColors } = useColors();
+    const router = useRouter();
 
     const colors = computed(() => getColors(props.color));
     const lights = getColors(ColorEnum.Light);
@@ -51,8 +59,22 @@ export default defineComponent({
       "--fs-tab-tag-color"              : colors.value.baseContrast!
     }));
 
+    const onUpdateTab = (tab: number): void => {
+      if (props.recordNavigation) {
+        router.replace({ query: { tab: tab.toString() } });
+      }
+      emit("update:tab", tab);
+    }
+
+    onMounted((): void => {
+      if (props.recordNavigation && router.currentRoute.value.query.tab) {
+        emit("update:tab", router.currentRoute.value.query.tab);
+      }
+    });
+
     return {
-      style
+      style,
+      onUpdateTab
     };
   }
 });

package/components/fields/FSTimeRangeField.vue

@@ -0,0 +1,380 @@
+<template>
+  <FSBaseField
+    :description="$props.description"
+    :hideHeader="$props.hideHeader"
+    :required="$props.required"
+    :editable="$props.editable"
+    :label="$props.label"
+    :messages="messages"
+  >
+    <FSRow>
+      <FSRow
+        :wrap="false"
+      >
+        <FSSelectField
+          :validationValue="$props.modelValue"
+          :editable="$props.editable"
+          :validateOn="validateOn"
+          :rules="$props.rules"
+          :items="daysObject"
+          :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"
+        />
+      </FSRow>
+      <FSRow
+        :wrap="false"
+      >
+        <FSSelectField
+          class="fs-time-slot-field-select"
+          :editable="$props.editable"
+          :items="daysObject"
+          :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>
+    </FSRow>
+  </FSBaseField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+
+import { useColors, 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 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";
+
+export default defineComponent({
+  name: "FSTimeRangeField",
+  components: {
+    FSSelectField,
+    FSBaseField,
+    FSClock,
+    FSRow
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Object as PropType<DateTimeRange | null>,
+      required: true,
+      default: null
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    rules: {
+      type: Array as PropType<any[]>,
+      required: false,
+      default: () => []
+    },
+    messages: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: null
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    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
+        });
+      }
+      return acc;
+    }, [] as { id: number, label: string }[]);
+
+    const style = computed((): StyleValue => {
+      if (!props.editable) {
+        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
+      };
+    });
+
+    const realTime = computed(() => {
+      if (props.modelValue) {
+        return applyOffset(props.modelValue, false);
+      }
+      return null;
+    });
+
+    const startTime = computed((): number => {
+      if (realTime.value) {
+        return realTime.value.startHour * 60 * 60 * 1000 + realTime.value.startMinute * 60 * 1000;
+      }
+      return 0;
+    });
+
+    const endTime = computed((): number => {
+      if (realTime.value) {
+        return realTime.value.endHour * 60 * 60 * 1000 + realTime.value.endMinute * 60 * 1000;
+      }
+      return 0;
+    });
+
+    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;
+        }
+        emit("update:modelValue",
+             {
+               startDay: 7,
+               startHour: 0,
+               startMinute: 0,
+               endDay: 7,
+               endHour: 0,
+               endMinute: 0
+             }
+        );
+        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;
+        }
+        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;
+      }
+      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,
+        startHour: innerHours,
+        startMinute: innerMinutes,
+        endDay: 0,
+        endHour: 0,
+        endMinute: 0
+      });
+    }
+
+    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,
+          startHour: props.modelValue.startHour,
+          startMinute: props.modelValue.startMinute,
+          endDay: value,
+          endHour: props.modelValue.endHour,
+          endMinute: props.modelValue.endMinute
+        }, 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) => {
+      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: realTime.value.startHour,
+          startMinute: realTime.value.startMinute,
+          endDay: realTime.value.endDay,
+          endHour: innerHours,
+          endMinute: innerMinutes
+        };
+        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
+      });
+    }
+
+    return {
+      daysObject,
+      validateOn,
+      ColorEnum,
+      startTime,
+      realTime,
+      messages,
+      endTime,
+      style,
+      onChangeHourStart,
+      onChangeDayStart,
+      onChangeHourEnd,
+      onChangeDayEnd
+    };
+  }
+});
+</script>

package/components/lists/FSDataTableUI.vue

@@ -446,7 +446,7 @@
               v-for="(item, index) in items"
               elementSelector=".fs-draggable-item"
               :disabled="draggableDisabled"
-              :item="item"
+              :item="{ ...item, index }"
               :key="index"
               @update:dragend="(event, dragged) => onDragEnd(event, dragged, '.fs-data-iterator-container')"
               @dragover="(event) => onDragOver(event, '.fs-draggable-item', '.fs-data-iterator-container')"
@@ -617,7 +617,7 @@
               v-for="(item, index) in items.filter((item) => item.type === 'item')"
               elementSelector=".fs-draggable-item"
               :disabled="draggableDisabled"
-              :item="item"
+              :item="{ ...item, index }"
               :key="index"
               @update:dragend="(event, dragged) => onDragEnd(event, dragged, '.fs-data-iterator-container')"
               @dragover="(event) => onDragOver(event, '.fs-draggable-item', '.fs-data-iterator-container')"
@@ -1360,10 +1360,10 @@ export default defineComponent({
     };
 
     const resetRowIndex = (initialIndex: number, currentIndex: number, draggedElement: HTMLElement, tbodyElement: HTMLElement) => {
-      if (initialIndex > currentIndex) {
+      if (initialIndex > currentIndex && tbodyElement.children[initialIndex]) {
         tbodyElement.children[initialIndex].insertAdjacentElement("afterend", draggedElement);
       }
-      else {
+      else if(tbodyElement.children[initialIndex]) {
         tbodyElement.children[initialIndex].insertAdjacentElement("beforebegin", draggedElement);
       }
     };

package/components/lists/FSDraggable.vue

@@ -74,7 +74,7 @@ export default defineComponent({
           const dragged = (event.target as HTMLElement)?.closest(props.elementSelector) as HTMLElement;
           dragged.classList.add("fs-draggable-dragging");
           dragged.classList.add("fs-draggable-dragging-grabbegin");
-          dragged.dataset.initialIndex = props.item?.index ?? props.item?.value;
+          dragged.dataset.initialIndex = props.item.index;
           event.preventDefault();
         }
       }, mobileGrabThreshold);
@@ -171,7 +171,7 @@ export default defineComponent({
         return;
       }
       const dragged = (event.target as HTMLElement)?.closest(props.elementSelector) as HTMLElement;
-      dragged.dataset.initialIndex = props.item?.index ?? props.item?.value;
+      dragged.dataset.initialIndex = props.item.index;
       event.dataTransfer?.setDragImage(dragged, 25, 25);
       
       if (event.dataTransfer) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.67",
+  "version": "1.0.69",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.67",
-    "@dative-gpi/foundation-shared-services": "1.0.67"
+    "@dative-gpi/foundation-shared-domain": "1.0.69",
+    "@dative-gpi/foundation-shared-services": "1.0.69"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "ba62d45e0ff1f5df1090b715b4a01abc8ce9c3a4"
+  "gitHead": "6ecedd781dfabf0bf696992e85f35d9ce69037b9"
 }

package/tools/index.ts

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

package/tools/timeRangeTools.ts

@@ -0,0 +1,66 @@
+import { Days } from "@dative-gpi/foundation-shared-domain/enums";
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+
+const { getUserOffset } = useAppTimeZone();
+
+
+export const applyOffset = (r: DateTimeRange, negative: boolean) => {
+
+  const range: DateTimeRange = r;
+
+  if (negative) {
+    range.startHour = r.startHour - getUserOffset() / 1000 / 60 / 60;
+    range.endHour = r.endHour - getUserOffset() / 1000 / 60 / 60;
+  }
+  else {
+    range.startHour = r.startHour + getUserOffset() / 1000 / 60 / 60;
+    range.endHour = r.endHour + getUserOffset() / 1000 / 60 / 60;
+  }
+
+
+  if (![Days.AllDays].includes(r.startDay)) {
+    if (r.startHour > 23) {
+
+      range.startDay = (r.startDay + 1) % 7;
+      range.startHour -= 24;
+    }
+    else if (r.startHour < 0) {
+      range.startDay = (r.startDay + 6) % 7;
+      range.startHour += 24;
+    }
+
+    if (r.endHour > 23) {
+      range.endDay = (r.endDay + 1) % 7;
+      range.endHour -= 24;
+    }
+    else if (r.endHour < 0) {
+      range.endDay = (r.endDay + 6) % 7;
+      range.endHour += 24;
+    }
+  }
+  else {
+    if (r.startHour > 23) {
+      range.startHour -= 24;
+    }
+    else if (r.startHour < 0) {
+      range.startHour += 24;
+    }
+
+    if (r.endHour > 23) {
+      range.endHour -= 24;
+    }
+    else if (r.endHour < 0) {
+      range.endHour += 24;
+    }
+  }
+  return range;
+}
+
+export interface DateTimeRange {
+  startDay: Days;
+  startHour: number;
+  startMinute: number;
+  endDay: Days;
+  endHour: number;
+  endMinute: number;
+}