bfg-common 1.6.95 → 1.6.97

package/components/common/diagramMain/modals/remove/RemoveModalNew.vue

@@ -1,14 +1,24 @@
 <template>
-  <ui-popup
-    :v-if="props.show"
-    :title="title"
-    :message="text"
-    :texts="buttons"
-    icon-name="info-status"
-    size="sm"
-    @hide="onHideModal"
-    @submit="onRemove"
-  />
+  <div>
+    <ui-popup
+      :v-if="props.show"
+      :title="title"
+      :message="text"
+      :texts="buttons"
+      icon-name="circle-warning"
+      size="sm"
+      @hide="onHideModal"
+      @submit="onRemove"
+    >
+      <template #content>
+        <div v-if="props.type === 'port'" class="message">
+          <span class="message-title">{{ title }}</span>
+          <span class="message-item">{{ text[0] }}</span>
+          <span class="message-item">{{ text[1] }}</span>
+        </div>
+      </template>
+    </ui-popup>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -63,16 +73,19 @@ const title = computed<string>(() => {
   }
 })
 
-const text = computed<string>(() => {
+const text = computed<string | string[]>(() => {
   switch (props.type) {
     case 'network':
       return localization.value.common.confirmNetworkRemovalMessage
         .replace('{networkName}', props.label)
         .replace('{switchName}', props.switchName)
     case 'port':
-      return localization.value.common.confirmPortRemovalMessage
-        .replace('{portName}', props.id)
-        .replace('{switchName}', props.switchName)
+      return [
+        localization.value.common.confirmPortRemovalMessage1,
+        localization.value.common.confirmPortRemovalMessage2
+          .replace('{portName}', props.id)
+          .replace('{switchName}', props.switchName),
+      ]
     case 'switch':
       return localization.value.common.confirmSwitchRemovalMessage
         .replace('{switchName}', props.switchName)
@@ -84,7 +97,7 @@ const text = computed<string>(() => {
 
 const buttons = computed<UI_I_ModalTexts>(() => ({
   button1: localization.value.common.cancel,
-  button2: localization.value.common.confirm,
+  button2: localization.value.common.remove,
 }))
 
 const isSphereProject = computed<boolean>(() => props.project === 'sphere')
@@ -103,4 +116,42 @@ const onHideModal = (): void => {
 }
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+:deep(svg) {
+  path {
+    fill: #ea3223;
+  }
+}
+
+.message {
+  padding: 16px 32px;
+
+  &-title {
+    display: block;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0;
+    text-align: center;
+    vertical-align: middle;
+    margin-bottom: 8px;
+    color: var(--title-form-first-color);
+  }
+
+  &-item {
+    display: block;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 18px;
+    letter-spacing: 0;
+    text-align: center;
+    vertical-align: middle;
+    color: #9da6ad;
+    margin-bottom: 12px;
+  }
+
+  span:last-of-type {
+    margin-bottom: 0;
+  }
+}
+</style>

package/components/common/diagramMain/modals/viewSettings/info/InfoNew.vue

@@ -154,4 +154,21 @@ const viewSettingsTabContent = (tab: number): UI_I_ViewSettingsFields[] =>
     }
   }
 }
+
+.tabs-container {
+  :deep(.tabs-wrapper) {
+    //    padding-left: 16px;
+    //    padding-right: 16px;
+    overflow-x: auto;
+    //
+    &::-webkit-scrollbar {
+      height: 0;
+    }
+    //
+    .tab-item {
+      white-space: nowrap;
+      display: inline-block;
+    }
+  }
+}
 </style>

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

@@ -5,6 +5,7 @@
     :view-settings-field="props.viewSettingsField"
     :is-labels-with-dots="props.isLabelsWithDots"
     :is-ready-complete="props.isReadyComplete"
+    :names-width="props.namesWidth"
   />
   <common-diagram-main-modals-view-settings-view-settings-old
     v-else
@@ -25,12 +26,14 @@ const props = withDefaults(
     withCollapse?: boolean
     isLabelsWithDots?: boolean
     isReadyComplete?: boolean
+    namesWidth?: number[]
   }>(),
   {
     viewName: '',
     withCollapse: undefined,
     isLabelsWithDots: false,
     isReadyComplete: false,
+    namesWidth: []
   }
 )
 

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

@@ -7,7 +7,7 @@
       <tbody>
         <tr>
           <td colspan="2">
-            <span>
+            <span class="row-sub-title">
               {{ props.viewSettingsField.title }}
             </span>
           </td>
@@ -18,7 +18,15 @@
             :key="row.name"
             class="table-block"
           >
-            <td class="row-name-container">
+            <td
+              class="row-name-container"
+              :style="
+                props.isReadyComplete && {
+                  width: props.namesWidth?.[0] + 'px',
+                  minWidth: props.namesWidth?.[0] + 'px',
+                }
+              "
+            >
               <span>
                 {{ row.name
                 }}<template v-if="props.isLabelsWithDots">:</template>
@@ -100,6 +108,7 @@ const props = withDefaults(
     viewName?: string
     isLabelsWithDots?: boolean
     isReadyComplete?: boolean
+    namesWidth: number[]
   }>(),
   {
     viewName: '',
@@ -118,18 +127,26 @@ const localization = computed<UI_I_Localization>(() => useLocal())
   width: 100%;
   height: auto;
   box-sizing: border-box;
+  overflow: hidden;
 
   .settings-table {
+    &:not(.ready-complete) {
+      .table-block {
+        display: grid;
+        grid-template-columns: 50% 50%;
+      }
+    }
     width: 100%;
     box-sizing: border-box;
     background-color: transparent;
 
     tr:first-of-type {
       span {
-        font-size: 16px;
+        display: inline-block;
+        color: var(--title-form-first-color);
         font-weight: 500;
-        line-height: 19.36px;
-        color: var(--diagram-info-text);
+        font-size: 14px;
+        line-height: 20px;
       }
       td {
         padding-bottom: 16px;
@@ -142,33 +159,39 @@ const localization = computed<UI_I_Localization>(() => useLocal())
       td {
         &.row-name-container {
           border-right: 16px solid transparent;
-          width: 256px;
-          min-width: 256px;
+          //width: 256px;
+          //min-width: 256px;
           color: var(--diagram-info-second-text);
           font-size: 13px;
           font-weight: 400;
-          line-height: 15.73px;
           padding-bottom: 12px;
+
+          span {
+            line-height: 16px;
+          }
         }
         &.row-value-container {
           padding-bottom: 12px;
+
+          span {
+            line-height: 16px;
+          }
         }
 
-        width: 240px;
+        //width: 240px;
         white-space: normal;
         padding: 0;
-        line-height: 18px;
 
         .settings-table {
           &__values {
             display: inline-block;
             table-layout: auto;
             word-break: break-word;
-            width: 240px;
+            //width: 240px;
 
             font-size: 13px;
             font-weight: 400;
-            line-height: 15.73px;
+            line-height: 16px;
             color: var(--diagram-info-text);
 
             &.is-status-yes {
@@ -192,8 +215,10 @@ const localization = computed<UI_I_Localization>(() => useLocal())
             display: inline-block;
           }
           &__value-icon {
-            //width: 20px;
-            //height: 20px;
+            width: 20px;
+            height: 20px;
+            min-width: 20px;
+            min-height: 20px;
           }
         }
       }
@@ -206,7 +231,7 @@ const localization = computed<UI_I_Localization>(() => useLocal())
     }
     tr td.row-name-container,
     tr td.row-value-container {
-      max-width: 240px;
+      //max-width: 240px;
       word-break: break-word;
     }
 
@@ -214,28 +239,42 @@ const localization = computed<UI_I_Localization>(() => useLocal())
       color: var(--diagram-info-second-text);
       font-size: 13px;
       font-weight: 400;
-      line-height: 15.73px;
+      line-height: 16px;
       display: flex;
 
-      span:first-of-type {
-        margin-right: 8px;
+      span {
+        line-height: 16px;
+
+        &:first-of-type {
+          margin-right: 8px;
+          height: 16px;
+        }
       }
     }
 
     &.ready-complete {
+      .table-block {
+        display: flex;
+      }
+
       .row-name-container {
+        border-right: 24px solid transparent !important;
+        white-space: nowrap;
+
         span {
           font-weight: 400;
           font-size: 13px;
           line-height: 20px;
           letter-spacing: 0;
           vertical-align: middle;
+          width: 100%;
+          display: block;
         }
       }
       .row-value-container {
         & > .settings-table__values {
           display: flex;
-          align-items: center;
+          //align-items: center;
           column-gap: 8px;
         }
         & > .settings-table__values.is-array {
@@ -243,7 +282,7 @@ const localization = computed<UI_I_Localization>(() => useLocal())
           align-items: center;
           flex-wrap: wrap;
           gap: 8px;
-          width: 100%;
+          //width: 100%;
 
           .settings-table__value {
             width: auto;
@@ -266,6 +305,7 @@ const localization = computed<UI_I_Localization>(() => useLocal())
         line-height: 20px;
         letter-spacing: 0;
         vertical-align: middle;
+        //max-width: max-content;
       }
       .settings-table__value-icon {
         //width: 20px;
@@ -274,4 +314,10 @@ const localization = computed<UI_I_Localization>(() => useLocal())
     }
   }
 }
+table,
+th,
+td {
+  border: 0;
+  border-collapse: collapse;
+}
 </style>

package/components/common/diagramMain/modals/viewSettings/viewSettingsModal/ViewSettingsModalNew.vue

@@ -46,5 +46,13 @@ const emits = defineEmits<{
 :deep(.modal-body) {
   max-height: unset;
   overflow-y: unset;
+
+  .info-container {
+    padding-top: 0;
+  }
+  .table-fixed-height {
+    scrollbar-gutter: stable;
+    padding-right: 18px;
+  }
 }
 </style>

package/components/common/diagramMain/skeleton/Header.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="diagram-header-skeleton">
+    <div class="diagram-header-skeleton-title">
+      <ui-skeleton-item width="160" height="22" />
+    </div>
+    <div class="diagram-header-skeleton-buttons">
+      <ui-skeleton-item width="112" height="36" border-radius="8" />
+      <ui-skeleton-item width="160" height="36" border-radius="8" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.diagram-header-skeleton {
+  padding: 16px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  row-gap: 24px;
+  column-gap: 24px;
+
+  &-buttons {
+    display: flex;
+    column-gap: 16px;
+    margin-left: auto;
+  }
+}
+</style>

package/components/common/diagramMain/skeleton/Switch.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="diagram-skeleton">
+    <div class="diagram-skeleton-item-header">
+      <div class="diagram-skeleton-item-header-icon">
+        <ui-icon
+          class="diagram-skeleton-item-header-icon-arrow"
+          name="arrow"
+          width="20"
+          height="20"
+        />
+      </div>
+      <ui-skeleton-item width="160" height="20" />
+      <div class="diagram-skeleton-item-header-line"></div>
+      <ui-skeleton-item width="400" height="20" />
+    </div>
+    <div class="diagram-skeleton-container">
+      <ui-skeleton-switch width="712" />
+    </div>
+    <div class="diagram-skeleton-footer">
+      <ui-skeleton-item width="80" height="20" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.diagram-skeleton {
+  margin: 0 16px 16px;
+  border-radius: 8px;
+  background: var(--diagram-container-bg);
+  box-shadow: 0 1px 4px 0 #00000014;
+  padding: 16px;
+  overflow-clip-margin: content-box;
+  overflow: clip;
+
+  &-item-header {
+    display: flex;
+    column-gap: 16px;
+
+    &-icon {
+      width: 20px;
+      height: 20px;
+      color: var(--select-arrow);
+
+      &-arrow {
+        transform: rotate(180deg);
+        margin-right: -4px;
+      }
+    }
+
+    &-line {
+      height: 20px;
+      border-left: 1px solid var(--horizontal-line);
+    }
+  }
+
+  &-container {
+    display: flex;
+    justify-content: center;
+    min-width: 759px;
+    padding: 48px 23.5px 24px 23.5px;
+
+    //:deep(svg) {
+    //  padding: 22px 14.5px;
+    //}
+  }
+
+  &-footer {
+    padding-top: 16px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>

package/components/common/layout/theHeader/Old.vue

@@ -29,7 +29,7 @@
           >
         </nuxt-link>
       </div>
-      <form style="width: 100%; height: 100%" @click="onTemp">
+      <form>
         <atoms-input-search />
       </form>
 
@@ -146,10 +146,6 @@ const onUpdateLanguage = (language: string): void => {
 }
 
 const isShowFeedback = ref<boolean>(false)
-
-const onTemp = (): void => {
-  useLocalStorage('temp', true)
-}
 </script>
 
 <style scoped lang="scss">

package/components/common/layout/theHeader/ThemeSwitch.vue

@@ -2,7 +2,7 @@
   <ui-tooltip
     id="tooltip-theme-mode-toggle-button"
     test-id="tooltip-theme-mode-toggle-button"
-    size="sm"
+    size="md"
     position="bottom"
     position-by-tooltip="center"
   >

package/components/common/layout/theHeader/modals/reconnect/New.vue

@@ -1,35 +1,37 @@
 <template>
-  <ui-modal
-    :title="props.title"
-    :texts="modalTexts"
-    test-id="reconnect-modal"
-    size="sm"
-    width="560px"
-    show
-    @hide="emits('logout')"
-    @submit="emits('reconnect')"
-  >
-    <template #content>
-      <div class="reconnect-content">
-        <div class="icon-content flex items-center gap-2">
-          <span class="icon-sessions"></span>
-          <span class="description-text">{{
-            localization.common.reconnectDesc
-          }}</span>
+  <div class="reconnect-modal-container">
+    <ui-modal
+        :title="props.title"
+        :texts="modalTexts"
+        test-id="reconnect-modal"
+        size="sm"
+        width="560px"
+        show
+        @hide="emits('logout')"
+        @submit="emits('reconnect')"
+    >
+      <template #content>
+        <div class="reconnect-content">
+          <div class="icon-content flex items-center gap-2">
+            <span class="icon-sessions"></span>
+            <span class="description-text">{{
+                localization.common.reconnectDesc
+              }}</span>
+          </div>
+          <div class="timer-block mt-4">
+            <common-countdown-timer
+                :timer="props.timer"
+                :total-time="props.totalTime"
+                is-hide-seconds-text
+            />
+          </div>
         </div>
-        <div class="timer-block mt-4">
-          <common-countdown-timer
-            :timer="props.timer"
-            :total-time="props.totalTime"
-            is-hide-seconds-text
-          />
-        </div>
-      </div>
-    </template>
-    <template #footerLeftContent>
-      <span></span>
-    </template>
-  </ui-modal>
+      </template>
+      <template #footerLeftContent>
+        <span></span>
+      </template>
+    </ui-modal>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -56,6 +58,12 @@ const modalTexts = ref<UI_I_ModalTexts>({
 </script>
 
 <style lang="scss" scoped>
+.reconnect-modal-container {
+  :deep(.modal), :deep(.modal-background) {
+    z-index: calc(var(--z-modal) + 3);
+  }
+}
+
 .reconnect-content {
   padding: 8px 32px 8px 32px;
 

package/components/common/layout/theHeader/userMenu/modals/changePassword/ChangePassword.vue

@@ -18,6 +18,7 @@ import type {
   UI_I_ChangePasswordForm,
 } from '~/components/common/layout/theHeader/userMenu/modals/changePassword/lib/models/interfaces'
 import type { UI_T_Project } from '~/lib/models/types'
+import { sendTask } from '~/lib/utils/sendTask'
 
 const props = defineProps<{
   hostname: string
@@ -46,22 +47,27 @@ const onChangePassword = async (): Promise<void> => {
 
   onHideModal()
 
-  let sendData:
+  if (props.project === 'sphere') {
+    const username = $store.getters['auth/getUserInfo']?.username ?? ''
+    await sendTask({
+      method: 'IdentityProviders.UserChangePassword',
+      target: username,
+      args: {
+        username: username,
+        password: new_password,
+      },
+    })
+    return
+  }
+
+  const sendData:
     | UI_I_ChangePasswordBodyRequest
     | UI_I_ChangePasswordFirstTimeBodyRequest = {
     current_password,
     new_password,
   }
 
-  let url = ''
-  if (props.project === 'sphere') {
-    sendData = {
-      password: new_password,
-    }
-    url = 'ui/users/current/change_password'
-  } else if (props.project === 'procurator') {
-    url = '/ui/passwd'
-  }
+  const url = '/ui/passwd'
 
   const { error } = await useMyFetch<never, API_UI_I_Error>(url, {
     method: 'POST',

package/components/common/layout/theHeader/userMenu/modals/changePassword/New.vue

@@ -107,24 +107,23 @@ const passwordErrorText = computed<string>(() => {
 const newPasswordErrorText = computed<string>(() => {
   if (!initValidationFields.value.newPassword) return ''
 
-  const { current_password, new_password, confirm_password } = modelLocal.value
+  // const { current_password, new_password, confirm_password } = modelLocal.value
+  const { current_password, new_password } = modelLocal.value
 
   const validateText = validateField(
     localization.value,
     current_password,
     new_password
   )
-  const mismatchError = getPasswordMismatchError(
-    localization.value,
-    new_password,
-    confirm_password
-  )
+  // const mismatchError = getPasswordMismatchError(
+  //   localization.value,
+  //   new_password,
+  //   confirm_password
+  // )
   if (!new_password) {
     return localization.value.common.fieldRequired
   } else if (validateText) {
     return validateText
-  } else if (mismatchError) {
-    return mismatchError
   } else return ''
 })
 const confirmPasswordErrorText = computed<string>(() => {
@@ -166,7 +165,7 @@ const onHideModal = (): void => {
       color: #9da6ad;
       font-size: 12px;
       font-weight: 400;
-      line-height: 14.52px;
+      line-height: 18px;
       margin-bottom: 20px;
     }
     &__alert {