new archive sidebar

Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>

src/components/board/ArchivedTabSidebar.vue

@@ -0,0 +1,66 @@
+<template>
+	<div>
+		<ul>
+			<li v-for="archivedCard in archivedCards" :key="archivedCard.id">
+				<CardItem :id="archivedCard.id" />
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import relativeDate from '../../mixins/relativeDate'
+import CardItem from '../cards/CardItem'
+
+export default {
+	name: 'ArchivedTabSidebar',
+	components: {
+		CardItem,
+	},
+	mixins: [ relativeDate ],
+	props: {
+		board: {
+			type: Object,
+			default: undefined,
+		},
+	},
+	data() {
+		return {
+			isLoading: false,
+			copiedDeletedStack: null,
+			copiedDeletedCard: null,
+		}
+	},
+	computed: {
+		...mapGetters([
+			'archivedCards',
+		]),
+
+	},
+	created() {
+		this.getData()
+	},
+	methods: {
+		async getData() {
+			this.isLoading = true
+			await this.$store.dispatch('fetchDeletedItems', this.board.id)
+			this.isLoading = false
+		},
+		stackUndoDelete(deletedStack) {
+			const copiedDeletedStack = Object.assign({}, deletedStack)
+			copiedDeletedStack.deletedAt = 0
+			this.$store.dispatch('stackUndoDelete', copiedDeletedStack)
+		},
+		cardUndoDelete(deletedCard) {
+			const copiedDeletedCard = Object.assign({}, deletedCard)
+			copiedDeletedCard.deletedAt = 0
+			this.$store.dispatch('cardUndoDelete', copiedDeletedCard)
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/components/board/BoardSidebar.vue

@@ -39,9 +39,17 @@
 			<TagsTabSidebar :board="board" />
 		</AppSidebarTab>
 
+		<AppSidebarTab
+			id="archived"
+			:order="2"
+			:name="t('deck', 'Archived cards')"
+			icon="icon-archive">
+			<ArchivedTabSidebar :board="board" />
+		</AppSidebarTab>
+
 		<AppSidebarTab v-if="canEdit"
 			id="deleted"
-			:order="2"
+			:order="3"
 			:name="t('deck', 'Deleted items')"
 			icon="icon-delete">
 			<DeletedTabSidebar :board="board" />
@@ -49,7 +57,7 @@
 
 		<AppSidebarTab v-if="hasActivity"
 			id="activity"
-			:order="3"
+			:order="4"
 			:name="t('deck', 'Timeline')"
 			icon="icon-activity">
 			<TimelineTabSidebar :board="board" />
@@ -62,6 +70,7 @@ import { mapState, mapGetters } from 'vuex'
 import SharingTabSidebar from './SharingTabSidebar'
 import TagsTabSidebar from './TagsTabSidebar'
 import DeletedTabSidebar from './DeletedTabSidebar'
+import ArchivedTabSidebar from './ArchivedTabSidebar'
 import TimelineTabSidebar from './TimelineTabSidebar'
 import { AppSidebar, AppSidebarTab } from '@nextcloud/vue'
 
@@ -76,6 +85,7 @@ export default {
 		TagsTabSidebar,
 		DeletedTabSidebar,
 		TimelineTabSidebar,
+		ArchivedTabSidebar,
 	},
 	props: {
 		id: {

src/components/cards/CardMenu.vue

@@ -33,7 +33,7 @@
 				<ActionButton v-if="showArchived === false" icon="icon-delete" @click="deleteCard()">
 					{{ t('deck', 'Delete card') }}
 				</ActionButton>
-				<ActionButton icon="icon-external" @click.stop="modalShow=true">
+				<ActionButton v-if="showArchived === false" icon="icon-external" @click.stop="modalShow=true">
 					{{ t('deck', 'Move card') }}
 				</ActionButton>
 				<ActionButton icon="icon-settings-dark" @click="openCard">

src/store/card.js

@@ -90,6 +90,9 @@ export default {
 		cardById: state => (id) => {
 			return state.cards.find((card) => card.id === id)
 		},
+		archivedCards: state => {
+			return state.cards.filter(card => card.archived === true)
+		},
 	},
 	mutations: {
 		clearCards(state) {