2019-03-14 15:14:37 +01:00
|
|
|
<style lang="scss" scoped>
|
|
|
|
@import '~/assets/styles/_colors.scss';
|
|
|
|
div.view-container {
|
|
|
|
padding: 2rem;
|
|
|
|
}
|
|
|
|
div.album {
|
|
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
div.arrow-container {
|
|
|
|
width: 2em;
|
|
|
|
height: 64px;
|
|
|
|
position: relative;
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
i {
|
|
|
|
border: 2px solid $defaultTextColor;
|
|
|
|
border-right: 0;
|
|
|
|
border-top: 0;
|
|
|
|
display: block;
|
|
|
|
height: 1em;
|
|
|
|
position: absolute;
|
|
|
|
transform: rotate(-135deg);
|
|
|
|
transform-origin: center;
|
|
|
|
width: 1em;
|
|
|
|
z-index: 4;
|
|
|
|
top: 22px;
|
|
|
|
|
|
|
|
-webkit-transition: transform 0.1s linear;
|
|
|
|
-moz-transition: transform 0.1s linear;
|
|
|
|
-ms-transition: transform 0.1s linear;
|
|
|
|
-o-transition: transform 0.1s linear;
|
|
|
|
transition: transform 0.1s linear;
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
transform: rotate(-45deg);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
div.thumb {
|
|
|
|
width: 64px;
|
|
|
|
height: 64px;
|
|
|
|
-webkit-box-shadow: $boxShadowLight;
|
|
|
|
box-shadow: $boxShadowLight;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.info {
|
|
|
|
margin-left: 15px;
|
|
|
|
h4 {
|
|
|
|
font-size: 1.5rem;
|
|
|
|
a {
|
|
|
|
color: $defaultTextColor;
|
|
|
|
font-weight: 400;
|
|
|
|
&:hover { text-decoration: underline; }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
span { display: block; }
|
|
|
|
span:nth-child(3) {
|
|
|
|
font-size: 0.9rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
div.latest {
|
|
|
|
flex-grow: 1;
|
|
|
|
justify-content: flex-end;
|
|
|
|
display: flex;
|
|
|
|
margin-left: 15px;
|
|
|
|
|
|
|
|
span.no-files {
|
|
|
|
font-size: 1.5em;
|
|
|
|
color: #b1b1b1;
|
|
|
|
padding-top: 17px;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.more {
|
|
|
|
width: 64px;
|
|
|
|
height: 64px;
|
|
|
|
background: white;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
padding: 10px;
|
|
|
|
text-align: center;
|
|
|
|
a {
|
|
|
|
line-height: 1rem;
|
|
|
|
color: $defaultTextColor;
|
|
|
|
&:hover { text-decoration: underline; }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
div.details {
|
|
|
|
flex: 0 1 100%;
|
|
|
|
padding-left: 2em;
|
|
|
|
padding-top: 1em;
|
|
|
|
min-height: 50px;
|
|
|
|
|
|
|
|
.b-table {
|
|
|
|
padding: 2em 0em;
|
|
|
|
|
|
|
|
.table-wrapper {
|
|
|
|
-webkit-box-shadow: $boxShadowLight;
|
|
|
|
box-shadow: $boxShadowLight;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
div.column > h2.subtitle { padding-top: 1px; }
|
2020-06-29 16:02:06 +02:00
|
|
|
|
|
|
|
div.no-background {
|
|
|
|
background: none;
|
|
|
|
}
|
2019-03-14 15:14:37 +01:00
|
|
|
</style>
|
|
|
|
<style lang="scss">
|
|
|
|
@import '~/assets/styles/_colors.scss';
|
|
|
|
|
|
|
|
.b-table {
|
|
|
|
.table-wrapper {
|
|
|
|
-webkit-box-shadow: $boxShadowLight;
|
|
|
|
box-shadow: $boxShadowLight;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<template>
|
2020-06-29 19:02:47 +02:00
|
|
|
<section class="section is-fullheight dashboard">
|
|
|
|
<div class="container">
|
|
|
|
<div class="columns">
|
|
|
|
<div class="column is-narrow">
|
|
|
|
<Sidebar />
|
|
|
|
</div>
|
|
|
|
<div class="column">
|
2020-07-08 03:00:12 +02:00
|
|
|
<h2 class="subtitle">
|
|
|
|
Manage your tags
|
|
|
|
</h2>
|
2020-06-29 19:02:47 +02:00
|
|
|
<hr>
|
|
|
|
|
|
|
|
<div class="search-container">
|
|
|
|
<b-field>
|
2020-07-08 03:00:12 +02:00
|
|
|
<b-input
|
|
|
|
v-model="newTagName"
|
2020-06-29 19:02:47 +02:00
|
|
|
placeholder="Tag name..."
|
|
|
|
type="text"
|
|
|
|
@keyup.enter.native="createTag" />
|
|
|
|
<p class="control">
|
2020-07-09 01:24:40 +02:00
|
|
|
<b-button
|
|
|
|
type="is-lolisafe"
|
2020-07-08 03:00:12 +02:00
|
|
|
@click="createTag">
|
|
|
|
Create tags
|
2020-07-09 01:24:40 +02:00
|
|
|
</b-button>
|
2020-06-29 19:02:47 +02:00
|
|
|
</p>
|
|
|
|
</b-field>
|
2019-03-14 15:14:37 +01:00
|
|
|
</div>
|
|
|
|
|
2020-06-29 19:02:47 +02:00
|
|
|
<div class="view-container">
|
2020-07-08 03:00:12 +02:00
|
|
|
<div
|
|
|
|
v-for="tag in tags"
|
2020-06-29 19:02:47 +02:00
|
|
|
:key="tag.id"
|
|
|
|
class="album">
|
2020-07-08 03:00:12 +02:00
|
|
|
<div
|
|
|
|
class="arrow-container"
|
2020-06-29 19:02:47 +02:00
|
|
|
@click="promptDeleteTag">
|
|
|
|
<i class="icon-arrow" />
|
|
|
|
</div>
|
|
|
|
<!--
|
|
|
|
<div class="thumb">
|
|
|
|
<figure class="image is-64x64 thumb">
|
|
|
|
<img src="~/assets/images/blank.png">
|
|
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
-->
|
|
|
|
<div class="info">
|
|
|
|
<h4>
|
2020-07-08 03:00:12 +02:00
|
|
|
<router-link :to="`/dashboard/tags/${tag.id}`">
|
|
|
|
{{ tag.name }}
|
|
|
|
</router-link>
|
2020-06-29 19:02:47 +02:00
|
|
|
</h4>
|
|
|
|
<span>{{ tag.count || 0 }} files</span>
|
|
|
|
</div>
|
|
|
|
<!--
|
|
|
|
<div class="latest is-hidden-mobile">
|
|
|
|
<template v-if="album.fileCount > 0">
|
|
|
|
<div v-for="file of album.files"
|
|
|
|
:key="file.id"
|
|
|
|
class="thumb">
|
|
|
|
<figure class="image is-64x64">
|
|
|
|
<a :href="file.url"
|
|
|
|
target="_blank">
|
|
|
|
<img :src="file.thumbSquare">
|
|
|
|
</a>
|
|
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div v-if="album.fileCount > 5"
|
|
|
|
class="thumb more no-background">
|
|
|
|
<router-link :to="`/dashboard/albums/${album.uuid}`">{{ album.fileCount - 5 }}+ more</router-link>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<template v-else>
|
|
|
|
<span class="no-files">Nothing to show here</span>
|
|
|
|
</template>
|
2019-03-14 15:14:37 +01:00
|
|
|
</div>
|
2020-06-29 19:02:47 +02:00
|
|
|
-->
|
2019-03-14 15:14:37 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import Sidebar from '~/components/sidebar/Sidebar.vue';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
2020-07-08 03:00:12 +02:00
|
|
|
Sidebar,
|
2019-03-14 15:14:37 +01:00
|
|
|
},
|
2019-03-28 16:35:58 +01:00
|
|
|
middleware: 'auth',
|
2019-03-14 15:14:37 +01:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
tags: [],
|
2020-07-08 03:00:12 +02:00
|
|
|
newTagName: null,
|
2019-03-14 15:14:37 +01:00
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
config() {
|
|
|
|
return this.$store.state.config;
|
2020-07-08 03:00:12 +02:00
|
|
|
},
|
2019-03-14 15:14:37 +01:00
|
|
|
},
|
|
|
|
metaInfo() {
|
|
|
|
return { title: 'Tags' };
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.getTags();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
promptDeleteTag(id) {
|
2019-10-12 08:47:25 +02:00
|
|
|
this.$buefy.dialog.confirm({
|
2020-07-04 02:26:35 +02:00
|
|
|
type: 'is-danger',
|
2019-03-14 15:14:37 +01:00
|
|
|
message: 'Are you sure you want to delete this tag?',
|
2020-07-08 03:00:12 +02:00
|
|
|
onConfirm: () => this.promptPurgeTag(id),
|
2019-03-14 15:14:37 +01:00
|
|
|
});
|
|
|
|
},
|
|
|
|
promptPurgeTag(id) {
|
2019-10-12 08:47:25 +02:00
|
|
|
this.$buefy.dialog.confirm({
|
2020-07-04 02:26:35 +02:00
|
|
|
type: 'is-danger',
|
2019-03-14 15:14:37 +01:00
|
|
|
message: 'Would you like to delete every file associated with this tag?',
|
|
|
|
cancelText: 'No',
|
|
|
|
confirmText: 'Yes',
|
|
|
|
onConfirm: () => this.deleteTag(id, true),
|
2020-07-08 03:00:12 +02:00
|
|
|
onCancel: () => this.deleteTag(id, false),
|
2019-03-14 15:14:37 +01:00
|
|
|
});
|
|
|
|
},
|
|
|
|
async deleteTag(id, purge) {
|
2019-09-30 09:24:37 +02:00
|
|
|
const response = await this.$axios.$delete(`tags/${id}/${purge ? 'purge' : ''}`);
|
2019-04-24 10:36:28 +02:00
|
|
|
this.getTags();
|
2019-10-12 08:47:25 +02:00
|
|
|
return this.$buefy.toast.open(response.message);
|
2019-03-14 15:14:37 +01:00
|
|
|
},
|
|
|
|
async createTag() {
|
|
|
|
if (!this.newTagName || this.newTagName === '') return;
|
2020-07-08 03:00:12 +02:00
|
|
|
const response = await this.$axios.$post('tag/new',
|
2019-04-24 10:36:28 +02:00
|
|
|
{ name: this.newTagName });
|
|
|
|
this.newTagName = null;
|
2019-10-12 08:47:25 +02:00
|
|
|
this.$buefy.toast.open(response.message);
|
2019-04-24 10:36:28 +02:00
|
|
|
this.getTags();
|
2019-03-14 15:14:37 +01:00
|
|
|
},
|
|
|
|
async getTags() {
|
2020-07-08 03:00:12 +02:00
|
|
|
const response = await this.$axios.$get('tags');
|
2019-04-24 10:36:28 +02:00
|
|
|
for (const tag of response.tags) {
|
|
|
|
tag.isDetailsOpen = false;
|
2019-03-14 15:14:37 +01:00
|
|
|
}
|
2019-04-24 10:36:28 +02:00
|
|
|
this.tags = response.tags;
|
2020-07-08 03:00:12 +02:00
|
|
|
},
|
|
|
|
},
|
2019-03-14 15:14:37 +01:00
|
|
|
};
|
|
|
|
</script>
|