fixed ts type checks

frontend/package.json

@@ -34,6 +34,7 @@
     "@rushstack/eslint-patch": "^1.2.0",
     "@tsconfig/node18": "^2.0.1",
     "@types/bootstrap": "^5.2.6",
+    "@types/luxon": "^3.4.2",
     "@types/node": "^18.16.8",
     "@types/uuid": "^9.0.2",
     "@vitejs/plugin-vue": "^4.2.3",

frontend/src/commons.ts

@@ -1,5 +1,5 @@
 import { useProjectStore } from '@/stores/stores'
-import { ArchiveStatus } from '@/constants'
+import { ArchiveStatus, type Archive } from '@/constants'
 
 export function getpreviousArchives(): Array<Archive> {
   const storeProject = useProjectStore()

frontend/src/components/ArchivesList.vue

@@ -27,28 +27,28 @@
 
 <script setup lang="ts">
 import LatestArchive from '@/components/LatestArchive.vue'
-import { ArchiveStatus } from '@/constants'
+import { ArchiveStatus, type Archive } from '@/constants'
 import { useProjectStore } from '@/stores/stores'
-import { ref, computed } from 'vue'
+import { ref, type Ref, computed } from 'vue'
 
 const isActive = ref(false)
 const isShowed = ref(true)
 const isShowingAllPrevious = ref(false)
 
 const storeProject = useProjectStore()
-const previousArchives: Array<Archive> = computed(() =>
+const previousArchives: Ref<Array<Archive>> = computed(() =>
   storeProject.lastProjectArchives.filter((item) => item.status != ArchiveStatus.PENDING)
 )
-const lastPreviousArchive: Archive = computed(
+const lastPreviousArchive: Ref<Archive> = computed(
   () => previousArchives.value[previousArchives.value.length - 1]
 )
-const additionalPreviousArchives: Array<Archive> = computed(() =>
+const additionalPreviousArchives: Ref<Array<Archive>> = computed(() =>
   previousArchives.value.filter((item) => item.id != lastPreviousArchive.value.id)
 )
-const hasAdditionalPrevious: boolean = computed(() => additionalPreviousArchives.value.length > 0)
+const hasAdditionalPrevious: Ref<boolean> = computed(() => additionalPreviousArchives.value.length > 0)
 
-function showAllPrevious(e) {
-  e.preventDefault()
+function showAllPrevious(event: Event) {
+  event.preventDefault()
   isShowingAllPrevious.value = true
 }
 </script>

frontend/src/components/ImageUpload.vue

@@ -10,29 +10,28 @@
 
 <script setup lang="ts">
 import { useAppStore } from '@/stores/stores'
-import { ref } from 'vue'
+import { ref, type Ref } from 'vue'
 
 const props = defineProps<{
   value?: string
   enforced_format?: string
-  enforced_dimensions?: { width: int; height: int }
+  enforced_dimensions?: { width: number; height: number }
 }>()
 
 const emit = defineEmits<{
   change: [data: string]
 }>()
-const image_file_field = ref(null)
-const image_img_field = ref(null)
+const image_file_field: Ref<HTMLInputElement | null> = ref(null)
+const image_img_field: Ref<HTMLImageElement | null> = ref(null)
 
 const storeApp = useAppStore()
 
 function openFilePicker() {
-  console.log('openFilePicker YO')
-  console.log('openFilePicker', image_file_field.value)
-  image_file_field.value.click()
+  if (image_file_field.value !== null)
+    image_file_field.value.click()
 }
 
-const imageDimensions = (dataUrl) =>
+const imageDimensions = (dataUrl: string) =>
   new Promise((resolve, reject) => {
     const img = new Image()
 
@@ -50,9 +49,15 @@ const imageDimensions = (dataUrl) =>
     img.src = dataUrl
   })
 
-function updateImage(ev) {
-  console.debug('updateImage')
-  const file = ev.target.files[0]
+function updateImage(event: Event) {
+  if (event.target === null)
+    return
+
+  const target = (event.target as HTMLInputElement)
+  if (target.files === null)
+    return
+
+  const file = target.files[0]
   const reader = new FileReader()
   if (!file) {
     console.error('updateImage failed without file')
@@ -72,7 +77,13 @@ function updateImage(ev) {
     }
     error_message += 'Image'
 
-    let [prefix, bytes] = reader.result.split(',', 2)
+    if (reader.result instanceof ArrayBuffer) {
+      storeApp.alertsError(`${error_message} (no result)`)
+      return
+    }
+    let result: string = reader.result!
+
+    let [prefix, bytes] = result.split(',', 2)
     let mimetype = prefix.replace(RegExp('^data:(.+);base64$'), '$1')
     if (props.enforced_format && mimetype != `image/${props.enforced_format}`) {
       console.error(error_message, mimetype)
@@ -83,11 +94,11 @@ function updateImage(ev) {
     if (props.enforced_dimensions) {
       // load on DOM to get dimensions
       const dimensions = { width: 0, height: 0 }
-      await imageDimensions(reader.result)
-        .then(function (dim) {
+      await imageDimensions(result)
+        .then(function (dim: any) {
           ;(dimensions.width = dim.width), (dimensions.height = dim.height)
         })
-        .catch(function () {
+        .catch(function (error: string) {
           console.error('Image could not be loaded as image', error)
           storeApp.alertsError(`${error_message} (failed to load)`)
         })
@@ -104,10 +115,9 @@ function updateImage(ev) {
       }
     }
 
-    // props.value = bytes
-    image_img_field.value.src = 'data:image/png;base64,' + bytes
-    // archiveMetadataFormModal.value.illustration = bytes
-    console.info('updated image data:', reader.result)
+    if (image_img_field.value)
+      image_img_field.value.src = 'data:image/png;base64,' + bytes
+
     emit('change', bytes)
   }
   reader.readAsDataURL(file)

frontend/src/components/LatestArchive.vue

@@ -12,23 +12,24 @@
         >[Download {{ props.archive.config.filename }} ({{ archiveFileSize }} of files]</span
       >
       <br />
-      <span>requested on {{ formattedDate(archive.requested_on) }}</span>
+      <span>requested on {{ humanRequestedOn }}</span>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ArchiveStatus, humanifyFileSize } from '@/constants'
-import { computed } from 'vue'
+import { ArchiveStatus, type Archive, humanifyFileSize } from '@/constants'
+import { computed, type Ref } from 'vue'
 import { DateTime } from 'luxon'
 
 const props = defineProps<{ archive: Archive }>()
 
-const canBeDownloaded: boolean = computed(() => props.archive.status == ArchiveStatus.READY)
-const archiveFileSize: int = computed(() => humanifyFileSize(props.archive.filesize))
+const canBeDownloaded: Ref<boolean> = computed(() => props.archive.status == ArchiveStatus.READY)
+const archiveFileSize: Ref<string> = computed(() => humanifyFileSize(props.archive.filesize!))
+const humanRequestedOn: Ref<string> = computed(() => (props.archive.requested_on) ? formattedDate(props.archive.requested_on) : '-')
 
 function formattedDate(date: string): string {
-  return new DateTime(date).toLocaleString(DateTime.DATETIME_MED_WITH_WEEKDAY)
+  return DateTime.fromISO(date).toLocaleString(DateTime.DATETIME_MED_WITH_WEEKDAY)
 }
 </script>
 

frontend/src/components/ZIMMetadataComponent.vue

@@ -114,7 +114,7 @@
             editable
             inputPlaceholder="ZIM Tags"
             :default-tags="archiveMetadataFormModal.tags"
-            :onChanged="(results) => (archiveMetadataFormModal.tags = results)"
+            :onChanged="(results: string[]) => (archiveMetadataFormModal.tags = results)"
             :allowPaste="{ delimiter: ',' }"
             :allowDuplicates="false"
           />
@@ -185,6 +185,7 @@ import { type ArchiveMetadataFormType, DEFAULT_ILLUSTRATION, DEFAULT_MAIN_LOGO }
 import { useAppStore, useModalStore, useProjectStore } from '@/stores/stores'
 import { refreshArchives } from '@/utils'
 import { getLastPreviousArchive } from '@/commons'
+// @ts-ignore
 import { SmartTagz } from 'smart-tagz'
 import 'smart-tagz/dist/smart-tagz.css'
 import ImageUpload from '@/components/ImageUpload.vue'
@@ -196,8 +197,8 @@ const { lastProjectPendingArchive } = storeToRefs(storeProject)
 
 let inMetadataEditMode = ref(false)
 
-function eatEvent(e) {
-  e.preventDefault()
+function eatEvent(event: Event) {
+  event.preventDefault()
 }
 
 function formModalFromArchive() {
@@ -216,7 +217,7 @@ function formModalFromArchive() {
       illustration: lastPreviousArchive.config.illustration,
       main_logo: lastPreviousArchive.config.main_logo,
       filename: lastPreviousArchive.config.filename,
-      email: lastPreviousArchive.email
+      email: lastPreviousArchive.email ? lastPreviousArchive.email : ''
     }
   }
 
@@ -226,7 +227,7 @@ function formModalFromArchive() {
   return {
     title: storeProject.lastProjectPendingArchive.config.title || '',
     description: storeProject.lastProjectPendingArchive.config.description || '',
-    name: storeProject.lastProjectPendingArchive.config.name || `${storeProject.lastProject.name}`,
+    name: storeProject.lastProjectPendingArchive.config.name || (storeProject.lastProject === null) ? '' : `${storeProject.lastProject.name}`,
     publisher: storeProject.lastProjectPendingArchive.config.publisher || 'nautilus by openZIM',
     creator: storeProject.lastProjectPendingArchive.config.creator || '',
     languages: storeProject.lastProjectPendingArchive.config.languages || 'eng',
@@ -236,15 +237,17 @@ function formModalFromArchive() {
     main_logo: storeProject.lastProjectPendingArchive.config.main_logo || DEFAULT_MAIN_LOGO,
     filename:
       storeProject.lastProjectPendingArchive.config.filename ||
-      `${storeProject.lastProject.name}.zim`,
+      `nautilus.zim`,
     email: storeProject.lastProjectPendingArchive.config.email || ''
   }
 }
 
+// @ts-ignore
 const archiveMetadataFormModal: Ref<ArchiveMetadataFormType> = ref(formModalFromArchive())
 
 watch(lastProjectPendingArchive, async () => {
   console.debug('archive update in store, updating form')
+  // @ts-ignore
   archiveMetadataFormModal.value = formModalFromArchive()
 })
 
@@ -266,6 +269,8 @@ async function actuallyUpdateMetadata() {
     }
   }
   try {
+    if (storeProject.lastProjectId === null || storeProject.lastProjectPendingArchive === null)
+      throw("missing IDs")
     const response = await storeApp.axiosInstance.patch<string>(
       `/projects/${storeProject.lastProjectId}/archives/${storeProject.lastProjectPendingArchive.id}`,
       archivePatchData
@@ -284,6 +289,8 @@ async function requestZIM() {
   console.log('lets GO!')
   const archivePostData = { email: archiveMetadataFormModal.value.email || '' }
   try {
+    if (storeProject.lastProjectId === null || storeProject.lastProjectPendingArchive === null)
+      throw("missing IDs")
     const response = await storeApp.axiosInstance.post<string>(
       `/projects/${storeProject.lastProjectId}/archives/${storeProject.lastProjectPendingArchive.id}/request`,
       archivePostData
@@ -307,7 +314,8 @@ async function exitMetadataEditModeHandler() {
     actuallyUpdateMetadata,
     async () => {
       inMetadataEditMode.value = false
-    }
+    },
+    []
   )
 }
 

frontend/src/constants.ts

@@ -20,7 +20,7 @@ export interface Archive {
   project_id: string
   status: string
   email?: string
-  filesize?: int
+  filesize?: number
   created_on: string
   requested_on?: string
   completed_on?: string
@@ -39,6 +39,7 @@ export interface ArchiveConfig {
   illustration: string
   filename: string
   main_logo: string
+  email: string
 }
 
 export interface User {
@@ -194,9 +195,12 @@ export type ArchiveMetadataFormType = {
   name: string
   creator: string
   publisher: string
-  language: string
+  languages: string
   filename: string
   tags: string[]
+  illustration: string
+  main_logo: string
+  email: string
 }
 
 export enum ArchiveStatus {

frontend/src/stores/stores.ts

@@ -16,12 +16,12 @@ export const useProjectStore = defineStore(
   'projectId',
   () => {
     const lastProjectId: Ref<string | null> = ref(null)
-    const projects: Ref<Project[]> = ref([])
+    const projects: Ref<Array<Project>> = ref([])
     const lastProject: Ref<Project | null> = ref(null)
-    const lastProjectArchives: Ref<Archive[]> = ref([])
+    const lastProjectArchives: Ref<Array<Archive>> = ref([])
     const lastProjectPendingArchive: Ref<Archive | null> = ref(null)
 
-    function setProjects(newIds: Project[]) {
+    function setProjects(newIds: Array<Project>) {
       projects.value = newIds
       if (lastProjectId.value) {
         lastProject.value =

frontend/src/views/ProjectView.vue

@@ -94,7 +94,7 @@
     </div>
   </div>
   <div class="m-5">
-    <ZIMMetadataComponent @update-archive-metadata="updateArchiveMetadata" />
+    <ZIMMetadataComponent />
   </div>
 </template>
 <script setup lang="ts">
@@ -450,10 +450,6 @@ async function updateSingleFileMetadata(
   files.value.get(renderId)!.file.filename = newMetaData.filename
 }
 
-async function updateArchiveMetadata(value) {
-  console.log('updateArchiveMetadata!!', value)
-}
-
 refreshFileStatus()
 refreshArchives()
 </script>

frontend/tsconfig.app.json

@@ -5,6 +5,7 @@
   "compilerOptions": {
     "composite": true,
     "baseUrl": ".",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "paths": {
       "@/*": ["./src/*"]
     }