bfg-common 1.6.76 → 1.6.78

package/components/common/adapterManager/ui/table/header/HeaderNew.vue

@@ -1,81 +1,81 @@
-<template>
-  <ui-line v-if="!isActive" margin="8px 0" />
-  <div
-    :class="[
-      'manager-header',
-      {
-        'is-active': isActive,
-      },
-    ]"
-  >
-    <span class="manager-header-title">
-      {{ props.title }}
-    </span>
-    <span
-      v-if="isActive && props.fullMode"
-      class="manager-header-add"
-      @click="onShowAddAdapterModal"
-    >
-      <ui-icon name="plus" width="18" height="18" />
-    </span>
-    <span v-else class="empty-block"></span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_T_HeaderTitle } from '~/components/common/adapterManager/ui/table/lib/models/types'
-
-const props = defineProps<{
-  title: string
-  id: UI_T_HeaderTitle
-  fullMode: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'show-add-adapter-modal'): void
-}>()
-
-const isActive = computed<boolean>(() => props.id === 'header-active')
-
-const onShowAddAdapterModal = (): void => {
-  emits('show-add-adapter-modal')
-}
-</script>
-
-<style scoped lang="scss">
-.manager-header {
-  min-height: 20px;
-  display: flex;
-  justify-content: space-between;
-  column-gap: 8px;
-
-  &-title {
-    font-weight: 500;
-    font-size: 13px;
-    line-height: 16px;
-    letter-spacing: 0;
-    vertical-align: middle;
-    margin-top: 2px;
-    color: var(--table-text-first);
-    word-wrap: break-word;
-    user-select: none;
-  }
-
-  &-add {
-    display: block;
-    width: 18px;
-    height: 18px;
-    margin-top: 1px;
-    color: var(--table-text-first);
-    cursor: pointer;
-
-    &:hover {
-      color: var(--table-text-hover);
-    }
-  }
-  .empty-block {
-    width: 18px;
-    height: 18px;
-  }
-}
-</style>
+<template>
+  <ui-line v-if="!isActive" margin="8px 0" />
+  <div
+    :class="[
+      'manager-header',
+      {
+        'is-active': isActive,
+      },
+    ]"
+  >
+    <span class="manager-header-title">
+      {{ props.title }}
+    </span>
+    <span
+      v-if="isActive && props.fullMode"
+      class="manager-header-add"
+      @click="onShowAddAdapterModal"
+    >
+      <ui-icon name="plus" width="18" height="18" />
+    </span>
+    <span v-else class="empty-block"></span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_T_HeaderTitle } from '~/components/common/adapterManager/ui/table/lib/models/types'
+
+const props = defineProps<{
+  title: string
+  id: UI_T_HeaderTitle
+  fullMode: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'show-add-adapter-modal'): void
+}>()
+
+const isActive = computed<boolean>(() => props.id === 'header-active')
+
+const onShowAddAdapterModal = (): void => {
+  emits('show-add-adapter-modal')
+}
+</script>
+
+<style scoped lang="scss">
+.manager-header {
+  min-height: 20px;
+  display: flex;
+  justify-content: space-between;
+  column-gap: 8px;
+
+  &-title {
+    font-weight: 500;
+    font-size: 13px;
+    line-height: 16px;
+    letter-spacing: 0;
+    vertical-align: middle;
+    margin-top: 2px;
+    color: var(--table-text-first);
+    word-wrap: break-word;
+    user-select: none;
+  }
+
+  &-add {
+    display: block;
+    width: 18px;
+    height: 18px;
+    margin-top: 1px;
+    color: var(--table-text-first);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--table-text-hover);
+    }
+  }
+  .empty-block {
+    width: 18px;
+    height: 18px;
+  }
+}
+</style>

package/components/common/adapterManager/ui/table/header/HeaderOld.vue

