bfg-common 1.4.706 → 1.4.708

package/assets/localization/local_be.json

@@ -2285,6 +2285,7 @@
     "export": "Экспарт",
     "allRowsCount": "Усе радкі ({0})",
     "selectedRowsCount": "Выбраныя радкі ({0})",
+    "viewZone": "View Zone",
     "searchHere": "Шукайце тут...",
     "columns": "Стоўбцы"
   },

package/assets/localization/local_en.json

@@ -2289,6 +2289,7 @@
     "export": "Export",
     "allRowsCount": "All rows ({0})",
     "selectedRowsCount": "Selected rows ({0})",
+    "viewZone": "View Zone",
     "searchHere": "Search here...",
     "columns": "Columns"
   },

package/assets/localization/local_hy.json

@@ -2289,6 +2289,7 @@
     "export": "Արտահանում",
     "allRowsCount": "Բոլոր տողերը ({0})",
     "selectedRowsCount": "Ընտրված տողերը ({0})",
+    "viewZone": "Դիտել գոտին",
     "searchHere": "Փնտրել այստեղ...",
     "columns": "Սյունակներ"
   },

package/assets/localization/local_kk.json

@@ -2288,6 +2288,7 @@
     "export": "Сыртқа шығару",
     "allRowsCount": "Барлық жолдар ({0})",
     "selectedRowsCount": "Таңдалған жолдар ({0})",
+    "viewZone": "Қарау аймағы",
     "searchHere": "Мұнда іздеңіз...",
     "columns": "Бағандар"
   },

package/assets/localization/local_ru.json

@@ -2290,6 +2290,7 @@
     "export": "Экспорт",
     "allRowsCount": "Все строки ({0})",
     "selectedRowsCount": "Выбранные строки ({0})",
+    "viewZone": "Просмотр зоны",
     "searchHere": "Искать здесь...",
     "columns": "Столбцы"
   },

package/assets/localization/local_zh.json

@@ -2287,6 +2287,7 @@
     "export": "出口",
     "allRowsCount": "所有行（{0}）",
     "selectedRowsCount": "选定的行（{0}）",
+    "viewZone": "查看区域",
     "searchHere": "在这里搜索。。。",
     "columns": "列"
   },

package/components/atoms/autocomplete/Autocomplete.vue

