bfg-common 1.6.86 → 1.6.87

package/components/common/diagramMain/modals/remove/RemoveModalOld.vue

@@ -1,241 +1,241 @@
-<template>
-  <div>
-    <atoms-modal
-      :show="props.show"
-      :title="props.title"
-      width="576"
-      height="420"
-      class="diagram-action__remove"
-      @hide="onHideModal"
-    >
-      <template #modalBody>
-        <template v-if="props.viewName === 'vkernel-network-remove'">
-          <div class="modal-body-content modal-body-content__confirmation">
-            <div class="confirm-icon-container">
-              <atoms-diagram-icon name="is-error" />
-            </div>
-            <p class="preserve-newlines">
-              {{ localization.common.vkernelNetworkRemoveWarningMessage }}
-            </p>
-          </div>
-        </template>
-        <template v-if="props.viewName === 'port-network-remove'">
-          <div class="modal-body-content modal-body-content__confirmation">
-            <div class="confirm-icon-container">
-              <atoms-diagram-icon name="is-warning" />
-            </div>
-            <p class="preserve-newlines">
-              {{ removeModalTextNetwork }}
-            </p>
-          </div>
-        </template>
-        <!--        <template v-if="props.viewName === 'port-remove'">-->
-        <!--          <div class="modal-body-content modal-body-content__confirmation">-->
-        <!--            <div class="confirm-icon-container">-->
-        <!--              <atoms-diagram-icon name="is-error" />-->
-        <!--            </div>-->
-        <!--            <p class="preserve-newlines">-->
-        <!--              {{ removeModalTextPort }}-->
-        <!--            </p>-->
-        <!--          </div>-->
-        <!--        </template>-->
-        <template v-if="props.viewName === 'port-remove'">
-          <div class="modal-body-content modal-body-content__confirmation">
-            <div class="confirm-icon-container">
-              <atoms-diagram-icon name="is-warning" />
-            </div>
-            <p class="preserve-newlines">
-              {{ removeModalTextPort }}
-            </p>
-          </div>
-        </template>
-        <template v-if="props.viewName === 'switch-remove'">
-          <div class="modal-body-content modal-body-content__confirmation">
-            <div class="confirm-icon-container">
-              <atoms-diagram-icon name="is-warning" />
-            </div>
-            <p class="preserve-newlines">
-              {{ `${localization.common.removingSwitchQuestion} ${props.id}?` }}
-            </p>
-          </div>
-        </template>
-      </template>
-      <template #modalFooter>
-        <template v-if="isOkButton">
-          <span>
-            <button
-              id="diagram-remove-modal-ok-button"
-              type="button"
-              data-id="diagram-remove-modal-ok-button"
-              class="btn btn-primary"
-              @click="onHideModal"
-            >
-              {{ localization.common.ok }}
-            </button>
-          </span>
-        </template>
-        <template v-if="isQuestionButton">
-          <span>
-            <button
-              id="diagram-remove-modal-no-button"
-              type="button"
-              data-id="diagram-remove-modal-no-button"
-              class="btn btn-outline"
-              @click="onHideModal"
-            >
-              {{ localization.common.no }}
-            </button>
-            <button
-              id="diagram-remove-modal-yes-button"
-              type="button"
-              data-id="diagram-remove-modal-yes-button"
-              class="btn btn-primary"
-              @click="onRemove(props.id, props.type)"
-            >
-              {{ localization.common.yes }}
-            </button>
-          </span>
-        </template>
-        <template v-if="isRemoveButtons">
-          <span>
-            <button
-              id="diagram-remove-modal-cancel-button"
-              type="button"
-              data-id="diagram-remove-modal-cancel-button"
-              class="btn btn-outline"
-              @click="onHideModal"
-            >
-              {{ localization.common.cancel }}
-            </button>
-            <button
-              id="diagram-remove-modal-remove-button"
-              type="button"
-              data-id="diagram-remove-modal-remove-button"
-              class="btn btn-primary"
-              @click="onRemove(props.id, props.type)"
-            >
-              {{ localization.common.remove }}
-            </button>
-          </span>
-        </template>
-        <div v-show="props.isShowLoader" class="loader">
-          <i class="fa clr-tree-node-caret-icon spinner spinner" />
-        </div>
-      </template>
-    </atoms-modal>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_T_Project } from '~/lib/models/types'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-// Props from up
-const props = withDefaults(
-  defineProps<{
-    show: boolean
-    modalName: string
-    viewName: string
-    title: string
-    type: string
-    id?: string
-    isShowLoader?: boolean
-    label?: string
-    networkType: string
-    project: UI_T_Project
-  }>(),
-  {
-    id: '',
-    isShowLoader: false,
-    label: '',
-  }
-)
-
-// Modal hiding
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'remove', id: string, type: string): void
-}>()
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-// Buttons depending on the selected item type
-const isOkButton = computed<boolean>(
-  () => props.viewName === 'vkernel-network-remove'
-)
-const isRemoveButtons = computed<boolean>(
-  () => props.viewName === 'port-remove'
-)
-const isQuestionButton = computed<boolean>(
-  () =>
-    props.viewName === 'port-network-remove' ||
-    props.viewName === 'switch-remove'
-)
-
-const removeModalTextNetwork = computed<string>(
-  () =>
-    `${localization.value.common.removeVMNetworkPortGroupQuestionPartOne} ${props.label} ${localization.value.common.removeVMNetworkPortGroupQuestionPartTwo}`
-)
-
-const removeModalTextPort = computed<string>(
-  () =>
-    `${localization.value.common.portRemoveFirstLineText}
-
-    ${localization.value.common.portRemoveSecondLineText} ${props.id}?`
-)
-
-const isSphereProject = computed<boolean>(() => props.project === 'sphere')
-
-const onRemove = (id: string, type: string) => {
-  const typeLocal = isSphereProject.value
-    ? props.networkType
-      ? `${type}${props.networkType}`
-      : type
-    : type
-
-  emits('remove', id, typeLocal)
-}
-const onHideModal = (): void => {
-  emits('hide')
-}
-</script>
-
-<style scoped lang="scss">
-:deep(.diagram-action__remove) {
-  .modal-body-content {
-    display: flex;
-
-    .confirm-icon-container {
-      margin-right: 20px;
-    }
-
-    .preserve-newlines {
-      white-space: pre-line;
-      font-size: 15px;
-    }
-  }
-}
-.table-fixed-height {
-  min-height: 287px;
-  max-height: 287px;
-  overflow-y: auto;
-}
-
-.loader {
-  position: absolute;
-  z-index: var(--z-fixed);
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(0, 0, 0, 0.3);
-
-  .spinner {
-    left: unset;
-  }
-}
-</style>
+<template>
+  <div>
+    <atoms-modal
+      :show="props.show"
+      :title="props.title"
+      width="576"
+      height="420"
+      class="diagram-action__remove"
+      @hide="onHideModal"
+    >
+      <template #modalBody>
+        <template v-if="props.viewName === 'vkernel-network-remove'">
+          <div class="modal-body-content modal-body-content__confirmation">
+            <div class="confirm-icon-container">
+              <atoms-diagram-icon name="is-error" />
+            </div>
+            <p class="preserve-newlines">
+              {{ localization.common.vkernelNetworkRemoveWarningMessage }}
+            </p>
+          </div>
+        </template>
+        <template v-if="props.viewName === 'port-network-remove'">
+          <div class="modal-body-content modal-body-content__confirmation">
+            <div class="confirm-icon-container">
+              <atoms-diagram-icon name="is-warning" />
+            </div>
+            <p class="preserve-newlines">
+              {{ removeModalTextNetwork }}
+            </p>
+          </div>
+        </template>
+        <!--        <template v-if="props.viewName === 'port-remove'">-->
+        <!--          <div class="modal-body-content modal-body-content__confirmation">-->
+        <!--            <div class="confirm-icon-container">-->
+        <!--              <atoms-diagram-icon name="is-error" />-->
+        <!--            </div>-->
+        <!--            <p class="preserve-newlines">-->
+        <!--              {{ removeModalTextPort }}-->
+        <!--            </p>-->
+        <!--          </div>-->
+        <!--        </template>-->
+        <template v-if="props.viewName === 'port-remove'">
+          <div class="modal-body-content modal-body-content__confirmation">
+            <div class="confirm-icon-container">
+              <atoms-diagram-icon name="is-warning" />
+            </div>
+            <p class="preserve-newlines">
+              {{ removeModalTextPort }}
+            </p>
+          </div>
+        </template>
+        <template v-if="props.viewName === 'switch-remove'">
+          <div class="modal-body-content modal-body-content__confirmation">
+            <div class="confirm-icon-container">
+              <atoms-diagram-icon name="is-warning" />
+            </div>
+            <p class="preserve-newlines">
+              {{ `${localization.common.removingSwitchQuestion} ${props.id}?` }}
+            </p>
+          </div>
+        </template>
+      </template>
+      <template #modalFooter>
+        <template v-if="isOkButton">
+          <span>
+            <button
+              id="diagram-remove-modal-ok-button"
+              type="button"
+              data-id="diagram-remove-modal-ok-button"
+              class="btn btn-primary"
+              @click="onHideModal"
+            >
+              {{ localization.common.ok }}
+            </button>
+          </span>
+        </template>
+        <template v-if="isQuestionButton">
+          <span>
+            <button
+              id="diagram-remove-modal-no-button"
+              type="button"
+              data-id="diagram-remove-modal-no-button"
+              class="btn btn-outline"
+              @click="onHideModal"
+            >
+              {{ localization.common.no }}
+            </button>
+            <button
+              id="diagram-remove-modal-yes-button"
+              type="button"
+              data-id="diagram-remove-modal-yes-button"
+              class="btn btn-primary"
+              @click="onRemove(props.id, props.type)"
+            >
+              {{ localization.common.yes }}
+            </button>
+          </span>
+        </template>
+        <template v-if="isRemoveButtons">
+          <span>
+            <button
+              id="diagram-remove-modal-cancel-button"
+              type="button"
+              data-id="diagram-remove-modal-cancel-button"
+              class="btn btn-outline"
+              @click="onHideModal"
+            >
+              {{ localization.common.cancel }}
+            </button>
+            <button
+              id="diagram-remove-modal-remove-button"
+              type="button"
+              data-id="diagram-remove-modal-remove-button"
+              class="btn btn-primary"
+              @click="onRemove(props.id, props.type)"
+            >
+              {{ localization.common.remove }}
+            </button>
+          </span>
+        </template>
+        <div v-show="props.isShowLoader" class="loader">
+          <i class="fa clr-tree-node-caret-icon spinner spinner" />
+        </div>
+      </template>
+    </atoms-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+// Props from up
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    modalName: string
+    viewName: string
+    title: string
+    type: string
+    id?: string
+    isShowLoader?: boolean
+    label?: string
+    networkType: string
+    project: UI_T_Project
+  }>(),
+  {
+    id: '',
+    isShowLoader: false,
+    label: '',
+  }
+)
+
+// Modal hiding
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'remove', id: string, type: string): void
+}>()
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+// Buttons depending on the selected item type
+const isOkButton = computed<boolean>(
+  () => props.viewName === 'vkernel-network-remove'
+)
+const isRemoveButtons = computed<boolean>(
+  () => props.viewName === 'port-remove'
+)
+const isQuestionButton = computed<boolean>(
+  () =>
+    props.viewName === 'port-network-remove' ||
+    props.viewName === 'switch-remove'
+)
+
+const removeModalTextNetwork = computed<string>(
+  () =>
+    `${localization.value.common.removeVMNetworkPortGroupQuestionPartOne} ${props.label} ${localization.value.common.removeVMNetworkPortGroupQuestionPartTwo}`
+)
+
+const removeModalTextPort = computed<string>(
+  () =>
+    `${localization.value.common.portRemoveFirstLineText}
+
+    ${localization.value.common.portRemoveSecondLineText} ${props.id}?`
+)
+
+const isSphereProject = computed<boolean>(() => props.project === 'sphere')
+
+const onRemove = (id: string, type: string) => {
+  const typeLocal = isSphereProject.value
+    ? props.networkType
+      ? `${type}${props.networkType}`
+      : type
+    : type
+
+  emits('remove', id, typeLocal)
+}
+const onHideModal = (): void => {
+  emits('hide')
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.diagram-action__remove) {
+  .modal-body-content {
+    display: flex;
+
+    .confirm-icon-container {
+      margin-right: 20px;
+    }
+
+    .preserve-newlines {
+      white-space: pre-line;
+      font-size: 15px;
+    }
+  }
+}
+.table-fixed-height {
+  min-height: 287px;
+  max-height: 287px;
+  overflow-y: auto;
+}
+
+.loader {
+  position: absolute;
+  z-index: var(--z-fixed);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.3);
+
+  .spinner {
+    left: unset;
+  }
+}
+</style>

