102 lines
3.6 KiB
Vue
102 lines
3.6 KiB
Vue
<script>
|
|
import VTabulator from '@molecules/Tabulator/VTabulator.vue';
|
|
|
|
export default {
|
|
name: 'UsersManagerUsersTable',
|
|
components: {VTabulator},
|
|
props: {
|
|
usersList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
},
|
|
data() {
|
|
const editItem = (item) => this.editItem(item)
|
|
const deleteItem = (item) => this.deleteItem(item)
|
|
return {
|
|
rerenderStep: 3,
|
|
columns: [
|
|
{
|
|
field: "id",
|
|
title: "ID",
|
|
width: 100,
|
|
sorter: "number",
|
|
},
|
|
{
|
|
field: "first_name",
|
|
title: "First Name",
|
|
width: 150,
|
|
sorter: "string",
|
|
},
|
|
{
|
|
field: "last_name",
|
|
title: "Last Name",
|
|
width: 150,
|
|
sorter: "string",
|
|
},
|
|
{
|
|
field: "role",
|
|
title: "Role",
|
|
width: 150,
|
|
sorter: "string",
|
|
},
|
|
{
|
|
title: "Actions",
|
|
formatter: (cell) => {
|
|
const record = cell.getRow().getData();
|
|
const id = record.id;
|
|
return `
|
|
<button action="edit" class="text-white mr-2 text-xs bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-3 py-2 text-center mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-900">
|
|
<i action="edit" class="ri-pencil-line"></i>
|
|
</button>
|
|
<input action="toggle-remove" type="checkbox" id="remove-option-${id}" value="" class="hidden peer" required="">
|
|
<label for="remove-option-${id}" class="peer-checked:hidden cursor-pointer inline-text text-white text-xs bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 font-medium rounded-full text-sm px-3 py-2 text-center mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
|
|
>
|
|
<i class="ri-delete-bin-line"></i>
|
|
</label>
|
|
<label action="remove" for="remove-option-${id}" class="hidden cursor-pointer mr-2 peer-checked:flex text-white text-xs bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 font-medium rounded-full text-sm px-3 py-2 text-center mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
|
|
>
|
|
<i action="remove" class="ri-check-line"></i>
|
|
</label>
|
|
<label action="close-remove" for="remove-option-${id}" class="hidden cursor-pointer peer-checked:flex text-white text-xs bg-gray-700 hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-full text-sm px-3 py-2 text-center mb-2 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-900">
|
|
<i class="ri-close-line"></i>
|
|
</label>
|
|
|
|
|
|
`;
|
|
},
|
|
cellClick: function(e, cell) {
|
|
const action = e.target.getAttribute('action');
|
|
if (action === 'edit') {
|
|
editItem(cell.getRow().getData());
|
|
} else if (action === 'remove') {
|
|
deleteItem(cell.getRow().getData());
|
|
}
|
|
},
|
|
}],
|
|
}
|
|
},
|
|
methods: {
|
|
editItem(item) {
|
|
console.log('Edit item:', item);
|
|
},
|
|
deleteItem(item) {
|
|
console.log('Delete item:', item);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex flex-col max-h-[70vh] mb-14"
|
|
>
|
|
<div>
|
|
<VTabulator
|
|
:dataSource="usersList"
|
|
:columns="columns"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|