From 4bb802acbc5fbb2dd157e0c83cb7280bbb84abf0 Mon Sep 17 00:00:00 2001
From: Andreani Jean <ja.andreani@gmail.com>
Date: Mon, 31 Jul 2023 15:53:39 +0200
Subject: [PATCH] fix interface + button & link css + font css viewer

---
 src/components/Button.vue                  |  5 ++++-
 src/components/Header.vue                  | 23 ++++++++++------------
 src/components/ImageItem.vue               |  2 +-
 src/components/InputUpload.vue             |  8 ++++----
 src/components/Link.vue                    |  8 +++++---
 src/components/upload/ImportedSection.vue  | 14 ++++++++++---
 src/components/upload/UploadLoader.vue     |  7 ++++++-
 src/views/HomeView.vue                     |  3 ++-
 src/views/MySequenceView.vue               |  1 +
 src/views/SharePicturesView.vue            |  4 +++-
 src/views/interfaces/UploadPicturesView.ts |  2 +-
 11 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/src/components/Button.vue b/src/components/Button.vue
index dd85376..e57bbe1 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -14,6 +14,9 @@
 </template>
 
 <script lang="ts" setup>
+import type { PropType } from 'vue'
+
+type TypeInterface = 'button' | 'submit' | 'reset'
 defineProps({
   icon: { type: String, default: null },
   disabled: { type: Boolean, default: false },
@@ -21,7 +24,7 @@ defineProps({
   text: { type: String, default: '' },
   tooltip: { type: String, default: '' },
   look: { type: String, default: '' },
-  type: { type: String, default: 'button' }
+  type: { type: String as PropType<TypeInterface>, default: 'button' }
 })
 </script>
 
diff --git a/src/components/Header.vue b/src/components/Header.vue
index bd962a4..754e9b5 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -6,12 +6,9 @@
     <nav class="nav">
       <div class="wrapper-logo desktop">
         <Link
-          :image="{
-            url: 'logo.jpeg',
-            alt: $t('general.header.alt_logo')
-          }"
+          :image="{ url: 'logo.jpeg', alt: $t('general.header.alt_logo') }"
           :text="title($t('general.header.title'))"
-          path="/"
+          :route="{ name: 'home' }"
         />
       </div>
       <div class="wrapper-logo responsive">
@@ -20,7 +17,7 @@
             url: 'logo.jpeg',
             alt: $t('general.header.alt_logo')
           }"
-          path="/"
+          :route="{ name: 'home' }"
         />
       </div>
       <div ref="list" class="wrapper-entries">
@@ -32,13 +29,13 @@
             <Link
               :text="$t('general.header.sequences_text')"
               icon="bi bi-images"
-              path="/mes-sequences"
+              :route="{ name: 'my-sequences' }"
               @click.native="closeModal"
             />
           </li>
           <li v-if="userProfileUrl.length" class="logged-link">
             <Link
-              path="/mes-informations"
+              :route="{ name: 'my-information' }"
               icon="bi bi-person"
               :text="$t('general.header.my_information_text')"
               @click.native="closeModal"
@@ -46,7 +43,7 @@
           </li>
           <li class="logged-link">
             <Link
-              path="/mes-parametres"
+              :route="{ name: 'my-settings' }"
               icon="bi bi-gear"
               :text="$t('general.header.my_settings_text')"
               @click.native="closeModal"
@@ -57,7 +54,7 @@
               type="external"
               icon="bi bi-power"
               :text="$t('general.header.logout_text')"
-              :path="getAuthRoute('auth/logout', route.path)"
+              :ex="getAuthRoute('auth/logout', route.path)"
               @click.native="closeModal"
             />
           </li>
@@ -67,14 +64,14 @@
             <Link
               :text="$t('general.header.upload_text')"
               look="button button--blue"
-              path="/telecharger"
+              :route="{ name: 'upload-pictures' }"
               @click.native="closeModal"
             />
           </div>
           <div>
             <Link
               :text="$t('general.header.contribute_text')"
-              path="/partager-des-photos"
+              :route="{ name: 'share-pictures' }"
               @click.native="closeModal"
             />
           </div>
@@ -96,7 +93,7 @@
             <Link
               type="external"
               icon="bi bi-person-circle"
-              :path="getAuthRoute('auth/login', route.path)"
+              :path-external="getAuthRoute('auth/login', route.path)"
             />
           </div>
         </div>
diff --git a/src/components/ImageItem.vue b/src/components/ImageItem.vue
index b63aadd..5c0dc05 100644
--- a/src/components/ImageItem.vue
+++ b/src/components/ImageItem.vue
@@ -51,7 +51,7 @@
               icon="bi bi-cloud-download-fill"
               type="external"
               target="_blank"
-              :path="hrefHd"
+              :path-external="hrefHd"
             />
           </div>
         </div>
diff --git a/src/components/InputUpload.vue b/src/components/InputUpload.vue
index a5f9bde..0926477 100644
--- a/src/components/InputUpload.vue
+++ b/src/components/InputUpload.vue
@@ -1,8 +1,8 @@
 <template>
   <label
-    @dragover="dragover"
-    @dragleave="dragleave"
-    @drop="drop"
+    @dragover="() => dragover"
+    @dragleave="() => dragleave"
+    @drop="() => drop"
     :class="['file-upload', { dragging: isDragging }]"
   >
     <input
@@ -11,7 +11,7 @@
       multiple
       :accept="accept"
       class="input-file"
-      @change="changeFile"
+      @change="() => changeFile"
     />
     <i class="bi bi-cloud-upload-fill"></i>
     <span v-if="text" class="input-text">
