bfg-common 1.4.659 → 1.4.661

package/assets/localization/local_be.json

@@ -2281,7 +2281,10 @@
     "rowsPerPage": "Радкі на старонку",
     "unsavedChanges": "Непавераныя змены!",
     "unsavedChangesDescription": "Вы ўпэўнены, што хочаце пакінуць гэтую старонку? Непакураны змены будуць страчаны.",
-    "leave": "Пакідаць"
+    "leave": "Пакідаць",
+    "export": "Экспарт",
+    "allRowsCount": "Усе радкі ({0})",
+    "selectedRowsCount": "Выбраныя радкі ({0})"
   },
   "auth": {
     "welcomeTo": "Сардэчна запрашаем у",

package/assets/localization/local_en.json

@@ -2285,7 +2285,10 @@
     "rowsPerPage": "Rows per page",
     "unsavedChanges": "Unsaved Changes!",
     "unsavedChangesDescription": "Are you sure you want to leave this page? Unsaved changes will be lost.",
-    "leave": "Leave"
+    "leave": "Leave",
+    "export": "Export",
+    "allRowsCount": "All rows ({0})",
+    "selectedRowsCount": "Selected rows ({0})"
   },
   "auth": {
     "welcomeTo": "Welcome to",

package/assets/localization/local_hy.json

@@ -2285,7 +2285,10 @@
     "rowsPerPage": "Շարքեր մեկ էջում",
     "unsavedChanges": "Չհաստատված փոփոխություններ",
     "unsavedChangesDescription": "Համոզված եք, որ ցանկանում եք լքել այս էջը: Չպաշտպանված փոփոխությունները կկորչվեն:",
-    "leave": "Հեռանալ"
+    "leave": "Հեռանալ",
+    "export": "Արտահանում",
+    "allRowsCount": "Բոլոր տողերը ({0})",
+    "selectedRowsCount": "Ընտրված տողերը ({0})"
   },
   "auth": {
     "welcomeTo": "Բարի գալուստ",

package/assets/localization/local_kk.json

@@ -2284,7 +2284,10 @@
     "rowsPerPage": "Ағын сызықтары",
     "unsavedChanges": "Жетілмеген өзгерістер!",
     "unsavedChangesDescription": "Сіз бұл беттен кеткіңіз келе ме? Сақталмаған өзгерістер жоғалады.",
-    "leave": "Тастау"
+    "leave": "Тастау",
+    "export": "Сыртқа шығару",
+    "allRowsCount": "Барлық жолдар ({0})",
+    "selectedRowsCount": "Таңдалған жолдар ({0})"
   },
   "auth": {
     "welcomeTo": "Қош келдіңіз",

package/assets/localization/local_ru.json

@@ -2286,7 +2286,10 @@
     "rowsPerPage": "Кол-во строк",
     "unsavedChanges": "Несохранённые изменения!",
     "unsavedChangesDescription": "Вы уверены, что хотите покинуть эту страницу? Неиседлкие изменения будут потеряны.",
-    "leave": "Покинуть"
+    "leave": "Покинуть",
+    "export": "Экспорт",
+    "allRowsCount": "Все строки ({0})",
+    "selectedRowsCount": "Выбранные строки ({0})"
   },
   "auth": {
     "welcomeTo": "Добро пожаловать в",

package/assets/localization/local_zh.json

@@ -2283,7 +2283,10 @@
     "rowsPerPage": "每页行",
     "unsavedChanges": "未保存的更改！",
     "unsavedChangesDescription": "您确定要离开此页面吗？未保存的更改将丢失。",
-    "leave": "离开"
+    "leave": "离开",
+    "export": "出口",
+    "allRowsCount": "所有行（{0}）",
+    "selectedRowsCount": "选定的行（{0}）"
   },
   "auth": {
     "welcomeTo": "欢迎来到",

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

@@ -354,7 +354,7 @@
                                   {
                                     'arrow-selected':
                                       isShowHiddenInfo &&
-                                      item2.id === selectedRow,
+                                      item2.id === props.selectedRow,
                                   },
                                 ]"
                                 @click.prevent.stop="
@@ -369,7 +369,7 @@
                                     {
                                       'arrow-selected':
                                         isShowHiddenInfo &&
-                                        item2.id === selectedRow,
+                                        item2.id === props.selectedRow,
                                     },
                                   ]"
                                 />
@@ -443,6 +443,25 @@
               class="switch-icon"
             />
 
