Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

introduce 'config' Pinia store with other Vuex modules - drop the usage of 'config' Vuex module #8

Merged
merged 8 commits into from
May 31, 2024
Merged
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 61 additions & 29 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -90,5 +90,8 @@
],
"publishConfig": {
"@subugoe:registry": "https://gitlab.gwdg.de/api/v4/projects/10921/packages/npm/"
},
"dependencies": {
paulpestov marked this conversation as resolved.
Show resolved Hide resolved
"pinia": "^2.1.7"
}
}
31 changes: 16 additions & 15 deletions src/App.vue
Original file line number Diff line number Diff line change
@@ -26,17 +26,19 @@
</div>
</template>

<script>
<script lang="ts">
export default {
name: 'TIDO',
};
</script>

<script setup>
<script setup lang="ts">
import {
computed, inject, onMounted, ref,
} from 'vue';
import { useStore } from 'vuex';
import { useConfigStore } from './stores/config';
paulpestov marked this conversation as resolved.
Show resolved Hide resolved

import { useI18n } from 'vue-i18n';
import GlobalHeader from '@/components/header/GlobalHeader.vue';
import { delay } from '@/utils';
@@ -47,6 +49,7 @@ import BaseIcon from '@/components/base/BaseIcon.vue';
import { initUseDark } from '@/utils/is-dark';

const store = useStore();
const configStore = useConfigStore()
const { t, locale: i18nLocale } = useI18n();

const errorTitle = ref('');
@@ -55,7 +58,6 @@ const isLoading = ref(true);

const ready = computed(() => {
const { collection: collectionUrl, manifest: manifestUrl } = config.value;

if (!item.value) {
return false;
}
@@ -74,12 +76,12 @@ const ready = computed(() => {

return true;
});
const annotations = computed(() => store.getters['annotations/annotations']);
const config = computed(() => store.getters['config/config']);
const collection = computed(() => store.getters['contents/collection']);
const item = computed(() => store.getters['contents/item']);
const manifest = computed(() => store.getters['contents/manifest']);
const manifests = computed(() => store.getters['contents/manifests']);
const annotations = computed<Annotation[]>(() => store.getters['annotations/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']);
initUseDark(config.value.container);

onMounted(async () => {
@@ -103,22 +105,22 @@ onMounted(async () => {
await init();
});

async function getCollection(url) {
async function getCollection(url: string) {
await store.dispatch('contents/initCollection', url);
}
async function loadConfig() {
try {
const config = inject('config');
await store.dispatch('config/load', config);
await configStore.load(config)
} catch ({ title, message }) {
errorTitle.value = t('config_error');
errorMessage.value = t(message);
}
}
async function getManifest(url) {
async function getManifest(url: string) {
await store.dispatch('contents/initManifest', url);
}
async function getItem(url) {
async function getItem(url: string) {
await store.dispatch('contents/initItem', url);
}
async function init() {
@@ -129,7 +131,6 @@ async function init() {
// If a collection is given we ignore the manifest setting
// and try to figure out the correct manifest by searching for the above item.
// Otherwise, no collection is given but a single manifest instead, so we load that manifest.

if (collection) {
await getCollection(collection);
} else if (manifest) {
@@ -146,4 +147,4 @@ async function init() {
isLoading.value = false;
}
}
</script>
</script>
Loading