bfg-common 1.6.110 → 1.6.111

package/components/common/pages/scheduledTasks/modals/common/frequency/on/Old.vue

@@ -1,234 +1,234 @@
-<template>
-  <div class="on-time">
-    <label class="on-time__label">
-      {{ localization.common.on }}
-    </label>
-
-    <common-pages-scheduled-tasks-modals-common-frequency-on-select-week
-      v-if="props.type === 'week'"
-      v-model="scheduledTaskFormLocal"
-    />
-
-    <div v-if="props.type === 'month'">
-      <div class="on-time__radio radio">
-        <input
-          id="on-time-monthly-by-day"
-          v-model="scheduledTaskFormLocal.frg_monthly_mode"
-          data-id="on-time-monthly-by-day"
-          type="radio"
-          value="day"
-          class="custom-radio-button"
-          name="name"
-        />
-        <label for="on-time-monthly-by-day" class="custom-radio-label">
-          {{ localization.scheduledTasks.day }}
-        </label>
-
-        <label
-          :class="[
-            'tooltip tooltip-validation tooltip-xs tooltip-top-left',
-            schedulerOnDayErrorText && 'invalid',
-          ]"
-          for="monthly-by-day-field"
-        >
-          <input
-            id="monthly-by-day-field"
-            v-model="scheduledTaskFormLocal.frg_monthly_day"
-            :disabled="isDisabledMonthlyDayField"
-            data-id="edit-lockout-policy-time-interval-input"
-            type="text"
-            class="monthly-day-field"
-            @input="onInitTimeIntervalValidation"
-            @blur="onInitTimeIntervalValidation"
-          />
-
-          <span class="tooltip-content">
-            {{ schedulerOnDayErrorText }}
-          </span>
-        </label>
-      </div>
-
-      <div class="on-time__radio radio">
-        <input
-          id="on-time-monthly-by-week"
-          v-model="scheduledTaskFormLocal.frg_monthly_mode"
-          data-id="on-time-monthly-by-week"
-          type="radio"
-          value="week"
-          class="custom-radio-button"
-          name="name"
-        />
-
-        <label for="on-time-monthly-by-week" class="custom-radio-label mr-6">
-          {{ localization.scheduledTasks.the }}
-        </label>
-        <common-select-input
-          v-model="scheduledTaskFormLocal.frq_ordinal_number"
-          :data="props.frequencyOnOrdinalNumber"
-          :class="[
-            'radio__select ordinary-day',
-            !isDisabledMonthlyDayField && 'disabled',
-          ]"
-        />
-
-        <common-select-input
-          v-model="scheduledTaskFormLocal.frq_week_day"
-          :data="props.frequencyOnWeeksDays"
-          :class="[
-            'radio__select week-days',
-            !isDisabledMonthlyDayField && 'disabled',
-          ]"
-        />
-      </div>
-    </div>
-
-    <label
-      v-if="props.type === 'once'"
-      :class="[
-        'tooltip tooltip-validation tooltip-xs tooltip-top-left',
-        schedulerAtOnceErrorText && 'invalid',
-      ]"
-      for="frequency-on-date"
-    >
-      <input
-        id="frequency-on-date"
-        v-model.lazy="scheduledTaskFormLocal.frg_on_time"
-        data-id="frequency-on-date-input"
-        type="datetime-local"
-      />
-
-      <span class="tooltip-content">
-        {{ schedulerAtOnceErrorText }}
-      </span>
-    </label>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_ScheduleNewTasksForm } from '~/components/common/pages/scheduledTasks/modals/lib/models/interfaces'
-import {
-  validateDate,
-  validateField,
-} from '~/components/common/pages/scheduledTasks/modals/common/frequency/lib/utils'
-
-const scheduledTaskFormLocal = defineModel<UI_I_ScheduleNewTasksForm>({
-  required: true,
-})
-const props = defineProps<{
-  type: string
-  frequencyOnWeeksDays: UI_I_SelectInputItem[]
-  frequencyOnOrdinalNumber: UI_I_SelectInputItem[]
-}>()
-
-const { $formattedDatetime }: any = useNuxtApp()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isDisabledMonthlyDayField = computed<boolean>(
-  () => scheduledTaskFormLocal.value.frg_monthly_mode === 'week'
-)
-
-const isInitTimeIntervalValidation = ref<boolean>(false)
-const onInitTimeIntervalValidation = (): void => {
-  isInitTimeIntervalValidation.value = true
-}
-const schedulerOnDayErrorText = computed<string>(() => {
-  if (!isInitTimeIntervalValidation.value || isDisabledMonthlyDayField.value)
-    return ''
-
-  return validateField(
-    localization.value,
-    scheduledTaskFormLocal.value.frg_monthly_day,
-    true,
-    true
-  )
-})
-watch(
-  schedulerOnDayErrorText,
-  (newValue: string) => {
-    scheduledTaskFormLocal.value.isValid = !!newValue
-  },
-  { immediate: true }
-)
-
-const schedulerAtOnceErrorText = computed<string>(() => {
-  return !scheduledTaskFormLocal.value.frg_on_time
-    ? localization.value.common.fieldRequired
-    : validateDate(localization.value, scheduledTaskFormLocal.value.frg_on_time)
-})
-watch(
-  schedulerAtOnceErrorText,
-  (newValue: string) => {
-    scheduledTaskFormLocal.value.isValid = !!newValue
-  },
-  { immediate: true }
-)
-
-onMounted(() => {
-  props.type === 'once' && setDefaultDateTime()
-})
-const setDefaultDateTime = () => {
-  scheduledTaskFormLocal.value.frg_on_time = $formattedDatetime(new Date(), {
-    formatDate: 'yyyy-MM-dd',
-    separator: ' ',
-    formatTime: 'HH:mm',
-  })
-}
-</script>
-
-<style lang="scss" scoped>
-@import 'bfg-common/assets/scss/common/mixins.scss';
-.on-time {
-  display: flex;
-  margin-top: 25px;
-  &__label {
-    font-weight: 400;
-    padding-left: 0;
-    margin-right: 15px;
-  }
-  &__radio {
-    @include flex($align: center);
-    .monthly-day-field {
-      width: 110px;
-    }
-  }
-}
-.radio {
-  &__select {
-    width: 100%;
-    margin-top: 10px;
-    :deep(.select-input__inner) {
-      max-width: 100% !important;
-      min-width: max-content;
-    }
-    &.ordinary-day :deep(select) {
-      min-width: 80px;
-    }
-    &.week-days {
-      margin-left: 15px;
-      :deep(select) {
-        min-width: 110px;
-      }
-    }
-    select {
-      width: 80px;
-    }
-    &.disabled {
-      opacity: 0.6;
-      pointer-events: none;
-    }
-  }
-}
-
-.tooltip {
-  & > .tooltip-content {
-    width: 200px;
-  }
-}
-input[type='radio']:focus:checked + label::before,
-input[type='radio']:focus + label::before {
-  box-shadow: inset 0 0 0 0.25rem #0094d2;
-}
-</style>
+<template>
+  <div class="on-time">
+    <label class="on-time__label">
+      {{ localization.common.on }}
+    </label>
+
+    <common-pages-scheduled-tasks-modals-common-frequency-on-select-week
+      v-if="props.type === 'week'"
+      v-model="scheduledTaskFormLocal"
+    />
+
+    <div v-if="props.type === 'month'">
+      <div class="on-time__radio radio">
+        <input
+          id="on-time-monthly-by-day"
+          v-model="scheduledTaskFormLocal.frg_monthly_mode"
+          data-id="on-time-monthly-by-day"
+          type="radio"
+          value="day"
+          class="custom-radio-button"
+          name="name"
+        />
+        <label for="on-time-monthly-by-day" class="custom-radio-label">
+          {{ localization.scheduledTasks.day }}
+        </label>
+
+        <label
+          :class="[
+            'tooltip tooltip-validation tooltip-xs tooltip-top-left',
+            schedulerOnDayErrorText && 'invalid',
+          ]"
+          for="monthly-by-day-field"
+        >
+          <input
+            id="monthly-by-day-field"
+            v-model="scheduledTaskFormLocal.frg_monthly_day"
+            :disabled="isDisabledMonthlyDayField"
+            data-id="edit-lockout-policy-time-interval-input"
+            type="text"
+            class="monthly-day-field"
+            @input="onInitTimeIntervalValidation"
+            @blur="onInitTimeIntervalValidation"
+          />
+
+          <span class="tooltip-content">
+            {{ schedulerOnDayErrorText }}
+          </span>
+        </label>
+      </div>
+
+      <div class="on-time__radio radio">
+        <input
+          id="on-time-monthly-by-week"
+          v-model="scheduledTaskFormLocal.frg_monthly_mode"
+          data-id="on-time-monthly-by-week"
+          type="radio"
+          value="week"
+          class="custom-radio-button"
+          name="name"
+        />
+
+        <label for="on-time-monthly-by-week" class="custom-radio-label mr-6">
+          {{ localization.scheduledTasks.the }}
+        </label>
+        <common-select-input
+          v-model="scheduledTaskFormLocal.frq_ordinal_number"
+          :data="props.frequencyOnOrdinalNumber"
+          :class="[
+            'radio__select ordinary-day',
+            !isDisabledMonthlyDayField && 'disabled',
+          ]"
+        />
+
+        <common-select-input
+          v-model="scheduledTaskFormLocal.frq_week_day"
+          :data="props.frequencyOnWeeksDays"
+          :class="[
+            'radio__select week-days',
+            !isDisabledMonthlyDayField && 'disabled',
+          ]"
+        />
+      </div>
+    </div>
+
+    <label
+      v-if="props.type === 'once'"
+      :class="[
+        'tooltip tooltip-validation tooltip-xs tooltip-top-left',
+        schedulerAtOnceErrorText && 'invalid',
+      ]"
+      for="frequency-on-date"
+    >
+      <input
+        id="frequency-on-date"
+        v-model.lazy="scheduledTaskFormLocal.frg_on_time"
+        data-id="frequency-on-date-input"
+        type="datetime-local"
+      />
+
+      <span class="tooltip-content">
+        {{ schedulerAtOnceErrorText }}
+      </span>
+    </label>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ScheduleNewTasksForm } from '~/components/common/pages/scheduledTasks/modals/lib/models/interfaces'
+import {
+  validateDate,
+  validateField,
+} from '~/components/common/pages/scheduledTasks/modals/common/frequency/lib/utils'
+
+const scheduledTaskFormLocal = defineModel<UI_I_ScheduleNewTasksForm>({
+  required: true,
+})
+const props = defineProps<{
+  type: string
+  frequencyOnWeeksDays: UI_I_SelectInputItem[]
+  frequencyOnOrdinalNumber: UI_I_SelectInputItem[]
+}>()
+
+const { $formattedDatetime }: any = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isDisabledMonthlyDayField = computed<boolean>(
+  () => scheduledTaskFormLocal.value.frg_monthly_mode === 'week'
+)
+
+const isInitTimeIntervalValidation = ref<boolean>(false)
+const onInitTimeIntervalValidation = (): void => {
+  isInitTimeIntervalValidation.value = true
+}
+const schedulerOnDayErrorText = computed<string>(() => {
+  if (!isInitTimeIntervalValidation.value || isDisabledMonthlyDayField.value)
+    return ''
+
+  return validateField(
+    localization.value,
+    scheduledTaskFormLocal.value.frg_monthly_day,
+    true,
+    true
+  )
+})
+watch(
+  schedulerOnDayErrorText,
+  (newValue: string) => {
+    scheduledTaskFormLocal.value.isValid = !!newValue
+  },
+  { immediate: true }
+)
+
+const schedulerAtOnceErrorText = computed<string>(() => {
+  return !scheduledTaskFormLocal.value.frg_on_time
+    ? localization.value.common.fieldRequired
+    : validateDate(localization.value, scheduledTaskFormLocal.value.frg_on_time)
+})
+watch(
+  schedulerAtOnceErrorText,
+  (newValue: string) => {
+    scheduledTaskFormLocal.value.isValid = !!newValue
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  props.type === 'once' && setDefaultDateTime()
+})
+const setDefaultDateTime = () => {
+  scheduledTaskFormLocal.value.frg_on_time = $formattedDatetime(new Date(), {
+    formatDate: 'yyyy-MM-dd',
+    separator: ' ',
+    formatTime: 'HH:mm',
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+@import 'bfg-common/assets/scss/common/mixins.scss';
+.on-time {
+  display: flex;
+  margin-top: 25px;
+  &__label {
+    font-weight: 400;
+    padding-left: 0;
+    margin-right: 15px;
+  }
+  &__radio {
+    @include flex($align: center);
+    .monthly-day-field {
+      width: 110px;
+    }
+  }
+}
+.radio {
+  &__select {
+    width: 100%;
+    margin-top: 10px;
+    :deep(.select-input__inner) {
+      max-width: 100% !important;
+      min-width: max-content;
+    }
+    &.ordinary-day :deep(select) {
+      min-width: 80px;
+    }
+    &.week-days {
+      margin-left: 15px;
+      :deep(select) {
+        min-width: 110px;
+      }
+    }
+    select {
+      width: 80px;
+    }
+    &.disabled {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+  }
+}
+
+.tooltip {
+  & > .tooltip-content {
+    width: 200px;
+  }
+}
+input[type='radio']:focus:checked + label::before,
+input[type='radio']:focus + label::before {
+  box-shadow: inset 0 0 0 0.25rem #0094d2;
+}
+</style>

package/components/common/pages/scheduledTasks/modals/common/frequency/on/On.vue

@@ -1,104 +1,104 @@
-<template>
-  <component
-    :is="currentComponent"
-    v-model="model"
-    :frequency-monthly-mode="frequencyMonthlyMode"
-    :frequency-on-ordinal-number="frequencyOnOrdinalNumber"
-    :frequency-on-weeks-days="frequencyOnWeeksDays"
-    :type="type"
-    :template-view-mode="props.templateViewMode"
-    @vue:mounted="onSetDefaultDateTime"
-  />
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_ScheduleNewTasksForm } from '~/components/common/pages/scheduledTasks/modals/lib/models/interfaces'
-import {
-  frequencyMonthlyModeFunc,
-  frequencyOnWeeksDaysFunc,
-  frequencyOnOrdinalNumberFunc,
-} from '~/components/common/pages/scheduledTasks/modals/common/frequency/on/lib/config/options'
-import {
-  validateDate,
-  validateField,
-} from '~/components/common/pages/scheduledTasks/modals/common/frequency/lib/utils'
-
-const model = defineModel<UI_I_ScheduleNewTasksForm>({ required: true })
-const props = defineProps<{
-  type: string
-  templateViewMode: 'horizontal' | 'vertical'
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const { $formattedDatetime }: any = useNuxtApp()
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./New.vue'))
-    : defineAsyncComponent(() => import('./Old.vue'))
-)
-
-const frequencyMonthlyMode = computed<UI_I_SelectInputItem[]>(() => {
-  return frequencyMonthlyModeFunc(localization.value)
-})
-const frequencyOnOrdinalNumber = computed<UI_I_SelectInputItem[]>(() => {
-  return frequencyOnOrdinalNumberFunc(localization.value)
-})
-const frequencyOnWeeksDays = computed<UI_I_SelectInputItem[]>(() => {
-  return frequencyOnWeeksDaysFunc(localization.value)
-})
-
-const isDisabledMonthlyDayField = computed<boolean>(
-  () => model.value.frg_monthly_mode === 'week'
-)
-
-const isInitTimeIntervalValidation = ref<boolean>(false)
-const onInitTimeIntervalValidation = (): void => {
-  isInitTimeIntervalValidation.value = true
-}
-const schedulerOnDayErrorText = computed<string>(() => {
-  if (!isInitTimeIntervalValidation.value || isDisabledMonthlyDayField.value)
-    return ''
-
-  return validateField(
-    localization.value,
-    model.value.frg_monthly_day,
-    true,
-    true
-  )
-})
-watch(
-  schedulerOnDayErrorText,
-  (newValue: string) => {
-    model.value.isValid = !!newValue
-  },
-  { immediate: true }
-)
-
-const schedulerAtOnceErrorText = computed<string>(() => {
-  return !model.value.frg_on_time
-    ? localization.value.common.fieldRequired
-    : validateDate(localization.value, model.value.frg_on_time)
-})
-watch(
-  schedulerAtOnceErrorText,
-  (newValue: string) => {
-    model.value.isValid = !!newValue
-  },
-  { immediate: true }
-)
-
-const onSetDefaultDateTime = () => {
-  if (props.type !== 'once') return
-
-  model.value.frg_on_time = $formattedDatetime(new Date(), {
-    formatDate: 'yyyy-MM-dd',
-    separator: ' ',
-    formatTime: 'HH:mm',
-  })
-}
-</script>
+<template>
+  <component
+    :is="currentComponent"
+    v-model="model"
+    :frequency-monthly-mode="frequencyMonthlyMode"
+    :frequency-on-ordinal-number="frequencyOnOrdinalNumber"
+    :frequency-on-weeks-days="frequencyOnWeeksDays"
+    :type="type"
+    :template-view-mode="props.templateViewMode"
+    @vue:mounted="onSetDefaultDateTime"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ScheduleNewTasksForm } from '~/components/common/pages/scheduledTasks/modals/lib/models/interfaces'
+import {
+  frequencyMonthlyModeFunc,
+  frequencyOnWeeksDaysFunc,
+  frequencyOnOrdinalNumberFunc,
+} from '~/components/common/pages/scheduledTasks/modals/common/frequency/on/lib/config/options'
+import {
+  validateDate,
+  validateField,
+} from '~/components/common/pages/scheduledTasks/modals/common/frequency/lib/utils'
+
+const model = defineModel<UI_I_ScheduleNewTasksForm>({ required: true })
+const props = defineProps<{
+  type: string
+  templateViewMode: 'horizontal' | 'vertical'
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $formattedDatetime }: any = useNuxtApp()
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
+const frequencyMonthlyMode = computed<UI_I_SelectInputItem[]>(() => {
+  return frequencyMonthlyModeFunc(localization.value)
+})
+const frequencyOnOrdinalNumber = computed<UI_I_SelectInputItem[]>(() => {
+  return frequencyOnOrdinalNumberFunc(localization.value)
+})
+const frequencyOnWeeksDays = computed<UI_I_SelectInputItem[]>(() => {
+  return frequencyOnWeeksDaysFunc(localization.value)
+})
+
+const isDisabledMonthlyDayField = computed<boolean>(
+  () => model.value.frg_monthly_mode === 'week'
+)
+
+const isInitTimeIntervalValidation = ref<boolean>(false)
+const onInitTimeIntervalValidation = (): void => {
+  isInitTimeIntervalValidation.value = true
+}
+const schedulerOnDayErrorText = computed<string>(() => {
+  if (!isInitTimeIntervalValidation.value || isDisabledMonthlyDayField.value)
+    return ''
+
+  return validateField(
+    localization.value,
+    model.value.frg_monthly_day,
+    true,
+    true
+  )
+})
+watch(
+  schedulerOnDayErrorText,
+  (newValue: string) => {
+    model.value.isValid = !!newValue
+  },
+  { immediate: true }
+)
+
+const schedulerAtOnceErrorText = computed<string>(() => {
+  return !model.value.frg_on_time
+    ? localization.value.common.fieldRequired
+    : validateDate(localization.value, model.value.frg_on_time)
+})
+watch(
+  schedulerAtOnceErrorText,
+  (newValue: string) => {
+    model.value.isValid = !!newValue
+  },
+  { immediate: true }
+)
+
+const onSetDefaultDateTime = () => {
+  if (props.type !== 'once') return
+
+  model.value.frg_on_time = $formattedDatetime(new Date(), {
+    formatDate: 'yyyy-MM-dd',
+    separator: ' ',
+    formatTime: 'HH:mm',
+  })
+}
+</script>