+            <template v-if="props.isShowExport && bodyItemsPresent.length">
+              <common-select-button-dropdown
+                v-if="props.selectedRow?.length"
+                :heading="localization.common.export"
+                :items="exportItems"
+                :test-id="`${props.testId}-export-btn`"
+                class="properties__actions"
+                is-top
+                @click="onExport"
+              />
+              <button
+                v-else
+                class="export-link dropdown-toggle btn btn-sm btn-link"
+                @click="onExportAll"
+              >
+                {{ localization.common.export }}
+              </button>
+            </template>
+
             <div v-if="$slots.action" class="datagrid-footer__action">
               <slot name="action" />
             </div>
@@ -508,7 +527,10 @@
 </template>
 
 <script setup lang="ts">
-import type { UI_I_HTMLSelectElement } from '~/lib/models/interfaces'
+import type {
+  UI_I_HTMLSelectElement,
+  UI_I_Localization,
+} from '~/lib/models/interfaces'
 import type {
   UI_I_HeadItem,
   UI_I_BodyItem,
@@ -520,7 +542,10 @@ import type {
   UI_T_SelectedRow,
 } from '~/components/atoms/table/dataGrid/lib/models/types'
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_I_DropdownButtonItem } from '~/components/common/select/button/lib/models/interfaces'
 import { itemsPerPage } from '~/components/atoms/table/dataGrid/lib/config/itemsPerPage'
