bfg-common 1.3.467 → 1.3.468

package/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/lib/config/radioOptions.ts

@@ -0,0 +1,22 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_RadioItemLang } from '~/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/lib/models/interfaces'
+
+export const radioOptionsFunc = (
+  localization: UI_I_Localization
+): UI_I_RadioItemLang[] => {
+  return [
+    {
+      id: 1,
+      label: localization.browserDefault,
+      value: 'BROWSER',
+      testId: 'browser-type',
+    },
+    {
+      id: 2,
+      label: localization.specifyLanguage,
+      value: 'LANG',
+      selectLang: true,
+      testId: 'specify-language-type',
+    },
+  ]
+}

package/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/lib/models/enums.ts

@@ -0,0 +1,9 @@
+export enum UI_E_DetectSelectedRadio {
+  'BROWSER' = 'BROWSER',
+  'en_US' = 'LANG',
+  'ru_RU' = 'LANG',
+  'hy_AM' = 'LANG',
+  'zh_CHS' = 'LANG',
+  'kk_KZ' = 'LANG',
+  'be_BY' = 'LANG',
+}

package/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/lib/models/interfaces.ts

@@ -0,0 +1,11 @@
+import type { UI_I_RadioItem } from '~/components/common/layout/theHeader/userMenu/lib/models/interfaces'
+
+export interface UI_I_RadioItemLang extends UI_I_RadioItem {
+  selectLang?: boolean
+}
+
+export interface UI_I_LanguageItem {
+  text: string
+  value: string
+  lang: string
+}

package/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/lib/models/types.ts

@@ -0,0 +1 @@
+export type UI_T_SelectedRadio = 'BROWSER' | 'LANG'

package/components/common/layout/theHeader/userMenu/modals/preferences/defaultConsole/DefaultConsole.vue

@@ -0,0 +1,66 @@
+<template>
+  <form class="compact change-default-console ng-valid ng-dirty ng-touched">
+    <div class="description">
+      {{ localization.defaultConsoleDesc }}
+    </div>
+
+    <div
+      v-for="(item, key) in consoleOptions"
+      :key="key"
+      :class="['radio', item.disabled && 'disabled']"
+    >
+      <input
+        :id="item.label"
+        v-model="consoleValue"
+        :data-id="item.testId"
+        type="radio"
+        :value="item.value"
+        :disabled="item.disabled"
+        @change="onChange"
+      />
+      <label :for="item.label">
+        {{ item.label }}
+      </label>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_RadioItemConsole } from '~/components/common/layout/theHeader/userMenu/modals/preferences/defaultConsole/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import { consoleOptionsFunc } from '~/components/common/layout/theHeader/userMenu/modals/preferences/defaultConsole/lib/config/consoleOptions'
+
+const props = defineProps<{
+  remoteConsole: string
+  project: UI_T_Project
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
+
+const consoleValue = ref<string>(props.remoteConsole)
+const consoleOptions = readonly<UI_I_RadioItemConsole[]>(
+  consoleOptionsFunc(localization.value)
+)
+
+const onChange = (): void => {
+  if (props.project === 'sphere')
+    $store.dispatch('profile/A_PREFERENCES_FOR_CHANGING', {
+      remote_console: consoleValue.value,
+    })
+  else if (props.project === 'procurator')
+    $store.commit('profile/M_UPDATE_USER_PREFERENCE', {
+      remote_console: consoleValue.value,
+    })
+}
+</script>
+
+<style lang="scss" scoped>
+.radio {
+  margin-bottom: 5px;
+  &:nth-child(2) {
+    margin-top: 10px;
+  }
+}
+</style>

package/components/common/layout/theHeader/userMenu/modals/preferences/defaultConsole/lib/config/consoleOptions.ts

@@ -0,0 +1,30 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_RadioItemConsole } from '~/components/common/layout/theHeader/userMenu/modals/preferences/defaultConsole/lib/models/interfaces'
+
+export const consoleOptionsFunc = (
+  localization: UI_I_Localization
+): UI_I_RadioItemConsole[] => {
+  const config = useRuntimeConfig()
+
+  const remoteConsole = localization.remoteConsoleVmrc.replaceAll(
+    '{trademark}',
+    String(config.public[`TRADEMARK_${useEnvLanguage()}`])
+  )
+
+  return [
+    {
+      id: 1,
+      label: localization.webConsole,
+      value: 'spice',
+      disabled: false,
+      testId: 'web-type',
+    },
+    {
+      id: 2,
+      label: remoteConsole,
+      value: 'VMRC',
+      disabled: true,
+      testId: 'vmrc-type',
+    },
+  ]
+}

