bfg-common 1.6.95 → 1.6.97

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

@@ -0,0 +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>

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

@@ -1,107 +1,14 @@
 <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="model"
-    />
-
-    <div v-if="props.type === 'month'">
-      <div class="on-time__radio radio">
-        <input
-          id="on-time-monthly-by-day"
-          v-model="model.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="model.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="model.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="model.frq_ordinal_number"
-          :data="frequencyOnOrdinalNumber"
-          :class="[
-            'radio__select ordinary-day',
-            !isDisabledMonthlyDayField && 'disabled',
-          ]"
-        />
-
-        <common-select-input
-          v-model="model.frq_week_day"
-          :data="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="model.frg_on_time"
-        data-id="frequency-on-date-input"
-        type="datetime-local"
-      />
-
-      <span class="tooltip-content">
-        {{ schedulerAtOnceErrorText }}
-      </span>
-    </label>
-  </div>
+  <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>
@@ -109,30 +16,41 @@ import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_ScheduleNewTasksForm } from '~/components/common/pages/scheduledTasks/modals/lib/models/interfaces'
 import {
-  frequencyOnOrdinalNumberFunc,
+  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 model = defineModel<UI_I_ScheduleNewTasksForm>({ required: true })
-
-const localization = computed<UI_I_Localization>(() => useLocal())
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
 
-const frequencyOnWeeksDays = computed<UI_I_SelectInputItem[]>(() => {
-  return frequencyOnWeeksDaysFunc(localization.value)
+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'
@@ -174,10 +92,9 @@ watch(
   { immediate: true }
 )
 
-onMounted(() => {
-  props.type === 'once' && setDefaultDateTime()
-})
-const setDefaultDateTime = () => {
+const onSetDefaultDateTime = () => {
+  if (props.type !== 'once') return
+
   model.value.frg_on_time = $formattedDatetime(new Date(), {
     formatDate: 'yyyy-MM-dd',
     separator: ' ',
@@ -185,58 +102,3 @@ const setDefaultDateTime = () => {
   })
 }
 </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/lib/config/options.ts

@@ -1,6 +1,23 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
 
+export const frequencyMonthlyModeFunc = (
+  localization: UI_I_Localization
+): UI_I_SelectInputItem[] => {
+  return [
+    {
+      label: localization.scheduledTasks.day,
+      value: 'day',
+      testId: 'on-time-monthly-by-day',
+    },
+    {
+      label: localization.scheduledTasks.the,
+      value: 'week',
+      testId: 'on-time-monthly-by-week',
+    },
+  ]
+}
+
 export const frequencyOnWeeksDaysFunc = (
   localization: UI_I_Localization
 ): UI_I_SelectInputItem[] => {

package/components/common/pages/scheduledTasks/modals/common/frequency/on/selectWeek/New.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="flex items-center column-gap-3 frequency-week-days">
+    <ui-block
+      v-for="item in props.tabs"
+      :key="item.value"
+      :class="{ selected: item.isActive }"
+      @click="onSelectDay(item.value)"
+    >
+      <div class="main-info">
+        <span class="main-info-label">{{ item.name }}</span>
+      </div>
+    </ui-block>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_SelectWeekDayTab } from '~/components/common/pages/scheduledTasks/modals/common/frequency/on/selectWeek/lib/models/interfaces'
+
+const props = defineProps<{
+  tabs: UI_I_SelectWeekDayTab[]
+}>()
+const emits = defineEmits<{
+  (event: 'select-day', value: number): void
+}>()
+
+const onSelectDay = (value: number): void => {
+  emits('select-day', value)
+}
+</script>
+
+<style lang="scss" scoped>
+.frequency-week-days {
+  :deep(.block) {
+    width: max-content;
+    padding: 10px 12px;
+    color: var(--feedback-text-color);
+    background: var(--feedback-tab-bg-color);
+    box-shadow: inset 0 0 0 1px var(--feedback-tab-border-color);
+    cursor: pointer;
+
+    &.selected {
+      box-shadow: inset 0 0 0 1.5px var(--feedback-tab-active-text-color);
+      color: var(--feedback-tab-active-text-color);
+      cursor: default;
+    }
+    &:not(.selected):hover {
+      background: var(--feedback-tab-hover-bg-color);
+    }
+    &.selected:hover {
+      background: #f0f8fd;
+    }
+  }
+
+  .main-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    &-label {
+      font-size: 13px;
+      font-weight: 500;
+      line-height: 15.73px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,44 @@
+<template>
+  <!--  TODO это компонент уже есть надо сделат одну но не ламать функционалность -->
+  <div class="flex-align-center">
+    <div class="btn-group">
+      <button
+        v-for="item in props.tabs"
+        :key="item"
+        :data-id="item.testId"
+        :class="['btn btn-sm btn-secondary', { 'btn-primary': item.isActive }]"
+        @click="onSelectDay(item.value)"
+      >
+        {{ item.name }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_SelectWeekDayTab } from '~/components/common/pages/scheduledTasks/modals/common/frequency/on/selectWeek/lib/models/interfaces'
+
+const props = defineProps<{
+  tabs: UI_I_SelectWeekDayTab[]
+}>()
+const emits = defineEmits<{
+  (event: 'select-day', value: number): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onSelectDay = (value: number): void => {
+  emits('select-day', value)
+}
+</script>
+
+<style lang="scss" scoped>
+.btn-group {
+  margin-right: 0;
+  button {
+    padding: 0 0.5rem;
+    min-width: 24px;
+  }
+}
+</style>

package/components/common/pages/scheduledTasks/modals/common/frequency/on/selectWeek/SelectWeek.vue

@@ -1,18 +1,5 @@
 <template>
-  <!--  TODO это компонент уже есть надо сделат одну но не ламать функционалность -->
-  <div class="flex-align-center">
-    <div class="btn-group">
-      <button
-        v-for="item in tabs"
-        :key="item"
-        :data-id="item.testId"
-        :class="['btn btn-sm btn-secondary', { 'btn-primary': item.isActive }]"
-        @click="onSelectDay(item.value)"
-      >
-        {{ item.name }}
-      </button>
-    </div>
-  </div>
+  <component :is="currentComponent" :tabs="tabs" @select-day="onSelectDay" />
 </template>
 
 <script lang="ts" setup>
@@ -26,6 +13,22 @@ const modelFrequency = defineModel<UI_I_ScheduleNewTasksForm>({
 })
 
 const localization = computed<UI_I_Localization>(() => useLocal())
+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 tabs = computed<UI_I_SelectWeekDayTab[]>(() =>
+  weekDaysFunc(
+    localization.value,
+    modelFrequency.value.frg_on_week_days,
+    isNewView.value
+  )
+)
 
 const onSelectDay = (value: number): void => {
   const index = modelFrequency.value?.frg_on_week_days.indexOf(value)
@@ -41,10 +44,6 @@ const onSelectDay = (value: number): void => {
   }
 }
 
-const tabs = computed<UI_I_SelectWeekDayTab[]>(() =>
-  weekDaysFunc(localization.value, modelFrequency.value.frg_on_week_days)
-)
-
 watch(
   modelFrequency,
   (newValue: UI_I_ScheduleNewTasksForm) => {
@@ -56,13 +55,3 @@ watch(
   }
 )
 </script>
-
-<style lang="scss" scoped>
-.btn-group {
-  margin-right: 0;
-  button {
-    padding: 0 0.5rem;
-    min-width: 24px;
-  }
-}
-</style>