bfg-common 1.6.78 → 1.6.80

package/components/common/certificate/Info/new/New.vue

@@ -0,0 +1,285 @@
+<template>
+  <div class="certificate-info-page p-4 h-full">
+    <div class="certificate-info-item-box p-4">
+      <div class="flex justify-between items-center flex-wrap gap-4">
+        <div class="flex items-center gap-3">
+          <ui-icon
+            v-if="statusIconName"
+            :name="statusIconName"
+            width="38"
+            height="38"
+          />
+          <div>
+            <p class="status-text mb-1">
+              {{ localization.common.status }}: {{ statusText }}
+            </p>
+            <p class="status-subtext">
+              {{ currentExpirationText }}
+            </p>
+          </div>
+        </div>
+        <div class="elapsed-block">
+          <div class="flex justify-between items-center gap-2 mb-[10px]">
+            <p class="elapsed-text">
+              {{ localization.inventoryConfigure.elapsed }}
+            </p>
+            <p class="elapsed-value">{{ currentElapsedValue }}%</p>
+          </div>
+          <ui-progress-bar-linear
+            :percent="currentElapsedValue"
+            :color="elapsedProgressBarColor"
+            stroke-width="10"
+            border-radius="16"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="grid cols-2 mt-3 gap-3">
+      <div class="certificate-info-item-box p-4">
+        <div class="flex items-center gap-3">
+          <div class="icon-box">
+            <ui-icon name="file" width="20" height="20" />
+          </div>
+          <p class="title-info-block">{{ localization.common.subject }}</p>
+        </div>
+        <div class="grid gap-3 mt-4">
+          <div
+            v-for="(item, key) in subjectInfoItem"
+            :key="key"
+            class="flex justify-between items-center flex-wrap gap-2"
+          >
+            <p class="info-label">{{ localization.inventoryConfigure[key] }}</p>
+            <p class="info-value">{{ item }}</p>
+          </div>
+        </div>
+      </div>
+      <div class="certificate-info-item-box p-4">
+        <div class="flex items-center gap-3">
+          <div class="icon-box">
+            <ui-icon name="permission" width="20" height="20" />
+          </div>
+          <p class="title-info-block">{{ localization.common.issuer }}</p>
+        </div>
+        <div class="grid gap-3 mt-4">
+          <div
+            v-for="(item, key) in issuerInfoItem"
+            :key="key"
+            class="flex justify-between items-center flex-wrap gap-2"
+          >
+            <p class="info-label">{{ localization.inventoryConfigure[key] }}</p>
+            <p class="info-value">{{ item }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <p class="valid-period-title mt-5 mb-4">
+      {{ localization.inventoryConfigure.validPeriod }}
+    </p>
+    <div class="certificate-info-item-box p-4">
+      <p class="active-dates-title mb-4">
+        {{ localization.inventoryConfigure.certificateActiveDates }}
+      </p>
+      <div class="grid-container-dates grid cols-2">
+        <div class="flex items-center gap-3">
+          <div class="icon-box">
+            <ui-icon name="icon-events" width="20" height="20" />
+          </div>
+          <div>
+            <p class="date-title-info mb-1">
+              {{ localization.common.validFrom }}
+            </p>
+            <p class="date-value-info">{{ props.validFrom }}</p>
+          </div>
+        </div>
+        <div class="flex items-center gap-3">
+          <div class="icon-box">
+            <ui-icon name="icon-events" width="20" height="20" />
+          </div>
+          <div>
+            <p class="date-title-info mb-1">
+              {{ localization.common.validTo }}
+            </p>
+            <p class="date-value-info">{{ props.validTo }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Certificate } from '~/components/common/certificate/lib/models/interfaces'
+import type { UI_I_CertificateInfoItem } from '~/components/common/certificate/Info/new/lib/models/interfaces'
+import {
+  statusIconNameFunc,
+  statusTextFunc,
+  expirationTextFunc,
+  expirationDaysFunc,
+  elapsedValueFunc,
+  elapsedProgressBarColorFunc,
+} from '~/components/common/certificate/Info/new/lib/config'
+import { certificateInfo } from '~/components/common/certificate/Info/new/lib/utils'
+
+const props = defineProps<{
+  certificateData: UI_I_Certificate | {}
+  validFrom: string
+  validTo: string
+  statusText: string
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const currentExpirationDays = computed<number>(() =>
+  expirationDaysFunc(props.certificateData)
+)
+const statusIconName = ref<string>(
+  statusIconNameFunc(currentExpirationDays.value)
+)
+const statusText = ref<string>(
+  statusTextFunc(currentExpirationDays.value, localization.value)
+)
+const currentExpirationText = computed<string>(() =>
+  expirationTextFunc(currentExpirationDays.value, localization.value)
+)
+const currentElapsedValue = computed<number>(() =>
+  elapsedValueFunc(props.certificateData)
+)
+const elapsedProgressBarColor = computed<string>(() =>
+  elapsedProgressBarColorFunc(currentExpirationDays.value)
+)
+
+const subjectInfoItem = computed<UI_I_CertificateInfoItem>(() =>
+  certificateInfo(props.certificateData, 'subject')
+)
+const issuerInfoItem = computed<UI_I_CertificateInfoItem>(() =>
+  certificateInfo(props.certificateData, 'issuer')
+)
+</script>
+
+<style>
+:root {
+  --certificate-info-page-bg: #ffffff;
+  --certificate-info-page-item-box-bg: #ffffff;
+  --certificate-info-page-item-box-border: #e9ebed;
+  --certificate-info-page-item-status-text: #4d5d69;
+  --certificate-info-page-item-status-subtext: #9da6ad;
+  --certificate-info-page-item-elapsed-value: #4d5d69;
+  --certificate-info-page-item-icon-box-bg: #008fd614;
+  --certificate-info-page-item-icon-box-icon: #008fd6;
+  --certificate-info-page-item-title-block: #4d5d69;
+  --certificate-info-page-item-label: #4d5d69;
+  --certificate-info-page-item-value: #182531;
+  --certificate-info-page-valid-period-title: #4d5d69;
+  --certificate-info-page-active-dates-title: #4d5d69;
+  --certificate-info-page-date-value-info: #182531;
+}
+:root.dark-theme {
+  --certificate-info-page-bg: #334453;
+  --certificate-info-page-item-box-bg: #1b2a371f;
+  --certificate-info-page-item-box-border: #e9ebed1f;
+  --certificate-info-page-item-status-text: #e9eaec;
+  --certificate-info-page-item-status-subtext: #9da6ad;
+  --certificate-info-page-item-elapsed-value: #e9eaec;
+  --certificate-info-page-item-icon-box-bg: #2ba2de29;
+  --certificate-info-page-item-icon-box-icon: #2ba2de;
+  --certificate-info-page-item-title-block: #e9eaec;
+  --certificate-info-page-item-label: #e9eaec;
+  --certificate-info-page-item-value: #e9eaec;
+  --certificate-info-page-valid-period-title: #e9eaec;
+  --certificate-info-page-active-dates-title: #e9eaec;
+  --certificate-info-page-date-value-info: #e9eaec;
+}
+</style>
+
+<style lang="scss" scoped>
+.certificate-info-page {
+  background-color: var(--certificate-info-page-bg);
+  box-shadow: 0 1px 4px 0 #00000014;
+  border-radius: 8px;
+
+  .certificate-info-item-box {
+    background-color: var(--certificate-info-page-item-box-bg);
+    border: 1px solid var(--certificate-info-page-item-box-border);
+    border-radius: 8px;
+
+    .status-text {
+      font-weight: 500;
+      font-size: 14px;
+      color: var(--certificate-info-page-item-status-text);
+    }
+    .status-subtext {
+      font-weight: 400;
+      font-size: 12px;
+      color: var(--certificate-info-page-item-status-subtext);
+    }
+    .elapsed-block {
+      min-width: 320px;
+
+      .elapsed-text {
+        font-weight: 400;
+        font-size: 13px;
+        color: #9da6ad;
+      }
+      .elapsed-value {
+        font-weight: 400;
+        font-size: 13px;
+        color: var(--certificate-info-page-item-elapsed-value);
+      }
+    }
+    .icon-box {
+      width: 40px;
+      height: 40px;
+      background: var(--certificate-info-page-item-icon-box-bg);
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--certificate-info-page-item-icon-box-icon);
+    }
+    .title-info-block {
+      font-weight: 500;
+      font-size: 14px;
+      color: var(--certificate-info-page-item-title-block);
+    }
+    .info-label {
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 18px;
+      color: var(--certificate-info-page-item-label);
+    }
+    .info-value {
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 18px;
+      color: var(--certificate-info-page-item-value);
+    }
+  }
+  .valid-period-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--certificate-info-page-valid-period-title);
+  }
+  .active-dates-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--certificate-info-page-active-dates-title);
+  }
+  .grid-container-dates {
+    grid-gap: 44px;
+
+    .date-title-info {
+      font-size: 13px;
+      font-weight: 400;
+      line-height: 18px;
+      color: #9da6ad;
+    }
+    .date-value-info {
+      font-size: 13px;
+      font-weight: 400;
+      line-height: 18px;
+      color: var(--certificate-info-page-date-value-info);
+    }
+  }
+}
+</style>

