bfg-common 1.5.921 → 1.5.923

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

@@ -1,234 +0,0 @@
-<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/selectWeek/New.vue

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

@@ -1,44 +0,0 @@
-<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/startOn/New.vue

@@ -1,46 +0,0 @@
-<template>
-  <div class="frequency-start-on">
-    <h2>{{ localization.common.start }}</h2>
-    <ui-input-with-datepicker
-      id="frequency-start-on-date"
-      v-model="modelFrequencyLocal.frg_start_on_time"
-      :format="datepickerFormat"
-      test-id="frequency-start-on-date-input"
-      time-format="12"
-      :error="''"
-      :error-timepicker="''"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_ScheduleNewTasksForm } from '~/components/common/pages/scheduledTasks/modals/lib/models/interfaces'
-import { getUiDatepickerFormatByLanguage } from '~/lib/utils/date'
-
-const modelFrequencyLocal = defineModel<UI_I_ScheduleNewTasksForm>({
-  required: true,
-})
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const datepickerFormat = computed<string>(
-  () => getUiDatepickerFormatByLanguage('en_US') // TODO из пропс должен приходить язык
-)
-</script>
-
-<style lang="scss" scoped>
-.frequency-start-on {
-  grid-column: span 2;
-  border-top: 1px solid var(--horizontal-line);
-  padding-top: 16px;
-  h2 {
-    font-family: 'Inter', sans-serif;
-    color: var(--title-form-first-color);
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 18px;
-    margin-bottom: 12px;
-  }
-}
-</style>

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

@@ -1,77 +0,0 @@
-<template>
-  <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>
-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 } from '~/components/common/pages/scheduledTasks/modals/common/frequency/lib/utils'
-
-const modelFrequencyLocal = defineModel<UI_I_ScheduleNewTasksForm>({
-  required: true,
-})
-
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-// const { $formattedDate, $isDate, $getUnixByDate }: any = useNuxtApp()
-
-const schedulerStartOnErrorText = computed<string>(() => {
-  return !modelFrequencyLocal.value.frg_start_on_time
-    ? localization.value.common.fieldRequired
-    : validateDate(
-        localization.value,
-        modelFrequencyLocal.value.frg_start_on_time
-      )
-})
-watch(
-  schedulerStartOnErrorText,
-  (newValue: string) => {
-    modelFrequencyLocal.value.isValid = !!newValue
-  },
-  { immediate: true }
-)
-</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>

package/components/common/pages/scheduledTasks/modals/common/taskForm/New.vue

