bfg-common 1.1.63 → 1.1.64

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

@@ -1,226 +1,226 @@
-<template>
-  <div>
-    <atoms-modal
-      width="576"
-      height="420"
-      :show="props.show"
-      :title="props.title"
-      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.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.removingSwitchQuestion} ${props.id}?` }}
-            </p>
-          </div>
-        </template>
-      </template>
-      <template #modalFooter>
-        <template v-if="isOkButton">
-          <span>
-            <button
-              id="diagram-remove-modal-ok-button"
-              type="button"
-              class="btn btn-primary"
-              @click="onHideModal"
-            >
-              {{ localization.ok }}
-            </button>
-          </span>
-        </template>
-        <template v-if="isQuestionButton">
-          <span>
-            <button
-              id="diagram-remove-modal-no-button"
-              type="button"
-              class="btn btn-outline"
-              @click="onHideModal"
-            >
-              {{ localization.no }}
-            </button>
-            <button
-              id="diagram-remove-modal-yes-button"
-              type="button"
-              class="btn btn-primary"
-              @click="onRemove(props.id)"
-            >
-              {{ localization.yes }}
-            </button>
-          </span>
-        </template>
-        <template v-if="isRemoveButtons">
-          <span>
-            <button
-              id="diagram-remove-modal-cancel-button"
-              type="button"
-              class="btn btn-outline"
-              @click="onHideModal"
-            >
-              {{ localization.cancel }}
-            </button>
-            <button
-              id="diagram-remove-modal-remove-button"
-              type="button"
-              class="btn btn-primary"
-              @click="onRemove(props.id)"
-            >
-              {{ localization.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 { UI_I_Localization } from '~/models/interfaces'
-
-// Props from up
-const props = withDefaults(
-  defineProps<{
-    show: boolean
-    modalName: string
-    viewName: string
-    title: string
-    id?: string
-    isShowLoader?: boolean
-  }>(),
-  {
-    id: '',
-    isShowLoader: false,
-  }
-)
-
-// 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.removeVMNetworkPortGroupQuestionPartOne} ${props.id} ${localization.value.removeVMNetworkPortGroupQuestionPartTwo}`
-)
-// const removeModalTextPortError = computed<string>(
-//   () =>
-//     `${localization.value.removingTheOnlyVMkernelAdapterWarningMessage1}
-//     ${ localization.value.removingTheOnlyVMkernelAdapterWarningMessage2}`
-// )
-const removeModalTextPort = computed<string>(
-  () =>
-    `${localization.value.portRemoveFirstLineText}
-
-    ${localization.value.portRemoveSecondLineText} ${props.id}?`
-)
-
-// Modal hiding
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'remove', id: string): void
-}>()
-
-const onRemove = (id: string) => {
-  emits('remove', id)
-}
-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: 1000;
-  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
+      width="576"
+      height="420"
+      :show="props.show"
+      :title="props.title"
+      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.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.removingSwitchQuestion} ${props.id}?` }}
+            </p>
+          </div>
+        </template>
+      </template>
+      <template #modalFooter>
+        <template v-if="isOkButton">
+          <span>
+            <button
+              id="diagram-remove-modal-ok-button"
+              type="button"
+              class="btn btn-primary"
+              @click="onHideModal"
+            >
+              {{ localization.ok }}
+            </button>
+          </span>
+        </template>
+        <template v-if="isQuestionButton">
+          <span>
+            <button
+              id="diagram-remove-modal-no-button"
+              type="button"
+              class="btn btn-outline"
+              @click="onHideModal"
+            >
+              {{ localization.no }}
+            </button>
+            <button
+              id="diagram-remove-modal-yes-button"
+              type="button"
+              class="btn btn-primary"
+              @click="onRemove(props.id)"
+            >
+              {{ localization.yes }}
+            </button>
+          </span>
+        </template>
+        <template v-if="isRemoveButtons">
+          <span>
+            <button
+              id="diagram-remove-modal-cancel-button"
+              type="button"
+              class="btn btn-outline"
+              @click="onHideModal"
+            >
+              {{ localization.cancel }}
+            </button>
+            <button
+              id="diagram-remove-modal-remove-button"
+              type="button"
+              class="btn btn-primary"
+              @click="onRemove(props.id)"
+            >
+              {{ localization.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 { UI_I_Localization } from '~/models/interfaces'
+
+// Props from up
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    modalName: string
+    viewName: string
+    title: string
+    id?: string
+    isShowLoader?: boolean
+  }>(),
+  {
+    id: '',
+    isShowLoader: false,
+  }
+)
+
+// 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.removeVMNetworkPortGroupQuestionPartOne} ${props.id} ${localization.value.removeVMNetworkPortGroupQuestionPartTwo}`
+)
+// const removeModalTextPortError = computed<string>(
+//   () =>
+//     `${localization.value.removingTheOnlyVMkernelAdapterWarningMessage1}
+//     ${ localization.value.removingTheOnlyVMkernelAdapterWarningMessage2}`
+// )
+const removeModalTextPort = computed<string>(
+  () =>
+    `${localization.value.portRemoveFirstLineText}
+
+    ${localization.value.portRemoveSecondLineText} ${props.id}?`
+)
+
+// Modal hiding
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'remove', id: string): void
+}>()
+
+const onRemove = (id: string) => {
+  emits('remove', id)
+}
+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: 1000;
+  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>