+import { exportItemsFunc } from '~/components/atoms/table/dataGrid/lib/config/settingsTable'
+import { generateCsvAndDownload } from '~/components/atoms/table/dataGrid/lib/utils/export'
 
 const props = withDefaults(
   defineProps<{
@@ -547,6 +572,7 @@ const props = withDefaults(
     rowAttributeIdName?: string
     isMainFilter?: boolean
     mainFilterPlaceholder?: string
+    isShowExport?: boolean
   }>(),
   {
     columnKeys: undefined,
@@ -557,6 +583,7 @@ const props = withDefaults(
     testId: 'ui-data-grid',
     withInfo: false,
     rowAttributeIdName: 'data-id',
+    isShowExport: false,
   }
 )
 
@@ -572,6 +599,8 @@ const emits = defineEmits<{
   (event: 'row-detail', value: number): void
 }>()
 
+const localization = computed<UI_I_Localization>(() => useLocal())
+
 const mainFilter = ref<string>('')
 
 const mergeOptions = computed<UI_I_OptionItem[]>(
@@ -766,6 +795,7 @@ const changePageSize = (value: number): void => {
   emits('update:page-size', value)
 }
 const changePage = (value: number): void => {
+  emits('update:selected-row', [])
   emits('update:page', value)
 }
 
@@ -1003,6 +1033,39 @@ const setResizeObserveWithInfo = (): void => {
   resizeObserveWithInfo.observe(el)
 }
 
+// Export
+const exportItems = computed<UI_I_DropdownButtonItem[]>(
+  exportItemsFunc(
+    localization.value,
+    bodyItemsPresent.value.length || 0,
+    props.selectedRow?.length || 0
+  )
+)
+const onExport = (type: '0' | '1'): void => {
+  switch (type) {
+    case '0':
+      onExportAll()
+      break
+    case '1':
+      exportSelected()
+  }
+}
+const onExportAll = (): void => {
+  const rows = document.querySelectorAll(
+    `#${tableWrapperId} .datagrid-row-scrollable`
+  ) as NodeListOf<HTMLElement>
+  generateCsvAndDownload(Array.from(rows))
+}
+const exportSelected = (): void => {
+  const header = document.querySelectorAll(
+    `#${tableWrapperId} .datagrid-row-scrollable`
+  )[0] as HTMLElement
+  const rows = document.querySelectorAll(
+    `#${tableWrapperId} .datagrid-selected`
+  ) as NodeListOf<HTMLElement>
+  generateCsvAndDownload([header, ...Array.from(rows)])
+}
+
 onMounted(() => {
   window.addEventListener('mousemove', mousemove)
   window.addEventListener('mouseup', mouseup)

package/components/atoms/table/dataGrid/lib/config/settingsTable.ts

@@ -1,67 +1,91 @@
-import type { UI_ColumnSettingsStrategy } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
-import type {
-  UI_I_ColumnKey,
-  UI_I_HeadItem,
-} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
-import {
-  constructColumnKey,
-  constructHeadItem,
-} from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
-
-export const defaultColumnKeys = (
-  items: [string, boolean, string, string][],
-  strategy?: UI_ColumnSettingsStrategy
-): UI_I_ColumnKey[] => {
-  const result: UI_I_ColumnKey[] = []
-  items.forEach((item, i) => {
-    let col: string = `col${i}` // Стандартное значение по умолчанию
-
-    if (strategy) {
-      // Проходим по ключам объекта и ищем соответствие индекса i в значениях
-      for (const key in strategy) {
-        if (strategy[key].includes(i)) {
-          col = key
-          break
-        }
-      }
-    }
-
-    result.push(
-      constructColumnKey(col, item[0], item[1], `show-column-${item[3]}`)
-    )
-  })
-  return result
-}
-
-export const defaultHeadItems = (
-  items: [string, boolean, string, string][],
-  strategy?: UI_ColumnSettingsStrategy
-): UI_I_HeadItem[] => {
-  const result: UI_I_HeadItem[] = []
-  items.forEach((item, i) => {
-    let col: string = `col${i}` // Стандартное значение по умолчанию
-
-    if (strategy) {
-      // Проходим по ключам объекта и ищем соответствие индекса i в значениях
-      for (const key in strategy) {
-        if (strategy[key].includes(i)) {
-          col = key
-          break
-        }
-      }
-    }
-
-    result.push(
-      constructHeadItem(
-        col,
-        item[0],
-        item[3],
-        false,
-        item[2],
-        undefined,
-        item[3]
-      )
-    )
-  })
-  return result
-}
+import type { UI_ColumnSettingsStrategy } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type {
+  UI_I_ColumnKey,
+  UI_I_HeadItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { UI_I_DropdownButtonItem } from '~/components/common/select/button/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import {
+  constructColumnKey,
+  constructHeadItem,
+} from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
+
+export const defaultColumnKeys = (
+  items: [string, boolean, string, string][],
+  strategy?: UI_ColumnSettingsStrategy
+): UI_I_ColumnKey[] => {
+  const result: UI_I_ColumnKey[] = []
+  items.forEach((item, i) => {
+    let col: string = `col${i}` // Стандартное значение по умолчанию
+
+    if (strategy) {
+      // Проходим по ключам объекта и ищем соответствие индекса i в значениях
+      for (const key in strategy) {
+        if (strategy[key].includes(i)) {
+          col = key
+          break
+        }
+      }
+    }
+
+    result.push(
+      constructColumnKey(col, item[0], item[1], `show-column-${item[3]}`)
+    )
+  })
+  return result
+}
+
+export const defaultHeadItems = (
+  items: [string, boolean, string, string][],
+  strategy?: UI_ColumnSettingsStrategy
+): UI_I_HeadItem[] => {
+  const result: UI_I_HeadItem[] = []
+  items.forEach((item, i) => {
+    let col: string = `col${i}` // Стандартное значение по умолчанию
+
+    if (strategy) {
+      // Проходим по ключам объекта и ищем соответствие индекса i в значениях
+      for (const key in strategy) {
+        if (strategy[key].includes(i)) {
+          col = key
+          break
+        }
+      }
+    }
+
+    result.push(
+      constructHeadItem(
+        col,
+        item[0],
+        item[3],
+        false,
+        item[2],
+        undefined,
+        item[3]
+      )
+    )
+  })
+  return result
+}
+
+export const exportItemsFunc = (
+  localization: UI_I_Localization,
+  rows: number,
+  selectedRows: number
+): UI_I_DropdownButtonItem[] => {
+  return [
+    {
+      text: localization.common.allRowsCount.replace('{0}', '' + rows),
+      type: '0',
+      disabled: false,
+    },
+    {
+      text: localization.common.selectedRowsCount.replace(
+        '{0}',
+        '' + selectedRows
+      ),
+      type: '1',
+      disabled: false,
+    },
+  ]
+}

package/components/atoms/table/dataGrid/lib/utils/export.ts

@@ -0,0 +1,16 @@
+export const generateCsvAndDownload = (rows:  HTMLElement[]): void => {
+    const content: string[] = []
+    rows.forEach((row: HTMLElement) => {
+        content.push(row.innerText.replaceAll('\n', ';'))
+    })
+
+    const csvContent = 'data:text/csv;charset=utf-8,' + content.join('\n')
+
+    const encodedUri = encodeURI(csvContent)
+    const link = document.createElement('a')
+    link.setAttribute('href', encodedUri)
+    link.setAttribute('download', 'my_data.csv')
+    document.body.appendChild(link)
+
+    link.click()
+}

package/components/common/select/button/ButtonDropdown.vue

@@ -1,102 +1,108 @@
-<template>
-  <div :class="['dropdown-button dropdown', { open }]">
-    <button
-      :id="`${props.testId}-heading`"
-      :data-id="`${props.testId}-heading`"
-      class="btn btn-link dropdown-toggle"
-      @click.stop="open = !open"
-    >
-      {{ heading }}
-      <atoms-the-icon name="arrow" class="dropdown-arrow" />
-    </button>
-
-    <div v-show="open" class="dropdown-menu">
-      <div v-for="(item, key) in props.items" :key="key">
-        <button
-          :id="`${props.testId}-item`"
-          :data-id="item.testId"
-          :disabled="item.disabled"
-          class="dropdown-item"
-          @click="click(item.type)"
-        >
-          {{ item.text }}
-        </button>
-        <div v-if="item.divider" class="dropdown-divider" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_DropdownButtonItem } from '~/components/common/select/button/lib/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    testId?: string
-    heading: string
-    items: UI_I_DropdownButtonItem[]
-  }>(),
-  { testId: 'select-dropdown-button' }
-)
-const emits = defineEmits<{
-  (event: 'click', value: string): void
-}>()
-const hide = (): void => {
-  open.value = false
-}
-const open = ref<boolean>(false)
-
-const click = (type: string): void => {
-  emits('click', type)
-}
-const windowClick = (): void => {
-  hide()
-}
-onMounted(() => {
-  window.addEventListener('click', windowClick)
-})
-onUnmounted(() => {
-  window.removeEventListener('click', windowClick)
-})
-</script>
-
-<style scoped lang="scss">
-.dropdown {
-  &-menu {
-    min-width: 147px;
-    width: 260px;
-    background-color: var(--dropdown-bg-color);
-    border-color: var(--block-border-color);
-  }
-  &-toggle {
-    font-size: 11px;
-
-    &.btn {
-      padding-right: 0.5rem;
-    }
-  }
-  &-item {
-    border-bottom: 1px solid transparent;
-    color: var(--global-font-color4);
-    //text-align: center;
-    border-radius: 0;
-    &:hover {
-      background-color: var(--row-hover-bg-color);
-      border-color: var(--row-hover-border-color);
-      color: var(--global-font-color4);
-    }
-  }
-  &-divider {
-    border-color: var(--block-border-color);
-  }
-  &-arrow {
-    width: 10px;
-    height: 10px;
-    position: absolute;
-    transform: translateY(-50%) rotate(180deg);
-    top: 50%;
-    right: 0;
-    fill: var(--arrows-icon);
-  }
-}
-</style>
+<template>
+  <div :class="['dropdown-button dropdown', { open }]">
+    <button
+      :id="`${props.testId}-heading`"
+      :data-id="`${props.testId}-heading`"
+      class="btn btn-link dropdown-toggle"
+      @click.stop="open = !open"
+    >
+      {{ heading }}
+      <atoms-the-icon name="arrow" class="dropdown-arrow" />
+    </button>
+
+    <div v-show="open" :class="['dropdown-menu', { top: props.isTop }]">
+      <div v-for="(item, key) in props.items" :key="key">
+        <button
+          :id="`${props.testId}-item`"
+          :data-id="item.testId"
+          :disabled="item.disabled"
+          class="dropdown-item"
+          @click="click(item.type)"
+        >
+          {{ item.text }}
+        </button>
+        <div v-if="item.divider" class="dropdown-divider" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_DropdownButtonItem } from '~/components/common/select/button/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    heading: string
+    items: UI_I_DropdownButtonItem[]
+    isTop?: boolean
+    testId?: string
+  }>(),
+  { testId: 'select-dropdown-button' }
+)
+const emits = defineEmits<{
+  (event: 'click', value: string): void
+}>()
+const hide = (): void => {
+  open.value = false
+}
+const open = ref<boolean>(false)
+
+const click = (type: string): void => {
+  emits('click', type)
+}
+const windowClick = (): void => {
+  hide()
+}
+onMounted(() => {
+  window.addEventListener('click', windowClick)
+})
+onUnmounted(() => {
+  window.removeEventListener('click', windowClick)
+})
+</script>
+
+<style scoped lang="scss">
+.dropdown {
+  &-menu {
+    min-width: 147px;
+    width: 260px;
+    background-color: var(--dropdown-bg-color);
+    border-color: var(--block-border-color);
+
+    &.top {
+      bottom: 100%;
+      top: unset;
+    }
+  }
+  &-toggle {
+    font-size: 11px;
+
+    &.btn {
+      padding-right: 0.5rem;
+    }
+  }
+  &-item {
+    border-bottom: 1px solid transparent;
+    color: var(--global-font-color4);
+    //text-align: center;
+    border-radius: 0;
+    &:hover {
+      background-color: var(--row-hover-bg-color);
+      border-color: var(--row-hover-border-color);
+      color: var(--global-font-color4);
+    }
+  }
+  &-divider {
+    border-color: var(--block-border-color);
+  }
+  &-arrow {
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    transform: translateY(-50%) rotate(180deg);
+    top: 50%;
+    right: 0;
+    fill: var(--arrows-icon);
+  }
+}
+</style>

package/package.json

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