package/components/common/layout/theHeader/userMenu/modals/preferences/defaultConsole/lib/models/interfaces.ts

@@ -0,0 +1,5 @@
+import type { UI_I_RadioItem } from '~/components/common/layout/theHeader/userMenu/lib/models/interfaces'
+
+export interface UI_I_RadioItemConsole extends UI_I_RadioItem {
+  disabled: boolean
+}

package/components/common/layout/theHeader/userMenu/modals/preferences/lib/config/preferencesTabs.ts

@@ -0,0 +1,68 @@
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+
+export const preferencesTabs = (
+  localization: UI_I_Localization,
+  project: UI_T_Project
+): UI_I_CollapseNavItem[] => {
+  let result: UI_I_CollapseNavItem[] = []
+
+  if (project === 'sphere') {
+    result = [
+      {
+        text: `${localization.timeFormat}`,
+        value: 'time-tab',
+        disabled: false,
+        testId: 'user-preferences-time-format',
+      },
+      {
+        text: `${localization.language}`,
+        value: 'language-tab',
+        disabled: false,
+        testId: 'user-preferences-language',
+      },
+      {
+        text: `${localization.defaultConsole}`,
+        value: 'console-tab',
+        disabled: false,
+        testId: 'user-preferences-default-console',
+      },
+      {
+        text: `${localization.inventory}`,
+        value: 'inventory-tab',
+        disabled: false,
+        testId: 'user-preferences-inventory',
+      },
+      {
+        text: `${localization.view}`,
+        value: 'view-tab',
+        disabled: false,
+        testId: 'user-preferences-view',
+      },
+    ]
+  } else if (project === 'procurator') {
+    result = [
+      {
+        text: `${localization.timeFormat}`,
+        value: 'time-tab',
+        disabled: false,
+        testId: 'time-format',
+      },
+      {
+        text: `${localization.language}`,
+        value: 'language-tab',
+        disabled: false,
+        testId: 'language',
+      },
+      {
+        text: `${localization.view}`,
+        value: 'view-tab',
+        disabled: false,
+        testId: 'view',
+      },
+    ]
+  }
+
+  return result
+}

package/components/common/layout/theHeader/userMenu/modals/preferences/lib/models/types.ts

@@ -0,0 +1 @@
+export type UI_T_UserPreferenceTab = 'time-tab' | 'language-tab' | 'console-tab' | 'inventory-tab'

package/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/TimeFormat.vue

@@ -0,0 +1,67 @@
+<template>
+  <form id="time-format-form" class="compact ng-valid ng-dirty ng-touched">
+    <div class="description">
+      {{ description }}
+    </div>
+
+    <div v-for="(item, key) in formatOptions" :key="key" class="radio">
+      <input
+        :id="item.value"
+        v-model="timeItem"
+        :data-id="item.testId"
+        type="radio"
+        :value="item.value"
+        @change="onChange"
+      />
+      <label :for="item.value">
+        {{ item.label }}
+      </label>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_RadioItem } from '~/components/common/layout/theHeader/userMenu/lib/models/interfaces'
+import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
+import { formatOptionsFunc } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/config/formatOptions'
+
+const props = defineProps<{
+  timeFormat: UI_T_TimeValue
+}>()
+const emits = defineEmits<{
+  (event: 'update', value: UI_T_TimeValue): void
+}>()
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const config = useRuntimeConfig()
+const description = computed<string>(() =>
+  localization.value.timeFormatDesc.replaceAll(
+    '{trademark}',
+    String(config.public[`TRADEMARK_${useEnvLanguage()}`])
+  )
+)
+
+const formatOptions = readonly<UI_I_RadioItem[]>(
+  formatOptionsFunc(localization.value)
+)
+
+const timeItem = ref<UI_T_TimeValue>(props.timeFormat)
+
+const onChange = (): void => {
+  emits('update', timeItem.value)
+}
+</script>
+
+<style lang="scss" scoped>
+.radio {
+  margin-bottom: 5px;
+  &:nth-child(2) {
+    margin-top: 10px;
+  }
+}
+input[type='radio']:focus:checked + label::before,
+input[type='radio']:focus + label::before {
+  box-shadow: inset 0 0 0 0.25rem #0094d2;
+}
+</style>