package/components/common/certificate/Info/new/lib/config/index.ts

@@ -0,0 +1,59 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Certificate } from '~/components/common/certificate/lib/models/interfaces'
+
+export const statusIconNameFunc = (days: number): string => {
+  let result = ''
+
+  if (days === 0) result = 'error-circle'
+  else if (days >= 30) result = 'success-fill'
+  else if (days < 30) result = 'circle-warning'
+
+  return result
+}
+
+export const statusTextFunc = (
+  days: number,
+  localization: UI_I_Localization
+): string => {
+  let result = ''
+
+  if (days === 0) result = localization.inventoryConfigure.expiring
+  else if (days >= 30) result = localization.common.good
+  else if (days < 30) result = localization.inventoryConfigure.expiringSoon
+
+  return result
+}
+
+export const expirationDaysFunc = (value: UI_I_Certificate | {}): number => {
+  const validFrom = new Date(value.valid_from).getTime()
+  const validTo = new Date(value.valid_to).getTime()
+
+  const diffMs = validTo - validFrom
+  return diffMs / (1000 * 60 * 60 * 24)
+}
+
+export const expirationTextFunc = (
+  days: number,
+  localization: UI_I_Localization
+): string =>
+  localization.inventoryConfigure.certificateExpiration.replace('{0}', days)
+
+export const elapsedValueFunc = (value: UI_I_Certificate | {}): number => {
+  const start = new Date(value.valid_from).getTime()
+  const end = new Date(value.valid_to).getTime()
+  const now = new Date().getTime()
+
+  const percent = ((now - start) / (end - start)) * 100
+
+  return Math.round(percent)
+}
+
+export const elapsedProgressBarColorFunc = (days: number): string => {
+  let result = ''
+
+  if (days === 0) result = '--progress-bar-0-default'
+  else if (days >= 30) result = '--progress-bar-available'
+  else if (days < 30) result = '--progress-bar-2-default'
+
+  return result
+}

