bfg-common 1.3.467 → 1.3.468

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

@@ -0,0 +1,241 @@
+<template>
+  <div class="main-nav">
+    <header class="header header-7">
+      <div class="header-nav">
+        <div class="nav-link">
+          <button
+            id="inventory-menu-trigger"
+            data-id="inventory-menu-toggle-button"
+            class="inventory-menu-trigger"
+            @click="emits('toggle-main-menu')"
+          >
+            <span class="inventory-menu-link">
+              <span class="nav-icon">
+                <atoms-the-icon class="menu-icon" name="menu" />
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+      <div class="branding">
+        <nuxt-link
+          id="header-shortcuts-link"
+          data-id="header-shortcuts-link"
+          to="/shortcuts"
+        >
+          <span class="title pointer"
+            >{{ props.companyName }}<sup><b>®</b></sup>
+            {{ props.projectName }}</span
+          >
+          <span v-if="props.isBeta" class="beta-version badge badge-info">{{
+            props.betaText
+          }}</span>
+          <span v-else-if="props.isDev" class="beta-version badge badge-info"
+            >Dev</span
+          >
+        </nuxt-link>
+      </div>
+      <form>
+        <atoms-input-search />
+      </form>
+
+      <div class="settings header-actions">
+        <div class="divider" />
+        <a
+          id="global-refresh-button"
+          data-id="global-refresh-button"
+          class="nav-link tid-global-refresh-button"
+          @click="emits('global-refresh')"
+        >
+          <span class="nav-icon">
+            <atoms-the-icon
+              v-show="!props.globalRefreshLoading"
+              class="reset-icon"
+              name="reset"
+            />
+            <span
+              :class="[
+                'spinner spinner-inline spinner-inverse global-refresh-active',
+                { 'spinner-paused': !props.globalRefreshLoading },
+              ]"
+            ></span>
+          </span>
+        </a>
+        <div class="divider" />
+
+        <common-layout-the-header-user-menu
+          :hostname="props.hostname"
+          :is-preference="props.isPreference"
+          :time-format="props.timeFormat"
+          :selected-language-type="props.selectedLanguageType"
+          :selected-language="props.selectedLang"
+          :new-view="props.newView"
+          :project="props.project"
+          @show-preference="emits('show-preference')"
+          @hide-preference="emits('hide-preference')"
+          @change-theme-mode="emits('change-theme-mode')"
+          @update-time-format="emits('update-time-format', $event)"
+          @update-language="emits('update-language', $event)"
+          @update-is-browser="emits('update-is-browser', $event)"
+          @update-is-new-view="emits('update-is-new-view', $event)"
+          @submit-preferences="emits('submit-preferences')"
+        />
+
+        <div class="divider" />
+
+        <common-layout-the-header-feedback
+          :is-show-feedback="isShowFeedback"
+          @show="isShowFeedback = true"
+          @hide="isShowFeedback = false"
+        />
+
+        <div class="divider" />
+
+        <common-layout-the-header-help-menu :project-name="props.projectName" />
+
+        <div class="divider" />
+      </div>
+    </header>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
+import type { UI_T_Project } from '~/lib/models/types'
+
+const props = defineProps<{
+  companyName: string
+  isBeta: boolean
+  isDev: boolean
+  betaText: string
+  globalRefreshLoading: boolean
+  project: UI_T_Project
+  projectName: string
+  hostname: string
+  isPreference: boolean
+  selectedLanguageType: string
+  selectedLang: string
+  newView: boolean
+  timeFormat: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'toggle-main-menu'): void
+  (event: 'global-refresh'): void
+  (event: 'show-preference'): void
+  (event: 'hide-preference'): void
+  (event: 'change-theme-mode'): void
+  (event: 'update-time-format', value: UI_T_TimeValue): void
+  (event: 'update-language', value: string): void
+  (event: 'update-is-browser', value: string): void
+  (event: 'update-is-new-view', value: boolean): void
+  (event: 'submit-preferences'): void
+}>()
+
+const isShowFeedback = ref<boolean>(false)
+</script>
+
+<style scoped lang="scss">
+.main-nav {
+  position: relative;
+  left: 0;
+
+  header {
+    height: 62px;
+    align-items: center;
+    padding-left: 0;
+
+    .nav-link::before,
+    .nav-link::after {
+      display: none !important;
+    }
+
+    .inventory-menu-trigger {
+      padding: 0 0 0 60px;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      position: relative;
+      outline: none;
+
+      .nav-icon {
+        padding: 0;
+        width: auto;
+        font-size: inherit;
+        display: flex;
+        align-items: center;
+        background: transparent;
+        border: none;
+
+        .menu-icon {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          height: 24px;
+          width: 24px;
+          fill: #fafafa;
+          display: inline-block;
+          margin: 0;
+          vertical-align: middle;
+        }
+      }
+    }
+
+    .branding {
+      width: auto;
+      min-width: auto;
+      padding-left: 9px;
+      padding-right: 20px;
+
+      a {
+        position: relative;
+        padding-right: 4px;
+      }
+    }
+
+    .settings {
+      align-items: center;
+
+      a.nav-link {
+        display: flex;
+        padding: 0;
+        cursor: pointer;
+
+        .reset-icon {
+          width: 24px;
+          height: 24px;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          fill: #fafafa;
+        }
+
+        .spinner {
+          line-height: 24px;
+          vertical-align: middle;
+          height: 24px;
+          width: 24px;
+          min-height: 24px;
+          min-width: 24px;
+          z-index: 100;
+
+          &.spinner-paused {
+            animation-play-state: paused;
+            display: none;
+          }
+        }
+      }
+      .divider {
+        height: 40px;
+        display: flex;
+        flex: 0 0 auto;
+        width: 1px;
+        background: #fafafa;
+        opacity: 0.15;
+      }
+    }
+  }
+}
+</style>

