bfg-common 1.5.774 → 1.5.775

package/components/common/pages/tasks/table/expandDetails/ExpandDetails.vue

@@ -42,7 +42,7 @@
             status="error"
             dropdown-width="232px"
             dropdown-left
-            dropdown-bottom
+            dropdown-top
           />
         </div>
       </span>

package/components/common/pages/tasks/table/lib/config/config.ts

@@ -1,279 +1,270 @@
-import type {
-  UI_I_DataTableBody,
-  UI_I_DataTableOptions,
-  UI_I_DataTableHeader,
-} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
-import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_T_Project,
-  UI_T_LangValue,
-  UI_T_AllTypeNodes,
-} from '~/lib/models/types'
-import type { UI_I_TaskItem } from '~/lib/models/store/tasks/interfaces'
-import { UI_E_RecentTaskStatus } from '~/lib/models/store/tasks/enums'
-import {
-  UI_E_RTaskChipColor,
-  UI_E_RTaskStatusIcon,
-} from '~/components/common/pages/tasks/table/lib/models/enums'
-import type { UI_I_TaskConfig } from '~/components/common/pages/tasks/table/lib/models/interfaces'
-
-export const getHeaderDataFunc = (
-  localization: UI_I_Localization
-): UI_I_DataTableHeader[] => [
-  {
-    col: 'col0',
-    colName: 'task_name',
-    text: localization.tasks.taskName,
-    isSortable: true,
-    sort: 'asc',
-    width: '248px',
-    show: true,
-    filter: true,
-  },
-  {
-    col: 'col1',
-    colName: 'target',
-    text: localization.common.target,
-    isSortable: true,
-    sort: 'asc',
-    width: '180px',
-    show: true,
-    filter: true,
-  },
-  {
-    col: 'col2',
-    colName: 'status',
-    text: localization.common.status,
-    isSortable: true,
-    sort: 'asc',
-    width: '180px',
-    show: true,
-    filter: true,
-  },
-  {
-    col: 'col3',
-    colName: 'details',
-    text: localization.common.details,
-    isSortable: true,
-    sort: 'asc',
-    width: '180px',
-    show: true,
-    filter: true,
-  },
-  {
-    col: 'col4',
-    colName: 'initiator',
-    text: localization.common.initiator,
-    isSortable: true,
-    sort: 'asc',
-    width: '180px',
-    show: true,
-    filter: true,
-  },
-  {
-    col: 'col5',
-    colName: 'queued_for',
-    text: localization.common.queuedFor,
-    isSortable: false,
-    sort: 'asc',
-    width: '180px',
-    show: true,
-    filter: true,
-  },
-  {
-    col: 'col6',
-    colName: 'start_time',
-    text: localization.common.startTime,
-    isSortable: false,
-    sort: 'asc',
-    width: '208px',
-    show: true,
-    filter: true,
-  },
-  {
-    col: 'col7',
-    colName: 'completion',
-    text: localization.common.completionTime,
-    isSortable: true,
-    sort: 'asc',
-    width: '208px',
-    show: true,
-    filter: true,
-  },
-  {
-    col: 'col8',
-    colName: 'execution_time',
-    text: localization.common.executionTime,
-    isSortable: false,
-    sort: 'asc',
-    width: '180px',
-    show: true,
-    filter: true,
-  },
-  {
-    col: 'col9',
-    colName: 'server',
-    text: localization.common.server,
-    isSortable: true,
-    sort: 'asc',
-    width: '400px',
-    show: true,
-    filter: true,
-  },
-  {
-    col: 'col10',
-    colName: 'zone',
-    text: localization.common.zone,
-    isSortable: true,
-    sort: 'asc',
-    width: '144px',
-    show: true,
-    filter: true,
-  },
-]
-
-export const getTargetActionsFunc = (
-  localization: UI_I_Localization,
-  project: UI_T_Project
-): UI_I_Dropdown[] => {
-  const actions: UI_I_Dropdown[] = [
-    {
-      value: 'view-target',
-      text: localization.common.viewTarget,
-      iconName: 'hide',
-      selected: false,
-    },
-  ]
-
-  if (project === 'sphere') {
-    actions.push({
-      value: 'view-zone',
-      text: localization.common.viewZone,
-      iconName: 'hide',
-      selected: false,
-    })
-  }
-
-  return actions
-}
-
-export const options: UI_I_DataTableOptions = {
-  perPageOptions: [
-    { text: '10', value: 10 },
-    { text: '25', value: 25 },
-    { text: '50', value: 50 },
-    { text: '100', value: 100, default: true },
-  ],
-  isSelectable: true,
-  isFocusable: false,
-  showPagination: true,
-  showPaginationOnTop: true,
-  showPageInfo: true,
-  isSortable: true,
-  server: true,
-  isResizable: true,
-  showSearch: false,
-  showSelectedRows: true,
-  showColumnManager: true,
-  withActions: true,
-  inBlock: true,
-  showExport: true,
-  withCollapse: true,
-}
-
-export const getBodyDataFunc = (
-  tasks: UI_I_TaskItem<UI_T_AllTypeNodes>[],
-  localization: UI_I_Localization,
-  project: UI_T_Project,
-  config: UI_I_TaskConfig
-): UI_I_DataTableBody[] => {
-  const { $formattedDatetime, $time } = useNuxtApp() as any
-
-  return tasks.map((task, index: number) => {
-    const iconClassName = config.iconFunc(task.targetType)
-    const id = config.idFunc(task)
-    const nav = config.navFunc(task.targetType)
-    const type = config.typeFunc(task.targetType)
-
-    const targetData = {
-      id,
-      nav,
-      type,
-      icon: iconClassName,
-      isLink: !!iconClassName,
-      testId: `${task.targetType}-item`,
-    }
-
-    const statusData = {
-      icon: UI_E_RTaskStatusIcon[task.status],
-      chipColor: UI_E_RTaskChipColor[task.status],
-      error: task.error,
-      testId: `${task.taskName.replaceAll(/[\s.]/g, '-')}-${index}-status`,
-    }
-
-    const zoneData = {
-      id: task?.zoneId || '',
-      isLink: project === 'sphere',
-      nav,
-      icon: 'vsphere-icon-vcenter',
-      type: 'zone',
-      testId: `${task.targetType}-zone`,
-    }
-
-    const formattedStartTime =
-      task.startTime === '--'
-        ? '--'
-        : $formattedDatetime(+task.startTime * 1000, { hasSeconds: true })
-
-    const formattedCompletionTime =
-      task.completion === '--'
-        ? '--'
-        : $formattedDatetime(+task.completion * 1000, { hasSeconds: true })
-
-    const currentLanguage: UI_T_LangValue = useLocalStorage('lang') || 'en_US'
-    const queuedFor = $time.formatTime(task.queuedFor, currentLanguage)
-    const executionTime = $time.formatTime(task.execution, currentLanguage)
-
-    return {
-      row: index,
-      collapse: true,
-      isHiddenCollapse: false,
-      collapseToggle: false,
-      data: [
-        { col: 'col0', text: task.taskName || '--' },
-        {
-          key: 'icon',
-          col: 'col1',
-          text: task.target || '--',
-          data: targetData,
-        },
-        {
-          key: 'status',
-          col: 'col2',
-          text: localization.common[UI_E_RecentTaskStatus[task.status]],
-          data: statusData,
-        },
-        { col: 'col3', text: task.details || task.error || '--' }, // PC-2874
-        { col: 'col4', text: task.initiator || '--' },
-        { col: 'col5', text: queuedFor },
-        { col: 'col6', text: formattedStartTime },
-        { col: 'col7', text: formattedCompletionTime },
-        { col: 'col8', text: executionTime },
-        { col: 'col9', text: task.server || '--' },
-        {
-          key: 'icon',
-          col: 'col10',
-          text: task.zone || '--',
-          data: zoneData,
-        },
-        {
-          key: 'default-actions',
-          col: 'default-actions',
-          text: '',
-          data: { id: index, target: targetData },
-        },
-      ],
-    }
-  })
-}
+import type {
+  UI_I_DataTableBody,
+  UI_I_DataTableOptions,
+  UI_I_DataTableHeader,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_Project, UI_T_ProcuratorTypeNodes } from '~/lib/models/types'
+import type { UI_I_TaskItem } from '~/lib/models/store/tasks/interfaces'
+import { UI_E_RecentTaskStatus } from '~/lib/models/store/tasks/enums'
+import {
+  UI_E_RTaskChipColor,
+  UI_E_RTaskStatusIcon,
+} from '~/components/common/pages/tasks/table/lib/models/enums'
+import * as taskConfig from '~/components/templates/tasks/lib/config/taskConfig' // url из ( sphere, procurator )
+
+export const getHeaderDataFunc = (
+  localization: UI_I_Localization
+): UI_I_DataTableHeader[] => [
+  {
+    col: 'col0',
+    colName: 'task_name',
+    text: localization.tasks.taskName,
+    isSortable: true,
+    sort: 'asc',
+    width: '248px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col1',
+    colName: 'target',
+    text: localization.common.target,
+    isSortable: true,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col2',
+    colName: 'status',
+    text: localization.common.status,
+    isSortable: true,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col3',
+    colName: 'details',
+    text: localization.common.details,
+    isSortable: true,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col4',
+    colName: 'initiator',
+    text: localization.common.initiator,
+    isSortable: true,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col5',
+    colName: 'queued_for',
+    text: localization.common.queuedFor,
+    isSortable: false,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col6',
+    colName: 'start_time',
+    text: localization.common.startTime,
+    isSortable: false,
+    sort: 'asc',
+    width: '208px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col7',
+    colName: 'completion',
+    text: localization.common.completionTime,
+    isSortable: true,
+    sort: 'asc',
+    width: '208px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col8',
+    colName: 'execution_time',
+    text: localization.common.executionTime,
+    isSortable: false,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col9',
+    colName: 'server',
+    text: localization.common.server,
+    isSortable: true,
+    sort: 'asc',
+    width: '400px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col10',
+    colName: 'zone',
+    text: localization.common.zone,
+    isSortable: true,
+    sort: 'asc',
+    width: '144px',
+    show: true,
+    filter: true,
+  },
+]
+
+export const getTargetActionsFunc = (
+  localization: UI_I_Localization,
+  project: UI_T_Project
+): UI_I_Dropdown[] => {
+  const actions: UI_I_Dropdown[] = [
+    {
+      value: 'view-target',
+      text: localization.common.viewTarget,
+      iconName: 'hide',
+      selected: false,
+    },
+  ]
+
+  if (project === 'sphere') {
+    actions.push({
+      value: 'view-zone',
+      text: localization.common.viewZone,
+      iconName: 'hide',
+      selected: false,
+    })
+  }
+
+  return actions
+}
+
+export const options: UI_I_DataTableOptions = {
+  perPageOptions: [
+    { text: '10', value: 10 },
+    { text: '25', value: 25 },
+    { text: '50', value: 50 },
+    { text: '100', value: 100, default: true },
+  ],
+  isSelectable: true,
+  isFocusable: false,
+  showPagination: true,
+  showPaginationOnTop: true,
+  showPageInfo: true,
+  isSortable: true,
+  server: true,
+  isResizable: true,
+  showSearch: false,
+  showSelectedRows: true,
+  showColumnManager: true,
+  withActions: true,
+  inBlock: true,
+  showExport: true,
+  withCollapse: true,
+}
+
+export const getBodyDataFunc = (
+  bodyData: UI_I_TaskItem<UI_T_ProcuratorTypeNodes>[],
+  localization: UI_I_Localization,
+  project: UI_T_Project
+): UI_I_DataTableBody[] => {
+  const { $formattedDatetime } = useNuxtApp() as any
+
+  return bodyData.map((task, index: number) => {
+    const iconClassName = taskConfig.iconFunc(task.targetType)
+    const id = taskConfig.idFunc(task)
+    const nav = taskConfig.navFunc(task.targetType)
+    const type = taskConfig.typeFunc(task.targetType)
+
+    const targetData = {
+      id,
+      nav,
+      type,
+      icon: iconClassName,
+      isLink: !!iconClassName,
+      testId: `${task.targetType}-item`,
+    }
+
+    const statusData = {
+      icon: UI_E_RTaskStatusIcon[task.status],
+      chipColor: UI_E_RTaskChipColor[task.status],
+      error: task.error,
+      testId: `${task.taskName.replaceAll(/[\s.]/g, '-')}-${index}-status`,
+    }
+
+    const zoneData = {
+      id: task?.zoneId || '',
+      isLink: project === 'sphere',
+      nav,
+      icon: 'vsphere-icon-vcenter',
+      type: 'zone',
+      testId: `${task.targetType}-zone`,
+    }
+
+    const formattedStartTime =
+      task.startTime === '--'
+        ? '--'
+        : $formattedDatetime(+task.startTime * 1000, { hasSeconds: true })
+
+    const formattedCompletionTime =
+      task.completion === '--'
+        ? '--'
+        : $formattedDatetime(+task.completion * 1000, { hasSeconds: true })
+
+    return {
+      row: index,
+      collapse: true,
+      isHiddenCollapse: false,
+      collapseToggle: false,
+      data: [
+        { col: 'col0', text: task.taskName || '--' },
+        {
+          key: 'icon',
+          col: 'col1',
+          text: task.target || '--',
+          data: targetData,
+        },
+        {
+          key: 'status',
+          col: 'col2',
+          text: localization.common[UI_E_RecentTaskStatus[task.status]],
+          data: statusData,
+        },
+        { col: 'col3', text: task.details || '--' },
+        { col: 'col4', text: task.initiator || '--' },
+        { col: 'col5', text: `${task.queuedFor} ms` },
+        { col: 'col6', text: formattedStartTime },
+        { col: 'col7', text: formattedCompletionTime },
+        { col: 'col8', text: `${task.execution} ms` },
+        { col: 'col9', text: task.server || '--' },
+        {
+          key: 'icon',
+          col: 'col10',
+          text: task.zone || '--',
+          data: zoneData,
+        },
+        {
+          key: 'default-actions',
+          col: 'default-actions',
+          text: '',
+          data: { id: index, target: targetData },
+        },
+      ],
+    }
+  })
+}