@@ -1,194 +0,0 @@
-<template>
-  <form class="form" @submit.prevent>
-    <section class="flex flex-direction-column row-gap-6">
-      <div class="flex justify-between column-gap-4 form__target">
-        <div class="flex items-center column-gap-2 text-ellipsis">
-          <p class="text">{{ localization.common.target }}:</p>
-          <span class="icon vsphere-icon-vm"></span>
-          <span class="text">{{ props.target }}</span>
-        </div>
-        <div class="flex items-center column-gap-3">
-          <p class="text">{{ localization.common.active }}</p>
-          <ui-switch
-            v-model="model.toggle"
-            test-id="scheduled-task-active-switch-input"
-          />
-        </div>
-      </div>
-
-      <ui-input
-        id="schedule-task-name-field"
-        v-model="model.task_name"
-        :label="localization.common.taskName"
-        :error="props.taskNameErrorText"
-        test-id="schedule-task-name-field"
-        class="form__user-name"
-        @input="onInitValidation(['taskName'])"
-      />
-
-      <ui-textarea
-        id="description"
-        v-model="model.description"
-        :label="textareaLabel"
-        test-id="schedule-task-description-field"
-        height="84"
-        class="form__description"
-      />
-
-      <div class="form__run">
-        <h2>{{ localization.common.run }}</h2>
-
-        <div
-          class="form__run-frequency"
-          :class="{
-            'grid-single-col': !model.frequency || model.frequency === 'once',
-          }"
-        >
-          <div>
-            <h2 class="frequency">
-              {{ localization.scheduledTasks.frequency }}
-            </h2>
-            <ui-select
-              v-model="model.frequency"
-              :items="frequencyMethodOptionsLocal"
-              test-id="schedule-task-frequency-select"
-              :placeholder="localization.scheduledTasks.selectFrequency"
-              size="md"
-              select-width="100%"
-              class="mt-3"
-            />
-          </div>
-
-          <common-pages-scheduled-tasks-modals-common-frequency
-            v-if="model.frequency"
-            v-model="model"
-            :type="model.frequency"
-            :template-view-mode="props.templateViewMode"
-          />
-        </div>
-      </div>
-
-      <div class="form__email">
-        <h2>{{ emailCompletionLabel }}</h2>
-        <ui-textarea
-          id="email-completion"
-          v-model="model.ntfn_target"
-          placeholder="example1@email.com,example2@email.com"
-          test-id="schedule-task-email-completion-field"
-          height="84"
-          class="form__description"
-        />
-      </div>
-    </section>
-  </form>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
-import type { UI_I_ScheduleNewTasksForm } from '~/components/common/pages/scheduledTasks/modals/lib/models/interfaces'
-import type { UI_I_InitialValidationFields } from '~/components/common/pages/scheduledTasks/modals/common/taskForm/lib/models/interfaces'
-
-const model = defineModel<UI_I_ScheduleNewTasksForm>({ required: true })
-const props = defineProps<{
-  target: string
-  formValidationFields: UI_I_InitialValidationFields
-  taskNameErrorText: string
-  frequencyMethodOptions: UI_I_SelectInputItem[]
-  templateViewMode: 'horizontal' | 'vertical'
-}>()
-const emits = defineEmits<{
-  (event: 'init-validation', value: string[]): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const onInitValidation = (types: string[]): void => {
-  emits('init-validation', types)
-}
-
-const textareaLabel = computed<string>(() => {
-  const { description, optional } = localization.value.common
-  return `${description} (${optional})`
-})
-
-const emailCompletionLabel = computed<string>(() => {
-  const { emailNotificationUponCompletion, optional } =
-    localization.value.common
-  return `${emailNotificationUponCompletion} (${optional})`
-})
-
-const frequencyMethodOptionsLocal = computed<UI_I_Dropdown[]>(() =>
-  props.frequencyMethodOptions
-    .filter((frequency: UI_I_SelectInputItem) => frequency.value !== '')
-    .map((item: UI_I_SelectInputItem) => ({
-      ...item,
-      text: item.label,
-    }))
-)
-</script>
-
-<style lang="scss" scoped>
-.form {
-  &__target {
-    background-color: var(--info-block-bg);
-    border-radius: 8px;
-    padding: 12px;
-    .text {
-      font-family: 'Inter', sans-serif;
-      font-size: 13px;
-      font-weight: 400;
-      color: var(--title-form-first-color);
-    }
-    /* Target */
-    > div:first-child p.text {
-      color: #9da6ad; // for dark and light theme
-    }
-    /* Active */
-    > div:last-child p.text {
-      text-transform: Capitalize;
-    }
-
-    span.text {
-      color: var(--title-color);
-    }
-
-    .icon {
-      min-width: 20px;
-      width: 20px;
-      height: 20px;
-    }
-  }
-
-  &__run,
-  &__email {
-    border-top: 1px solid var(--horizontal-line);
-    padding-top: 16px;
-  }
-
-  &__run {
-    &-frequency {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      grid-gap: 16px;
-      &.grid-single-col {
-        grid-template-columns: 1fr;
-        column-gap: 0;
-      }
-    }
-  }
-
-  h2 {
-    font-family: 'Inter', sans-serif;
-    color: var(--title-form-first-color);
-    font-size: 16px;
-    font-weight: 500;
-    margin-bottom: 16px;
-    &.frequency {
-      font-size: 14px;
-      margin-bottom: 12px;
-    }
-  }
-}
-</style>