bfg-common 1.1.62 → 1.1.63

package/components/common/vm/actions/add/customizeHardware/virtualHardware/cdDvdDrive/CdDvdDrive.vue

@@ -1,245 +1,274 @@
-<template>
-  <div class="hardware-cd-dvd-drive">
-    <atoms-stack-block
-      :has-children="true"
-      :is-roll-back="props.type === 'removed'"
-      :removable="isRemovable"
-      @remove="onRemoveCdDvdDrive"
-      @roll-back="onRollBackCdDvdDrive"
-    >
-      <template #stackBlockKey>
-        <div
-          class="vm-wizard-toggle-block-cd-dvd-drive vm-wizard-toggle-block-hard-disk"
-        >
-          <span>{{ label }}</span>
-        </div>
-      </template>
-      <template #stackBlockContent>
-        <div class="flex-align-center flex-space-between">
-          <template v-if="props.type === 'removed'">
-            <span>{{ localization.deviceWillRemoved }}</span>
-            <div @click.stop class="flex-align-center">
-              <input
-                :id="`cd-dvd-delete-files-from-datastore-${props.index}`"
-                v-model="deleteFilesFromDatastore"
-                :disabled="props.disabled"
-                type="checkbox"
-                class="pointer"
-                @click.stop
-              />
-              <label
-                :for="`cd-dvd-delete-files-from-datastore-${props.index}`"
-                :class="[
-                  'label-text-normal pointer',
-                  props.disabled && 'div-disabled',
-                ]"
-                >{{ localization.deleteFilesFromDatastore }}</label
-              >
-            </div>
-          </template>
-          <template v-else>
-            <div class="select">
-              <select
-                id="vm-wizard-cd-dvd-drive-field"
-                v-model="selectedCdDvdDrive"
-                class="vm-wizard-cd-dvd-drive-field"
-                @click.stop
-                @change="changeCdDvdDrive"
-              >
-                <option
-                  v-for="(item, key) in cdDvdDriveOptions"
-                  :key="key"
-                  :value="item.value"
-                >
-                  {{ item.text }}
-                </option>
-              </select>
-            </div>
-          </template>
-        </div>
-      </template>
-      <template #stackChildren>
-        <common-vm-actions-add-customize-hardware-virtual-hardware-cd-dvd-drive-media
-          v-if="selectedCdDvdDrive === 'datastoreIsoFile'"
-          v-model:cd-dvd-media="cdDvdMedia"
-          @browse="isShowFileModal = true"
-        />
-
-        <common-vm-actions-add-customize-hardware-virtual-hardware-bus
-          v-model:bus="bus"
-          :index="indexByHardDisks"
-          :validation-type="busValidationType"
-          :error-validation-fields="props.errorValidationFields"
-          :disabled="isRunning"
-          component-type="disk_devices"
-          @remove-error-by-title="emits('remove-error-by-title', $event)"
-        />
-      </template>
-    </atoms-stack-block>
-
-    <Teleport to="body">
-      <common-vm-actions-add-customize-hardware-virtual-hardware-browse-view
-        v-if="isShowFileModal"
-        :show="isShowFileModal"
-        :file-types="fileTypes"
-        :nodes="props.nodes"
-        :files="props.files"
-        @submit="onSelectFile"
-        @get-storage="emits('get-storage', $event)"
-        @get-folders-or-files="emits('get-folders-or-files', $event)"
-        @get-active-device-child="emits('get-active-device-child', $event)"
-        @show-datastore-child="emits('show-datastore-child', $event)"
-        @hide="isShowFileModal = false"
-      />
-    </Teleport>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { UI_I_FileTreeNode } from '~/components/models/interfaces'
-import { UI_I_TablePayload } from '~/models/store/interfaces'
-import { UI_T_CdDvdDrive } from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/cdDvdDrive/models/types'
-import { UI_I_SendDataNewCdDvdDrive } from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/models/interfaces'
-import { UI_I_Localization, UI_I_HTMLSelectElement } from '~/models/interfaces'
-import { UI_I_ErrorValidationField } from '~/models/store/interfaces'
-import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
-import { UI_I_FolderOrFileTreePayload } from '~/models/store/storage/interfaces'
-import { UI_T_CdDvdType } from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/models/types'
-import { cdDvdDriveOptionsFunc } from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/cdDvdDrive/config/options'
-import { fileTypesFunc } from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/cdDvdDrive/config/fileTypes'
-
-const props = defineProps<{
-  hardDisksCount: number
-  index: number
-  cdDvdDrive: UI_I_SendDataNewCdDvdDrive
-  nodes: UI_I_FileTreeNode[]
-  files: UI_I_FileTreeNode[]
-  errorValidationFields: UI_I_ErrorValidationField<string>[]
-  type: UI_T_CdDvdType
-  isEdit: boolean
-  state?: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'send-data', value: UI_I_SendDataNewCdDvdDrive): void
-  (event: 'remove'): void
-  (event: 'roll-back'): void
-  (event: 'remove-error-by-title', value: string): void
-  (event: 'get-storage', value: UI_I_TablePayload): void
-  (event: 'get-folders-or-files', value: UI_I_FolderOrFileTreePayload): void
-  (event: 'get-active-device-child', value: UI_I_FileTreeNode): void
-  (event: 'show-datastore-child', value: UI_I_FileTreeNode): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isRunning = computed<boolean>(() => {
-  return props.state === '1'
-})
-
-const isRemovable = computed<boolean>(() => {
-  return (
-    !props.isEdit ||
-    !isRunning.value ||
-    (isRunning.value && bus.value === 'virtio')
-  )
-})
-
-const indexByHardDisks = computed<number>(
-  () => props.index + props.hardDisksCount
-)
-
-const label = computed<string>(() => {
-  if (props.type === 'edit' || props.type === 'removed')
-    return `${localization.value.cdDvdDrive} ${props.index + 1}`
-
-  return `${localization.value.newCdDvdDrive} *`
-})
-
-const busValidationType = computed<string>(
-  () => `disk_devices[${indexByHardDisks}].bus`
-)
-
-const selectedCdDvdDrive = ref<UI_T_CdDvdDrive>('clientDevice')
-const cdDvdDriveOptions = ref<UI_I_OptionItem[]>(
-  cdDvdDriveOptionsFunc(localization.value)
-)
-const changeCdDvdDrive = (event: UI_I_HTMLSelectElement): void => {
-  const isDatastoreIsoFile = event.target.value === 'datastoreIsoFile'
-  if (!isDatastoreIsoFile) return
-
-  isShowFileModal.value = true
-}
-const isShowFileModal = ref<boolean>(false)
-const onSelectFile = (file: UI_I_FileTreeNode): void => {
-  cdDvdMedia.value = file.path
-}
-const fileTypes = computed<UI_I_OptionItem[]>(() =>
-  fileTypesFunc(localization.value)
-)
-
-const onRemoveCdDvdDrive = (): void => {
-  emits('remove')
-}
-const onRollBackCdDvdDrive = (): void => {
-  emits('roll-back')
-}
-
-const cdDvdMedia = ref<string>('')
-const bus = ref<string>('ide')
-
-const deleteFilesFromDatastore = ref<boolean>(false)
-
-watch(
-  [cdDvdMedia, bus, deleteFilesFromDatastore, () => props.type],
-  () => {
-    emits('send-data', {
-      create: props.cdDvdDrive.create,
-      attach: props.cdDvdDrive.attach,
-      source: cdDvdMedia.value,
-      size: 0,
-      bus: bus.value,
-      device_type: 'cdrom',
-      provision_type: 'thick',
-      disk_mode: 'dependent',
-      sharing: false,
-      read_only: true,
-      shares: 0,
-      cache: 'none',
-      io: 'native',
-      limit_iops: 0,
-      discard: 'unmap',
-      boot_order: -1,
-      detach: props.type === 'removed',
-      remove: props.type === 'removed' && deleteFilesFromDatastore.value, // Проверяем если удалили диск и указали Delete files from datastore
-    })
-  },
-  { immediate: true }
-)
-
-// Добавляем данные для редактирования
-watch(
-  () => props.cdDvdDrive,
-  (newValue) => {
-    if (newValue.source !== '') {
-      selectedCdDvdDrive.value = 'datastoreIsoFile'
-      cdDvdMedia.value = newValue.source
-    }
-    if (newValue.bus !== '') {
-      bus.value = newValue.bus
-    }
-  },
-  { immediate: true }
-)
-watch(
-  isRunning,
-  (newValue) => {
-    if (newValue && props.type === 'new') {
-      bus.value = 'virtio'
-    }
-  },
-  { immediate: true }
-)
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <div class="hardware-cd-dvd-drive">
+    <atoms-stack-block
+      :has-children="true"
+      :is-roll-back="props.type === 'removed'"
+      :removable="isRemovable"
+      @remove="onRemoveCdDvdDrive"
+      @roll-back="onRollBackCdDvdDrive"
+    >
+      <template #stackBlockKey>
+        <div
+          class="vm-wizard-toggle-block-cd-dvd-drive vm-wizard-toggle-block-hard-disk"
+        >
+          <span>{{ label }}</span>
+        </div>
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-align-center flex-space-between">
+          <template v-if="props.type === 'removed'">
+            <span>{{ localization.deviceWillRemoved }}</span>
+            <div @click.stop class="flex-align-center">
+              <input
+                :id="`cd-dvd-delete-files-from-datastore-${props.index}`"
+                v-model="deleteFilesFromDatastore"
+                :disabled="props.disabled"
+                type="checkbox"
+                class="pointer"
+                @click.stop
+              />
+              <label
+                :for="`cd-dvd-delete-files-from-datastore-${props.index}`"
+                :class="[
+                  'label-text-normal pointer',
+                  props.disabled && 'div-disabled',
+                ]"
+                >{{ localization.deleteFilesFromDatastore }}</label
+              >
+            </div>
+          </template>
+          <template v-else>
+            <div class="select">
+              <select
+                id="vm-wizard-cd-dvd-drive-field"
+                v-model="selectedCdDvdDrive"
+                class="vm-wizard-cd-dvd-drive-field"
+                @click.stop
+                @change="changeCdDvdDrive"
+              >
+                <option
+                  v-for="(item, key) in cdDvdDriveOptions"
+                  :key="key"
+                  :value="item.value"
+                >
+                  {{ item.text }}
+                </option>
+              </select>
+            </div>
+          </template>
+        </div>
+      </template>
+      <template #stackChildren>
+        <common-vm-actions-add-customize-hardware-virtual-hardware-cd-dvd-drive-media
+          v-if="selectedCdDvdDrive === 'datastoreIsoFile'"
+          v-model:cd-dvd-media="cdDvdMedia"
+          @browse="isShowFileModal = true"
+        />
+
+        <common-vm-actions-add-customize-hardware-virtual-hardware-bus
+          v-model:bus="bus"
+          :index="indexByHardDisks"
+          :validation-type="busValidationType"
+          :error-validation-fields="props.errorValidationFields"
+          :disabled="isRunning"
+          component-type="disk_devices"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+        />
+      </template>
+    </atoms-stack-block>
+
+    <Teleport to="body">
+      <common-vm-actions-add-customize-hardware-virtual-hardware-browse-view
+        v-if="isShowFileModal"
+        :show="isShowFileModal"
+        :file-types="fileTypes"
+        :nodes="props.nodes"
+        :files="props.files"
+        @submit="onSelectFile"
+        @get-storage="emits('get-storage', $event)"
+        @get-folders-or-files="emits('get-folders-or-files', $event)"
+        @get-active-device-child="emits('get-active-device-child', $event)"
+        @show-datastore-child="emits('show-datastore-child', $event)"
+        @hide="isShowFileModal = false"
+      />
+    </Teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UI_I_FileTreeNode } from '~/components/models/interfaces'
+import { UI_I_TablePayload } from '~/models/store/interfaces'
+import { UI_T_CdDvdDrive } from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/cdDvdDrive/models/types'
+import { UI_I_SendDataNewCdDvdDrive } from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/models/interfaces'
+import { UI_I_Localization, UI_I_HTMLSelectElement } from '~/models/interfaces'
+import { UI_I_ErrorValidationField } from '~/models/store/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+import { UI_I_FolderOrFileTreePayload } from '~/models/store/storage/interfaces'
+import { UI_T_CdDvdType } from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/models/types'
+import { cdDvdDriveOptionsFunc } from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/cdDvdDrive/config/options'
+import { fileTypesFunc } from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/cdDvdDrive/config/fileTypes'
+
+const props = defineProps<{
+  hardDisksCount: number
+  index: number
+  cdDvdDrive: UI_I_SendDataNewCdDvdDrive
+  nodes: UI_I_FileTreeNode[]
+  files: UI_I_FileTreeNode[]
+  errorValidationFields: UI_I_ErrorValidationField<string>[]
+  type: UI_T_CdDvdType
+  isEdit: boolean
+  state?: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'send-data', value: UI_I_SendDataNewCdDvdDrive): void
+  (event: 'remove'): void
+  (event: 'roll-back'): void
+  (event: 'remove-error-by-title', value: string): void
+  (event: 'get-storage', value: UI_I_TablePayload): void
+  (event: 'get-folders-or-files', value: UI_I_FolderOrFileTreePayload): void
+  (event: 'get-active-device-child', value: UI_I_FileTreeNode): void
+  (event: 'show-datastore-child', value: UI_I_FileTreeNode): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isRunning = computed<boolean>(() => {
+  return props.state === '1'
+})
+
+const isRemovable = computed<boolean>(() => {
+  return (
+    !props.isEdit ||
+    !isRunning.value ||
+    (isRunning.value && bus.value === 'virtio')
+  )
+})
+
+const indexByHardDisks = computed<number>(
+  () => props.index + props.hardDisksCount
+)
+
+const label = computed<string>(() => {
+  if (props.type === 'edit' || props.type === 'removed')
+    return `${localization.value.cdDvdDrive} ${props.index + 1}`
+
+  return `${localization.value.newCdDvdDrive} *`
+})
+
+const busValidationType = computed<string>(
+  () => `disk_devices[${indexByHardDisks}].bus`
+)
+
+const selectedCdDvdDrive = ref<UI_T_CdDvdDrive>('clientDevice')
+const cdDvdDriveOptions = ref<UI_I_OptionItem[]>(
+  cdDvdDriveOptionsFunc(localization.value)
+)
+const changeCdDvdDrive = (event: UI_I_HTMLSelectElement): void => {
+  const isDatastoreIsoFile = event.target.value === 'datastoreIsoFile'
+  if (!isDatastoreIsoFile) return
+
+  isShowFileModal.value = true
+}
+const isShowFileModal = ref<boolean>(false)
+const onSelectFile = (file: UI_I_FileTreeNode): void => {
+  cdDvdMedia.value = file.path
+}
+const fileTypes = computed<UI_I_OptionItem[]>(() =>
+  fileTypesFunc(localization.value)
+)
+
+const onRemoveCdDvdDrive = (): void => {
+  emits('remove')
+}
+const onRollBackCdDvdDrive = (): void => {
+  emits('roll-back')
+}
+
+const cdDvdMedia = ref<string>('')
+const bus = ref<string>('ide')
+
+const deleteFilesFromDatastore = ref<boolean>(false)
+
+watch(
+  [cdDvdMedia, bus, deleteFilesFromDatastore, , () => props.type],
+  () => {
+    emits('send-data', {
+      create: props.cdDvdDrive.create,
+      attach: props.cdDvdDrive.attach,
+      source: cdDvdMedia.value,
+      size: 0,
+      bus: bus.value,
+      device_type: 'cdrom',
+      provision_type: 'thick',
+      disk_mode: 'dependent',
+      sharing: false,
+      read_only: true,
+      shares: 0,
+      cache: 'none',
+      io: 'native',
+      limit_iops: 0,
+      discard: 'unmap',
+      boot_order: -1,
+      detach: props.type === 'removed',
+      remove: props.type === 'removed' && deleteFilesFromDatastore.value, // Проверяем если удалили диск и указали Delete files from datastore
+    })
+    // if (!props.isEdit) {
+    //   emits('send-data', {
+    //     create: false,
+    //     source: cdDvdMedia.value,
+    //     bus: bus.value,
+    //     device_type: 'cdrom',
+    //     boot_order: -1,
+    //   })
+    //   return
+    // }
+    // emits('send-data', {
+    //   create: false,
+    //   source: cdDvdMedia.value,
+    //   bus: bus.value,
+    //   device_type: 'cdrom',
+    //   boot_order: -1,
+    //   size: 0,
+    //   target: 'hda',
+    //   storage_id: '',
+    //   provision_type: 'thick',
+    //   disk_mode: 'dependent',
+    //   sharing: false,
+    //   read_only: true,
+    //   shares: 0,
+    //   cache: 'none',
+    //   io: 'native',
+    //   limit_iops: 0,
+    //   discard: 'unmap',
+    // })
+  },
+  { immediate: true }
+)
+
+// Добавляем данные для редактирования
+watch(
+  () => props.cdDvdDrive,
+  (newValue) => {
+    if (newValue.source !== '') {
+      selectedCdDvdDrive.value = 'datastoreIsoFile'
+      cdDvdMedia.value = newValue.source
+    }
+    if (newValue.bus !== '') {
+      bus.value = newValue.bus
+    }
+  },
+  { immediate: true }
+)
+watch(
+  isRunning,
+  (newValue) => {
+    if (newValue && props.type === 'new') {
+      bus.value = 'virtio'
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<style lang="scss" scoped></style>