<ProjectDatatable
:table-data="projects"
:table-header="headerConfig"
:enable-items-per-page-dropdown="true"
>
....
<script lang="ts">
import { defineComponent, ref, onMounted, computed } from "vue";
import { Actions } from "@/store/enums/StoreEnums";
import { useStore } from "vuex";
import IProject from "@/core/data/projects";
import ProjectDatatable from "@/components/kt-datatable/ProjectDatatable.vue";
import KTNewProjectModal from "@/components/modals/forms/NewProjectModal.vue";
import { setCurrentPageBreadcrumbs } from "@/core/helpers/breadcrumb";
export default defineComponent({
name: "kt-project-list",
components: {
ProjectDatatable,
KTNewProjectModal
},
async setup() {
const headerConfig = ref([
{
name: "Project Name",
key: "project-name",
sortable: true,
},
{
name: "Project UUID",
key: "project-uuid",
sortable: true,
},
{
name: "Tags",
key: "tags",
sortable: true,
},
{
name: "Status",
key: "status",
sortable: true,
},
{
name: "Size",
key: "size",
sortable: true,
},
{
name: "Actions",
key: "actions",
},
]);
const tableData = ref<Array<typeof IProject>>([]);
const projects = computed<Array<typeof IProject>>(() => store.getters.currentProjects || []);
onMounted(() => {
setCurrentPageBreadcrumbs("Project List", ["Projects"]);
});
const store = useStore();
await store.dispatch(Actions.LIST_PROJECTS, {});
const search = ref<string>("");
const searchItems = async () => {
if (search.value !== "") {
await store.dispatch(Actions.LIST_PROJECTS, {
filter: [
{
field: "FILTER_FIELDS_NAME",
operation: "FILTER_OPERATION_CONTAINS",
value: search.value
}
]
});
} else {
await store.dispatch(Actions.LIST_PROJECTS, {});
}
};
return {
projects,
search,
searchItems,
headerConfig,
tableData
};
},
methods: {
limitTags: function (project) {
return project.tags.slice(0, 3)
},
projectStatusToColor: function (status: string) {
switch(status) {
case "STATUS_UNSPECIFIED": {
return "info"
}
case "STATUS_IN_PROGRESS": {
return "warning"
}
case "STATUS_AWAITING_FEEDBACK": {
return "primary"
}
case "STATUS_BLOCKED": {
return "danger"
}
case "STATUS_APPROVED": {
return "success"
}
case "STATUS_ARCHIVED": {
return "danger"
}
default: {
return "info"
}
}
},
projectStatusToStatus: function (status: string) {
switch(status) {
case "STATUS_UNSPECIFIED": {
return "Unspecified"
}
case "STATUS_IN_PROGRESS": {
return "In Progress"
}
case "STATUS_AWAITING_FEEDBACK": {
return "Awaiting Feedback"
}
case "STATUS_BLOCKED": {
return "Blocked"
}
case "STATUS_APPROVED": {
return "Approved"
}
case "STATUS_ARCHIVED": {
return "Archived"
}
default: {
return "Unspecified"
}
}
},
projectSizeToSize: function (size: string) {
switch(size) {
case "SIZE_UNSPECIFIED": {
return "Unspecified"
}
case "SIZE_SMALL": {
return "Small"
}
case "SIZE_MEDIUM": {
return "Medium"
}
case "SIZE_LARGE": {
return "Large"
}
case "SIZE_XLARGE": {
return "X-Large"
}
default: {
return "Unspecified"
}
}
},
}
});
</script>
const data = ref(props.tableData);
const data = computed(() => props.tableData);
const projects = computed<Array<IProject>>(() => {
return store.getters.currentProjects || [] as Array<IProject>
})
@Action
[Actions.LIST_PROJECTS](req: AxiosRequestConfig) {
return ApiService.post("/v1/projects/list", req)
.then(({ data }) => {
this.context.commit(Mutations.SET_PROJECTS, data.projects);
})
.catch(({ response }) => {
this.context.commit(Mutations.SET_ERROR, response.data);
});
}
<el-table :data="tableData" v-loading="loading">
<template #empty="scope">
<el-empty :image-size="200" />
</template>
<el-table-column type="index" sortable label="Sr#" />
<el-table-column prop="name" sortable label="Name"></el-table-column>
<el-table-column prop="email" sortable label="Email"></el-table-column>
<el-table-column prop="website" sortable label="Website"></el-table-column>
<el-table-column prop="action" label="Actions">
<template #default="scope">
<el-button type="text" size="small" @click.prevent="$router.push({ name: "edit", params: { id: scope.row.id } })" ><i class="bi bi-pencil-square"></i></el-button>
<el-button type="text" size="small" @click.prevent="remove(scope.row.id, scope.$index)"><i class="bi bi-trash"></i></el-button>
</templat<pre lang="html">