Refactor deleted items into trashbin store

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/components/board/DeletedTabSidebar.vue

@@ -4,14 +4,14 @@
 		<ul>
 			<li v-for="deletedStack in deletedStacks" :key="deletedStack.id">
 				<span class="icon icon-deck" />
-				<span class="title">{{ deletedStack.title }}</span>
+				<div class="title">
+					<span>{{ deletedStack.title }}</span>
+					<span class="timestamp">{{ relativeDate(deletedStack.deletedAt*1000) }}</span>
+				</div>
 				<button
 					:title="t('settings', 'Undo')"
 					class="app-navigation-entry-deleted-button icon-history"
 					@click="stackUndoDelete(deletedStack)" />
-
-				<!-- <span class="live-relative-timestamp" data-timestamp="{{ deletedStack.deletedAt*1000  }}">{{deletedStack.deletedAt | relativeDateFilter }}</span>
-				<a @click="stackUndoDelete(deletedStack)"><span class="icon icon-history"></span></a> -->
 			</li>
 		</ul>
 
@@ -19,32 +19,26 @@
 		<ul>
 			<li v-for="deletedCard in deletedCards" :key="deletedCard.id">
 				<div class="icon icon-deck" />
-				<span class="title">{{ deletedCard.title }}</span>
+				<div class="title">
+					<span>{{ deletedCard.title }}</span>
+					<span class="timestamp">{{ relativeDate(deletedCard.deletedAt*1000) }}</span>
+				</div>
 				<button
 					:title="t('settings', 'Undo')"
 					class="app-navigation-entry-deleted-button icon-history"
 					@click="cardUndoDelete(deletedCard)" />
 			</li>
-
-			<!-- <li ng-repeat="deletedCard in cardservice.deleted">
-				<span class="icon icon-deck"></span>
-				<span class="title">{{deletedCard.title}} ({{stackservice.tryAllThenDeleted(deletedCard.stackId).title}})</span>
-				<span class="live-relative-timestamp" data-timestamp="{{ deletedCard.deletedAt*1000  }}">{{deletedCard.deletedAt | relativeDateFilter }}</span>
-				<a ng-click="cardOrCardAndStackUndoDelete(deletedCard)">
-					<span class="icon icon-history"></span>
-				</a>
-			</li> -->
 		</ul>
 	</div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
