This commit is contained in:
j3d1 2024-09-02 20:06:49 +02:00
parent 448c166507
commit 17bfb84a94
62 changed files with 62258 additions and 107 deletions

View file

@ -0,0 +1,71 @@
<template>
<BaseLayout>
<main class="content">
<div class="container-fluid p-0">
<h1 class="h3 mb-3">Files</h1>
<div class="card">
<div class="card-header">
<h5 class="card-title">Images</h5>
</div>
<div class="card-body">
<span v-for="files in only_images(files)" :key="files.id">
<deletable-wrapper @delete="deleteFile(files)">
<authenticated-image :src="files.name" :owner="files.owner"
class="img-thumbnail"/>
</deletable-wrapper>
</span>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="card-title">Other files</h5>
</div>
<div class="card-body">
<ul>
<li v-for="file in whithout_images(files)" :key="file.id">
{{ file.name }}
</li>
</ul>
</div>
</div>
</div>
</main>
</BaseLayout>
</template>
<script>
import {mapActions, mapState} from "vuex";
import * as BIcons from "bootstrap-icons-vue";
import BaseLayout from "@/components/BaseLayout.vue";
import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
import DeletableWrapper from "@/components/DeletableWrapper.vue";
export default {
name: "Files",
components: {
AuthenticatedImage,
BaseLayout,
DeletableWrapper,
...BIcons
},
computed: {
...mapState(["files"])
},
methods: {
...mapActions(["fetchFiles", "deleteFile"]),
only_images(files) {
return files.filter(file => file.mime_type.startsWith("image/"));
},
whithout_images(files) {
return files.filter(file => !file.mime_type.startsWith("image/"));
}
},
mounted() {
this.fetchFiles();
}
}
</script>
<style scoped>
</style>