@dative-gpi/foundation-shared-components 0.0.229 → 0.1.68

package/components/fields/FSTranslateTextArea.vue

@@ -0,0 +1,233 @@
+<template>
+  <FSTextArea
+    :editable="$props.editable"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+    <template
+      #append
+    >
+      <FSButton
+        height="100%"
+        style=""
+        :prependIcon="$props.buttonPrependIcon"
+        :appendIcon="$props.buttonAppendIcon"
+        :variant="$props.buttonVariant"
+        :color="$props.buttonColor"
+        @click="dialog = true"
+      /> 
+      <slot
+        name="append"
+      />
+    </template>
+  </FSTextArea>
+  <FSDialogSubmit
+    :title="$tr('ui.translate-text-area.title', 'Handle translations')"
+    :submitButtonColor="$props.buttonColor"
+    @click:submitButton="onSubmit"
+    v-model="dialog"
+  >
+    <template
+      #body
+    >
+      <FSCol
+        gap="32px"
+      >
+        <FSTextArea
+          :label="$tr('ui.translate-text-area.default-value', 'Default value')"
+          :editable="false"
+          :rows="($attrs.rows as number)"
+          :modelValue="$props.modelValue"
+        />
+        <FSCol
+          gap="20px"
+        >
+          <FSTextArea
+            v-for="(language, index) in languages"
+            :editable="$props.editable"
+            :key="index"
+            :modelValue="getTranslation(language.code)"
+            :rows="($attrs.rows as number)"
+            @update:modelValue="setTranslation(language.code, $event)"
+          >
+            <template
+              #label
+            >
+              <FSRow
+                :wrap="false"
+                align="center-left"
+              >
+                <FSSpan
+                  font="text-overline"
+                  :style="style"
+                >
+                  {{ $tr("ui.translate-field.translate-in", "Translate in {0}", language.label) }}
+                </FSSpan>
+                <FSIcon>
+                  {{ language.icon }}
+                </FSIcon>
+              </FSRow> 
+            </template>
+          </FSTextArea>
+        </FSCol>
+      </FSCol>
+    </template>
+  </FSDialogSubmit>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
+
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useAppLanguages } from "@dative-gpi/foundation-shared-services/composables";
+
+import { useColors } from "../../composables";
+
+import FSDialogSubmit from "../FSDialogSubmit.vue";
+import FSTextArea from "./FSTextArea.vue";
+import FSButton from "../FSButton.vue";
+import FSIcon from "../FSIcon.vue";
+import FSSpan from "../FSSpan.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSTranslateTextArea",
+  components: {
+    FSDialogSubmit,
+    FSTextArea,
+    FSButton,
+    FSIcon,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    buttonPrependIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: "mdi-translate"
+    },
+    buttonLabel: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    buttonAppendIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    buttonVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "standard"
+    },
+    modelValue: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    property: {
+      type: String as PropType<string>,
+      required: false,
+      default: "label"
+    },
+    translations: {
+      type: Array as PropType<{ languageCode: string; [key: string]: string }[]>,
+      required: false,
+      default: () => []
+    },
+    buttonColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue", "update:translations"],
+  setup(props, { emit }) {
+    const { languages } = useAppLanguages();
+    const { getColors } = useColors();
+    
+    const dialog = ref(false);
+
+    const innerTranslations = ref(props.translations);
+
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
+
+    const style = computed((): StyleValue => {
+      if (!props.editable) {
+        return {
+          "--fs-translate-field-color": lights.dark
+        };
+      }
+      return {
+        "--fs-translate-field-color": darks.base
+      };
+    });
+
+    const getTranslation = (languageCode: string): string => {
+      if (!innerTranslations.value) {
+        return "";
+      }
+      const translation = innerTranslations.value.find((t) => t.languageCode === languageCode);
+      if (!translation || !translation[props.property]) {
+        return "";
+      }
+      return translation[props.property];
+    };
+
+    const setTranslation = (languageCode: string, value: string): void => {
+      if (!innerTranslations.value) {
+        innerTranslations.value = [{
+          languageCode,
+          [props.property]: value
+        }]
+        return;
+      }
+      const translation = innerTranslations.value.find((t) => t.languageCode === languageCode);
+      if (translation) {
+        translation[props.property] = value;
+      }
+      else {
+        innerTranslations.value.push({
+          languageCode,
+          [props.property]: value
+        });
+      }
+    };
+
+    const onSubmit = (): void => {
+      dialog.value = false;
+      if (props.editable) {
+        emit("update:translations", innerTranslations.value);
+      }
+    };
+
+    return {
+      innerTranslations,
+      ColorEnum,
+      languages,
+      dialog,
+      style,
+      getTranslation,
+      setTranslation,
+      onSubmit
+    };
+  }
+});
+</script>

