nicoeri/filebrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Converted views/settings/Shares.vue to composition api & ts

Browse Source
This commit is contained in:
Joep 2023-09-10 17:28:31 +02:00
parent d791e79cf3
commit 4714b6bc75
1 changed files with 77 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
frontend/src/views/settings/Shares.vue
View File

@ -1,18 +1,20 @@
<template> <template>
<errors v-if="error" :errorCode="error.status" /> <errors v-if="error" :errorCode="error.status" />
<div class="row" v-else-if="!loading"> <div class="row" v-else-if="!layoutStore.loading">
<div class="column"> <div class="column">
<div class="card"> <div class="card">
<div class="card-title"> <div class="card-title">
<h2>{{ $t("settings.shareManagement") }}</h2> <h2>{{ t("settings.shareManagement") }}</h2>
</div> </div>
<div class="card-content full" v-if="links.length > 0"> <div class="card-content full" v-if="links.length > 0">
<table> <table>
<tr> <tr>
<th>{{ $t("settings.path") }}</th> <th>{{ t("settings.path") }}</th>
<th>{{ $t("settings.shareDuration") }}</th> <th>{{ t("settings.shareDuration") }}</th>
<th v-if="user.perm.admin">{{ $t("settings.username") }}</th> <th v-if="authStore.user?.perm.admin">
{{ t("settings.username") }}
</th>
<th></th> <th></th>
<th></th> <th></th>
</tr> </tr>
@ -25,15 +27,15 @@
<template v-if="link.expire !== 0">{{ <template v-if="link.expire !== 0">{{
humanTime(link.expire) humanTime(link.expire)
}}</template> }}</template>
<template v-else>{{ $t("permanent") }}</template> <template v-else>{{ t("permanent") }}</template>
</td> </td>
<td v-if="user.perm.admin">{{ link.username }}</td> <td v-if="authStore.user?.perm.admin">{{ link.username }}</td>
<td class="small"> <td class="small">
<button <button
class="action" class="action"
@click="deleteLink($event, link)" @click="deleteLink($event, link)"
:aria-label="$t('buttons.delete')" :aria-label="t('buttons.delete')"
:title="$t('buttons.delete')" :title="t('buttons.delete')"
> >
<i class="material-icons">delete</i> <i class="material-icons">delete</i>
</button> </button>
@ -42,8 +44,8 @@
<button <button
class="action copy-clipboard" class="action copy-clipboard"
:data-clipboard-text="buildLink(link)" :data-clipboard-text="buildLink(link)"
:aria-label="$t('buttons.copyToClipboard')" :aria-label="t('buttons.copyToClipboard')"
:title="$t('buttons.copyToClipboard')" :title="t('buttons.copyToClipboard')"
> >
<i class="material-icons">content_paste</i> <i class="material-icons">content_paste</i>
</button> </button>
@ -53,94 +55,87 @@
</div> </div>
<h2 class="message" v-else> <h2 class="message" v-else>
<i class="material-icons">sentiment_dissatisfied</i> <i class="material-icons">sentiment_dissatisfied</i>
<span>{{ $t("files.lonely") }}</span> <span>{{ t("files.lonely") }}</span>
</h2> </h2>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script setup lang="ts">
import { mapState, mapWritableState } from "pinia";
import { useAuthStore } from "@/stores/auth"; import { useAuthStore } from "@/stores/auth";
import { useLayoutStore } from "@/stores/layout"; import { useLayoutStore } from "@/stores/layout";
import { share as api, users } from "@/api"; import { share as api, users } from "@/api";
import dayjs from "dayjs"; import dayjs from "dayjs";
import Clipboard from "clipboard"; import Clipboard from "clipboard";
import Errors from "@/views/Errors.vue"; import Errors from "@/views/Errors.vue";
import { inject, onBeforeUnmount, ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
export default { const $showError = inject("$showError") as TToast;
name: "shares", const $showSuccess = inject("$showSuccess") as TToast;
components: { const { t } = useI18n();
Errors,
}, const layoutStore = useLayoutStore();
inject: ["$showError", "$showSuccess"], const authStore = useAuthStore();
computed: {
...mapState(useAuthStore, ["user"]), // ...mapState(useAuthStore, ["user"]),
...mapWritableState(useLayoutStore, ["loading"]), // ...mapWritableState(useLayoutStore, ["loading"]),
}, const error = ref<any>(null);
data: function () { const links = ref<any[]>([]);
return { const clip = ref<Clipboard | null>(null);
error: null,
links: [], onMounted(async () => {
clip: null, layoutStore.loading = true;
};
},
async created() {
this.loading = true;
try { try {
let links = await api.list(); let newLinks = await api.list();
if (this.user.perm.admin) { if (authStore.user?.perm.admin) {
let userMap = new Map(); let userMap = new Map();
for (let user of await users.getAll()) for (let user of await users.getAll())
userMap.set(user.id, user.username); userMap.set(user.id, user.username);
for (let link of links) for (let link of newLinks)
link.username = userMap.has(link.userID) link.username = userMap.has(link.userID)
? userMap.get(link.userID) ? userMap.get(link.userID)
: ""; : "";
} }
this.links = links; links.value = newLinks;
} catch (e) { } catch (e: any) {
this.error = e; error.value = e;
} finally { } finally {
this.loading = false; layoutStore.loading = false;
} }
}, clip.value = new Clipboard(".copy-clipboard");
mounted() { clip.value.on("success", () => {
this.clip = new Clipboard(".copy-clipboard"); $showSuccess(t("success.linkCopied"));
this.clip.on("success", () => {
this.$showSuccess(this.$t("success.linkCopied"));
}); });
}, });
beforeUnmount() {
this.clip.destroy(); onBeforeUnmount(() => clip.value?.destroy());
},
methods: { const deleteLink = async (event: Event, link: any) => {
deleteLink: async function (event, link) {
event.preventDefault(); event.preventDefault();
this.showHover({ layoutStore.showHover({
prompt: "share-delete", prompt: "share-delete",
confirm: () => { confirm: () => {
this.closeHovers(); layoutStore.closeHovers();
try { try {
api.remove(link.hash); api.remove(link.hash);
this.links = this.links.filter((item) => item.hash !== link.hash); links.value = links.value.filter((item) => item.hash !== link.hash);
this.$showSuccess(this.$t("settings.shareDeleted")); $showSuccess(t("settings.shareDeleted"));
} catch (e) { } catch (e: any) {
this.$showError(e); $showError(e);
} }
}, },
}); });
}, };
humanTime(time) { const humanTime = (time: number) => {
return dayjs(time * 1000).fromNow(); return dayjs(time * 1000).fromNow();
}, };
buildLink(share) {
const buildLink = (share: IShare) => {
return api.getShareURL(share); return api.getShareURL(share);
},
},
}; };
</script> </script>