bfg-common 1.5.774 → 1.5.775

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

@@ -1,373 +1,370 @@
-<template>
-  <ui-data-table
-    :data="data"
-    :options="options"
-    :loading="props.loading"
-    :total-pages="props.totalPages"
-    :total-items="props.totalItems"
-    :texts="texts"
-    :skeleton="skeletonData"
-    test-id="task-table"
-    @sort="onSorting"
-    @pagination="onPagination"
-    @column-filter="onColumnFilter"
-  >
-    <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>
-
-      <div v-if="item.data.error" class="task-table__tooltip">
-        <common-tooltip-help
-          :test-id="item.data.testId"
-          :help-id="item.data.testId + 'icon'"
-          :title="localization.common.failureReason"
-          :help-text="item.data.error"
-          status="error"
-          dropdown-width="232px"
-          dropdown-left
-          dropdown-top
-        />
-      </div>
-    </template>
-
-    <template #default-actions="{ item }">
-      <div class="actions">
-        <ui-button
-          :id="`data-table-task-action-${item.data.id}`"
-          :test-id="`data-table-task-action-${item.data.id}`"
-          variant="text"
-          is-without-height
-          is-without-sizes
-          @click.stop="onToggleActions(item.data.id)"
-        >
-          <span
-            :class="['action-icon', { active: actionsShowId === item.data.id }]"
-          >
-            <ui-icon name="vertical-dotes" width="20" height="20" />
-          </span>
-        </ui-button>
-        <ui-dropdown
-          :show="actionsShowId === item.data.id"
-          :test-id="`data-table-task-dropdown-${item.data.id}`"
-          :items="actions"
-          :elem-id="`data-table-task-action-${item.data.id}`"
-          width="max-content"
-          left
-          @select="onSelectAction(item.data.target, $event)"
-          @hide="onHideActionsDropdown"
-        >
-          <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>
-
-    <template #skeleton-header>
-      <div class="skeleton-header">
-        <div class="left-skeleton">
-          <ui-skeleton-item width="70" height="16" />
-          <div class="vertical-line"></div>
-          <ui-skeleton-item width="70" height="16" />
-          <ui-skeleton-item width="70" height="16" />
-        </div>
-        <div class="right-skeleton">
-          <ui-skeleton-item width="128" height="36" border-radius="8" />
-        </div>
-      </div>
-    </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_DataTableSkeleton,
-  UI_I_Pagination,
-  UI_I_TableTexts,
-} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
-import type { UI_T_ArbitraryObject } from '~/node_modules/bfg-uikit/models/types'
-import type {
-  UI_T_Project,
-  UI_T_ProcuratorTypeNodes,
-  UI_T_LangValue,
-} 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 type { UI_I_TableTarget } from '~/lib/models/table/interfaces'
-import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
-import type { UI_I_TaskConfig } from '~/components/common/pages/tasks/table/lib/models/interfaces'
-import {
-  options,
-  getTargetActionsFunc,
-  getHeaderDataFunc,
-  getBodyDataFunc,
-} from '~/components/common/pages/tasks/table/lib/config/config'
-import { useDebounceFn } from '@vueuse/core'
-
-const props = defineProps<{
-  project: UI_T_Project
-  tableData: UI_I_TaskItem<UI_T_ProcuratorTypeNodes>[]
-  totalPages: number
-  totalItems: number
-  loading: boolean
-  config: UI_I_TaskConfig
-}>()
-const emits = defineEmits<{
-  (event: 'sort', value: string): void
-  (event: 'pagination', value: UI_I_Pagination): void
-  (event: 'col-search', value: string): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const { $store }: any = useNuxtApp()
-
-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,
-  exportAll: localization.value.common.exportAll,
-  exportSelected: localization.value.common.exportSelected,
-  all: localization.value.common.all,
-  filter: localization.value.common.filter,
-}))
-const skeletonData = ref<UI_I_DataTableSkeleton>({
-  columnsCount: 6,
-  headColumns: [],
-  bodyColumns: [],
-})
-
-const actionsShowId = ref<number>(-1)
-
-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 timeFormat = computed<UI_T_TimeValue>(
-  () => $store.getters['main/getTimeFormat']
-)
-
-const interfaceLang = computed<UI_T_LangValue>(
-  () => $store.getters['main/getInterfaceLang']
-)
-
-const taskBodyItems = ref<UI_I_DataTableBody[]>([])
-watch(
-  () => [props.tableData, timeFormat.value, interfaceLang.value],
-  (
-    newValue: [
-      UI_I_TaskItem<UI_T_ProcuratorTypeNodes>[],
-      UI_T_TimeValue,
-      UI_T_LangValue
-    ]
-  ) => {
-    if (!newValue[0]?.length) {
-      taskBodyItems.value = []
-      return
-    }
-
-    taskBodyItems.value = getBodyDataFunc(
-      newValue[0],
-      localization.value,
-      props.project,
-      props.config
-    )
-  },
-  { deep: true, immediate: true }
-)
-
-// const openedError = ref<string>('')
-
-// const onToggleError = (value: string): void => {
-//   if (!value || value === openedError.value) {
-//     openedError.value = ''
-//   } else {
-//     openedError.value = value
-//   }
-// }
-
-const onSorting = (value: string): void => {
-  emits('sort', value)
-}
-const onPagination = (value: UI_I_Pagination): void => {
-  emits('pagination', value)
-}
-const sendFilter = useDebounceFn((searchText: string) => {
-  emits('col-search', searchText)
-}, 1000)
-const onColumnFilter = (obj: UI_T_ArbitraryObject<string>): void => {
-  let searchText = ''
-
-  for (const [key, value] of Object.entries(obj)) {
-    const currentFilter = searchText
-      ? ',' + key + '.' + value
-      : key + '.' + value
-
-    searchText = searchText + (value ? currentFilter : '')
-  }
-  sendFilter(searchText)
-}
-
-const actions = computed<UI_I_Dropdown[]>(() =>
-  getTargetActionsFunc(localization.value, props.project)
-)
-const onToggleActions = (id: number): void => {
-  if (actionsShowId.value === id) {
-    actionsShowId.value = -1
-  } else {
-    actionsShowId.value = id
-  }
-}
-const onSelectAction = (
-  data: UI_I_TableTarget<typeof props.project>,
-  action: 'view-target' | 'view-zone'
-): void => {
-  switch (action) {
-    case 'view-target':
-      onSelectNodeOfTree(data)
-      break
-    case 'view-zone':
-      onSelectNodeOfTree({ ...data, type: 'zone', nav: 'h' })
-      break
-  }
-  onHideActionsDropdown()
-}
-const onHideActionsDropdown = (): void => {
-  actionsShowId.value = -1
-}
-
-const onSelectNodeOfTree = (
-  data: UI_I_TableTarget<typeof props.project>
-): 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 scoped lang="scss">
-.task-table {
-  height: inherit;
-
-  .target-link {
-    font-family: 'Inter', sans-serif;
-    font-size: 13px;
-    color: var(--bottom-pannel-rtask-link-text);
-    font-weight: 400;
-    line-height: 15.73px;
-    cursor: pointer;
-    &:hover {
-      color: var(--bottom-pannel-rtask-link-hover-text);
-    }
-  }
-  .chip-icon {
-    min-width: 14px;
-  }
-  .icon {
-    margin-right: 4px;
-  }
-
-  .actions {
-    width: 100%;
-
-    .action-icon {
-      width: 20px;
-      height: 20px;
-      color: var(--tasks-actions-icon-color);
-
-      &:hover {
-        color: var(--tasks-actions-icon-hover-color);
-      }
-      &.active {
-        color: var(--tasks-actions-icon-icative-color);
-      }
-    }
-
-    .action-text {
-      margin-left: 8px;
-    }
-  }
-  &__tooltip {
-    margin-left: 8px;
-  }
-}
-
-.skeleton-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .left-skeleton {
-    display: flex;
-    align-items: center;
-    column-gap: 16px;
-    .vertical-line {
-      height: 24px;
-      border-right: 1px solid var(--table-line);
-    }
-  }
-
-  .right-skeleton {
-    display: flex;
-    align-items: center;
-    column-gap: 16px;
-  }
-}
-</style>
+<template>
+  <ui-data-table
+    :data="data"
+    :options="options"
+    :loading="props.loading"
+    :total-pages="props.totalPages"
+    :total-items="props.totalItems"
+    :texts="texts"
+    :skeleton="skeletonData"
+    test-id="task-table"
+    @sort="onSorting"
+    @pagination="onPagination"
+    @column-filter="onColumnFilter"
+  >
+    <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>
+
+      <div v-if="item.data.error" class="task-table__tooltip">
+        <common-tooltip-help
+          :test-id="item.data.testId"
+          :help-id="item.data.testId + 'icon'"
+          :title="localization.common.failureReason"
+          :help-text="item.data.error"
+          status="error"
+          dropdown-width="232px"
+          dropdown-left
+          dropdown-top
+        />
+      </div>
+    </template>
+
+    <template #default-actions="{ item }">
+      <div class="actions">
+        <ui-button
+          :id="`data-table-task-action-${item.data.id}`"
+          :test-id="`data-table-task-action-${item.data.id}`"
+          variant="text"
+          is-without-height
+          is-without-sizes
+          @click.stop="onToggleActions(item.data.id)"
+        >
+          <span
+            :class="['action-icon', { active: actionsShowId === item.data.id }]"
+          >
+            <ui-icon name="vertical-dotes" width="20" height="20" />
+          </span>
+        </ui-button>
+        <ui-dropdown
+          :show="actionsShowId === item.data.id"
+          :test-id="`data-table-task-dropdown-${item.data.id}`"
+          :items="actions"
+          :elem-id="`data-table-task-action-${item.data.id}`"
+          width="max-content"
+          left
+          @select="onSelectAction(item.data.target, $event)"
+          @hide="onHideActionsDropdown"
+        >
+          <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>
+
+    <template #skeleton-header>
+      <div class="skeleton-header">
+        <div class="left-skeleton">
+          <ui-skeleton-item width="70" height="16" />
+          <div class="vertical-line"></div>
+          <ui-skeleton-item width="70" height="16" />
+          <ui-skeleton-item width="70" height="16" />
+        </div>
+        <div class="right-skeleton">
+          <ui-skeleton-item width="128" height="36" border-radius="8" />
+        </div>
+      </div>
+    </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_DataTableSkeleton,
+  UI_I_Pagination,
+  UI_I_TableTexts,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_T_ArbitraryObject } from '~/node_modules/bfg-uikit/models/types'
+import type {
+  UI_T_Project,
+  UI_T_ProcuratorTypeNodes,
+  UI_T_LangValue,
+} 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 type { UI_I_TableTarget } from '~/lib/models/table/interfaces'
+import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
+import {
+  options,
+  getTargetActionsFunc,
+  getHeaderDataFunc,
+  getBodyDataFunc,
+} from '~/components/common/pages/tasks/table/lib/config/config'
+import { useDebounceFn } from '@vueuse/core'
+
+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
+  (event: 'pagination', value: UI_I_Pagination): void
+  (event: 'col-search', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
+
+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,
+  exportAll: localization.value.common.exportAll,
+  exportSelected: localization.value.common.exportSelected,
+  all: localization.value.common.all,
+  filter: localization.value.common.filter,
+}))
+const skeletonData = ref<UI_I_DataTableSkeleton>({
+  columnsCount: 6,
+  headColumns: [],
+  bodyColumns: [],
+})
+
+const actionsShowId = ref<number>(-1)
+
+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 timeFormat = computed<UI_T_TimeValue>(
+  () => $store.getters['main/getTimeFormat']
+)
+
+const interfaceLang = computed<UI_T_LangValue>(
+  () => $store.getters['main/getInterfaceLang']
+)
+
+const taskBodyItems = ref<UI_I_DataTableBody[]>([])
+watch(
+  () => [props.tableData, timeFormat.value, interfaceLang.value],
+  (
+    newValue: [
+      UI_I_TaskItem<UI_T_ProcuratorTypeNodes>[],
+      UI_T_TimeValue,
+      UI_T_LangValue
+    ]
+  ) => {
+    if (!newValue[0]?.length) {
+      taskBodyItems.value = []
+      return
+    }
+
+    taskBodyItems.value = getBodyDataFunc(
+      newValue[0],
+      localization.value,
+      props.project
+    )
+  },
+  { deep: true, immediate: true }
+)
+
+// const openedError = ref<string>('')
+
+// const onToggleError = (value: string): void => {
+//   if (!value || value === openedError.value) {
+//     openedError.value = ''
+//   } else {
+//     openedError.value = value
+//   }
+// }
+
+const onSorting = (value: string): void => {
+  emits('sort', value)
+}
+const onPagination = (value: UI_I_Pagination): void => {
+  emits('pagination', value)
+}
+const sendFilter = useDebounceFn((searchText: string) => {
+  emits('col-search', searchText)
+}, 1000)
+const onColumnFilter = (obj: UI_T_ArbitraryObject<string>): void => {
+  let searchText = ''
+
+  for (const [key, value] of Object.entries(obj)) {
+    const currentFilter = searchText
+      ? ',' + key + '.' + value
+      : key + '.' + value
+
+    searchText = searchText + (value ? currentFilter : '')
+  }
+  sendFilter(searchText)
+}
+
+const actions = computed<UI_I_Dropdown[]>(() =>
+  getTargetActionsFunc(localization.value, props.project)
+)
+const onToggleActions = (id: number): void => {
+  if (actionsShowId.value === id) {
+    actionsShowId.value = -1
+  } else {
+    actionsShowId.value = id
+  }
+}
+const onSelectAction = (
+  data: UI_I_TableTarget<typeof props.project>,
+  action: 'view-target' | 'view-zone'
+): void => {
+  switch (action) {
+    case 'view-target':
+      onSelectNodeOfTree(data)
+      break
+    case 'view-zone':
+      onSelectNodeOfTree({ ...data, type: 'zone', nav: 'h' })
+      break
+  }
+  onHideActionsDropdown()
+}
+const onHideActionsDropdown = (): void => {
+  actionsShowId.value = -1
+}
+
+const onSelectNodeOfTree = (
+  data: UI_I_TableTarget<typeof props.project>
+): 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 scoped lang="scss">
+.task-table {
+  height: inherit;
+
+  .target-link {
+    font-family: 'Inter', sans-serif;
+    font-size: 13px;
+    color: var(--bottom-pannel-rtask-link-text);
+    font-weight: 400;
+    line-height: 15.73px;
+    cursor: pointer;
+    &:hover {
+      color: var(--bottom-pannel-rtask-link-hover-text);
+    }
+  }
+  .chip-icon {
+    min-width: 14px;
+  }
+  .icon {
+    margin-right: 4px;
+  }
+
+  .actions {
+    width: 100%;
+
+    .action-icon {
+      width: 20px;
+      height: 20px;
+      color: var(--tasks-actions-icon-color);
+
+      &:hover {
+        color: var(--tasks-actions-icon-hover-color);
+      }
+      &.active {
+        color: var(--tasks-actions-icon-icative-color);
+      }
+    }
+
+    .action-text {
+      margin-left: 8px;
+    }
+  }
+  &__tooltip {
+    margin-left: 8px;
+  }
+}
+
+.skeleton-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .left-skeleton {
+    display: flex;
+    align-items: center;
+    column-gap: 16px;
+    .vertical-line {
+      height: 24px;
+      border-right: 1px solid var(--table-line);
+    }
+  }
+
+  .right-skeleton {
+    display: flex;
+    align-items: center;
+    column-gap: 16px;
+  }
+}
+</style>