119 lines
3.4 KiB
Vue
Executable File
119 lines
3.4 KiB
Vue
Executable File
<template>
|
|
<article>
|
|
<h1>
|
|
<span></span>
|
|
<div class="flex items-center">
|
|
<button
|
|
v-if="totalUnreadFeedItemsCount > 0"
|
|
class="button info"
|
|
v-on:click="onMarkAsReadClicked"
|
|
>
|
|
<svg fill="currentColor" width="16" height="16">
|
|
<use v-bind:xlink:href="icon('unread_items')" />
|
|
</svg>
|
|
<span>
|
|
{{ __("Mark as read") }}
|
|
</span>
|
|
</button>
|
|
<button
|
|
class="info"
|
|
v-on:click.left.stop.prevent="onOpenClicked"
|
|
>
|
|
<svg fill="currentColor" width="16" height="16">
|
|
<use v-bind:xlink:href="icon('open')" />
|
|
</svg>
|
|
<span>
|
|
{{ __("Open") }}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</h1>
|
|
|
|
<div class="body">
|
|
<img
|
|
v-for="document in documents"
|
|
v-bind:key="document.id"
|
|
v-bind:title="document.title"
|
|
v-bind:src="document.favicon"
|
|
class="favicon inline mr-1 mb-1"
|
|
/>
|
|
<div
|
|
class="mt-6"
|
|
v-if="
|
|
selectedFolder.type !== 'unread_items' &&
|
|
selectedFolder.user_permissions.can_delete_document
|
|
"
|
|
>
|
|
<button class="danger" v-on:click="onDeleteDocument">
|
|
<svg fill="currentColor" width="16" height="16">
|
|
<use v-bind:xlink:href="icon('trash')" />
|
|
</svg>
|
|
<span>
|
|
{{ __("Delete") }}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters, mapActions } from "vuex";
|
|
|
|
export default {
|
|
computed: {
|
|
...mapGetters({
|
|
documents: "documents/selectedDocuments",
|
|
selectedFolder: "folders/selectedFolder",
|
|
}),
|
|
totalUnreadFeedItemsCount: function () {
|
|
const self = this;
|
|
|
|
return collect(self.documents).sum("feed_item_states_count");
|
|
},
|
|
},
|
|
methods: {
|
|
...mapActions({
|
|
openDocument: "documents/openDocument",
|
|
}),
|
|
|
|
/**
|
|
* Click on the "Open" button
|
|
*/
|
|
onOpenClicked: function () {
|
|
const self = this;
|
|
|
|
self.documents.forEach(function (document) {
|
|
self.openDocument({
|
|
document: document,
|
|
folder: self.selectedFolder,
|
|
});
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Mark as read button clicked
|
|
*/
|
|
onMarkAsReadClicked: function () {
|
|
const self = this;
|
|
|
|
self.$emit("feeditems-read", {
|
|
documents: collect(self.documents).pluck("id").all(),
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Delete button clicked
|
|
*/
|
|
onDeleteDocument: function () {
|
|
const self = this;
|
|
|
|
self.$emit("documents-deleted", {
|
|
folder: self.selectedFolder,
|
|
documents: self.documents,
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|