bfg-common 1.4.703 → 1.4.704

package/components/common/pages/tasks/Tasks.vue

@@ -10,6 +10,7 @@
       :total-items="tasksList?.total_items || 0"
       :loading="isLoading"
       :project="props.project"
+      @pagination="onUpdatePagination"
     />
   </div>
 </template>
@@ -43,15 +44,6 @@ const pauseGlobalRefresh = (): void => {
 
 const tasksList = computed<UI_I_Task>(() => $store.getters['tasks/getTaskList'])
 
-// const onClickButton = (status: string): void => {
-//   if (status === 'next') {
-//     pagination.value.page += 1
-//     return
-//   }
-//
-//   pagination.value.page -= 1
-// }
-
 const getTasks = async (): Promise<void> => {
   pauseGlobalRefresh()
 
@@ -63,10 +55,10 @@ const getTasks = async (): Promise<void> => {
 }
 getTasks()
 
-// const onUpdatePagination = (event: UI_I_Pagination): void => {
-//   pagination.value = event
-//   getTasks()
-// }
+const onUpdatePagination = (event: UI_I_Pagination): void => {
+  pagination.value = event
+  getTasks()
+}
 
 // const onSortTable = (event: string): void => {
 //   sort.value = event

package/components/common/pages/tasks/table/Table.vue

@@ -6,7 +6,6 @@
     :loading="props.loading"
     :total-pages="props.totalPages"
     :total-items="props.totalItems"
-    :texts="texts"
     class="task-table"
     @sorting="onSorting"
     @pagination="onPagination"
@@ -96,7 +95,6 @@ import type {
   UI_I_DataTableHeader,
   UI_I_DataTableBody,
   UI_I_Pagination,
-  UI_I_TableTexts,
 } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
 import type { UI_T_Project, UI_T_ProcuratorTypeNodes } from '~/lib/models/types'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
@@ -117,6 +115,7 @@ const props = defineProps<{
 }>()
 const emits = defineEmits<{
   (event: 'sort', value: string): void
+  (event: 'pagination', value: UI_I_Pagination): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
@@ -124,30 +123,17 @@ const { $store }: any = useNuxtApp()
 
 const actionsIsShow = ref<boolean[]>([])
 
-const data = ref<UI_I_DataTable>({
+const data = computed<UI_I_DataTable>(() => ({
   id: 'tasks-table',
-  selectedRows: [],
-  header: [],
-  body: [],
-})
-
-const texts = computed<UI_I_TableTexts>(() => ({
-  searchHere: localization.value.common.searchHere,
-  rowsPerPage: localization.value.common.rowsPerPage,
-  of: localization.value.common.of,
-  selected: localization.value.common.selected,
-  columns: localization.value.common.columns,
-  previous: localization.value.common.previous,
-  next: localization.value.common.next,
-  noItemsFound: localization.value.common.noItemsFound,
+  header: taskHeadItems.value,
+  body: taskBodyItems.value,
 }))
 
-const taskHeadItems = computed<UI_I_DataTableHeader[]>(
-  () => getHeaderDataFunc(localization.value) || []
+const taskHeadItems = computed<UI_I_DataTableHeader[]>(() =>
+  getHeaderDataFunc(localization.value)
 )
 
 const taskBodyItems = ref<UI_I_DataTableBody[]>([])
-
 watch(
   () => props.tableData,
   (newValue: UI_I_TaskItem<UI_T_ProcuratorTypeNodes>[]) => {
@@ -156,14 +142,7 @@ watch(
       return
     }
 
-    taskBodyItems.value = getBodyDataFunc(newValue, localization.value) || []
-
-    if (data.value.header.length === 0) {
-      data.value.header = taskHeadItems.value
-    }
-
-    data.value.body = taskBodyItems.value
-    console.log(data.value)
+    taskBodyItems.value = getBodyDataFunc(newValue, localization.value)
   },
   { deep: true, immediate: true }
 )
@@ -171,7 +150,7 @@ const onSorting = (value: string): void => {
   emits('sort', value)
 }
 const onPagination = (value: UI_I_Pagination): void => {
-  console.log(value, 'pagination')
+  emits('pagination', value)
 }
 
 const actions = computed<UI_I_Dropdown[]>(() =>
@@ -274,258 +253,3 @@ const onSelectNodeOfTree = (data: any): void => {
   }
 }
 </style>
-
-<!--<template>-->
-<!--  <ui-data-table-->
-<!--    test-id="task-table"-->
-<!--    :data="data"-->
-<!--    :options="options"-->
-<!--    :loading="props.loading"-->
-<!--    :total-pages="props.totalPages"-->
-<!--    :total-items="props.totalItems"-->
-<!--    class="task-table"-->
-<!--    @sorting="onSorting"-->
-<!--    @pagination="onPagination"-->
-<!--  >-->
-<!--    <template #icon="{ item }">-->
-<!--      <span class="flex-align-center">-->
-<!--        <span :class="['icon', item.data.icon]" />-->
-
-<!--        <span-->
-<!--          :data-id="`rtask-${item.data.testId}`"-->
-<!--          :class="item.data.isLink && 'target-link'"-->
-<!--          @click.stop="onSelectNodeOfTree(item.data)"-->
-<!--        >-->
-<!--          {{ item.text }}-->
-<!--        </span>-->
-<!--      </span>-->
-<!--    </template>-->
-
-<!--    <template #status="{ item }">-->
-<!--      <ui-chip :test-id="item.data.testId" :color="item.data.chipColor" rounded>-->
-<!--        <ui-icon-->
-<!--          :name="item.data.icon"-->
-<!--          width="14px"-->
-<!--          height="14px"-->
-<!--          class="chip-icon"-->
-<!--        ></ui-icon>-->
-<!--        {{ item.text }}-->
-<!--      </ui-chip>-->
-
-<!--      <common-pages-tasks-table-error-info-->
-<!--        v-if="item.data.error"-->
-<!--        :id="item.data.testId"-->
-<!--        :error="item.data.error"-->
-<!--      />-->
-<!--    </template>-->
-
-<!--    <template #default-actions="{ item }">-->
-<!--      <div class="actions">-->
-<!--        <ui-button-->
-<!--          variant="text"-->
-<!--          :test-id="`resent-task-item-${item.data.id}-action`"-->
-<!--          is-without-height-->
-<!--          is-without-sizes-->
-<!--          @click.stop="onToggleActions(item.data.id)"-->
-<!--        >-->
-<!--          <span-->
-<!--            :class="['action-icon', { active: actionsIsShow[item.data.id] }]"-->
-<!--          >-->
-<!--            <ui-icon name="vertical-dotes" width="20" height="20" />-->
-<!--          </span>-->
-<!--        </ui-button>-->
-<!--        <ui-dropdown-->
-<!--          :show="actionsIsShow[item.data.id]"-->
-<!--          :test-id="`resent-task-item-action-${item.data.id}`"-->
-<!--          :items="actions"-->
-<!--          :elem-id="`resent-task-item-${item.data.id}-action`"-->
-<!--          left-->
-<!--          width="max-content"-->
-<!--          @select="onSelectAction(item.data.target, $event, item.data.id)"-->
-<!--          @hide="onHideActionsDropdown(item.data.id)"-->
-<!--        >-->
-<!--          <template #row="{ item: dropMenu }">-->
-<!--            <ui-icon-->
-<!--              v-if="dropMenu.iconName === 'hide'"-->
-<!--              name="password-hide"-->
-<!--              width="16"-->
-<!--              height="16"-->
-<!--            />-->
-<!--            <span class="action-text">-->
-<!--              {{ dropMenu.text }}-->
-<!--            </span>-->
-<!--          </template>-->
-<!--        </ui-dropdown>-->
-<!--      </div>-->
-<!--    </template>-->
-
-<!--    <template #expand="{ item }">-->
-<!--      <common-pages-tasks-table-expand-details :data="item.data" />-->
-<!--    </template>-->
-<!--  </ui-data-table>-->
-<!--</template>-->
-
-<!--<script setup lang="ts">-->
-<!--import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'-->
-<!--import type {-->
-<!--  UI_I_DataTable,-->
-<!--  UI_I_DataTableHeader,-->
-<!--  UI_I_DataTableBody,-->
-<!--  UI_I_Pagination,-->
-<!--} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'-->
-<!--import type { UI_T_Project, UI_T_ProcuratorTypeNodes } from '~/lib/models/types'-->
-<!--import type { UI_I_Localization } from '~/lib/models/interfaces'-->
-<!--import type { UI_I_TaskItem } from '~/lib/models/store/tasks/interfaces'-->
-<!--import {-->
-<!--  options,-->
-<!--  getTargetActionsFunc,-->
-<!--  getHeaderDataFunc,-->
-<!--  getBodyDataFunc,-->
-<!--} from '~/components/common/pages/tasks/table/lib/config/config'-->
-
-<!--const props = defineProps<{-->
-<!--  project: UI_T_Project-->
-<!--  tableData: UI_I_TaskItem<UI_T_ProcuratorTypeNodes>[]-->
-<!--  totalPages: number-->
-<!--  totalItems: number-->
-<!--  loading: boolean-->
-<!--}>()-->
-<!--const emits = defineEmits<{-->
-<!--  (event: 'sort', value: string): void-->
-<!--}>()-->
-
-<!--const localization = computed<UI_I_Localization>(() => useLocal())-->
-<!--const { $store }: any = useNuxtApp()-->
-
-<!--const actionsIsShow = ref<boolean[]>([])-->
-
-<!--const data = computed<UI_I_DataTable>(() => ({-->
-<!--  id: 'tasks-table',-->
-<!--  header: taskHeadItems.value,-->
-<!--  body: taskBodyItems.value,-->
-<!--}))-->
-
-<!--const taskHeadItems = computed<UI_I_DataTableHeader[]>(() =>-->
-<!--  getHeaderDataFunc(localization.value)-->
-<!--)-->
-
-<!--const taskBodyItems = ref<UI_I_DataTableBody[]>([])-->
-<!--watch(-->
-<!--  () => props.tableData,-->
-<!--  (newValue: UI_I_TaskItem<UI_T_ProcuratorTypeNodes>[]) => {-->
-<!--    if (!newValue?.length) {-->
-<!--      taskBodyItems.value = []-->
-<!--      return-->
-<!--    }-->
-
-<!--    taskBodyItems.value = getBodyDataFunc(newValue, localization.value)-->
-<!--  },-->
-<!--  { deep: true, immediate: true }-->
-<!--)-->
-<!--const onSorting = (value: string): void => {-->
-<!--  emits('sort', value)-->
-<!--}-->
-<!--const onPagination = (value: UI_I_Pagination): void => {-->
-<!--  console.log(value)-->
-<!--}-->
-
-<!--const actions = computed<UI_I_Dropdown[]>(() =>-->
-<!--  getTargetActionsFunc(localization.value, props.project)-->
-<!--)-->
-<!--const onToggleActions = (id: number): void => {-->
-<!--  actionsIsShow.value[id] = !actionsIsShow.value[id]-->
-<!--}-->
-<!--const onSelectAction = (-->
-<!--  data: any,-->
-<!--  action: 'view-target' | 'view-zone',-->
-<!--  actionId: number-->
-<!--): void => {-->
-<!--  switch (action) {-->
-<!--    case 'view-target':-->
-<!--      onSelectNodeOfTree(data)-->
-<!--      break-->
-<!--    case 'view-zone':-->
-<!--      onSelectNodeOfTree({ ...data, type: 'zone', nav: 'h' })-->
-<!--      break-->
-<!--  }-->
-<!--  onHideActionsDropdown(actionId)-->
-<!--}-->
-<!--const onHideActionsDropdown = (id: number): void => {-->
-<!--  actionsIsShow.value[id] = false-->
-<!--}-->
-
-<!--const onSelectNodeOfTree = (data: any): void => {-->
-<!--  if (!data.isLink) return-->
-
-<!--  const { type, id, nav } = data-->
-
-<!--  const node = {-->
-<!--    id,-->
-<!--    type,-->
-<!--  }-->
-
-<!--  const path = `/inventory/type=${type};nav=${nav};id=${id}/summary`-->
-<!--  navigateTo(path)-->
-
-<!--  $store.dispatch('inventory/A_SELECT_NODE', { node, type })-->
-<!--}-->
-<!--</script>-->
-
-<!--<style>-->
-<!--/*TODO move up*/-->
-<!--:root {-->
-<!--  &#45;&#45;actions-icon-color: #4d5d69;-->
-<!--  &#45;&#45;actions-icon-hover-color: #213444;-->
-<!--  &#45;&#45;actions-icon-icative-color: #008fd6;-->
-<!--}-->
-<!--:root.dark-theme {-->
-<!--  &#45;&#45;actions-icon-color: #e9eaec;-->
-<!--  &#45;&#45;actions-icon-hover-color: #ffffff;-->
-<!--  &#45;&#45;actions-icon-icative-color: #2ba2de;-->
-<!--}-->
-<!--</style>-->
-<!--<style scoped lang="scss">-->
-<!--.task-table {-->
-<!--  height: inherit;-->
-
-<!--  .target-link {-->
-<!--    font-family: Inter, serif;-->
-<!--    font-size: 13px;-->
-<!--    color: var(&#45;&#45;bottom-pannel-rtask-link-text);-->
-<!--    font-weight: 400;-->
-<!--    line-height: 15.73px;-->
-<!--    cursor: pointer;-->
-<!--    &:hover {-->
-<!--      color: var(&#45;&#45;bottom-pannel-rtask-link-hover-text);-->
-<!--    }-->
-<!--  }-->
-<!--  .chip-icon {-->
-<!--    min-width: 14px;-->
-<!--    margin-right: 6px;-->
-<!--  }-->
-<!--  .icon {-->
-<!--    margin-right: 4px;-->
-<!--  }-->
-
-<!--  .actions {-->
-<!--    width: 100%;-->
-
-<!--    .action-icon {-->
-<!--      width: 16px;-->
-<!--      height: 16px;-->
-<!--      color: var(&#45;&#45;actions-icon-color);-->
-
-<!--      &:hover {-->
-<!--        color: var(&#45;&#45;actions-icon-hover-color);-->
-<!--      }-->
-<!--      &.active {-->
-<!--        color: var(&#45;&#45;actions-icon-icative-color);-->
-<!--      }-->
-<!--    }-->
-
-<!--    .action-text {-->
-<!--      margin-left: 8px;-->
-<!--    }-->
-<!--  }-->
-<!--}-->
-<!--</style>-->

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

@@ -155,6 +155,7 @@ const onSelectNodeOfTree = (data: any): void => {
     }
   }
   &__status {
+    @include flex($align: center);
     .ui-chip {
       width: max-content;
       :deep(.ui-chip__label) {

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

@@ -165,6 +165,7 @@ export const options: UI_I_DataTableOptions = {
   isSelectable: true,
   isFocusable: false,
   showPagination: true,
+  showPaginationOnTop: true,
   showPageInfo: true,
   isSortable: true,
   server: true,
@@ -173,7 +174,7 @@ export const options: UI_I_DataTableOptions = {
   showSelectedRows: true,
   showColumnManager: true,
   withActions: true,
-  inBlockOnlyLightMode: false,
+  inBlock: true,
 }
 
 export const getBodyDataFunc = (
@@ -265,277 +266,3 @@ export const getBodyDataFunc = (
     }
   })
 }
-
-// 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_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_T_Project } from '~/lib/models/types'
-// import type { UI_T_ProcuratorTypeNodes } from '~/lib/models/types'
-// import * as taskConfig from '~/components/templates/tasks/lib/config/taskConfig' // url из ( sphere, procurator )
-//
-// export const getHeaderDataFunc = (
-//   localization: UI_I_Localization
-// ): UI_I_DataTableHeader[] => [
-//   {
-//     col: 0,
-//     colName: 'task_name',
-//     text: localization.tasks.taskName,
-//     isSortable: true,
-//     sort: 'asc',
-//     sortColumn: true,
-//     width: '180px',
-//     show: true,
-//     filter: true,
-//   },
-//   {
-//     col: 1,
-//     colName: 'target',
-//     text: localization.common.target,
-//     isSortable: true,
-//     sort: 'asc',
-//     width: '180px',
-//     show: true,
-//     filter: true,
-//   },
-//   {
-//     col: 2,
-//     colName: 'status',
-//     text: localization.common.status,
-//     isSortable: true,
-//     sort: 'asc',
-//     width: '180px',
-//     show: true,
-//     filter: true,
-//   },
-//   {
-//     col: 3,
-//     colName: 'details',
-//     text: localization.common.details,
-//     isSortable: true,
-//     sort: 'asc',
-//     width: '180px',
-//     show: true,
-//     filter: true,
-//   },
-//   {
-//     col: 4,
-//     colName: 'initiator',
-//     text: localization.common.initiator,
-//     isSortable: true,
-//     sort: 'asc',
-//     width: '180px',
-//     show: true,
-//     filter: true,
-//   },
-//   {
-//     col: 5,
-//     colName: 'queued_for',
-//     text: localization.common.queuedFor,
-//     isSortable: true,
-//     sort: 'asc',
-//     width: '180px',
-//     show: true,
-//     filter: true,
-//   },
-//   {
-//     col: 6,
-//     colName: 'start_time',
-//     text: localization.common.startTime,
-//     isSortable: true,
-//     sort: 'asc',
-//     width: '180px',
-//     show: true,
-//     filter: true,
-//   },
-//   {
-//     col: 7,
-//     colName: 'completion_time',
-//     text: localization.common.completionTime,
-//     isSortable: true,
-//     sort: 'asc',
-//     width: '180px',
-//     show: true,
-//     filter: true,
-//   },
-//   {
-//     col: 8,
-//     colName: 'execution_time',
-//     text: localization.common.executionTime,
-//     isSortable: true,
-//     sort: 'asc',
-//     width: '180px',
-//     show: true,
-//     filter: true,
-//   },
-//   {
-//     col: 9,
-//     colName: 'server',
-//     text: localization.common.server,
-//     isSortable: true,
-//     sort: 'asc',
-//     width: '180px',
-//     show: true,
-//     filter: true,
-//   },
-//   {
-//     col: 10,
-//     colName: 'zone',
-//     text: localization.common.zone,
-//     isSortable: true,
-//     sort: 'asc',
-//     width: '180px',
-//     show: true,
-//     filter: true,
-//   },
-//   {
-//     col: 11,
-//     colName: 'default-actions',
-//     text: '',
-//     show: 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: '50', value: 50 },
-//     { text: '100', value: 100 },
-//   ],
-//   isSelectable: true,
-//   isFocusable: false,
-//   showPagination: true,
-//   showPageInfo: true,
-//   isSortable: true,
-//   server: true,
-//   isResizable: true,
-//   showSearch: false,
-//   showSelectedRows: true,
-//   showColumnManager: true,
-//   withActions: true,
-//   inBlockOnlyLightMode: true,
-// }
-//
-// export const getBodyDataFunc = (
-//   bodyData: UI_I_TaskItem<UI_T_ProcuratorTypeNodes>[],
-//   localization: UI_I_Localization
-// ): 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}-progress`,
-//     }
-//
-//     const zoneNodeParams = taskConfig.zoneNodeFunc(task, nav)
-//     const zoneData = {
-//       ...zoneNodeParams,
-//       nav,
-//       icon: 'vsphere-icon-vcenter',
-//       type: 'zone',
-//       testId: `${task.targetType}-zone`,
-//     }
-//
-//     const formattedStartTime =
-//       task.startTime === '--'
-//         ? '--'
-//         : $formattedDatetime(+task.startTime * 1000, '', true)
-//
-//     const formattedCompletionTime =
-//       task.completion === '--'
-//         ? '--'
-//         : $formattedDatetime(+task.completion * 1000, '', true)
-//
-//     return {
-//       row: index,
-//       collapse: true,
-//       isHiddenCollapse: false,
-//       collapseToggle: false,
-//       data: [
-//         { col: 0, text: task.taskName },
-//         {
-//           key: 'icon',
-//           col: 1,
-//           text: task.target,
-//           data: targetData,
-//         },
-//         {
-//           key: 'status',
-//           col: 2,
-//           text: localization.common[UI_E_RecentTaskStatus[task.status]],
-//           data: statusData,
-//         },
-//         { col: 3, text: task.details || '--' },
-//         { col: 4, text: task.initiator },
-//         { col: 5, text: `${task.queuedFor} ms` },
-//         { col: 6, text: formattedStartTime },
-//         { col: 7, text: formattedCompletionTime },
-//         { col: 8, text: `${task.execution} ms` },
-//         { col: 9, text: task.server },
-//         {
-//           key: 'icon',
-//           col: 10,
-//           text: task.zone,
-//           data: zoneData,
-//         },
-//         {
-//           key: 'default-actions',
-//           col: 11,
-//           text: '',
-//           data: { id: index, target: targetData },
-//         },
-//       ],
-//     }
-//   })
-// }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.4.703",
+  "version": "1.4.704",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",