bfg-common 1.6.95 → 1.6.97

package/components/common/pages/scheduledTasks/modals/common/frequency/on/selectWeek/lib/config/weekOptions.ts

@@ -1,55 +1,25 @@
 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[]
-): 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)
+  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,
+  }))
 }

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

@@ -0,0 +1,83 @@
+<template>
+  <div
+    class="frequency-start-on"
+    :class="props.templateViewMode === 'horizontal' && 'horizontal'"
+  >
+    <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'
+import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
+
+const modelFrequencyLocal = defineModel<UI_I_ScheduleNewTasksForm>({
+  required: true,
+})
+const props = defineProps<{
+  templateViewMode: 'horizontal' | 'vertical'
+}>()
+
+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;
+  }
+
+  &.horizontal {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 16px;
+    border-top: 0;
+    padding-top: 0;
+
+    h2 {
+      font-family: 'Inter', sans-serif;
+      width: 100%;
+      max-width: 240px;
+      display: flex;
+      align-items: center;
+      column-gap: 8px;
+      color: var(--wizard-content-title);
+      font-size: 13px;
+      font-weight: 400;
+      line-height: 20px;
+      margin-bottom: 0;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    :deep(.ui-input-with-datepicker) {
+      width: 100%;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,77 @@
+<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/frequency/startOn/StartOn.vue

@@ -1,28 +1,11 @@
 <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-view-mode) используется только для нового интерфейса -->
+  <component
+    :is="currentComponent"
+    v-model="modelFrequencyLocal"
+    :template-view-mode="props.templateViewMode"
+    @vue:mounted="onSetDefaultDateTime"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -33,12 +16,22 @@ import { validateDate } from '~/components/common/pages/scheduledTasks/modals/co
 const modelFrequencyLocal = defineModel<UI_I_ScheduleNewTasksForm>({
   required: true,
 })
-
-const { $formattedDatetime }: any = useNuxtApp()
+const props = defineProps<{
+  templateViewMode: 'horizontal' | 'vertical'
+}>()
 
 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 schedulerStartOnErrorText = computed<string>(() => {
   return !modelFrequencyLocal.value.frg_start_on_time
     ? localization.value.common.fieldRequired
@@ -55,10 +48,7 @@ watch(
   { immediate: true }
 )
 
-onMounted(() => {
-  setDefaultDateTime()
-})
-const setDefaultDateTime = () => {
+const onSetDefaultDateTime = () => {
   modelFrequencyLocal.value.frg_start_on_time = $formattedDatetime(new Date(), {
     formatDate: 'yyyy-MM-dd',
     separator: ' ',
@@ -66,24 +56,3 @@ const setDefaultDateTime = () => {
   })
 }
 </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

@@ -0,0 +1,338 @@
+<template>
+  <form class="form" @submit.prevent>
+    <h2 v-if="!isHideFormLeftCol" class="task-details">
+      {{ localization.scheduledTasks.taskDetails }}
+    </h2>
+    <section class="form__section" :class="!isHideFormLeftCol && 'horizontal'">
+      <!-- Используем, когда форма применяется внутри модалки -->
+      <div
+        v-if="isHideFormLeftCol"
+        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>
+
+      <div class="form__row">
+        <div v-if="!isHideFormLeftCol" class="form__row-title">
+          <span class="text-ellipsis">
+            {{ localization.common.name }}
+          </span>
+        </div>
+        <div class="form__row-content">
+          <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"
+            @input="onInitValidation(['taskName'])"
+          />
+        </div>
+      </div>
+
+      <div class="form__row description">
+        <div v-if="!isHideFormLeftCol" class="form__row-title">
+          <span class="text-ellipsis">
+            {{ textareaLabel }}
+          </span>
+        </div>
+        <div class="form__row-content">
+          <ui-textarea
+            id="description"
+            v-model="model.description"
+            :label="textareaLabel"
+            test-id="schedule-task-description-field"
+            height="84"
+            class="create-role__description"
+          />
+        </div>
+      </div>
+
+      <!-- Используем, когда форма применяется внутри визарда -->
+      <div v-if="!isHideFormLeftCol" class="form__row">
+        <div class="form__row-title">
+          <span class="text-ellipsis">
+            {{ localization.common.target }}
+          </span>
+        </div>
+        <div class="flex items-center form__row-content">
+          <span class="icon vsphere-icon-vm mr-2"></span>
+          <span class="text">{{ props.target }}</span>
+        </div>
+      </div>
+
+      <!-- Используем, когда форма применяется внутри визарда -->
+      <div v-if="!isHideFormLeftCol" class="form__row">
+        <div class="form__row-title">
+          <span class="text-ellipsis">
+            {{ localization.zabbix.active }}
+          </span>
+        </div>
+        <div class="form__row-content">
+          <ui-switch
+            v-model="model.toggle"
+            test-id="scheduled-task-active-switch-input"
+          />
+        </div>
+      </div>
+
+      <h2>{{ localization.common.run }}</h2>
+      <div class="form__row" :class="isHideFormLeftCol && 'vertical'">
+        <div v-if="!isHideFormLeftCol" class="form__row-title">
+          <span class="text-ellipsis">
+            {{ localization.scheduledTasks.frequency }}
+          </span>
+        </div>
+        <div
+          class="form__row-content frequency-run"
+          :class="{
+            'grid-single-col': !model.frequency || model.frequency === 'once',
+          }"
+        >
+          <div>
+            <h2 v-if="isHideFormLeftCol" 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%"
+            />
+          </div>
+
+          <common-pages-scheduled-tasks-modals-common-frequency
+            v-if="isHideFormLeftCol && model.frequency"
+            v-model="model"
+            :type="model.frequency"
+            :template-view-mode="props.templateViewMode"
+          />
+        </div>
+      </div>
+
+      <!-- Используем, когда форма применяется внутри визарда -->
+      <div
+        v-if="!isHideFormLeftCol && model.frequency"
+        class="form__row horizontal"
+      >
+        <common-pages-scheduled-tasks-modals-common-frequency
+          v-if="model.frequency"
+          v-model="model"
+          :type="model.frequency"
+          :template-view-mode="props.templateViewMode"
+        />
+      </div>
+
+      <h2>{{ emailCompletionLabel }}</h2>
+      <div class="form__row email">
+        <div v-if="!isHideFormLeftCol" class="form__row-title">
+          <span class="text-ellipsis">
+            {{ emailTextareaLabel }}
+          </span>
+        </div>
+        <div class="form__row-content">
+          <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"
+          />
+        </div>
+      </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 isHideFormLeftCol = computed<boolean>(
+  () => props.templateViewMode === 'vertical'
+)
+
+const onInitValidation = (types: string[]): void => {
+  emits('init-validation', types)
+}
+
+const textareaLabel = computed<string>(() => {
+  const { description, optional } = localization.value.common
+  return `${description} (${optional})`
+})
+const emailTextareaLabel = computed<string>(() => {
+  const { common, scheduledTasks } = localization.value
+
+  return `${scheduledTasks.emails} (${common.optional})`
+})
+
+const emailCompletionLabel = computed<string>(() => {
+  const { emailNotificationUponCompletion, optional } =
+    localization.value.common
+
+  return isHideFormLeftCol.value
+    ? `${emailNotificationUponCompletion} (${optional})`
+    : emailNotificationUponCompletion
+})
+
+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 {
+  &__section {
+    display: flex;
+    flex-direction: column;
+    row-gap: 24px;
+    &.horizontal {
+      row-gap: 16px;
+    }
+  }
+
+  &__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;
+    }
+  }
+
+  h2 {
+    font-family: 'Inter', sans-serif;
+    color: var(--title-form-first-color);
+    font-size: 16px;
+    font-weight: 500;
+    //margin: -8px 0;
+    &.task-details {
+      margin: 0 0 16px 0;
+    }
+    &.frequency {
+      font-size: 14px;
+      margin-bottom: 12px;
+    }
+  }
+
+  &__row {
+    width: 100%;
+    min-height: 36px;
+    display: flex;
+    align-items: center;
+    column-gap: 16px;
+    &.email,
+    &.description {
+      align-items: baseline;
+    }
+    .horizontal &:not(:last-child) {
+      border-bottom: 1px solid var(--wizard-content-line);
+      padding-bottom: 16px;
+    }
+    &.horizontal {
+      flex-direction: column;
+      align-items: inherit;
+      row-gap: 16px;
+      & > :deep(div:not(:last-child)) {
+        border-bottom: 1px solid var(--wizard-content-line);
+        padding-bottom: 16px;
+      }
+    }
+
+    &-title {
+      max-width: 240px;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      column-gap: 8px;
+      color: var(--wizard-content-title);
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 20px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    &-content {
+      max-width: 480px;
+      width: 100%;
+      color: var(--wizard-content-value);
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 20px;
+      letter-spacing: 0;
+      vertical-align: middle;
+    }
+
+    &.vertical {
+      .frequency-run {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: 16px;
+        &.grid-single-col {
+          grid-template-columns: 1fr;
+          column-gap: 0;
+        }
+      }
+    }
+  }
+}
+</style>