From 663eb586cfc80add88a23e4952f2c2d5d3c12225 Mon Sep 17 00:00:00 2001
From: dbroqua <contact@darkou.fr>
Date: Sun, 19 Mar 2023 10:03:10 +0100
Subject: [PATCH] #77 - Je suis capable de trier ma collecion par date d'ajout

---
 views/components/filters/artist.ejs           | 11 +++
 views/components/filters/format.ejs           | 11 +++
 views/components/filters/genre.ejs            | 12 +++
 views/components/filters/index.ejs            | 18 +++++
 views/components/filters/sort.ejs             | 15 ++++
 views/components/filters/style.ejs            | 11 +++
 views/components/filters/year.ejs             | 11 +++
 views/pages/collection.ejs                    | 81 +------------------
 .../pages/mon-compte/ma-collection/index.ejs  | 80 +-----------------
 9 files changed, 91 insertions(+), 159 deletions(-)
 create mode 100644 views/components/filters/artist.ejs
 create mode 100644 views/components/filters/format.ejs
 create mode 100644 views/components/filters/genre.ejs
 create mode 100644 views/components/filters/index.ejs
 create mode 100644 views/components/filters/sort.ejs
 create mode 100644 views/components/filters/style.ejs
 create mode 100644 views/components/filters/year.ejs

diff --git a/views/components/filters/artist.ejs b/views/components/filters/artist.ejs
new file mode 100644
index 0000000..4d806a5
--- /dev/null
+++ b/views/components/filters/artist.ejs
@@ -0,0 +1,11 @@
+<div class="field">
+    <label for="artist">Artiste</label>
+    <select id="artist" v-model="artist" @change="changeFilter">
+        <option value="">Tous</option>
+        <%
+            for (let i = 0; i < page.artists.length; i += 1 ) {
+                __append(`<option value="${page.artists[i]}">${page.artists[i]}</option>`);
+            }
+        %>
+    </select>
+</div>
\ No newline at end of file
diff --git a/views/components/filters/format.ejs b/views/components/filters/format.ejs
new file mode 100644
index 0000000..19ec703
--- /dev/null
+++ b/views/components/filters/format.ejs
@@ -0,0 +1,11 @@
+<div class="field">
+    <label for="format">Format</label>
+    <select id="format" v-model="format" @change="changeFilter">
+        <option value="">Tous</option>
+        <%
+            for (let i = 0; i < page.formats.length; i += 1 ) {
+                __append(`<option value="${page.formats[i]}">${page.formats[i]}</option>`);
+            }
+        %>
+    </select>
+</div>
diff --git a/views/components/filters/genre.ejs b/views/components/filters/genre.ejs
new file mode 100644
index 0000000..6a8eed9
--- /dev/null
+++ b/views/components/filters/genre.ejs
@@ -0,0 +1,12 @@
+
+<div class="field">
+    <label for="genre">Genre</label>
+    <select id="genre" v-model="genre" @change="changeFilter">
+        <option value="">Tous</option>
+        <%
+            for (let i = 0; i < page.genres.length; i += 1 ) {
+                __append(`<option value="${page.genres[i]}">${page.genres[i]}</option>`);
+            }
+        %>
+    </select>
+</div>
\ No newline at end of file
diff --git a/views/components/filters/index.ejs b/views/components/filters/index.ejs
new file mode 100644
index 0000000..559a47b
--- /dev/null
+++ b/views/components/filters/index.ejs
@@ -0,0 +1,18 @@
+<div class="filters">
+    <%- include('./artist') %>
+    <%- include('./format') %>
+    <%- include('./sort') %>
+</div>
+
+<div class="filters" v-if="moreFilters">
+    <%- include('./year') %>
+    <%- include('./genre') %>
+    <%- include('./style') %>
+</div>
+
+<span @click="showMoreFilters" class="showMoreFilters">
+  <template v-if="!moreFilters">Voir plus de filtres</template>
+  <template v-if="moreFilters">Voir moins de filtres</template>
+  <i class="icon-left-open down" v-if="!moreFilters"></i>
+  <i class="icon-left-open up" v-if="moreFilters"></i>
+</span>
\ No newline at end of file
diff --git a/views/components/filters/sort.ejs b/views/components/filters/sort.ejs
new file mode 100644
index 0000000..87588e3
--- /dev/null
+++ b/views/components/filters/sort.ejs
@@ -0,0 +1,15 @@
+<div class="field">
+  <label for="sortOrder">Trier par</label>
+  <select id="sortOrder" v-model="sortOrder" @change="changeSort">
+      <option value="artists_sort-asc">Artiste (A-Z)</option>
+      <option value="artists_sort-desc">Artiste (Z-A)</option>
+      <option value="year-asc">Année (1-9)</option>
+      <option value="year-desc">Année (9-1)</option>
+      <option value="country-asc">Pays (A-Z)</option>
+      <option value="country-desc">Pays (Z-A)</option>
+      <option value="formats.name-asc">Format (A-Z)</option>
+      <option value="formats.name-desc">Format (Z-A)</option>
+      <option value="createdAt-asc">Date d'ajout (1-9)</option>
+      <option value="createdAt-desc">Date d'ajout (9-1)</option>
+  </select>
+</div>
\ No newline at end of file
diff --git a/views/components/filters/style.ejs b/views/components/filters/style.ejs
new file mode 100644
index 0000000..f62f044
--- /dev/null
+++ b/views/components/filters/style.ejs
@@ -0,0 +1,11 @@
+<div class="field">
+    <label for="style">Style</label>
+    <select id="style" v-model="style" @change="changeFilter">
+        <option value="">Tous</option>
+        <%
+            for (let i = 0; i < page.styles.length; i += 1 ) {
+                __append(`<option value="${page.styles[i]}">${page.styles[i]}</option>`);
+            }
+        %>
+    </select>
+</div>
\ No newline at end of file
diff --git a/views/components/filters/year.ejs b/views/components/filters/year.ejs
new file mode 100644
index 0000000..3de4631
--- /dev/null
+++ b/views/components/filters/year.ejs
@@ -0,0 +1,11 @@
+<div class="field">
+    <label for="format">Année</label>
+    <select id="format" v-model="year" @change="changeFilter">
+        <option value="">Toutes</option>
+        <%
+            for (let i = 0; i < page.years.length; i += 1 ) {
+                __append(`<option value="${page.years[i]}">${page.years[i]}</option>`);
+            }
+        %>
+    </select>
+</div>
\ No newline at end of file
diff --git a/views/pages/collection.ejs b/views/pages/collection.ejs
index 3272d8b..ec2e051 100644
--- a/views/pages/collection.ejs
+++ b/views/pages/collection.ejs
@@ -3,86 +3,7 @@
         Collection de <%= page.username %>
     </h1>
 
