bfg-common 1.5.595 → 1.5.596

package/components/common/vm/actions/editSettings/EditSettings.vue

@@ -1,169 +1,169 @@
-<template>
-  <component
-    :is="currentComponent"
-    v-if="isNewView"
-    v-model:vm-settings="model"
-    :nodes="props.nodes"
-    :files="props.files"
-    :project="props.project"
-    :loading="loadingLocal"
-    :datastore="props.datastore"
-    :is-datastore-loading="props.isDatastoreLoading"
-    :networks-table="props.networksTable"
-    :selected-nav-item="selectedNavItem"
-    :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
-    :error-validation-fields="props.errorValidationFields"
-    :state="props.state"
-    :vm-name-old="vmNameOld"
-    :passthrough-devices="props.passthroughDevices"
-    :mediated-devices="props.mediatedDevices"
-    :get-datastore-table-func="props.getDatastoreTableFunc"
-    :customize-hardware-submit="customizeHardwareSubmit"
-    :is-vmt="props.isVmt"
-    :max-memory="maxMemory"
-    :cpu-models="cpuModels"
-    @hide="emits('hide')"
-    @validate="validateSendData"
-    @get-storage="emits('get-storage', $event)"
-    @get-pci-devices="emits('get-pci-devices')"
-    @get-networks-table="emits('get-networks-table', $event)"
-    @get-folders-or-files="emits('get-folders-or-files', $event)"
-    @show-datastore-child="emits('show-datastore-child', $event)"
-    @get-active-device-child="emits('get-active-device-child', $event)"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_T_Project } from '~/lib/models/types'
-import type { UI_I_FileTreeNode } from '~/components/lib/models/interfaces'
-import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
-import type {
-  UI_I_MediatedDevice,
-  UI_I_PciDevice,
-} from '~/lib/models/store/vm/interfaces'
-import type { UI_T_SelectedNavItem } from '~/components/common/vm/actions/common/lib/models/types'
-import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
-import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
-import type {
-  UI_I_DatastoreTableItem,
-  UI_I_FolderOrFileTreePayload,
-} from '~/lib/models/store/storage/interfaces'
-import type { UI_T_EditVmFinishFunc } from '~/components/common/vm/actions/editSettings/lib/models/types'
-import type {
-  UI_I_Capabilities,
-  UI_I_CreateVmData,
-} from '~/components/common/vm/actions/common/lib/models/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-import { mapCapabilities } from '~/components/common/vm/actions/common/lib/utils/capabilities'
-import { capabilities } from '~/components/common/vm/actions/common/lib/config/capabilities'
-
-const model = defineModel<UI_I_CreateVmData>({ required: true })
-
-const props = withDefaults(
-  defineProps<{
-    project: UI_T_Project
-    loading: boolean
-    nodes: UI_I_FileTreeNode[]
-    files: UI_I_FileTreeNode[]
-    networksTable: UI_I_NetworkTableItem[]
-    errorValidationFields: UI_I_ErrorValidationField[]
-    vmCpuHelpTextSecond: string
-    vmId: string
-    datastore: UI_I_DatastoreTableItem[]
-    isDatastoreLoading: boolean
-    validateSendDataFunc: UI_T_EditVmFinishFunc
-    getDatastoreTableFunc?: (payload: UI_I_TablePayload) => Promise<void>
-    state?: string | number
-    passthroughDevices?: UI_I_PciDevice[]
-    mediatedDevices?: UI_I_MediatedDevice[]
-    capabilities?: UI_I_Capabilities
-    isVmt?: boolean
-  }>(),
-  {
-    getDatastoreTableFunc: undefined,
-    state: undefined,
-    passthroughDevices: undefined,
-    mediatedDevices: undefined,
-    capabilities: undefined,
-    isVmt: undefined,
-  }
-)
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'update-vm'): 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
-  (event: 'get-networks-table', value: UI_I_TablePayload): void
-  (event: 'get-pci-devices'): void
-}>()
-
-const { $store }: any = useNuxtApp()
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./new/New.vue'))
-    : defineAsyncComponent(() => import('./Old.vue'))
-)
-
-const vmNameOld = computed<string>(() => model.value?.name || '')
-
-watch(
-  () => props.capabilities,
-  () => {
-    if (props.capabilities) mapCapabilities(props.capabilities)
-  },
-  { deep: true, immediate: true }
-)
-
-const cpuModels = ref<UI_I_OptionItem[]>(capabilities.value.cpuModels)
-const maxMemory = ref<number>(capabilities.value.maxMemory)
-
-const selectedNavItem = ref<UI_T_SelectedNavItem>(0)
-
-const loadingLocal = ref<boolean>(false)
-watch(
-  () => props.loading,
-  (newValue: boolean) => {
-    loadingLocal.value = newValue
-  },
-  { immediate: true }
-)
-
-watch(
-  model,
-  (newValue) => {
-    console.log(newValue, 11111111111)
-  },
-  { deep: true }
-)
-
-const customizeHardwareSubmit = ref<null | Function>(null)
-const checkCustomizeHardware = async (): Promise<boolean> => {
-  return new Promise((resolve) => {
-    customizeHardwareSubmit.value = (data: boolean) => {
-      customizeHardwareSubmit.value = null
-
-      resolve(data)
-    }
-  })
-}
-
-const validateSendData = async (): Promise<void> => {
-  const isValid = await checkCustomizeHardware()
-  if (!isValid) {
-    return
-  }
-
-  loadingLocal.value = true
-  props.validateSendDataFunc(model.value, props.vmId).then((data) => {
-    loadingLocal.value = false
-
-    !data && emits('update-vm')
-  })
-}
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <component
+    :is="currentComponent"
+    v-if="isNewView"
+    v-model:vm-settings="model"
+    :nodes="props.nodes"
+    :files="props.files"
+    :project="props.project"
+    :loading="loadingLocal"
+    :datastore="props.datastore"
+    :is-datastore-loading="props.isDatastoreLoading"
+    :networks-table="props.networksTable"
+    :selected-nav-item="selectedNavItem"
+    :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
+    :error-validation-fields="props.errorValidationFields"
+    :state="props.state"
+    :vm-name-old="vmNameOld"
+    :passthrough-devices="props.passthroughDevices"
+    :mediated-devices="props.mediatedDevices"
+    :get-datastore-table-func="props.getDatastoreTableFunc"
+    :customize-hardware-submit="customizeHardwareSubmit"
+    :is-vmt="props.isVmt"
+    :max-memory="maxMemory"
+    :cpu-models="cpuModels"
+    @hide="emits('hide')"
+    @validate="validateSendData"
+    @get-storage="emits('get-storage', $event)"
+    @get-pci-devices="emits('get-pci-devices')"
+    @get-networks-table="emits('get-networks-table', $event)"
+    @get-folders-or-files="emits('get-folders-or-files', $event)"
+    @show-datastore-child="emits('show-datastore-child', $event)"
+    @get-active-device-child="emits('get-active-device-child', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_FileTreeNode } from '~/components/lib/models/interfaces'
+import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
+import type {
+  UI_I_MediatedDevice,
+  UI_I_PciDevice,
+} from '~/lib/models/store/vm/interfaces'
+import type { UI_T_SelectedNavItem } from '~/components/common/vm/actions/common/lib/models/types'
+import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
+import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
+import type {
+  UI_I_DatastoreTableItem,
+  UI_I_FolderOrFileTreePayload,
+} from '~/lib/models/store/storage/interfaces'
+import type { UI_T_EditVmFinishFunc } from '~/components/common/vm/actions/editSettings/lib/models/types'
+import type {
+  UI_I_Capabilities,
+  UI_I_CreateVmData,
+} from '~/components/common/vm/actions/common/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import { mapCapabilities } from '~/components/common/vm/actions/common/lib/utils/capabilities'
+import { capabilities } from '~/components/common/vm/actions/common/lib/config/capabilities'
+
+const model = defineModel<UI_I_CreateVmData>({ required: true })
+
+const props = withDefaults(
+  defineProps<{
+    project: UI_T_Project
+    loading: boolean
+    nodes: UI_I_FileTreeNode[]
+    files: UI_I_FileTreeNode[]
+    networksTable: UI_I_NetworkTableItem[]
+    errorValidationFields: UI_I_ErrorValidationField[]
+    vmCpuHelpTextSecond: string
+    vmId: string
+    datastore: UI_I_DatastoreTableItem[]
+    isDatastoreLoading: boolean
+    validateSendDataFunc: UI_T_EditVmFinishFunc
+    getDatastoreTableFunc?: (payload: UI_I_TablePayload) => Promise<void>
+    state?: string | number
+    passthroughDevices?: UI_I_PciDevice[]
+    mediatedDevices?: UI_I_MediatedDevice[]
+    capabilities?: UI_I_Capabilities
+    isVmt?: boolean
+  }>(),
+  {
+    getDatastoreTableFunc: undefined,
+    state: undefined,
+    passthroughDevices: undefined,
+    mediatedDevices: undefined,
+    capabilities: undefined,
+    isVmt: undefined,
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'update-vm'): 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
+  (event: 'get-networks-table', value: UI_I_TablePayload): void
+  (event: 'get-pci-devices'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./new/New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
+const vmNameOld = computed<string>(() => model.value?.name || '')
+
+watch(
+  () => props.capabilities,
+  () => {
+    if (props.capabilities) mapCapabilities(props.capabilities)
+  },
+  { deep: true, immediate: true }
+)
+
+const cpuModels = ref<UI_I_OptionItem[]>(capabilities.value.cpuModels)
+const maxMemory = ref<number>(capabilities.value.maxMemory)
+
+const selectedNavItem = ref<UI_T_SelectedNavItem>(0)
+
+const loadingLocal = ref<boolean>(false)
+watch(
+  () => props.loading,
+  (newValue: boolean) => {
+    loadingLocal.value = newValue
+  },
+  { immediate: true }
+)
+
+watch(
+  model,
+  (newValue) => {
+    console.log(newValue, 11111111111)
+  },
+  { deep: true }
+)
+
+const customizeHardwareSubmit = ref<null | Function>(null)
+const checkCustomizeHardware = async (): Promise<boolean> => {
+  return new Promise((resolve) => {
+    customizeHardwareSubmit.value = (data: boolean) => {
+      customizeHardwareSubmit.value = null
+
+      resolve(data)
+    }
+  })
+}
+
+const validateSendData = async (): Promise<void> => {
+  const isValid = await checkCustomizeHardware()
+  if (!isValid) {
+    return
+  }
+
+  loadingLocal.value = true
+  props.validateSendDataFunc(model.value, props.vmId).then((data) => {
+    loadingLocal.value = false
+
+    !data && emits('update-vm')
+  })
+}
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/vm/actions/editSettings/new/Skeleton.vue

@@ -1,88 +1,88 @@
-<template>
-  <div class="skeleton-wrap">
-    <div class="tabs">
-      <ui-skeleton-item width="64px" height="16px" />
-      <ui-skeleton-item width="64px" height="16px" />
-    </div>
-    <div class="actions">
-      <ui-skeleton-item width="80px" height="16px" />
-      <ui-skeleton-item width="152px" height="32px" border-radius="6px" />
-    </div>
-    <div class="stack-block-wrap">
-      <div class="stack-block">
-        <div class="stack-label flex-1">
-          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
-          <ui-skeleton-item height="16px" />
-        </div>
-        <div class="stack-value flex-1">
-          <ui-skeleton-item width="102px" height="32px" border-radius="8px" />
-        </div>
-      </div>
-
-      <div v-for="item in 2" :key="item" class="stack-block">
-        <div class="stack-label flex-1">
-          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
-          <ui-skeleton-item height="16px" />
-        </div>
-        <div class="stack-value flex-1">
-          <ui-skeleton-item width="102px" height="32px" border-radius="8px" />
-          <ui-skeleton-item width="80px" height="32px" border-radius="8px" />
-        </div>
-      </div>
-
-      <div v-for="item in 5" :key="item" class="stack-block">
-        <div class="stack-label flex-1">
-          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
-          <ui-skeleton-item height="16px" />
-        </div>
-        <div class="stack-value flex-1">
-          <ui-skeleton-item width="196px" height="32px" border-radius="8px" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped lang="scss">
-.skeleton-wrap {
-  padding: 0 32px;
-
-  .tabs {
-    display: flex;
-    align-items: center;
-    gap: 32px;
-    padding: 8px 0 12px;
-    border-bottom: 1px solid var(--divider-color);
-  }
-
-  .actions {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 12px 0;
-  }
-
-  .stack-block-wrap {
-    display: grid;
-    grid-gap: 12px;
-
-    .stack-block {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 8px 12px;
-      background: var(--stack-block-bg-color);
-      border-radius: 6px;
-
-      .stack-label,
-      .stack-value {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="skeleton-wrap">
+    <div class="tabs">
+      <ui-skeleton-item width="64px" height="16px" />
+      <ui-skeleton-item width="64px" height="16px" />
+    </div>
+    <div class="actions">
+      <ui-skeleton-item width="80px" height="16px" />
+      <ui-skeleton-item width="152px" height="32px" border-radius="6px" />
+    </div>
+    <div class="stack-block-wrap">
+      <div class="stack-block">
+        <div class="stack-label flex-1">
+          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
+          <ui-skeleton-item height="16px" />
+        </div>
+        <div class="stack-value flex-1">
+          <ui-skeleton-item width="102px" height="32px" border-radius="8px" />
+        </div>
+      </div>
+
+      <div v-for="item in 2" :key="item" class="stack-block">
+        <div class="stack-label flex-1">
+          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
+          <ui-skeleton-item height="16px" />
+        </div>
+        <div class="stack-value flex-1">
+          <ui-skeleton-item width="102px" height="32px" border-radius="8px" />
+          <ui-skeleton-item width="80px" height="32px" border-radius="8px" />
+        </div>
+      </div>
+
+      <div v-for="item in 5" :key="item" class="stack-block">
+        <div class="stack-label flex-1">
+          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
+          <ui-skeleton-item height="16px" />
+        </div>
+        <div class="stack-value flex-1">
+          <ui-skeleton-item width="196px" height="32px" border-radius="8px" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.skeleton-wrap {
+  padding: 0 32px;
+
+  .tabs {
+    display: flex;
+    align-items: center;
+    gap: 32px;
+    padding: 8px 0 12px;
+    border-bottom: 1px solid var(--divider-color);
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 12px 0;
+  }
+
+  .stack-block-wrap {
+    display: grid;
+    grid-gap: 12px;
+
+    .stack-block {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 8px 12px;
+      background: var(--stack-block-bg-color);
+      border-radius: 6px;
+
+      .stack-label,
+      .stack-value {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+    }
+  }
+}
+</style>