package/components/common/layout/theHeader/feedback/Feedback.vue

@@ -0,0 +1,104 @@
+<template>
+  <common-layout-the-header-feedback-new
+    v-if="isNewView"
+    :is-show-feedback="props.isShowFeedback"
+    :title="localization.sendFeedback"
+    @hide="onHide"
+    @submit="onSubmit"
+  />
+  <common-layout-the-header-feedback-old
+    v-else
+    :is-show-feedback="props.isShowFeedback"
+    :title="localization.sendFeedback"
+    @show="emits('show')"
+    @hide="onHide"
+    @submit="onSubmit"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_FeedbackForm } from '~/components/common/feedback/lib/models/interfaces'
+import type { API_UI_I_Error } from '~/lib/models/store/interfaces'
+import type {
+  UI_I_Localization,
+  UI_I_NotifyBodyMessage,
+} from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  isShowFeedback: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'show'): void
+  (event: 'hide'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const handleRequest = async (data: UI_I_FeedbackForm): Promise<boolean> => {
+  const { error } = await useMyFetch<never, API_UI_I_Error>(
+    'https://customer.aobfg.ru/api/v1/feedback',
+    {
+      method: 'POST',
+      key: Date.now().toString(),
+      body: data,
+    }
+  )
+
+  if (error.value?.data && error.value.data.error_code !== 0) {
+    handleErrors(error)
+    return false
+  }
+  return true
+}
+const msgSuccess = ref<UI_I_NotifyBodyMessage>({
+  status: 'success',
+  title: localization.value.feedbackSent,
+  desc: `${localization.value.thankYouForYourComments}`,
+})
+const showNotification = (message: UI_I_NotifyBodyMessage): void => {
+  const { title, desc, status } = message
+  const { $store }: any = useNuxtApp()
+
+  $store.dispatch('main/A_SHOW_NOTIFICATION', {
+    status,
+    messages: [
+      {
+        title,
+        descriptions: [desc],
+      },
+    ],
+    headline: '',
+    timeout: status === 'success' ? 5000 : '',
+  })
+}
+const msgError = ref<UI_I_NotifyBodyMessage>({
+  status: 'error',
+  title: localization.value.error,
+  desc: '',
+})
+const handleErrors = (error: Ref<API_UI_I_Error>): void => {
+  if (error.value.data?.error_message) {
+    msgError.value.desc = error.value.data?.error_message
+    showNotification(msgError.value)
+  }
+}
+const onHide = (): void => {
+  emits('hide')
+}
+const onSubmit = async (data: UI_I_FeedbackForm): Promise<void> => {
+  onHide()
+  const isValid = await handleRequest(data)
+
+  if (isValid) showNotification(msgSuccess.value)
+  else showNotification(msgError.value)
+
+  $store.dispatch('main/A_GLOBAL_REFRESH', null)
+}
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/layout/theHeader/feedback/FeedbackNew.vue

@@ -0,0 +1,63 @@
+<template>
+  <Teleport to="body">
+    <common-feedback
+      width="576px"
+      :show="props.isShowFeedback"
+      :title="props.title"
+      @hide="emits('hide')"
+      @submit="emits('submit', $event)"
+    />
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_FeedbackForm } from '~/components/common/feedback/lib/models/interfaces'
+
+const props = defineProps<{
+  isShowFeedback: boolean
+  title: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'submit', value: UI_I_FeedbackForm): void
+}>()
+</script>
+
+<style lang="scss">
+:root {
+  --description-color: #414b57;
+  --link-visited-color: #5659b8;
+}
+
+:root.dark-theme {
+  --description-color: #adbbc4;
+  --link-visited-color: #49afd9;
+}
+
+.feedback {
+  width: 60px;
+  height: 60px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  fill: #fafafa;
+
+  &-icon {
+    width: 24px;
+    height: 24px;
+    opacity: 0.65;
+    cursor: pointer;
+  }
+  &-icon:hover {
+    opacity: 1;
+  }
+}
+.about-vsphere-dialog-legal-section {
+  color: var(--description-color);
+  a {
+    color: var(--link-visited-color);
+  }
+}
+</style>

