refactor: adapt other components to now use 'config' Pinia store

subugoe · May 27, 2024 · 003ec7c · 003ec7c
1 parent d162621
commit 003ec7c
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 27 deletions.
diff --git a/src/components/ContentView.vue b/src/components/ContentView.vue
@@ -22,6 +22,7 @@ import {
   computed, readonly, ref, watch,
 } from 'vue';
 import { useStore } from 'vuex';
+import { useConfigStore } from '../../src/stores/config';
 import Notification from '@/components/Notification.vue';
 import { request } from '@/utils/http';
 import { domParser, delay } from '@/utils';
@@ -34,12 +35,13 @@ const props = defineProps({
 const emit = defineEmits(['loading']);
 
 const store = useStore();
+const configStore = useConfigStore()
 
 const content = ref('');
 const errorTextMessage = ref(null);
 const notificationMessage = readonly(errorTextMessage);
 
-const config = computed(() => store.getters['config/config']);
+const config = computed(() => configStore.config);   
 const contentStyle = computed(() => ({
   fontSize: `${props.fontSize}px`,
 }));
@@ -118,4 +120,4 @@ function isValidTextContent(text) {
 .rtl {
   direction: rtl;
 }
-</style>
+</style>
diff --git a/src/components/Notification.vue b/src/components/Notification.vue
@@ -18,6 +18,7 @@
 <script setup>
 import { computed } from 'vue';
 import { useStore } from 'vuex';
+import { useConfigStore } from '../../src/stores/config';
 import BaseIcon from '@/components/base/BaseIcon.vue';
 
 const props = defineProps({
@@ -32,8 +33,9 @@ const props = defineProps({
   },
 });
 const store = useStore();
+const configStore = useConfigStore()
 
-const config = computed(() => store.getters['config/config']);
+const config = computed(() => configStore.config);     
 const notificationColors = computed(() => config.value.notificationColors);
 const color = computed(() => {
   switch (props.type) {
@@ -45,4 +47,4 @@ const color = computed(() => {
       return '';
   }
 });
-</script>
+</script>
diff --git a/src/components/TreeView.vue b/src/components/TreeView.vue
@@ -48,21 +48,23 @@ import {
   computed, nextTick, onMounted, ref, watch,
 } from 'vue';
 import { useStore } from 'vuex';
+import { useConfigStore } from '../../src/stores/config';
 import { useI18n } from 'vue-i18n';
 import { request } from '@/utils/http';
 import { isElementVisible } from '@/utils';
 
 const emit = defineEmits(['loading']);
 
 const store = useStore();
+const configStore = useConfigStore()
 const { t } = useI18n();
 
 const expanded = ref({});
 const selected = ref(null);
 const tree = ref([]);
 const containerRef = ref(null);
 
-const config = computed(() => store.getters['config/config']);
+const config = computed(() => configStore.config);
 const collectionTitle = computed(() => store.getters['contents/collectionTitle']);
 const collection = computed(() => store.getters['contents/collection']);
 const labels = computed(() => (config.value && config.value.labels) || {});
@@ -162,10 +164,11 @@ async function onNodeExpand(node) {
 }
 
 async function onNodeSelect(node) {
+  const configStore = useConfigStore()
   if (currentManifest.value.id !== node.parent) {
     // If we selected an item from a different manifest
     await store.dispatch('contents/initManifest', node.parent);
-    await store.dispatch('config/setDefaultActiveViews');
+    await configStore.setDefaultActiveViews()
   }
 
   await store.dispatch('contents/initItem', node.key);
@@ -204,4 +207,4 @@ function getNodeByKey(key, root) {
 
   return root.children.find((child) => !!(getNodeByKey(key, child)));
 }
-</script>
+</script>
diff --git a/src/components/annotations/AnnotationsView.vue b/src/components/annotations/AnnotationsView.vue
@@ -28,6 +28,10 @@ import AnnotationsList from '@/components/annotations/AnnotationsList.vue';
 import Notification from '@/components/Notification.vue';
 import * as AnnotationUtils from '@/utils/annotations';
 
+import { useConfigStore } from '../../stores/config';
+
+const configStore = useConfigStore()
+
 const props = defineProps({
   url: String,
   types: Array,
@@ -36,7 +40,7 @@ const props = defineProps({
 const store = useStore();
 const message = ref('no_annotations_in_view');
 
-const config = computed(() => store.getters['config/config']);
+const config = computed(() => configStore.config);
 const annotations = computed<Annotation[]>(() => store.getters['annotations/annotations']);
 const activeAnnotations = computed<ActiveAnnotation>(() => store.getters['annotations/activeAnnotations']);
 const filteredAnnotations = computed<Annotation[]>(() => store.getters['annotations/filteredAnnotations']);
@@ -95,4 +99,4 @@ function highlightTargetsLevel0() {
 
 <style scoped>
 
-</style>
+</style>
diff --git a/src/components/base/BaseDropdown.vue b/src/components/base/BaseDropdown.vue
@@ -18,12 +18,15 @@
 <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 container = computed(() => store.getters['config/config'].container);
+const configStore = useConfigStore()
+const container = computed(() => configStore.config.container);
 
 watch(
   () => props.modelValue,
@@ -47,4 +50,4 @@ watch(
     } else if (backdrop) backdrop.remove();
   },
 );
-</script>
+</script>
diff --git a/src/components/header/GlobalHeader.vue b/src/components/header/GlobalHeader.vue
@@ -19,6 +19,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useStore } from 'vuex';
+import { useConfigStore } from '../../stores/config';
 import Navbar from '@/components/header/Navbar.vue';
 import TitleBar from '@/components/header/TitleBar.vue';
 import PanelsToggle from '@/components/header/PanelsToggle.vue';
@@ -34,10 +35,11 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const store = useStore();
-const config = computed(() => store.getters['config/config']);
+const configStore = useConfigStore()
+const config = computed(() => configStore.config); 
 const show = computed<boolean | undefined>(() => config.value?.header?.show);
 const manifests = computed<Manifest[]>(() => store.getters['contents/manifests']);
 const item = computed<Item>(() => store.getters['contents/item']);
 const showNavbar = computed<boolean>(() => config.value?.header?.navigation || true);
 const showPanelsToggle = computed<boolean | undefined>(() => (config.value?.header?.panelsToggle !== undefined ? config.value?.header?.panelsToggle : true));
-</script>
+</script>
diff --git a/src/components/header/Language.vue b/src/components/header/Language.vue
@@ -22,6 +22,7 @@ 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,6 +32,7 @@ interface Language {
 }
 
 const store = useStore();
+const configStore = useConfigStore()
 const { locale: i18nLocale } = useI18n();
 
 const langs = ref<Language[]>([
@@ -39,7 +41,7 @@ const langs = ref<Language[]>([
 ]);
 const selectedLang = ref<Language>(langs.value[0]);
 const showDropdown = ref<boolean>(false);
-const config = computed(() => store.getters['config/config']);
+const config = computed(() => configStore.config);  
 
 watch(
   selectedLang,

diff --git a/src/components/header/Navbar.vue b/src/components/header/Navbar.vue
@@ -26,10 +26,12 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useStore } from 'vuex';
+import { useConfigStore } from '../../stores/config';
 import { useI18n } from 'vue-i18n';
 import BaseButton from '@/components/base/BaseButton.vue';
 
 const store = useStore();
+const configStore = useConfigStore()
 const { t } = useI18n();
 
 const manifest = computed<Manifest>(() => store.getters['contents/manifest']);
@@ -55,7 +57,7 @@ const hasNext = computed<boolean>(() => {
   }
   return true;
 });
-const labels = computed<Labels>(() => store.getters['config/config'].labels || {
+const labels = computed<Labels>(() => configStore.config.labels || {
   manifest: 'manifest',
   item: 'item',
 });
@@ -78,7 +80,7 @@ function prev() {
 
     const prevManifest = manifests.value[prevManifestIndex];
     store.commit('contents/setManifest', prevManifest);
-    store.dispatch('config/setDefaultActiveViews');
+    configStore.setDefaultActiveViews()
     itemUrl = prevManifest.sequence[prevManifest.sequence.length - 1].id;
   } else {
     // We load the previous item
@@ -97,11 +99,11 @@ function next() {
 
     const nextManifest = manifests.value[nextManifestIndex];
     store.commit('contents/setManifest', nextManifest);
-    store.dispatch('config/setDefaultActiveViews');
+    configStore.setDefaultActiveViews()
     itemUrl = nextManifest.sequence[0].id;
   } else {
     itemUrl = manifest.value.sequence[nextIndex].id;
   }
   store.dispatch('contents/initItem', itemUrl);
 }
-</script>
+</script>
diff --git a/src/components/header/PanelsToggle.vue b/src/components/header/PanelsToggle.vue
@@ -63,14 +63,15 @@ 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();
 
 const toggles = ref([]);
 const showDropdown = ref(false);
-
-const panels = computed(() => store.getters['config/config'].panels);
+const panels = computed(() => configStore.config.panels  );  //store.getters['config/config'].panels);
 const resetColor = computed(() => (toggles.value.filter(({ show }) => !show).length > 0 ? 'primary' : 'grey-7'));
 
 watch(
@@ -84,6 +85,7 @@ watch(
 );
 
 function update(index, show) {
+  const configStore = useConfigStore()
   if (show === false) {
     let numberClosedPanels = 0;
     // count the number of closed panels, except the current action
@@ -103,13 +105,14 @@ function update(index, show) {
   }
 
   toggles.value[index].show = show;
-  store.dispatch('config/setShowPanel', { index, show });
+  configStore.setShowPanel({ index, show })
 }
 
 function reset() {
+  const configStore = useConfigStore()
   toggles.value.forEach((toggle, index) => {
     toggles.value[index].show = true;
-    store.dispatch('config/setShowPanel', { index, show: true });
+    configStore.setShowPanel({ index, show: true })
   });
 }
 
@@ -122,4 +125,4 @@ function handleToggleTitle(idx) {
     ? `${t('hide')} ${titleUpper} Panel`
     : `${t('show')} ${titleUpper} Panel`;
 }
-</script>
+</script>
diff --git a/src/components/panels/PanelsWrapper.vue b/src/components/panels/PanelsWrapper.vue
@@ -16,22 +16,26 @@
 
 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()
+
 
 const panels = computed(() => {
   const { panels } = config.value;
   return panels;
 });
-const config = computed(() => store.getters['config/config']);
-const activeViews = computed(() => store.getters['config/activeViews']);
+const config = computed(() => configStore.config);  
+const activeViews = computed(() => configStore.activeViews); 
 
 function onActiveViewChange(viewIndex, panelIndex) {
-  store.dispatch('config/setActivePanelView', { viewIndex, panelIndex });
+    configStore.setActivePanelView(viewIndex, panelIndex) 
 }
 
 function getActiveView(panelIndex) {
   return activeViews.value[panelIndex];
 }
-</script>
+</script>