-    <div class="filters">
-        <div class="field">
-            <label for="artist">Artiste</label>
-            <select id="artist" v-model="artist" @change="changeFilter">
-                <option value="">Tous</option>
-                <%
-                    for (let i = 0; i < page.artists.length; i += 1 ) {
-                        __append(`<option value="${page.artists[i]}">${page.artists[i]}</option>`);
-                    }
-                %>
-            </select>
-        </div>
-        <div class="field">
-            <label for="format">Format</label>
-            <select id="format" v-model="format" @change="changeFilter">
-                <option value="">Tous</option>
-                <%
-                    for (let i = 0; i < page.formats.length; i += 1 ) {
-                        __append(`<option value="${page.formats[i]}">${page.formats[i]}</option>`);
-                    }
-                %>
-            </select>
-        </div>
-        <div class="field">
-            <label for="sortOrder">Trier par</label>
-            <select id="sortOrder" v-model="sortOrder" @change="changeSort">
-                <option value="artists_sort-asc">Artiste (A-Z)</option>
-                <option value="artists_sort-desc">Artiste (Z-A)</option>
-                <option value="year-asc">Année (A-Z)</option>
-                <option value="year-desc">Année (Z-A)</option>
-                <option value="country-asc">Pays (A-Z)</option>
-                <option value="country-desc">Pays (Z-A)</option>
-                <option value="formats.name-asc">Format (A-Z)</option>
-                <option value="formats.name-desc">Format (Z-A)</option>
-            </select>
-        </div>
-    </div>
-
-    <div class="filters" v-if="moreFilters">
-        <div class="field">
-            <label for="format">Année</label>
-            <select id="format" v-model="year" @change="changeFilter">
-                <option value="">Toutes</option>
-                <%
-                    for (let i = 0; i < page.years.length; i += 1 ) {
-                        __append(`<option value="${page.years[i]}">${page.years[i]}</option>`);
-                    }
-                %>
-            </select>
-        </div>
-        <div class="field">
-            <label for="genre">Genre</label>
-            <select id="genre" v-model="genre" @change="changeFilter">
-                <option value="">Tous</option>
-                <%
-                    for (let i = 0; i < page.genres.length; i += 1 ) {
-                        __append(`<option value="${page.genres[i]}">${page.genres[i]}</option>`);
-                    }
-                %>
-            </select>
-        </div>
-        <div class="field">
-            <label for="style">Style</label>
-            <select id="style" v-model="style" @change="changeFilter">
-                <option value="">Tous</option>
-                <%
-                    for (let i = 0; i < page.styles.length; i += 1 ) {
-                        __append(`<option value="${page.styles[i]}">${page.styles[i]}</option>`);
-                    }
-                %>
-            </select>
-        </div>
-    </div>
-
-    <span @click="showMoreFilters" class="showMoreFilters">
-        <template v-if="!moreFilters">Voir plus de filtres</template>
-        <template v-if="moreFilters">Voir moins de filtres</template>
-        <i class="icon-left-open down" v-if="!moreFilters"></i>
-        <i class="icon-left-open up" v-if="moreFilters"></i>
-    </span>
+    <%- include('../components/filters/index') %>
 
     <div class="grid grid-cols-1 md:grid-cols-2 list">
         <div class="loader" v-if="loading">