@@ -1,79 +1,79 @@
-<template>
-  <tr
-    :class="{
-      'k-state-selected': props.isSelected,
-    }"
-    :data-id="props.testId"
-    @click="onSelectAdapter"
-  >
-    <td>
-      <span class="assigned-pnic-sections">
-        {{ props.title }}
-      </span>
-    </td>
-  </tr>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  isSelected: boolean
-  title: string
-  testId: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-header', value: string): void
-}>()
-
-const onSelectAdapter = (): void => emits('select-header')
-</script>
-
-<style scoped lang="scss">
-tr {
-  background-color: #fff;
-  height: 24px;
-  color: #565656;
-  cursor: default;
-  user-select: none;
-
-  &.k-state-selected {
-    background-color: #29414e;
-    color: #ffffff;
-    border-bottom: 1px solid;
-    border-bottom-color: transparent;
-  }
-
-  &:not(.k-state-selected):hover {
-    background-color: #e8e8e8;
-    color: #454545;
-
-    td {
-      border-bottom: 1px solid #666666;
-    }
-  }
-
-  td {
-    border-width: 0 0 1px;
-    border-color: #ddd;
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 24px;
-    padding: 0 12px;
-    border-style: solid;
-
-    * {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  span {
-    //TODO set font size to 13px when will add font
-    //font-family: ProximaNova;
-    font-size: 95%;
-    font-weight: 700;
-    margin: 0 3px;
-  }
-}
-</style>
+<template>
+  <tr
+    :class="{
+      'k-state-selected': props.isSelected,
+    }"
+    :data-id="props.testId"
+    @click="onSelectAdapter"
+  >
+    <td>
+      <span class="assigned-pnic-sections">
+        {{ props.title }}
+      </span>
+    </td>
+  </tr>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  isSelected: boolean
+  title: string
+  testId: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-header', value: string): void
+}>()
+
+const onSelectAdapter = (): void => emits('select-header')
+</script>
+
+<style scoped lang="scss">
+tr {
+  background-color: #fff;
+  height: 24px;
+  color: #565656;
+  cursor: default;
+  user-select: none;
+
+  &.k-state-selected {
+    background-color: #29414e;
+    color: #ffffff;
+    border-bottom: 1px solid;
+    border-bottom-color: transparent;
+  }
+
+  &:not(.k-state-selected):hover {
+    background-color: #e8e8e8;
+    color: #454545;
+
+    td {
+      border-bottom: 1px solid #666666;
+    }
+  }
+
+  td {
+    border-width: 0 0 1px;
+    border-color: #ddd;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 24px;
+    padding: 0 12px;
+    border-style: solid;
+
+    * {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  span {
+    //TODO set font size to 13px when will add font
+    //font-family: ProximaNova;
+    font-size: 95%;
+    font-weight: 700;
+    margin: 0 3px;
+  }
+}
+</style>

package/components/common/adapterManager/ui/table/lib/models/types.ts

@@ -1 +1 @@
-export type UI_T_HeaderTitle = 'header-active' | 'header-stand-by' | 'header-unused'
+export type UI_T_HeaderTitle = 'header-active' | 'header-stand-by' | 'header-unused'

package/components/common/certificate/Certificate.vue

@@ -1,10 +1,10 @@
 <template>
-  <component
-    :is="currentComponent"
-    :loading="props.loading"
-    :certificate-data="props.certificateData"
-    @renew-certificate="emits('renew-certificate')"
-  />
+  <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>
@@ -18,16 +18,6 @@ const props = defineProps<{
 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/New.vue'))
-    : defineAsyncComponent(() => import('./Old.vue'))
-)
 </script>
 
 <style lang="scss" scoped>

package/components/common/certificate/{Info/Old.vue → CertificateInfo.vue}

@@ -47,7 +47,7 @@
       </template>
       <template #stackBlockContent
         ><span data-id="certificate-valid-from-value">{{
-          props.validFrom
+          validFrom
         }}</span></template
       >
     </atoms-stack-block>
@@ -64,7 +64,7 @@
       </template>
       <template #stackBlockContent
         ><span data-id="certificate-valid-to-value">{{
-          props.validTo
+          validTo
         }}</span></template
       >
     </atoms-stack-block>
@@ -81,7 +81,7 @@
       </template>
       <template #stackBlockContent
         ><span data-id="certificate-status-value">{{
-          props.statusText
+          statusText
         }}</span></template
       >
     </atoms-stack-block>
@@ -94,12 +94,40 @@ import type { UI_I_Certificate } from '~/components/common/certificate/lib/model
 
 const props = defineProps<{
   certificateData: UI_I_Certificate | {}
-  validFrom: string
-  validTo: string
-  statusText: string
 }>()
 
+const { $store, $formattedDatetime }: any = useNuxtApp()
+
 const localization = computed<UI_I_Localization>(() => useLocal())
+
+const updateTimeFormatAndInterfaceLang = computed<number>(
+  () => $store.getters['main/getUpdateTimeFormatAndInterfaceLang']
+)
+
+const validFrom = computed<string>(() =>
+  updateTimeFormatAndInterfaceLang.value
+    ? $formattedDatetime(props.certificateData.valid_from, {
+        hasSeconds: true,
+      })
+    : ''
+)
+const validTo = computed<string>(() =>
+  updateTimeFormatAndInterfaceLang.value
+    ? $formattedDatetime(props.certificateData.valid_to, {
+        hasSeconds: true,
+      })
+    : ''
+)
+
+const statusText = computed<string>(() =>
+  props.certificateData.status === 'good'
+    ? localization.value.common.valid
+    : props.certificateData.status
+)
+
+onUnmounted(() => {
+  $store.dispatch('main/A_PAUSE_GLOBAL_REFRESH', 'hostCertificate')
+})
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,10 +1,16 @@
 <template>
-  <component
-    :is="currentComponent"
-    :page-title="localization.common.certificate"
-    :tabs="tabs"
-    @show-modal="onShowModal"
-  />
+  <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>
 
   <common-certificate-modals-renew
     v-if="isShowModal"
@@ -18,22 +24,12 @@
 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/tools/lib/config/tabsPannel'
+import { certificateTabsFunc } from '~/components/common/certificate/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[]>(() =>
@@ -51,4 +47,13 @@ const onHideModal = (): void => {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.certificate-headline {
+  :deep(.heading-block__actions) {
+    .nav {
+      margin-top: 0;
+      align-items: flex-start;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,22 @@
+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[] => {
+  return [
+    {
+      text: localization.common.renew,
+      value: 'renew',
+      disabled: false,
+      testId: 'certificate-renew',
+    },
+    {
+      text: localization.common.certificateRefreshTitle,
+      value: 'refreshCaCertificates',
+      disabled: true,
+      testId: 'certificate-refresh',
+      development: true,
+    },
+  ]
+}