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

updated

Browse Source
This commit is contained in:
James Collins
2023-03-01 13:36:27 +10:00
parent 9600d1e7d1
commit 082e2fe2bd
1 changed files with 79 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
resources/js/views/dashboard/MediaList.vue
View File

@@ -1,47 +1,53 @@
<template> <template>
<SMPage permission="admin/media"> <SMPage permission="admin/media">
<h1>Media</h1> <template #container>
<h1>Media</h1>
<SMMessage <SMMessage
v-if="formMessage.message" v-if="formMessage.message"
:type="formMessage.type" :type="formMessage.type"
:message="formMessage.message" :message="formMessage.message"
:icon="formMessage.icon" /> :icon="formMessage.icon" />
<SMToolbar> <SMToolbar>
<template #left> <template #left>
<SMButton <!-- <SMButton
:to="{ name: 'media-upload' }" :to="{ name: 'media-upload' }"
type="primary" type="primary"
label="Upload Media" /> label="Upload Media" /> -->
</template> </template>
<template #right> <template #right>
<input v-model="search" placeholder="Search" /> <input v-model="search" placeholder="Search" />
</template> </template>
</SMToolbar> </SMToolbar>
<!-- @click-row="handleClickRow" --> <!-- @click-row="handleClickRow" -->
<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-size="item"> <template #item-size="item">
{{ bytesReadable(item.size) }} {{ bytesReadable(item.size) }}
</template> </template>
<template #item-actions="item"> <template #item-actions="item">
<div class="action-wrapper"> <div class="action-wrapper">
<SMFileLink :href="item.url" target="_blank" @click.stop="" <SMButton
><font-awesome-icon icon="cloud-download-outline" label="Edit"
/></SMFileLink> :dropdown="{
</div> download: 'Download',
</template> delete: 'Delete',
</EasyDataTable> }"
@click="handleClick(item, $event)"></SMButton>
</div>
</template>
</EasyDataTable>
</template>
</SMPage> </SMPage>
</template> </template>
@@ -57,6 +63,7 @@ import SMLoadingIcon from "../../components/SMLoadingIcon.vue";
import SMMessage from "../../components/SMMessage.vue"; import SMMessage from "../../components/SMMessage.vue";
import SMToolbar from "../../components/SMToolbar.vue"; import SMToolbar from "../../components/SMToolbar.vue";
import { api } from "../../helpers/api"; import { api } from "../../helpers/api";
import { UserResponse } from "../../helpers/api.types";
import { SMDate } from "../../helpers/datetime"; import { SMDate } from "../../helpers/datetime";
import { debounce } from "../../helpers/debounce"; import { debounce } from "../../helpers/debounce";
import { bytesReadable } from "../../helpers/types"; import { bytesReadable } from "../../helpers/types";
@@ -69,10 +76,10 @@ const userStore = useUserStore();
const headers = [ const headers = [
{ text: "Name", value: "title", sortable: true }, { text: "Name", value: "title", sortable: true },
{ text: "Size", value: "size", sortable: true }, { text: "Size", value: "size", sortable: true },
{ text: "Permission", value: "permission", sortable: true }, // { text: "Permission", value: "permission", sortable: true },
{ text: "Uploaded By", value: "username", sortable: true }, { text: "Uploaded By", value: "username", sortable: true },
{ text: "Created", value: "created_at", sortable: true }, { text: "Created", value: "created_at", sortable: true },
{ text: "Updated", value: "updated_at", sortable: true }, // { text: "Updated", value: "updated_at", sortable: true },
{ text: "Actions", value: "actions" }, { text: "Actions", value: "actions" },
]; ];
@@ -92,6 +99,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;
formMessage.type = "error"; formMessage.type = "error";
@@ -129,9 +144,18 @@ const loadFromServer = async () => {
items.value.forEach(async (row) => { items.value.forEach(async (row) => {
if (Object.keys(users).includes(row.user_id) === false) { if (Object.keys(users).includes(row.user_id) === false) {
await api.get(`users/${row.user_id}`).then((res) => { try {
users[row.user_id] = res.data.user.username; const userResult = await api.get({
}); url: "/users/{id}",
params: {
id: row.user_id,
},
});
const data = userResult.data as UserResponse;
users[row.user_id] = data.user.username;
} catch (error) {
users[row.user_id] = "Unknown";
}
} }
if (Object.keys(users).includes(row.user_id)) { if (Object.keys(users).includes(row.user_id)) {
@@ -157,9 +181,9 @@ const loadFromServer = async () => {
serverItemsLength.value = res.data.total; serverItemsLength.value = res.data.total;
} catch (err) { } catch (err) {
// formMessage.message = parseErrorTyp(err); // formMessage.message = parseErrorTyp(err);
} finally {
formLoading.value = false;
} }
formLoading.value = false;
}; };
loadFromServer(); loadFromServer();
@@ -216,3 +240,12 @@ const handleDownload = (item) => {
window.open(item.url, "_blank"); window.open(item.url, "_blank");
}; };
</script> </script>
<style lang="scss">
.vue3-easy-data-table {
th:nth-child(1),
td:nth-child(1) {
max-width: 30vw;
}
}
</style>