bfg-common 1.6.78 → 1.6.79

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>

package/components/common/certificate/{Tools.vue → tools/Tools.vue}

@@ -1,16 +1,10 @@
 <template>
-  <div class="certificate-headline">
-    <common-headline :headline="localization.common.certificate">
-      <template #action>
-        <atoms-tabs
-          :items="tabs"
-          test-id="certificate-tabs"
-          size="small"
-          @change="onShowModal"
-        />
-      </template>
-    </common-headline>
-  </div>
+  <component
+    :is="currentComponent"
+    :page-title="localization.common.certificate"
+    :tabs="tabs"
+    @show-modal="onShowModal"
+  />
 
   <common-certificate-modals-renew
     v-if="isShowModal"
@@ -24,12 +18,22 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 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 { certificateTabsFunc } from '~/components/common/certificate/lib/config/tabsPannel'
+import { certificateTabsFunc } from '~/components/common/certificate/tools/lib/config/tabsPannel'
 
 const emits = defineEmits<{
   (event: 'renew-certificate'): void
 }>()
 
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const tabs = computed<UI_I_CollapseNavItem[]>(() =>
@@ -47,13 +51,4 @@ const onHideModal = (): void => {
 }
 </script>
 
-<style lang="scss" scoped>
-.certificate-headline {
-  :deep(.heading-block__actions) {
-    .nav {
-      margin-top: 0;
-      align-items: flex-start;
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>

package/components/common/certificate/tools/lib/config/tabsPannel.ts

@@ -0,0 +1,20 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+
+export const certificateTabsFunc = (
+  localization: UI_I_Localization
+): UI_I_CollapseNavItem[] => [
+  {
+    text: localization.common.renew,
+    value: 'renew',
+    disabled: false,
+    testId: 'certificate-renew',
+  },
+  {
+    text: localization.common.certificateRefreshTitle,
+    value: 'refreshCaCertificates',
+    disabled: true,
+    testId: 'certificate-refresh',
+    development: true,
+  },
+]