Search: ajout endpoints et query API correcte

Style: ajout styles sur certaines pages
Changements structuration HTML

src/assets/css/style.css

@@ -23,11 +23,10 @@
   li {
   }
   a {
-
   }
   label {
   }
-  input, textarea {
+  input, textarea, button {
     @apply font-serif
   }
   @layer components {

src/backend.ts

@@ -1,5 +1,7 @@
 import PocketBase from 'pocketbase'
 const pb = new PocketBase('http://127.0.0.1:8090')
+import axios from 'axios'
+import { ref } from 'vue'
 
 
 // Copier ici les fonctions developpées en R214 | Système d'information
@@ -42,4 +44,26 @@ export async function unlinkOAuth(userid) {
 export async function unlinkWebauthnKey(userid) {
   await pb.collection('users').update(userid, { webauthn_id_b64: '', webauthn_credentials: null })
   return true
+}
+
+export async function changePasswordLoggedIn(userid, password, passwordConfirm, oldPassword) {
+  const userObject = {
+    "password": password,
+    "passwordConfirm": passwordConfirm,
+    "oldPassword": oldPassword
+  }
+  await pb.collection('users').update(userid, userObject)
+  return true
+}
+
+export async function saveContent(userid, idcontent, category_type) {
+  await pb.collection('content').update(userid, { idcontent: idcontent, category_type: category_type })
+  return true
+}
+
+export async function getContent(contentid) {
+  const content = await axios.get(
+    `https://api.artic.edu/api/v1/artworks/${contentid}`
+  )
+  return content.data.data
 }

src/components/ActionButton.vue

@@ -1,26 +1,27 @@
 <script setup lang="ts">
-const props = defineProps({
-  to: String,
-  text: String,
-  isLink: Boolean
-})
+import ArrowIcon from '@/components/icons/IconArrow.vue'
+const props = withDefaults(
+  defineProps<{
+    variant?: 'default' | 'dark' | 'outlined'
+    url: string
+    text: string
+  }>(),
+  { variant: 'default' }
+)
+const variantClass = {
+  default: 'border border-pink hover:shadow-[inset_0_0_0_8px_#feaa9b]',
+  dark: 'bg-black text-white',
+  outlined: 'text-white border border-white hover:shadow-[inset_0_0_0_8px_white]'
+}
 </script>
 
 <template>
-  <a
-    v-if="props.isLink"
-    class="flex rounded-lg bg-blue-500 text-white w-full justify-center py-1"
-    v-on="$props"
-    :href="to"
+  <RouterLink
+    :to="`${url}`"
+    class="inline-flex items-center gap-4 px-6 py-4 text-xs font-bold uppercase tracking-wide transition duration-300 ease-in-out lg:px-8 lg:py-6 lg:text-sm"
+    :class="variantClass[props.variant]"
   >
-    {{ props.text }}
-  </a>
-  <button
-    v-else
-    class="flex rounded-lg bg-blue-500 text-white w-full justify-center py-1"
-    v-on="$props"
-    :click="to"
-  >
-    {{ props.text }}
-  </button>
-</template>
+    <ArrowIcon />
+    {{ text }}
+  </RouterLink>
+</template>

src/components/CardContent.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import type { ContentType } from '@/types';
 import { RouterLink } from 'vue-router';
+import { ref } from 'vue'
+import IconBookmark from './icons/IconBookmark.vue';
+
+import { saveContent } from '@/backend';
+
+let windowSave = ref(false)
 
 defineProps<ContentType>()
 
@@ -9,8 +15,17 @@ defineProps<ContentType>()
 <template>
     <li class="flex flex-col gap-2 flex-none flex-shrink-0">
         <RouterLink :to="`/content/${id}`">
-        <img class="w-full h-1/3" :src="'https://www.artic.edu/iiif/2/'+image_id+'/full/843,/0/default.jpg'" :alt="alt_text" />
+            <div class="bg-gray-800 flex items-center justify-center">
+                <img class="w-32 h-full" :src="'https://www.artic.edu/iiif/2/'+image_id+'/full/843,/0/default.jpg'" :alt="alt_text" />
+            </div>
+
         <h3 class="line-clamp-1">{{ title }}</h3>
         </RouterLink>
+        <button class="place-self-end" @click="windowSave = ! windowSave">
+            <IconBookmark class="w-4" />
+        </button>
+        <div v-show="windowSave" class="absolute top-0 right-0 bg-slate-300">
+
+        </div>
     </li>
 </template>

src/components/ContentTag.vue

@@ -7,7 +7,9 @@ defineProps({
 </script>
 
 <template>
-    <RouterLink :to="`/search?tag=${tag}`" class="px-5 py-2 bg-slate-300/30 rounded-xl">
-        <span>{{ tag }}</span>
-    </RouterLink>
+    <li>
+        <RouterLink :to="`/search?tag=${tag}`" class="px-5 py-2 bg-slate-300/30 rounded-xl">
+            <span>{{ tag }}</span>
+        </RouterLink>
+    </li>
 </template>

src/components/ProfileCard.vue

@@ -18,7 +18,7 @@ const avatarUrl = ref<string>('')
 
 watch(currentuser, (newVal, oldVal) => {
   if (newVal) {
-    avatarUrl.value = pb.getFileUrl(newVal,newVal.avatar, {'thumb': '100x250'});
+    avatarUrl.value = pb.getFileUrl(newVal,newVal.avatar, {'thumb': '100x100'});
   }
 });
 
@@ -30,14 +30,14 @@ const doLogout = async () => {
 
 <template>
     <div v-if="currentuser" class="p-4 bg-slate-300 rounded-xl absolute top-20 right-5">
-        <div class="inline-flex justify-between">
+        <div class="inline-flex justify-between gap-14 items-center">
             <section class="inline-flex gap-3 items-center w-fit">
-                <img class="rounded-full w-[10%]" :src="avatarUrl" alt="Avatar utilisateur"> 
+                <img class="rounded-full w-8" :src="avatarUrl" alt="Avatar utilisateur"> 
                 <h4>{{ currentuser.surname }}</h4>
             </section>
-            <button class="w-full h-full" @click="doLogout"><IconLogout /></button>
+            <button class="w-fit h-fit" @click="doLogout"><IconLogout class="w-6 h-auto" /></button>
         </div>
-        <div class="border-t border-gray-500">
+        <div class="border-t border-gray-500 flex flex-col">
             <RouterLink to="/profile">Mon profil</RouterLink>
             <RouterLink to="/settings">Paramètres</RouterLink>
         </div>

src/components/icons/IconBookmark.vue

@@ -0,0 +1,6 @@
+<template>
+<svg width="24" height="32" viewBox="0 0 24 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5335 30.4962L1.53349 30.4962L1.5298 30.4988C1.52816 30.4993 1.5246 30.5 1.51875 30.5C1.51779 30.5 1.51702 30.5 1.5164 30.4999C1.51524 30.4998 1.51464 30.4997 1.51447 30.4997L1.51326 30.4993C1.512 30.4988 1.50917 30.4972 1.50597 30.494C1.50278 30.4908 1.50123 30.488 1.50069 30.4867L1.50031 30.4855C1.50026 30.4853 1.5 30.484 1.5 30.4813V3C1.5 2.17218 2.17218 1.5 3 1.5H21C21.8278 1.5 22.5 2.17218 22.5 3V30.4813C22.5 30.484 22.4997 30.4853 22.4997 30.4855L22.4993 30.4867C22.4988 30.488 22.4972 30.4908 22.494 30.494C22.4908 30.4972 22.488 30.4988 22.4867 30.4993L22.4855 30.4997C22.4853 30.4997 22.484 30.5 22.4813 30.5C22.4754 30.5 22.4719 30.4993 22.4702 30.4988L22.4665 30.4962L12.8602 23.7712L12 23.169L11.1398 23.7712L1.5335 30.4962Z" stroke="black" stroke-width="3"/>
+</svg>
+
+</template>

src/pages/content/[id].vue

@@ -26,21 +26,33 @@ console.log('getData : ', getData())
 </script>
 
 <template>
-  <div class="container mx-auto">
+  <div class="container mx-auto space-y-3">
     <RouterLink class="inline-flex gap-4 items-center" to="/"><IconChevronLeft class="scale-75"/>Retour</RouterLink>
     <h1>{{ artData.title }}</h1>
     <h2>par {{ artData.artist_title }}</h2>
     <img class="w-full h-auto" :src="'https://www.artic.edu/iiif/2/'+artData.image_id+'/full/843,/0/default.jpg'" :alt="artData.alt_text" />
-    <p v-if="artData.description" v-html="artData.description"></p>
-    <section>
+    <section class="space-y-4">
+      <h3>Description</h3>
+      <p v-if="artData.description" v-html="artData.description"></p>
+      <p v-else>Aucune description disponible</p>
+    </section>
+    <section class="space-y-4">
         <h3>Tags</h3>
-        <ContentTag v-for="(tag, index) in artData.category_titles" :key="index" :tag="tag"/>
+        <ul class="flex gap-3">
+          <ContentTag v-for="(tag, index) in artData.category_titles" :key="index" :tag="tag"/>
+        </ul>
     </section>
     <section>
       <h3>Du même artiste</h3>
+      <ul class="grid grid-cols-3">
+        <!-- TODO: faire une query sur l'artiste et afficher 3 de ses oeuvres (maximum) -->
+      </ul>
     </section>
     <section>
       <h3>Contenus similaires</h3>
+      <ul class="grid grid-cols-3">
+        <!-- TODO: faire une query sur le premier category_title et afficher 3 éléments (maximum) -->
+      </ul>
     </section>
   </div>
 </template>

src/pages/index.vue

@@ -35,6 +35,7 @@ const getData = async (): Promise<{ title: string, image_id: string }> => {
     const response = await axios.get('https://api.artic.edu/api/v1/artworks?limit=100');
     const { data } = response.data;
     artData.value = data;
+    console.log(artData.value);
     return artData.value;
   } catch (error) {
     console.error(error)

src/pages/login.vue

@@ -17,7 +17,6 @@ onMounted(async () => {
 
   pb.authStore.onChange(() => {
     currentuser.value = pb.authStore.model
-  
   }, true)
 });
 
@@ -54,6 +53,7 @@ const doLoginWebauthn = async () => {
 
   pb.authStore.save(finalResult.token, finalResult.user)
   currentuser.value = finalResult.user
+  location.reload()
   return finalResult
 }
 
@@ -99,7 +99,7 @@ let step2 = ref(false)
         <button class="p-3 bg-slate-300/20 rounded-lg shadow" type="button" @click="doLoginOauth">Connexion par Google</button>
       </div>
       <h3>Mot de passe oublié ?</h3>
-        <RouterLink to="/forgot-password" class="p-3 bg-slate-300/20 rounded-lg shadow" @click="">Réinitialiser le mot de passe</RouterLink>
+        <RouterLink to="/forgot-password" class="p-3 bg-slate-300/20 rounded-lg shadow">Réinitialiser le mot de passe</RouterLink>
       <section class="text-center">
         <h3>Pas de compte ?</h3>
         <RouterLink to="/register">Créer un compte</RouterLink>

src/pages/search.vue

@@ -4,34 +4,43 @@ import { onMounted, ref } from 'vue'
 import CardContent from '@/components/CardContent.vue';
 import axios from 'axios';
 
+import { getContent } from '@/backend';
+
 const route = useRoute()
 let tag = ref<string>('')
 
 onMounted(() => {
     tag.value = route.query.tag as string
 
-    const getData = async (): Promise<{ title: string, image_id: string }> => {
+    const getData = async () => {
     try {
-    const response = await axios.get(`https://api.artic.edu/api/v1/artworks/query[term][category_titles]=${tag.value}`);
-    const { data } = response.data;
-    artData.value = data;
-    console.log('artData : ', artData.value)
-    return artData.value;
-  } catch (error) {
-    console.error(error)
-    return Promise.reject(error);
-  }
-}
+        const response = await axios.get(`https://api.artic.edu/api/v1/artworks/search?query[match][category_titles]=${tag.value}&limit=50&fields=id,title,image_id,alt_text`);
+        const { data } = response.data;
+        artData.value = data;
+
+        // Utiliser getContent sur chaque élément de artData
+        for (let art of artData.value) {
+          const content = await getContent(art.id);
+          art.content = content;  // Ajouter le contenu à l'objet art
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    }
+
 console.log('getData : ', getData())
 console.log(tag.value)
 })
 
-const artData = ref<any>(null);
-
+const artData = ref<any[]>([]);
 
 </script>
 
 <template>
+  <section class="container">
     <h1>Recherche pour : {{ tag }}</h1>
-    <CardContent v-for="art in artData" v-bind="art" :key="artData.title" />
+    <ul class="grid grid-cols-3 gap-10">
+      <CardContent v-for="art in artData" v-bind="art" :key="artData.title" />
+    </ul>
+  </section>
 </template>