| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899 |
- if globalThis.stylFns and globalThis.stylFns['app/components/Admin/DataTable/index.styl']
- styleElement = document.createElement('style')
- styleElement.type = 'text/css'
- styleElement.textContent = globalThis.stylFns['app/components/Admin/DataTable/index.styl']
- document.head.appendChild(styleElement)
- module.exports =
- name: 'data-table'
- props:
- data:
- type: Array
- default: -> []
- columns:
- type: Array
- default: -> []
- loading:
- type: Boolean
- default: false
- selectable:
- type: Boolean
- default: false
- data: ->
- {
- selectedItems: []
- sortField: ''
- sortDirection: 'asc'
- currentPage: 1
- pageSize: 20
- searchQuery: ''
- }
- computed:
- filteredData: ->
- if !@searchQuery
- return @data
-
- query = @searchQuery.toLowerCase()
- return @data.filter (item) =>
- @columns.some (col) =>
- value = item[col.key]
- return false unless value?
- String(value).toLowerCase().includes(query)
- sortedData: ->
- if !@sortField
- return @filteredData
-
- return @filteredData.sort (a, b) =>
- aVal = a[@sortField]
- bVal = b[@sortField]
-
- if aVal < bVal
- return @sortDirection == 'asc' ? -1 : 1
- if aVal > bVal
- return @sortDirection == 'asc' ? 1 : -1
- return 0
- paginatedData: ->
- startIndex = (@currentPage - 1) * @pageSize
- endIndex = startIndex + @pageSize
- return @sortedData.slice(startIndex, endIndex)
- totalPages: ->
- Math.ceil(@sortedData.length / @pageSize)
- methods:
- sort: (field) ->
- if @sortField == field
- @sortDirection = if @sortDirection == 'asc' then 'desc' else 'asc'
- else
- @sortField = field
- @sortDirection = 'asc'
- selectAll: (checked) ->
- if checked
- @selectedItems = [...@paginatedData]
- else
- @selectedItems = []
- selectItem: (item, checked) ->
- if checked
- @selectedItems.push(item)
- else
- @selectedItems = @selectedItems.filter (i) -> i != item
- isSelected: (item) ->
- @selectedItems.includes(item)
- editItem: (item) ->
- @$emit 'edit', item
- deleteItem: (item) ->
- if confirm('Вы уверены, что хотите удалить этот элемент?')
- @$emit 'delete', item
- render: (new Function '_ctx', '_cache', globalThis.renderFns['app/components/Admin/DataTable/index.pug'])()
|