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

package/components/fields/periodicField/FSPeriodicWeeklyField.vue

@@ -1,7 +1,7 @@
 <template>
   <FSRadioGroup
     :values="availableConfigurations"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     v-model="selectedConfiguration"
   >
     <template
@@ -14,22 +14,25 @@
         <FSSpan
           :font="font"
         >
-          {{ $tr("ui.periodicfield.weekly.every", "Every") }}
+          {{ $tr("ui.common.every", "Every") }}
         </FSSpan>
         <FSSelectDays
-          :editable="$props.editable"
+          width="200px"
+          :placeholder="$tr('ui.common.selected-days', '{0} selected day(s)', days.length)"
+          :disabled="$props.disabled"
+          :multiple="true"
           :useAllDays="false"
           :hideHeader="true"
-          :modelValue="day"
+          :modelValue="days"
           @update:modelValue="onUpdateDay($event)"
         />
         <FSSpan
           :font="font"
         >
-          {{ $tr("ui.periodicfield.weekly.at", "at") }}
+          {{ $tr("ui.common.at", "at") }}
         </FSSpan>
         <FSClock
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :color="ColorEnum.Light"
           :hideHeader="true"
           :slider="false"
@@ -66,10 +69,10 @@ export default defineComponent({
       type: Array<string>,
       required: true
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -80,11 +83,13 @@ export default defineComponent({
 
     const selectedConfiguration = ref("custom");
 
-    const day = computed((): number => {
-      if (isNaN(parseInt(props.modelValue[4]))) {
-        return 0;
+    const days = computed((): number[] => {
+      try {
+        return props.modelValue[4].split(",").map((day) => parseInt(day) - 1);
+      } catch (error) {
+        console.error("Error parsing days:", error);
+        return [];
       }
-      return parseInt(props.modelValue[4]) - 1;
     });
 
     const time = computed((): number => {
@@ -94,16 +99,21 @@ export default defineComponent({
       return ((parseInt(props.modelValue[0])) + (parseInt(props.modelValue[1]) * 60)) * 60 * 1000;
     });
 
-    const onUpdateDay = (value: number): void => {
-      const hours = Math.floor(value / (60 * 60 * 1000));
-      const minutes = Math.floor(value / (60 * 1000) % 60);
-      emit("update:modelValue", [`${minutes}`, `${hours}`, `*`, `*`, `${value + 1}`]);
+    const onUpdateDay = (value: number[]): void => {
+      if(value.length === 0) {
+        return;
+      }
+      const hours = Math.floor(time.value / (60 * 60 * 1000));
+      const minutes = Math.floor(time.value / (60 * 1000) % 60);
+      const daysCron = value.map((day) => day + 1).join(",");
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `*`, `*`, `${daysCron}`]);
     };
 
     const onUpdateHours = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
-      emit("update:modelValue", [`${minutes}`, `${hours}`, `*`, `*`, `${day.value + 1}`]);
+      const daysCron = days.value.map((day) => day + 1).join(",");
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `*`, `*`, `${daysCron}`]);
     };
 
     return {
@@ -111,7 +121,7 @@ export default defineComponent({
       selectedConfiguration,
       ColorEnum,
       time,
-      day,
+      days,
       onUpdateHours,
       onUpdateDay
     };

package/components/fields/periodicField/FSPeriodicYearlyField.vue

@@ -1,7 +1,7 @@
 <template>
   <FSRadioGroup
     :values="availableConfigurations"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     v-model="selectedConfiguration"
   >
     <template
@@ -14,17 +14,17 @@
         <FSSpan
           :font="font"
         >
-          {{ $tr("ui.periodicfield.yearly.everyyear", "Every year") }}
+          {{ $tr("ui.common.every-year", "Every year") }}
         </FSSpan>
         <FSSelectMonths
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :useAllMonths="false"
           :hideHeader="true"
           :modelValue="month"
           @update:modelValue="onUpdateMonth($event)"
         />
         <FSNumberField
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :hideHeader="true"
           :clearable="false"
           :modelValue="day"
@@ -33,10 +33,10 @@
         <FSSpan
           :font="font"
         >
-          {{ $tr("ui.periodicfield.yearly.at", "at") }}
+          {{ $tr("ui.common.at", "at") }}
         </FSSpan>
         <FSClock
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :color="ColorEnum.Light"
           :hideHeader="true"
           :slider="false"
@@ -75,10 +75,10 @@ export default defineComponent({
       type: Array<string>,
       required: true
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -100,7 +100,7 @@ export default defineComponent({
       if (isNaN(parseInt(props.modelValue[3]))) {
         return 0;
       }
-      return parseInt(props.modelValue[3]) - 1;
+      return parseInt(props.modelValue[3]);
     });
 
     const time = computed((): number => {
@@ -113,19 +113,19 @@ export default defineComponent({
     const onUpdateDay = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
-      emit("update:modelValue", [`${minutes}`, `${hours}`, `${value}`, `${month.value + 1}`, "*"]);
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `${value}`, `${month.value}`, "*"]);
     };
 
     const onUpdateHours = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
-      emit("update:modelValue", [`${minutes}`, `${hours}`, `${day.value}`, `${month.value + 1}`, "*"]);
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `${day.value}`, `${month.value}`, "*"]);
     };
 
     const onUpdateMonth = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
-      emit("update:modelValue", [`${minutes}`, `${hours}`, `${day.value}`, `${value + 1}`, "*"]);
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `${day.value}`, `${value}`, "*"]);
     };
 
     return {

package/components/lists/FSDataIteratorItem.vue

@@ -1,13 +1,15 @@
 <template>
-  <FSCard
-    class="fs-data-iterator-item"
-    padding="12px"
-    width="100%"
-    :color="$props.itemColor"
-    :variant="variant"
-    :style="style"
+  <FSTile
+    :width="$props.width"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
   >
-    <FSCol>
+    <FSCol
+      height="fill"
+      style="overflow: hidden;"
+      align="top-left"
+    >
       <slot
         name="item.top"
         v-bind="{ item: $props.item }"
@@ -52,37 +54,22 @@
         v-bind="{ item: $props.item }"
       />
     </FSCol>
-    <FSCard
-      v-if="$props.showSelect"
-      class="fs-data-iterator-item-checkbox"
-      :color="$props.itemColor"
-      :variant="variant"
-      :border="false"
-    >
-      <FSCheckbox
-        :color="$props.color"
-        :modelValue="$props.modelValue"
-        @update:modelValue="() => $emit('update:modelValue', $props.item)"
-      />
-    </FSCard>
-  </FSCard>
+  </FSTile>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { ColorEnum, type FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
+import { type FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
 
-import FSCheckbox from "../FSCheckbox.vue";
-import FSCard from "../FSCard.vue";
-import FSText from "../FSText.vue";
 import FSRow from "../FSRow.vue";
+import FSText from "../FSText.vue";
+import FSTile from '../tiles/FSTile.vue';
 
 export default defineComponent({
   name: "FSDataIteratorItem",
   components: {
-    FSCheckbox,
-    FSCard,
+    FSTile,
     FSText,
     FSRow
   },
@@ -95,53 +82,22 @@ export default defineComponent({
       type: Object,
       required: true
     },
-    itemTo: {
-      type: Function,
-      required: false,
-      default: null
-    },
     modelValue: {
       type: Boolean,
       required: false,
       default: false
     },
-    itemColor: {
-      type: String as PropType<ColorEnum>,
-      required: false,
-      default: ColorEnum.Background
-    },
-    color: {
-      type: String as PropType<ColorEnum>,
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: ColorEnum.Primary
+      default: () => [352, 336]
     },
-    clickable: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    showSelect: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
   },
-  setup(props) {
-    const variant = computed((): "standard" | "background" => {
-      switch (props.itemColor) {
-        case ColorEnum.Background:
-        case null: return "background";
-        default:   return "standard";
-      }
-    });
-
-    const style = computed((): StyleValue => ({
-      "--fs-data-iterator-item-cursor": props.clickable ? "pointer" : "default"
-    }));
-
+  emits: [
+    "update:modelValue"
+  ],
+  setup() {
     return {
-      variant,
-      style
     };
   }
 });