package/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/config/formatOptions.ts

@@ -0,0 +1,27 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_RadioItem } from '~/components/common/layout/theHeader/userMenu/lib/models/interfaces'
+
+export const formatOptionsFunc = (
+  localization: UI_I_Localization
+): UI_I_RadioItem[] => {
+  return [
+    {
+      id: 1,
+      label: localization.languageDefault,
+      value: 'DEFAULT',
+      testId: 'default-type',
+    },
+    {
+      id: 2,
+      label: localization.hourFormat12,
+      value: '12H',
+      testId: '12h-type',
+    },
+    {
+      id: 3,
+      label: localization.hourFormat24,
+      value: '24H',
+      testId: '24h-type',
+    },
+  ]
+}

package/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types.ts

@@ -0,0 +1 @@
+export type UI_T_TimeValue = '12H' | '24H' | 'DEFAULT'

package/components/common/layout/theHeader/userMenu/userMenuNew/UserMenuNew.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="user-menu-content">
+    <button
+      id="user-menu-dropdown-toggle"
+      data-id="user-menu-dropdown-toggle"
+      class="user-menu-dropdown-toggle"
+      @click="isShowDropdown = !isShowDropdown"
+    >
+      <span class="user-icon-container">
+        <ui-icon-icon3 name="user-icon" width="24" height="24" />
+      </span>
+      <span class="title">{{ props.hostname }}</span>
+      <span class="arrow-icon-container">
+        <ui-icon name="arrow2" width="16" height="8" />
+      </span>
+    </button>
+  </div>
+  <ui-dropdown
+    test-id="user-menu-dropdown"
+    :show="isShowDropdown"
+    :items="dropdownItems"
+    width="max-content"
+    elem-id="user-menu-dropdown-toggle"
+    @select="onSelectDropdown"
+    @hide="onHideDropdown"
+  >
+    <template #row="{ item }">
+      <a
+        :id="item.testId"
+        :data-id="item.testId"
+        :class="['w-full flex items-center dropdown-item', item.iconName]"
+      >
+        <span v-if="item.iconName === 'lock'" class="flex ui-item-text">
+          <ui-icon-icon3 :name="item.iconName" width="18" height="18" />
+        </span>
+        <span v-if="item.iconName === 'info'" class="flex ui-item-text">
+          <ui-icon :name="item.iconName" width="18" height="18" />
+        </span>
+        <span v-if="item.iconName === 'logout'" class="flex ui-item-text">
+          <ui-icon :name="item.iconName" width="18" height="18" />
+        </span>
+        <p class="ui-item-text truncate text-sm font-medium mt-0 mb-0 ml-2">
+          {{ item.text }}
+        </p>
+      </a>
+    </template>
+  </ui-dropdown>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import { userMenuFunc } from '~/components/common/layout/theHeader/userMenu/userMenuNew/lib/config/dropMenu'
+
+const props = defineProps<{
+  hostname: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-dropdown', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowDropdown = ref<boolean>(false)
+
+const dropdownItems = computed<UI_I_Dropdown[]>(() =>
+  userMenuFunc(localization.value)
+)
+
+const onHideDropdown = (): void => {
+  isShowDropdown.value = false
+}
+
+const onSelectDropdown = (value: string): void => {
+  emits('select-dropdown', value)
+  onHideDropdown()
+}
+</script>
+
+<style lang="scss">
+.user-menu-content {
+  .user-menu-dropdown-toggle {
+    border: unset;
+    padding: 0;
+    outline: unset;
+    background: transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    grid-gap: 10px;
+    color: #d3d6da;
+
+    &:hover {
+      color: #ffffff;
+    }
+
+    .arrow-icon-container {
+      display: flex;
+      transform: rotate(90deg);
+    }
+  }
+}
+
+#dropdown-user-menu-dropdown {
+  margin-top: 17px;
+
+  .ui-dropdown-menu-item:has(.logout) {
+    .ui-item-text {
+      color: #ea3223;
+    }
+  }
+}
+</style>

