refactor: use 'config' Pinia Store in different components, remove 'c…

…onfig' Vuex Module
subugoe · May 31, 2024 · 1e7b6c2 · 1e7b6c2
1 parent 05f0324
commit 1e7b6c2
Show file tree

Hide file tree

Showing 22 changed files with 80 additions and 782 deletions.
diff --git a/src/components/Notification.vue b/src/components/Notification.vue
@@ -17,7 +17,6 @@
 
 <script setup>
 import { computed } from 'vue';
-import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
 import BaseIcon from '@/components/base/BaseIcon.vue';
 
@@ -32,7 +31,6 @@ const props = defineProps({
     default: () => '',
   },
 });
-const store = useStore();
 const configStore = useConfigStore()
 
 const config = computed(() => configStore.config);     

diff --git a/src/components/annotations/AnnotationIcon.vue b/src/components/annotations/AnnotationIcon.vue
@@ -12,6 +12,7 @@ import BaseIcon from '@/components/base/BaseIcon.vue';
 interface Props {
   name: string
 }
+
 const props = defineProps<Props>()
 
 </script>

diff --git a/src/components/base/BaseCheckbox.vue b/src/components/base/BaseCheckbox.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import Checkbox from 'primevue/checkbox'
-import TriStateCheckbox from 'primevue/tristatecheckbox'
 import { getIcon } from '@/utils/icons';
 
 const props = withDefaults(defineProps<{

diff --git a/src/components/base/BaseDropdown.vue b/src/components/base/BaseDropdown.vue
@@ -17,14 +17,12 @@
 
 <script setup>
 import { computed, watch } from 'vue';
-import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
 
 import BaseButton from '@/components/base/BaseButton.vue';
 
 const props = defineProps(['modelValue', 'buttonText']);
 const emit = defineEmits(['update:modelValue']);
-const store = useStore();
 const configStore = useConfigStore()
 const container = computed(() => configStore.config.container);
 

diff --git a/src/components/header/Language.vue b/src/components/header/Language.vue
@@ -21,7 +21,6 @@
 import {
   computed, onMounted, ref, watch,
 } from 'vue';
-import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
 import { useI18n } from 'vue-i18n';
 import BaseDropdown from '@/components/base/BaseDropdown.vue';
@@ -31,7 +30,6 @@ interface Language {
   value: string
 }
 
-const store = useStore();
 const configStore = useConfigStore()
 const { locale: i18nLocale } = useI18n();
 

diff --git a/src/components/header/PanelsToggle.vue b/src/components/header/PanelsToggle.vue
@@ -57,15 +57,13 @@
 
 <script setup>
 import { computed, ref, watch } from 'vue';
-import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import { isMobile } from '@/utils/is-mobile';
 import BaseCheckbox from '@/components/base/BaseCheckbox.vue';
 import BaseButton from '@/components/base/BaseButton.vue';
 import BaseDropdown from '@/components/base/BaseDropdown.vue';
 import { useConfigStore } from '@/stores/config';
 
-const store = useStore();
 const configStore = useConfigStore()
 const { t } = useI18n();
 

diff --git a/src/components/header/TitleBar.vue b/src/components/header/TitleBar.vue
@@ -36,6 +36,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useStore } from 'vuex';
+import { useConfigStore } from '@/stores/config';
 import BaseIcon from '@/components/base/BaseIcon.vue';
 
 
@@ -48,10 +49,11 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const store = useStore();
+const configStore = useConfigStore()
 
 const collectionTitle = computed<string | null>(() => store.getters['contents/collectionTitle']);
 const manifestTitle = computed<string | undefined>(() => store.getters['contents/manifest']?.label);
-const labels = computed<Labels>(() => store.getters['config/config'].labels || {
+const labels = computed<Labels>(() => configStore.config.labels || {
   manifest: 'manifest',
   item: 'item',
 });

diff --git a/src/components/header/Tools.vue b/src/components/header/Tools.vue
@@ -8,14 +8,14 @@
 
 <script setup>
 import { computed } from 'vue';
-import { useStore } from 'vuex';
+import { useConfigStore } from '@/stores/config';
 import SoftwareInfo from '@/components/header/SoftwareInfo.vue';
 import Language from '@/components/header/Language.vue';
 import DarkModeToggle from '@/components/header/DarkModeToggle.vue';
 
-const store = useStore();
+const configStore = useConfigStore()
 
-const config = computed(() => store.getters['config/config']);
+const config = computed(() => configStore.config);
 const showLanguageSwitch = computed(() => (config.value?.header?.languageSwitch !== undefined
   ? config.value.header.languageSwitch
   : true));

diff --git a/src/components/metadata/ItemMetadata.vue b/src/components/metadata/ItemMetadata.vue
@@ -11,15 +11,18 @@
 
 import { computed } from 'vue';
 import { useStore } from 'vuex';
+import { useConfigStore } from '@/stores/config';
+
 import MetadataItem from '@/components/metadata/MetadataItem.vue';
 
 const store = useStore();
+const configStore = useConfigStore()
 
 const item = computed<Item>(() => store.getters['contents/item']);
 const itemUrl = computed<string>(() => store.getters['contents/itemUrl']);
 const manifest = computed<Manifest>(() => store.getters['contents/manifest']);
 const itemsCount = computed<number>(() => manifest.value?.sequence.length);
-const labels = computed<Labels>(() => store.getters['config/config'].labels);
+const labels = computed<Labels>(() => configStore.config.labels);
 const number = computed<number>(() => (manifest.value ? manifest.value.sequence.findIndex(({ id }) => id === itemUrl.value) + 1 : 1));
 const total = computed<number>(() => itemsCount.value ?? 1);
 const metadata = computed(() => (

diff --git a/src/components/metadata/ManifestMetadata.vue b/src/components/metadata/ManifestMetadata.vue
@@ -11,17 +11,20 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useStore } from 'vuex';
+import { useConfigStore } from '@/stores/config';
+
 import MetadataItem from '@/components/metadata/MetadataItem.vue';
 import Actor from '@/components/metadata/Actor.vue';
 
 const store = useStore();
+const configStore = useConfigStore()
 
 const manifest = computed<Manifest>(() => store.getters['contents/manifest']);
 const manifests = computed<Manifest[]>(() => store.getters['contents/manifests']);
 const manifestHasItems = computed<boolean>(() => manifest.value?.sequence.length > 0);
 const number = computed<number>(() => (manifests.value !== null ? manifests.value.findIndex(({ id }) => id === manifest.value.id) + 1 : 1));
 const total = computed<number>(() => (manifests.value !== null ? manifests.value.length : 1));
-const labels = computed<Labels>(() => store.getters['config/config'].labels);
+const labels = computed<Labels>(() => configStore.config.labels);
 const metadata = computed(() => {
   if (!manifest.value) return [];
   return [

diff --git a/src/components/metadata/MetadataItem.vue b/src/components/metadata/MetadataItem.vue
@@ -19,7 +19,7 @@ const props = defineProps<{
 }>();
 
 const label = computed<string>(() => props.item?.key || 'other');
-const childItems = computed(<Metadata>() => props.item?.metadata || []);
+const childItems = computed<Metadata>(() => props.item?.metadata || []);
 
 function isLink(): boolean {
   const regex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/ig;

diff --git a/src/components/metadata/MetadataView.vue b/src/components/metadata/MetadataView.vue
@@ -7,8 +7,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
-import { useStore } from 'vuex';
+
 import CollectionMetadata from '@/components/metadata/CollectionMetadata.vue';
 import ManifestMetadata from '@/components/metadata/ManifestMetadata.vue';
 import ItemMetadata from '@/components/metadata/ItemMetadata.vue';
@@ -17,7 +16,4 @@ const props = defineProps({
   options: Object,
 });
 
-const store = useStore();
-
-const config = computed(() => store.getters['config/config']);
 </script>
diff --git a/src/components/panels/Panel.vue b/src/components/panels/Panel.vue
@@ -95,6 +95,7 @@ import {
   computed, nextTick, ref, watch,
 } from 'vue';
 import { useStore } from 'vuex';
+import { useConfigStore } from '@/stores/config';
 import { useI18n } from 'vue-i18n';
 import TabView from 'primevue/tabview';
 import TabPanel from 'primevue/tabpanel';
@@ -136,6 +137,7 @@ export default {
   },
   setup(props, { emit }) {
     const store = useStore();
+    const configStore = useConfigStore()
     const { t } = useI18n();
 
     const tabs = ref([]);
@@ -317,7 +319,7 @@ export default {
         [contentItem] = item.value.content;
         // TODO: this should be moved to loading time in order dynamically recognize all content types
         //  instead of only the first one
-        store.dispatch('config/setContentType', contentItem.type.split('type=')[1]);
+        configStore.setContentType(contentItem.type.split('type=')[1]);
       }
 
       contentItem = item.value.content.find((c) => c.type.split('type=')[1] === type);

diff --git a/src/components/panels/PanelsWrapper.vue b/src/components/panels/PanelsWrapper.vue
@@ -15,12 +15,10 @@
 <script setup>
 
 import { computed } from 'vue';
-import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
 
 import Panel from '@/components/panels/Panel.vue';
 
-const store = useStore();
 const configStore = useConfigStore()