package/components/common/certificate/Info/new/lib/models/interfaces.ts

@@ -0,0 +1,3 @@
+export interface UI_I_CertificateInfoItem {
+  [key: string]: string
+}

package/components/common/certificate/Info/new/lib/utils/index.ts

@@ -0,0 +1,10 @@
+import type { UI_I_Certificate } from '~/components/common/certificate/lib/models/interfaces'
+import type { UI_I_CertificateInfoItem } from '~/components/common/certificate/Info/new/lib/models/interfaces'
+
+export const certificateInfo = (
+  data: UI_I_Certificate | {},
+  type: string
+): UI_I_CertificateInfoItem =>
+  data?.[type]?.match(
+    /SERIALNUMBER=(?<serialNumber>[^,]+),CN=(?<commonName>[^,]+),OU=(?<organizationalUnit>[^,]+),O=(?<organization>[^,]+),L=(?<locality>[^,]+),ST=(?<state>[^,]+),C=(?<country>[^,]+)/
+  )?.groups

package/components/common/certificate/Old.vue

@@ -0,0 +1,27 @@
+<template>
+  <atoms-loader v-show="props.loading" test-id="certificate-spinner" />
+  <div class="certificate flex flex-col h-full">
+    <common-certificate-tools @renew-certificate="emits('renew-certificate')" />
+
+    <common-certificate-info :certificate-data="props.certificateData" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Certificate } from '~/components/common/certificate/lib/models/interfaces'
+
+const props = defineProps<{
+  loading: boolean
+  certificateData: UI_I_Certificate | {}
+}>()
+
+const emits = defineEmits<{
+  (event: 'renew-certificate'): void
+}>()
+</script>
+
+<style lang="scss" scoped>
+.certificate {
+  padding-left: 10px;
+}
+</style>