diff --git a/src/components/Link.vue b/src/components/Link.vue
index 474a60f..36a8ef5 100644
--- a/src/components/Link.vue
+++ b/src/components/Link.vue
@@ -1,7 +1,7 @@
 <template>
   <a
     v-if="type === 'external'"
-    :href="path"
+    :href="pathExternal"
     :target="target"
     :class="['default', look, { disabled }]"
     :title="titleImg"
@@ -14,7 +14,7 @@
   </a>
   <router-link
     v-else
-    :to="path"
+    :to="route"
     :class="['default', look, { disabled }]"
     :title="text"
   >
@@ -28,6 +28,7 @@
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 import type { PropType } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
 import { img } from '../utils/image'
 
 const { t } = useI18n()
@@ -38,7 +39,8 @@ interface ImageInterface {
 
 const props = defineProps({
   text: { type: String, default: null },
-  path: { type: [String, Object], default: '' },
+  route: { type: Object as PropType<RouteLocationRaw>, default: {} },
+  pathExternal: { type: String, default: '' },
   look: { type: String, default: '' },
   type: { type: String, default: null },
   alt: { type: String, default: '' },
diff --git a/src/components/upload/ImportedSection.vue b/src/components/upload/ImportedSection.vue
index bc651c2..77b4269 100644
--- a/src/components/upload/ImportedSection.vue
+++ b/src/components/upload/ImportedSection.vue
@@ -24,7 +24,7 @@
         <Link
           :text="$t('pages.upload.sequence_link')"
           look="button button--white"
-          :path="{ name: 'sequence', params: { id: sequence.id } }"
+          :route="{ name: 'sequence', params: { id: sequence.id } }"
         />
       </div>
     </div>
@@ -45,14 +45,22 @@
 </template>
 
 <script setup lang="ts">
+import type { PropType } from 'vue'
 import Link from '@/components/Link.vue'
 import PictureItem from '@/components/upload/PictureItem.vue'
+import type { uploadErrorInterface } from '@/views/interfaces/UploadPicturesView'
 const props = defineProps({
   index: { type: Number, default: 0 },
   sequence: { type: Object, default: {} },
   picturesCount: { type: Number, default: null },
-  uploadErrors: { type: Array, default: [] },
-  uploadPictures: { type: Array, default: [] }
+  uploadErrors: {
+    type: Array as PropType<uploadErrorInterface[]>,
+    default: []
+  },
+  uploadPictures: {
+    type: Array as PropType<uploadErrorInterface[]>,
+    default: []
+  }
 })
 </script>
 
diff --git a/src/components/upload/UploadLoader.vue b/src/components/upload/UploadLoader.vue
index 45446dd..59f6827 100644
--- a/src/components/upload/UploadLoader.vue
+++ b/src/components/upload/UploadLoader.vue
@@ -27,13 +27,18 @@
 import Loader from '@/components/Loader.vue'
 import Button from '@/components/Button.vue'
 import { computed } from 'vue'
+import type { PropType } from 'vue'
+import type { sequenceInterface } from '@/views/interfaces/UploadPicturesView'
 import { useI18n } from 'vue-i18n'
 const { t } = useI18n()
 const props = defineProps({
   loadPercentage: { type: String, default: '0%' },
   loadTextSize: { type: String, default: '0 Mo' },
   isLoaded: { type: Boolean, default: false },
-  uploadedSequences: { type: Array, default: [] },
+  uploadedSequences: {
+    type: Array as PropType<sequenceInterface[]>,
+    default: []
+  },
   picturesCount: { type: Number, default: null }
 })
 
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index c3b58da..6de3731 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -51,11 +51,12 @@ onMounted(async () => {
   }
 })
 </script>
-<style scoped>
+<style scoped lang="scss">
 .entry-page {
   display: flex;
 }
 .entry-viewer {
+  font-size: 137.5%;
   width: 100vw;
   position: relative;
   min-height: calc(100vh - 8rem);
diff --git a/src/views/MySequenceView.vue b/src/views/MySequenceView.vue
index 47bd995..8a21cb4 100644
--- a/src/views/MySequenceView.vue
+++ b/src/views/MySequenceView.vue
@@ -555,6 +555,7 @@ async function patchOrDeleteCollectionItems(
   width: 50vw;
   position: relative;
   height: calc(100vh - 8rem);
+  font-size: 137.5%;
 }
 .menu-right {
   width: 50vw;
diff --git a/src/views/SharePicturesView.vue b/src/views/SharePicturesView.vue
index 0ef00ec..1c06d23 100644
--- a/src/views/SharePicturesView.vue
+++ b/src/views/SharePicturesView.vue
@@ -47,7 +47,9 @@
                 :text="$t('pages.share_pictures.user_account_button')"
                 type="external"
                 look="button button--blue"
-                :path="getAuthRoute('auth/login', 'partager-des-photos')"
+                :path-external="
+                  getAuthRoute('auth/login', 'partager-des-photos')
+                "
               />
             </div>
           </div>
diff --git a/src/views/interfaces/UploadPicturesView.ts b/src/views/interfaces/UploadPicturesView.ts
index 327f9a2..a357d11 100644
--- a/src/views/interfaces/UploadPicturesView.ts
+++ b/src/views/interfaces/UploadPicturesView.ts
@@ -1,7 +1,7 @@
 export interface sequenceInterface {
   title: string
   id: string
-  pictures: unknown[]
+  pictures: any[]
   picturesOnError: uploadErrorInterface[] | []
   pictureCount: number
   pictureSize: string