fix front pagination and search

.env.example

@@ -1,7 +1,10 @@
-SERVICE_ORIGIN
+DB_HOST=database
-DB_HOST
+MARIADB_USER=root
-MARIADB_USER
+# openssl rand -hex 32
-SERVICE_SECRET_KEY
+SERVICE_SECRET_KEY=xxxx
-MARIADB_PASSWORD
+# openssl rand -hex 12
-MARIADB_ROOT_PASSWORD
+MARIADB_PASSWORD=xxxx
-MARIADB_DATABASE
+# openssl rand -hex 12
+MARIADB_ROOT_PASSWORD=xxxx
+MARIADB_DATABASE=bookshelf
+SERVICE_ORIGIN=http://localhost:8080

README.md

@@ -3,27 +3,22 @@ Ce projet est un gestionnaire de base de données pour la bibliotèque de la mai
 
 L'outil permet l'ajout, la modification, la suppression et de consulter les livres présents dans la base de donnée.
 
-## Deploiement
+## Développement local
 ### Avec Docker Compose
 ```sh
-docker-compose up --build -d
+docker compose -f docker-compose.dev.yml down -v
+docker compose -f docker-compose.dev.yml up
 
-# Init database
+# Init database (if database not initialized)
 docker-compose exec database mariadb -u root -p
 $>source /docker-entrypoint-initdb.d/*.sql
-
-# SSL https://certbot-dns-ovh.readthedocs.io/en/stable/
-# Create certificates
-certbot certonly --dns-ovh --dns-ovh-credentials ~/.secrets/certbot/ovh.ini -d home.aldon.fr
 ```
 
-# Set env variables inside secrets action
+## Déploiement
 ```sh
-SERVICE_ORIGIN
+# SSL https://certbot-dns-ovh.readthedocs.io/en/stable/
-DB_HOST
+# Create certificates
-SERVICE_SECRET_KEY
+certbot certonly --dns-ovh --dns-ovh-credentials ~/.secrets/certbot/ovh.ini -d bookshelf.aldon.fr
-MARIADB_USER
+```
-MARIADB_PASSWORD
+## TODO
-MARIADB_ROOT_PASSWORD
+Change `front/src/config.js` : Variabilize `ROOT_FQDN`
-MARIADB_DATABASE
-```

front/src/components/PaginationFooter.vue

@@ -4,18 +4,18 @@
         <button class="page" v-for="index in $store.getters.getBookCurrentPage + 1" :key="index">{{ index }}</button>
     </footer>
     <footer v-else>
-        <button @click="$store.dispatch('fetchPageBooks', {page: 0, nooption: false})" class="page"> {{ '<<' }} </button>
+        <button @click="$store.dispatch('fetchPageBooks', {page: 0, nooption: false, ...$route.query})" class="page"> {{ '<<' }} </button>
         <button
             class="page"
             :class="{ 'red': $store.getters.getBookCurrentPage - Math.max(0, Math.min($store.getters.getBookCurrentPage - 2, $store.getters.getBookPageNb - 5)) === index}" 
             v-for="(n, index) in (Math.max(5, Math.min($store.getters.getBookCurrentPage + 2, $store.getters.getBookPageNb)) - Math.max(0, Math.min($store.getters.getBookCurrentPage - 2, $store.getters.getBookPageNb - 5)))"
             :key="index"
-            @click="$store.dispatch('fetchPageBooks', {page: Math.max(0, Math.min($store.getters.getBookCurrentPage - 2, $store.getters.getBookPageNb - 5)) + index, nooption: false})">
+            @click="$store.dispatch('fetchPageBooks', {page: Math.max(0, Math.min($store.getters.getBookCurrentPage - 2, $store.getters.getBookPageNb - 5)) + index, nooption: false, ...$route.query})">
             {{ Math.max(0, Math.min($store.getters.getBookCurrentPage - 2, $store.getters.getBookPageNb - 5)) + index }}
         </button>
         <p v-if="$store.getters.getBookCurrentPage !== $store.getters.getBookPageNb" class="elipsis">...</p>
-        <button v-if="$store.getters.getBookCurrentPage !== $store.getters.getBookPageNb" class="page" @click="$store.dispatch('fetchPageBooks', {page: $store.getters.getBookPageNb, nooption: false})">{{ $store.getters.getBookPageNb }}</button>
+        <button v-if="$store.getters.getBookCurrentPage !== $store.getters.getBookPageNb" class="page" @click="$store.dispatch('fetchPageBooks', {page: $store.getters.getBookPageNb, nooption: false, ...$route.query})">{{ $store.getters.getBookPageNb }}</button>
-        <button @click="$store.dispatch('fetchPageBooks', {page: $store.getters.getBookPageNb, nooption: false})" class="page"> >> </button>
+        <button @click="$store.dispatch('fetchPageBooks', {page: $store.getters.getBookPageNb, nooption: false, ...$route.query})" class="page"> >> </button>
     </footer>
 </div>
 </template>

front/src/components/SearchHeader.vue

@@ -5,6 +5,7 @@
     </div>
 </template>
 <script>
+import router from '@/router';
 export default {
     props: {
         page: String,
@@ -12,6 +13,7 @@ export default {
     watch: {
         search: function() {
             this.$emit('changeSearch', this.search);
+            router.push({ path: 'books', query: { search: this.search }})
             this.$store.dispatch('fetchPage'+this.page, {page: 0, nooption: false, search: this.search, order: this.order})
         }
     },

front/src/config.js

@@ -1,5 +1,5 @@
-const ROOT_FQDN = 'https://bookshelf.aldon.fr/api';
+// const ROOT_FQDN = 'https://bookshelf.aldon.fr/api';
-// const ROOT_FQDN = 'http://localhost:8000/api';
+const ROOT_FQDN = 'http://localhost:8000/api';
 
 export {
     ROOT_FQDN