package/components/common/certificate/new/New.vue

@@ -0,0 +1,30 @@
+<template>
+  <common-certificate-new-skeleton
+    v-if="props.loading"
+    test-id="certificate-spinner"
+  />
+  <div v-else class="certificate flex flex-col h-full">
+    <common-certificate-tools @renew-certificate="emits('renew-certificate')" />
+
+    <common-certificate-info :certificate-data="props.certificateData" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Certificate } from '~/components/common/certificate/lib/models/interfaces'
+
+const props = defineProps<{
+  loading: boolean
+  certificateData: UI_I_Certificate | {}
+}>()
+
+const emits = defineEmits<{
+  (event: 'renew-certificate'): void
+}>()
+</script>
+
+<style lang="scss" scoped>
+.certificate {
+  padding-left: 10px;
+}
+</style>

package/components/common/certificate/new/Skeleton.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="certificate-skeleton-page grid h-full">
+    <div class="flex justify-between flex-wrap gap-4 mb-4">
+      <ui-skeleton-item width="160" height="22" />
+      <ui-skeleton-item width="106" height="36" border-radius="8" />
+    </div>
+
+    <div class="page-body p-4">
+      <div class="info-block-box flex justify-between flex-wrap gap-4 mb-3 p-4">
+        <div class="flex gap-3">
+          <ui-skeleton-item width="38" height="38" border-radius="50%" />
+          <div class="grid gap-1">
+            <ui-skeleton-item width="80" height="18" />
+            <ui-skeleton-item width="400" height="16" />
+          </div>
+        </div>
+        <div class="info-block-top-right-block">
+          <div class="flex justify-between gap-3 mb-[10px]">
+            <ui-skeleton-item width="64" height="18" />
+            <ui-skeleton-item width="64" height="18" />
+          </div>
+          <ui-skeleton-item width="100%" height="10" />
+        </div>
+      </div>
+      <div class="grid cols-2 gap-3">
+        <div class="info-block-box p-4">
+          <div class="flex items-center gap-3 mb-4">
+            <ui-skeleton-item width="40" height="40" border-radius="8" />
+            <ui-skeleton-item width="80" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="212" height="18" />
+            <ui-skeleton-item width="292" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="160" height="18" />
+            <ui-skeleton-item width="160" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="240" height="18" />
+            <ui-skeleton-item width="240" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="112" height="18" />
+            <ui-skeleton-item width="272" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="212" height="18" />
+            <ui-skeleton-item width="144" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="80" height="18" />
+            <ui-skeleton-item width="290" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="256" height="18" />
+            <ui-skeleton-item width="80" height="18" />
+          </div>
+        </div>
+        <div class="info-block-box p-4">
+          <div class="flex items-center gap-3 mb-4">
+            <ui-skeleton-item width="40" height="40" border-radius="8" />
+            <ui-skeleton-item width="80" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="212" height="18" />
+            <ui-skeleton-item width="292" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="160" height="18" />
+            <ui-skeleton-item width="160" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="240" height="18" />
+            <ui-skeleton-item width="240" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="112" height="18" />
+            <ui-skeleton-item width="272" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="212" height="18" />
+            <ui-skeleton-item width="144" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="80" height="18" />
+            <ui-skeleton-item width="290" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="256" height="18" />
+            <ui-skeleton-item width="80" height="18" />
+          </div>
+        </div>
+      </div>
+      <ui-skeleton-item width="80" height="20" class="mt-4 mb-4" />
+      <div class="info-block-box p-4">
+        <ui-skeleton-item width="80" height="18" />
+        <div class="grid cols-2">
+          <div class="flex mt-4">
+            <ui-skeleton-item width="40" height="40" border-radius="8" />
+            <div class="ml-3">
+              <ui-skeleton-item width="80" height="18" class="mb-1" />
+              <ui-skeleton-item width="240" height="18" />
+            </div>
+          </div>
+          <div class="flex mt-4">
+            <ui-skeleton-item width="40" height="40" border-radius="8" />
+            <div class="ml-3">
+              <ui-skeleton-item width="80" height="18" class="mb-1" />
+              <ui-skeleton-item width="240" height="18" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style>
+:root {
+  --certificate-page-skeleton-body-bg: #ffffff;
+  --certificate-page-skeleton-body-info-block-bg: #ffffff;
+  --certificate-page-skeleton-body-info-block-border: #e9ebed;
+}
+:root.dark-theme {
+  --certificate-page-skeleton-body-bg: #334453;
+  --certificate-page-skeleton-body-info-block-bg: #1b2a371f;
+  --certificate-page-skeleton-body-info-block-border: #e9ebed1f;
+}
+</style>
+
+<style scoped lang="scss">
+.certificate-skeleton-page {
+  grid-template-rows: max-content auto;
+  margin-top: 6px;
+
+  .page-body {
+    background-color: var(--certificate-page-skeleton-body-bg);
+    box-shadow: 0 1px 4px 0 #00000014;
+    border-radius: 8px;
+
+    .info-block-box {
+      background-color: var(--certificate-page-skeleton-body-info-block-bg);
+      border: 1px solid var(--certificate-page-skeleton-body-info-block-border);
+      border-radius: 8px;
+
+      .info-block-top-right-block {
+        min-width: 320px;
+      }
+    }
+  }
+}
+</style>

