Skip to content

Commit 21e5671

Browse files
grnd-altgrnd-alt
committed
refactor(pinia): move board logic to boardStore
Signed-off-by: grnd-alt <git@belakkaf.net>
1 parent 7c83e69 commit 21e5671

34 files changed

Lines changed: 510 additions & 558 deletions

‎src/App.vue‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,16 @@
3030
</template>
3131

3232
<script>
33-
import { mapState } from 'vuex'
33+
import { mapState as mapStateVuex } from 'vuex'
3434
import AppNavigation from './components/navigation/AppNavigation.vue'
3535
import KeyboardShortcuts from './components/KeyboardShortcuts.vue'
3636
import { NcModal, NcContent, NcAppContent, isMobile } from '@nextcloud/vue'
3737
import { BoardApi } from './services/BoardApi.js'
3838
import { emit, subscribe } from '@nextcloud/event-bus'
3939
import { loadState } from '@nextcloud/initial-state'
4040
import CardMoveDialog from './CardMoveDialog.vue'
41+
import { useBoardStore } from './stores/board.js'
42+
import { mapState } from 'pinia'
4143
4244
const boardApi = new BoardApi()
4345
@@ -77,10 +79,10 @@ export default {
7779
}
7880
},
7981
computed: {
80-
...mapState({
82+
...mapState(useBoardStore, ['currentBoard']),
83+
...mapStateVuex({
8184
navShown: state => state.navShown,
8285
sidebarShownState: state => state.sidebarShown,
83-
currentBoard: state => state.currentBoard,
8486
}),
8587
// TODO: properly handle sidebar showing for route subview and board sidebar
8688
sidebarRouterView() {
@@ -102,7 +104,7 @@ export default {
102104
created() {
103105
const initialState = loadState('deck', 'initialBoards', null)
104106
if (initialState !== null) {
105-
this.$store.dispatch('loadBoards')
107+
useBoardStore().loadBoards()
106108
}
107109
this.$store.dispatch('loadSharees')
108110
},

‎src/CardMoveDialog.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,10 @@ import { NcDialog, NcSelect, NcButton } from '@nextcloud/vue'
3737
import { generateOcsUrl } from '@nextcloud/router'
3838
import axios from '@nextcloud/axios'
3939
import { subscribe, unsubscribe } from '@nextcloud/event-bus'
40-
import { mapGetters } from 'vuex'
4140
import { mapActions, mapState } from 'pinia'
4241
import { useStackStore } from './stores/stack.js'
4342
import { useCardStore } from './stores/card.js'
43+
import { useBoardStore } from './stores/board.js'
4444
4545
export default {
4646
name: 'CardMoveDialog',
@@ -55,10 +55,10 @@ export default {
5555
}
5656
},
5757
computed: {
58-
...mapGetters(['boardById']),
5958
...mapState(useStackStore, ['stackById']),
59+
...mapState(useBoardStore, ['boardById', 'boards']),
6060
activeBoards() {
61-
return this.$store.getters.boards.filter((item) => item.deletedAt === 0 && item.archived === false)
61+
return this.boards.filter((item) => item.deletedAt === 0 && item.archived === false)
6262
},
6363
isBoardAndStackChoosen() {
6464
return !(this.selectedBoard === '' || this.selectedStack === '')

‎src/components/AttachmentDragAndDrop.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@
4848
import { NcModal } from '@nextcloud/vue'
4949
import attachmentUpload from '../mixins/attachmentUpload.js'
5050
import { loadState } from '@nextcloud/initial-state'
51+
import { mapState } from 'pinia'
52+
import { useBoardStore } from '../stores/board.js'
5153
5254
const maxUploadSizeState = loadState('deck', 'maxUploadSize', -1)
5355
@@ -71,8 +73,9 @@ export default {
7173
}
7274
},
7375
computed: {
76+
...mapState(useBoardStore, ['canEdit']),
7477
isReadOnly() {
75-
return !this.$store.getters.canEdit
78+
return !this.canEdit
7679
},
7780
dropHintText() {
7881
if (this.isReadOnly) {

‎src/components/Controls.vue‎

Lines changed: 27 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@
108108
type="checkbox"
109109
class="checkbox"
110110
:value="label.id"
111-
@change="setFilter">
111+
@change="setFilterLocal">
112112
<label :for="label.id"><span class="label" :style="labelStyle(label)">{{ label.title }}</span></label>
113113
</div>
114114

@@ -119,7 +119,7 @@
119119
type="checkbox"
120120
class="checkbox"
121121
value="unassigned"
122-
@change="setFilter"
122+
@change="setFilterLocal"
123123
@click="beforeSetFilter">
124124
<label for="unassigned">{{ t('deck', 'Unassigned') }}</label>
125125
</div>
@@ -129,7 +129,7 @@
129129
type="checkbox"
130130
class="checkbox"
131131
:value="user.uid"
132-
@change="setFilter">
132+
@change="setFilterLocal">
133133
<label :for="user.uid"><NcAvatar :user="user.uid"
134134
:size="24"
135135
:disable-menu="true"
@@ -143,7 +143,7 @@
143143
type="radio"
144144
class="radio"
145145
value="both"
146-
@change="setFilter"
146+
@change="setFilterLocal"
147147
@click="beforeSetFilter">
148148
<label for="filter-option-both">{{ t('deck', 'Open and completed') }}</label>
149149
</div>
@@ -153,7 +153,7 @@
153153
type="radio"
154154
class="radio"
155155
value="open"
156-
@change="setFilter"
156+
@change="setFilterLocal"
157157
@click="beforeSetFilter">
158158
<label for="filter-option-open">{{ t('deck', 'Open') }}</label>
159159
</div>
@@ -164,7 +164,7 @@
164164
type="radio"
165165
class="radio"
166166
value="completed"
167-
@change="setFilter"
167+
@change="setFilterLocal"
168168
@click="beforeSetFilter">
169169
<label for="filter-option-completed">{{ t('deck', 'Completed') }}</label>
170170
</div>
@@ -176,7 +176,7 @@
176176
type="radio"
177177
class="radio"
178178
value="overdue"
179-
@change="setFilter"
179+
@change="setFilterLocal"
180180
@click="beforeSetFilter">
181181
<label for="overdue">{{ t('deck', 'Overdue') }}</label>
182182
</div>
@@ -187,7 +187,7 @@
187187
type="radio"
188188
class="radio"
189189
value="dueToday"
190-
@change="setFilter"
190+
@change="setFilterLocal"
191191
@click="beforeSetFilter">
192192
<label for="dueToday">{{ t('deck', 'Next 24 hours') }}</label>
193193
</div>
@@ -198,7 +198,7 @@
198198
type="radio"
199199
class="radio"
200200
value="dueWeek"
201-
@change="setFilter"
201+
@change="setFilterLocal"
202202
@click="beforeSetFilter">
203203
<label for="dueWeek">{{ t('deck', 'Next 7 days') }}</label>
204204
</div>
@@ -209,7 +209,7 @@
209209
type="radio"
210210
class="radio"
211211
value="dueMonth"
212-
@change="setFilter"
212+
@change="setFilterLocal"
213213
@click="beforeSetFilter">
214214
<label for="dueMonth">{{ t('deck', 'Next 30 days') }}</label>
215215
</div>
@@ -220,7 +220,7 @@
220220
type="radio"
221221
class="radio"
222222
value="noDue"
223-
@change="setFilter"
223+
@change="setFilterLocal"
224224
@click="beforeSetFilter">
225225
<label for="noDue">{{ t('deck', 'No due date') }}</label>
226226
</div>
@@ -285,7 +285,7 @@
285285
</template>
286286

287287
<script>
288-
import { mapState, mapGetters } from 'vuex'
288+
import { mapState } from 'vuex'
289289
import { subscribe, unsubscribe } from '@nextcloud/event-bus'
290290
import { NcActions, NcActionButton, NcActionSeparator, NcAvatar, NcButton, NcPopover, NcModal, NcTextField } from '@nextcloud/vue'
291291
import labelStyle from '../mixins/labelStyle.js'
@@ -302,8 +302,9 @@ import SessionList from './SessionList.vue'
302302
import { isNotifyPushEnabled } from '../sessions.js'
303303
import CreateNewCardCustomPicker from '../views/CreateNewCardCustomPicker.vue'
304304
import { getCurrentUser } from '@nextcloud/auth'
305-
import { mapActions } from 'pinia'
305+
import { mapActions, mapState as mapStatePinia } from 'pinia'
306306
import { useStackStore } from '../stores/stack.js'
307+
import { useBoardStore } from '../stores/board.js'
307308
308309
export default {
309310
name: 'Controls',
@@ -368,17 +369,18 @@ export default {
368369
},
369370
370371
computed: {
371-
...mapGetters([
372+
...mapStatePinia(useBoardStore, [
372373
'canEdit',
373374
'canManage',
374375
'viewMode',
376+
'showArchived',
375377
]),
376378
...mapState({
377379
isFullApp: state => state.isFullApp,
380+
navShown: state => state.navShown,
378381
compactMode: state => state.compactMode,
379382
showCardCover: state => state.showCardCover,
380383
searchQuery: state => state.searchQuery,
381-
showArchived: state => state.showArchived,
382384
}),
383385
detailsRoute() {
384386
return {
@@ -422,26 +424,27 @@ export default {
422424
this.setPageTitle('')
423425
},
424426
methods: {
427+
...mapActions(useBoardStore, ['setViewMode', 'toggleShowArchived', 'setFilter']),
425428
...mapActions(useStackStore, ['createStack']),
426429
beforeSetFilter(e) {
427430
if (this.filter.due === e.target.value) {
428431
this.filter.due = ''
429-
this.$store.dispatch('setFilter', { ...this.filter })
432+
this.setFilter({ ...this.filter })
430433
}
431434
if (e.target.value === 'unassigned') {
432435
this.filter.users = []
433-
this.$store.dispatch('setFilter', { ...this.filter })
436+
this.setFilter({ ...this.filter })
434437
} else {
435438
this.filter.completed = 'both'
436-
this.$store.dispatch('setFilter', { ...this.filter })
439+
this.setFilter({ ...this.filter })
437440
}
438-
this.$store.dispatch('setFilter', { ...this.filter })
441+
this.setFilter({ ...this.filter })
439442
},
440-
setFilter() {
443+
setFilterLocal() {
441444
if (this.filter.users.length > 0) {
442445
this.filter.unassigned = false
443446
}
444-
this.$nextTick(() => this.$store.dispatch('setFilter', { ...this.filter }))
447+
this.$nextTick(() => this.setFilter({ ...this.filter }))
445448
},
446449
setSearchQuery(value) {
447450
this.$store.commit('setSearchQuery', value)
@@ -450,20 +453,14 @@ export default {
450453
this.$store.commit('setSearchQuery', '')
451454
},
452455
toggleNav() {
453-
this.$store.dispatch('toggleNav')
456+
this.$store.dispatch('toggleNav', !this.navShown)
454457
},
455458
toggleCompactMode() {
456459
this.$store.dispatch('toggleCompactMode')
457460
},
458461
toggleShowCardCover() {
459462
this.$store.dispatch('toggleShowCardCover')
460463
},
461-
setViewMode(mode) {
462-
this.$store.dispatch('setViewMode', mode)
463-
},
464-
toggleShowArchived() {
465-
this.$store.dispatch('toggleShowArchived')
466-
},
467464
addNewStack() {
468465
this.stack = { title: this.newStackTitle }
469466
this.createStack(this.stack)
@@ -486,7 +483,7 @@ export default {
486483
},
487484
clearFilter() {
488485
const filterReset = { tags: [], users: [], due: '', unassigned: false, completed: 'both' }
489-
this.$store.dispatch('setFilter', { ...filterReset })
486+
this.setFilter({ ...filterReset })
490487
this.filter = filterReset
491488
},
492489
clickShowAddCardModel() {
@@ -525,7 +522,7 @@ export default {
525522
this.clearFilter()
526523
} else {
527524
this.filter.users = [getCurrentUser().uid]
528-
this.setFilter()
525+
this.setFilterLocal()
529526
}
530527
},
531528
},

‎src/components/KeyboardShortcuts.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,11 @@
1919
<script>
2020
import DueDateSelector from './card/DueDateSelector.vue'
2121
import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
22-
import { mapState } from 'vuex'
22+
import { mapState } from 'pinia'
2323
import TagSelector from './card/TagSelector.vue'
2424
import AssignmentSelector from './card/AssignmentSelector.vue'
2525
import CardItem from './cards/CardItem.vue'
26+
import { useBoardStore } from '../stores/board.js'
2627
2728
export default {
2829
name: 'KeyboardShortcuts',
@@ -41,8 +42,8 @@ export default {
4142
}
4243
},
4344
computed: {
44-
...mapState({
45-
board: state => state.currentBoard,
45+
...mapState(useBoardStore, {
46+
board: 'currentBoard',
4647
}),
4748
},
4849
created() {

‎src/components/board/Board.vue‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090

9191
<script>
9292
import { Container, Draggable } from 'vue-smooth-dnd'
93-
import { mapState as mapStateVuex, mapGetters } from 'vuex'
93+
import { mapState as mapStateVuex } from 'vuex'
9494
import Controls from '../Controls.vue'
9595
import DeckIcon from '../icons/DeckIcon.vue'
9696
import CheckIcon from 'vue-material-design-icons/Check.vue'
@@ -104,6 +104,7 @@ import CardSidebar from '../card/CardSidebar.vue'
104104
import { mapActions, mapState } from 'pinia'
105105
import { useStackStore } from '../../stores/stack.js'
106106
import { useCardStore } from '../../stores/card.js'
107+
import { useBoardStore } from '../../stores/board.js'
107108
export default {
108109
name: 'Board',
109110
components: {
@@ -144,16 +145,16 @@ export default {
144145
computed: {
145146
...mapState(useStackStore, ['stacksByBoard']),
146147
...mapState(useCardStore, ['cardById']),
148+
...mapState(useBoardStore, {
149+
board: 'currentBoard',
150+
showArchived: 'showArchived',
151+
canEdit: 'canEdit',
152+
canManage: 'canManage',
153+
viewMode: 'viewMode',
154+
}),
147155
...mapStateVuex({
148156
isFullApp: state => state.isFullApp,
149-
board: state => state.currentBoard,
150-
showArchived: state => state.showArchived,
151157
}),
152-
...mapGetters([
153-
'canEdit',
154-
'canManage',
155-
'viewMode',
156-
]),
157158
stacks() {
158159
return this.board?.id ? this.stacksByBoard(this.board.id) : []
159160
},
@@ -194,11 +195,13 @@ export default {
194195
this.session?.close()
195196
},
196197
methods: {
198+
...mapActions(useBoardStore, ['loadBoardById', 'toggleShowArchived']),
197199
...mapActions(useStackStore, ['loadStacks', 'loadArchivedStacks', 'createStack', 'orderStack']),
198200
async fetchData() {
199201
this.loading = true
200202
try {
201-
await this.$store.dispatch('loadBoardById', this.id)
203+
await this.loadBoardById(this.id)
204+
console.log("loadBoardById done", this.id)
202205
await this.loadStacks(this.id)
203206
204207
const routeCardId = this.$route?.params?.cardId ? parseInt(this.$route.params.cardId) : null
@@ -207,7 +210,7 @@ export default {
207210
await this.loadArchivedStacks(this.id)
208211
209212
if (this.cardById(routeCardId)) {
210-
this.$store.commit('toggleShowArchived', true)
213+
this.toggleShowArchived(true)
211214
}
212215
}
213216

0 commit comments

Comments
 (0)