bfg-common 1.4.618 → 1.4.620

package/components/common/diagramMain/modals/editSettings/tabs/TeamingFailover.vue

@@ -1,175 +1,175 @@
-<template>
-  <div class="wizard-content__container">
-    <div class="wizard-content">
-      <form id="teaming-failover">
-        <section class="form-block">
-          <template
-            v-for="(item, key) in teamingAndFailoverTemplate"
-            :key="item.key"
-          >
-            <div class="horizontal-flex-container">
-              <span class="flex-property-label-group large">
-                {{ localization.common[item.key] }}
-              </span>
-
-              <div class="flex-property-value-group overridable-dropdown">
-                <div class="horizontal-flex-container no-margin">
-                  <div class="flex-property-value-group">
-                    <div class="horizontal-flex-container">
-                      <div
-                        v-if="!props.isSwitch"
-                        class="flex-property-label-group small checkbox-inline"
-                      >
-                        <input
-                          :id="`teaming-failover-input-${item.key}`"
-                          v-model="fieldsValues[item.key].checked"
-                          :data-id="`${item.testId}-teaming-failover-input`"
-                          type="checkbox"
-                        />
-                        <label
-                          :for="`teaming-failover-input-${item.key}`"
-                          class="normal-weight"
-                        >
-                          {{ localization.common.override }}
-                        </label>
-                      </div>
-                      <div class="flex-property-value-group">
-                        <div class="select">
-                          <select
-                            :id="`teaming-failover-select-${key}`"
-                            v-model="fieldsValues[item.key].selected"
-                            :data-id="`${item.testId}-teaming-failover-select`"
-                            :disabled="!fieldsValues[item.key].checked"
-                            name="selectName"
-                          >
-                            <template
-                              v-for="(option, index) in item.options"
-                              :key="index"
-                            >
-                              <option :value="option.value">
-                                {{ option.text }}
-                              </option>
-                            </template>
-                          </select>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </template>
-        </section>
-        <div class="form-block">
-          <label> {{ localization.common.failoverOrder }} </label>
-        </div>
-      </form>
-      <div v-if="!props.isSwitch" class="horizontal-flex-container">
-        <div class="flex-property-label-group small checkbox-inline">
-          <input
-            id="failover-order"
-            v-model="fieldsValues.failoverOrder.checked"
-            data-id="failover-order-input"
-            type="checkbox"
-          />
-          <label for="failover-order" class="normal-weight">
-            {{ localization.common.override }}
-          </label>
-        </div>
-      </div>
-      <common-adapter-manager
-        test-id="teaming-failover"
-        :is-active="fieldsValues.failoverOrder.checked"
-        :adapters="props.adapters"
-        :initial-data="props.initialData"
-        :adapter-status="props.adapterStatus"
-        :is-dark-mode="props.isDarkMode"
-        @change-adapter-status="onChangeAdapterStatus"
-      />
-      <div class="select-adapter-info">
-        <span>
-          {{ localization.common.selectActiveAndStandbyAdapters }}
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_Localization,
-  UI_I_ItemsWithTotalCounts,
-} from '~/lib/models/interfaces'
-import type {
-  UI_I_TeamingFailoverFields,
-  UI_I_SwitchAdapterItem,
-  UI_I_ModalsInitialData,
-  UI_I_TeamingAndFailoverTemplate,
-  UI_I_AdapterStatus,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import {
-  teamingFailoverFieldsInitialFunc,
-  teamingAndFailoverTemplateMakerFunc,
-} from '~/components/common/diagramMain/modals/lib/config'
-
-// Props from up
-const props = withDefaults(
-  defineProps<{
-    initialData?: UI_I_ModalsInitialData
-    adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
-    adapterStatus: UI_I_AdapterStatus
-    isSwitch: boolean
-    isDarkMode?: boolean
-  }>(),
-  {
-    initialData: () => ({}),
-    isSwitch: false,
-    isDarkMode: false,
-  }
-)
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-// Making fields template
-const teamingAndFailoverTemplate = computed<UI_I_TeamingAndFailoverTemplate[]>(
-  () => teamingAndFailoverTemplateMakerFunc(localization.value)
-)
-// Temporary data for this component
-const fieldsValues = ref<UI_I_TeamingFailoverFields>(
-  teamingFailoverFieldsInitialFunc(props.isSwitch, props.initialData)
-)
-
-const emits = defineEmits<{
-  (
-    event: 'change-edit-teaming-failover-data',
-    teamingFailoverData: UI_I_TeamingFailoverFields
-  ): void
-  (event: 'change-adapter-status', adapterStatus: UI_I_AdapterStatus): void
-}>()
-
-const onChangeData = (data: UI_I_TeamingFailoverFields) =>
-  emits('change-edit-teaming-failover-data', data)
-
-const onChangeAdapterStatus = (adapterStatus: UI_I_AdapterStatus) =>
-  emits('change-adapter-status', adapterStatus)
-
-watch(
-  fieldsValues,
-  (newFieldsValues: UI_I_TeamingFailoverFields) => {
-    onChangeData(newFieldsValues)
-  },
-  { deep: true, immediate: true }
-)
-
-onMounted(() => {
-  onChangeData(fieldsValues.value)
-})
-</script>
-<style lang="scss" scoped>
-:deep(.diagram-action__edit) {
-  .table-fixed-height {
-    max-height: 227px;
-  }
-}
-</style>
+<template>
+  <div class="wizard-content__container">
+    <div class="wizard-content">
+      <form id="teaming-failover">
+        <section class="form-block">
+          <template
+            v-for="(item, key) in teamingAndFailoverTemplate"
+            :key="item.key"
+          >
+            <div class="horizontal-flex-container">
+              <span class="flex-property-label-group large">
+                {{ localization.common[item.key] }}
+              </span>
+
+              <div class="flex-property-value-group overridable-dropdown">
+                <div class="horizontal-flex-container no-margin">
+                  <div class="flex-property-value-group">
+                    <div class="horizontal-flex-container">
+                      <div
+                        v-if="!props.isSwitch"
+                        class="flex-property-label-group small checkbox-inline"
+                      >
+                        <input
+                          :id="`teaming-failover-input-${item.key}`"
+                          v-model="fieldsValues[item.key].checked"
+                          :data-id="`${item.testId}-teaming-failover-input`"
+                          type="checkbox"
+                        />
+                        <label
+                          :for="`teaming-failover-input-${item.key}`"
+                          class="normal-weight"
+                        >
+                          {{ localization.common.override }}
+                        </label>
+                      </div>
+                      <div class="flex-property-value-group">
+                        <div class="select">
+                          <select
+                            :id="`teaming-failover-select-${key}`"
+                            v-model="fieldsValues[item.key].selected"
+                            :data-id="`${item.testId}-teaming-failover-select`"
+                            :disabled="!fieldsValues[item.key].checked"
+                            name="selectName"
+                          >
+                            <template
+                              v-for="(option, index) in item.options"
+                              :key="index"
+                            >
+                              <option :value="option.value">
+                                {{ option.text }}
+                              </option>
+                            </template>
+                          </select>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </section>
+        <div class="form-block">
+          <label> {{ localization.common.failoverOrder }} </label>
+        </div>
+      </form>
+      <div v-if="!props.isSwitch" class="horizontal-flex-container">
+        <div class="flex-property-label-group small checkbox-inline">
+          <input
+            id="failover-order"
+            v-model="fieldsValues.failoverOrder.checked"
+            data-id="failover-order-input"
+            type="checkbox"
+          />
+          <label for="failover-order" class="normal-weight">
+            {{ localization.common.override }}
+          </label>
+        </div>
+      </div>
+      <common-adapter-manager
+        test-id="teaming-failover"
+        :is-active="fieldsValues.failoverOrder.checked"
+        :adapters="props.adapters"
+        :initial-data="props.initialData"
+        :adapter-status="props.adapterStatus"
+        :is-dark-mode="props.isDarkMode"
+        @change-adapter-status="onChangeAdapterStatus"
+      />
+      <div class="select-adapter-info">
+        <span>
+          {{ localization.common.selectActiveAndStandbyAdapters }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_Localization,
+  UI_I_ItemsWithTotalCounts,
+} from '~/lib/models/interfaces'
+import type {
+  UI_I_TeamingFailoverFields,
+  UI_I_SwitchAdapterItem,
+  UI_I_ModalsInitialData,
+  UI_I_TeamingAndFailoverTemplate,
+  UI_I_AdapterStatus,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import {
+  teamingFailoverFieldsInitialFunc,
+  teamingAndFailoverTemplateMakerFunc,
+} from '~/components/common/diagramMain/modals/lib/config'
+
+// Props from up
+const props = withDefaults(
+  defineProps<{
+    initialData?: UI_I_ModalsInitialData
+    adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
+    adapterStatus: UI_I_AdapterStatus
+    isSwitch: boolean
+    isDarkMode?: boolean
+  }>(),
+  {
+    initialData: () => ({}),
+    isSwitch: false,
+    isDarkMode: false,
+  }
+)
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+// Making fields template
+const teamingAndFailoverTemplate = computed<UI_I_TeamingAndFailoverTemplate[]>(
+  () => teamingAndFailoverTemplateMakerFunc(localization.value)
+)
+// Temporary data for this component
+const fieldsValues = ref<UI_I_TeamingFailoverFields>(
+  teamingFailoverFieldsInitialFunc(props.isSwitch, props.initialData)
+)
+
+const emits = defineEmits<{
+  (
+    event: 'change-edit-teaming-failover-data',
+    teamingFailoverData: UI_I_TeamingFailoverFields
+  ): void
+  (event: 'change-adapter-status', adapterStatus: UI_I_AdapterStatus): void
+}>()
+
+const onChangeData = (data: UI_I_TeamingFailoverFields) =>
+  emits('change-edit-teaming-failover-data', data)
+
+const onChangeAdapterStatus = (adapterStatus: UI_I_AdapterStatus) =>
+  emits('change-adapter-status', adapterStatus)
+
+watch(
+  fieldsValues,
+  (newFieldsValues: UI_I_TeamingFailoverFields) => {
+    onChangeData(newFieldsValues)
+  },
+  { deep: true, immediate: true }
+)
+
+onMounted(() => {
+  onChangeData(fieldsValues.value)
+})
+</script>
+<style lang="scss" scoped>
+:deep(.diagram-action__edit) {
+  .table-fixed-height {
+    max-height: 227px;
+  }
+}
+</style>