bfg-common 1.5.921 → 1.5.923

package/components/common/pages/scheduledTasks/modals/common/frequency/interval/Interval.vue

@@ -1,11 +1,34 @@
 <template>
-  <component
-    :is="currentComponent"
-    v-model="modelFrequencyLocal.frg_interval"
-    :time-interval-error-text="timeIntervalErrorText"
-    :interval-suffix-label="intervalSuffixLabel"
-    @init-validation="onInitValidation"
-  />
+  <div class="interval clr-col-6 pl-0">
+    <span class="interval__prefix">
+      {{ localization.scheduledTasks.repeatEvery }}
+    </span>
+
+    <label
+      :class="[
+        'tooltip tooltip-validation tooltip-xs tooltip-top-left',
+        timeIntervalErrorText && 'invalid',
+      ]"
+      for="frequency-time-interval"
+    >
+      <input
+        id="frequency-time-interval"
+        v-model="modelFrequencyLocal.frg_interval"
+        data-id="frequency-time-interval-input"
+        type="text"
+        @input="onInitTimeIntervalValidation"
+        @blur="onInitTimeIntervalValidation"
+      />
+
+      <span class="tooltip-content">
+        {{ timeIntervalErrorText }}
+      </span>
+    </label>
+
+    <span class="interval__suffix">
+      {{ intervalSuffixLabel }}
+    </span>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -16,25 +39,17 @@ import {
   validateField,
 } from '~/components/common/pages/scheduledTasks/modals/common/frequency/lib/utils'
 
-const modelFrequencyLocal = defineModel<UI_I_ScheduleNewTasksForm>({
-  required: true,
-})
 const props = defineProps<{
   type: string
 }>()
+const modelFrequencyLocal = defineModel<UI_I_ScheduleNewTasksForm>({
+  required: true,
+})
 
 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 isInitTimeIntervalValidation = ref<boolean>(false)
-const onInitValidation = (): void => {
+const onInitTimeIntervalValidation = (): void => {
   isInitTimeIntervalValidation.value = true
 }
 
@@ -66,3 +81,22 @@ const intervalSuffixLabel = computed<string>(() => {
   )
 })
 </script>
+
+<style lang="scss" scoped>
+@import 'bfg-common/assets/scss/common/mixins.scss';
+.interval {
+  @include flex($align: center);
+  margin-top: 10px;
+  &__prefix {
+    white-space: nowrap;
+  }
+  .tooltip {
+    & > .tooltip-content {
+      width: 10rem;
+    }
+  }
+  input {
+    width: 70px;
+  }
+}
+</style>

package/components/common/pages/scheduledTasks/modals/common/frequency/lib/utils.ts

@@ -74,7 +74,7 @@ export const validateField = (
     return localization.common.theValueTooSmall
   }
 
-  if (String(value).length > 3) {
+  if (value.length > 3) {
     return localization.common.theValueTooLarge
   }
   // Если значение не является цифрой

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

@@ -1,13 +1,107 @@
 <template>
-  <component
-    :is="currentComponent"
-    v-model="model"
-    :frequency-monthly-mode="frequencyMonthlyMode"
-    :frequency-on-ordinal-number="frequencyOnOrdinalNumber"
-    :frequency-on-weeks-days="frequencyOnWeeksDays"
-    :type="type"
-    @vue:mounted="onSetDefaultDateTime"
-  />
+  <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>
 </template>
 
 <script lang="ts" setup>
@@ -15,40 +109,30 @@ 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 {
-  frequencyMonthlyModeFunc,
-  frequencyOnWeeksDaysFunc,
   frequencyOnOrdinalNumberFunc,
+  frequencyOnWeeksDaysFunc,
 } 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
 }>()
 
-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 model = defineModel<UI_I_ScheduleNewTasksForm>({ required: true })
 