package/components/common/layout/theHeader/userMenu/userMenuNew/lib/config/dropMenu.ts

@@ -0,0 +1,28 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+
+export const userMenuFunc = (
+  localization: UI_I_Localization
+): UI_I_Dropdown[] => {
+  return [
+    {
+      text: localization.changePassword,
+      value: 'changePassword',
+      testId: 'user-menu-change-password',
+      iconName: 'lock',
+    },
+    {
+      text: localization.preferences,
+      value: 'preferences',
+      testId: 'user-menu-preferences',
+      divider: true,
+      iconName: 'info',
+    },
+    {
+      text: localization.logout,
+      value: 'logout',
+      testId: 'user-menu-logout',
+      iconName: 'logout',
+    },
+  ]
+}

package/components/common/layout/theHeader/userMenu/userMenuOld/UserMenuOld.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="tid-control-bar-user-menu user-menu">
+    <atoms-dropdown
+      test-id="user-menu-host-name-drop-down"
+      :title="props.hostname"
+      :drop-menu="accountMenu"
+      @select="clickMenuItem"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_DropMenu } from '~/components/atoms/dropdown/dropdown/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { T_ActionTypeUserMenu } from '~/components/common/layout/theHeader/userMenu/userMenuOld/lib/models/types'
+import { accountMenuFunc } from '~/components/common/layout/theHeader/userMenu/userMenuOld/lib/config/dropMenu'
+
+const props = defineProps<{
+  hostname: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-dropdown', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const accountMenu = computed<UI_I_DropMenu<T_ActionTypeUserMenu>[]>(() =>
+  accountMenuFunc(localization.value)
+)
+
+const clickMenuItem = (item: UI_I_DropMenu<T_ActionTypeUserMenu>): void => {
+  item.action && emits('select-dropdown', item.action)
+}
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/layout/theHeader/userMenu/userMenuOld/lib/config/dropMenu.ts

@@ -0,0 +1,36 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_DropMenu } from '~/components/atoms/dropdown/dropdown/lib/models/interfaces'
+import type { T_ActionTypeUserMenu } from '~/components/common/layout/theHeader/userMenu/userMenuOld/lib/models/types'
+
+export const accountMenuFunc = (
+  localization: UI_I_Localization
+): UI_I_DropMenu<T_ActionTypeUserMenu>[] => {
+  return [
+    {
+      text: localization.changePassword,
+      action: 'changePassword',
+      closeAfterClick: true,
+      testId: 'user-menu-change-password',
+    },
+    {
+      text: localization.preferences,
+      action: 'preferences',
+      closeAfterClick: true,
+      testId: 'user-menu-preferences',
+    },
+    {
+      text: localization.switchTheme,
+      action: 'themeMode',
+      disabled: false,
+      divider: true,
+      closeAfterClick: true,
+      testId: 'user-menu-switch-theme',
+    },
+    {
+      text: localization.logout,
+      action: 'logout',
+      closeAfterClick: true,
+      testId: 'user-menu-logout',
+    },
+  ]
+}

package/components/common/layout/theHeader/userMenu/userMenuOld/lib/models/types.ts

@@ -0,0 +1,5 @@
+export type T_ActionTypeUserMenu =
+  | 'changePassword'
+  | 'logout'
+  | 'themeMode'
+  | 'preferences'