Skip to content

Commit dffd405

Browse files
grnd-altgrnd-alt
committed
refactor(pinia): move stackStore to pinia
Signed-off-by: grnd-alt <git@belakkaf.net>
1 parent 7a84984 commit dffd405

15 files changed

Lines changed: 205 additions & 192 deletions

‎src/CardMoveDialog.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ import { generateOcsUrl } from '@nextcloud/router'
3838
import axios from '@nextcloud/axios'
3939
import { subscribe, unsubscribe } from '@nextcloud/event-bus'
4040
import { mapGetters } from 'vuex'
41+
import { mapState } from 'pinia'
42+
import { useStackStore } from './stores/stack.js'
4143
4244
export default {
4345
name: 'CardMoveDialog',
@@ -52,7 +54,8 @@ export default {
5254
}
5355
},
5456
computed: {
55-
...mapGetters(['stackById', 'boardById']),
57+
...mapGetters(['boardById']),
58+
...mapState(useStackStore, ['stackById']),
5659
activeBoards() {
5760
return this.$store.getters.boards.filter((item) => item.deletedAt === 0 && item.archived === false)
5861
},

‎src/components/Controls.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -294,6 +294,8 @@ import SessionList from './SessionList.vue'
294294
import { isNotifyPushEnabled } from '../sessions.js'
295295
import CreateNewCardCustomPicker from '../views/CreateNewCardCustomPicker.vue'
296296
import { getCurrentUser } from '@nextcloud/auth'
297+
import { mapActions } from 'pinia'
298+
import { useStackStore } from '../stores/stack.js'
297299
298300
export default {
299301
name: 'Controls',
@@ -398,6 +400,7 @@ export default {
398400
this.setPageTitle('')
399401
},
400402
methods: {
403+
...mapActions(useStackStore, ['createStack']),
401404
beforeSetFilter(e) {
402405
if (this.filter.due === e.target.value) {
403406
this.filter.due = ''
@@ -435,7 +438,7 @@ export default {
435438
},
436439
addNewStack() {
437440
this.stack = { title: this.newStackTitle }
438-
this.$store.dispatch('createStack', this.stack)
441+
this.createStack(this.stack)
439442
this.newStackTitle = ''
440443
this.stack = null
441444
this.isAddStackVisible = false

‎src/components/board/Board.vue‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
<GanttView v-else-if="!isEmpty && !loading && viewMode === 'gantt'"
5050
key="gantt"
5151
:board="board"
52-
:stacks="stacksByBoard" />
52+
:stacks="stacks" />
5353
<div v-else-if="!isEmpty && !loading"
5454
key="board"
5555
ref="board"
@@ -62,7 +62,7 @@
6262
@drag-start="draggingStack = true"
6363
@drag-end="draggingStack = false"
6464
@drop="onDropStack">
65-
<Draggable v-for="stack in stacksByBoard"
65+
<Draggable v-for="stack in stacks"
6666
:key="stack.id"
6767
data-click-closes-sidebar="true"
6868
data-dragscroll-enabled
@@ -87,7 +87,7 @@
8787

8888
<script>
8989
import { Container, Draggable } from 'vue-smooth-dnd'
90-
import { mapState, mapGetters } from 'vuex'
90+
import { mapState as mapStateVuex, mapGetters } from 'vuex'
9191
import Controls from '../Controls.vue'
9292
import DeckIcon from '../icons/DeckIcon.vue'
9393
import CheckIcon from 'vue-material-design-icons/Check.vue'
@@ -98,6 +98,8 @@ import GlobalSearchResults from '../search/GlobalSearchResults.vue'
9898
import { showError } from '../../helpers/errors.js'
9999
import { createSession } from '../../sessions.js'
100100
import CardSidebar from '../card/CardSidebar.vue'
101+
import { mapActions, mapState } from 'pinia'
102+
import { useStackStore } from '../../stores/stack.js'
101103
export default {
102104
name: 'Board',
103105
components: {
@@ -136,7 +138,8 @@ export default {
136138
}
137139
},
138140
computed: {
139-
...mapState({
141+
...mapState(useStackStore, ['stacksByBoard']),
142+
...mapStateVuex({
140143
isFullApp: state => state.isFullApp,
141144
board: state => state.currentBoard,
142145
showArchived: state => state.showArchived,
@@ -146,14 +149,14 @@ export default {
146149
'canManage',
147150
'viewMode',
148151
]),
149-
stacksByBoard() {
150-
return this.board?.id ? this.$store.getters.stacksByBoard(this.board.id) : []
152+
stacks() {
153+
return this.board?.id ? this.stacksByBoard(this.board.id) : []
151154
},
152155
dragHandleSelector() {
153156
return this.canEdit ? '.stack__title' : '.no-drag'
154157
},
155158
isEmpty() {
156-
return this.stacksByBoard.length === 0
159+
return this.stacks.length === 0
157160
},
158161
},
159162
watch: {
@@ -180,16 +183,17 @@ export default {
180183
this.session?.close()
181184
},
182185
methods: {
186+
...mapActions(useStackStore, ['loadStacks', 'loadArchivedStacks', 'createStack', 'orderStack']),
183187
async fetchData() {
184188
this.loading = true
185189
try {
186190
await this.$store.dispatch('loadBoardById', this.id)
187-
await this.$store.dispatch('loadStacks', this.id)
191+
await this.loadStacks(this.id)
188192
189193
const routeCardId = this.$route?.params?.cardId ? parseInt(this.$route.params.cardId) : null
190194
// If an archived card is requested, and we cannot find it in the current we load the archived stacks instead
191195
if (routeCardId && !this.$store.getters.cardById(routeCardId)) {
192-
await this.$store.dispatch('loadArchivedStacks', this.id)
196+
await this.loadArchivedStacks(this.id)
193197
194198
if (this.$store.getters.cardById(routeCardId)) {
195199
this.$store.commit('toggleShowArchived', true)
@@ -208,15 +212,15 @@ export default {
208212
},
209213
210214
onDropStack({ removedIndex, addedIndex }) {
211-
this.$store.dispatch('orderStack', { stack: this.stacksByBoard[removedIndex], removedIndex, addedIndex })
215+
this.orderStack({ stack: this.stacks[removedIndex], removedIndex, addedIndex })
212216
},
213217
214218
addNewStack() {
215219
const newStack = {
216220
title: this.newStackTitle,
217221
boardId: this.id,
218222
}
219-
this.$store.dispatch('createStack', newStack)
223+
this.createStack(newStack)
220224
this.newStackTitle = ''
221225
},
222226

‎src/components/board/Stack.vue‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
</template>
6666
{{ isDoneColumn ? t('deck', 'Do not set cards as "done"') : t('deck', 'Set cards as "done"') }}
6767
</NcActionButton>
68-
<NcActionButton icon="icon-delete" @click="deleteStack(stack)">
68+
<NcActionButton icon="icon-delete" @click="deleteStackShowUndo(stack)">
6969
{{ t('deck', 'Delete list') }}
7070
</NcActionButton>
7171
</NcActions>
@@ -162,6 +162,7 @@ import CardItem from '../cards/CardItem.vue'
162162
import '@nextcloud/dialogs/style.css'
163163
import { mapActions } from 'pinia'
164164
import { useTrashbinStore } from '../../stores/trashbin.js'
165+
import { useStackStore } from '../../stores/stack.js'
165166
166167
export default {
167168
name: 'Stack',
@@ -255,6 +256,7 @@ export default {
255256
256257
methods: {
257258
...mapActions(useTrashbinStore, ['stackUndoDelete']),
259+
...mapActions(useStackStore, ['setDoneStack', 'deleteStack', 'updateStack']),
258260
stopCardCreation(e) {
259261
// For some reason the submit event triggers a MouseEvent that is bubbling to the outside
260262
// so we have to ignore it
@@ -289,14 +291,14 @@ export default {
289291
}
290292
},
291293
toggleDoneColumn() {
292-
this.$store.dispatch('setDoneStack', {
294+
this.setDoneStack({
293295
stackId: this.stack.id,
294296
boardId: this.stack.boardId,
295297
isDone: !this.isDoneColumn,
296298
})
297299
},
298-
deleteStack(stack) {
299-
this.$store.dispatch('deleteStack', stack)
300+
deleteStackShowUndo(stack) {
301+
this.deleteStack(stack)
300302
showUndo(t('deck', 'List deleted'), () => this.stackUndoDelete(stack))
301303
},
302304
setArchivedToAllCardsFromStack(stack, isArchived) {
@@ -318,7 +320,7 @@ export default {
318320
},
319321
finishedEdit(stack) {
320322
if (this.copiedStack.title !== stack.title) {
321-
this.$store.dispatch('updateStack', this.copiedStack)
323+
this.updateStack(this.copiedStack)
322324
}
323325
this.editing = false
324326
},

‎src/components/card/CardSidebar.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484
import { NcActionButton, NcAppSidebar, NcAppSidebarTab, NcUserBubble } from '@nextcloud/vue'
8585
import { NcReferenceList } from '@nextcloud/vue/dist/Components/NcRichText.js'
8686
import { getCapabilities } from '@nextcloud/capabilities'
87-
import { mapState, mapGetters } from 'vuex'
87+
import { mapState as mapStateVuex, mapGetters } from 'vuex'
8888
import CardSidebarTabDetails from './CardSidebarTabDetails.vue'
8989
import CardSidebarTabAttachments from './CardSidebarTabAttachments.vue'
9090
import CardSidebarTabComments from './CardSidebarTabComments.vue'
@@ -151,12 +151,12 @@ export default {
151151
}
152152
},
153153
computed: {
154-
...mapState({
154+
...mapStateVuex({
155155
isFullApp: (state) => state.isFullApp,
156156
currentBoard: (state) => state.currentBoard,
157157
hasCardSaveError: (state) => state.hasCardSaveError,
158158
}),
159-
...mapGetters(['canEdit', 'assignables', 'stackById']),
159+
...mapGetters(['canEdit', 'assignables']),
160160
currentCard() {
161161
return this.$store.getters.cardById(this.id)
162162
},
@@ -205,7 +205,7 @@ export default {
205205
},
206206
watch: {
207207
currentCard(newCard, oldCard) {
208-
if (newCard.id === oldCard.id) return
208+
if (newCard.id === oldCard?.id) return
209209
this.focusHeader()
210210
},
211211
'currentCard.title': {

‎src/components/card/DependentCardsSelector.vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888

8989
<script>
9090
import { defineComponent } from 'vue'
91-
import { mapGetters, mapState } from 'vuex'
91+
import { mapGetters, mapState as mapStateVuex } from 'vuex'
9292
import { generateUrl } from '@nextcloud/router'
9393
import { NcSelect, NcButton } from '@nextcloud/vue'
9494
import ListBoxOutline from 'vue-material-design-icons/ListBoxOutline.vue'
@@ -97,6 +97,8 @@ import CheckCircle from 'vue-material-design-icons/CheckCircle.vue'
9797
import Close from 'vue-material-design-icons/Close.vue'
9898
import Plus from 'vue-material-design-icons/Plus.vue'
9999
import CardDetailEntry from './CardDetailEntry.vue'
100+
import { mapState } from 'pinia'
101+
import { useStackStore } from '../../stores/stack.js'
100102
101103
export default defineComponent({
102104
name: 'DependentCardsSelector',
@@ -126,10 +128,11 @@ export default defineComponent({
126128
}
127129
},
128130
computed: {
129-
...mapState({
131+
...mapState(useStackStore, ['stackById']),
132+
...mapStateVuex({
130133
cards: state => state.card.cards,
131134
}),
132-
...mapGetters(['cardById', 'stackById']),
135+
...mapGetters(['cardById']),
133136
isEditable() {
134137
return this.canEdit && !this.card?.done && !this.card?.archived
135138
},

‎src/components/cards/CardItem.vue‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878

7979
<script>
8080
import ClickOutside from 'vue-click-outside'
81-
import { mapState, mapGetters } from 'vuex'
81+
import { mapState as mapStateVuex, mapGetters } from 'vuex'
8282
import CardBadges from './CardBadges.vue'
8383
import Color from '../../mixins/color.js'
8484
import labelStyle from '../../mixins/labelStyle.js'
@@ -87,6 +87,8 @@ import CardMenu from './CardMenu.vue'
8787
import CardCover from './CardCover.vue'
8888
import DueDate from './badges/DueDate.vue'
8989
import { getCurrentUser } from '@nextcloud/auth'
90+
import { mapState } from 'pinia'
91+
import { useStackStore } from '../../stores/stack.js'
9092
9193
const TITLE_EDITING_STATE = {
9294
OFF: 0,
@@ -127,7 +129,8 @@ export default {
127129
}
128130
},
129131
computed: {
130-
...mapState({
132+
...mapState(useStackStore, ['stackById']),
133+
...mapStateVuex({
131134
compactMode: state => state.compactMode,
132135
showArchived: state => state.showArchived,
133136
currentBoard: state => state.currentBoard,
@@ -137,11 +140,12 @@ export default {
137140
...mapGetters([
138141
'isArchived',
139142
]),
143+
140144
board() {
141145
return this.$store.getters.boardById(this?.stack?.boardId)
142146
},
143147
stack() {
144-
return this.$store.getters.stackById(this?.card?.stackId)
148+
return this.stackById(this?.card?.stackId)
145149
},
146150
canEdit() {
147151
if (this.currentBoard) {

‎src/components/cards/CardMenuEntries.vue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
</template>
8282
<script>
8383
import { NcActionButton, NcColorPicker } from '@nextcloud/vue'
84-
import { mapGetters, mapState } from 'vuex'
84+
import { mapGetters, mapState as mapStateVuex } from 'vuex'
8585
import ArchiveIcon from 'vue-material-design-icons/ArchiveOutline.vue'
8686
import CardBulletedIcon from 'vue-material-design-icons/CardBulletedOutline.vue'
8787
import PencilIcon from 'vue-material-design-icons/PencilOutline.vue'
@@ -99,6 +99,8 @@ import '@nextcloud/dialogs/style.css'
9999
import { emit } from '@nextcloud/event-bus'
100100
import { useActionsStore } from '../../stores/actions.js'
101101
import { useTrashbinStore } from '../../stores/trashbin.js'
102+
import { useStackStore } from '../../stores/stack.js'
103+
import { mapState } from 'pinia'
102104
103105
export default {
104106
name: 'CardMenuEntries',
@@ -130,13 +132,13 @@ export default {
130132
}
131133
},
132134
computed: {
135+
...mapState(useStackStore, ['stackById']),
133136
...mapGetters([
134137
'isArchived',
135138
'boards',
136-
'stackById',
137139
'boardById',
138140
]),
139-
...mapState({
141+
...mapStateVuex({
140142
showArchived: state => state.showArchived,
141143
currentBoard: state => state.currentBoard,
142144
}),

‎src/main.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ import { createPinia, PiniaVuePlugin } from 'pinia'
2020
// the server snap.js conflicts with vertical scrolling so we disable it
2121
document.body.setAttribute('data-snap-ignore', 'true')
2222

23+
const pinia = createPinia()
24+
Vue.use(PiniaVuePlugin)
25+
pinia.use(() => ({ $vuex: store }))
26+
2327
const store = storeFactory()
2428
sync(store, router)
2529
initSessions(store)
@@ -43,10 +47,6 @@ Vue.config.errorHandler = (err, vm, info) => {
4347
console.error(err)
4448
}
4549

46-
const pinia = createPinia()
47-
Vue.use(PiniaVuePlugin)
48-
pinia.use(() => ({ $vuex: store }))
49-
5050
/* eslint-disable-next-line no-new */
5151
new Vue({
5252
el: '#content',

‎src/sessions.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
import { listen } from '@nextcloud/notify_push'
77
import { sessionApi } from './services/SessionApi.js'
88
import axios from '@nextcloud/axios'
9+
import { useStackStore } from './stores/stack.js'
910

1011
const SESSION_INTERVAL = 90 // in seconds
1112

@@ -55,7 +56,7 @@ export function initSessions(storeInstance) {
5556
const currentBoardId = store.state.currentBoard?.id
5657
if (body.boardId !== currentBoardId) return
5758

58-
store.dispatch('loadStacks', currentBoardId)
59+
useStackStore().loadStacks(currentBoardId)
5960
})
6061
}
6162

0 commit comments

Comments
 (0)