bfg-common 1.5.440 → 1.5.441

package/components/common/pages/scheduledTasks/modals/common/newTaskForm/NewTaskForm.vue

@@ -1,293 +1,293 @@
-<template>
-  <form class="form" @submit.prevent>
-    <section>
-      <div class="clr-form-control clr-row">
-        <label for="" class="clr-control-label clr-col-md-3">
-          {{ localization.common.taskName }}
-        </label>
-
-        <label
-          :class="[
-            'clr-control-container tooltip tooltip-validation tooltip-xs tooltip-bottom-left clr-col-md-8',
-            userNameErrorText && 'invalid',
-          ]"
-        >
-          <input
-            id="schedule-task-name-field"
-            v-model="model.task_name"
-            data-id="schedule-task-name-field"
-            type="text"
-            class="clr-input"
-            @input="onInitValidation(['taskName'])"
-            @blur="onInitValidation(['taskName'])"
-          />
-          <span class="tooltip-content">
-            {{ userNameErrorText }}
-          </span>
-        </label>
-      </div>
-
-      <div class="clr-form-control clr-row">
-        <label for="" class="clr-control-label clr-col-md-3">
-          {{ localization.common.description }}
-        </label>
-
-        <textarea
-          id="description"
-          v-model="model.description"
-          data-id="admin-create-user-description-field"
-          rows="3"
-          class="clr-col-md-8"
-        ></textarea>
-      </div>
-
-      <div class="clr-form-control clr-row target">
-        <label for="" class="clr-control-label clr-col-md-3">
-          {{ localization.common.target }}
-        </label>
-
-        <div class="form__target">
-          <span class="vsphere-icon-vm"></span>
-          {{ props.target }}
-        </div>
-      </div>
-
-      <div class="clr-form-control clr-row switch">
-        <label class="clr-control-label clr-col-md-3">
-          {{ localization.common.active }}
-        </label>
-
-        <input
-          id="scheduled-task-active-switch-input"
-          v-model="model.toggle"
-          data-id="scheduled-task-active-switch-input"
-          type="checkbox"
-          class="switch"
-        />
-      </div>
-
-      <common-select-input
-        v-model="model.frequency"
-        :label="localization.common.run"
-        :data="frequencyMethodOptions"
-        class="clr-form-control run"
-      >
-        <template #options="{ value }">
-          <common-pages-scheduled-tasks-modals-common-frequency
-            v-model="model"
-            :type="value"
-          />
-        </template>
-      </common-select-input>
-
-      <div class="clr-form-control clr-row email">
-        <label class="clr-control-label clr-col-md-3">
-          {{ localization.common.emailNotificationUponCompletion }}
-        </label>
-
-        <textarea
-          v-model="model.ntfn_target"
-          data-id="schedule-task-email-completion-field"
-          placeholder="example1@email.com,example2@email.com"
-          rows="3"
-          class="clr-col-md-9"
-        ></textarea>
-      </div>
-    </section>
-  </form>
-</template>
-
-<script lang="ts" setup>
-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/newTaskForm/lib/models/interfaces'
-import type { UI_T_FrequencyType } from '~/components/common/pages/scheduledTasks/modals/common/frequency/lib/models/types'
-import * as cron from '~/components/common/pages/scheduledTasks/modals/common/newTaskForm/lib/utils'
-import { frequencyMethodFunc } from '~/components/common/pages/scheduledTasks/modals/common/frequency/lib/config/frequencyOptions'
-
-const props = defineProps<{
-  target: string
-}>()
-const model = defineModel<UI_I_ScheduleNewTasksForm>({ required: true })
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const initValidationFields = ref<UI_I_InitialValidationFields>({
-  taskName: false,
-})
-const onInitValidation = (types: string[]): void => {
-  types.forEach((type) => (initValidationFields.value[type] = true))
-}
-const userNameErrorText = computed<string>(() => {
-  if (!initValidationFields.value.taskName) return ''
-
-  model.value.task_name = model.value.task_name.replace(/^\s+/, '')
-
-  return !model.value.task_name ? localization.value.common.fieldRequired : ''
-})
-
-const frequencyMethodOptions = computed<UI_I_SelectInputItem[]>(() =>
-  frequencyMethodFunc(localization.value)
-)
-
-watch(
-  model,
-  (newValue: UI_I_ScheduleNewTasksForm) => {
-    newValue.cron = generateCronExpression(newValue.frequency, newValue)
-  },
-  { deep: true }
-)
-
-const generateCronExpression = (
-  runType: UI_T_FrequencyType,
-  interval: UI_I_ScheduleNewTasksForm
-): string => {
-  let cronExpression
-
-  // Генерируем cron-выражение на основе runType
-  switch (runType) {
-    case 'once':
-      const timestamp = Math.floor(
-        new Date(interval.frg_on_time).getTime() / 1000
-      )
-      cronExpression = `* * * * * ${timestamp}:0-0-0-0:once`
-      break
-    case 'after-startup':
-      const suffixDelay =
-        interval.frg_after_startup === 0 ? '' : `-${interval.frg_after_startup}`
-      cronExpression = `* * * * * after_procurator_startup${suffixDelay}` // Выполняется после запуска procurator_startup с задержой N минут
-      break
-    case 'hour':
-      cronExpression = cron.generateHourlyCronExpression(interval)
-      break
-    case 'day':
-      cronExpression = cron.generateDailyCronExpression(interval)
-      break
-    case 'week':
-      cronExpression = cron.generateWeeklyCronExpression(interval)
-      break
-    case 'month':
-      cronExpression = cron.generateMonthlyCronExpression(interval)
-      break
-    default:
-      cronExpression = '* * * * *'
-  }
-
-  return cronExpression
-}
-</script>
-
-<style lang="scss" scoped>
-@import '/assets/scss/common/mixins.scss';
-
-.clr-form-control {
-  @include flex($dir: row);
-  margin-top: 0;
-  margin-bottom: 12px;
-  &.switch {
-    .clr-control-label {
-      text-transform: capitalize;
-    }
-  }
-  .clr-control-label {
-    width: 100%;
-    padding: 0 12px;
-    font-weight: 400;
-    margin-bottom: 5px;
-  }
-  &.run,
-  &.target {
-    margin-top: 25px;
-  }
-  &.run {
-    align-items: flex-start;
-    :deep(.clr-control-label) {
-      font-weight: 400;
-      flex: 0 0 25%;
-      max-width: 25%;
-    }
-    :deep(.select-input__inner) {
-      flex: 0 0 75%;
-      max-width: 75%;
-    }
-  }
-  &.email {
-    margin-top: 55px;
-  }
-}
-.clr-control-container {
-  min-height: 48px;
-  padding: 0;
-  &.tooltip.tooltip-bottom-left > .tooltip-content {
-    width: max-content;
-    margin-top: 0;
-  }
-  input {
-    width: 100%;
-  }
-}
-
-.form {
-  &__target {
-    @include flex($align: center);
-    & > span {
-      margin-right: 10px;
-    }
-  }
-}
-/* TODO нужно перенести в глобально */
-input[type='checkbox'] {
-  --active: var(--checkbox-value-active-color);
-  --active-inner: var(--checkbox-mark-color);
-  --border: var(--checkbox-mark-color);
-  --background: var(--checkbox-mark-background-color);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  height: 20px;
-  outline: none;
-  display: inline-block;
-  vertical-align: top;
-  position: relative;
-  margin: 0;
-  cursor: pointer;
-  border: 1px solid var(--bc, var(--border));
-  background: var(--b, var(--background));
-  transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
-  &:after {
-    content: '';
-    display: block;
-    left: 0;
-    top: 0;
-    position: absolute;
-    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease),
-      opacity var(--d-o, 0.2s);
-  }
-  &:checked {
-    --b: var(--active);
-    --bc: var(--active);
-    --d-o: 0.3s;
-    --d-t: 0.6s;
-    --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
-  }
-  &.switch {
-    width: 35px;
-    border-radius: 11px;
-    &:after {
-      left: 2px;
-      top: 2px;
-      bottom: 2px;
-      border-radius: 50%;
-      width: 14px;
-      height: 14px;
-      border: 1px solid var(--bc, var(--border));
-      background: var(--ab, var(--border));
-      transform: translateX(var(--x, 0));
-    }
-    &:checked {
-      --ab: var(--active-inner);
-      --x: 14px;
-    }
-  }
-}
-</style>
+<template>
+  <form class="form" @submit.prevent>
+    <section>
+      <div class="clr-form-control clr-row">
+        <label for="" class="clr-control-label clr-col-md-3">
+          {{ localization.common.taskName }}
+        </label>
+
+        <label
+          :class="[
+            'clr-control-container tooltip tooltip-validation tooltip-xs tooltip-bottom-left clr-col-md-8',
+            userNameErrorText && 'invalid',
+          ]"
+        >
+          <input
+            id="schedule-task-name-field"
+            v-model="model.task_name"
+            data-id="schedule-task-name-field"
+            type="text"
+            class="clr-input"
+            @input="onInitValidation(['taskName'])"
+            @blur="onInitValidation(['taskName'])"
+          />
+          <span class="tooltip-content">
+            {{ userNameErrorText }}
+          </span>
+        </label>
+      </div>
+
+      <div class="clr-form-control clr-row">
+        <label for="" class="clr-control-label clr-col-md-3">
+          {{ localization.common.description }}
+        </label>
+
+        <textarea
+          id="description"
+          v-model="model.description"
+          data-id="admin-create-user-description-field"
+          rows="3"
+          class="clr-col-md-8"
+        ></textarea>
+      </div>
+
+      <div class="clr-form-control clr-row target">
+        <label for="" class="clr-control-label clr-col-md-3">
+          {{ localization.common.target }}
+        </label>
+
+        <div class="form__target">
+          <span class="vsphere-icon-vm"></span>
+          {{ props.target }}
+        </div>
+      </div>
+
+      <div class="clr-form-control clr-row switch">
+        <label class="clr-control-label clr-col-md-3">
+          {{ localization.common.active }}
+        </label>
+
+        <input
+          id="scheduled-task-active-switch-input"
+          v-model="model.toggle"
+          data-id="scheduled-task-active-switch-input"
+          type="checkbox"
+          class="switch"
+        />
+      </div>
+
+      <common-select-input
+        v-model="model.frequency"
+        :label="localization.common.run"
+        :data="frequencyMethodOptions"
+        class="clr-form-control run"
+      >
+        <template #options="{ value }">
+          <common-pages-scheduled-tasks-modals-common-frequency
+            v-model="model"
+            :type="value"
+          />
+        </template>
+      </common-select-input>
+
+      <div class="clr-form-control clr-row email">
+        <label class="clr-control-label clr-col-md-3">
+          {{ localization.common.emailNotificationUponCompletion }}
+        </label>
+
+        <textarea
+          v-model="model.ntfn_target"
+          data-id="schedule-task-email-completion-field"
+          placeholder="example1@email.com,example2@email.com"
+          rows="3"
+          class="clr-col-md-9"
+        ></textarea>
+      </div>
+    </section>
+  </form>
+</template>
+
+<script lang="ts" setup>
+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/newTaskForm/lib/models/interfaces'
+import type { UI_T_FrequencyType } from '~/components/common/pages/scheduledTasks/modals/common/frequency/lib/models/types'
+import * as cron from '~/components/common/pages/scheduledTasks/modals/common/newTaskForm/lib/utils'
+import { frequencyMethodFunc } from '~/components/common/pages/scheduledTasks/modals/common/frequency/lib/config/frequencyOptions'
+
+const props = defineProps<{
+  target: string
+}>()
+const model = defineModel<UI_I_ScheduleNewTasksForm>({ required: true })
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const initValidationFields = ref<UI_I_InitialValidationFields>({
+  taskName: false,
+})
+const onInitValidation = (types: string[]): void => {
+  types.forEach((type) => (initValidationFields.value[type] = true))
+}
+const userNameErrorText = computed<string>(() => {
+  if (!initValidationFields.value.taskName) return ''
+
+  model.value.task_name = model.value.task_name.replace(/^\s+/, '')
+
+  return !model.value.task_name ? localization.value.common.fieldRequired : ''
+})
+
+const frequencyMethodOptions = computed<UI_I_SelectInputItem[]>(() =>
+  frequencyMethodFunc(localization.value)
+)
+
+watch(
+  model,
+  (newValue: UI_I_ScheduleNewTasksForm) => {
+    newValue.cron = generateCronExpression(newValue.frequency, newValue)
+  },
+  { deep: true }
+)
+
+const generateCronExpression = (
+  runType: UI_T_FrequencyType,
+  interval: UI_I_ScheduleNewTasksForm
+): string => {
+  let cronExpression
+
+  // Генерируем cron-выражение на основе runType
+  switch (runType) {
+    case 'once':
+      const timestamp = Math.floor(
+        new Date(interval.frg_on_time).getTime() / 1000
+      )
+      cronExpression = `* * * * * ${timestamp}:0-0-0-0:once`
+      break
+    case 'after-startup':
+      const suffixDelay =
+        interval.frg_after_startup === 0 ? '' : `-${interval.frg_after_startup}`
+      cronExpression = `* * * * * after_procurator_startup${suffixDelay}` // Выполняется после запуска procurator_startup с задержой N минут
+      break
+    case 'hour':
+      cronExpression = cron.generateHourlyCronExpression(interval)
+      break
+    case 'day':
+      cronExpression = cron.generateDailyCronExpression(interval)
+      break
+    case 'week':
+      cronExpression = cron.generateWeeklyCronExpression(interval)
+      break
+    case 'month':
+      cronExpression = cron.generateMonthlyCronExpression(interval)
+      break
+    default:
+      cronExpression = '* * * * *'
+  }
+
+  return cronExpression
+}
+</script>
+
+<style lang="scss" scoped>
+@import '/assets/scss/common/mixins.scss';
+
+.clr-form-control {
+  @include flex($dir: row);
+  margin-top: 0;
+  margin-bottom: 12px;
+  &.switch {
+    .clr-control-label {
+      text-transform: capitalize;
+    }
+  }
+  .clr-control-label {
+    width: 100%;
+    padding: 0 12px;
+    font-weight: 400;
+    margin-bottom: 5px;
+  }
+  &.run,
+  &.target {
+    margin-top: 25px;
+  }
+  &.run {
+    align-items: flex-start;
+    :deep(.clr-control-label) {
+      font-weight: 400;
+      flex: 0 0 25%;
+      max-width: 25%;
+    }
+    :deep(.select-input__inner) {
+      flex: 0 0 75%;
+      max-width: 75%;
+    }
+  }
+  &.email {
+    margin-top: 55px;
+  }
+}
+.clr-control-container {
+  min-height: 48px;
+  padding: 0;
+  &.tooltip.tooltip-bottom-left > .tooltip-content {
+    width: max-content;
+    margin-top: 0;
+  }
+  input {
+    width: 100%;
+  }
+}
+
+.form {
+  &__target {
+    @include flex($align: center);
+    & > span {
+      margin-right: 10px;
+    }
+  }
+}
+/* TODO нужно перенести в глобально */
+input[type='checkbox'] {
+  --active: var(--checkbox-value-active-color);
+  --active-inner: var(--checkbox-mark-color);
+  --border: var(--checkbox-mark-color);
+  --background: var(--checkbox-mark-background-color);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  height: 20px;
+  outline: none;
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+  margin: 0;
+  cursor: pointer;
+  border: 1px solid var(--bc, var(--border));
+  background: var(--b, var(--background));
+  transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
+  &:after {
+    content: '';
+    display: block;
+    left: 0;
+    top: 0;
+    position: absolute;
+    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease),
+      opacity var(--d-o, 0.2s);
+  }
+  &:checked {
+    --b: var(--active);
+    --bc: var(--active);
+    --d-o: 0.3s;
+    --d-t: 0.6s;
+    --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
+  }
+  &.switch {
+    width: 35px;
+    border-radius: 11px;
+    &:after {
+      left: 2px;
+      top: 2px;
+      bottom: 2px;
+      border-radius: 50%;
+      width: 14px;
+      height: 14px;
+      border: 1px solid var(--bc, var(--border));
+      background: var(--ab, var(--border));
+      transform: translateX(var(--x, 0));
+    }
+    &:checked {
+      --ab: var(--active-inner);
+      --x: 14px;
+    }
+  }
+}
+</style>

package/components/common/pages/scheduledTasks/modals/common/newTaskForm/lib/models/interfaces.ts

@@ -1,3 +1,3 @@
-export interface UI_I_InitialValidationFields {
-  taskName: boolean
-}
+export interface UI_I_InitialValidationFields {
+  taskName: boolean
+}