-const frequencyMonthlyMode = computed<UI_I_SelectInputItem[]>(() => {
-  return frequencyMonthlyModeFunc(localization.value)
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const frequencyOnWeeksDays = computed<UI_I_SelectInputItem[]>(() => {
+  return frequencyOnWeeksDaysFunc(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'
@@ -90,9 +174,10 @@ watch(
   { immediate: true }
 )
 
-const onSetDefaultDateTime = () => {
-  if (props.type !== 'once') return
-
+onMounted(() => {
+  props.type === 'once' && setDefaultDateTime()
+})
+const setDefaultDateTime = () => {
   model.value.frg_on_time = $formattedDatetime(new Date(), {
     formatDate: 'yyyy-MM-dd',
     separator: ' ',
@@ -100,3 +185,58 @@ const onSetDefaultDateTime = () => {
   })
 }
 </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,23 +1,6 @@
 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/SelectWeek.vue

@@ -1,5 +1,18 @@
 <template>
-  <component :is="currentComponent" :tabs="tabs" @select-day="onSelectDay" />
+  <!--  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>
 </template>
 
 <script lang="ts" setup>
@@ -13,22 +26,6 @@ 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)
@@ -44,6 +41,10 @@ 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) => {
@@ -55,3 +56,13 @@ watch(
   }
 )
 </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/lib/config/weekOptions.ts

@@ -1,25 +1,55 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-import { UI_I_SelectWeekDayTab } from '~/components/common/pages/scheduledTasks/modals/common/frequency/on/selectWeek/lib/models/interfaces'
-
-const WEEK_DAYS_CONFIG = [
-  { value: 1, newKey: 'weekMon', oldKey: 'weekM', testId: 'week-m-value' },
-  { value: 2, newKey: 'weekTue', oldKey: 'weekT', testId: 'week-t-value' },
-  { value: 3, newKey: 'weekWed', oldKey: 'weekW', testId: 'week-w-value' },
-  { value: 4, newKey: 'weekThu', oldKey: 'weekTh', testId: 'week-th-value' },
-  { value: 5, newKey: 'weekFri', oldKey: 'weekF', testId: 'week-f-value' },
-  { value: 6, newKey: 'weekSat', oldKey: 'weekS', testId: 'week-s-value' },
-  { value: 0, newKey: 'weekSun', oldKey: 'weekSu', testId: 'week-su-value' },
-]
 
 export const weekDaysFunc = (
   localization: UI_I_Localization,
-  selectedWeeks: number[],
-  isNewView: boolean
-): UI_I_SelectWeekDayTab[] => {
-  return WEEK_DAYS_CONFIG.map((day) => ({
-    name: localization.common[isNewView ? day.newKey : day.oldKey],
-    value: day.value,
-    isActive: selectedWeeks.includes(day.value),
-    testId: day.testId,
-  }))
+  selectedWeeks: number[]
+): any => {
+  return [
+    {
+      name: localization.common.weekM,
+      value: 1,
+      isActive: checkIsActiveDay(1, selectedWeeks),
+      testId: 'week-m-value',
+    },
+    {
+      name: localization.common.weekT,
+      value: 2,
+      isActive: checkIsActiveDay(2, selectedWeeks),
+      testId: 'week-t-value',
+    },
+    {
+      name: localization.common.weekW,
+      value: 3,
+      isActive: checkIsActiveDay(3, selectedWeeks),
+      testId: 'week-w-value',
+    },
+    {
+      name: localization.common.weekTh,
+      value: 4,
+      isActive: checkIsActiveDay(4, selectedWeeks),
+      testId: 'week-th-value',
+    },
+    {
+      name: localization.common.weekF,
+      value: 5,
+      isActive: checkIsActiveDay(5, selectedWeeks),
+      testId: 'week-f-value',
+    },
+    {
+      name: localization.common.weekS,
+      value: 6,
+      isActive: checkIsActiveDay(6, selectedWeeks),
+      testId: 'week-s-value',
+    },
+    {
+      name: localization.common.weekSu,
+      value: 0,
+      isActive: checkIsActiveDay(0, selectedWeeks),
+      testId: 'week-su-value',
+    },
+  ]
+}
+
+const checkIsActiveDay = (value: number, weeks: number[]): boolean => {
+  return !!weeks?.includes(value)
 }

package/components/common/pages/scheduledTasks/modals/common/frequency/startOn/StartOn.vue

@@ -1,9 +1,28 @@
 <template>
-  <component
-    :is="currentComponent"
-    v-model="modelFrequencyLocal"
-    @vue:mounted="onSetDefaultDateTime"
-  />
+  <div class="start-on">
+    <label class="clr-control-label clr-col-2 pl-0 start-on__label">
+      {{ localization.scheduledTasks.startOn }}
+    </label>
+
+    <label
+      :class="[
+        'tooltip tooltip-validation tooltip-xs tooltip-top-left',
+        schedulerStartOnErrorText && 'invalid',
+      ]"
+      for="frequency-start-on-date"
+    >
+      <input
+        id="frequency-start-on-date"
+        v-model.lazy="modelFrequencyLocal.frg_start_on_time"
+        data-id="frequency-start-on-date-input"
+        type="datetime-local"
+      />
+
+      <span class="tooltip-content">
+        {{ schedulerStartOnErrorText }}
+      </span>
+    </label>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -15,17 +34,10 @@ const modelFrequencyLocal = defineModel<UI_I_ScheduleNewTasksForm>({
   required: true,
 })
 
-const localization = computed<UI_I_Localization>(() => useLocal())
 const { $formattedDatetime }: any = useNuxtApp()
-const { $store }: any = useNuxtApp()
-// const { $formattedDate, $isDate, $getUnixByDate }: any = useNuxtApp()
 
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./New.vue'))
-    : defineAsyncComponent(() => import('./Old.vue'))
-)
+const localization = computed<UI_I_Localization>(() => useLocal())
+// const { $formattedDate, $isDate, $getUnixByDate }: any = useNuxtApp()
 
 const schedulerStartOnErrorText = computed<string>(() => {
   return !modelFrequencyLocal.value.frg_start_on_time
@@ -43,7 +55,10 @@ watch(
   { immediate: true }
 )
 
-const onSetDefaultDateTime = () => {
+onMounted(() => {
+  setDefaultDateTime()
+})
+const setDefaultDateTime = () => {
   modelFrequencyLocal.value.frg_start_on_time = $formattedDatetime(new Date(), {
     formatDate: 'yyyy-MM-dd',
     separator: ' ',
@@ -51,3 +66,24 @@ const onSetDefaultDateTime = () => {
   })
 }
 </script>
+
+<style lang="scss" scoped>
+@import 'bfg-common/assets/scss/common/mixins.scss';
+.start-on {
+  @include flex($align: center);
+  margin-top: 10px;
+  &__select-input {
+    :deep(.select-input__label) {
+      font-weight: 400;
+    }
+    :deep(.select) {
+      max-width: 80px !important;
+    }
+  }
+}
+.tooltip {
+  & > .tooltip-content {
+    width: 200px;
+  }
+}
+</style>