bfg-common 1.4.393 → 1.4.395

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/folderSharing/FolderSharingOld.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.folderSharing }}
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-align-center">
+          <input
+            id="folder-sharing"
+            v-model="folderSharing"
+            data-id="folder-sharing-checkbox"
+            type="checkbox"
+            disabled
+          />
+          <label for="folder-sharing" class="div-disabled label-text-normal">{{
+              localization.common.enable
+            }}</label>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const folderSharing = defineModel<boolean>('folder-sharing')
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped>
+#folder-sharing {
+  margin: 0 4px 4px 0;
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/keymap/Keymap.vue

@@ -1,56 +1,32 @@
 <template>
-  <div class="">
-    <atoms-stack-block :has-children="false">
-      <template #stackBlockKey>
-        {{ localization.common.keymap }}
-      </template>
-      <template #stackBlockContent>
-        <div class="select">
-          <select
-            id="keymap-select"
-            v-model="remoteConsoleTypeLocal"
-            data-id="keymap-select"
-            :disabled="props.disabled"
-          >
-            <option
-              v-for="(item, key) in keymapOptions"
-              :key="key"
-              :value="item.value"
-            >
-              {{ item.text }}
-            </option>
-          </select>
-        </div>
-      </template>
-    </atoms-stack-block>
-  </div>
+  <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-keymap-new
+    v-if="isNewView"
+    v-model:keymap="keymap"
+    :disabled="props.disabled"
+    :keymap-options="keymapOptions"
+  />
+  <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-keymap-old
+    v-else
+    v-model:keymap="keymap"
+    :disabled="props.disabled"
+    :keymap-options="keymapOptions"
+  />
 </template>
 
 <script setup lang="ts">
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
 import { keymapOptionsConfig } from '~/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/keymap/lib/config/config'
 
-const localization = computed<UI_I_Localization>(() => useLocal())
+const keymap = defineModel<string>('keymap', { required: true })
 
 const props = defineProps<{
-  keymap: string
   disabled: boolean
 }>()
-const emits = defineEmits<{
-  (event: 'update:keymap', value: string): void
-}>()
 
-const keymapOptions = ref<UI_I_OptionItem[]>(keymapOptionsConfig)
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
-const remoteConsoleTypeLocal = computed<string>({
-  get() {
-    return props.keymap
-  },
-  set(newValue) {
-    emits('update:keymap', newValue)
-  },
-})
+const keymapOptions = ref<UI_I_OptionItem[]>(keymapOptionsConfig)
 </script>
 
 <style scoped></style>

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/keymap/KeymapNew.vue

