first commit
This commit is contained in:
Yusron alamsyah
@@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import Shadow from "@/components/style-components/shadow/Shadow.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<Shadow/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import Heading from "@/components/style-components/typography/Heading.vue";
|
||||
import Default from "@/components/style-components/typography/DefaultText.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
<UiParentCard title="Default Text">
|
||||
<Heading/>
|
||||
</UiParentCard>
|
||||
<UiParentCard title="Default Text" class="mt-6">
|
||||
<Default/>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,57 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
// common components
|
||||
import BaseBreadcrumb from '~/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '~/components/shared/UiParentCard.vue';
|
||||
|
||||
//Table
|
||||
import Table1 from '~/components/table/Table1.vue';
|
||||
import Table2 from '~/components/table/Table2.vue';
|
||||
import Table3 from '~/components/table/Table3.vue';
|
||||
import Table4 from '~/components/table/Table4.vue';
|
||||
import Table5 from '~/components/table/Table5.vue';
|
||||
|
||||
definePageMeta({
|
||||
middleware: ["auth-menu"],
|
||||
role: ['super_admin','admin','user','staff'],
|
||||
//permission: ['view','update','create','delete'],
|
||||
});
|
||||
|
||||
// template breadcrumb
|
||||
const page = ref({ title: 'Basic Table' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Basic Table',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<!-- Table Basic -->
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Basic Table">
|
||||
<!--Basic Table 1-->
|
||||
<Table1/>
|
||||
<!--Basic Table 2-->
|
||||
<Table2/>
|
||||
<!--Basic Table 3-->
|
||||
<Table3/>
|
||||
<!--Basic Table 4-->
|
||||
<Table4/>
|
||||
<!--Basic Table 5-->
|
||||
<Table5/>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,84 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
// common components
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import { darkTableData } from '@/_mockApis/components/table/basicTables';
|
||||
// template breadcrumb
|
||||
const page = ref({ title: 'Dark Table' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Dark Table',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<!-- Table Dark -->
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Dark Table">
|
||||
<v-card class="border" elevation="0">
|
||||
<v-table theme="dark" class="month-table dark-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-h6 ps-6">Users</th>
|
||||
<th class="text-h6">Project Name</th>
|
||||
<th class="text-h6">Team</th>
|
||||
<th class="text-h6">Status</th>
|
||||
<th class="text-h6">Budget</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in darkTableData" :key="item.name" class="month-item">
|
||||
<td class="ps-6">
|
||||
<div class="d-flex gap-3 align-center">
|
||||
<v-avatar size="40">
|
||||
<img :src="item.avatar" alt="avatar" height="40" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<h6 class="text-h6">{{ item.name }}</h6>
|
||||
<div class="text-body-1 textSecondary">{{ item.post }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<h6 class="text-h6 font-weight-medium text-medium-emphasis">{{ item.pname }}</h6>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-center">
|
||||
<div class="ml-2 d-flex flex-row-reverse">
|
||||
<v-avatar v-for="team in item.teams" :key="team.id" size="35"
|
||||
:class="'ml-n2 avtar-border bg-' + team.color">
|
||||
{{ team.text }}
|
||||
</v-avatar>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<v-chip rounded="sm" :color="item.statuscolor" size="small"
|
||||
label>{{
|
||||
item.status
|
||||
}}</v-chip>
|
||||
</td>
|
||||
<td>
|
||||
<h6 class="text-h6">{{ item.budget }}</h6>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</v-card>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,79 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
// common components
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import { tableDensityData } from '@/_mockApis/components/table/basicTables';
|
||||
// template breadcrumb
|
||||
const page = ref({ title: 'Density Table' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Density Table',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<!-- Table Density -->
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Density Table">
|
||||
<!-- <v-table > -->
|
||||
<v-card class="border" elevation="0">
|
||||
<v-table class="month-table" density="compact">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-h6 ps-6">User</th>
|
||||
<th class="text-h6">Project Name</th>
|
||||
<th class="text-h6">Users</th>
|
||||
<th class="text-h6">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in tableDensityData" :key="item.name" class="month-item">
|
||||
<td class="ps-6">
|
||||
<div class="d-flex align-center">
|
||||
<v-avatar size="40">
|
||||
<img :src="item.avatar" alt="avatar" height="40" />
|
||||
</v-avatar>
|
||||
<div class="ml-4">
|
||||
<h6 class="text-h6">{{ item.name }}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-subtitle-1 text-medium-emphasis">{{ item.post }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-center">
|
||||
<div class="ml-2 d-flex flex-row-reverse">
|
||||
<v-avatar v-for="user in item.users" :key="user.id" size="40" class="ml-n2 avtar-border">
|
||||
<img :src="user.icon" alt="avatar" height="40" />
|
||||
</v-avatar>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<v-chip rounded="sm" class="font-weight-bold " :color="item.statuscolor" size="small">
|
||||
{{ item.status }}
|
||||
</v-chip>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</v-card>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,44 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
// common components
|
||||
//import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
|
||||
//Table
|
||||
import EditableTable from '~/components/table/EditableTable.vue';
|
||||
|
||||
definePageMeta({
|
||||
middleware: ["auth-menu"],
|
||||
role: ['super_admin','admin','user','staff'],
|
||||
//permission: ['view','update','create','delete'],
|
||||
});
|
||||
|
||||
// template breadcrumb
|
||||
const page = ref({ title: 'Editable Table' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Editable Table',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<!-- Table Editable -->
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Editable Table">
|
||||
<EditableTable />
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,90 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
// common components
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import {tableFixedHeaderData} from '@/_mockApis/components/table/basicTables';
|
||||
// template breadcrumb
|
||||
const page = ref({ title: 'Fixed Header Table' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Fixed Header Table',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<!-- Table Header Fixed -->
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Header Fixed Table">
|
||||
<v-card class="border" elevation="0">
|
||||
<v-table class="month-table" fixed-header height="400px">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-h6 ps-6">Customer</th>
|
||||
<th class="text-h6">Status</th>
|
||||
<th class="text-h6">Email Address</th>
|
||||
<th class="text-h6">Teams</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in tableFixedHeaderData" :key="item.name" class="month-item">
|
||||
<td class=" ps-6">
|
||||
<div class="d-flex gap-3 align-center">
|
||||
<v-avatar size="40">
|
||||
<img :src="item.avatar" alt="avatar" height="40" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<h6 class="text-h6">{{ item.name }}</h6>
|
||||
<div class="text-body-1 textSecondary">{{ item.handle }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<v-chip rounded="sm" v-if="item.statusoffline" class="font-weight-bold " :color="item.statuscolor" size="small">
|
||||
<ClockHour4Icon size="15" class="mr-1" />
|
||||
{{ item.status }}
|
||||
</v-chip>
|
||||
|
||||
<v-chip rounded="sm" v-else class="font-weight-bold " :color="item.statuscolor" size="small">
|
||||
<CircleIcon size="15" class="mr-1" />
|
||||
{{ item.status }}
|
||||
</v-chip>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-subtitle-1 text-medium-emphasis">{{ item.email }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-center">
|
||||
<div class="d-flex gap-2">
|
||||
<v-chip
|
||||
v-for="team in item.teams"
|
||||
:key="team.status"
|
||||
rounded="sm"
|
||||
:class="'font-weight-bold bg-' + team.statuscolor"
|
||||
size="small"
|
||||
>
|
||||
{{ team.status }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</v-card>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,95 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
// common components
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import { heightTableData, tableActionData} from '@/_mockApis/components/table/basicTables';
|
||||
// template breadcrumb
|
||||
const page = ref({ title: 'Height Table' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Height Table',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<!-- Table Height -->
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Height Table">
|
||||
<v-card class="border" elevation="0">
|
||||
<v-table class="month-table" height="400px">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-h6 ps-6">Authors</th>
|
||||
<th class="text-h6">Courses</th>
|
||||
<th class="text-h6">Users</th>
|
||||
<th class="text-h6"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in heightTableData" :key="item.name" class="month-item">
|
||||
<td class="ps-6">
|
||||
<div class="d-flex gap-3 align-center">
|
||||
<v-avatar size="42" rounded="md">
|
||||
<img :src="item.avatar" alt="avatar" height="42" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<h6 class="text-subtitle-1 font-weight-bold">{{ item.name }}</h6>
|
||||
<div class="text-body-1 textSecondary mt-1">{{ item.handle }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-center">
|
||||
<div class="d-flex">
|
||||
<v-chip v-for="course in item.courses" :key="course.status" rounded="sm"
|
||||
class="mr-2" :color="course.statuscolor" size="small">
|
||||
{{ course.status }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-subtitle-1 text-medium-emphasis">{{ item.users }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<v-btn size="30" icon variant="flat" class="grey100">
|
||||
<v-avatar size="22">
|
||||
<DotsIcon size="20" color="grey100" />
|
||||
</v-avatar>
|
||||
<v-menu activator="parent">
|
||||
<v-list>
|
||||
<v-list-item value="action" v-for="list in tableActionData" :key="list.listtitle"
|
||||
hide-details min-height="38">
|
||||
<v-list-item-title>
|
||||
<v-avatar size="20" class="mr-2">
|
||||
<component :is="list.icon" stroke-width="2" size="20" />
|
||||
</v-avatar>
|
||||
{{ list.listtitle }}
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-btn>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</v-card>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,99 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import { BasicDatatables } from '@/_mockApis/components/datatable/dataTable';
|
||||
|
||||
|
||||
const page = ref({ title: 'Basic Data Tables' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Basic Data Tables',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
|
||||
/*Header Data*/
|
||||
const headers :any = ref([
|
||||
{ title: 'Name', align: 'start', key: 'name' },
|
||||
{ title: 'Project Name', align: 'start', key: 'project' },
|
||||
{ title: 'Post', align: 'start', key: 'post' },
|
||||
{ title: 'Status', align: 'start', key: 'status' },
|
||||
{ title: 'Budget', align: 'end', key: 'budget' },
|
||||
])
|
||||
|
||||
const expanded = ref();
|
||||
const headersExpand :any = ref([
|
||||
{ title: 'Name', align: 'start', key: 'name', sortable: false, },
|
||||
{ title: 'Project Name', align: 'start', key: 'project' },
|
||||
{ title: 'Post', align: 'start', key: 'post' },
|
||||
{ title: 'Status', align: 'start', key: 'status' },
|
||||
{ title: 'Budget', align: 'end', key: 'budget' },
|
||||
{ title: '', key: 'data-table-expand' },
|
||||
])
|
||||
|
||||
|
||||
/*for status color*/
|
||||
function getColor(status: string) {
|
||||
if (status == 'Active') return '#13DEB9'
|
||||
else if (status == 'Cancel') return '#FA896B'
|
||||
else if (status == 'Completed') return '#5D87FF'
|
||||
else return '#FFAE1F'
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Basic Table">
|
||||
<v-data-table items-per-page="5" :headers="headers" :items="BasicDatatables" item-value="name"
|
||||
class="border rounded-md datatabels">
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
|
||||
<UiParentCard title="Selection" class="mt-6 pb-0">
|
||||
<v-data-table items-per-page="5" :headers="headers" :items="BasicDatatables" item-value="name" show-select
|
||||
class="border rounded-md datatabels">
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
|
||||
<UiParentCard title="Density" class="mt-6">
|
||||
<v-data-table items-per-page="5" :headers="headers" :items="BasicDatatables" item-value="name"
|
||||
density="compact" class="border rounded-md datatabels">
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
|
||||
<UiParentCard title="Item" class="mt-6">
|
||||
<v-data-table items-per-page="5" :headers="headers" :items="BasicDatatables" item-value="name"
|
||||
class="border rounded-md datatabels">
|
||||
<template v-slot:item.status="{ item }">
|
||||
<v-chip :color="getColor(item.status)">
|
||||
{{ item.status }}
|
||||
</v-chip>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
|
||||
<UiParentCard title="Expandable Rows" class="mt-6">
|
||||
<v-data-table v-model:expanded="expanded" :headers="headersExpand" :items="BasicDatatables"
|
||||
item-value="name" show-expand class="border rounded-md datatabels">
|
||||
<template v-slot:expanded-row="{ columns, item }">
|
||||
<tr>
|
||||
<td :colspan="columns.length">
|
||||
More info about {{ item.name }}
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,296 @@
|
||||
<script setup>
|
||||
import { computed, nextTick, ref, watch } from 'vue';
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { useHakAksesStore } from '@/stores/sidebarMenuAkses/useMenuAksesStore'
|
||||
import { usePermission } from '@/composables/sidebarMenu/useSidebarAkses'
|
||||
import { ca } from 'vuetify/locale';
|
||||
|
||||
|
||||
definePageMeta({
|
||||
middleware: ["auth-menu"],
|
||||
role: ['super_admin','admin','user','staff'],
|
||||
//permission: ['view','update','create','delete'],
|
||||
});
|
||||
|
||||
|
||||
|
||||
const canAction = usePermission(useRoute().path); // cek permission halaman
|
||||
const canAkses = canAction.canAkses;
|
||||
if(canAkses?.includes('view')){
|
||||
console.log('permision halaman',canAkses);
|
||||
}
|
||||
|
||||
const page = ref({ title: 'CRUD Table' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'CRUD Table',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
|
||||
const dialog = ref(false)
|
||||
const dialogDelete = ref(false)
|
||||
const headers = ref([
|
||||
{
|
||||
title: 'Dessert (100g serving)',
|
||||
align: 'start',
|
||||
sortable: false,
|
||||
key: 'name',
|
||||
},
|
||||
{ title: 'Calories', key: 'calories' },
|
||||
{ title: 'Fat (g)', key: 'fat' },
|
||||
{ title: 'Carbs (g)', key: 'carbs' },
|
||||
{ title: 'Protein (g)', key: 'protein' },
|
||||
{ title: 'Actions', key: 'actions', sortable: false },
|
||||
])
|
||||
const desserts = ref([])
|
||||
const editedIndex = ref(-1)
|
||||
const editedItem = ref({
|
||||
name: '',
|
||||
calories: 0,
|
||||
fat: 0,
|
||||
carbs: 0,
|
||||
protein: 0,
|
||||
})
|
||||
const defaultItem = ref({
|
||||
name: '',
|
||||
calories: 0,
|
||||
fat: 0,
|
||||
carbs: 0,
|
||||
protein: 0,
|
||||
})
|
||||
const formTitle = computed(() => {
|
||||
return editedIndex.value === -1 ? 'New Item' : 'Edit Item'
|
||||
})
|
||||
function initialize() {
|
||||
desserts.value = [
|
||||
{
|
||||
name: 'Frozen Yogurt',
|
||||
calories: 159,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
name: 'Ice cream sandwich',
|
||||
calories: 237,
|
||||
fat: 9,
|
||||
carbs: 37,
|
||||
protein: 4.3,
|
||||
},
|
||||
{
|
||||
name: 'Eclair',
|
||||
calories: 262,
|
||||
fat: 16,
|
||||
carbs: 23,
|
||||
protein: 6,
|
||||
},
|
||||
{
|
||||
name: 'Cupcake',
|
||||
calories: 305,
|
||||
fat: 3.7,
|
||||
carbs: 67,
|
||||
protein: 4.3,
|
||||
},
|
||||
{
|
||||
name: 'Gingerbread',
|
||||
calories: 356,
|
||||
fat: 16,
|
||||
carbs: 49,
|
||||
protein: 3.9,
|
||||
},
|
||||
{
|
||||
name: 'Jelly bean',
|
||||
calories: 375,
|
||||
fat: 0,
|
||||
carbs: 94,
|
||||
protein: 0,
|
||||
},
|
||||
{
|
||||
name: 'Lollipop',
|
||||
calories: 392,
|
||||
fat: 0.2,
|
||||
carbs: 98,
|
||||
protein: 0,
|
||||
},
|
||||
{
|
||||
name: 'Honeycomb',
|
||||
calories: 408,
|
||||
fat: 3.2,
|
||||
carbs: 87,
|
||||
protein: 6.5,
|
||||
},
|
||||
{
|
||||
name: 'Donut',
|
||||
calories: 452,
|
||||
fat: 25,
|
||||
carbs: 51,
|
||||
protein: 4.9,
|
||||
},
|
||||
{
|
||||
name: 'KitKat',
|
||||
calories: 518,
|
||||
fat: 26,
|
||||
carbs: 65,
|
||||
protein: 7,
|
||||
},
|
||||
]
|
||||
}
|
||||
function editItem(item) {
|
||||
editedIndex.value = desserts.value.indexOf(item)
|
||||
editedItem.value = Object.assign({}, item)
|
||||
dialog.value = true
|
||||
}
|
||||
function deleteItem(item) {
|
||||
editedIndex.value = desserts.value.indexOf(item)
|
||||
editedItem.value = Object.assign({}, item)
|
||||
dialogDelete.value = true
|
||||
}
|
||||
function deleteItemConfirm() {
|
||||
desserts.value.splice(editedIndex.value, 1)
|
||||
closeDelete()
|
||||
}
|
||||
function close() {
|
||||
dialog.value = false
|
||||
nextTick(() => {
|
||||
editedItem.value = Object.assign({}, defaultItem.value)
|
||||
editedIndex.value = -1
|
||||
})
|
||||
}
|
||||
function closeDelete() {
|
||||
dialogDelete.value = false
|
||||
nextTick(() => {
|
||||
editedItem.value = Object.assign({}, defaultItem.value)
|
||||
editedIndex.value = -1
|
||||
})
|
||||
}
|
||||
function save() {
|
||||
if (editedIndex.value > -1) {
|
||||
Object.assign(desserts.value[editedIndex.value], editedItem.value)
|
||||
} else {
|
||||
desserts.value.push(editedItem.value)
|
||||
}
|
||||
close()
|
||||
}
|
||||
watch(dialog, val => {
|
||||
val || close()
|
||||
})
|
||||
watch(dialogDelete, val => {
|
||||
val || closeDelete()
|
||||
})
|
||||
initialize()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<!-- <SharedBaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></SharedBaseBreadcrumb> -->
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Crud Table">
|
||||
<v-data-table class="border rounded-md datatabels" :headers="headers" :items="desserts" :sort-by="[{ key: 'calories', order: 'asc' }]">
|
||||
<template v-slot:top>
|
||||
<v-toolbar class="bg-lightprimary" flat>
|
||||
<v-toolbar-title>My Crud Table</v-toolbar-title>
|
||||
<v-divider class="mx-4" inset vertical></v-divider>
|
||||
<v-spacer></v-spacer>
|
||||
<v-dialog v-model="dialog" max-width="500px">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn :disabled="!canAkses?.includes('create')" color="primary" variant="flat" dark v-bind="props" >Add New Item</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title class="pa-4 bg-primary">
|
||||
<span class="text-h5">{{ formTitle }}</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container class="px-0">
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field v-model="editedItem.name"
|
||||
label="Dessert name"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field v-model="editedItem.calories"
|
||||
label="Calories"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field v-model="editedItem.fat" label="Fat (g)"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field v-model="editedItem.carbs"
|
||||
label="Carbs (g)"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field v-model="editedItem.protein"
|
||||
label="Protein (g)"></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="error" variant="flat" dark @click="close">
|
||||
Cancel
|
||||
</v-btn>
|
||||
<v-btn color="primary" variant="flat" dark @click="save">
|
||||
Save
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<v-dialog v-model="dialogDelete" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title class="text-h5 text-center py-6">Are you sure you want to delete this item?</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="error" variant="flat" dark @click="closeDelete">Cancel</v-btn>
|
||||
<v-btn color="primary" variant="flat" dark @click="deleteItemConfirm">OK</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<div class="d-flex gap-3">
|
||||
<Icon
|
||||
v-show="canAkses?.includes('update')"
|
||||
icon="solar:pen-new-square-broken"
|
||||
height="20"
|
||||
class="text-primary cursor-pointer"
|
||||
size="small"
|
||||
@click="editItem(item)"
|
||||
|
||||
|
||||
/>
|
||||
<Icon
|
||||
v-show="canAkses?.includes('delete')"
|
||||
icon="solar:trash-bin-minimalistic-linear"
|
||||
height="20"
|
||||
class="text-error cursor-pointer"
|
||||
size="small"
|
||||
@click="deleteItem(item)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:no-data>
|
||||
<v-btn color="primary" @click="initialize">
|
||||
Reset
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -0,0 +1,109 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import { BasicDatatables, UppercaseFilter,Filtrable } from '@/_mockApis/components/datatable/dataTable';
|
||||
const page = ref({ title: 'Data Table Filtering' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Data Table Filtering',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
|
||||
/*Header Data*/
|
||||
const search = ref();
|
||||
const customsearch = ref();
|
||||
const headers : any = ref([
|
||||
{ title: 'Name', align: 'start', key: 'name' },
|
||||
{ title: 'Project Name', align: 'start', key: 'project' },
|
||||
{ title: 'Post', align: 'start', key: 'post' },
|
||||
{ title: 'Status', align: 'start', key: 'status' },
|
||||
{ title: 'Budget', align: 'end', key: 'budget' },
|
||||
])
|
||||
|
||||
const filtrable = ref('')
|
||||
|
||||
function filterOnlyCapsText(value: { toString: () => string; } | null, query: string | null, item: any) {
|
||||
return value != null &&
|
||||
query != null &&
|
||||
typeof value === 'string' &&
|
||||
value.toString().toLocaleUpperCase().indexOf(query) !== -1
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Basic Filter">
|
||||
<v-text-field v-model="search" append-inner-icon="mdi-magnify" label="Search" single-line hide-details
|
||||
class="mb-5" />
|
||||
<v-data-table items-per-page="5" :headers="headers" :items="BasicDatatables" :search="search"
|
||||
class="border rounded-md datatabels">
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
|
||||
<UiParentCard title="Custom Filter" class="mt-6">
|
||||
<v-text-field v-model="customsearch" append-inner-icon="mdi-magnify" label="Search (UPPER CASE ONLY)"
|
||||
single-line hide-details class="mb-5" />
|
||||
<v-data-table items-per-page="5" :headers="headers" :items="UppercaseFilter" :search="customsearch"
|
||||
:custom-filter="filterOnlyCapsText" class="border rounded-md datatabels">
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
|
||||
<UiParentCard title="Filterable" class="mt-6">
|
||||
|
||||
<v-card flat>
|
||||
<v-card-title class="d-flex align-center px-0 pb-3">
|
||||
|
||||
My Table
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-text-field v-model="filtrable" prepend-inner-icon="mdi-magnify" density="compact" label="Search"
|
||||
single-line flat hide-details variant="solo-filled"></v-text-field>
|
||||
</v-card-title>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-data-table v-model:search="filtrable" :items="Filtrable">
|
||||
<template v-slot:header.stock>
|
||||
<div class="text-end">Stock</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.image="{ item }">
|
||||
<v-card class="my-2" elevation="2">
|
||||
<v-img :src="`${item.image}`"
|
||||
height="80" class="rounded-md" cover></v-img>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.rating="{ item }">
|
||||
<v-rating :model-value="item.rating" color="warning" density="compact" size="small"
|
||||
readonly></v-rating>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.stock="{ item }">
|
||||
<div class="text-end">
|
||||
<v-chip :color="item.stock ? 'success' : 'error'"
|
||||
:text="item.stock ? 'In stock' : 'Out of stock'" class="text-uppercase" label
|
||||
size="small"></v-chip>
|
||||
</div>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card>
|
||||
|
||||
</UiParentCard>
|
||||
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import {BasicDatatables} from '@/_mockApis/components/datatable/dataTable';
|
||||
const page = ref({ title: 'Data Tables Grouping' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Data Tables Grouping',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
|
||||
/*Header Data*/
|
||||
const sortBy : any = ref([
|
||||
{ key: 'name', order: 'asc' }
|
||||
])
|
||||
const groupBy : any = ref([
|
||||
{ key: 'status', order: 'asc' }
|
||||
])
|
||||
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Grouping">
|
||||
<v-data-table items-per-page="5" :items="BasicDatatables" item-value="name"
|
||||
:group-by="groupBy" :sort-by="sortBy"
|
||||
class="border rounded-md datatabels">
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import { BasicDatatables } from '@/_mockApis/components/datatable/dataTable';
|
||||
|
||||
const page = ref({ title: 'Data Table Headers' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Data Table Headers',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Column Slot">
|
||||
<v-data-table items-per-page="5" :items="BasicDatatables" item-value="name"
|
||||
class="border rounded-md datatabels">
|
||||
<template v-slot:column.name="{ column }">
|
||||
{{ column.title.toUpperCase() }}
|
||||
</template>
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
<script setup lang="ts">
|
||||
import { ref,computed } from 'vue';
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import { BasicDatatables } from '@/_mockApis/components/datatable/dataTable';
|
||||
const page = ref({ title: 'Data Table Pagination' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Data Table Pagination',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
|
||||
|
||||
|
||||
/*Header Data*/
|
||||
const pagination = ref(1);
|
||||
const itemsPerPage = ref(5);
|
||||
const headers : any = ref([
|
||||
{ title: 'Name', align: 'start', key: 'name' },
|
||||
{ title: 'Project Name', align: 'start', key: 'project' },
|
||||
{ title: 'Post', align: 'start', key: 'post' },
|
||||
{ title: 'Status', align: 'start', key: 'status' },
|
||||
{ title: 'Budget', align: 'end', key: 'budget' },
|
||||
|
||||
])
|
||||
|
||||
/*page count*/
|
||||
const pageCount = Math.ceil(BasicDatatables.length / itemsPerPage.value)
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="External Pagination">
|
||||
<v-data-table :items-per-page="itemsPerPage" :headers="headers" :items="BasicDatatables" v-model:page="pagination"
|
||||
hide-default-footer class="border rounded-md datatabels">
|
||||
<template v-slot:bottom>
|
||||
<div class="text-center pt-2 mb-3 px-3">
|
||||
<v-pagination v-model="pagination" :length="pageCount"></v-pagination>
|
||||
<v-text-field :model-value="itemsPerPage" class="pa-2" label="Items per page" type="number"
|
||||
min="-1" max="15" hide-details
|
||||
@update:model-value="itemsPerPage = parseInt($event, 10)"></v-text-field>
|
||||
</div>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import { SelectedRow, BasicDatatables } from '@/_mockApis/components/datatable/dataTable';
|
||||
const page = ref({ title: 'Data Tables Selection' });
|
||||
const selected = ref();
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Data Tables Selection',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
|
||||
/*Header Data*/
|
||||
const headers :any = ref([
|
||||
{ title: 'Name', align: 'start', key: 'name' },
|
||||
{ title: 'Project Name', align: 'start', key: 'project' },
|
||||
{ title: 'Post', align: 'start', key: 'post' },
|
||||
{ title: 'Status', align: 'start', key: 'status' },
|
||||
{ title: 'Budget', align: 'end', key: 'budget' },
|
||||
])
|
||||
</script>
|
||||
<template>
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Basic Selection" class="">
|
||||
<v-data-table items-per-page="5" :headers="headers" :items="BasicDatatables" item-value="name" show-select
|
||||
class="border rounded-md datatabels">
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
<UiParentCard title="Selected Values" class="mt-6">
|
||||
<v-data-table items-per-page="5" :headers="headers" :items="BasicDatatables" item-value="name"
|
||||
v-model="selected" return-object show-select class="border rounded-md datatabels">
|
||||
</v-data-table>
|
||||
<v-card class="elevation-0 border mt-3 pa-4">
|
||||
<pre>{{ selected }}</pre>
|
||||
</v-card>
|
||||
</UiParentCard>
|
||||
<UiParentCard title="Selectable Rows" class="mt-6">
|
||||
<v-data-table items-per-page="5" :headers="headers" :items="SelectedRow" item-value="name"
|
||||
item-selectable="selectable" show-select class="border rounded-md datatabels">
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
<UiParentCard title="Select Strategies" class="mt-6">
|
||||
<v-data-table items-per-page="5" :headers="headers" :items="BasicDatatables" item-value="name"
|
||||
select-strategy="single" show-select class="border rounded-md datatabels">
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
<script setup >
|
||||
import { computed, ref } from 'vue';
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import { BasicDatatables } from '@/_mockApis/components/datatable/dataTable';
|
||||
const page = ref({ title: 'Data Table Slots' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Data Table Slots',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
|
||||
/*Header Data*/
|
||||
|
||||
const headers = ref([
|
||||
{ title: 'Name', align: 'start', key: 'name', sortable: false, },
|
||||
{ title: 'Project Name', align: 'start', key: 'project' },
|
||||
{ title: 'Post', align: 'start', key: 'post' },
|
||||
{ title: 'Status', align: 'start', key: 'status' },
|
||||
{ title: 'Budget', align: 'end', key: 'budget' },
|
||||
])
|
||||
</script>
|
||||
<template>
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Item Slot">
|
||||
<v-data-table :headers="headers" :items="BasicDatatables" item-value="name" class="border rounded-md datatabels">
|
||||
<template v-slot:header.id="{ item }">
|
||||
<tr>
|
||||
<td class="text-subtitle-1">{{ item.columns.name }}</td>
|
||||
<td class="text-subtitle-1">{{ item.columns.project }}</td>
|
||||
<td class="text-subtitle-1">{{ item.columns.post }}</td>
|
||||
<td class="text-subtitle-1">{{ item.columns.status }}</td>
|
||||
<td class="d-flex justify-end align-center text-subtitle-1">{{ item.columns.budget }}</td>
|
||||
</tr>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import { BasicDatatables } from '@/_mockApis/components/datatable/dataTable';
|
||||
const page = ref({ title: 'Data Table Sorting' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Data Table Sorting',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
|
||||
/*Header Data*/
|
||||
const sortBy:any = ref([
|
||||
{ key: 'name', order: 'desc' }
|
||||
])
|
||||
const headers : any = ref([
|
||||
{ title: 'Name', align: 'start', key: 'name', sortable: false },
|
||||
{ title: 'Project Name', align: 'start', key: 'project' },
|
||||
{ title: 'Post', align: 'start', key: 'post' },
|
||||
{ title: 'Status', align: 'start', key: 'status' },
|
||||
{ title: 'Budget', align: 'end', key: 'budget' },
|
||||
])
|
||||
</script>
|
||||
<template>
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Basic Sorting">
|
||||
<v-data-table items-per-page="5" :headers="headers" :items="BasicDatatables" item-value="name"
|
||||
v-model:sort-by="sortBy" class="border rounded-md datatabels">
|
||||
</v-data-table>
|
||||
<v-card class="mt-4 elevation-0 border mt-3 pa-4">
|
||||
<pre>{{ sortBy }}</pre>
|
||||
</v-card>
|
||||
</UiParentCard>
|
||||
<UiParentCard title="Multi Sorting" class="mt-6">
|
||||
<v-data-table items-per-page="5" :headers="headers" :items="BasicDatatables"
|
||||
:sort-by="[{ key: 'project', order: 'asc' }, { key: 'post', order: 'desc' }]" multi-sort
|
||||
class="border rounded-md datatabels">
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user