package/components/common/qrcode/Qrcode.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="qrcode">
+    <img v-if="qrDataUrl" :src="qrDataUrl" alt="QR Code" class="qr-image" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import QRCode from 'qrcode'
+
+const props = defineProps<{
+  qrCodeUrl: string
+}>()
+
+const qrDataUrl = ref<string>('')
+const generateQRCode = async (): Promise<void> => {
+  try {
+    qrDataUrl.value = await QRCode.toDataURL(props.qrCodeUrl, {
+      width: 150,
+      margin: 2,
+    })
+  } catch (error) {
+    console.error('Error generating QR code:', error)
+  }
+}
+
+watch(
+  () => props.qrCodeUrl,
+  (newValue) => {
+    newValue && generateQRCode()
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped lang="scss">
+.qr-code-display {
+  text-align: center;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.qr-wrapper {
+  margin: 20px 0;
+  padding: 20px;
+  background: white;
+  border-radius: 12px;
+  border: 1px solid #e0e0e0;
+  display: inline-block;
+}
+
+.qr-canvas,
+.qr-image {
+  width: 150px;
+  height: 150px;
+}
+</style>

package/components/common/selectLanguage/SelectLanguage.vue

@@ -11,13 +11,13 @@
       arrow-stroke-width="2.4"
     >
       <template #toggleContent>
-        <span class="language-dropdown__icon content-icon">
-          <ui-icon
+        <span class="language-dropdown__icon content-icon"
+          ><ui-icon
             :name="selectedLang?.iconName"
             :height="props.size === 'sm' ? '16' : '13'"
             :width="props.size === 'sm' ? '24' : '19'"
-          />
-        </span>
+          ></ui-icon
+        ></span>
         <span class="ui-selected-text text-ellipsis">{{
           selectedLang?.text
         }}</span>
@@ -28,7 +28,7 @@
             :name="item.iconName"
             :height="props.size === 'sm' ? '16' : '13'"
             :width="props.size === 'sm' ? '24' : '19'"
-          />
+          ></ui-icon>
         </span>
         <span class="ui-item-text">{{ item.text }}</span>
       </template>

package/components/common/split/horizontal/New.vue

@@ -220,6 +220,7 @@ onUnmounted(() => {
   --horizontal-panel-bg-color: #fff;
   --trigger-bg-color: #e9ebeda3;
   --trigger-color: #213444;
+  --new-gutter-bg-color: #e9ebed;
   --new-gutter-hover-bg-color: #008fd6;
   --new-gutter-before-bg-color: rgba(255, 255, 255, 0.8);
 
@@ -234,6 +235,7 @@ onUnmounted(() => {
   --horizontal-panel-bg-color: #213444;
   --trigger-bg-color: #314352;
   --trigger-color: #e9ebed;
+  --new-gutter-bg-color: #394a58;
   --new-gutter-hover-bg-color: #2ba2de;
   --new-gutter-before-bg-color: rgba(33, 52, 68, 0.8);
 }