@@ -0,0 +1,39 @@
+<template>
+  <ui-stack-block :has-children="false">
+    <template #stackBlockKey>
+      {{ localization.common.keymap }}
+    </template>
+    <template #stackBlockContent>
+      <ui-select
+        id="keymap-select"
+        v-model="keymap"
+        width="auto"
+        :items="props.keymapOptions"
+        :disabled="props.disabled"
+        test-id="keymap-select"
+        class="keymap-select"
+        @click.stop
+      />
+    </template>
+  </ui-stack-block>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const keymap = defineModel<string>('keymap', { required: true })
+
+const props = defineProps<{
+  disabled: boolean
+  keymapOptions: UI_I_OptionItem[]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped>
+:deep(.keymap-select .ui-main-select-toggle) {
+  width: 108px;
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/keymap/KeymapOld.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.keymap }}
+      </template>
+      <template #stackBlockContent>
+        <div class="select">
+          <select
+            id="keymap-select"
+            v-model="keymap"
+            data-id="keymap-select"
+            :disabled="props.disabled"
+          >
+            <option
+              v-for="(item, key) in props.keymapOptions"
+              :key="key"
+              :value="item.value"
+            >
+              {{ item.text }}
+            </option>
+          </select>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const keymap = defineModel<string>('keymap', {required: true})
+
+const props = defineProps<{
+  disabled: boolean
+  keymapOptions: UI_I_OptionItem[]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped></style>

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/password/Password.vue

@@ -1,54 +1,24 @@
 <template>
-  <div class="">
-    <atoms-stack-block :has-children="false">
-      <template #stackBlockKey>
-        {{ localization.auth.password }}
-      </template>
-      <template #stackBlockContent>
-        <div class="flex-align-center">
-          <input
-            id="enable-password"
-            v-model="isEnabledPassword"
-            data-id="enable-password-input"
-            :disabled="props.disabled"
-            type="checkbox"
-            @change="setPasswordDisable"
-          />
-          <label for="enable-password" class="label-text-normal mr-1">{{
-            localization.common.enable
-          }}</label>
-
-          <atoms-tooltip-error :has-error="!!passwordErrorText">
-            <template #elem>
-              <input
-                id="password-input"
-                v-model="form.password.value"
-                data-id="password-input"
-                type="text"
-                :class="[{ 'has-error': !!passwordErrorText }]"
-                :disabled="!isEnabledPassword || props.disabled"
-                @input="changePassword"
-              />
-            </template>
-            <template #content>
-              {{ passwordErrorText }}
-            </template>
-          </atoms-tooltip-error>
-
-          <button
-            id="generate-password-button"
-            data-id="generate-password-button"
-            class="generate-password-btn btn btn-primary"
-            :disabled="!isEnabledPassword || props.disabled"
-            :title="localization.common.generatePassword"
-            @click="onGeneratePassword"
-          >
-            <atoms-the-icon name="lock" width="16px" height="16px" />
-          </button>
-        </div>
-      </template>
-    </atoms-stack-block>
-  </div>
+  <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-password-new
+    v-if="isNewView"
+    v-model:is-enabled-password="isEnabledPassword"
+    v-model:form="form"
+    :disabled="props.disabled"
+    :error-text="passwordErrorText"
+    @set-password-disable="setPasswordDisable"
+    @change-password="changePassword"
+    @generate-password="onGeneratePassword"
+  />
+  <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-password-old
+    v-else
+    v-model:is-enabled-password="isEnabledPassword"
+    v-model:form="form"
+    :disabled="props.disabled"
+    :error-text="passwordErrorText"
+    @set-password-disable="setPasswordDisable"
+    @change-password="changePassword"
+    @generate-password="onGeneratePassword"
+  />
 </template>
 
 <script setup lang="ts">
@@ -59,22 +29,24 @@ import type {
 } from '~/lib/models/interfaces'
 import { generatePassword } from '~/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/password/lib/utils'
 
-const localization = computed<UI_I_Localization>(() => useLocal())
+const password = defineModel<string>('password', {required: true})
 
 const props = defineProps<{
-  password: string
   disabled: boolean
 }>()
 const emits = defineEmits<{
-  (event: 'update:password', value: string): void
   (event: 'valid', value: boolean): void
 }>()
 
-const { $validation } = useNuxtApp()
+const { $store, $validation }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
 const validation = $validation.call({})
 const defaultForm: UI_I_DefaultForm = {
   password: {
-    value: props.password,
+    value: password.value,
     validations: [
       { value: 'password', errorText: localization.value.common.changePasswordError },
     ],
@@ -104,7 +76,7 @@ const setPasswordDisable = (): void => {
 
   removeValidationErrors()
   setForm()
-  emits('update:password', '')
+  password.value = ''
 }
 
 const passwordErrorText = ref<string>('')
@@ -112,31 +84,18 @@ const passwordErrorText = ref<string>('')
 const changePassword = (event: UI_I_HTMLSelectElement): void => {
   showValidationErrors()
 
-  emits('update:password', event.target.value)
+  password.value = event.target.value
 }
 
 const isEnabledPassword = ref<boolean>(false)
 
 const onGeneratePassword = (): void => {
-  const password = generatePassword()
+  const generatedPassword = generatePassword()
 
-  form.value.password.value = password
-  emits('update:password', password)
+  form.value.password.value = generatedPassword
+  password.value = generatedPassword
 }
 </script>
 
 <style scoped>
-#enable-password {
-  margin: 4px 4px 0 0;
-}
-.has-error {
-  border: 1px solid #db2100;
-}
-.generate-password-btn {
-  min-width: unset;
-  margin: 0;
-  padding: 3px;
-  height: unset;
-  display: flex;
-}
 </style>

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/password/PasswordNew.vue

@@ -0,0 +1,100 @@
+<template>
+  <ui-stack-block :has-children="false">
+    <template #stackBlockKey>
+      {{ localization.auth.password }}
+    </template>
+    <template #stackBlockContent>
+      <div class="password-content">
+        <ui-checkbox
+          id="enable-password"
+          v-model="isEnabledPassword"
+          test-id="enable-password-input"
+          :disabled="props.disabled"
+          :label-text="localization.common.enable"
+          @change="emits('set-password-disable')"
+        />
+
+        <ui-input-with-tooltip
+          id="password-input"
+          v-model="form.password.value"
+          test-id="password-input"
+          type="text"
+          size="sm"
+          :class="[{ 'has-error': !!props.errorText }]"
+          :disabled="!isEnabledPassword || props.disabled"
+          :error-text="props.errorText"
+          @change="emits('change-password')"
+        >
+          <template #icon>
+            <div class="pointer" @click="onCopyToClipboard">
+              <ui-icon
+                name="copy-to-clipboard"
+                type="input"
+                width="16"
+                height="16"
+              />
+            </div>
+          </template>
+        </ui-input-with-tooltip>
+
+        <ui-button
+          id="generate-password-button"
+          test-id="generate-password-button"
+          class="generate-password-button"
+          :disabled="!isEnabledPassword || props.disabled"
+          :title="localization.common.generatePassword"
+          @click="emits('generate-password')"
+        >
+          <ui-icon name="key" width="16" height="16" />
+        </ui-button>
+      </div>
+    </template>
+  </ui-stack-block>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_DefaultForm } from '~/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/password/lib/models/interfaces'
+import type {
+  UI_I_Localization,
+} from '~/lib/models/interfaces'
+
+const isEnabledPassword = defineModel<boolean>('is-enabled-password', {
+  required: true,
+})
+const form = defineModel<UI_I_DefaultForm>('form', { required: true })
+
+const props = defineProps<{
+  disabled: boolean
+  errorText: string
+}>()
+const emits = defineEmits<{
+  (event: 'set-password-disable'): void
+  (event: 'change-password'): void
+  (event: 'generate-password'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onCopyToClipboard = (): void => {
+  navigator.clipboard.writeText(form.value.password.value)
+}
+</script>
+
+<style scoped>
+.password-content {
+  display: grid;
+  grid-template-columns: max-content 144px max-content;
+  grid-gap: 8px;
+
+  .generate-password-button {
+    padding: 8px;
+  }
+}
+
+:deep(.ui-main.ui-main-sm .ui-main-input) {
+  height: 32px;
+}
+:deep(.ui-main.ui-main-sm .ui-slot-icon-content) {
+  pointer-events: unset;
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/password/PasswordOld.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.auth.password }}
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-align-center">
+          <input
+            id="enable-password"
+            v-model="isEnabledPassword"
+            data-id="enable-password-input"
+            :disabled="props.disabled"
+            type="checkbox"
+            @change="emits('set-password-disable')"
+          />
+          <label for="enable-password" class="label-text-normal mr-1">{{
+              localization.common.enable
+            }}</label>
+
+          <atoms-tooltip-error :has-error="!!props.errorText">
+            <template #elem>
+              <input
+                id="password-input"
+                v-model="form.password.value"
+                data-id="password-input"
+                type="text"
+                :class="[{ 'has-error': !!props.errorText }]"
+                :disabled="!isEnabledPassword || props.disabled"
+                @input="emits('change-password')"
+              />
+            </template>
+            <template #content>
+              {{ props.errorText }}
+            </template>
+          </atoms-tooltip-error>
+
+          <button
+            id="generate-password-button"
+            data-id="generate-password-button"
+            class="generate-password-btn btn btn-primary"
+            :disabled="!isEnabledPassword || props.disabled"
+            :title="localization.common.generatePassword"
+            @click="emits('generate-password')"
+          >
+            <atoms-the-icon name="lock" width="16px" height="16px" />
+          </button>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_Localization,
+} from '~/lib/models/interfaces'
+
+const isEnabledPassword = defineModel<boolean>('is-enabled-password', {required: true})
+const form = defineModel<any>('form', {required: true})
+
+const props = defineProps<{
+  password: string
+  disabled: boolean
+  errorText: string
+}>()
+const emits = defineEmits<{
+  (event: 'update:password', value: string): void
+  (event: 'valid', value: boolean): void
+  (event: 'set-password-disable'): void
+  (event: 'change-password'): void
+  (event: 'generate-password'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped>
+#enable-password {
+  margin: 4px 4px 0 0;
+}
+.has-error {
+  border: 1px solid #db2100;
+}
+.generate-password-btn {
+  min-width: unset;
+  margin: 0;
+  padding: 3px;
+  height: unset;
+  display: flex;
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/usbRedirection/UsbRedirection.vue

@@ -1,57 +1,28 @@
 <template>
-  <div class="">
-    <atoms-stack-block :has-children="false">
-      <template #stackBlockKey>
-        {{ localization.common.usbRedirection }}
-      </template>
-      <template #stackBlockContent>
-        <div class="select">
-          <select
-            id="usb-redirection-select"
-            v-model="usbRedirectionLocal"
-            data-id="usb-redirection-select"
-            disabled
-          >
-            <option
-              v-for="(item, key) in usbRedirectionOptions"
-              :key="key"
-              :value="item.value"
-            >
-              {{ item.text }}
-            </option>
-          </select>
-        </div>
-      </template>
-    </atoms-stack-block>
-  </div>
+  <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-usb-redirection-new
+    v-if="isNewView"
+    v-model:usb-redirection="usbRedirection"
+    :usb-redirection-options="usbRedirectionOptions"
+  />
+  <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-usb-redirection-old
+    v-else
+    v-model:usb-redirection="usbRedirection"
+    :usb-redirection-options="usbRedirectionOptions"
+  />
 </template>
 
 <script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
 import { usbRedirectionOptionsConfig } from '~/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/usbRedirection/lib/config/config'
 
-const localization = computed<UI_I_Localization>(() => useLocal())
+const usbRedirection = defineModel<number>('usb-redirection', {required: true})
 
-const props = defineProps<{
-  usbRedirection: number
-}>()
-const emits = defineEmits<{
-  (event: 'update:usb-redirection', value: number): void
-}>()
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
 const usbRedirectionOptions = ref<UI_I_OptionItem[]>(
   usbRedirectionOptionsConfig
 )
-
-const usbRedirectionLocal = computed<number>({
-  get() {
-    return props.usbRedirection
-  },
-  set(newValue) {
-    emits('update:usb-redirection', newValue)
-  },
-})
 </script>
 
 <style scoped></style>

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/usbRedirection/UsbRedirectionNew.vue

@@ -0,0 +1,38 @@
+<template>
+  <ui-stack-block :has-children="false">
+    <template #stackBlockKey>
+      {{ localization.common.usbRedirection }}
+    </template>
+    <template #stackBlockContent>
+      <ui-select
+        id="usb-redirection-select"
+        v-model="usbRedirection"
+        :items="props.usbRedirectionOptions"
+        test-id="usb-redirection-select"
+        class="usb-redirection-select"
+        disabled
+      />
+    </template>
+  </ui-stack-block>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const usbRedirection = defineModel<number>('usb-redirection', {
+  required: true,
+})
+
+const props = defineProps<{
+  usbRedirectionOptions: UI_I_OptionItem[]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped>
+:deep(.usb-redirection-select .ui-main-select-toggle) {
+  width: 108px;
+}
+</style>