use new table

This commit is contained in:
2023-04-17 22:57:40 +10:00
parent 40a9cc424e
commit e7d517f264

View File

@@ -1,58 +1,64 @@
<template>
<SMPage permission="admin/media">
<template #container>
<h1>Media</h1>
<SMMastHead
title="Media"
:back-link="{ name: 'dashboard' }"
back-title="Return to Dashboard" />
<SMMessage
v-if="formMessage.message"
:type="formMessage.type"
:message="formMessage.message"
:icon="formMessage.icon" />
<SMMessage
v-if="formMessage.message"
:type="formMessage.type"
:message="formMessage.message"
:icon="formMessage.icon" />
<SMToolbar>
<template #left>
<!-- <SMButton
:to="{ name: 'media-upload' }"
type="primary"
label="Upload Media" /> -->
</template>
<template #right>
<SMInput
v-model="search"
label="Search"
:small="true"
style="max-width: 250px" />
</template>
</SMToolbar>
<!-- @click-row="handleClickRow" -->
<EasyDataTable
v-model:server-options="serverOptions"
:server-items-length="serverItemsLength"
:loading="formLoading"
:headers="headers"
:items="items"
:search-value="search">
<template #loading>
<SMLoadingIcon />
</template>
<template #item-size="item">
{{ bytesReadable(item.size) }}
</template>
<template #item-actions="item">
<div class="action-wrapper">
<SMButton
label="Edit"
:dropdown="{
download: 'Download',
delete: 'Delete',
}"
@click="handleClick(item, $event)"></SMButton>
</div>
</template>
</EasyDataTable>
<SMToolbar>
<template #left>
<!-- <SMButton
:to="{ name: 'media-upload' }"
type="primary"
label="Upload Media" /> -->
</template>
</SMPage>
<template #right>
<SMInput
v-model="search"
label="Search"
:small="true"
style="max-width: 250px" />
</template>
</SMToolbar>
<SMTable :headers="headers" :items="items" @row-click="handleRowClick">
<template #item-size="item">
{{ bytesReadable(item.size) }}
</template>
<template #item-actions="item">THE ACTIONS</template>
</SMTable>
<!-- @click-row="handleClickRow" -->
<EasyDataTable
v-model:server-options="serverOptions"
:server-items-length="serverItemsLength"
:loading="formLoading"
:headers="headers"
:items="items"
:search-value="search">
<template #loading>
<SMLoadingIcon />
</template>
<template #item-size="item">
{{ bytesReadable(item.size) }}
</template>
<template #item-actions="item">
<div class="action-wrapper">
<SMButton
label="Edit"
:dropdown="{
download: 'Download',
delete: 'Delete',
}"
size="medium"
@click="handleClick(item, $event)"></SMButton>
</div>
</template>
</EasyDataTable>
</template>
<script setup lang="ts">
@@ -74,6 +80,8 @@ import { bytesReadable } from "../../helpers/types";
import { useUserStore } from "../../store/UserStore";
import { useToastStore } from "../../store/ToastStore";
import SMInput from "../../depreciated/SMInput-old.vue";
import SMMastHead from "../../components/SMMastHead.vue";
import SMTable from "../../components/SMTable.vue";
const router = useRouter();
const search = ref("");
@@ -106,6 +114,10 @@ const serverOptions = ref({
sortType: null,
});
const handleRowClick = (item) => {
alert(JSON.stringify(item));
};
const handleClick = (item, extra: string): void => {
if (extra.length == 0) {
handleEdit(item);