diff --git a/views/pages/mon-compte/ma-collection/index.ejs b/views/pages/mon-compte/ma-collection/index.ejs
index c061d9a..5598746 100644
--- a/views/pages/mon-compte/ma-collection/index.ejs
+++ b/views/pages/mon-compte/ma-collection/index.ejs
@@ -7,86 +7,8 @@
         <i class="icon-share"></i> Voir ma collection partagée
     </a>
 
-    <div class="filters">
-        <div class="field">
-            <label for="artist">Artiste</label>
-            <select id="artist" v-model="artist" @change="changeFilter">
-                <option value="">Tous</option>
-                <%
-                    for (let i = 0; i < page.artists.length; i += 1 ) {
-                        __append(`<option value="${page.artists[i]}">${page.artists[i]}</option>`);
-                    }
-                %>
-            </select>
-        </div>
-        <div class="field">
-            <label for="format">Format</label>
-            <select id="format" v-model="format" @change="changeFilter">
-                <option value="">Tous</option>
-                <%
-                    for (let i = 0; i < page.formats.length; i += 1 ) {
-                        __append(`<option value="${page.formats[i]}">${page.formats[i]}</option>`);
-                    }
-                %>
-            </select>
-        </div>
-        <div class="field">
-            <label for="sortOrder">Trier par</label>
-            <select id="sortOrder" v-model="sortOrder" @change="changeSort">
-                <option value="artists_sort-asc">Artiste (A-Z)</option>
-                <option value="artists_sort-desc">Artiste (Z-A)</option>
-                <option value="year-asc">Année (A-Z)</option>
-                <option value="year-desc">Année (Z-A)</option>
-                <option value="country-asc">Pays (A-Z)</option>
-                <option value="country-desc">Pays (Z-A)</option>
-                <option value="formats.name-asc">Format (A-Z)</option>
-                <option value="formats.name-desc">Format (Z-A)</option>
-            </select>
-        </div>
-    </div>
 
-    <div class="filters" v-if="moreFilters">
-        <div class="field">
-            <label for="format">Année</label>
-            <select id="format" v-model="year" @change="changeFilter">
-                <option value="">Toutes</option>
-                <%
-                    for (let i = 0; i < page.years.length; i += 1 ) {
-                        __append(`<option value="${page.years[i]}">${page.years[i]}</option>`);
-                    }
-                %>
-            </select>
-        </div>
-        <div class="field">
-            <label for="genre">Genre</label>
-            <select id="genre" v-model="genre" @change="changeFilter">
-                <option value="">Tous</option>
-                <%
-                    for (let i = 0; i < page.genres.length; i += 1 ) {
-                        __append(`<option value="${page.genres[i]}">${page.genres[i]}</option>`);
-                    }
-                %>
-            </select>
-        </div>
-        <div class="field">
-            <label for="style">Style</label>
-            <select id="style" v-model="style" @change="changeFilter">
-                <option value="">Tous</option>
-                <%
-                    for (let i = 0; i < page.styles.length; i += 1 ) {
-                        __append(`<option value="${page.styles[i]}">${page.styles[i]}</option>`);
-                    }
-                %>
-            </select>
-        </div>
-    </div>
-
-    <span @click="showMoreFilters" class="showMoreFilters">
-        <template v-if="!moreFilters">Voir plus de filtres</template>
-        <template v-if="moreFilters">Voir moins de filtres</template>
-        <i class="icon-left-open down" v-if="!moreFilters"></i>
-        <i class="icon-left-open up" v-if="moreFilters"></i>
-    </span>
+    <%- include('../../../components/filters/index') %>
 
     <div class="grid grid-cols-1 md:grid-cols-2 list hover">
         <div class="loader" v-if="loading">