@@ -117,6 +117,7 @@ const onKeyDown = (event: KeyboardEvent): void => {
       nextTabItem()
       break
     case 'Enter':
+      event.preventDefault()
       onSelect(selectedTabIndex.value)
       break
     case 'Tab':

package/components/atoms/table/dataGrid/DataGridPage.vue

@@ -35,6 +35,7 @@
       :data-id="`${props.testId}-page-input`"
       type="text"
       class="pagination-current clr-input"
+      @keydown.enter="changeCurrentPageManual"
       @blur="changeCurrentPageManual"
     />
     <span class="divider">/</span>
@@ -114,7 +115,7 @@ const changeCurrentPage = (page: number): void => {
   if (page > props.totalPages || page < 1) return
   changePageAndLazy(page)
 }
-const changeCurrentPageManual = (e: UI_I_HTMLSelectElement): void => {
+const changeCurrentPageManual = (e: any): void => {
   const newVal = parseInt(e.target.value)
 
   if (typeof newVal !== 'number' || isNaN(newVal)) {

package/components/common/context/recursion/RecursionNew.vue

@@ -1,199 +1,210 @@
-<template>
-  <ul class="context-wrap relative">
-    <template v-if="props.isLoading">
-      <ui-loader2 class="context-loader" test-id="context-menu" />
-    </template>
-    <li
-      v-for="(item, key) in props.items"
-      :key="key"
-      :class="[
-        'menu-item',
-        { disabled: item.disabled || isLoading },
-        { 'show-children': item.isShowItems },
-        { 'has-divider': item.hasBorderTop },
-      ]"
-      @mouseenter="emits('toggle-items', [item, true, $event])"
-      @mouseleave="emits('toggle-items', [item, false, $event])"
-    >
-      <span
-        class="context-link"
-        :style="item.style"
-        :data-id="`${item.testId}-context-link`"
-        @mousedown="emits('select-item', item)"
-      >
-        <span :class="['context-icon', item.iconClassName]" />
-        <span class="menu-item-text">{{ item.name }}</span>
-        <ui-icon v-if="item.items.length" name="arrow" class="arrow-icon" />
-        <span v-if="item.shortcut" class="shortcut">{{ item.shortcut }}</span>
-      </span>
-
-      <div class="context-children">
-        <common-context-recursion
-          v-show="item.isShowItems"
-          :action-loading="props.actionLoading"
-          :items="item.items"
-          @select-item="emits('select-item', $event)"
-        />
-      </div>
-    </li>
-  </ul>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_ContextMenuItem } from '~/components/common/context/lib/models/interfaces'
-import type { I_HTMLLiElement } from '~/components/common/context/recursion/lib/models/interfaces'
-
-const props = defineProps<{
-  items: UI_I_ContextMenuItem[]
-  actionLoading: string | null
-  isLoading: boolean
-  testId?: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-item', value: UI_I_ContextMenuItem): void
-  (
-    event: 'toggle-items',
-    value: [UI_I_ContextMenuItem, boolean, I_HTMLLiElement]
-  ): void
-}>()
-</script>
-
-<style scoped lang="scss">
-.context-wrap {
-  width: auto;
-  max-width: 400px;
-  background: var(--context-menu-bg-color);
-  border-radius: 8px;
-  user-select: none;
-  list-style: none;
-  max-height: 100vh;
-  box-shadow: 0 4px 20px 0 #0000001f;
-  padding: 8px;
-
-  .context-loader {
-    position: absolute;
-    width: 40px;
-    top: calc(50% - 20px);
-    left: calc(50% - 20px);
-  }
-
-  .menu-item {
-    position: relative;
-    color: var(--context-menu-text-color);
-    cursor: pointer;
-    border-radius: 4px;
-
-    &.show-children::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 100%;
-      width: 12px;
-      height: 100%;
-    }
-
-    &:not(:last-child) {
-      margin-bottom: 8px;
-    }
-
-    &:not(.disabled) > .context-link:hover {
-      background-color: var(--context-menu-item-bg-hover-color);
-      color: var(--context-menu-text-hover-color);
-    }
-    &.disabled {
-      opacity: 0.5;
-      user-select: none;
-      cursor: default;
-    }
-    &.left {
-      &.show-children::after {
-        left: -12px;
-      }
-      :deep(.context-children) {
-        left: -12px;
-
-        .context-wrap {
-          transform: translateX(-100%);
-          left: auto;
-        }
-      }
-    }
-
-    &.has-divider::before {
-      content: '';
-      display: block;
-      height: 0.03rem;
-      background-color: var(--context-menu-border-color);
-      margin-bottom: 8px;
-    }
-
-    .context-link {
-      position: relative;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      display: flex;
-      align-items: center;
-      user-select: none;
-      border-radius: 4px;
-      padding: 6px 8px;
-
-      .menu-item-text {
-        flex: 1 1 0;
-        font-size: 13px;
-        font-weight: 400;
-        line-height: 15.73px;
-      }
-
-      .context-icon {
-        margin-right: 8px;
-        width: 20px;
-        height: 20px;
-      }
-
-      .arrow-icon {
-        position: absolute;
-        top: 50%;
-        margin-top: -8px;
-        right: 4px;
-        display: inline-block;
-        width: 16px;
-        height: 16px;
-        overflow: hidden;
-        transform: rotate(90deg);
-      }
-
-      .shortcut {
-        padding-left: 10px;
-      }
-    }
-
-    .context-children {
-      position: absolute;
-      top: 0;
-      left: calc(100% + 12px);
-
-      .context-wrap {
-        position: fixed;
-      }
-    }
-  }
-}
-</style>
-<style>
-:root.is-new-view {
-  --context-menu-bg-color: #ffffff;
-  --context-menu-item-bg-hover-color: rgba(233, 235, 237, 0.4);
-  --context-menu-text-color: #4d5d69;
-  --context-menu-text-hover-color: #182531;
-  --context-menu-border-color: #e9ebed;
-}
-:root.is-new-view.dark-theme {
-  --context-menu-bg-color: #334453;
-  --context-menu-item-bg-hover-color: rgba(233, 235, 237, 0.06);
-  --context-menu-text-color: #e9eaec;
-  --context-menu-text-hover-color: #ffffff;
-  --context-menu-border-color: rgba(233, 235, 237, 0.12);
-}
-</style>
+<template>
+  <ul class="context-wrap relative">
+    <template v-if="props.isLoading">
+      <ui-loader2 class="context-loader" test-id="context-menu" />
+    </template>
+    <li
+      v-for="(item, key) in props.items"
+      :key="key"
+      :class="[
+        'menu-item',
+        { disabled: item.disabled || isLoading },
+        { 'show-children': item.isShowItems },
+        { 'has-divider': item.hasBorderTop },
+      ]"
+      @mouseenter="emits('toggle-items', [item, true, $event])"
+      @mouseleave="emits('toggle-items', [item, false, $event])"
+    >
+      <span
+        class="context-link"
+        :style="item.style"
+        :data-id="`${item.testId}-context-link`"
+        @mousedown="emits('select-item', item)"
+      >
+        <span :class="['context-icon', item.iconClassName]" />
+        <span class="menu-item-text">{{ item.name }}</span>
+        <ui-icon v-if="item.items.length" name="arrow" class="arrow-icon" />
+        <span v-if="item.shortcut" class="shortcut">{{ item.shortcut }}</span>
+      </span>
+
+      <div class="context-children">
+        <common-context-recursion
+          v-show="item.isShowItems"
+          :action-loading="props.actionLoading"
+          :items="item.items"
+          @select-item="emits('select-item', $event)"
+        />
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ContextMenuItem } from '~/components/common/context/lib/models/interfaces'
+import type { I_HTMLLiElement } from '~/components/common/context/recursion/lib/models/interfaces'
+
+const props = defineProps<{
+  items: UI_I_ContextMenuItem[]
+  actionLoading: string | null
+  isLoading: boolean
+  testId?: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-item', value: UI_I_ContextMenuItem): void
+  (
+    event: 'toggle-items',
+    value: [UI_I_ContextMenuItem, boolean, I_HTMLLiElement]
+  ): void
+}>()
+</script>
+
+<style scoped lang="scss">
+.context-wrap {
+  width: auto;
+  max-width: 400px;
+  background: var(--context-menu-bg-color);
+  border-radius: 8px;
+  user-select: none;
+  list-style: none;
+  max-height: 100vh;
+  box-shadow: 0 4px 20px 0 #0000001f;
+  padding: 8px;
+
+  .context-loader {
+    position: absolute;
+    width: 40px;
+    top: calc(50% - 20px);
+    left: calc(50% - 20px);
+  }
+
+  .menu-item {
+    position: relative;
+    color: var(--context-menu-text-color);
+    cursor: pointer;
+    border-radius: 4px;
+
+    &.show-children::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 100%;
+      width: 12px;
+      height: 100%;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 8px;
+    }
+
+    &:not(.disabled) > .context-link:hover {
+      background-color: var(--context-menu-item-bg-hover-color);
+      color: var(--context-menu-text-hover-color);
+    }
+
+    &.left {
+      &.show-children::after {
+        left: -12px;
+      }
+      :deep(.context-children) {
+        left: -12px;
+
+        .context-wrap {
+          transform: translateX(-100%);
+          left: auto;
+        }
+      }
+    }
+
+    &.has-divider::before {
+      content: '';
+      display: block;
+      height: 0.03rem;
+      background-color: var(--context-menu-border-color);
+      margin-bottom: 8px;
+    }
+
+    .context-link {
+      position: relative;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      user-select: none;
+      border-radius: 4px;
+      padding: 6px 8px;
+
+      .menu-item-text {
+        flex: 1 1 0;
+        font-size: 13px;
+        font-weight: 400;
+        line-height: 15.73px;
+      }
+
+      .context-icon {
+        margin-right: 8px;
+        width: 20px;
+        height: 20px;
+      }
+
+      .arrow-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -8px;
+        right: 4px;
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        overflow: hidden;
+        transform: rotate(90deg);
+      }
+
+      .shortcut {
+        color: #9da6ad;
+        padding-left: 10px;
+      }
+    }
+
+    &.disabled {
+      color: var(--context-menu-text-disabled-color);
+      user-select: none;
+      cursor: default;
+      .context-icon {
+        opacity: 0.5;
+      }
+      .shortcut {
+        color: var(--context-menu-text-disabled-color);
+      }
+    }
+
+    .context-children {
+      position: absolute;
+      top: 0;
+      left: calc(100% + 12px);
+
+      .context-wrap {
+        position: fixed;
+      }
+    }
+  }
+}
+</style>
+<style>
+:root.is-new-view {
+  --context-menu-bg-color: #ffffff;
+  --context-menu-item-bg-hover-color: rgba(233, 235, 237, 0.4);
+  --context-menu-text-color: #4d5d69;
+  --context-menu-text-disabled-color: #bdc3c7;
+  --context-menu-text-hover-color: #182531;
+  --context-menu-border-color: #e9ebed;
+}
+:root.is-new-view.dark-theme {
+  --context-menu-bg-color: #334453;
+  --context-menu-item-bg-hover-color: rgba(233, 235, 237, 0.06);
+  --context-menu-text-color: #e9eaec;
+  --context-menu-text-disabled-color: #bdc3c7b8;
+  --context-menu-text-hover-color: #ffffff;
+  --context-menu-border-color: rgba(233, 235, 237, 0.12);
+}
+</style>

