bfg-common 1.4.706 → 1.4.708

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

@@ -0,0 +1,258 @@
+<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 type { UI_I_TableTarget } from '~/lib/models/table/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
+  (event: 'pagination', value: UI_I_Pagination): 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 => {
+  emits('pagination', 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: UI_I_TableTarget<typeof props.project>,
+  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: 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>
+/*TODO move up*/
+:root {
+  --actions-icon-color: #4d5d69;
+  --actions-icon-hover-color: #213444;
+  --actions-icon-icative-color: #008fd6;
+}
+:root.dark-theme {
+  --actions-icon-color: #e9eaec;
+  --actions-icon-hover-color: #ffffff;
+  --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(--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;
+    margin-right: 6px;
+  }
+  .icon {
+    margin-right: 4px;
+  }
+
+  .actions {
+    width: 100%;
+
+    .action-icon {
+      width: 16px;
+      height: 16px;
+      color: var(--actions-icon-color);
+
+      &:hover {
+        color: var(--actions-icon-hover-color);
+      }
+      &.active {
+        color: var(--actions-icon-icative-color);
+      }
+    }
+
+    .action-text {
+      margin-left: 8px;
+    }
+  }
+}
+</style>

package/components/common/pages/tasks/table/errorInfo/ErrorInfo.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="error-info">
+    <ui-icon
+      :id="`resent-task-error-info-icon-${props.id}`"
+      name="info"
+      width="16px"
+      height="16px"
+      :class="['info-icon pointer', { show: isShowInfo }]"
+      @click.stop="isShowInfo = !isShowInfo"
+    />
+    <ui-popup-window
+      v-model="isShowInfo"
+      width="232px"
+      top
+      left
+      :elem-id="`resent-task-error-info-icon-${props.id}`"
+    >
+      <div class="common-widget-info">
+        <div class="headline justify-between flex-align-center">
+          <div class="flex-align-center">
+            <ui-icon name="error" width="16px" height="16px" />
+            <span class="title">{{ localization.common.failureReason }}</span>
+          </div>
+          <ui-icon
+            name="close"
+            class="pointer hide-icon"
+            width="16px"
+            height="16px"
+            @click.stop="isShowInfo = false"
+          />
+        </div>
+
+        <div class="common-widget-info-description">
+          {{ props.error }}
+        </div>
+      </div>
+    </ui-popup-window>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/node_modules/bfg-common/lib/models/interfaces'
+
+const props = defineProps<{
+  id: string
+  error: string
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowInfo = ref<boolean>(false)
+</script>
+
+<style lang="scss" scoped>
+.error-info {
+  display: flex;
+  justify-content: space-between;
+  margin-left: 8px;
+
+  .info-icon {
+    color: #9da6ad;
+
+    &:hover {
+      color: #4d5d69;
+    }
+    &.show {
+      color: #008fd6;
+    }
+  }
+
+  .common-widget-info {
+    padding: 16px;
+
+    .title {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 16px;
+      color: var(--zabbix-text-color);
+      margin-left: 8px;
+    }
+
+    .common-widget-info-description {
+      font-size: 13px;
+      line-height: 15.73px;
+      color: var(--zabbix-text-color);
+      margin-top: 12px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,168 @@
+<template>
+  <div class="expand-details">
+    <div class="expand-details__row">
+      <span class="expand-details__label">
+        {{ localization.tasks.taskName }}:
+      </span>
+      <span class="expand-details__value">
+        <ui-icon name="shortcuts-tasks" width="18" height="18" class="icon" />
+        {{ normalizedTaskDetails[0].text }}
+      </span>
+    </div>
+
+    <div class="expand-details__row">
+      <span class="expand-details__label">
+        {{ localization.common.status }}:
+      </span>
+      <span class="expand-details__status">
+        <ui-chip
+          :test-id="normalizedTaskDetails[2].data.testId"
+          :color="normalizedTaskDetails[2].data.chipColor"
+          rounded
+        >
+          <ui-icon
+            :name="normalizedTaskDetails[2].data.icon"
+            width="14px"
+            height="14px"
+            class="chip-icon"
+          ></ui-icon>
+          {{ normalizedTaskDetails[2].text }}
+        </ui-chip>
+
+        <common-pages-tasks-table-error-info
+          v-if="normalizedTaskDetails[2].data.error"
+          :id="normalizedTaskDetails[2].testId"
+          :error="normalizedTaskDetails[2].data.error"
+        />
+      </span>
+    </div>
+
+    <div class="expand-details__row">
+      <span class="expand-details__label">
+        {{ localization.common.initiator }}:
+      </span>
+      <span class="expand-details__value">
+        <ui-icon name="user-icon" width="18" height="18" class="icon" />
+        {{ normalizedTaskDetails[3].text }}
+      </span>
+    </div>
+
+    <div class="expand-details__row">
+      <span class="expand-details__label">
+        {{ localization.common.target }}:
+      </span>
+      <span
+        class="expand-details__value"
+        :class="normalizedTaskDetails[1].data.isLink && 'target-link'"
+        @click.stop="onSelectNodeOfTree(normalizedTaskDetails[1].data)"
+      >
+        <span :class="['icon', normalizedTaskDetails[1].data.icon]" />
+        {{ normalizedTaskDetails[1].text }}
+      </span>
+    </div>
+
+    <div class="expand-details__row">
+      <span class="expand-details__label">
+        {{ localization.common.server }}:
+      </span>
+      <span class="expand-details__value">
+        <ui-icon name="server-icon" width="18" height="18" class="icon" />
+        {{ normalizedTaskDetails[4].text }}
+      </span>
+    </div>
+
+    <div class="expand-details__row">
+      <span class="expand-details__label">
+        {{ localization.common.relatedEvents }}:
+      </span>
+      <span class="expand-details__value disabled">
+        {{ localization.common.emptyRelatedEvents }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_DataTableBodyData } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  data: UI_I_DataTableBodyData[]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
+
+const normalizedTaskDetails = computed<UI_I_DataTableBodyData[]>(() => {
+  return props.data.filter((column: UI_I_DataTableBodyData) =>
+    ['col0', 'col1', 'col2', 'col4', 'col9'].includes(column.col as string)
+  ) // Фильтр по номерам колонок
+})
+
+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 lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+%properties {
+  @include flex($align: center);
+  font-family: Inter, serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14.52px;
+}
+.expand-details {
+  &__row {
+    display: grid;
+    grid-template-columns: 110px 1fr;
+    column-gap: 12px;
+    margin-bottom: 8px;
+  }
+  &__label {
+    @extend %properties;
+    color: #9da6ad;
+  }
+  &__value {
+    @extend %properties;
+    color: var(--title-form-first-color);
+    &.target-link {
+      color: var(--bottom-pannel-rtask-link-text);
+      cursor: pointer;
+      &:hover {
+        color: var(--bottom-pannel-rtask-link-hover-text);
+      }
+    }
+    &.disabled {
+      color: var(--table-disabled-btn);
+    }
+
+    .icon {
+      margin-right: 4px;
+    }
+  }
+  &__status {
+    @include flex($align: center);
+    .ui-chip {
+      width: max-content;
+      :deep(.ui-chip__label) {
+        // TODO надо удалить потом (clr style)
+        grid-gap: 4px;
+      }
+    }
+  }
+}
+</style>