bfg-common 1.0.75 → 1.0.77

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>

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

@@ -1,94 +1,96 @@
-<template>
-  <div v-if="props.show">
-    <atoms-nav-bar
-      v-if="props.modalTabs && props.modalTabs.length > 0"
-      v-model="selectedTabViewSettings"
-      :items="props.modalTabs"
-    />
-    <template v-if="props.modalTabs && props.modalTabs.length > 0">
-      <template v-for="tab in props.modalTabs" :key="tab.value">
-        <template v-if="selectedTabViewSettings === tab.value">
-          <div
-            :class="[
-              'table-fixed-height',
-              { 'table-fixed-full-height': props.fullMode },
-            ]"
-          >
-            <template
-              v-for="viewSettingsField in viewSettingsTabContent(tab.value)"
-              :key="viewSettingsField.id"
-            >
-              <common-diagram-main-modals-view-settings
-                :view-name="props.viewName"
-                :view-settings-field="viewSettingsField"
-                :with-collapse="props.withCollapse"
-              />
-            </template>
-          </div>
-        </template>
-      </template>
-    </template>
-    <template v-else>
-      <div class="table-fixed-height" :style="{ 'min-height': props.height }">
-        <template
-          v-for="viewSettingsField in props.viewSettingsFields"
-          :key="viewSettingsField.id"
-        >
-          <common-diagram-main-modals-view-settings
-            :view-name="props.viewName"
-            :view-settings-field="viewSettingsField"
-          />
-        </template>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_ViewSettingsFields,
-  UI_I_ModalTab,
-} from '~/components/common/diagramMain/models/interfaces'
-
-// Props from up
-
-const props = withDefaults(
-  defineProps<{
-    show: boolean
-    modalTabs?: UI_I_ModalTab[]
-    viewSettingsFields: UI_I_ViewSettingsFields[]
-    viewName?: string
-    fullMode?: boolean
-    height?: string
-    withCollapse?: boolean
-  }>(),
-  {
-    modalTabs: undefined,
-    height: undefined,
-    viewName: '',
-  }
-)
-
-// Selected tab id on the view settings modal
-const selectedTabViewSettings = ref<number>(0)
-
-// Filtering the selected tab content
-const viewSettingsTabContent = (tab: number): UI_I_ViewSettingsFields[] =>
-  tab === 0
-    ? props.viewSettingsFields
-    : props.viewSettingsFields.filter(
-        (field: UI_I_ViewSettingsFields): boolean => field.type === tab
-      )
-</script>
-
-<style scoped lang="scss">
-.table-fixed-height {
-  min-height: 287px;
-  max-height: 287px;
-  overflow-y: auto;
-
-  &.table-fixed-full-height {
-    max-height: 312px;
-  }
-}
-</style>
+<template>
+  <div v-if="props.show">
+    <atoms-nav-bar
+      v-if="props.modalTabs && props.modalTabs.length > 0"
+      v-model="selectedTabViewSettings"
+      :items="props.modalTabs"
+    />
+    <template v-if="props.modalTabs && props.modalTabs.length > 0">
+      <template v-for="tab in props.modalTabs" :key="tab.value">
+        <template v-if="selectedTabViewSettings === tab.value">
+          <div
+            :class="[
+              'table-fixed-height',
+              { 'table-fixed-full-height': props.fullMode },
+            ]"
+          >
+            <template
+              v-for="viewSettingsField in viewSettingsTabContent(tab.value)"
+              :key="viewSettingsField.id"
+            >
+              <common-diagram-main-modals-view-settings
+                :view-name="props.viewName"
+                :view-settings-field="viewSettingsField"
+                :with-collapse="props.withCollapse"
+              />
+            </template>
+          </div>
+        </template>
+      </template>
+    </template>
+    <template v-else>
+      <div class="table-fixed-height" :style="{ 'min-height': props.height }">
+        <template
+          v-for="viewSettingsField in props.viewSettingsFields"
+          :key="viewSettingsField.id"
+        >
+          <common-diagram-main-modals-view-settings
+            :view-name="props.viewName"
+            :view-settings-field="viewSettingsField"
+          />
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_ViewSettingsFields,
+  UI_I_ModalTab,
+} from '~/components/common/diagramMain/models/interfaces'
+
+// Props from up
+
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    modalTabs?: UI_I_ModalTab[]
+    viewSettingsFields: UI_I_ViewSettingsFields[]
+    viewName?: string
+    fullMode?: boolean
+    height?: string
+    withCollapse?: boolean
+    selectedTab?: number
+  }>(),
+  {
+    modalTabs: undefined,
+    height: undefined,
+    viewName: '',
+    selectedTab: 0,
+  }
+)
+
+// Selected tab id on the view settings modal
+const selectedTabViewSettings = ref<number>(props.selectedTab)
+
+// Filtering the selected tab content
+const viewSettingsTabContent = (tab: number): UI_I_ViewSettingsFields[] =>
+  tab === 0
+    ? props.viewSettingsFields
+    : props.viewSettingsFields.filter(
+        (field: UI_I_ViewSettingsFields): boolean => field.type === tab
+      )
+</script>
+
+<style scoped lang="scss">
+.table-fixed-height {
+  min-height: 287px;
+  max-height: 287px;
+  overflow-y: auto;
+
+  &.table-fixed-full-height {
+    max-height: 312px;
+  }
+}
+</style>