package/components/fields/FSTreeViewField.vue

@@ -57,7 +57,7 @@
             #body
           >
             <FSFadeOut
-              :height="height"
+              :maxHeight="maxHeight"
             >
               <v-treeview
                 :itemTitle="$props.itemTitle"
@@ -240,14 +240,12 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
+import { VTreeview } from "vuetify/labs/VTreeview";
 
 import { useBreakpoints, useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import { VTreeview } from "vuetify/labs/VTreeview";
-
 import FSDialogMenu from "../FSDialogMenu.vue";
 import FSTextField from "./FSTextField.vue";
 import FSCheckbox from "../FSCheckbox.vue";
@@ -367,7 +365,7 @@ export default defineComponent({
     const dialog = ref(false);
     const menu = ref(false);
 
-    const style = computed((): { [key: string]: string | undefined | null } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-tree-view-field-cursor": "default"
@@ -383,7 +381,7 @@ export default defineComponent({
 
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 
-    const height = computed(() => {
+    const maxHeight = computed(() => {
       const other = 8 + 8; // Paddings
       return `calc(100vh - 40px - ${other}px)`;
     });
@@ -431,7 +429,7 @@ export default defineComponent({
           return item[props.itemParent] == parentId;
         });
       });
-      const process = ((item: any) => {
+      const process = ((item: any): any => {
         if (props.items.some((child: any) => child[props.itemParent] === item[props.itemValue])) {
           return {
             ...item,
@@ -503,11 +501,11 @@ export default defineComponent({
       innerValue,
       fieldSlots,
       validateOn,
+      maxHeight,
       menuSlots,
       treeItems,
       messages,
       dialog,
-      height,
       style,
       menu,
       openMobileOverlay,

package/components/fields/periodicField/FSPeriodicDailyField.vue

@@ -0,0 +1,120 @@
+<template>
+  <FSRadioGroup
+    :values="availableConfigurations"
+    :editable="$props.editable"
+    v-model="selectedConfiguration"
+  >
+    <template
+      #label="{ item, font }"
+    >
+      <FSRow
+        v-if="item.value === 'custom'"
+        align="center-left"
+      >
+        <FSSpan
+          :font="font"
+        >
+          {{ $tr('ui.periodicfield.daily.every', 'Every') }}
+        </FSSpan>
+        <FSNumberField
+          :editable="$props.editable"
+          :modelValue="days"
+          :hideHeader="true"
+          :clearable="false"
+          @update:modelValue="onUpdateDays($event)"
+        />
+        <FSSpan
+          :font="font"
+        >
+          {{ $tr('ui.periodicfield.daily.daysat', 'day(s) at') }}
+        </FSSpan>
+        <FSClock
+          :editable="$props.editable"
+          :color="ColorEnum.Light"
+          :modelValue="time"
+          :hideHeader="true"
+          :slider="false"
+          @update:modelValue="onUpdateHours($event)"
+        />
+      </FSRow>
+    </template>
+  </FSRadioGroup>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent, computed } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSRadioGroup from "../../FSRadioGroup.vue";
+import FSNumberField from "../FSNumberField.vue";
+import FSClock from "../../FSClock.vue";
+import FSSpan from "../../FSSpan.vue";
+import FSRow from "../../FSRow.vue";
+
+export default defineComponent({
+  name: "FSPeriodicDailyField",
+  components: {
+    FSNumberField,
+    FSRadioGroup,
+    FSClock,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    modelValue: {
+      type: Array<string>,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const availableConfigurations = [
+      { value: "custom", item: { value: "custom" } }
+    ];
+
+    const selectedConfiguration = ref("custom");
+
+    const days = computed((): number => {
+      if (isNaN(parseInt(props.modelValue[2].replace("*/", "")))) {
+        return 0
+      }
+      return parseInt(props.modelValue[2].replace("*/", ""));
+    });
+
+    const time = computed((): number => {
+      if (isNaN(parseInt(props.modelValue[0])) || isNaN(parseInt(props.modelValue[1]))) {
+        return 0;
+      }
+      return ((parseInt(props.modelValue[0])) + (parseInt(props.modelValue[1]) * 60)) * 60 * 1000;
+    });
+
+    const onUpdateDays = (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}`, "*", "*"]);
+    };
+
+    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}`, `*/${days.value}`, "*", "*"]);
+    };
+
+    return {
+      availableConfigurations,
+      selectedConfiguration,
+      ColorEnum,
+      days,
+      time,
+      onUpdateHours,
+      onUpdateDays
+    };
+  }
+});
+</script>

package/components/fields/periodicField/FSPeriodicField.vue

@@ -0,0 +1,131 @@
+<template>
+  <FSRow
+    gap="12px"
+    :wrap="false"
+  >
+    <FSRadioGroup
+      :values="availablePeriod"
+      :editable="editable"
+      v-model="selectedPeriod"
+    />
+    <FSRow
+      align="center-left"
+      height="fill"
+      gap="12px"
+      :wrap="false"
+    >
+      <FSDivider
+        :vertical="true"
+      />
+      <FSPeriodicDailyField
+        v-if="selectedPeriod === 'daily'"
+        :editable="editable"
+        :modelValue="$props.modelValue.split(' ')"
+        @update:modelValue="$emit('update:modelValue', $event.join(' '))"
+      />
+      <FSPeriodicWeeklyField
+        v-else-if="selectedPeriod === 'weekly'"
+        :editable="editable"
+        :modelValue="$props.modelValue.split(' ')"
+        @update:modelValue="$emit('update:modelValue', $event.join(' '))"
+      />
+      <FSPeriodicMonthlyField
+        v-else-if="selectedPeriod === 'monthly'"
+        :editable="editable"
+        :modelValue="$props.modelValue.split(' ')"
+        @update:modelValue="$emit('update:modelValue', $event.join(' '))"
+      />
+      <FSPeriodicYearlyField
+        v-else-if="selectedPeriod === 'yearly'"
+        :editable="editable"
+        :modelValue="$props.modelValue.split(' ')"
+        @update:modelValue="$emit('update:modelValue', $event.join(' '))"
+      />
+    </FSRow>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent, onMounted, type PropType, watch } from "vue";
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
+
+import FSPeriodicMonthlyField from "./FSPeriodicMonthlyField.vue";
+import FSPeriodicWeeklyField from "./FSPeriodicWeeklyField.vue";
+import FSPeriodicYearlyField from "./FSPeriodicYearlyField.vue";
+import FSPeriodicDailyField from "./FSPeriodicDailyField.vue";
+import FSRadioGroup from "../../FSRadioGroup.vue";
+import FSDivider from "../../FSDivider.vue";
+import FSRow from "../../FSRow.vue";
+
+export default defineComponent({
+  name: "FSPeriodicField",
+  components: {
+    FSPeriodicMonthlyField,
+    FSPeriodicWeeklyField,
+    FSPeriodicYearlyField,
+    FSPeriodicDailyField,
+    FSRadioGroup,
+    FSDivider,
+    FSRow
+  },
+  props: {
+    modelValue: {
+      type: String as PropType<"daily" | "weekly" | "monthly" | "yearly">,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { $tr } = useTranslationsProvider();
+
+    const availablePeriod = [
+      { label: $tr("ui.periodicField.daily", "Daily")    , value: "daily"  , item: { default : "0 12 */1 * *"} },
+      { label: $tr("ui.periodicField.weekly", "Weekly")  , value: "weekly" , item: { default : "0 12 * * 1"} },
+      { label: $tr("ui.periodicField.monthly", "Monthly"), value: "monthly", item: { default : "0 12 1 * *"} },
+      { label: $tr("ui.periodicField.yearly", "Yearly")  , value: "yearly" , item: { default : "0 12 1 1 *"} }
+    ];
+    
+    const selectedPeriod = ref("daily");
+
+    const getPeriod = (value: string) => {
+      const cronArray = value.split(" ");
+      if (cronArray[3] !== "*") {
+        return "yearly";
+      }
+      else if(!cronArray[2].includes("*") || cronArray[2].includes("-")) {
+        return "monthly";
+      }
+      else if(cronArray[4] !== "*") {
+        return "weekly";
+      }
+      return "daily";
+    };
+
+    watch(() => selectedPeriod.value, () => {
+      if (getPeriod(props.modelValue) === selectedPeriod.value) {
+        return;
+      }
+      const period = availablePeriod.find((item) => item.value === selectedPeriod.value);
+      if (!period) {
+        return;
+      }
+      emit('update:modelValue', period.item.default);
+    });
+
+    onMounted(() => {
+      selectedPeriod.value = getPeriod(props.modelValue);
+    });
+
+    return {
+      availablePeriod,
+      selectedPeriod
+    };
+  }
+});
+</script>