bfg-common 1.5.43 → 1.5.45

package/components/common/pages/licensing/modals/assign/new/New.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="form">
+    <atoms-alert
+      v-show="errorMessage.length"
+      status="alert-danger"
+      :items="errorMessage"
+      test-id="name-alert"
+      @remove="errorMessage = []"
+    />
+
+    <div class="block">
+      <label class="label font-weight-bold" for="new-license-key-input"
+        >{{ licenseKeyText }}
+      </label>
+      <input
+        id="new-license-key-input"
+        v-model.trim="licenseKey"
+        data-id="new-license-key-input"
+        type="text"
+        class="clr-col-lg-5 clr-col-md-5 clr-col-sm-5 clr-col-xs-5"
+        @blur="onValidate"
+      />
+      <label for="license-upload" class="download-btn btn btn-link btn-sm">
+        <span class="vx-icon-import icon"></span>
+      </label>
+      <input
+        id="license-upload"
+        type="file"
+        class="license-upload"
+        @change="onUploadLicense"
+      />
+    </div>
+    <div class="block">
+      <label class="label" for="new-license-name-input"
+        >{{ localization.license.licenseName }}
+      </label>
+      <input
+        id="new-license-name-input"
+        v-model="newLicenseLocal.name"
+        data-id="new-license-name-input"
+        type="text"
+        class="clr-col-lg-5 clr-col-md-5 clr-col-sm-5 clr-col-xs-5"
+        disabled
+      />
+    </div>
+
+    <div class="block-wrap">
+      <div class="block">
+        <label class="label">{{ localization.common.product }}</label>
+        <span>{{ newLicenseLocal.productName }}</span>
+      </div>
+      <div class="block">
+        <label class="label">{{ localization.common.productFeatures }}</label>
+        <atoms-the-icon
+          v-show="!!newLicenseLocal.features.length"
+          id="features-icon"
+          data-id="features-icon"
+          fill="#0072a3"
+          width="24px"
+          height="24px"
+          name="info-circle"
+          class="pointer"
+          @click.stop="isShowFeatures = !isShowFeatures"
+        />
+        <Teleport to="body">
+          <atoms-tooltip-signpost
+            v-if="isShowFeatures"
+            elem-id="features-icon"
+            @hide="isShowFeatures = false"
+          >
+            <div class="flex-direction-column">
+              <span v-for="item in newLicenseLocal.features" :key="item">{{
+                item
+              }}</span>
+            </div>
+          </atoms-tooltip-signpost>
+        </Teleport>
+      </div>
+    </div>
+    <div class="block-wrap">
+      <div class="block">
+        <label class="label">{{ localization.common.capacity }}</label>
+        <span>{{ newLicenseLocal.capacity }}</span>
+      </div>
+      <div class="block">
+        <label class="label">{{ localization.common.expires }}</label>
+        <span>{{ newLicenseLocal.licenseExpires }}</span>
+      </div>
+    </div>
+    <div class="block-wrap">
+      <div class="block">
+        <label class="label">{{ localization.license.limits }}</label>
+        <atoms-the-icon
+          v-show="!!newLicenseLocal.limits.length"
+          id="limits-icon"
+          data-id="limits-icon"
+          fill="#0072a3"
+          width="24px"
+          height="24px"
+          name="info-circle"
+          class="pointer"
+          @click.stop="isShowLimits = !isShowLimits"
+        />
+        <Teleport to="body">
+          <atoms-tooltip-signpost
+            v-if="isShowLimits"
+            elem-id="limits-icon"
+            @hide="isShowLimits = false"
+          >
+            <div class="flex-direction-column">
+              <span v-for="item in newLicenseLocal.limits" :key="item">{{
+                item
+              }}</span>
+            </div>
+          </atoms-tooltip-signpost>
+        </Teleport>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_NewSystemLicense } from '~/components/common/pages/licensing/lib/models/interfaces'
+
+const newLicenseLocal = defineModel<UI_I_NewSystemLicense>('newLicenseData', {
+  required: true,
+})
+const licenseKey = defineModel<string>('licenseKey', { required: true })
+const errorMessage = defineModel<string[]>('validationError', {
+  required: true,
+})
+
+const emits = defineEmits<{
+  (event: 'validate', value: string): void
+}>()
+
+const { $text }: any = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowFeatures = ref<boolean>(false)
+const isShowLimits = ref<boolean>(false)
+
+const licenseKeyText = computed<string>(() =>
+  $text.toCapitalize(localization.value.license.licenseKey)
+)
+
+const onUploadLicense = (event: Event): void => {
+  const file = event.target?.files[0]
+  if (file) {
+    const reader = new FileReader()
+    reader.onload = (data: any): void => {
+      licenseKey.value = data.target.result
+      setTimeout(() => {
+        onValidate()
+      }, 0)
+    }
+    reader.readAsText(file)
+  }
+}
+
+const onValidate = (): void => {
+  if (!licenseKey.value) return
+
+  emits('validate', licenseKey.value)
+}
+</script>
+<style lang="scss" scoped>
+.form {
+  .block {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0.3rem 0 0.3rem 0;
+
+    span {
+      width: 200px;
+    }
+
+    .label {
+      margin: 3px 0 5px 0;
+      letter-spacing: normal;
+      width: 210px;
+      border: none;
+      display: block;
+
+      font-size: 0.55rem;
+      font-weight: 500;
+      line-height: 0.9rem;
+    }
+
+    .download-btn {
+      max-width: 24px;
+      min-width: 24px;
+      padding: 0;
+      margin-left: 6px;
+
+      .icon {
+        width: 20px;
+      }
+    }
+
+    .license-upload {
+      display: none;
+    }
+  }
+
+  .block-wrap {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    gap: 250px;
+  }
+}
+</style>