+import relativeDate from '../../mixins/relativeDate'
+
 export default {
 	name: 'DeletedTabSidebar',
-	components: {
+	mixins: [ relativeDate ],
-
-	},
 	props: {
 		board: {
 			type: Object,
@@ -60,8 +54,8 @@ export default {
 	},
 	computed: {
 		...mapState({
-			deletedStacks: state => state.stack.deletedStacks,
+			deletedStacks: state => [...state.trashbin.deletedStacks].sort((a, b) => (a.deletedAt > b.deletedAt) ? -1 : 1),
-			deletedCards: state => state.stack.deletedCards,
+			deletedCards: state => [...state.trashbin.deletedCards].sort((a, b) => (a.deletedAt > b.deletedAt) ? -1 : 1),
 		}),
 
 	},
@@ -69,23 +63,20 @@ export default {
 		this.getData()
 	},
 	methods: {
-		getData() {
+		async getData() {
 			this.isLoading = true
-			this.$store.dispatch('deletedItems', this.board.id).then(response => {
+			await this.$store.dispatch('fetchDeletedItems', this.board.id)
 			this.isLoading = false
-			})
 		},
 		stackUndoDelete(deletedStack) {
-			this.copiedDeletedStack = Object.assign({}, deletedStack)
+			const copiedDeletedStack = Object.assign({}, deletedStack)
-			this.copiedDeletedStack.deletedAt = 0
+			copiedDeletedStack.deletedAt = 0
-			this.$store.dispatch('stackUndoDelete', this.copiedDeletedStack)
+			this.$store.dispatch('stackUndoDelete', copiedDeletedStack)
-			this.getData()
 		},
 		cardUndoDelete(deletedCard) {
-			this.copiedDeletedCard = Object.assign({}, deletedCard)
+			const copiedDeletedCard = Object.assign({}, deletedCard)
-			this.copiedDeletedCard.deletedAt = 0
+			copiedDeletedCard.deletedAt = 0
-			this.$store.dispatch('cardUndoDelete', this.copiedDeletedCard)
+			this.$store.dispatch('cardUndoDelete', copiedDeletedCard)
-			this.getData()
 		},
 	},
 }
@@ -110,7 +101,13 @@ export default {
 
 		.title {
 			flex-grow: 2;
-			padding: 13px 0px;
+			padding: 3px 0px;
+
+			.timestamp {
+				font-size: 0.9em;
+				color: var(--color-text-lighter);
+				margin-top: -7px;
+			}
 		}
 
 		.live-relative-timestamp {

src/services/CardApi.js

@@ -60,6 +60,21 @@ export class CardApi {
 			})
 	}
 
+	deletedCards(boardId) {
+		return axios.get(this.url(`/${boardId}/cards/deleted`))
+			.then(
+				(response) => {
+					return Promise.resolve(response.data)
+				},
+				(err) => {
+					return Promise.reject(err)
+				}
+			)
+			.catch((err) => {
+				return Promise.reject(err)
+			})
+	}
+
 	updateCard(card) {
 		return axios.put(this.url(`/cards/${card.id}`), card)
 			.then(

src/services/StackApi.js

@@ -61,21 +61,6 @@ export class StackApi {
 			})
 	}
 
-	deletedCards(boardId) {
-		return axios.get(this.url(`/${boardId}/cards/deleted`))
-			.then(
-				(response) => {
-					return Promise.resolve(response.data)
-				},
-				(err) => {
-					return Promise.reject(err)
-				}
-			)
-			.catch((err) => {
-				return Promise.reject(err)
-			})
-	}
-
 	loadArchivedStacks(boardId) {
 		return axios.get(this.url(`/stacks/${boardId}/archived`))
 			.then(

src/store/card.js

@@ -175,6 +175,7 @@ export default {
 		async deleteCard({ commit }, card) {
 			await apiClient.deleteCard(card.id)
 			commit('deleteCard', card)
+			commit('moveCardToTrash', card)
 		},
 		async archiveUnarchiveCard({ commit }, card) {
 			let call = 'archiveCard'
@@ -201,10 +202,6 @@ export default {
 			await apiClient.removeLabelFromCard(data)
 			commit('updateCardProperty', { property: 'labels', card: data.card })
 		},
-		async cardUndoDelete({ commit }, card) {
-			const updatedCard = await apiClient.updateCard(card)
-			commit('addCard', updatedCard)
-		},
 		async updateCardDesc({ commit }, card) {
 			const updatedCard = await apiClient.updateCard(card)
 			commit('updateCardProperty', { property: 'description', card: updatedCard })

src/store/main.js

@@ -29,6 +29,7 @@ import { BoardApi } from './../services/BoardApi'
 import stack from './stack'
 import card from './card'
 import comment from './comment'
+import trashbin from './trashbin'
 
 Vue.use(Vuex)
 
@@ -46,6 +47,7 @@ export default new Vuex.Store({
 		stack,
 		card,
 		comment,
+		trashbin,
 	},
 	strict: debug,
 	state: {

src/store/stack.js

@@ -29,8 +29,6 @@ const apiClient = new StackApi()
 export default {
 	state: {
 		stacks: [],
-		deletedStacks: [],
-		deletedCards: [],
 	},
 	getters: {
 		stacksByBoard: state => (id) => {
@@ -55,7 +53,6 @@ export default {
 			}
 		},
 		deleteStack(state, stack) {
-
 			const existingIndex = state.stacks.findIndex(_stack => _stack.id === stack.id)
 			if (existingIndex !== -1) {
 				state.stacks.splice(existingIndex, 1)
@@ -67,16 +64,6 @@ export default {
 				state.stacks[existingIndex].title = stack.title
 			}
 		},
-		setDeletedStacks(state, delStacks) {
-			state.deletedStacks = []
-			if (delStacks.length > 0) {
-				state.deletedStacks = delStacks
-			}
-		},
-		setDeletedCards(state, delCards) {
-			state.deletedCards = []
-			state.deletedCards = delCards
-		},
 	},
 	actions: {
 		orderStack({ commit }, { stack, removedIndex, addedIndex }) {
@@ -115,6 +102,7 @@ export default {
 			apiClient.deleteStack(stack.id)
 				.then((stack) => {
 					commit('deleteStack', stack)
+					commit('moveStackToTrash', stack)
 				})
 		},
 		updateStack({ commit }, stack) {
@@ -123,22 +111,5 @@ export default {
 					commit('updateStack', stack)
 				})
 		},
-		deletedItems({ commit }, boardId) {
-			apiClient.deletedStacks(boardId)
-				.then((deletedStacks) => {
-					commit('setDeletedStacks', deletedStacks)
-				})
-			apiClient.deletedCards(boardId)
-				.then((deletedCards) => {
-					commit('setDeletedCards', deletedCards)
-				})
-		},
-		stackUndoDelete({ commit }, stack) {
-			apiClient.updateStack(stack)
-				.then((stack) => {
-					commit('addStack', stack)
-				})
-		},
-
 	},
 }

src/store/trashbin.js

@@ -0,0 +1,97 @@
+/*
+ * @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { StackApi } from '../services/StackApi'
+import { CardApi } from '../services/CardApi'
+
+const stackApi = new StackApi()
+const cardApi = new CardApi()
+
+export default {
+	state: {
+		deletedStacks: [],
+		deletedCards: [],
+	},
+	mutations: {
+		setDeletedStacks(state, delStacks) {
+			state.deletedStacks = []
+			if (delStacks.length > 0) {
+				state.deletedStacks = delStacks
+			}
+		},
+
+		moveStackToTrash(state, stack) {
+			stack.deletedAt = Math.floor(Date.now() / 1000)
+			state.deletedStacks.push(stack)
+		},
+
+		removeStackFromTrash(state, stack) {
+			const existingIndex = state.deletedStacks.findIndex(_stack => _stack.id === stack.id)
+			if (existingIndex !== -1) {
+				state.deletedStacks.splice(existingIndex, 1)
+			}
+		},
+
+		setDeletedCards(state, delCards) {
+			state.deletedCards = []
+			state.deletedCards = delCards
+		},
+
+		moveCardToTrash(state, card) {
+			card.deletedAt = Math.floor(Date.now() / 1000)
+			state.deletedCards.push(card)
+		},
+
+		removeCardFromTrash(state, card) {
+			const existingIndex = state.deletedCards.findIndex(_card => _card.id === card.id)
+			if (existingIndex !== -1) {
+				state.deletedCards.splice(existingIndex, 1)
+			}
+		},
+	},
+	actions: {
+		fetchDeletedItems({ commit }, boardId) {
+			stackApi.deletedStacks(boardId)
+				.then((deletedStacks) => {
+					commit('setDeletedStacks', deletedStacks)
+				})
+			cardApi.deletedCards(boardId)
+				.then((deletedCards) => {
+					commit('setDeletedCards', deletedCards)
+				})
+		},
+		stackUndoDelete({ commit }, stack) {
+			stackApi.updateStack(stack)
+				.then((stack) => {
+					commit('addStack', stack)
+					commit('removeStackFromTrash', stack)
+				})
+		},
+		cardUndoDelete({ commit }, card) {
+			cardApi.updateCard(card)
+				.then((card) => {
+					commit('removeCardFromTrash', card)
+					commit('addCard', card)
+				})
+		},
+	},
+}