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

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

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