STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

updated layout and use new dropdown button

Browse Source
This commit is contained in:
James Collins
2023-02-20 17:01:20 +10:00
parent 5acf5e5297
commit 5cfcbacb80
1 changed files with 65 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
resources/js/views/dashboard/PostList.vue
View File

@@ -1,67 +1,70 @@
<template> <template>
<SMContainer permission="admin/posts"> <SMPage permission="admin/posts" class="sm-page-post-list">
<SMHeading heading="Posts" /> <template #container>
<SMMessage <SMHeading heading="Posts" />
v-if="formMessage.message" <SMMessage
:icon="formMessage.icon" v-if="formMessage.message"
:type="formMessage.type" :icon="formMessage.icon"
:message="formMessage.message" /> :type="formMessage.type"
<SMToolbar> :message="formMessage.message" />
<template #left> <SMToolbar>
<SMButton <template #left>
type="primary" <SMButton
label="Create Post" type="primary"
@click="handleCreate" /> label="Create Post"
</template> @click="handleCreate" />
<template #right> </template>
<input v-model="search" placeholder="Search" /> <template #right>
</template> <input v-model="search" placeholder="Search" />
</SMToolbar> </template>
</SMToolbar>
<EasyDataTable <EasyDataTable
v-model:server-options="serverOptions" v-model:server-options="serverOptions"
:server-items-length="serverItemsLength" :server-items-length="serverItemsLength"
:loading="formLoading" :loading="formLoading"
:headers="headers" :headers="headers"
:items="items" :items="items"
:search-value="search"> :search-value="search">
<template #loading> <template #loading>
<SMLoadingIcon /> <SMLoadingIcon />
</template> </template>
<template #item-title="item"> <template #item-title="item">
<router-link <router-link
:to="{ name: 'post-edit', params: { id: item.id } }" :to="{ name: 'post-edit', params: { id: item.id } }"
>{{ item.title }}</router-link >{{ item.title }}</router-link
> >
</template> </template>
<template #item-actions="item"> <template #item-actions="item">
<div class="action-wrapper"> <div class="action-wrapper">
<!-- <font-awesome-icon <SMButton
icon="fa-solid fa-pen-to-square" label="Edit"
@click="handleEdit(item)" /> :dropdown="{
<font-awesome-icon delete: 'Delete',
icon="fa-regular fa-trash-can" }"
@click="handleDelete(item)" /> --> @click="handleClick(item, $event)"></SMButton>
</div> </div>
</template> </template>
</EasyDataTable> </EasyDataTable>
</SMContainer> </template>
</SMPage>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch, reactive } from "vue"; import { ref, watch, reactive } from "vue";
import EasyDataTable from "vue3-easy-data-table";
import { SMDate } from "../../helpers/datetime"; import { SMDate } from "../../helpers/datetime";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import SMDialogConfirm from "../../components/dialogs/SMDialogConfirm.vue";
import { openDialog } from "vue3-promise-dialog"; import { openDialog } from "vue3-promise-dialog";
import { api } from "../../helpers/api"; import { api } from "../../helpers/api";
import { debounce } from "../../helpers/debounce";
import EasyDataTable from "vue3-easy-data-table";
import SMDialogConfirm from "../../components/dialogs/SMDialogConfirm.vue";
import SMToolbar from "../../components/SMToolbar.vue"; import SMToolbar from "../../components/SMToolbar.vue";
import SMButton from "../../components/SMButton.vue"; import SMButton from "../../components/SMButton.vue";
import { debounce } from "../../helpers/debounce";
import SMHeading from "../../components/SMHeading.vue"; import SMHeading from "../../components/SMHeading.vue";
import SMMessage from "../../components/SMMessage.vue"; import SMMessage from "../../components/SMMessage.vue";
import SMLoadingIcon from "../../components/SMLoadingIcon.vue"; import SMLoadingIcon from "../../components/SMLoadingIcon.vue";
import SMPage from "../../components/SMPage.vue";
const router = useRouter(); const router = useRouter();
const search = ref(""); const search = ref("");
@@ -90,6 +93,14 @@ const serverOptions = ref({
sortType: null, sortType: null,
}); });
const handleClick = (item, extra: string): void => {
if (extra.length == 0) {
handleEdit(item);
} else if (extra.toLowerCase() == "delete") {
handleDelete(item);
}
};
const loadFromServer = async () => { const loadFromServer = async () => {
formLoading.value = true; formLoading.value = true;
@@ -210,4 +221,8 @@ const handleDelete = async (item) => {
}; };
</script> </script>
<style lang="scss"></style> <style lang="scss">
.sm-page-post-list {
background-color: #f8f8f8;
}
</style>