ami/tl-vikunja
1
0
Fork 0
Code Activity

feat: port base store to pinia

Browse Source
This commit is contained in:
Dominik Pschenitschni
2022-09-24 15:20:40 +02:00
parent df74f9d80c
commit 7f281fc5e9
49 changed files with 450 additions and 541 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/home/MenuButton.vue
View File

@ -1,8 +1,8 @@
<template>
<BaseButton
class="menu-show-button"
@click="$store.commit('toggleMenu')"
@shortkey="() => $store.commit('toggleMenu')"
@click="baseStore.toggleMenu()"
@shortkey="() => baseStore.toggleMenu()"
v-shortcut="'Control+e'"
:title="$t('keyboardShortcuts.toggleMenu')"
:aria-label="menuActive ? $t('misc.hideMenu') : $t('misc.showMenu')"
@ -11,12 +11,12 @@
<script setup lang="ts">
import {computed} from 'vue'
import {useStore} from '@/store'
import {useBaseStore} from '@/stores/base'
import BaseButton from '@/components/base/BaseButton.vue'
const store = useStore()
const menuActive = computed(() => store.state.menuActive)
const baseStore = useBaseStore()
const menuActive = computed(() => baseStore.menuActive)
</script>
<style lang="scss" scoped>

23
src/components/home/TheNavigation.vue
View File

@ -70,7 +70,7 @@
{{ $t('navigation.privacy') }}
</dropdown-item>
<dropdown-item
@click="$store.commit('keyboardShortcutsActive', true)"
@click="baseStore.setKeyboardShortcutsActive(true)"
>
{{ $t('keyboardShortcuts.title') }}
</dropdown-item>
@ -92,9 +92,7 @@
<script setup lang="ts">
import {ref, computed, onMounted, nextTick} from 'vue'
import {useStore} from '@/store'
import {QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
import {RIGHTS as Rights} from '@/constants/rights'
import Update from '@/components/home/update.vue'
@ -107,21 +105,24 @@ import BaseButton from '@/components/base/BaseButton.vue'
import MenuButton from '@/components/home/MenuButton.vue'
import {getListTitle} from '@/helpers/getListTitle'
import {useBaseStore} from '@/stores/base'
import {useConfigStore} from '@/stores/config'
import {useAuthStore} from '@/stores/auth'
const store = useStore()
const authStore = useAuthStore()
const configStore = useConfigStore()
const baseStore = useBaseStore()
const currentList = computed(() => baseStore.currentList)
const background = computed(() => baseStore.background)
const canWriteCurrentList = computed(() => baseStore.currentList.maxRight > Rights.READ)
const menuActive = computed(() => baseStore.menuActive)
const authStore = useAuthStore()
const userInfo = computed(() => authStore.info)
const userAvatar = computed(() => authStore.avatarUrl)
const currentList = computed(() => store.state.currentList)
const background = computed(() => store.state.background)
const configStore = useConfigStore()
const imprintUrl = computed(() => configStore.legal.imprintUrl)
const privacyPolicyUrl = computed(() => configStore.legal.privacyPolicyUrl)
const canWriteCurrentList = computed(() => store.state.currentList.maxRight > Rights.READ)
const menuActive = computed(() => store.state.menuActive)
const usernameDropdown = ref()
const listTitle = ref()
@ -140,7 +141,7 @@ function logout() {
}
function openQuickActions() {
store.commit(QUICK_ACTIONS_ACTIVE, true)
baseStore.setQuickActionsActive(true)
}
</script>

22
src/components/home/contentAuth.vue
View File

@ -2,7 +2,7 @@
<div class="content-auth">
<BaseButton
v-if="menuActive"
@click="$store.commit('menuActive', false)"
@click="baseStore.setMenuActive(false)"
class="menu-hide-button d-print-none"
>
<icon icon="times"/>
@ -26,7 +26,7 @@
>
<BaseButton
v-if="menuActive"
@click="$store.commit('menuActive', false)"
@click="baseStore.setMenuActive(false)"
class="mobile-overlay d-print-none"
/>
@ -61,11 +61,10 @@
<script lang="ts" setup>
import {watch, computed, shallowRef, watchEffect, type VNode, h} from 'vue'
import {useStore} from '@/store'
import {useBaseStore} from '@/stores/base'
import {useRoute, useRouter} from 'vue-router'
import {useEventListener} from '@vueuse/core'
import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/mutation-types'
import {useLabelStore} from '@/stores/labels'
import Navigation from '@/components/home/navigation.vue'
import QuickActions from '@/components/quick-actions/quick-actions.vue'
@ -123,20 +122,19 @@ function useRouteWithModal() {
const {routeWithModal, currentModal, closeModal} = useRouteWithModal()
const store = useStore()
const background = computed(() => store.state.background)
const blurHash = computed(() => store.state.blurHash)
const menuActive = computed(() => store.state.menuActive)
const baseStore = useBaseStore()
const background = computed(() => baseStore.background)
const blurHash = computed(() => baseStore.blurHash)
const menuActive = computed(() => baseStore.menuActive)
function showKeyboardShortcuts() {
store.commit(KEYBOARD_SHORTCUTS_ACTIVE, true)
baseStore.setKeyboardShortcutsActive(true)
}
const route = useRoute()
// hide menu on mobile
watch(() => route.fullPath, () => window.innerWidth < 769 && store.commit(MENU_ACTIVE, false))
watch(() => route.fullPath, () => window.innerWidth < 769 && baseStore.setMenuActive(false))
// FIXME: this is really error prone
// Reset the current list highlight in menu if the current route is not list related.
@ -158,7 +156,7 @@ watch(() => route.name as string, (routeName) => {
routeName.startsWith('user.settings')
)
) {
store.dispatch(CURRENT_LIST, {list: null})
baseStore.handleSetCurrentList({list: null})
}
})

