From 075394720c3a1a6fee587183d12d4f143a6dd78d Mon Sep 17 00:00:00 2001
From: malkja <orlin.malkja@sub.uni-goettingen.de>
Date: Tue, 21 May 2024 14:44:11 +0200
Subject: [PATCH] refactor: the remaining 'header' and the a few 'panels'
 components

---
 src/components/header/Navbar.vue              | 29 ++++++++++---------
 src/components/header/TitleBar.vue            | 24 ++++++++-------
 src/components/panels/Panel.vue               | 12 ++++----
 .../panels/actions/PanelImageAction.vue       | 10 +++++--
 4 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/src/components/header/Navbar.vue b/src/components/header/Navbar.vue
index c3a33b27..6846a2ca 100644
--- a/src/components/header/Navbar.vue
+++ b/src/components/header/Navbar.vue
@@ -23,7 +23,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
@@ -32,11 +32,11 @@ import BaseButton from '@/components/base/BaseButton.vue';
 const store = useStore();
 const { t } = useI18n();
 
-const manifest = computed(() => store.getters['contents/manifest']);
-const manifests = computed(() => store.getters['contents/manifests']);
-const itemUrl = computed(() => store.getters['contents/itemUrl']);
-const itemIndex = computed(() => (manifest.value ? manifest.value.sequence.findIndex(({ id }) => id === itemUrl.value) : -1));
-const hasPrev = computed(() => {
+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 itemIndex = computed<number>(() => (manifest.value ? manifest.value.sequence.findIndex(({ id }) => id === itemUrl.value) : -1));
+const hasPrev = computed<boolean>(() => {
   const prevIndex = itemIndex.value - 1;
   if (prevIndex < 0) {
     if (manifests.value === null) return false;
@@ -46,7 +46,7 @@ const hasPrev = computed(() => {
 
   return true;
 });
-const hasNext = computed(() => {
+const hasNext = computed<boolean>(() => {
   const nextIndex = itemIndex.value + 1;
   if (nextIndex > manifest.value.sequence.length - 1) {
     if (manifests.value === null) return false;
@@ -55,16 +55,17 @@ const hasNext = computed(() => {
   }
   return true;
 });
-const nextButtonLabel = computed(() => (itemIndex.value === manifest.value.sequence.length - 1
-  ? `${t('next')} ${t(labels.value.manifest)}`
-  : `${t('next')} ${t(labels.value.item)}`));
-const prevButtonLabel = computed(() => (itemIndex.value === 0
-  ? `${t('prev')} ${t(labels.value.manifest)}`
-  : `${t('prev')} ${t(labels.value.item)}`));
-const labels = computed(() => store.getters['config/config'].labels || {
+const labels = computed<Labels>(() => store.getters['config/config'].labels || {
   manifest: 'manifest',
   item: 'item',
 });
+const nextButtonLabel = computed<string>(() => (itemIndex.value === manifest.value.sequence.length - 1
+  ? `${t('next')} ${t(labels.value.manifest ? labels.value.manifest: 'Manuscript')}`
+  : `${t('next')} ${t(labels.value.item)}`));
+const prevButtonLabel = computed<string>(() => (itemIndex.value === 0
+  ? `${t('prev')} ${t(labels.value.manifest ? labels.value.manifest: 'Manuscript')}`
+  : `${t('prev')} ${t(labels.value.item)}`));
+
 
 function prev() {
   const prevIndex = itemIndex.value - 1;
diff --git a/src/components/header/TitleBar.vue b/src/components/header/TitleBar.vue
index b185141c..53204dfe 100644
--- a/src/components/header/TitleBar.vue
+++ b/src/components/header/TitleBar.vue
@@ -33,24 +33,26 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 import { useStore } from 'vuex';
 import BaseIcon from '@/components/base/BaseIcon.vue';
 
-const props = defineProps({
-  item: {
-    type: Object,
-    default: () => {},
-  },
-});
+
+export interface Props {
+  item: Item
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  item: () => <Item>{}
+})
 
 const store = useStore();
 
-const collectionTitle = computed(() => store.getters['contents/collectionTitle']);
-const manifestTitle = computed(() => store.getters['contents/manifest']?.label);
-const labels = computed(() => store.getters['config/config'].labels || {
+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 || {
   manifest: 'manifest',
   item: 'item',
 });
-</script>
+</script>
\ No newline at end of file
diff --git a/src/components/panels/Panel.vue b/src/components/panels/Panel.vue
index 8045ab64..104bffc0 100644
--- a/src/components/panels/Panel.vue
+++ b/src/components/panels/Panel.vue
@@ -90,7 +90,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import {
   computed, nextTick, ref, watch,
 } from 'vue';
@@ -143,7 +143,7 @@ export default {
     const unsubscribe = ref(null);
     const isLoading = ref(false);
 
-    const item = computed(() => store.getters['contents/item']);
+    const item = computed<Item>(() => store.getters['contents/item']);
 
     watch(
       () => props.activeView,
@@ -198,7 +198,7 @@ export default {
       const { component } = findComponent(connector.id);
 
       const type = connector.options?.type;
-      const url = getContentUrl(type);
+      const url: string | null = getContentUrl(type);
       if (!url) return;
 
       const fontSize = 16;
@@ -228,7 +228,7 @@ export default {
       const { connector, label } = view;
       const { component } = findComponent(connector.id);
 
-      const url = item.value?.annotationCollection;
+      const url: string | undefined = item.value?.annotationCollection;
 
       if (!url) return;
 
@@ -311,8 +311,8 @@ export default {
       }];
     }
 
-    function getContentUrl(type) {
-      let contentItem = null;
+    function getContentUrl(type: string): string | null {
+      let contentItem: Content | null = null;
       if (!type) {
         [contentItem] = item.value.content;
         // TODO: this should be moved to loading time in order dynamically recognize all content types
diff --git a/src/components/panels/actions/PanelImageAction.vue b/src/components/panels/actions/PanelImageAction.vue
index 87ba7313..e2f53617 100644
--- a/src/components/panels/actions/PanelImageAction.vue
+++ b/src/components/panels/actions/PanelImageAction.vue
@@ -14,11 +14,17 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 import BaseButton from '@/components/base/BaseButton.vue';
 
-const buttons = computed(() => ([
+interface Button {
+  id: string,
+  icon: string,
+  tooltip: string
+}
+
+const buttons = computed<Button[]>(() => ([
   { id: 'zoom-in', icon: 'zoomIn', tooltip: 'zoom_in' },
   { id: 'zoom-out', icon: 'zoomOut', tooltip: 'zoom_out' },
   { id: 'fullscreen', icon: 'fullscreen', tooltip: 'switch_to_fullscreen' },