package/components/common/layout/theHeader/feedback/FeedbackOld.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="tid-control-bar-feedback-button feedback">
+    <atoms-the-icon2
+      data-id="feedback-icon"
+      class="feedback-icon"
+      name="happy-face"
+      @click="emits('show')"
+    />
+  </div>
+
+  <Teleport to="body">
+    <common-feedback
+      width="576px"
+      :show="props.isShowFeedback"
+      :title="props.title"
+      @hide="emits('hide')"
+      @submit="emits('submit', $event)"
+    />
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_FeedbackForm } from '~/components/common/feedback/lib/models/interfaces'
+
+const props = defineProps<{
+  isShowFeedback: boolean
+  title: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'show'): void
+  (event: 'hide'): void
+  (event: 'submit', value: UI_I_FeedbackForm): void
+}>()
+</script>
+
+<style lang="scss">
+:root {
+  --description-color: #414b57;
+  --link-visited-color: #5659b8;
+}
+
+:root.dark-theme {
+  --description-color: #adbbc4;
+  --link-visited-color: #49afd9;
+}
+
+.feedback {
+  width: 60px;
+  height: 60px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  fill: #fafafa;
+
+  &-icon {
+    width: 24px;
+    height: 24px;
+    opacity: 0.65;
+    cursor: pointer;
+  }
+  &-icon:hover {
+    opacity: 1;
+  }
+}
+.about-vsphere-dialog-legal-section {
+  color: var(--description-color);
+  a {
+    color: var(--link-visited-color);
+  }
+}
+</style>

package/components/common/layout/theHeader/helpMenu/About.vue