package/components/common/pages/{Tasks.vue → tasks/Tasks.vue}

@@ -1,40 +1,16 @@
 <template>
   <div class="tasks">
-    <common-headline
-      :headline="localization.common.taskConsole"
-      class="tasks__headline"
-    />
-
-    <div class="btn-group">
-      <button
-        id="task-previous-button"
-        data-id="task-previous-button"
-        class="btn btn-sm btn-link nav-link"
-        :disabled="pagination.page === 1"
-        @click="onClickButton('previous')"
-      >
-        {{ localization.common.previous }}
-      </button>
-
-      <button
-        id="task-next-button"
-        data-id="task-next-button"
-        class="btn btn-sm btn-link nav-link"
-        :disabled="pagination.page === tasksList?.total_pages"
-        @click="onClickButton('next')"
-      >
-        {{ localization.common.next }}
-      </button>
+    <div class="tasks__headline">
+      {{ localization.mainNavigation.tasks }}
     </div>
 
-    <templates-tasks-table-view
-      :data-table="tasksList?.items || []"
-      :total-items="tasksList?.total_items || 0"
+    <common-pages-tasks-table
+      :table-data="tasksList?.items || []"
       :total-pages="tasksList?.total_pages || 1"
-      :pagination="pagination"
+      :total-items="tasksList?.total_items || 0"
       :loading="isLoading"