11
src/components/home/contentLinkShare.vue
View File

@ -24,15 +24,16 @@
<script lang="ts" setup>
import {computed} from 'vue'
import {useStore} from '@/store'
import {useBaseStore} from '@/stores/base'
import Logo from '@/components/home/Logo.vue'
import PoweredByLink from './PoweredByLink.vue'
const store = useStore()
const currentList = computed(() => store.state.currentList)
const background = computed(() => store.state.background)
const logoVisible = computed(() => store.state.logoVisible)
const baseStore = useBaseStore()
const currentList = computed(() => baseStore.currentList)
const background = computed(() => baseStore.background)
const logoVisible = computed(() => baseStore.logoVisible)
</script>
<style lang="scss" scoped>

14
src/components/home/navigation.vue
View File

@ -141,7 +141,6 @@
<script setup lang="ts">
import {ref, computed, onMounted, onBeforeMount} from 'vue'
import {useStore} from '@/store'
import draggable from 'zhyswan-vuedraggable'
import type {SortableEvent} from 'sortablejs'
@ -151,7 +150,6 @@ import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings
import PoweredByLink from '@/components/home/PoweredByLink.vue'
import Logo from '@/components/home/Logo.vue'
import {MENU_ACTIVE} from '@/store/mutation-types'
import {calculateItemPosition} from '@/helpers/calculateItemPosition'
import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
import {getListTitle} from '@/helpers/getListTitle'
@ -159,6 +157,8 @@ import {useEventListener} from '@vueuse/core'
import type {IList} from '@/modelTypes/IList'
import type {INamespace} from '@/modelTypes/INamespace'
import ColorBubble from '@/components/misc/colorBubble.vue'
import {useBaseStore} from '@/stores/base'
import {useListStore} from '@/stores/lists'
import {useNamespaceStore} from '@/stores/namespaces'
@ -168,10 +168,10 @@ const dragOptions = {
ghostClass: 'ghost',
}
const store = useStore()
const baseStore = useBaseStore()
const namespaceStore = useNamespaceStore()
const currentList = computed(() => store.state.currentList)
const menuActive = computed(() => store.state.menuActive)
const currentList = computed(() => baseStore.currentList)
const menuActive = computed(() => baseStore.menuActive)
const loading = computed(() => namespaceStore.isLoading)
@ -202,7 +202,7 @@ const listStore = useListStore()
function resize() {
// Hide the menu by default on mobile
store.commit(MENU_ACTIVE, window.innerWidth >= 770)
baseStore.setMenuActive(window.innerWidth >= 770)
}
function toggleLists(namespaceId: INamespace['id']) {
@ -262,7 +262,7 @@ async function saveListPosition(e: SortableEvent) {
)
try {
// create a copy of the list in order to not violate vuex mutations
// create a copy of the list in order to not violate pinia manipulation
await listStore.updateList({
...list,
position,