bfg-common 1.5.420 → 1.5.421

package/components/common/pages/backups/modals/createBackup/CreateBackup.vue

@@ -1,353 +1,353 @@
-<template>
-  <div class="create-backup">
-    <atoms-wizard
-      show
-      :wizard="wizard"
-      :selected-scheme="selectedScheme"
-      :title="title"
-      :localization="localization"
-      :test-id="testId"
-      @change-steps="onChangeSteps"
-      @hide="onHideModal"
-      @submit="onFinish"
-    >
-      <template #modalBody="{ selectedStep }">
-        <atoms-alert
-          v-show="errors.length"
-          status="alert-danger"
-          :items="errors"
-          test-id="create-backup-alert"
-          @remove="onRemoveValidationErrors"
-        />
-
-        <common-pages-scheduled-tasks-modals-common-new-task-form
-          v-show="selectedStep.id === dynamicSteps.schedulingOptions"
-          v-model="modelSchedulerTask"
-          :target="props.selectedVmName"
-          class="new-task-form"
-        />
-
-        <common-pages-backups-modals-create-backup-general
-          v-show="selectedStep.id === dynamicSteps.general"
-          v-model="model"
-        />
-
-        <common-pages-backups-modals-create-backup-disks
-          v-show="selectedStep.id === dynamicSteps.disks"
-          v-model="model"
-          :disks="props.disks"
-          :disks-loading="props.disksLoading"
-        />
-
-        <common-pages-backups-modals-create-backup-datastores
-          v-show="selectedStep.id === dynamicSteps.datastores"
-          v-model="model"
-          :datastore-table="props.datastoreTable"
-          :datastore-table-loading="props.datastoreTableLoading"
-          @change="onChangeDatastore"
-        />
-
-        <common-pages-backups-modals-create-backup-configuration
-          v-show="selectedStep.id === dynamicSteps.configuration"
-          v-model="model"
-        />
-
-        <common-ready-to-complete
-          v-show="selectedStep.id === dynamicSteps.readyComplete"
-          :data="readyToCompleteInfo"
-        />
-      </template>
-    </atoms-wizard>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_TableInfoItem } from '~/components/atoms/table/info/lib/models/interfaces'
-import type {
-  UI_I_WizardStep,
-  UI_I_ValidationReturn,
-} from '~/components/atoms/wizard/lib/models/interfaces'
-import type { UI_I_ScheduleNewTasksForm } from '~/components/common/pages/scheduledTasks/modals/lib/models/interfaces'
-import type {
-  UI_I_BackupDatastoreTable,
-  UI_I_CreateBackupForm,
-  UI_I_CreateBackupFormDiskDevice,
-} from '~/components/common/pages/backups/modals/lib/models/interfaces'
-import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
-import Wizard from '~/components/atoms/wizard/lib/utils/utils'
-import {
-  stepsSchemeInitial,
-  stepsFunc,
-  dynamicSteps,
-} from '~/components/common/pages/backups/modals/createBackup/lib/config/steps'
-import { strategyOptionsFunc } from '~/components/common/pages/backups/modals/createBackup/lib/config/strategyOptions'
-
-const model = defineModel<UI_I_CreateBackupForm>({ required: true })
-const modelSchedulerTask = defineModel<UI_I_ScheduleNewTasksForm>(
-  'schedulerForm',
-  { required: true }
-)
-
-const props = defineProps<{
-  isEdit: boolean
-  target: string
-  isScheduledTasks: boolean
-  isEditScheduledTasks: boolean
-  selectedVmName: string
-  disks: UI_I_CreateBackupFormDiskDevice[]
-  disksLoading: boolean
-  datastoreTable: UI_I_BackupDatastoreTable
-  datastoreTableLoading: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'change-step-create-backup', value: UI_I_WizardStep[]): void
-  (event: 'finish'): void
-  (event: 'hide'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const { $binary }: any = useNuxtApp()
-
-const title = computed<string>(() => {
-  const { createBackup, updateBackup, scheduleNewTasks, scheduleTaskEdit } =
-    localization.value.common
-  let result = props.isEdit ? updateBackup : createBackup
-  if (props.isScheduledTasks) {
-    const schedulerMode = props.isEditScheduledTasks
-      ? scheduleTaskEdit
-      : scheduleNewTasks
-
-    result = `${schedulerMode} (${createBackup})`
-  }
-
-  return result
-})
-
-const testId = ref<string>(props.isEdit ? 'update-backup' : 'create-backup')
-
-const wizard: Wizard = new Wizard(
-  stepsFunc(localization.value),
-  stepsSchemeInitial(props.isScheduledTasks)
-)
-
-watch(
-  modelSchedulerTask,
-  (newValue: UI_I_ScheduleNewTasksForm) => {
-    if (props.isScheduledTasks) wizard.setDisabledNextButton(newValue.isValid)
-  },
-  { immediate: true, deep: true }
-)
-
-const selectedScheme = computed<number[]>(() => wizard.selectedScheme.value)
-const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> => {
-  emits('change-step-create-backup', value)
-  wizard.changeSteps(value, validationFunc)
-}
-const validationFunc = async (
-  value: UI_I_WizardStep[],
-  currentStep: UI_I_WizardStep,
-  nextStep: UI_I_WizardStep
-): Promise<UI_I_ValidationReturn> => {
-  let stepHasError = false
-  const stepShouldStop = {
-    ifOnCurrentStep: false,
-    ifFromAnyStep: false,
-    stoppageStepId: -1,
-  }
-
-  if (
-    wizard.isValidateForStep(dynamicSteps.general, currentStep.id, nextStep.id)
-  ) {
-    const nameValidation = checkName(value)
-
-    value = nameValidation.newValue
-    stepHasError = stepHasError || nameValidation.stepHasError
-  }
-
-  if (
-    wizard.isValidateForStep(dynamicSteps.disks, currentStep.id, nextStep.id)
-  ) {
-    const validation = checkDisks(value)
-
-    value = validation.newValue
-    stepHasError = stepHasError || validation.stepHasError
-  }
-
-  if (
-    wizard.isValidateForStep(
-      dynamicSteps.datastores,
-      currentStep.id,
-      nextStep.id
-    )
-  ) {
-    const validation = checkDatastore(value)
-
-    value = validation.newValue
-    stepHasError = stepHasError || validation.stepHasError
-  }
-
-  return {
-    newValue: value,
-    stepHasError,
-    stepShouldStop,
-  }
-}
-
-const checkName = (value: UI_I_WizardStep[]): UI_I_ValidationReturn => {
-  let stepHasError = false
-
-  const isValid = !!model.value?.name
-  if (!isValid) {
-    stepHasError = wizard.setValidation(dynamicSteps.general, 'name', {
-      fieldMessage: localization.value.common.nameIsRequired,
-      alertMessage: localization.value.common.nameIsRequired,
-    })
-    showValidationErrors([localization.value.common.nameIsRequired])
-  } else if (wizard.hasMessage(dynamicSteps.general, 'name')) {
-    value = wizard.removeValidation(dynamicSteps.general, 'name', value)
-    onRemoveValidationErrors()
-  }
-
-  return {
-    stepHasError,
-    newValue: value,
-  }
-}
-
-const checkDisks = (value: UI_I_WizardStep[]): UI_I_ValidationReturn => {
-  let stepHasError = false
-
-  const isValidStores = !!model.value?.disk_devices.length
-  if (!isValidStores) {
-    stepHasError = wizard.setValidation(dynamicSteps.disks, 'disk_devices', {
-      fieldMessage: localization.value.common.diskIsRequired,
-      alertMessage: localization.value.common.diskIsRequired,
-    })
-    showValidationErrors([localization.value.common.diskIsRequired])
-  } else if (wizard.hasMessage(dynamicSteps.disks, 'disk_devices')) {
-    value = wizard.removeValidation(dynamicSteps.disks, 'disk_devices', value)
-    onRemoveValidationErrors()
-  }
-
-  return {
-    stepHasError,
-    newValue: value,
-  }
-}
-
-const checkDatastore = (value: UI_I_WizardStep[]): UI_I_ValidationReturn => {
-  let stepHasError = false
-
-  const isValidStorage = !!model.value?.backup_storage.length
-  if (!isValidStorage) {
-    stepHasError = wizard.setValidation(
-      dynamicSteps.datastores,
-      'backup_storage',
-      {
-        fieldMessage: localization.value.common.datastoreIsRequired,
-        alertMessage: localization.value.common.datastoreIsRequired,
-      }
-    )
-    showValidationErrors([localization.value.common.datastoreIsRequired])
-  } else if (wizard.hasMessage(dynamicSteps.datastores, 'backup_storage')) {
-    value = wizard.removeValidation(
-      dynamicSteps.datastores,
-      'backup_storage',
-      value
-    )
-    onRemoveValidationErrors()
-  }
-
-  return {
-    stepHasError,
-    newValue: value,
-  }
-}
-
-const selectedDatastoresNames = ref<string[]>([])
-const onChangeDatastore = (names: string[]): void => {
-  selectedDatastoresNames.value = names
-}
-
-const strategyOptions = ref<UI_I_SelectInputItem[]>(
-  strategyOptionsFunc(localization.value)
-)
-
-const readyToCompleteInfo = computed<UI_I_TableInfoItem[]>(() => {
-  // General
-  const result = [
-    {
-      label: localization.value.common.name,
-      value: model.value.name,
-    },
-    {
-      label: localization.value.common.description,
-      value: model.value.description,
-    },
-  ]
-
-  // Disks
-  model.value.disk_devices.forEach((disk_device, i) => {
-    result.push({
-      label: `${localization.value.common.disk} ${i + 1}`,
-      value: disk_device.location,
-    })
-  })
-
-  // Datastores
-  result.push({
-    label: localization.value.common.datastore,
-    value: selectedDatastoresNames.value.join(', '),
-  })
-
-  // Configuration
-  result.push({
-    label: localization.value.common.strategy,
-    value:
-      strategyOptions.value.find(
-        (option) => option.value === model.value.strategy
-      )?.label || '',
-  })
-  // result.push({
-  //   label: localization.value.common.backupWindow,
-  //   value: model.value.start_window_min + '',
-  // })
-
-  const gbSizeByB = 1_073_741_824
-  const maxBandwidth =
-    model.value.bandwidth_limit >= gbSizeByB
-      ? $binary.bToGb(model.value.bandwidth_limit) + ' Gbps'
-      : $binary.bToMb(model.value.bandwidth_limit) + ' Mbps'
-
-  result.push({
-    label: localization.value.common.maxBandwidth,
-    value: maxBandwidth,
-  })
-
-  return result
-})
-
-const errors = ref<string[]>([])
-const showValidationErrors = (data: string[]): void => {
-  errors.value = data
-}
-const onRemoveValidationErrors = (): void => {
-  errors.value = []
-}
-
-const onFinish = (): void => {
-  emits('finish')
-}
-const onHideModal = (): void => {
-  emits('hide')
-}
-</script>
-
-<style scoped lang="scss">
-:deep(.modal-body) {
-  display: flex;
-  flex-direction: column;
-}
-</style>
+<template>
+  <div class="create-backup">
+    <atoms-wizard
+      show
+      :wizard="wizard"
+      :selected-scheme="selectedScheme"
+      :title="title"
+      :localization="localization"
+      :test-id="testId"
+      @change-steps="onChangeSteps"
+      @hide="onHideModal"
+      @submit="onFinish"
+    >
+      <template #modalBody="{ selectedStep }">
+        <atoms-alert
+          v-show="errors.length"
+          status="alert-danger"
+          :items="errors"
+          test-id="create-backup-alert"
+          @remove="onRemoveValidationErrors"
+        />
+
+        <common-pages-scheduled-tasks-modals-common-new-task-form
+          v-show="selectedStep.id === dynamicSteps.schedulingOptions"
+          v-model="modelSchedulerTask"
+          :target="props.selectedVmName"
+          class="new-task-form"
+        />
+
+        <common-pages-backups-modals-create-backup-general
+          v-show="selectedStep.id === dynamicSteps.general"
+          v-model="model"
+        />
+
+        <common-pages-backups-modals-create-backup-disks
+          v-show="selectedStep.id === dynamicSteps.disks"
+          v-model="model"
+          :disks="props.disks"
+          :disks-loading="props.disksLoading"
+        />
+
+        <common-pages-backups-modals-create-backup-datastores
+          v-show="selectedStep.id === dynamicSteps.datastores"
+          v-model="model"
+          :datastore-table="props.datastoreTable"
+          :datastore-table-loading="props.datastoreTableLoading"
+          @change="onChangeDatastore"
+        />
+
+        <common-pages-backups-modals-create-backup-configuration
+          v-show="selectedStep.id === dynamicSteps.configuration"
+          v-model="model"
+        />
+
+        <common-ready-to-complete
+          v-show="selectedStep.id === dynamicSteps.readyComplete"
+          :data="readyToCompleteInfo"
+        />
+      </template>
+    </atoms-wizard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_TableInfoItem } from '~/components/atoms/table/info/lib/models/interfaces'
+import type {
+  UI_I_WizardStep,
+  UI_I_ValidationReturn,
+} from '~/components/atoms/wizard/lib/models/interfaces'
+import type { UI_I_ScheduleNewTasksForm } from '~/components/common/pages/scheduledTasks/modals/lib/models/interfaces'
+import type {
+  UI_I_BackupDatastoreTable,
+  UI_I_CreateBackupForm,
+  UI_I_CreateBackupFormDiskDevice,
+} from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
+import Wizard from '~/components/atoms/wizard/lib/utils/utils'
+import {
+  stepsSchemeInitial,
+  stepsFunc,
+  dynamicSteps,
+} from '~/components/common/pages/backups/modals/createBackup/lib/config/steps'
+import { strategyOptionsFunc } from '~/components/common/pages/backups/modals/createBackup/lib/config/strategyOptions'
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+const modelSchedulerTask = defineModel<UI_I_ScheduleNewTasksForm>(
+  'schedulerForm',
+  { required: true }
+)
+
+const props = defineProps<{
+  isEdit: boolean
+  target: string
+  isScheduledTasks: boolean
+  isEditScheduledTasks: boolean
+  selectedVmName: string
+  disks: UI_I_CreateBackupFormDiskDevice[]
+  disksLoading: boolean
+  datastoreTable: UI_I_BackupDatastoreTable
+  datastoreTableLoading: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'change-step-create-backup', value: UI_I_WizardStep[]): void
+  (event: 'finish'): void
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $binary }: any = useNuxtApp()
+
+const title = computed<string>(() => {
+  const { createBackup, updateBackup, scheduleNewTasks, scheduleTaskEdit } =
+    localization.value.common
+  let result = props.isEdit ? updateBackup : createBackup
+  if (props.isScheduledTasks) {
+    const schedulerMode = props.isEditScheduledTasks
+      ? scheduleTaskEdit
+      : scheduleNewTasks
+
+    result = `${schedulerMode} (${createBackup})`
+  }
+
+  return result
+})
+
+const testId = ref<string>(props.isEdit ? 'update-backup' : 'create-backup')
+
+const wizard: Wizard = new Wizard(
+  stepsFunc(localization.value),
+  stepsSchemeInitial(props.isScheduledTasks)
+)
+
+watch(
+  modelSchedulerTask,
+  (newValue: UI_I_ScheduleNewTasksForm) => {
+    if (props.isScheduledTasks) wizard.setDisabledNextButton(newValue.isValid)
+  },
+  { immediate: true, deep: true }
+)
+
+const selectedScheme = computed<number[]>(() => wizard.selectedScheme.value)
+const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> => {
+  emits('change-step-create-backup', value)
+  wizard.changeSteps(value, validationFunc)
+}
+const validationFunc = async (
+  value: UI_I_WizardStep[],
+  currentStep: UI_I_WizardStep,
+  nextStep: UI_I_WizardStep
+): Promise<UI_I_ValidationReturn> => {
+  let stepHasError = false
+  const stepShouldStop = {
+    ifOnCurrentStep: false,
+    ifFromAnyStep: false,
+    stoppageStepId: -1,
+  }
+
+  if (
+    wizard.isValidateForStep(dynamicSteps.general, currentStep.id, nextStep.id)
+  ) {
+    const nameValidation = checkName(value)
+
+    value = nameValidation.newValue
+    stepHasError = stepHasError || nameValidation.stepHasError
+  }
+
+  if (
+    wizard.isValidateForStep(dynamicSteps.disks, currentStep.id, nextStep.id)
+  ) {
+    const validation = checkDisks(value)
+
+    value = validation.newValue
+    stepHasError = stepHasError || validation.stepHasError
+  }
+
+  if (
+    wizard.isValidateForStep(
+      dynamicSteps.datastores,
+      currentStep.id,
+      nextStep.id
+    )
+  ) {
+    const validation = checkDatastore(value)
+
+    value = validation.newValue
+    stepHasError = stepHasError || validation.stepHasError
+  }
+
+  return {
+    newValue: value,
+    stepHasError,
+    stepShouldStop,
+  }
+}
+
+const checkName = (value: UI_I_WizardStep[]): UI_I_ValidationReturn => {
+  let stepHasError = false
+
+  const isValid = !!model.value?.name
+  if (!isValid) {
+    stepHasError = wizard.setValidation(dynamicSteps.general, 'name', {
+      fieldMessage: localization.value.common.nameIsRequired,
+      alertMessage: localization.value.common.nameIsRequired,
+    })
+    showValidationErrors([localization.value.common.nameIsRequired])
+  } else if (wizard.hasMessage(dynamicSteps.general, 'name')) {
+    value = wizard.removeValidation(dynamicSteps.general, 'name', value)
+    onRemoveValidationErrors()
+  }
+
+  return {
+    stepHasError,
+    newValue: value,
+  }
+}
+
+const checkDisks = (value: UI_I_WizardStep[]): UI_I_ValidationReturn => {
+  let stepHasError = false
+
+  const isValidStores = !!model.value?.disk_devices.length
+  if (!isValidStores) {
+    stepHasError = wizard.setValidation(dynamicSteps.disks, 'disk_devices', {
+      fieldMessage: localization.value.common.diskIsRequired,
+      alertMessage: localization.value.common.diskIsRequired,
+    })
+    showValidationErrors([localization.value.common.diskIsRequired])
+  } else if (wizard.hasMessage(dynamicSteps.disks, 'disk_devices')) {
+    value = wizard.removeValidation(dynamicSteps.disks, 'disk_devices', value)
+    onRemoveValidationErrors()
+  }
+
+  return {
+    stepHasError,
+    newValue: value,
+  }
+}
+
+const checkDatastore = (value: UI_I_WizardStep[]): UI_I_ValidationReturn => {
+  let stepHasError = false
+
+  const isValidStorage = !!model.value?.backup_storage.length
+  if (!isValidStorage) {
+    stepHasError = wizard.setValidation(
+      dynamicSteps.datastores,
+      'backup_storage',
+      {
+        fieldMessage: localization.value.common.datastoreIsRequired,
+        alertMessage: localization.value.common.datastoreIsRequired,
+      }
+    )
+    showValidationErrors([localization.value.common.datastoreIsRequired])
+  } else if (wizard.hasMessage(dynamicSteps.datastores, 'backup_storage')) {
+    value = wizard.removeValidation(
+      dynamicSteps.datastores,
+      'backup_storage',
+      value
+    )
+    onRemoveValidationErrors()
+  }
+
+  return {
+    stepHasError,
+    newValue: value,
+  }
+}
+
+const selectedDatastoresNames = ref<string[]>([])
+const onChangeDatastore = (names: string[]): void => {
+  selectedDatastoresNames.value = names
+}
+
+const strategyOptions = ref<UI_I_SelectInputItem[]>(
+  strategyOptionsFunc(localization.value)
+)
+
+const readyToCompleteInfo = computed<UI_I_TableInfoItem[]>(() => {
+  // General
+  const result = [
+    {
+      label: localization.value.common.name,
+      value: model.value.name,
+    },
+    {
+      label: localization.value.common.description,
+      value: model.value.description,
+    },
+  ]
+
+  // Disks
+  model.value.disk_devices.forEach((disk_device, i) => {
+    result.push({
+      label: `${localization.value.common.disk} ${i + 1}`,
+      value: disk_device.location,
+    })
+  })
+
+  // Datastores
+  result.push({
+    label: localization.value.common.datastore,
+    value: selectedDatastoresNames.value.join(', '),
+  })
+
+  // Configuration
+  result.push({
+    label: localization.value.common.strategy,
+    value:
+      strategyOptions.value.find(
+        (option) => option.value === model.value.strategy
+      )?.label || '',
+  })
+  // result.push({
+  //   label: localization.value.common.backupWindow,
+  //   value: model.value.start_window_min + '',
+  // })
+
+  const gbSizeByB = 1_073_741_824
+  const maxBandwidth =
+    model.value.bandwidth_limit >= gbSizeByB
+      ? $binary.bToGb(model.value.bandwidth_limit) + ' Gbps'
+      : $binary.bToMb(model.value.bandwidth_limit) + ' Mbps'
+
+  result.push({
+    label: localization.value.common.maxBandwidth,
+    value: maxBandwidth,
+  })
+
+  return result
+})
+
+const errors = ref<string[]>([])
+const showValidationErrors = (data: string[]): void => {
+  errors.value = data
+}
+const onRemoveValidationErrors = (): void => {
+  errors.value = []
+}
+
+const onFinish = (): void => {
+  emits('finish')
+}
+const onHideModal = (): void => {
+  emits('hide')
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.modal-body) {
+  display: flex;
+  flex-direction: column;
+}
+</style>