package/components/common/certificate/tools/New.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="flex flex-wrap justify-between gap-4 mb-4">
+    <h3 class="certificate-title text-[18px] font-[500]">
+      {{ props.pageTitle }}
+    </h3>
+
+    <ui-button
+      test-id="certificate-renew-button"
+      size="md"
+      @click="emits('show-modal', 'renew')"
+    >
+      <template #icon> <ui-icon name="update" width="24" /> </template>
+      {{ localization.common.renew }}
+    </ui-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+import type { UI_T_ModeModal } from '~/components/common/certificate/lib/models/types'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  pageTitle: string
+  tabs: UI_I_CollapseNavItem[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'show-modal', value: UI_T_ModeModal): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style>
+:root {
+  --certificate-page-title: #4d5d69;
+}
+:root.dark-theme {
+  --certificate-page-title: #e9eaec;
+}
+</style>
+
+<style lang="scss" scoped>
+.certificate-title {
+  color: var(--certificate-page-title);
+}
+</style>

package/components/common/certificate/tools/Old.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="certificate-headline">
+    <common-headline :headline="props.pageTitle">
+      <template #action>
+        <atoms-tabs
+          :items="props.tabs"
+          test-id="certificate-tabs"
+          size="small"
+          @change="emits('show-modal', $event)"
+        />
+      </template>
+    </common-headline>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+import type { UI_T_ModeModal } from '~/components/common/certificate/lib/models/types'
+
+const props = defineProps<{
+  pageTitle: string
+  tabs: UI_I_CollapseNavItem[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'show-modal', value: UI_T_ModeModal): void
+}>()
+</script>
+
+<style lang="scss" scoped>
+.certificate-headline {
+  :deep(.heading-block__actions) {
+    .nav {
+      margin-top: 0;
+      align-items: flex-start;
+    }
+  }
+}
+</style>