+      :project="props.project"
       @pagination="onUpdatePagination"
-      @sort="onSortTable"
     />
   </div>
 </template>
@@ -46,31 +22,28 @@ import type {
   UI_I_DataTableQuery,
 } from '~/lib/models/table/interfaces'
 import type { UI_I_Task } from '~/lib/models/store/tasks/interfaces'
-
-definePageMeta({
-  middleware: ['auth'],
-})
+import type { UI_T_Project } from '~/lib/models/types'
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 const { $store }: any = useNuxtApp()
 
+const props = defineProps<{
+  project: UI_T_Project
+}>()
+
 const pagination = ref<UI_I_Pagination>({
   page: 1,
   pageSize: 100,
 })
 const sort = ref<string | null>(null)
 
-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 pauseGlobalRefresh = (): void => {
+  const tasksLastRequestType = $store.getters['tasks/getTasksLastRequestType']
+  $store.dispatch('main/A_PAUSE_GLOBAL_REFRESH', tasksLastRequestType)
 }
 
+const tasksList = computed<UI_I_Task>(() => $store.getters['tasks/getTaskList'])
+
 const getTasks = async (): Promise<void> => {
   pauseGlobalRefresh()
 
@@ -80,41 +53,43 @@ const getTasks = async (): Promise<void> => {
   }
   await $store.dispatch('tasks/A_GET_TASKS', payload)
 }
+getTasks()
 
 const onUpdatePagination = (event: UI_I_Pagination): void => {
   pagination.value = event
   getTasks()
 }
 
-const onSortTable = (event: string): void => {
-  sort.value = event
-  getTasks()
-}
+// const onSortTable = (event: string): void => {
+//   sort.value = event
+//   getTasks()
+// }
 
 const isLoading = computed<boolean>(() =>
   $store.getters['tasks/getLoading']('tasks')
 )
-const pauseGlobalRefresh = (): void => {
-  const tasksLastRequestType = $store.getters['tasks/getTasksLastRequestType']
-  $store.dispatch('main/A_PAUSE_GLOBAL_REFRESH', tasksLastRequestType)
-}
+
 onUnmounted(() => {
   pauseGlobalRefresh()
 })
 </script>
 
-<style lang="scss">
-@import '~/node_modules/bfg-common/assets/scss/common/mixins';
+<style lang="scss" scoped>
 .tasks {
-  @include flex($dir: column);
-  height: 100%;
-  padding-left: 10px;
+  display: flex; // TODO надо удалить потом (clr style)
+  flex-direction: column; // TODO надо удалить потом (clr style)
+  height: inherit;
+  padding: 10px 16px 30px;
   &__headline {
-    padding-left: 10px;
-    margin-bottom: 0.6rem;
+    font-family: Inter, sans-serif;
+    font-weight: 400;
+    font-size: 22px;
+    line-height: 26.63px;
+    color: var(--title-form-first-color);
+    margin-bottom: 22px;
   }
-  .btn {
-    text-transform: uppercase;
+  :deep(.data-table-header) {
+    z-index: 1050 !important; // TODO надо удалить потом (clr style)
   }
 }
 </style>