bfg-common 1.5.442 → 1.5.443

package/components/common/wizards/network/add/steps/selectTargetDevice/modals/new/SelectNetwork.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="select-table-modal">
+    <ui-modal
+      v-if="props.show"
+      :title="localization.common.selectNetwork"
+      test-id="select-network-modal"
+      size="sm"
+      width="656px"
+      :texts="texts"
+      :is-disabled-accept="!selectedRowData?.length"
+      @hide="emits('hide')"
+      @submit="onSelectNetwork"
+    >
+      <template #content>
+        <div class="table-top-margin-container">
+          <ui-data-table
+            test-id="data-table-main"
+            :data="data"
+            :options="tableNetworkOptionsNew"
+            size="sm"
+            :default-layout="false"
+            @select-row="onSelectRow"
+          >
+            <template #icon="{ item }">
+              <span class="row-container">
+                <span :class="item.icon"></span>
+                <span>{{ item.text }}</span>
+              </span>
+            </template>
+          </ui-data-table>
+          <p class="footer-info">
+            {{ footerText }}
+          </p>
+        </div>
+      </template>
+      <template #footerLeftContent>
+        <span></span>
+      </template>
+    </ui-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_DataTable,
+  UI_I_DataTableHeader,
+  UI_I_DataTableBody,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_NetworkForAdding,
+  UI_I_SelectedNetwork,
+} from '~/components/common/wizards/network/add/lib/models/interfaces'
+import {
+  selectNetworkTableHeadNewFunc,
+  selectNetworkTableBodyNewFunc,
+  tableNetworkOptionsNew,
+} from '~/components/common/wizards/network/add/lib/config/config'
+
+const props = defineProps<{
+  show: boolean
+  data: UI_I_NetworkForAdding[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'select-network', networkId: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const texts = computed(() => ({
+  button1: localization.value.common.cancel,
+  button2: localization.value.common.select,
+}))
+
+const selectedRowData = ref<UI_I_SelectedNetwork[]>([])
+
+const headItems = computed<UI_I_DataTableHeader[]>(() =>
+  selectNetworkTableHeadNewFunc(localization.value)
+)
+
+const bodyItems = ref<UI_I_DataTableBody[]>([])
+
+watch(
+  () => props.data,
+  (newValue) => {
+    if (!newValue?.length) {
+      bodyItems.value = []
+      return
+    }
+
+    bodyItems.value = selectNetworkTableBodyNewFunc(newValue)
+  },
+  { deep: true, immediate: true }
+)
+
+const data = computed<UI_I_DataTable>(() => ({
+  id: 'select-network-table',
+  header: headItems.value,
+  body: bodyItems.value,
+}))
+
+const footerText = computed<string>(
+  () => `${data.value.body.length} ${localization.value.common.networkS}`
+)
+
+const onSelectRow = (item: UI_I_DataTableBody[]): void => {
+  selectedRowData.value = [
+    {
+      editable: false,
+      id: item[0].data[0].text,
+      isEdit: false,
+      text: item[0].data[0].text,
+    },
+  ]
+}
+
+const onSelectNetwork = (): void => {
+  const selectedNetworkId =
+    selectedRowData.value &&
+    selectedRowData.value[0] &&
+    selectedRowData.value[0].id
+
+  emits('select-network', selectedNetworkId)
+  selectedRowData.value = []
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.table-container) {
+  padding: 8px 32px !important;
+}
+
+.row-container {
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+
+  span:first-of-type {
+    width: 18px;
+    height: 18px;
+  }
+
+  span:last-of-type {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    vertical-align: middle;
+  }
+}
+
+.footer-info {
+  padding-right: 32px;
+  padding-bottom: 8px;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 15px;
+  text-align: right;
+  vertical-align: middle;
+  color: #9da6ad;
+}
+</style>

package/components/common/wizards/network/add/steps/selectTargetDevice/modals/new/SelectStandardSwitch.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="select-table-modal">
+    <ui-modal
+      v-if="props.show"
+      :title="localization.common.selectSwitch"
+      test-id="select-standard-switch-modal"
+      size="sm"
+      width="560px"
+      :texts="texts"
+      :is-disabled-accept="!selectedRowData?.length"
+      @hide="emits('hide')"
+      @submit="onSelectSwitch"
+    >
+      <template #content>
+        <div class="table-top-margin-container">
+          <ui-data-table
+            test-id="data-table-main"
+            :data="data"
+            :options="tableOptionsNew"
+            size="sm"
+            :default-layout="false"
+            @select-row="onSelectRow"
+          >
+            <template #icon="{ item }">
+              <span class="row-container">
+                <span :class="item.icon"></span>
+                <span>{{ item.text }}</span>
+              </span>
+            </template>
+          </ui-data-table>
+          <p class="footer-info">
+            {{ footerText }}
+          </p>
+        </div>
+      </template>
+      <template #footerLeftContent>
+        <span></span>
+      </template>
+    </ui-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_DataTable,
+  UI_I_DataTableHeader,
+  UI_I_DataTableBody,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_Switch,
+  UI_I_SelectedSwitch,
+} from '~/components/common/wizards/network/add/lib/models/interfaces'
+import {
+  selectStandardSwitchTableHeadNewFunc,
+  selectStandardSwitchTableBodyNewFunc,
+  tableOptionsNew,
+} from '~/components/common/wizards/network/add/lib/config/config'
+
+const props = defineProps<{
+  show: boolean
+  data: UI_I_Switch[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'select-standard-switch', switchId: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const texts = computed(() => ({
+  button1: localization.value.common.cancel,
+  button2: localization.value.common.select,
+}))
+
+const selectedRowData = ref<UI_I_SelectedSwitch[]>([])
+
+const headItems = computed<UI_I_DataTableHeader[]>(() =>
+  selectStandardSwitchTableHeadNewFunc(localization.value)
+)
+
+const bodyItems = ref<UI_I_DataTableBody[]>([])
+
+watch(
+  () => props.data,
+  (newValue) => {
+    if (!newValue?.length) {
+      bodyItems.value = []
+      return
+    }
+
+    bodyItems.value = selectStandardSwitchTableBodyNewFunc(newValue)
+  },
+  { deep: true, immediate: true }
+)
+
+const data = computed<UI_I_DataTable>(() => ({
+  id: 'select-standard-switch-table',
+  header: headItems.value,
+  body: bodyItems.value,
+}))
+
+const footerText = computed<string>(
+  () => `${data.value.body.length} ${localization.value.common.switchEs}`
+)
+
+const onSelectRow = (item: UI_I_DataTableBody[]): void => {
+  selectedRowData.value = [
+    {
+      editable: false,
+      id: item[0].data[0].text,
+      isEdit: false,
+      text: item[0].data[0].text,
+    },
+  ]
+}
+
+const onSelectSwitch = (): void => {
+  const selectedSwitchId =
+    selectedRowData.value &&
+    selectedRowData.value[0] &&
+    selectedRowData.value[0].id
+
+  emits('select-standard-switch', selectedSwitchId)
+  selectedRowData.value = []
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.table-container) {
+  padding: 8px 32px !important;
+}
+
+.row-container {
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+
+  span:first-of-type {
+    width: 18px;
+    height: 18px;
+  }
+
+  span:last-of-type {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    vertical-align: middle;
+  }
+}
+
+.footer-info {
+  padding-right: 32px;
+  padding-bottom: 8px;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 15px;
+  text-align: right;
+  vertical-align: middle;
+  color: #9da6ad;
+}
+</style>

package/components/common/wizards/network/add/steps/selectTargetDevice/modals/new/SelectSwitch.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="select-table-modal">
+    <ui-modal
+      v-if="props.show"
+      :title="localization.common.selectSwitch"
+      test-id="select-switch-modal"
+      size="sm"
+      width="560px"
+      :texts="texts"
+      :is-disabled-accept="!selectedRowData?.length"
+      @hide="emits('hide')"
+      @submit="onSelectSwitch"
+    >
+      <template #content>
+        <div class="table-top-margin-container">
+          <ui-data-table
+            test-id="data-table-main"
+            :data="data"
+            :options="tableOptionsNew"
+            size="sm"
+            :default-layout="false"
+            @select-row="onSelectRow"
+          >
+            <template #icon="{ item }">
+              <span class="row-container">
+                <span :class="item.icon"></span>
+                <span>{{ item.text }}</span>
+              </span>
+            </template>
+          </ui-data-table>
+          <p class="footer-info">
+            {{ footerText }}
+          </p>
+        </div>
+      </template>
+      <template #footerLeftContent>
+        <span></span>
+      </template>
+    </ui-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_DataTable,
+  UI_I_DataTableHeader,
+  UI_I_DataTableBody,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_Switch,
+  UI_I_SelectedSwitch,
+} from '~/components/common/wizards/network/add/lib/models/interfaces'
+import {
+  selectSwitchTableHeadNewFunc,
+  selectSwitchTableBodyNewFunc,
+  tableOptionsNew,
+} from '~/components/common/wizards/network/add/lib/config/config'
+
+const props = defineProps<{
+  show: boolean
+  data: UI_I_Switch[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'select-switch', switchId: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const texts = computed(() => ({
+  button1: localization.value.common.cancel,
+  button2: localization.value.common.select,
+}))
+
+const selectedRowData = ref<UI_I_SelectedSwitch[]>([])
+
+const headItems = computed<UI_I_DataTableHeader[]>(() =>
+  selectSwitchTableHeadNewFunc(localization.value)
+)
+
+const bodyItems = ref<UI_I_DataTableBody[]>([])
+
+watch(
+  () => props.data,
+  (newValue) => {
+    if (!newValue?.length) {
+      bodyItems.value = []
+      return
+    }
+
+    bodyItems.value = selectSwitchTableBodyNewFunc(newValue)
+  },
+  { deep: true, immediate: true }
+)
+
+const data = computed<UI_I_DataTable>(() => ({
+  id: 'select-switch-table',
+  header: headItems.value,
+  body: bodyItems.value,
+}))
+
+const footerText = computed<string>(
+  () => `${data.value.body.length} ${localization.value.common.switchEs}`
+)
+
+const onSelectRow = (item: UI_I_DataTableBody[]): void => {
+  selectedRowData.value = [
+    {
+      editable: false,
+      id: item[0].data[0].text,
+      isEdit: false,
+      text: item[0].data[0].text,
+    },
+  ]
+}
+
+const onSelectSwitch = (): void => {
+  const selectedSwitchId =
+    selectedRowData.value &&
+    selectedRowData.value[0] &&
+    selectedRowData.value[0].id
+
+  emits('select-switch', selectedSwitchId)
+  selectedRowData.value = []
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.table-container) {
+  padding: 8px 32px !important;
+}
+
+.row-container {
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+
+  span:first-of-type {
+    width: 18px;
+    height: 18px;
+  }
+
+  span:last-of-type {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    vertical-align: middle;
+  }
+}
+
+.footer-info {
+  padding-right: 32px;
+  padding-bottom: 8px;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 15px;
+  text-align: right;
+  vertical-align: middle;
+  color: #9da6ad;
+}
+</style>

package/components/common/wizards/network/add/{modals → steps/selectTargetDevice/modals/old}/SelectNetwork.vue

@@ -1,22 +1,19 @@
 <template>
   <div class="select-table-modal">
     <atoms-modal
-      :width="props.width"
-      :height="props.height"
+      width="576px"
+      height="468px"
       :show="props.show"
-      :title="props.title"
-      test-id="select-modal"
-      @hide="onHideModal"
+      :title="localization.common.selectNetwork"
+      @hide="emits('hide')"
     >
       <template #modalBody>
         <atoms-alert
-          v-if="isShowErrorMessageAlert"
-          :items="[
-            localization.common.noSwitchIsSelectedSelectSwitchToContinue,
-          ]"
+          v-if="props.isShowAlert"
+          :items="[localization.common.noNetworkSelected]"
           status="alert-danger"
           test-id="select-network-alert"
-          @remove="onHideErrorMessageAlert"
+          @remove="emits('hide-alert')"
         />
         <div class="network-select-dialog-content">
           <div class="filter-input pull-right flex">
@@ -34,19 +31,28 @@
               data-id="select-network-filter-input"
             />
           </div>
-          <atoms-table-simple-table
-            :head-items="headItems"
-            :body-items="bodyItems"
-            editable
-            @select="onSelectRow"
-          />
+          <div
+            :class="[
+              'table-top-margin-container',
+              {
+                'with-alert': props.isShowAlert,
+              },
+            ]"
+          >
+            <atoms-table-simple-table
+              :head-items="headItems"
+              :body-items="bodyItems"
+              editable
+              @select="onSelectRow"
+            />
+          </div>
         </div>
       </template>
       <template #modalFooter>
         <button
           data-id="select-network-hide-button"
           class="btn btn-outline"
-          @click="onHideModal"
+          @click="emits('hide')"
         >
           {{ localization.common.cancel }}
         </button>
@@ -69,38 +75,28 @@ import type {
   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
-    data: UI_I_NetworkForAdding[]
-    title?: string
-    width?: string
-    height?: string
-    withCollapse?: boolean
-  }>(),
-  {
-    width: '576px',
-    height: '420px',
-    title: '--',
-    withCollapse: undefined,
-  }
-)
+import { selectNetworkTableHeadFunc } from '~/components/common/wizards/network/add/lib/config/config'
+
+const props = defineProps<{
+  show: boolean
+  data: UI_I_NetworkForAdding[]
+  isShowAlert: boolean
+}>()
 
 const emits = defineEmits<{
   (event: 'hide'): void
+  (event: 'hide-alert'): void
+  (event: 'show-alert'): void
   (event: 'select-network', networkId: string): void
 }>()
 
 // UI_I_Localization
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const selectedRowData = ref<UI_I_SelectedNetwork[]>()
+const selectedRowData = ref<UI_I_SelectedNetwork[]>([])
 const filter = ref<string>('')
 
-const headItems = selectStandardSwitchTableHeadFunc(localization.value)
+const headItems = selectNetworkTableHeadFunc(localization.value)
 
 const bodyItems = computed<UI_I_BodyItems[][]>(() =>
   props.data.map((networkData: UI_I_NetworkForAdding) => [
@@ -120,14 +116,8 @@ const bodyItems = computed<UI_I_BodyItems[][]>(() =>
   ])
 )
 
-const isShowErrorMessageAlert = ref<boolean>(false)
-const onHideErrorMessageAlert = (): void => {
-  selectedRowData.value = []
-  isShowErrorMessageAlert.value = false
-}
-
-const onSelectRow = (index: number): void => {
-  selectedRowData.value = bodyItems.value[index]
+const onSelectRow = (_index: number, item: UI_I_SelectedNetwork[]): void => {
+  selectedRowData.value = item
 }
 
 const onSelectNetwork = (): void => {
@@ -135,28 +125,35 @@ const onSelectNetwork = (): void => {
     selectedRowData.value &&
     selectedRowData.value[0] &&
     selectedRowData.value[0].id
+
+  console.log(555, selectedNetworkId)
   if (!selectedNetworkId) {
-    isShowErrorMessageAlert.value = true
+    emits('show-alert')
     return
   }
-  emits('select-network', selectedNetworkId)
-  onHideErrorMessageAlert()
-  emits('hide')
-}
 
-const onHideModal = (): void => {
-  onHideErrorMessageAlert()
-  emits('hide')
+  emits('select-network', selectedNetworkId)
+  selectedRowData.value = []
 }
 </script>
 
 <style scoped lang="scss">
 .network-select-dialog-content {
-  min-height: 264px;
+  min-height: 260px;
   margin-top: 10px;
 
   .table-wrap {
-    height: 272px;
+    height: 264px;
+  }
+
+  .with-alert {
+    :deep(.table-wrap) {
+      height: 226px;
+    }
+  }
+
+  .table-top-margin-container {
+    margin-top: 8px;
   }
 
   .pull-right {