refactor: use 'contents' Pinia store (#10)

* refactor: use 'contents' Pinia store, no more Vuex store modules * style: minor --------- Co-authored-by: malkja <[email protected]>
subugoe · Jun 6, 2024 · 3bdd435 · 3bdd435
1 parent 5db0053
commit 3bdd435
Show file tree

Hide file tree

Showing 21 changed files with 352 additions and 379 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -36,9 +36,9 @@ export default {
 import {
   computed, inject, onMounted, ref,
 } from 'vue';
-import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
-import { useAnnotationsStore } from './stores/annotations';
+import { useAnnotationsStore } from '@/stores/annotations';
+import { useContentsStore } from '@/stores/contents';
 
 import { useI18n } from 'vue-i18n';
 import GlobalHeader from '@/components/header/GlobalHeader.vue';
@@ -49,9 +49,9 @@ import Loading from '@/components/Loading.vue';
 import BaseIcon from '@/components/base/BaseIcon.vue';
 import { initUseDark } from '@/utils/is-dark';
 
-const store = useStore();
 const configStore = useConfigStore()
 const annotationStore = useAnnotationsStore()
+const contentStore = useContentsStore()
 const { t, locale: i18nLocale } = useI18n();
 
 const errorTitle = ref('');
@@ -80,10 +80,10 @@ const ready = computed(() => {
 });
 const annotations = computed<Annotation[]>(() => annotationStore.annotations);
 const config = computed(() => configStore.config);
-const collection = computed<Collection>(() => store.getters['contents/collection']);
-const item = computed<Item>(() => store.getters['contents/item']);
-const manifest = computed<Manifest>(() => store.getters['contents/manifest']);
-const manifests = computed<Manifest[]>(() => store.getters['contents/manifests']);
+const collection = computed<Collection>(() => contentStore.collection);
+const item = computed<Item>(() => contentStore.item); 
+const manifest = computed<Manifest>(() => contentStore.manifest);  
+const manifests = computed<Manifest[]>(() => contentStore.manifests); 
 initUseDark(config.value.container);
 
 onMounted(async () => {
@@ -104,7 +104,8 @@ onMounted(async () => {
 });
 
 async function getCollection(url: string) {
-  await store.dispatch('contents/initCollection', url);
+  const contentStore = useContentsStore()
+  await contentStore.initCollection(url)    
 }
 async function loadConfig() {
   try {
@@ -116,10 +117,12 @@ async function loadConfig() {
   }
 }
 async function getManifest(url: string) {
-  await store.dispatch('contents/initManifest', url);
+  const contentStore = useContentsStore()
+  await contentStore.initManifest(url)     
 }
 async function getItem(url: string) {
-  await store.dispatch('contents/initItem', url);
+  const contentStore = useContentsStore()
+  await contentStore.initItem(url)      
 }
 async function init() {
   const { collection, manifest, item } = config.value;

diff --git a/src/components/ContentView.vue b/src/components/ContentView.vue
@@ -21,9 +21,9 @@
 import {
   computed, readonly, ref, watch,
 } from 'vue';
-import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
 import { useAnnotationsStore } from '@/stores/annotations';
+import { useContentsStore } from '@/stores/contents'
 import Notification from '@/components/Notification.vue';
 import { request } from '@/utils/http';
 import { domParser, delay } from '@/utils';
@@ -35,8 +35,8 @@ const props = defineProps({
 });
 const emit = defineEmits(['loading']);
 
-const store = useStore();
 const configStore = useConfigStore()
+const contentStore = useContentsStore()
 
 const content = ref('');
 const errorTextMessage = ref(null);
@@ -78,7 +78,7 @@ async function loadContent(url) {
       // TODO: Enable Hover + Tooltip feature when reqs are clarified
       // await store.dispatch('annotations/addHighlightHoverListeners');
 
-      store.commit('contents/setActiveContentUrl', props.url);
+      contentStore.setActiveContentUrl(props.url)
     }, 100);
   } catch (err) {
     errorTextMessage.value = err.message;

diff --git a/src/components/ImageView.vue b/src/components/ImageView.vue
@@ -10,18 +10,18 @@
 <script setup>
 import OpenSeadragon from 'openseadragon';
 import { computed, ref, watch } from 'vue';
-import { useStore } from 'vuex';
+import { useContentsStore } from '@/stores/contents';
 import Notification from '@/components/Notification.vue';
 import { delay } from '@/utils';
 
 const emit = defineEmits('loading');
 
-const store = useStore();
+const contentStore = useContentsStore()
 
 const viewer = ref(null);
 const error = ref(null);
 
-const item = computed(() => store.getters['contents/item']);
+const item = computed(() => contentStore.item);
 const imageUrl = computed(() => item.value?.image?.id);
 const options = computed(() => ({
   id: 'openseadragon',
@@ -80,4 +80,4 @@ function initOpenSeagragon() {
     emit('loading', false);
   });
 }
-</script>
+</script>
diff --git a/src/components/TreeView.vue b/src/components/TreeView.vue
@@ -47,16 +47,16 @@ import Tree from 'primevue/tree';
 import {
   computed, nextTick, onMounted, ref, watch,
 } from 'vue';
-import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
+import { useContentsStore } from '@/stores/contents';
 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 contentStore = useContentsStore()
 const { t } = useI18n();
 
 const expanded = ref({});
@@ -65,11 +65,11 @@ const tree = ref([]);
 const containerRef = ref(null);
 
 const config = computed(() => configStore.config);
-const collectionTitle = computed(() => store.getters['contents/collectionTitle']);
-const collection = computed(() => store.getters['contents/collection']);
+const collectionTitle = computed(() => contentStore.collectionTitle); 
+const collection = computed(() => contentStore.collection);  
 const labels = computed(() => (config.value && config.value.labels) || {});
-const itemUrl = computed(() => store.getters['contents/itemUrl']);
-const currentManifest = computed(() => store.getters['contents/manifest']);
+const itemUrl = computed(() => contentStore.itemUrl);  
+const currentManifest = computed(() => contentStore.manifest);
 
 onMounted(() => {
   emit('loading', true);
@@ -165,13 +165,14 @@ async function onNodeExpand(node) {
 
 async function onNodeSelect(node) {
   const configStore = useConfigStore()
+  const contentStore = useContentsStore()
   if (currentManifest.value.id !== node.parent) {
     // If we selected an item from a different manifest
-    await store.dispatch('contents/initManifest', node.parent);
+    await contentStore.initManifest(node.parent)
     await configStore.setDefaultActiveViews()
   }
 
-  await store.dispatch('contents/initItem', node.key);
+  await contentStore.initItem(node.key)     
 }
 
 function scrollSelectedIntoView() {

diff --git a/src/components/annotations/AnnotationsView.vue b/src/components/annotations/AnnotationsView.vue
@@ -21,32 +21,32 @@
 
 <script setup lang="ts">
 import {
-  computed, onBeforeUnmount, ref, watch,
+  computed, ref, watch,
 } from 'vue';
-import { useStore } from 'vuex';
 import AnnotationsList from '@/components/annotations/AnnotationsList.vue';
 import Notification from '@/components/Notification.vue';
 import * as AnnotationUtils from '@/utils/annotations';
 
 import { useConfigStore } from '@/stores/config';
 import { useAnnotationsStore } from '@/stores/annotations';
+import { useContentsStore} from '@/stores/contents';
 
 const configStore = useConfigStore()
 const annotationStore = useAnnotationsStore()
+const contentStore = useContentsStore()
 
 const props = defineProps({
   url: String,
   types: Array,
 });
 
-const store = useStore();
 const message = ref('no_annotations_in_view');
 
 const config = computed(() => configStore.config);
 const annotations = computed<Annotation[]>(() => annotationStore.annotations);
 const activeAnnotations = computed<ActiveAnnotation>(() => annotationStore.activeAnnotations);
 const filteredAnnotations = computed<Annotation[]>(() =>  annotationStore.filteredAnnotations);
-const activeContentUrl = computed<string>(() => store.getters['contents/activeContentUrl']);
+const activeContentUrl = computed<string>(() => contentStore.activeContentUrl); 
 const updateTextHighlighting = computed(() =>
   // We need to make sure that annotations are loaded (this.annotations),
   // the text HTML is present in DOM (this.activeContentUrl is set after DOM update)

diff --git a/src/components/header/GlobalHeader.vue b/src/components/header/GlobalHeader.vue
@@ -18,8 +18,8 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
+import { useContentsStore } from '@/stores/contents';
 import Navbar from '@/components/header/Navbar.vue';
 import TitleBar from '@/components/header/TitleBar.vue';
 import PanelsToggle from '@/components/header/PanelsToggle.vue';
@@ -34,12 +34,12 @@ const props = withDefaults(defineProps<Props>(), {
   configErrorTitle: ''
 })
 
-const store = useStore();
 const configStore = useConfigStore()
+const conntentStore = useContentsStore()
+
 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 item = computed<Item>(() => conntentStore.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>
diff --git a/src/components/header/Navbar.vue b/src/components/header/Navbar.vue
@@ -25,18 +25,18 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
+import { useContentsStore } from '@/stores/contents'
 import { useI18n } from 'vue-i18n';
 import BaseButton from '@/components/base/BaseButton.vue';
 
-const store = useStore();
 const configStore = useConfigStore()
+const contentStore = useContentsStore()
 const { t } = useI18n();
 
-const manifest = computed<Manifest>(() => store.getters['contents/manifest']);
-const manifests = computed<Manifest[]>(() => store.getters['contents/manifests']);
-const itemUrl = computed<string>(() => store.getters['contents/itemUrl']);
+const manifest = computed<Manifest>(() => contentStore.manifest);
+const manifests = computed<Manifest[]>(() => contentStore.manifests); 
+const itemUrl = computed<string>(() => contentStore.itemUrl); 
 const itemIndex = computed<number>(() => (manifest.value ? manifest.value.sequence.findIndex(({ id }) => id === itemUrl.value) : -1));
 const hasPrev = computed<boolean>(() => {
   const prevIndex = itemIndex.value - 1;
@@ -70,6 +70,7 @@ const prevButtonLabel = computed<string>(() => (itemIndex.value === 0
 
 
 function prev() {
+  const contentStore = useContentsStore()
   const prevIndex = itemIndex.value - 1;
   let itemUrl = '';
 
@@ -79,17 +80,18 @@ function prev() {
     if (prevManifestIndex < 0) return;
 
     const prevManifest = manifests.value[prevManifestIndex];
-    store.commit('contents/setManifest', prevManifest);
+    contentStore.setManifest(prevManifest)
     configStore.setDefaultActiveViews()
     itemUrl = prevManifest.sequence[prevManifest.sequence.length - 1].id;
   } else {
     // We load the previous item
     itemUrl = manifest.value.sequence[prevIndex].id;
   }
-  store.dispatch('contents/initItem', itemUrl);
+  contentStore.initItem(itemUrl)
 }
 
 function next() {
+  const contentStore = useContentsStore()
   const nextIndex = itemIndex.value + 1;
   let itemUrl = '';
 
@@ -98,12 +100,12 @@ function next() {
     if (nextManifestIndex > manifests.value.length - 1) return;
 
     const nextManifest = manifests.value[nextManifestIndex];
-    store.commit('contents/setManifest', nextManifest);
+    contentStore.setManifest(nextManifest)
     configStore.setDefaultActiveViews()
     itemUrl = nextManifest.sequence[0].id;
   } else {
     itemUrl = manifest.value.sequence[nextIndex].id;
   }
-  store.dispatch('contents/initItem', itemUrl);
+  contentStore.initItem(itemUrl)
 }
 </script>
diff --git a/src/components/header/TitleBar.vue b/src/components/header/TitleBar.vue
@@ -35,8 +35,8 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
+import { useContentsStore } from '@/stores/contents'
 import BaseIcon from '@/components/base/BaseIcon.vue';
 
 
@@ -48,11 +48,11 @@ const props = withDefaults(defineProps<Props>(), {
   item: () => <Item>{}
 })
 
-const store = useStore();
 const configStore = useConfigStore()
+const contentStore = useContentsStore()
 
-const collectionTitle = computed<string | null>(() => store.getters['contents/collectionTitle']);
-const manifestTitle = computed<string | undefined>(() => store.getters['contents/manifest']?.label);
+const collectionTitle = computed<string | null>(() => contentStore.collectionTitle); 
+const manifestTitle = computed<string | undefined>(() => contentStore.manifest?.label  );
 const labels = computed<Labels>(() => configStore.config.labels || {
   manifest: 'manifest',
   item: 'item',

diff --git a/src/components/metadata/CollectionMetadata.vue b/src/components/metadata/CollectionMetadata.vue
@@ -10,19 +10,19 @@
 <script setup lang="ts">
 
 import { computed } from 'vue';
-import { useStore } from 'vuex';
+import { useContentsStore } from '@/stores/contents';
 import MetadataItem from '@/components/metadata/MetadataItem.vue';
 
 
+const contentStore = useContentsStore()
+
 function getCollectorName (collection: Collection) : string | null {
     if (!collection) return null;
     if(collection.collector.length === 0) return null;
     return collection.collector[0].name;
 }
 
-const store = useStore();
-
-const collection = computed<Collection>(() => store.getters['contents/collection']);
+const collection = computed<Collection>(() => contentStore.collection);
 
 const metadata = computed(() => {
   if (!collection.value) return [];
@@ -51,4 +51,4 @@ const metadata = computed(() => {
 
 <style scoped>
 
-</style>
+</style>
diff --git a/src/components/metadata/ItemMetadata.vue b/src/components/metadata/ItemMetadata.vue
@@ -10,17 +10,17 @@
 <script setup lang="ts">
 
 import { computed } from 'vue';
-import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
+import { useContentsStore } from '@/stores/contents'
 
 import MetadataItem from '@/components/metadata/MetadataItem.vue';
 
-const store = useStore();
 const configStore = useConfigStore()
+const contentStore = useContentsStore()
 
-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 item = computed<Item>(() => contentStore.item);    
+const itemUrl = computed<string>(() => contentStore.itemUrl);     
+const manifest = computed<Manifest>(() => contentStore.manifest);
 const itemsCount = computed<number>(() => manifest.value?.sequence.length);
 const labels = computed<Labels>(() => configStore.config.labels);
 const number = computed<number>(() => (manifest.value ? manifest.value.sequence.findIndex(({ id }) => id === itemUrl.value) + 1 : 1));
@@ -37,4 +37,4 @@ const metadata = computed(() => (
 
 <style scoped>
 
-</style>
+</style>