feat: reusable ag grid
This commit is contained in:
@@ -1,9 +1,7 @@
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, watch, onMounted, onUnmounted, computed } from 'vue'
|
||||
import { AgGridVue } from 'ag-grid-vue3'
|
||||
import data from '@/views/demos/forms/tables/data-table/datatable'
|
||||
import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community'
|
||||
import { ExcelExportModule } from 'ag-grid-enterprise'
|
||||
import DataTableHeader from './components/DataTableHeader.vue'
|
||||
import UserDetailsDialog from './components/UserDetailsDialog.vue'
|
||||
import ConfirmDeleteDialog from './components/ConfirmDeleteDialog.vue'
|
||||
@@ -13,199 +11,561 @@ import { useResponsive } from './composables/useResponsive'
|
||||
import jsPDF from 'jspdf'
|
||||
import autoTable from 'jspdf-autotable'
|
||||
|
||||
ModuleRegistry.registerModules([AllCommunityModule, ExcelExportModule])
|
||||
ModuleRegistry.registerModules([AllCommunityModule])
|
||||
|
||||
const props = defineProps({
|
||||
apiUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
apiHeaders: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '600px'
|
||||
},
|
||||
mobileHeight: {
|
||||
type: String,
|
||||
default: '400px'
|
||||
},
|
||||
enableExport: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
enableEdit: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
enableDelete: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
enableSearch: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
customActions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
dataProcessor: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
schemaMap: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
keepOriginalKeys: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits([
|
||||
'data-updated',
|
||||
'row-selected',
|
||||
'row-deleted',
|
||||
'row-edited',
|
||||
'export-completed',
|
||||
'api-error'
|
||||
])
|
||||
|
||||
const { isMobile, isTablet, windowWidth } = useResponsive()
|
||||
const gridContainer = ref(null)
|
||||
|
||||
const fetchedData = ref([])
|
||||
const isLoading = ref(false)
|
||||
|
||||
const normalizeRecord = (record, index) => {
|
||||
if (!props.schemaMap || Object.keys(props.schemaMap).length === 0) {
|
||||
return record
|
||||
}
|
||||
const normalized = {}
|
||||
for (const [canonicalKey, candidates] of Object.entries(props.schemaMap)) {
|
||||
const keys = Array.isArray(candidates) ? candidates : [candidates]
|
||||
let found = undefined
|
||||
for (const k of keys) {
|
||||
if (record[k] !== undefined) {
|
||||
found = record[k]
|
||||
break
|
||||
}
|
||||
}
|
||||
if (canonicalKey === 'id' && (found === undefined || found === null)) {
|
||||
normalized[canonicalKey] = record.id ?? index + 1
|
||||
} else {
|
||||
normalized[canonicalKey] = found
|
||||
}
|
||||
}
|
||||
return props.keepOriginalKeys ? { ...record, ...normalized } : normalized
|
||||
}
|
||||
|
||||
const processedData = computed(() => {
|
||||
const sourceData = props.data?.length ? props.data : fetchedData.value
|
||||
if (!Array.isArray(sourceData)) return []
|
||||
|
||||
return sourceData.map((item, index) => {
|
||||
const base = normalizeRecord(item, index)
|
||||
return {
|
||||
...base,
|
||||
id: base?.id ?? item?.id ?? index + 1,
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// Dynamically infer columns from data when not provided
|
||||
const inferredColumns = computed(() => {
|
||||
if (Array.isArray(props.columns) && props.columns.length) return props.columns
|
||||
const rows = Array.isArray(processedData.value) ? processedData.value.slice(0, 50) : []
|
||||
if (!rows.length) return []
|
||||
|
||||
// Collect union of keys across sample rows
|
||||
const keySet = new Set()
|
||||
rows.forEach(r => {
|
||||
if (r && typeof r === 'object') {
|
||||
Object.keys(r).forEach(k => {
|
||||
if (k !== 'action' && r[k] !== undefined && typeof r[k] !== 'object') keySet.add(k)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const keys = Array.from(keySet)
|
||||
const toTitle = (k) => k
|
||||
.replace(/_/g, ' ')
|
||||
.replace(/([a-z])([A-Z])/g, '$1 $2')
|
||||
.replace(/^./, s => s.toUpperCase())
|
||||
|
||||
const isLikelyDate = (v) => {
|
||||
if (typeof v !== 'string') return false
|
||||
// ISO or yyyy-mm-dd or timestamps in string
|
||||
if (/^\d{4}-\d{2}-\d{2}/.test(v) || /T\d{2}:\d{2}:\d{2}/.test(v)) return true
|
||||
const d = new Date(v)
|
||||
return !isNaN(d.getTime())
|
||||
}
|
||||
|
||||
return keys.map(k => {
|
||||
// Detect type by scanning a few rows
|
||||
let sampleVal = undefined
|
||||
for (let i = 0; i < rows.length; i++) {
|
||||
const val = rows[i]?.[k]
|
||||
if (val !== undefined && val !== null) { sampleVal = val; break }
|
||||
}
|
||||
|
||||
const col = {
|
||||
field: k,
|
||||
headerName: toTitle(k),
|
||||
sortable: true,
|
||||
filter: true,
|
||||
editable: false,
|
||||
minWidth: 100,
|
||||
flex: 1,
|
||||
}
|
||||
|
||||
if (typeof sampleVal === 'number') {
|
||||
col.filter = true
|
||||
col.width = 120
|
||||
col.valueFormatter = p => (typeof p.value === 'number' ? p.value : p.value ?? '')
|
||||
} else if (typeof sampleVal === 'boolean') {
|
||||
col.width = 120
|
||||
col.valueFormatter = p => (p.value ? 'Yes' : 'No')
|
||||
} else if (isLikelyDate(sampleVal)) {
|
||||
col.width = 140
|
||||
col.valueFormatter = p => {
|
||||
if (!p.value) return ''
|
||||
const d = new Date(p.value)
|
||||
return isNaN(d.getTime()) ? String(p.value) : d.toISOString().split('T')[0]
|
||||
}
|
||||
} else {
|
||||
col.flex = 1
|
||||
}
|
||||
return col
|
||||
})
|
||||
})
|
||||
|
||||
// Build grid with inferred columns (or props.columns if provided)
|
||||
// Note: Passing inferredColumns.value at setup time; if you need live re-init on schema change, we can add a watcher.
|
||||
let gridSetup = useDataTableGrid(processedData, isMobile, isTablet, inferredColumns)
|
||||
const gridApi = gridSetup.gridApi
|
||||
const columnDefs = gridSetup.columnDefs
|
||||
const rowData = gridSetup.rowData
|
||||
const defaultColDef = gridSetup.defaultColDef
|
||||
const gridOptions = gridSetup.gridOptions
|
||||
const gridReady = gridSetup.onGridReady
|
||||
const onCellValueChanged = gridSetup.onCellValueChanged
|
||||
const updateColumnVisibility = gridSetup.updateColumnVisibility
|
||||
const updatePagination = gridSetup.updatePagination
|
||||
|
||||
watch(
|
||||
processedData,
|
||||
(newData) => {
|
||||
if (Array.isArray(newData) && gridApi.value) {
|
||||
try {
|
||||
if (typeof gridApi.value.setRowData === 'function') {
|
||||
gridApi.value.setRowData(newData)
|
||||
} else if (typeof gridApi.value.setGridOption === 'function') {
|
||||
gridApi.value.setGridOption("rowData", newData)
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('Error updating grid data:', error)
|
||||
}
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
)
|
||||
|
||||
const fetchData = async () => {
|
||||
if (!props.apiUrl) return
|
||||
|
||||
isLoading.value = true
|
||||
try {
|
||||
const response = await fetch(props.apiUrl, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...props.apiHeaders
|
||||
}
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`)
|
||||
}
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
let processedApiData = []
|
||||
if (props.dataProcessor && typeof props.dataProcessor === 'function') {
|
||||
processedApiData = props.dataProcessor(result)
|
||||
} else {
|
||||
processedApiData = result.todos || result.data || result.users || result.products || (Array.isArray(result) ? result : [])
|
||||
}
|
||||
|
||||
fetchedData.value = Array.isArray(processedApiData) ? processedApiData : []
|
||||
console.log('Fetched data set to:', fetchedData.value)
|
||||
emit('data-updated', fetchedData.value)
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error)
|
||||
emit('api-error', error)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const saveToAPI = async (userData, isUpdate = false) => {
|
||||
if (!props.apiUrl) return
|
||||
|
||||
try {
|
||||
const method = isUpdate ? 'PUT' : 'POST'
|
||||
const url = isUpdate ? `${props.apiUrl}/${userData.id}` : props.apiUrl
|
||||
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...props.apiHeaders
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`)
|
||||
}
|
||||
|
||||
await fetchData()
|
||||
return await response.json()
|
||||
} catch (error) {
|
||||
console.error('Error saving data:', error)
|
||||
emit('api-error', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
const deleteFromAPI = async (id) => {
|
||||
if (!props.apiUrl) return
|
||||
|
||||
try {
|
||||
const response = await fetch(`${props.apiUrl}/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...props.apiHeaders
|
||||
}
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`)
|
||||
}
|
||||
|
||||
await fetchData()
|
||||
return true
|
||||
} catch (error) {
|
||||
console.error('Error deleting data:', error)
|
||||
emit('api-error', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
const {
|
||||
gridApi,
|
||||
columnDefs,
|
||||
rowData,
|
||||
defaultColDef,
|
||||
gridOptions,
|
||||
onGridReady: gridReady,
|
||||
onCellValueChanged,
|
||||
updateColumnVisibility,
|
||||
updatePagination
|
||||
} = useDataTableGrid(data, isMobile, isTablet)
|
||||
|
||||
const {
|
||||
setupGlobalHandlers,
|
||||
cleanupGlobalHandlers,
|
||||
exportToCSV,
|
||||
exportToExcel,
|
||||
saveUser,
|
||||
confirmDelete,
|
||||
cancelDelete,
|
||||
showDetailsDialog,
|
||||
selectedRowData,
|
||||
deleteRowData,
|
||||
showDeleteDialog,
|
||||
deleteRow
|
||||
setupGlobalHandlers,
|
||||
cleanupGlobalHandlers,
|
||||
exportToCSV,
|
||||
exportToExcel,
|
||||
saveUser,
|
||||
confirmDelete,
|
||||
cancelDelete,
|
||||
showDetailsDialog,
|
||||
selectedRowData,
|
||||
deleteRowData,
|
||||
showDeleteDialog,
|
||||
deleteRow
|
||||
} = useDataTableActions(gridApi, rowData)
|
||||
|
||||
const handleSaveUser = async (updatedData) => {
|
||||
try {
|
||||
// Optimistic update: update grid first
|
||||
saveUser(updatedData)
|
||||
|
||||
if (props.apiUrl) {
|
||||
try {
|
||||
await saveToAPI(updatedData, updatedData.id ? true : false)
|
||||
} catch (apiErr) {
|
||||
console.error('API save failed, refetching to sync:', apiErr)
|
||||
// Re-sync from server on failure
|
||||
await fetchData()
|
||||
emit('api-error', apiErr)
|
||||
return
|
||||
}
|
||||
}
|
||||
emit('row-edited', updatedData)
|
||||
} catch (error) {
|
||||
console.error('Error saving user:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleConfirmDelete = async () => {
|
||||
try {
|
||||
// Optimistic remove from grid first
|
||||
confirmDelete()
|
||||
|
||||
if (props.apiUrl && deleteRowData.value?.id) {
|
||||
try {
|
||||
await deleteFromAPI(deleteRowData.value.id)
|
||||
} catch (apiErr) {
|
||||
console.error('API delete failed, refetching to restore:', apiErr)
|
||||
await fetchData()
|
||||
emit('api-error', apiErr)
|
||||
return
|
||||
}
|
||||
}
|
||||
emit('row-deleted', deleteRowData.value)
|
||||
} catch (error) {
|
||||
console.error('Error deleting row:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const quickFilter = ref('')
|
||||
|
||||
watch(quickFilter, (newValue) => {
|
||||
if (gridApi.value) {
|
||||
gridApi.value.setGridOption('quickFilterText', newValue || '')
|
||||
}
|
||||
if (gridApi.value) {
|
||||
gridApi.value.setGridOption('quickFilterText', newValue || '')
|
||||
}
|
||||
}, { immediate: false })
|
||||
|
||||
const onGridReady = params => {
|
||||
gridReady(params)
|
||||
setupGlobalHandlers()
|
||||
}
|
||||
gridReady(params)
|
||||
setupGlobalHandlers()
|
||||
|
||||
if (props.apiUrl) {
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleSaveUser = updatedData => saveUser(updatedData)
|
||||
// Observe container size to recalc pagination
|
||||
try {
|
||||
const container = gridContainer?.value
|
||||
if (container && typeof ResizeObserver !== 'undefined') {
|
||||
const ro = new ResizeObserver(() => {
|
||||
if (gridApi.value) {
|
||||
updatePagination()
|
||||
setTimeout(() => {
|
||||
gridApi.value?.sizeColumnsToFit?.()
|
||||
}, 50)
|
||||
}
|
||||
})
|
||||
ro.observe(container)
|
||||
}
|
||||
} catch (e) {
|
||||
// no-op
|
||||
}
|
||||
}
|
||||
|
||||
const handleQuickFilterUpdate = (value) => {
|
||||
quickFilter.value = value || ''
|
||||
|
||||
if (gridApi.value) {
|
||||
gridApi.value.setGridOption('quickFilterText', value || '')
|
||||
}
|
||||
quickFilter.value = value || ''
|
||||
|
||||
if (gridApi.value) {
|
||||
gridApi.value.setGridOption('quickFilterText', value || '')
|
||||
}
|
||||
}
|
||||
|
||||
const refreshData = () => {
|
||||
if (props.apiUrl) {
|
||||
fetchData()
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
refreshData,
|
||||
fetchData,
|
||||
gridApi
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
setupGlobalHandlers()
|
||||
window.addEventListener('resize', handleResize)
|
||||
setupGlobalHandlers()
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
cleanupGlobalHandlers()
|
||||
window.removeEventListener('resize', handleResize)
|
||||
cleanupGlobalHandlers()
|
||||
window.removeEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
const handleResize = () => {
|
||||
windowWidth.value = window.innerWidth
|
||||
if (gridApi.value) {
|
||||
updateColumnVisibility()
|
||||
updatePagination()
|
||||
setTimeout(() => {
|
||||
if (gridApi.value && gridApi.value.sizeColumnsToFit) {
|
||||
gridApi.value.sizeColumnsToFit()
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
windowWidth.value = window.innerWidth
|
||||
if (gridApi.value) {
|
||||
updateColumnVisibility()
|
||||
updatePagination()
|
||||
setTimeout(() => {
|
||||
if (gridApi.value && gridApi.value.sizeColumnsToFit) {
|
||||
gridApi.value.sizeColumnsToFit()
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
|
||||
const exportToPDF = () => {
|
||||
if (!gridApi.value) {
|
||||
console.error('Grid API not available')
|
||||
return
|
||||
}
|
||||
if (!gridApi.value) {
|
||||
console.error('Grid API not available')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const doc = new jsPDF()
|
||||
const rowDataForPDF = []
|
||||
const headers = []
|
||||
|
||||
columnDefs.value.forEach(col => {
|
||||
if (col.headerName && col.field && col.field !== 'action') {
|
||||
headers.push(col.headerName)
|
||||
}
|
||||
})
|
||||
|
||||
gridApi.value.forEachNodeAfterFilterAndSort(node => {
|
||||
const row = []
|
||||
columnDefs.value.forEach(col => {
|
||||
if (col.field && col.field !== 'action') {
|
||||
let value = node.data[col.field] || ''
|
||||
|
||||
if (col.field === 'salary' && value) {
|
||||
value = `$${Math.floor(Number(value)).toLocaleString()}`
|
||||
} else if (col.field === 'startDate' && value) {
|
||||
const date = new Date(value)
|
||||
if (!isNaN(date.getTime())) {
|
||||
const day = date.getDate().toString().padStart(2, '0')
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0')
|
||||
const year = date.getFullYear()
|
||||
value = `${day}/${month}/${year}`
|
||||
}
|
||||
} else if (col.field === 'status') {
|
||||
const statusMap = {
|
||||
0: 'Applied',
|
||||
1: 'Current',
|
||||
2: 'Professional',
|
||||
3: 'Rejected',
|
||||
4: 'Resigned'
|
||||
}
|
||||
value = statusMap[value] || 'Applied'
|
||||
}
|
||||
|
||||
row.push(value)
|
||||
}
|
||||
})
|
||||
rowDataForPDF.push(row)
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [headers],
|
||||
body: rowDataForPDF,
|
||||
styles: {
|
||||
fontSize: 8,
|
||||
cellPadding: 2
|
||||
},
|
||||
headStyles: {
|
||||
fillColor: [41, 128, 185],
|
||||
textColor: 255,
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
alternateRowStyles: {
|
||||
fillColor: [245, 245, 245]
|
||||
},
|
||||
margin: { top: 20 }
|
||||
})
|
||||
|
||||
doc.save(`data-table-${new Date().toISOString().split('T')[0]}.pdf`)
|
||||
console.log('PDF exported successfully')
|
||||
} catch (error) {
|
||||
console.error('Error exporting PDF:', error)
|
||||
}
|
||||
try {
|
||||
const doc = new jsPDF()
|
||||
const rowDataForPDF = []
|
||||
const headers = []
|
||||
|
||||
columnDefs.value.forEach(col => {
|
||||
if (col.headerName && col.field && col.field !== 'action') {
|
||||
headers.push(col.headerName)
|
||||
}
|
||||
})
|
||||
|
||||
gridApi.value.forEachNodeAfterFilterAndSort(node => {
|
||||
const row = []
|
||||
columnDefs.value.forEach(col => {
|
||||
if (col.field && col.field !== 'action') {
|
||||
let value = node.data[col.field] || ''
|
||||
row.push(value)
|
||||
}
|
||||
})
|
||||
rowDataForPDF.push(row)
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [headers],
|
||||
body: rowDataForPDF,
|
||||
styles: {
|
||||
fontSize: 8,
|
||||
cellPadding: 2
|
||||
},
|
||||
headStyles: {
|
||||
fillColor: [41, 128, 185],
|
||||
textColor: 255,
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
alternateRowStyles: {
|
||||
fillColor: [245, 245, 245]
|
||||
},
|
||||
margin: { top: 20 }
|
||||
})
|
||||
|
||||
doc.save(`data-table-${new Date().toISOString().split('T')[0]}.pdf`)
|
||||
emit('export-completed', 'pdf')
|
||||
} catch (error) {
|
||||
console.error('Error exporting PDF:', error)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card class="elevation-2">
|
||||
<DataTableHeader
|
||||
:is-mobile="isMobile"
|
||||
:is-tablet="isTablet"
|
||||
:quick-filter="quickFilter"
|
||||
@update:quick-filter="handleQuickFilterUpdate"
|
||||
@export-csv="exportToCSV"
|
||||
@export-excel="exportToExcel"
|
||||
@export-pdf="exportToPDF"
|
||||
<v-card class="elevation-2">
|
||||
<v-overlay
|
||||
v-model="isLoading"
|
||||
contained
|
||||
class="align-center justify-center"
|
||||
>
|
||||
<v-progress-circular
|
||||
indeterminate
|
||||
size="64"
|
||||
color="primary"
|
||||
></v-progress-circular>
|
||||
</v-overlay>
|
||||
|
||||
<DataTableHeader
|
||||
v-if="enableSearch || enableExport"
|
||||
:is-mobile="isMobile"
|
||||
:is-tablet="isTablet"
|
||||
:quick-filter="quickFilter"
|
||||
:enable-search="enableSearch"
|
||||
:enable-export="enableExport"
|
||||
@update:quick-filter="handleQuickFilterUpdate"
|
||||
@export-csv="exportToCSV"
|
||||
@export-excel="exportToExcel"
|
||||
@export-pdf="exportToPDF"
|
||||
/>
|
||||
|
||||
<v-divider v-if="enableSearch || enableExport" />
|
||||
|
||||
<v-card-text class="pa-0">
|
||||
<AgGridVue
|
||||
class="vuetify-grid ag-theme-alpine-dark"
|
||||
:style="`height:${isMobile ? mobileHeight : height}; width:100%`"
|
||||
:columnDefs="columnDefs"
|
||||
:rowData="processedData"
|
||||
:defaultColDef="defaultColDef"
|
||||
:gridOptions="gridOptions"
|
||||
@grid-ready="onGridReady"
|
||||
@cell-value-changed="onCellValueChanged"
|
||||
/>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider />
|
||||
<UserDetailsDialog
|
||||
v-if="enableEdit"
|
||||
v-model="showDetailsDialog"
|
||||
:selected-row-data="selectedRowData"
|
||||
:columns="columnDefs"
|
||||
:is-mobile="isMobile"
|
||||
@save-user="handleSaveUser"
|
||||
/>
|
||||
|
||||
<v-card-text class="pa-0">
|
||||
<AgGridVue
|
||||
class="vuetify-grid ag-theme-alpine-dark"
|
||||
:style="`height:${isMobile ? '400px' : '600px'}; width:100%`"
|
||||
:columnDefs="columnDefs"
|
||||
:rowData="rowData"
|
||||
:defaultColDef="defaultColDef"
|
||||
:gridOptions="gridOptions"
|
||||
@grid-ready="onGridReady"
|
||||
|
||||
/>
|
||||
</v-card-text>
|
||||
|
||||
<UserDetailsDialog
|
||||
v-model="showDetailsDialog"
|
||||
:selected-row-data="selectedRowData"
|
||||
:is-mobile="isMobile"
|
||||
@save-user="handleSaveUser"
|
||||
/>
|
||||
|
||||
<ConfirmDeleteDialog
|
||||
v-model="showDeleteDialog"
|
||||
:selected-row-data="deleteRowData"
|
||||
:is-mobile="isMobile"
|
||||
@confirm="confirmDelete"
|
||||
@cancel="cancelDelete"
|
||||
/>
|
||||
</v-card>
|
||||
<ConfirmDeleteDialog
|
||||
v-if="enableDelete"
|
||||
v-model="showDeleteDialog"
|
||||
:selected-row-data="deleteRowData"
|
||||
:columns="columnDefs"
|
||||
:is-mobile="isMobile"
|
||||
@confirm="handleConfirmDelete"
|
||||
@cancel="cancelDelete"
|
||||
/>
|
||||
</v-card>
|
||||
</template>
|
||||
Reference in New Issue
Block a user