bfg-common 1.0.0

package/components/common/diagramMain/modals/editSettings/EditSettings.vue

@@ -0,0 +1,490 @@
+<template>
+  <div class="wizard-tab__container">
+    <div class="vertical-tabs__fixed-position">
+      <atoms-tabs-vertical-tabs
+        v-model="selectedTab"
+        :items="props.items"
+        :has-error-messages="hasErrorMessages"
+        @set-alert="onShowErrorMessageAlert"
+      />
+    </div>
+    <template v-if="isNetwork || isSwitch">
+      <common-diagram-main-modals-edit-settings-tabs-network-properties
+        v-if="isNetwork"
+        v-show="selectedTab === '1'"
+        :is-show-error-message-alert="isShowErrorMessageAlert"
+        :error-messages="errorMessages"
+        :initial-data="props.initialData"
+        :has-error-messages="hasErrorMessages"
+        :network-already-exists="networkAlreadyExists"
+        @change-edit-properties-data="onChangeNetworkEditPropertiesData"
+        @change-error-messages="onChangeErrorMessages"
+        @hide-error-message-alert="onHideErrorMessageAlert"
+      />
+      <common-diagram-main-modals-edit-settings-tabs-switch-properties
+        v-if="isSwitch"
+        v-show="selectedTab === '1'"
+        :is-show-error-message-alert="isShowErrorMessageAlert"
+        :error-messages="errorMessages"
+        :initial-data="props.initialData"
+        :has-error-messages="hasErrorMessages"
+        @change-edit-properties-data="onChangeSwitchEditPropertiesData"
+        @change-error-messages="onChangeErrorMessages"
+        @hide-error-message-alert="onHideErrorMessageAlert"
+      />
+      <common-diagram-main-modals-edit-settings-tabs-security
+        v-show="selectedTab === '2'"
+        :is-switch="isSwitch"
+        :initial-data="props.initialData"
+        @change-edit-security-data="onChangeEditSecurityData"
+      />
+      <common-diagram-main-modals-edit-settings-tabs-traffic-shaping
+        v-show="selectedTab === '3'"
+        :is-show-error-message-alert="isShowErrorMessageAlert"
+        :error-messages="errorMessages"
+        :initial-data="props.initialData"
+        :has-error-messages="hasErrorMessages"
+        :is-switch="isSwitch"
+        @change-edit-traffic-shaping-data="onChangeEditTrafficShapingData"
+        @change-error-messages="onChangeErrorMessages"
+        @hide-error-message-alert="onHideErrorMessageAlert"
+      />
+      <common-diagram-main-modals-edit-settings-tabs-teaming-failover
+        v-show="selectedTab === '4'"
+        :is-switch="isSwitch"
+        :adapters="props.adapters"
+        :initial-data="props.initialData"
+        :adapter-status="adapterStatus"
+        @change-edit-teaming-failover-data="onChangeEditTeamingFailoverData"
+        @change-adapter-status="onChangeAdapterStatus"
+      />
+    </template>
+    <template v-if="isPort">
+      <common-diagram-main-modals-edit-settings-tabs-port-properties
+        v-show="selectedTab === '1'"
+        :is-show-error-message-alert="isShowErrorMessageAlert"
+        :error-messages="errorMessages"
+        :initial-data="props.initialData"
+        :has-error-messages="hasErrorMessages"
+        @change-error-messages="onChangeErrorMessages"
+        @change-port-edit-properties-data="onChangePortEditPropertiesData"
+        @hide-error-message-alert="onHideErrorMessageAlert"
+      />
+      <common-diagram-main-modals-edit-settings-tabs-port-ipv-four-settings
+        v-show="selectedTab === '2'"
+        :is-show-error-message-alert="isShowErrorMessageAlert"
+        :error-messages="errorMessages"
+        :initial-data="props.initialData"
+        :has-error-messages="hasErrorMessages"
+        @change-error-messages="onChangeErrorMessages"
+        @change-port-ipv-four-data="onChangePortEditIpvFourData"
+        @hide-error-message-alert="onHideErrorMessageAlert"
+      />
+    </template>
+    <!--    <atoms-loader v-show="false" />-->
+    <common-diagram-main-modals-edit-settings-confirm-teaming-settings-modal
+      :is-show="isShowWithoutActiveAdapterModal"
+      @hide="onHideWithoutActiveAdapterModal"
+      @submit="onApproveWithoutActiveAdapterModal"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_AdapterStatus,
+  UI_I_ModalsInitialData,
+  UI_I_SwitchAdapters,
+  UI_I_SecurityFields,
+  UI_I_TrafficShapingFields,
+  UI_I_TeamingFailoverFields,
+  UI_I_EditFieldsData,
+  UI_I_PropertiesFields,
+  UI_I_EditSettingsErrorMessage,
+  UI_I_SwitchPropertiesFields,
+  UI_I_PortPropertiesFields,
+  UI_I_IpvFourSettingsFields,
+} from '~/components/common/diagramMain/models/interfaces'
+
+// Props from up
+const props = withDefaults(
+  defineProps<{
+    viewName: string
+    items: {
+      value: string
+      text: string
+    }[]
+    initialData?: UI_I_ModalsInitialData
+    adapters: UI_I_SwitchAdapters
+    flagSendData: boolean
+  }>(),
+  {
+    initialData: () => ({}),
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'change-edit-fields-data', editFieldsData: UI_I_EditFieldsData): void
+  (
+    event: 'check-network-label',
+    networkLabel: string,
+    cb: (error_message: string) => void,
+    hideLoader?: () => void
+  ): void
+  (event: 'send-edit-data', type: string): void
+}>()
+
+// View for the switch or the network
+const isSwitch = computed<boolean>(() => props.viewName === 'switch-edit')
+const isNetwork = computed<boolean>(() => props.viewName === 'network-edit')
+const isPort = computed<boolean>(() => props.viewName === 'port-edit')
+
+// Modal selected tab number
+const selectedTab = ref<string>('1')
+
+// Error notification from the nexted components validation
+const errorMessages = ref<UI_I_EditSettingsErrorMessage>({
+  networkLabel: '',
+  vlanId: '',
+  average: '',
+  peak: '',
+  burstSize: '',
+  mtu: '',
+  ipFourAddress: '',
+  subnetMask: '',
+  defaultGateway: '',
+})
+
+const onChangeErrorMessages = (
+  newErrorMessage: string,
+  fieldName: keyof UI_I_EditSettingsErrorMessage
+): void => {
+  errorMessages.value[fieldName] = newErrorMessage
+}
+
+const hasErrorMessages = computed(
+  () => !!Object.values(errorMessages.value).filter((err) => err !== '').length
+)
+
+// flag: to show error message
+const isShowErrorMessageAlert = ref<boolean>(false)
+
+const onShowErrorMessageAlert = (): void => {
+  isShowErrorMessageAlert.value = true
+}
+
+const onHideErrorMessageAlert = (): void => {
+  isShowErrorMessageAlert.value = false
+}
+
+const networkEditData = ref<UI_I_EditFieldsData>({})
+const initialNetworkLabel = ref<string>('-initial-networkLabel-123')
+
+const isFailoverOrderOverride = computed<string | number | boolean | undefined>(
+  () => networkEditData.value?.teamingFailover?.failoverOrder.checked
+)
+
+const adapterStatus = ref<UI_I_AdapterStatus>({
+  active: [],
+  standBy: [],
+  unused: [],
+})
+const adapterStatusInitial = ref<UI_I_AdapterStatus>({
+  active: [],
+  standBy: [],
+  unused: [],
+})
+
+const onChangeAdapterStatus = (newAdapterStatus: UI_I_AdapterStatus) => {
+  adapterStatus.value = newAdapterStatus
+}
+
+const onCheckNetworkLabel = (
+  networkLabel: string,
+  cb: (error_message: string) => void
+) => {
+  emits('check-network-label', networkLabel, cb)
+}
+
+const onChangeNetworkEditPropertiesData = (
+  newNetworkEditPropertiesData: UI_I_PropertiesFields
+) => {
+  networkEditData.value.properties = newNetworkEditPropertiesData
+  initialNetworkLabel.value === '-initial-networkLabel-123' &&
+    (initialNetworkLabel.value = newNetworkEditPropertiesData.networkLabel)
+}
+const onChangeSwitchEditPropertiesData = (
+  newSwitchEditPropertiesData: UI_I_SwitchPropertiesFields
+) => {
+  networkEditData.value.properties = newSwitchEditPropertiesData
+}
+const onChangePortEditPropertiesData = (
+  newPortEditPropertiesData: UI_I_PortPropertiesFields
+) => {
+  networkEditData.value.properties = newPortEditPropertiesData
+}
+const onChangePortEditIpvFourData = (
+  newPortEditIpvFourData: UI_I_IpvFourSettingsFields
+) => {
+  networkEditData.value.ipvFourSettings = newPortEditIpvFourData
+}
+
+const onChangeEditSecurityData = (newEditSecurityData: UI_I_SecurityFields) => {
+  networkEditData.value.security = newEditSecurityData
+}
+const onChangeEditTrafficShapingData = (
+  newEditTrafficShapingData: UI_I_TrafficShapingFields
+) => {
+  networkEditData.value.trafficShaping = newEditTrafficShapingData
+}
+const onChangeEditTeamingFailoverData = (
+  newEditTeamingFailoverData: UI_I_TeamingFailoverFields
+) => {
+  networkEditData.value.teamingFailover = {
+    ...newEditTeamingFailoverData,
+    adapters: adapterStatus.value,
+  }
+}
+
+const changeEditFieldsData = (newNetworkEditData: UI_I_EditFieldsData) =>
+  emits('change-edit-fields-data', newNetworkEditData)
+
+watch(
+  networkEditData,
+  (newNetworkEditData: UI_I_EditFieldsData) => {
+    changeEditFieldsData(newNetworkEditData)
+  },
+  { deep: true, immediate: true }
+)
+
+const isShowWithoutActiveAdapterModal = ref(false)
+const warningModalOpenedFromSending = ref(false)
+const isApprovedAdapterStatus = ref(true)
+
+const setApproveAdapterStatus = (value: boolean) =>
+  (isApprovedAdapterStatus.value = value)
+const onShowWithoutActiveAdapterModal = () => {
+  isShowWithoutActiveAdapterModal.value = true
+}
+const onHideWithoutActiveAdapterModal = () => {
+  isShowWithoutActiveAdapterModal.value = false
+  warningModalOpenedFromSending.value = false
+  setApproveAdapterStatus(false)
+}
+
+const onApproveWithoutActiveAdapterModal = () => {
+  setApproveAdapterStatus(true)
+  if (warningModalOpenedFromSending.value) {
+    onSendData()
+    warningModalOpenedFromSending.value = false
+    onHideWithoutActiveAdapterModal()
+    return
+  }
+
+  isShowWithoutActiveAdapterModal.value = false
+  selectedTab.value = selectedTabInAlertModal.value
+  lastSavedAdapterStatus.value = useDeepCopy(adapterStatus.value)
+}
+
+const isCheckedNetworkLabel = ref(false)
+const networkAlreadyExists = ref(false)
+
+const checkNetworkLabelCallback = (
+  type: 'tab' | 'send',
+  error_message: string,
+  newSelectedTab?: string
+) => {
+  if (!error_message) {
+    isCheckedNetworkLabel.value = true
+    networkAlreadyExists.value = false
+    type === 'tab' && (selectedTab.value = newSelectedTab || '4')
+    type === 'send' && emits('send-edit-data', props.viewName)
+    return
+  }
+
+  errorMessages.value.networkLabel = error_message
+  networkAlreadyExists.value = true
+  onShowErrorMessageAlert()
+}
+
+const networkLabel = computed<string>(
+  () => networkEditData.value.properties?.networkLabel
+)
+const onSendData = () => {
+  if (isNetwork.value) {
+    if (!networkLabel.value) {
+      onShowErrorMessageAlert()
+      return
+    }
+    initialNetworkLabel.value !== networkLabel.value &&
+    selectedTab.value === '1'
+      ? onCheckNetworkLabel(networkLabel.value || '', (error_message) =>
+          checkNetworkLabelCallback('send', error_message)
+        )
+      : emits('send-edit-data', props.viewName)
+  }
+
+  ;(isSwitch.value || isPort.value) && emits('send-edit-data', props.viewName)
+}
+
+const isNotChangedAdapterStatusFunc = (): boolean => {
+  const adapterStatusString = JSON.stringify(adapterStatus.value)
+  const adapterStatusInitialString = JSON.stringify(adapterStatusInitial.value)
+  const adapterStatusLastSavedString = JSON.stringify(
+    lastSavedAdapterStatus.value
+  )
+
+  return (
+    adapterStatusString === adapterStatusInitialString ||
+    adapterStatusString === adapterStatusLastSavedString
+  )
+}
+
+watch(
+  () => props.flagSendData,
+  () => {
+    if (hasErrorMessages.value) {
+      onShowErrorMessageAlert()
+      return
+    }
+    const isNotChangedAdapterStatus = isNotChangedAdapterStatusFunc()
+    if (
+      !isFailoverOrderOverride.value ||
+      (isNotChangedAdapterStatus && isApprovedAdapterStatus.value)
+    ) {
+      onSendData()
+      return
+    }
+
+    warningModalOpenedFromSending.value = true
+    onShowWithoutActiveAdapterModal()
+  }
+)
+
+const selectedTabInAlertModal = ref<string>('')
+const lastSavedAdapterStatus = ref<UI_I_AdapterStatus>()
+
+const stopTabChanging = (newSelectedTab: string) => {
+  adapterStatus.value.active.length === 0 && (selectedTab.value = '4')
+  selectedTabInAlertModal.value = newSelectedTab
+  lastSavedAdapterStatus.value = useDeepCopy(adapterStatus.value)
+  onShowWithoutActiveAdapterModal()
+}
+
+watch(selectedTab, (newSelectedTab, oldSelectedTab) => {
+  if (oldSelectedTab === '4') {
+    if (!selectedTabInAlertModal.value && isFailoverOrderOverride.value) {
+      const isNotChangedAdapterStatus = isNotChangedAdapterStatusFunc()
+      if (isNotChangedAdapterStatus) {
+        lastSavedAdapterStatus.value = useDeepCopy(adapterStatus.value)
+        return
+      }
+
+      stopTabChanging(newSelectedTab)
+    } else if (
+      selectedTabInAlertModal.value &&
+      !isApprovedAdapterStatus.value &&
+      isFailoverOrderOverride.value
+    ) {
+      stopTabChanging(newSelectedTab)
+    } else if (selectedTabInAlertModal.value) {
+      selectedTabInAlertModal.value = ''
+    }
+  }
+
+  if (
+    isNetwork.value &&
+    newSelectedTab !== '1' &&
+    !isCheckedNetworkLabel.value
+  ) {
+    selectedTab.value = '1'
+    if (
+      networkLabel.value !== initialNetworkLabel.value &&
+      networkLabel.value !== ''
+    ) {
+      onCheckNetworkLabel(networkLabel.value || '', (error_message) =>
+        checkNetworkLabelCallback('tab', error_message, newSelectedTab)
+      )
+    } else if (networkLabel.value === '') {
+      onShowErrorMessageAlert()
+    } else {
+      isCheckedNetworkLabel.value = true
+      selectedTab.value = newSelectedTab
+    }
+  }
+})
+
+watch(
+  adapterStatus,
+  (newAdapterStatus: UI_I_AdapterStatus) => {
+    setApproveAdapterStatus(true)
+    if (networkEditData.value.teamingFailover) {
+      networkEditData.value.teamingFailover = {
+        ...networkEditData.value.teamingFailover,
+        adapters: newAdapterStatus,
+      }
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => networkLabel.value,
+  (newNetworkEditData, oldNetworkEditData) => {
+    if (newNetworkEditData === oldNetworkEditData) return
+    isCheckedNetworkLabel.value = false
+    errorMessages.value = { ...errorMessages.value, networkLabel: '' }
+  },
+  { deep: true }
+)
+
+onMounted(() => {
+  const active = useDeepCopy(props.initialData.activeAdapters) || []
+  const standBy = useDeepCopy(props.initialData.standbyAdapters) || []
+  const unused = useDeepCopy(props.initialData.unusedAdapters) || []
+  const adapterStatusInit = {
+    active,
+    standBy,
+    unused,
+  }
+  adapterStatus.value = adapterStatusInit
+  adapterStatusInitial.value = adapterStatusInit
+})
+</script>
+
+<style scoped lang="scss">
+:deep(.alert-modal) {
+  .modal-dialog .modal-header {
+    padding-bottom: 24px;
+    border-bottom: none;
+  }
+  .warning-text {
+    color: #666666;
+    font-size: 14px;
+    margin-top: 24px;
+  }
+}
+:deep(.wizard-content__container) {
+  margin-left: 220px;
+}
+.vertical-tabs__fixed-position {
+  position: absolute;
+}
+
+.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>