bfg-common 1.5.84 → 1.5.86

package/components/common/wizards/network/add/modals/SelectNetwork.vue

@@ -1,173 +1,173 @@
-<template>
-  <div class="select-table-modal">
-    <atoms-modal
-      :width="props.width"
-      :height="props.height"
-      :show="props.show"
-      :title="props.title"
-      test-id="select-modal"
-      @hide="onHideModal"
-    >
-      <template #modalBody>
-        <atoms-alert
-          v-if="isShowErrorMessageAlert"
-          status="alert-danger"
-          :items="[localization.common.noSwitchIsSelectedSelectSwitchToContinue]"
-          test-id="select-network-alert"
-          @remove="onHideErrorMessageAlert"
-        />
-        <div class="network-select-dialog-content">
-          <div class="filter-input pull-right flex">
-            <button class="nav-icon fa fa-filter filter-button">
-              <atoms-the-icon
-                class="filter-icon"
-                fill="#4c5356"
-                name="filter"
-              />
-            </button>
-            <input
-              v-model="filter"
-              type="text"
-              data-id="select-network-filter-input"
-              placeholder="Filter"
-            />
-          </div>
-          <atoms-table-simple-table
-            :head-items="headItems"
-            :body-items="bodyItems"
-            editable
-            @select="onSelectRow"
-          />
-        </div>
-      </template>
-      <template #modalFooter>
-        <button
-          data-id="select-network-hide-button"
-          class="btn btn-outline"
-          @click="onHideModal"
-        >
-          {{ localization.common.cancel }}
-        </button>
-        <button
-          data-id="select-network-submit-button"
-          class="btn btn-primary"
-          @click="onSelectNetwork"
-        >
-          {{ localization.common.ok }}
-        </button>
-      </template>
-    </atoms-modal>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_BodyItems,
-  UI_I_NetworkForAdding,
-  UI_I_SelectedNetwork,
-} from '~/components/common/wizards/network/add/lib/models/interfaces'
-import { selectStandardSwitchTableHeadFunc } from '~/components/common/wizards/network/add/lib/config/config'
-
-const props = withDefaults(
-  defineProps<{
-    show: boolean
-    modalName: string
-    title?: string
-    width?: string
-    height?: string
-    withCollapse?: boolean
-    data: UI_I_NetworkForAdding[]
-  }>(),
-  {
-    width: '576px',
-    height: '420px',
-    title: '--',
-  }
-)
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const selectedRowData = ref<UI_I_SelectedNetwork[]>()
-const filter = ref<string>('')
-
-const headItems = selectStandardSwitchTableHeadFunc(localization.value)
-
-const bodyItems = computed<UI_I_BodyItems[][]>(() =>
-  props.data.map((networkData: UI_I_NetworkForAdding) => [
-    {
-      editable: false,
-      text: networkData.name,
-      id: networkData.id,
-    },
-    {
-      editable: false,
-      text: '--',
-    },
-    {
-      editable: false,
-      text: '--',
-    },
-  ])
-)
-
-const isShowErrorMessageAlert = ref<boolean>(false)
-const onHideErrorMessageAlert = (): void => {
-  selectedRowData.value = []
-  isShowErrorMessageAlert.value = false
-}
-
-const onSelectRow = (index: number): void => {
-  selectedRowData.value = bodyItems.value[index]
-}
-
-const onSelectNetwork = (): void => {
-  const selectedNetworkId =
-    selectedRowData.value &&
-    selectedRowData.value[0] &&
-    selectedRowData.value[0].id
-  if (!selectedNetworkId) {
-    isShowErrorMessageAlert.value = true
-    return
-  }
-  emits('select-network', selectedNetworkId)
-  onHideErrorMessageAlert()
-  emits('hide')
-}
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'select-network', networkId: string): void
-}>()
-const onHideModal = (): void => {
-  onHideErrorMessageAlert()
-  emits('hide')
-}
-</script>
-
-<style scoped lang="scss">
-.network-select-dialog-content {
-  min-height: 264px;
-  margin-top: 10px;
-
-  .table-wrap {
-    height: 272px;
-  }
-
-  .pull-right {
-    display: flex;
-    justify-content: flex-end;
-  }
-  .filter-button {
-    border-style: none;
-    background-color: transparent;
-    padding: 0;
-
-    .filter-icon {
-      width: 18px;
-      height: 18px;
-    }
-  }
-}
-</style>
+<template>
+  <div class="select-table-modal">
+    <atoms-modal
+      :width="props.width"
+      :height="props.height"
+      :show="props.show"
+      :title="props.title"
+      test-id="select-modal"
+      @hide="onHideModal"
+    >
+      <template #modalBody>
+        <atoms-alert
+          v-if="isShowErrorMessageAlert"
+          status="alert-danger"
+          :items="[localization.common.noSwitchIsSelectedSelectSwitchToContinue]"
+          test-id="select-network-alert"
+          @remove="onHideErrorMessageAlert"
+        />
+        <div class="network-select-dialog-content">
+          <div class="filter-input pull-right flex">
+            <button class="nav-icon fa fa-filter filter-button">
+              <atoms-the-icon
+                class="filter-icon"
+                fill="#4c5356"
+                name="filter"
+              />
+            </button>
+            <input
+              v-model="filter"
+              type="text"
+              data-id="select-network-filter-input"
+              placeholder="Filter"
+            />
+          </div>
+          <atoms-table-simple-table
+            :head-items="headItems"
+            :body-items="bodyItems"
+            editable
+            @select="onSelectRow"
+          />
+        </div>
+      </template>
+      <template #modalFooter>
+        <button
+          data-id="select-network-hide-button"
+          class="btn btn-outline"
+          @click="onHideModal"
+        >
+          {{ localization.common.cancel }}
+        </button>
+        <button
+          data-id="select-network-submit-button"
+          class="btn btn-primary"
+          @click="onSelectNetwork"
+        >
+          {{ localization.common.ok }}
+        </button>
+      </template>
+    </atoms-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_BodyItems,
+  UI_I_NetworkForAdding,
+  UI_I_SelectedNetwork,
+} from '~/components/common/wizards/network/add/lib/models/interfaces'
+import { selectStandardSwitchTableHeadFunc } from '~/components/common/wizards/network/add/lib/config/config'
+
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    modalName: string
+    title?: string
+    width?: string
+    height?: string
+    withCollapse?: boolean
+    data: UI_I_NetworkForAdding[]
+  }>(),
+  {
+    width: '576px',
+    height: '420px',
+    title: '--',
+  }
+)
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedRowData = ref<UI_I_SelectedNetwork[]>()
+const filter = ref<string>('')
+
+const headItems = selectStandardSwitchTableHeadFunc(localization.value)
+
+const bodyItems = computed<UI_I_BodyItems[][]>(() =>
+  props.data.map((networkData: UI_I_NetworkForAdding) => [
+    {
+      editable: false,
+      text: networkData.name,
+      id: networkData.id,
+    },
+    {
+      editable: false,
+      text: '--',
+    },
+    {
+      editable: false,
+      text: '--',
+    },
+  ])
+)
+
+const isShowErrorMessageAlert = ref<boolean>(false)
+const onHideErrorMessageAlert = (): void => {
+  selectedRowData.value = []
+  isShowErrorMessageAlert.value = false
+}
+
+const onSelectRow = (index: number): void => {
+  selectedRowData.value = bodyItems.value[index]
+}
+
+const onSelectNetwork = (): void => {
+  const selectedNetworkId =
+    selectedRowData.value &&
+    selectedRowData.value[0] &&
+    selectedRowData.value[0].id
+  if (!selectedNetworkId) {
+    isShowErrorMessageAlert.value = true
+    return
+  }
+  emits('select-network', selectedNetworkId)
+  onHideErrorMessageAlert()
+  emits('hide')
+}
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'select-network', networkId: string): void
+}>()
+const onHideModal = (): void => {
+  onHideErrorMessageAlert()
+  emits('hide')
+}
+</script>
+
+<style scoped lang="scss">
+.network-select-dialog-content {
+  min-height: 264px;
+  margin-top: 10px;
+
+  .table-wrap {
+    height: 272px;
+  }
+
+  .pull-right {
+    display: flex;
+    justify-content: flex-end;
+  }
+  .filter-button {
+    border-style: none;
+    background-color: transparent;
+    padding: 0;
+
+    .filter-icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+}
+</style>

package/components/common/wizards/network/add/modals/SelectStandardSwitch.vue

@@ -1,138 +1,138 @@
-<template>
-  <div class="select-table-modal">
-    <atoms-modal
-      :width="props.width"
-      :height="props.height"
-      :show="props.show"
-      :title="props.title"
-      @hide="onHideModal"
-    >
-      <template #modalBody>
-        <atoms-alert
-          v-if="isShowErrorMessageAlert"
-          status="alert-danger"
-          :items="[localization.common.noSwitchIsSelectedSelectSwitchToContinue]"
-          test-id="select-standard-switch-alert"
-          @remove="onHideErrorMessageAlert"
-        />
-        <div class="table-top-margin-container">
-          <atoms-table-simple-table
-            :head-items="headItems"
-            :body-items="bodyItems"
-            editable
-            @select="onSelectRow"
-          />
-        </div>
-      </template>
-      <template #modalFooter>
-        <button
-          data-id="select-standard-switch-hide-button"
-          class="btn btn-outline"
-          @click="onHideModal"
-        >
-          {{ localization.common.cancel }}
-        </button>
-        <button
-          data-id="select-standard-switch-submit-button"
-          class="btn btn-primary"
-          @click="onSelectSwitch"
-        >
-          {{ localization.common.ok }}
-        </button>
-      </template>
-    </atoms-modal>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_Switch,
-  UI_I_SelectedSwitch,
-  UI_I_BodyItems,
-} from '~/components/common/wizards/network/add/lib/models/interfaces'
-import { selectStandardSwitchTableHeadFunc } from '~/components/common/wizards/network/add/lib/config/config'
-
-interface I_SelectSwitchModalProps {
-  show: boolean
-  modalName: string
-  title?: string
-  width?: string
-  height?: string
-  withCollapse?: boolean
-  standardSwitchesInitial: UI_I_Switch[]
-}
-
-const props = withDefaults(defineProps<I_SelectSwitchModalProps>(), {
-  width: '576px',
-  height: '420px',
-  title: '--',
-})
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const selectedRowData = ref<UI_I_SelectedSwitch[]>()
-
-const standardSwitches = ref<UI_I_Switch[]>(props.standardSwitchesInitial)
-
-const headItems = selectStandardSwitchTableHeadFunc(localization.value)
-
-const bodyItems = computed<UI_I_BodyItems[][]>(() =>
-  standardSwitches.value.map((switchData: UI_I_Switch) => [
-    {
-      editable: false,
-      text: switchData.name,
-      id: switchData.id,
-    },
-  ])
-)
-
-watch(
-  () => props.standardSwitchesInitial,
-  (newStandardSwitches: UI_I_Switch[]) => {
-    standardSwitches.value = newStandardSwitches
-  },
-  { deep: true, immediate: true }
-)
-
-const isShowErrorMessageAlert = ref<boolean>(false)
-const onHideErrorMessageAlert = (): void => {
-  selectedRowData.value = []
-  isShowErrorMessageAlert.value = false
-}
-
-const onSelectRow = (_index: number, item: UI_I_SelectedSwitch[]): void => {
-  selectedRowData.value = item
-}
-
-const onSelectSwitch = (): void => {
-  const selectedSwitchId =
-    selectedRowData.value &&
-    selectedRowData.value[0] &&
-    selectedRowData.value[0].id
-
-  if (!selectedSwitchId) {
-    isShowErrorMessageAlert.value = true
-    return
-  }
-  emits('select-standard-switch', selectedSwitchId)
-  onHideErrorMessageAlert()
-  emits('hide')
-}
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'select-standard-switch', switchId: string): void
-}>()
-const onHideModal = (): void => {
-  onHideErrorMessageAlert()
-  emits('hide')
-}
-</script>
-
-<style scoped lang="scss">
-:deep(.table-wrap) {
-  height: 300px;
-}
-</style>
+<template>
+  <div class="select-table-modal">
+    <atoms-modal
+      :width="props.width"
+      :height="props.height"
+      :show="props.show"
+      :title="props.title"
+      @hide="onHideModal"
+    >
+      <template #modalBody>
+        <atoms-alert
+          v-if="isShowErrorMessageAlert"
+          status="alert-danger"
+          :items="[localization.common.noSwitchIsSelectedSelectSwitchToContinue]"
+          test-id="select-standard-switch-alert"
+          @remove="onHideErrorMessageAlert"
+        />
+        <div class="table-top-margin-container">
+          <atoms-table-simple-table
+            :head-items="headItems"
+            :body-items="bodyItems"
+            editable
+            @select="onSelectRow"
+          />
+        </div>
+      </template>
+      <template #modalFooter>
+        <button
+          data-id="select-standard-switch-hide-button"
+          class="btn btn-outline"
+          @click="onHideModal"
+        >
+          {{ localization.common.cancel }}
+        </button>
+        <button
+          data-id="select-standard-switch-submit-button"
+          class="btn btn-primary"
+          @click="onSelectSwitch"
+        >
+          {{ localization.common.ok }}
+        </button>
+      </template>
+    </atoms-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_Switch,
+  UI_I_SelectedSwitch,
+  UI_I_BodyItems,
+} from '~/components/common/wizards/network/add/lib/models/interfaces'
+import { selectStandardSwitchTableHeadFunc } from '~/components/common/wizards/network/add/lib/config/config'
+
+interface I_SelectSwitchModalProps {
+  show: boolean
+  modalName: string
+  title?: string
+  width?: string
+  height?: string
+  withCollapse?: boolean
+  standardSwitchesInitial: UI_I_Switch[]
+}
+
+const props = withDefaults(defineProps<I_SelectSwitchModalProps>(), {
+  width: '576px',
+  height: '420px',
+  title: '--',
+})
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedRowData = ref<UI_I_SelectedSwitch[]>()
+
+const standardSwitches = ref<UI_I_Switch[]>(props.standardSwitchesInitial)
+
+const headItems = selectStandardSwitchTableHeadFunc(localization.value)
+
+const bodyItems = computed<UI_I_BodyItems[][]>(() =>
+  standardSwitches.value.map((switchData: UI_I_Switch) => [
+    {
+      editable: false,
+      text: switchData.name,
+      id: switchData.id,
+    },
+  ])
+)
+
+watch(
+  () => props.standardSwitchesInitial,
+  (newStandardSwitches: UI_I_Switch[]) => {
+    standardSwitches.value = newStandardSwitches
+  },
+  { deep: true, immediate: true }
+)
+
+const isShowErrorMessageAlert = ref<boolean>(false)
+const onHideErrorMessageAlert = (): void => {
+  selectedRowData.value = []
+  isShowErrorMessageAlert.value = false
+}
+
+const onSelectRow = (_index: number, item: UI_I_SelectedSwitch[]): void => {
+  selectedRowData.value = item
+}
+
+const onSelectSwitch = (): void => {
+  const selectedSwitchId =
+    selectedRowData.value &&
+    selectedRowData.value[0] &&
+    selectedRowData.value[0].id
+
+  if (!selectedSwitchId) {
+    isShowErrorMessageAlert.value = true
+    return
+  }
+  emits('select-standard-switch', selectedSwitchId)
+  onHideErrorMessageAlert()
+  emits('hide')
+}
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'select-standard-switch', switchId: string): void
+}>()
+const onHideModal = (): void => {
+  onHideErrorMessageAlert()
+  emits('hide')
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.table-wrap) {
+  height: 300px;
+}
+</style>