package/components/common/diagramMain/modals/viewSettings/info/Info.vue

@@ -1,57 +1,57 @@
-<template>
-  <common-diagram-main-modals-view-settings-info-new
-    v-if="isNewView"
-    :show="props.show"
-    :modal-tabs="props.modalTabs"
-    :view-settings-fields="props.viewSettingsFields"
-    :view-name="props.viewName"
-    :full-mode="props.fullMode"
-    :height="props.height"
-  />
-  <common-diagram-main-modals-view-settings-info-old
-    v-else
-    :show="props.show"
-    :modal-tabs="props.modalTabs"
-    :view-settings-fields="props.viewSettingsFields"
-    :view-name="props.viewName"
-    :full-mode="props.fullMode"
-    :height="props.height"
-    :with-collapse="props.withCollapse"
-  >
-    <template #dynamic="{ dynamicName, data }">
-      <slot :name="dynamicName" :data="data" />
-    </template>
-  </common-diagram-main-modals-view-settings-info-old>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_ViewSettingsFields,
-  UI_I_ModalTab,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    show: boolean
-    viewSettingsFields: UI_I_ViewSettingsFields[]
-    modalTabs?: UI_I_ModalTab[]
-    viewName?: string
-    fullMode?: boolean
-    height?: string
-    withCollapse?: boolean
-  }>(),
-  {
-    modalTabs: undefined,
-    viewName: '',
-    fullMode: undefined,
-    height: undefined,
-    withCollapse: undefined,
-  }
-)
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <common-diagram-main-modals-view-settings-info-new
+    v-if="isNewView"
+    :show="props.show"
+    :modal-tabs="props.modalTabs"
+    :view-settings-fields="props.viewSettingsFields"
+    :view-name="props.viewName"
+    :full-mode="props.fullMode"
+    :height="props.height"
+  />
+  <common-diagram-main-modals-view-settings-info-old
+    v-else
+    :show="props.show"
+    :modal-tabs="props.modalTabs"
+    :view-settings-fields="props.viewSettingsFields"
+    :view-name="props.viewName"
+    :full-mode="props.fullMode"
+    :height="props.height"
+    :with-collapse="props.withCollapse"
+  >
+    <template #dynamic="{ dynamicName, data }">
+      <slot :name="dynamicName" :data="data" />
+    </template>
+  </common-diagram-main-modals-view-settings-info-old>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_ViewSettingsFields,
+  UI_I_ModalTab,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    viewSettingsFields: UI_I_ViewSettingsFields[]
+    modalTabs?: UI_I_ModalTab[]
+    viewName?: string
+    fullMode?: boolean
+    height?: string
+    withCollapse?: boolean
+  }>(),
+  {
+    modalTabs: undefined,
+    viewName: '',
+    fullMode: undefined,
+    height: undefined,
+    withCollapse: undefined,
+  }
+)
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>
+
+<style scoped lang="scss"></style>