improve photo browser

ikit · Sep 24, 2023 · d0a2079 · d0a2079
1 parent 1da15f5
commit d0a2079
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 49 deletions.
diff --git a/absg-client/src/components/PhotoMetadataEditor.vue b/absg-client/src/components/PhotoMetadataEditor.vue
@@ -54,6 +54,11 @@
         style="padding: 0; margin-left: 34px; margin-top: 0;"
       />
 
+      <v-checkbox
+        v-model="photo.doublon"
+        label="Marquer comme doublon"
+      ></v-checkbox>
+
 
       <div style="text-align: center">
         <v-btn

diff --git a/absg-client/src/views/Photos/Browser.vue b/absg-client/src/views/Photos/Browser.vue
@@ -5,7 +5,7 @@
     style="padding:0"
   >
     <v-data-iterator
-      :items="photos"
+      :items="displayedPhotos"
       :items-per-page="filter.pageSize"
       :page="filter.pageIndex"
       :search="filter.search"
@@ -29,15 +29,17 @@
               style="max-width: 300px;"
             />
             <v-spacer />
+            <v-btn-toggle :disabled="isLoading">
+              <v-tooltip bottom>
+                <template #activator="{ on }">
+                  <v-btn @click.stop="switchViewDoublon()" v-on="on">
+                    <v-icon>{{ filter.viewDoublon ? "fa-solid fa-eye" : "fa-solid fa-eye-slash" }}</v-icon>
+                  </v-btn>
+                </template>
+                <span>Voir les photos signalées comme doublon</span>
+              </v-tooltip>
+            </v-btn-toggle>
 
-            <v-select
-              v-model="filter.collection"
-              :items="filter.collections"
-              label="Photos"
-              prepend-icon="fas fa-bars"
-              style="max-width: 300px;"
-              @change="loadCollection($event)"
-            />
 
             <v-spacer />
             <v-btn
@@ -49,7 +51,11 @@
               <v-icon>fa-chevron-left</v-icon>
             </v-btn>
             <span class="grey--text">
-              {{ filter.pageIndex }} / {{ numberOfPages }}
+              <v-text-field
+                v-model="filter.pageIndex"
+                style="max-width: 30px; display: inline-block;"
+                @input="gotoPage()"
+              /> / {{ numberOfPages }}
             </span>
             <v-btn
               icon
@@ -111,12 +117,12 @@ export default {
     store,
     data: () => ({
         isLoading: false,
-        photos: [], // La liste des photos à trier
+        photos: [], // La liste de toutes les photos
+        displayedPhotos: [], // La liste des photos pré-filtrée fournis à l'iterator
         expandedPhotos: [],
         filter: {
             search: null, // recherche multicritère
-            collection: "A trier",
-            collections: ["A trier", "Date manquante", "Personnes manquantes", "Lieu manquant"],
+            viewDoublon: false, // est-ce qu'on affiche aussi les photos signalées comme doublons
             pageIndex: 1, // page courante affichée
             pageSize: 24, // nombre de photos affichées par page
         },
@@ -144,21 +150,14 @@ export default {
         this.loadCollection()
     },
     methods: {
-        loadCollection(collection = null) {
+        loadCollection() {
             this.isLoading = true;
-            let url = `/api/photos/to-check`;
-            if (collection === this.filter.collections[1]) {
-                url += "?collection=date"
-            } else if (collection === this.filter.collections[2]) {
-                url += "?collection=person"
-            } else if (collection === this.filter.collections[3]) {
-                url += "?collection=place"
-            }
-
-            axios.get(url).then(response => {
+            axios.get(`/api/photos/all`).then(response => {
                 let idx = 0;
                 this.photos = parseAxiosResponse(response).map(e => ({ ...e, index: idx++ }));
-                store.commit('photosGalleryReset', this.photos);
+                this.displayedPhotos = this.photos.filter(p => !p.doublon || this.filter.viewDoublon );
+                this.filter.pageIndex = 1;
+                store.commit('photosGalleryReset', this.displayedPhotos );
                 this.isLoading = false;
             }).catch( err => {
                 store.commit('onError', err);
@@ -177,6 +176,18 @@ export default {
         formerPage () {
             if (this.filter.pageIndex > 1) this.filter.pageIndex -= 1;
             else this.filter.pageIndex = this.numberOfPages;
+        },
+        gotoPage () {
+            this.filter.pageIndex = pageIndex;
+            if (this.filter.pageIndex > this.numberOfPages) this.filter.pageIndex = this.numberOfPages;
+            if (this.filter.pageIndex < 1) this.filter.pageIndex = 1;
+            
+        },
+        switchViewDoublon() {
+          debugger;
+          this.filter.viewDoublon = !this.filter.viewDoublon;
+          this.displayedPhotos = this.photos.filter(p => !p.doublon || this.filter.viewDoublon );
+          store.commit('photosGalleryReset', this.displayedPhotos);
         }
     }
 }

diff --git a/absg-core/src/controllers/PhotoController.ts b/absg-core/src/controllers/PhotoController.ts
@@ -10,35 +10,16 @@ export class PhotosController {
     private aRepo = getRepository(PhotoAlbum);
 
     /**
-     * Récupère la liste des photos à trier
+     * Récupère la liste des photos pour l'explorateur
      */
-    @Get("/to-check")
+    @Get("/all")
     async toCheck(@QueryParam("collection") collection: string) {
-        // On gère le filtre en fonction de la collection demandé:
-        // - date: toutes les photos dont la date est manquante
-        // - person: toutes les photos où personnes n'est indiqué
-        // - place: toutes les photos où le lieux n'est pas indiqué
-        // => par défaut: renvoie toutes les photos où aucunes des 3 infos n'est pas renseigné
-        let filter = null;
-        switch (collection) {
-            case "date":
-                filter = "p.date IS NULL";
-                break;
-            case "person":
-                filter = "p.persons IS NULL";
-                break;
-            case "place":
-                filter = "p.place IS NULL";
-                break;
-            default:
-                filter = "p.date IS NULL AND p.persons IS NULL AND p.place IS NULL";
-        }
-
         // On récupère les photos à checker
+        // Par défaut on les trie par ordre chronologique (celles sans dates sont à la fin par ordre d'id)
         const photos = await this.repo
             .createQueryBuilder("p")
-            .where(filter)
-            .orderBy("p.id")
+            .orderBy("p.date", "ASC")
+            .addOrderBy("p.id", "ASC")
             .getMany();
 
         return photos.map(p => ({