bfg-common 1.4.522 → 1.4.524

package/components/common/mainNavigationPanel/MainNavigationPanel.vue

@@ -1,142 +1,152 @@
-<template>
-  <common-main-navigation-panel-new
-    v-if="props.isNewView"
-    v-model:main-menu-hovered="mainMenuHovered"
-    v-model:menu-pined="menuPined"
-    :main-menu-status="props.mainMenuStatus"
-    :navigation-items="props.navigationItems"
-    :parent-status="props.parentStatus"
-    :disabled-pin="props.disabledPin"
-    :menu-collapsed="menuCollapsed"
-    :show-menu="showMenu"
-    @toggle="emits('toggle', $event)"
-    @collapse-menu="collapseMenu"
-    @change-menu-pin="changeMenuPin"
-    @hide-main-menu="hideMainMenu"
-  />
-  <common-main-navigation-panel-old
-    v-else
-    v-model:main-menu-hovered="mainMenuHovered"
-    v-model:menu-pined="menuPined"
-    :main-menu-status="props.mainMenuStatus"
-    :navigation-items="props.navigationItems"
-    :parent-status="props.parentStatus"
-    :disabled-pin="props.disabledPin"
-    :menu-collapsed="menuCollapsed"
-    :show-menu="showMenu"
-    @toggle="emits('toggle', $event)"
-    @collapse-menu="collapseMenu"
-    @change-menu-pin="changeMenuPin"
-    @hide-main-menu="hideMainMenu"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_NavigationItem } from '~/components/common/mainNavigationPanel/lib/models/interfaces'
-import type { UI_T_ParentStatus } from '~/components/common/mainNavigationPanel/lib/models/types'
-
-const props = withDefaults(
-  defineProps<{
-    mainMenuStatus: boolean
-    navigationItems: UI_I_NavigationItem[][]
-    parentStatus: UI_T_ParentStatus
-    disabledPin: boolean
-    isNewView?: boolean
-  }>(),
-  {
-    isNewView: false,
-  }
-)
-
-const emits = defineEmits<{
-  (event: 'toggle', value: boolean): void
-}>()
-
-const route = useRoute()
-
-const showMenu = computed<boolean>(
-  () => props.mainMenuStatus || menuPined.value
-)
-
-const menuPined = ref<boolean>(false)
-const changeMenuPin = (): void => {
-  useLocalStorage('menuPined', menuPined.value)
-}
-const setMenuPined = (): void => {
-  menuPined.value = props.disabledPin ? false : useLocalStorage('menuPined')
-}
-watch(
-  () => props.disabledPin,
-  () => {
-    setMenuPined()
-  },
-  { immediate: true }
-)
-
-const menuCollapsed = ref<boolean>(false)
-const collapseMenu = (): void => {
-  menuCollapsed.value = !menuCollapsed.value
-  useLocalStorage('menuCollapsed', menuCollapsed.value)
-}
-
-const mainMenuHovered = ref<boolean>(false)
-
-const clickWindow = (event: Event): void => {
-  const target = event.target as any
-  if (
-    menuPined.value ||
-    mainMenuHovered.value ||
-    target.className.baseVal?.includes('menu-icon') ||
-    target.className.baseVal?.includes('clr-i-outline')
-  ) {
-    return
-  }
-
-  emits('toggle', false)
-}
-
-const mountedReady = ref<boolean>(false)
-onMounted(() => {
-  mountedReady.value = true
-  window.addEventListener('click', clickWindow)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('click', clickWindow)
-})
-
-watch(
-  [mountedReady, (): any => route.fullPath, (): any => props.parentStatus],
-  ([newValue1, newValue2, newValue3]: [
-    boolean,
-    any,
-    UI_T_ParentStatus
-  ]): void => {
-    if (newValue3 === 1) return
-
-    const name = location.pathname.split('/')[1]
-
-    if (!newValue1 || name === 'auth') return
-
-    setSidebarOptions()
-    useLocalStorage('navigationHistoryRoute', newValue2)
-  },
-  { immediate: true, deep: true }
-)
-
-const setSidebarOptions = (): void => {
-  setMenuPined()
-  menuCollapsed.value = useLocalStorage('menuCollapsed')
-
-  if (menuPined.value) {
-    emits('toggle', true)
-  }
-}
-
-const hideMainMenu = (): void => {
-  if (menuPined.value) return
-  emits('toggle', false)
-}
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <common-main-navigation-panel-new
+    v-if="props.isNewView"
+    v-model:main-menu-hovered="mainMenuHovered"
+    v-model:menu-pined="menuPined"
+    :main-menu-status="props.mainMenuStatus"
+    :navigation-items="props.navigationItems"
+    :parent-status="props.parentStatus"
+    :disabled-pin="props.disabledPin"
+    :menu-collapsed="menuCollapsed"
+    :show-menu="showMenu"
+    @toggle="emits('toggle', $event)"
+    @collapse-menu="collapseMenu"
+    @change-menu-pin="changeMenuPin"
+    @hide-main-menu="hideMainMenu"
+  />
+  <common-main-navigation-panel-old
+    v-else
+    v-model:main-menu-hovered="mainMenuHovered"
+    v-model:menu-pined="menuPined"
+    :main-menu-status="props.mainMenuStatus"
+    :navigation-items="props.navigationItems"
+    :parent-status="props.parentStatus"
+    :disabled-pin="props.disabledPin"
+    :menu-collapsed="menuCollapsed"
+    :show-menu="showMenu"
+    @toggle="emits('toggle', $event)"
+    @collapse-menu="collapseMenu"
+    @change-menu-pin="changeMenuPin"
+    @hide-main-menu="hideMainMenu"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_NavigationItem } from '~/components/common/mainNavigationPanel/lib/models/interfaces'
+import type { UI_T_ParentStatus } from '~/components/common/mainNavigationPanel/lib/models/types'
+
+const props = withDefaults(
+  defineProps<{
+    mainMenuStatus: boolean
+    navigationItems: UI_I_NavigationItem[][]
+    parentStatus: UI_T_ParentStatus
+    disabledPin: boolean
+    isNewView?: boolean
+  }>(),
+  {
+    isNewView: false,
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'toggle', value: boolean): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const route = useRoute()
+
+const showMenu = computed<boolean>(
+  () => props.mainMenuStatus || menuPined.value
+)
+
+const menuPined = ref<boolean>(false)
+const changeMenuPin = (): void => {
+  useLocalStorage('menuPined', menuPined.value)
+}
+const setMenuPined = (): void => {
+  menuPined.value = props.disabledPin ? false : useLocalStorage('menuPined')
+}
+watch(
+  () => props.disabledPin,
+  () => {
+    setMenuPined()
+  },
+  { immediate: true }
+)
+
+const menuCollapsed = ref<boolean>(false)
+const collapseMenu = (): void => {
+  menuCollapsed.value = !menuCollapsed.value
+  useLocalStorage('menuCollapsed', menuCollapsed.value)
+}
+
+const mainMenuHovered = ref<boolean>(false)
+
+const clickWindow = (event: Event): void => {
+  const target = event.target as any
+  if (
+    menuPined.value ||
+    mainMenuHovered.value ||
+    target.className.baseVal?.includes('menu-icon') ||
+    target.className.baseVal?.includes('clr-i-outline')
+  ) {
+    return
+  }
+
+  emits('toggle', false)
+}
+
+const mountedReady = ref<boolean>(false)
+onMounted(() => {
+  mountedReady.value = true
+  window.addEventListener('click', clickWindow)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('click', clickWindow)
+})
+
+watch(
+  [mountedReady, (): any => route.fullPath, (): any => props.parentStatus],
+  ([newValue1, newValue2, newValue3]: [
+    boolean,
+    any,
+    UI_T_ParentStatus
+  ]): void => {
+    if (newValue3 === 1) return
+
+    const name = location.pathname.split('/')[1]
+
+    if (!newValue1 || name === 'auth') return
+
+    setSidebarOptions()
+    useLocalStorage('navigationHistoryRoute', newValue2)
+  },
+  { immediate: true, deep: true }
+)
+
+const setSidebarOptions = (): void => {
+  setMenuPined()
+  menuCollapsed.value = useLocalStorage('menuCollapsed')
+
+  if (menuPined.value) {
+    emits('toggle', true)
+  }
+}
+
+const hideMainMenu = (): void => {
+  if (menuPined.value) return
+  emits('toggle', false)
+}
+
+watch(
+  menuPined,
+  (newValue) => {
+    $store.dispatch('main/A_MENU_PINED', newValue)
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/pages/shortcuts/Shortcuts.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="shortcut" :class="isNewView && 'new'">
+    <h1>{{ localization.mainNavigation.shortcuts }}</h1>
+    <template v-for="item in props.shortcutsItems">
+      <div class="shortcut-category">
+        <common-pages-shortcuts-category
+          :title="item.title"
+          :block-items="item.blockItems"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ShortcutsItems } from '~/components/common/pages/shortcuts/lib/models/interfaces'
+
+const props = defineProps<{
+  shortcutsItems: UI_I_ShortcutsItems[]
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped>
+.shortcut {
+  margin: 20px;
+  height: 100%;
+  overflow: auto;
+  &.new {
+    background: var(--bottom-pannel-bg-color);
+    padding: 16px;
+    margin: 0;
+
+    & h1 {
+      color: var(--home-title-color);
+      font-size: 22px;
+      font-weight: 400;
+      line-height: 26.63px;
+    }
+  }
+
+  & h1 {
+    line-height: 26px;
+    font-size: 22px;
+    font-weight: 200;
+    letter-spacing: normal;
+  }
+
+  &-category {
+    margin-top: 30px;
+    .new & {
+      &:first-of-type {
+        margin-top: 19px;
+      }
+      &:not(:first-of-type) {
+        margin-top: 24px;
+      }
+    }
+  }
+}
+</style>

package/components/common/pages/shortcuts/block/Block.vue

@@ -0,0 +1,35 @@
+<template>
+  <common-pages-shortcuts-block-new
+    v-if="isNewView"
+    :item="props.item"
+    :test-id="props.testId"
+    @change-navigation="onChangeLastNavigation"
+  />
+  <common-pages-shortcuts-block-old
+    v-else
+    :item="props.item"
+    :test-id="props.testId"
+    @change-navigation="onChangeLastNavigation"
+  />
+</template>
+<script setup lang="ts">
+import type { UI_I_BlockItem } from '~/components/common/pages/shortcuts/lib/models/interfaces'
+
+const props = defineProps<{
+  item: UI_I_BlockItem
+  testId?: string
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const onChangeLastNavigation = (): void => {
+  if (!props.item.nav) return
+
+  const lastSelectedInventory = 'lastSelectedInventoryTreeIdStorageKey'
+  useLocalStorage(lastSelectedInventory, props.item.nav)
+}
+
+</script>
+<style lang="scss" scoped></style>

package/components/common/pages/shortcuts/block/BlockNew.vue

@@ -0,0 +1,71 @@
+<template>
+  <ui-widget class="category-block-item">
+    <nuxt-link
+      class="unit"
+      :to="navigate"
+      :title="props.item.navigateTo"
+      :data-id="props.testId"
+      @click="emits('change-navigation')"
+      @contextmenu="emits('change-navigation')"
+    >
+      <span class="unit-icon">
+        <ui-icon :name="props.item.iconName" width="28" height="28"></ui-icon>
+      </span>
+      <div class="unit-text" :title="props.item.text">
+        {{ props.item.text }}
+      </div>
+    </nuxt-link>
+  </ui-widget>
+</template>
+<script setup lang="ts">
+import type { UI_I_BlockItem } from '~/components/common/pages/shortcuts/lib/models/interfaces'
+
+const props = defineProps<{
+  item: UI_I_BlockItem
+  testId?: string
+}>()
+const emits = defineEmits<{
+  (event: 'change-navigation'): void
+}>()
+
+const navigate = computed<string>(() => '/' + props.item.navigateTo)
+</script>
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins';
+.category-block-item {
+  max-width: 176px;
+  min-height: 110px;
+  .unit {
+    @include flex($dir: column, $just: space-between);
+    width: 100%;
+    height: 100%;
+    text-decoration-line: none;
+    &-icon {
+      min-width: 28px;
+      min-height: 28px;
+      display: inline-block;
+      color: var(--close-icon);
+    }
+    &-text {
+      color: #9da6ad;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 16.94px;
+    }
+  }
+
+  &:hover {
+    background: #e9ebed33;
+    cursor: pointer;
+    .unit {
+      &-icon {
+        color: var(--widget-text-hover);
+      }
+
+      &-text {
+        color: var(--widget-text-hover);
+      }
+    }
+  }
+}
+</style>

package/components/common/pages/shortcuts/block/BlockOld.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <nuxt-link
+      class="unit"
+      :to="navigate"
+      :title="props.item.navigateTo"
+      :data-id="props.testId"
+      @click="emits('change-navigation')"
+      @contextmenu="emits('change-navigation')"
+    >
+      <span class="icon-2">
+        <ui-icon :name="props.item.iconName" width="34" height="34"></ui-icon>
+      </span>
+      <div class="unit-text" :title="props.item.text">
+        {{ props.item.text }}
+      </div>
+    </nuxt-link>
+  </div>
+</template>
+<script setup lang="ts">
+import type { UI_I_BlockItem } from '~/components/common/pages/shortcuts/lib/models/interfaces'
+
+const props = defineProps<{
+  item: UI_I_BlockItem
+  testId?: string
+}>()
+const emits = defineEmits<{
+  (event: 'change-navigation'): void
+}>()
+
+const navigate = computed<string>(() => '/' + props.item.navigateTo)
+</script>
+<style lang="scss" scoped>
+.unit {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 95px;
+  margin: 21px 10px;
+  text-decoration-line: none;
+  .icon-2 {
+    margin: 0 10px 15px 10px;
+    color: var(--global-font-color3);
+  }
+  &-text {
+    color: var(--global-font-color3);
+    font-size: 13px;
+    line-height: 13px;
+    font-weight: 400;
+    padding-bottom: 2px;
+    text-align: center;
+  }
+}
+</style>

package/components/common/pages/shortcuts/category/Category.vue

@@ -0,0 +1,26 @@
+<template>
+  <common-pages-shortcuts-category-new
+    v-if="isNewView"
+    :title="props.title"
+    :block-items="props.blockItems"
+  />
+  <common-pages-shortcuts-category-old
+    v-else
+    :title="props.title"
+    :block-items="props.blockItems"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_BlockItem } from '~/components/common/pages/shortcuts/lib/models/interfaces'
+
+const props = defineProps<{
+  title: string
+  blockItems: UI_I_BlockItem[]
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>
+<style lang="scss" scoped></style>

package/components/common/pages/shortcuts/category/CategoryNew.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="category">
+    <span class="category__headline">
+      {{ props.title }}
+    </span>
+    <div class="category__block">
+      <common-pages-shortcuts-block
+        v-for="(item, key) in props.blockItems"
+        :key="key"
+        :item="item"
+        :test-id="item.testId"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_BlockItem } from '~/components/common/pages/shortcuts/lib/models/interfaces'
+
+const props = defineProps<{
+  title: string
+  blockItems: UI_I_BlockItem[]
+}>()
+</script>
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins';
+.category {
+  &__headline {
+    color: #9da6ad;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 19.36px;
+  }
+  &__block {
+    @include flex($dir: row, $just: flex-start, $w: wrap);
+    gap: 12px;
+    border-bottom: 1px solid var(--horizontal-line);
+    padding: 16px 0 24px;
+  }
+}
+</style>

package/components/common/{shortcuts/Category.vue → pages/shortcuts/category/CategoryOld.vue}

@@ -4,7 +4,7 @@
       {{ props.title }}
     </span>
     <div class="category-block">
-      <common-shortcuts-block
+      <common-pages-shortcuts-block
         v-for="(item, key) in props.blockItems"
         :key="key"
         :item="item"
@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import type { UI_I_BlockItem } from '~/components/common/shortcuts/lib/models/interfaces'
+import type { UI_I_BlockItem } from '~/components/common/pages/shortcuts/lib/models/interfaces'
 
 const props = defineProps<{
   title: string

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.4.522",
+  "version": "1.4.524",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",

package/store/main/actions.ts

@@ -0,0 +1,8 @@
+export default {
+  A_MENU_PINED(
+    context: { commit: (arg0: string, arg1: boolean) => void },
+    payload: boolean
+  ): void {
+    context.commit('M_MENU_PINED', payload)
+  }
+}

package/store/main/getters.ts

@@ -0,0 +1,7 @@
+import type {UI_I_MainState} from "~/store/main/lib/interfaces";
+
+export default {
+  getIsMenuPined: (state: UI_I_MainState): boolean => {
+    return state.isMenuPined
+  }
+}

package/store/main/lib/interfaces.ts

@@ -1,3 +1,5 @@
+// TODO move to models folder
+
 import type { UI_I_Options } from '~/lib/models/composables/useMyFetch/interfaces'
 
 export interface UI_I_RefreshStack {
@@ -7,3 +9,7 @@ export interface UI_I_RefreshStack {
   options: UI_I_Options
   paused?: boolean
 }
+
+export interface UI_I_MainState {
+  isMenuPined: boolean
+}

package/store/main/mutations.ts

@@ -0,0 +1,7 @@
+import type { UI_I_MainState } from '~/store/main/lib/interfaces'
+
+export default {
+  M_MENU_PINED(state: UI_I_MainState, payload: boolean): void {
+    state.isMenuPined = payload
+  },
+}

package/store/main/state.ts

@@ -0,0 +1,7 @@
+import type {UI_I_MainState} from "~/store/main/lib/interfaces";
+
+const state: UI_I_MainState = {
+  isMenuPined: false,
+}
+
+export default state

package/store/main/store.ts

@@ -0,0 +1,12 @@
+import state from './state'
+import actions from './actions'
+import mutations from './mutations'
+import getters from './getters'
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions,
+}

package/components/common/shortcuts/Block.vue

@@ -1,96 +0,0 @@
-<template>
-  <div>
-    <nuxt-link
-      class="unit"
-      :to="navigate"
-      :title="props.item.navigateTo"
-      :data-id="props.testId"
-      @click="changeLastNavigation"
-      @contextmenu="changeLastNavigation"
-    >
-      <span
-        v-if="props.item.iconClassName"
-        :class="['unit-icon', props.item.iconClassName]"
-      />
-      <span v-else-if="props.item.iconName" class="icon-2">
-        <atoms-the-icon2 :name="props.item.iconName" width="34" height="34" />
-      </span>
-      <div class="unit-text" :title="props.item.text">
-        {{ props.item.text }}
-      </div>
-    </nuxt-link>
-  </div>
-</template>
-<script setup lang="ts">
-import type { UI_I_BlockItem } from '~/components/common/shortcuts/lib/models/interfaces'
-
-const props = defineProps<{
-  item: UI_I_BlockItem
-  testId?: string
-}>()
-
-const navigate = computed<string>(() => '/' + props.item.navigateTo)
-
-const changeLastNavigation = (): void => {
-  if (!props.item.nav) return
-
-  const lastSelectedInventory = 'lastSelectedInventoryTreeIdStorageKey'
-  useLocalStorage(lastSelectedInventory, props.item.nav)
-}
-</script>
-<style lang="scss" scoped>
-.unit {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 95px;
-  margin: 21px 10px;
-  text-decoration-line: none;
-  &-icon {
-    margin: 0px 10px 15px 10px;
-    min-width: 34px;
-    min-height: 34px;
-    display: inline-block;
-    color: var(--global-font-color3);
-
-    &.icon-lifecycle-manager,
-    &.icon-cloud-provider-services {
-      background-size: contain;
-      background-repeat: no-repeat;
-    }
-    &.icon-lifecycle-manager {
-      background-image: url('assets/img/icons/icon-life-m-light.svg');
-      html.dark-theme & {
-        background-image: url('assets/img/icons/icon-life-m-dark.svg');
-        color: var(--global-font-color3);
-      }
-    }
-    &.icon-cloud-provider-services {
-      background-image: url('assets/img/icons/icon-cps.png');
-      html.dark-theme & {
-        background-image: url('assets/img/icons/icon-cps-dark-mode.png');
-      }
-    }
-    &.icon-vm-customizationManager-32x,
-    &.icon-storage-profile-32x,
-    &.icon-Host_Policy-32x,
-    &.icon-certificate-32x {
-      width: 34px;
-      height: 34px;
-    }
-  }
-  .icon-2 {
-    margin: 0 10px 15px 10px;
-    color: var(--global-font-color3);
-  }
-  &-text {
-    color: var(--global-font-color3);
-    font-size: 13px;
-    line-height: 13px;
-    font-weight: 400;
-    padding-bottom: 2px;
-    text-align: center;
-  }
-}
-</style>

package/components/common/shortcuts/Shortcuts.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="shortcut">
-    <h1>{{ localization.mainNavigation.shortcuts }}</h1>
-    <template v-for="item in props.shortcutsItems">
-      <div class="shortcut-category">
-        <common-shortcuts-category
-          :title="item.title"
-          :block-items="item.blockItems"
-        />
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_ShortcutsItems } from '~/components/common/shortcuts/lib/models/interfaces'
-
-const props = defineProps<{
-  shortcutsItems: UI_I_ShortcutsItems[]
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-</script>
-
-<style lang="scss" scoped>
-.shortcut {
-  margin: 20px;
-  width: 100%;
-  height: 100%;
-  overflow-y: scroll;
-
-  h1 {
-    line-height: 26px;
-    font-size: 22px;
-    font-weight: 200;
-    letter-spacing: normal;
-  }
-
-  &-category {
-    margin: 30px 20px 0 0;
-  }
-}
-</style>