@@ -0,0 +1,110 @@
+<template>
+  <Teleport to="body">
+    <atoms-modal
+      width="864px"
+      :show="true"
+      :title="`${brandName}® ${props.projectName}`"
+      test-id="about-modal"
+    >
+      <template #modalHeader>
+        <div class="flex-align-center">
+          <h3 class="modal-title">{{ brandName }}® {{ props.projectName }}</h3>
+          <span class="separator" />
+          <h4 class="secondary-title">
+            {{ props.projectName }} Web Client, version: {{ version }}
+          </h4>
+          <span
+            v-if="props.isBetaVersion"
+            class="beta-version badge badge-info"
+            >{{ localization.beta }}</span
+          >
+          <span v-else-if="isDev" class="beta-version badge badge-info"
+            >Dev</span
+          >
+        </div>
+        <button id="about-modal-button-close" class="close">
+          <atoms-the-icon
+            data-id="about-modal-button-close-icon"
+            class="close-icon"
+            name="close"
+            @click="() => emits('hide')"
+          />
+        </button>
+      </template>
+
+      <template #modalBody>
+        <div class="about-vsphere-dialog-legal-section">
+          <p>{{ aboutHeadingText }}</p>
+          <p>{{ localization.aboutSubtitle }}</p>
+        </div>
+
+        <div class="about-vsphere-dialog-legal-section description">
+          {{ aboutDesc1 }}
+          (<a
+            id="about-description-link"
+            data-id="about-description-link"
+            :href="url"
+            target="_blank"
+            >{{ url }}</a
+          >){{ aboutDesc2 }}
+        </div>
+      </template>
+
+      <template #modalFooter>
+        <span></span>
+      </template>
+    </atoms-modal>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  version: string
+  isBetaVersion: boolean
+  isDev: boolean
+  projectName: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+}>()
+
+const config = useRuntimeConfig()
+
+const brandName = computed<string>(
+  () => config.public[`TRADEMARK_${useEnvLanguage()}`]
+)
+const companyName = computed<string>(
+  () => config.public[`COMPANY_NAME_${useEnvLanguage()}`]
+)
+const aboutHeadingText = computed<string>(() =>
+  localization.value.aboutHeading.replaceAll('{companyName}', companyName.value)
+)
+const aboutDesc1 = computed<string>(() =>
+  localization.value.aboutDesc1
+    .replaceAll('{companyName}', companyName.value)
+    .replaceAll('{trademark}', brandName.value)
+)
+const aboutDesc2 = computed<string>(() =>
+  localization.value.aboutDesc2
+    .replaceAll('{companyName}', companyName.value)
+    .replaceAll('{trademark}', brandName.value)
+)
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const url = ref<string>('https://iridium-soft.com/')
+</script>
+
+<style lang="scss" scoped>
+.modal-title {
+  color: var(--main-color-mode);
+}
+.description {
+  padding-top: 10px;
+  font-size: 13px;
+  line-height: 19px;
+}
+</style>

package/components/common/layout/theHeader/helpMenu/HelpMenu.vue

@@ -0,0 +1,45 @@
+<template>
+  <common-layout-the-header-help-menu-help-menu-new
+    v-if="isNewView"
+    @select-dropdown="onSelectDropdown"
+  />
+  <common-layout-the-header-help-menu-help-menu-old
+    v-else
+    @select-dropdown="onSelectDropdown"
+  />
+
+  <common-layout-the-header-help-menu-about
+    v-if="isShowAbout"
+    :version="version"
+    :is-beta-version="isBeta"
+    :is-dev="isDev"
+    :project-name="props.projectName"
+    @hide="isShowAbout = false"
+  />
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  projectName: string
+}>()
+
+const { $store }: any = useNuxtApp()
+const { version, isBeta, isDev } = useAppVersion()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const isShowAbout = ref<boolean>(false)
+
+const onSelectDropdown = (value: string): void => {
+  switch (value) {
+    case 'help':
+      navigateTo('/help')
+      break
+    case 'about':
+      isShowAbout.value = true
+      break
+  }
+}
+</script>
+
+<style scoped lang="scss"></style>