package/components/common/pages/licensing/modals/assign/tableView/TableView.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="data-table-view">
+    <div class="data-table-view-inner">
+      <atoms-table-data-grid
+        v-model:selected-row="selectedActiveKey"
+        v-model:page-size="pagination.pageSize"
+        v-model:page="pagination.page"
+        type="radio"
+        class="data-table"
+        test-id="licensing-assign-table"
+        :head-items="headItems"
+        :body-items="bodyItems"
+        :total-items="props.totalItems"
+        :total-pages="props.totalPages"
+        hide-page-size
+        server-off
+        with-info
+        :fill-width="false"
+      >
+        <template #icon="{ item }">
+          <span :class="['icon', item.data.iconClassName]" />
+          <span class="text-ellipsis" :title="item.text">
+            {{ item.text }}
+          </span>
+          <!--            <span v-if="item.id === selectedActiveKey && !item.data.text" />-->
+        </template>
+        <template v-if="activeLicense" #hiddenInfo>
+          <h3 class="hidden-info-head">{{ localization.common.limit }}</h3>
+
+          <div
+            v-for="item in activeLicense.limits"
+            :key="item"
+            class="hidden-info-body"
+          >
+            {{ item }}
+          </div>
+
+          <h3 class="hidden-info-head">
+            {{ localization.common.productFeatures }}
+          </h3>
+
+          <div
+            v-for="(item, key) in activeLicense.features"
+            :key="`${item}${key}`"
+            class="hidden-info-body"
+          >
+            {{ item }}
+          </div>
+        </template>
+      </atoms-table-data-grid>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Pagination } from '~/lib/models/table/interfaces'
+import type { UI_I_SystemLicense } from '~/components/common/pages/licensing/lib/models/interfaces'
+import * as table from '~/components/common/pages/licensing/modals/assign/tableView/lib/config/table'
+
+const selectedActiveKey = defineModel<string>('selectedActiveKey', {
+  required: true,
+})
+const pagination = defineModel<UI_I_Pagination>('pagination', {
+  required: true,
+})
+
+const props = defineProps<{
+  dataTable: UI_I_SystemLicense[]
+  totalItems: number
+  totalPages: number
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const activeLicense = computed<UI_I_SystemLicense | null>(() => {
+  return (
+    props.dataTable.find((item) => item.id === selectedActiveKey.value) || null
+  )
+})
+
+const headItems = computed<UI_I_HeadItem[]>(() =>
+  table.headItems(localization.value)
+)
+
+const bodyItems = ref<UI_I_BodyItem[][]>([])
+watch(
+  () => props.dataTable,
+  (newValue) => {
+    if (!newValue?.length) {
+      bodyItems.value = []
+      return
+    }
+
+    bodyItems.value = table.bodyItems(newValue)
+
+    // TODO рассмотреть(после монтирования компонента найти активную лицензию)
+    nextTick(() => {
+      const active = newValue.find((license) => license.isActive)
+      if (active) {
+        selectedActiveKey.value = active.id
+      }
+    })
+  },
+  { deep: true, immediate: true }
+)
+</script>
+
+<style lang="scss" scoped>
+.data-table-view {
+  overflow: hidden;
+  height: inherit;
+  margin-bottom: 10px;
+
+  &-inner {
+    height: 290px;
+  }
+
+  :deep(.data-table) {
+    height: inherit;
+
+    .datagrid-outer-wrapper {
+      height: inherit;
+    }
+
+    .active .double-arrow {
+      margin: 2px 0;
+      height: 0.6rem;
+      transform: rotate(90deg);
+      width: 0.6rem;
+      fill: var(--modal-bg-color);
+    }
+
+    .double-arrow {
+      margin: 2px 0;
+      height: 0.6rem;
+      width: 0.6rem;
+      transform: rotate(90deg);
+      fill: var(--global-font-color);
+    }
+  }
+}
+
+.hidden-info {
+  &-head {
+    font-size: 0.8rem;
+    color: var(--global-font-color2) !important;
+    line-height: 1.6rem;
+  }
+
+  &-body {
+    div {
+      color: var(--global-font-color2) !important;
+      line-height: 1.2rem;
+      font-size: 13px;
+      font-weight: 400;
+    }
+  }
+}
+
+.signpost {
+  :deep(h3) {
+    font-size: 1rem;
+    color: var(--global-font-color);
+    line-height: 1.7rem;
+  }
+
+  div {
+    line-height: 1.2rem;
+    font-size: 13px;
+    font-weight: 400;
+  }
+}
+
+.icon {
+  width: 16px;
+  height: 16px;
+  display: block;
+  background-size: 100% auto;
+  margin: 5px;
+}
+
+.vertical-divider {
+  width: 1px;
+  height: 22px;
+  background: #bbb;
+  margin: 2px 2px 0 -5px;
+}
+</style>

package/components/common/pages/licensing/modals/assign/tableView/lib/config/table.ts

@@ -0,0 +1,100 @@
+import type {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import { constructHeadItem } from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
+import type { UI_I_SystemLicense} from "~/components/common/pages/licensing/lib/models/interfaces";
+import type {
+  UI_I_LicenseData,
+  UI_I_HiddenTextIcon,
+} from '~/components/common/pages/licensing/modals/assign/tableView/lib/models/interfaces'
+import { licenseTableItemsKeys as tableKeys } from '~/components/common/pages/licensing/modals/assign/tableView/lib/config/tableKeys'
+
+const getItems = (
+  localization: UI_I_Localization
+): [string, boolean, string, string][] => {
+  const { $text }: any = useNuxtApp()
+  return [
+    ['', true, '40px', tableKeys[0]],
+    [localization.license.license, true, '200px', tableKeys[1]],
+    [localization.license.licenseKey, true, '280px', tableKeys[2]],
+    [localization.common.product, true, '200px', tableKeys[3]],
+    [$text.toCapitalize(localization.common.usage), true, '120px', tableKeys[4]],
+    [localization.common.capacity, true, '200px', tableKeys[5]],
+  ]
+}
+export const headItems = (localization: UI_I_Localization): UI_I_HeadItem[] => {
+  const result: UI_I_HeadItem[] = []
+  getItems(localization).forEach((item, i) => {
+    const col = i === 0 || i === 1 ? 'icon' : `col${i}`
+    result.push(
+      constructHeadItem(
+        col,
+        item[0],
+        i === 0 ? '' : item[3],
+        false,
+        item[2],
+        undefined,
+        item[3]
+      )
+    )
+  })
+  return result
+}
+export const bodyItems = (data: UI_I_SystemLicense[]): UI_I_BodyItem[][] => {
+  const bodyItems: UI_I_BodyItem[][] = []
+
+  data.forEach((license: UI_I_SystemLicense) => {
+    const licenseData: UI_I_LicenseData = {
+      name: 'hidden-text-triangle',
+      iconClassName: `vx-icon-${license.licenseIcon}`
+    }
+    const hiddenTextIcon: UI_I_HiddenTextIcon = {
+      name: 'doubleArrows',
+      // text: license[tableKeys[0]],
+      text: '',
+    }
+    bodyItems.push([
+      {
+        key: 'icon',
+        text: '',
+        data: hiddenTextIcon,
+        id: license.id,
+        testId: `table-item-${license.id}`,
+      },
+      {
+        key: 'icon',
+        text: license[tableKeys[1]],
+        id: license.id,
+        testId: `table-item-${license.id}`,
+        data: licenseData,
+      },
+      {
+        key: 'col2',
+        text: license[tableKeys[2]],
+        id: license.id,
+        testId: `table-item-${license.id}`,
+      },
+      {
+        key: 'col3',
+        text: license[tableKeys[3]],
+        id: license.id,
+        testId: `table-item-${license.id}`,
+      },
+      {
+        key: 'col4',
+        text: license[tableKeys[4]],
+        id: license.id,
+        testId: `table-item-${license.id}`,
+      },
+      {
+        key: 'col5',
+        text: license[tableKeys[5]],
+        id: license.id,
+        testId: `table-item-${license.id}`,
+      },
+    ])
+  })
+  return bodyItems
+}

package/components/common/pages/licensing/modals/assign/tableView/lib/config/tableKeys.ts

@@ -0,0 +1,10 @@
+import type { UI_T_LicenseTableItemsTuple } from '~/components/common/pages/licensing/modals/assign/tableView/lib/models/types'
+
+export const licenseTableItemsKeys: UI_T_LicenseTableItemsTuple = [
+  'features',
+  'license',
+  'key',
+  'product',
+  'usage',
+  'capacity',
+]

package/components/common/pages/licensing/modals/assign/tableView/lib/models/interfaces.ts

@@ -0,0 +1,9 @@
+export interface UI_I_LicenseData {
+  name: string
+  iconClassName: string
+}
+
+export interface UI_I_HiddenTextIcon {
+  name: string
+  text: string
+}

package/components/common/pages/licensing/modals/assign/tableView/lib/models/types.ts

@@ -0,0 +1,8 @@
+export type UI_T_LicenseTableItemsTuple = [
+  'features',
+  'license',
+  'key',
+  'product',
+  'usage',
+  'capacity'
+]