add restart always to nginx service

.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
+```
 
+## Déploiement
+```sh
 # 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
+certbot certonly --dns-ovh --dns-ovh-credentials ~/.secrets/certbot/ovh.ini -d bookshelf.aldon.fr
-```
-
-# Set env variables inside secrets action
-```sh
-SERVICE_ORIGIN
-DB_HOST
-SERVICE_SECRET_KEY
-MARIADB_USER
-MARIADB_PASSWORD
-MARIADB_ROOT_PASSWORD
-MARIADB_DATABASE
 ```
+## TODO
+Change `front/src/config.js` : Variabilize `ROOT_FQDN`

docker-compose.dev.yml

@@ -0,0 +1,52 @@
+version: "3.9"
+
+services:
+  back:
+    image: python:3.10
+    working_dir: /code
+    volumes:
+      - ./back:/code
+    command: >
+      sh -c "pip install -r requirements.txt &&
+             uvicorn main:app --host 0.0.0.0 --port 8000 --reload"
+    environment:
+      SERVICE_ORIGIN: ${SERVICE_ORIGIN}
+      DB_HOST: database
+      MARIADB_USER: ${MARIADB_USER}
+      MARIADB_PASSWORD: ${MARIADB_PASSWORD}
+      MARIADB_DATABASE: ${MARIADB_DATABASE}
+      SERVICE_SECRET_KEY: ${SERVICE_SECRET_KEY}
+    ports:
+      - "8000:8000"
+    depends_on:
+      - database
+
+  front:
+    image: node:19.1-alpine
+    working_dir: /app
+    volumes:
+      - ./front:/app
+    command: sh -c "npm install && npm run serve"
+    ports:
+      - "8080:8080"
+    environment:
+      VUE_APP_ROOT_FQDN: ${SERVICE_ROOT_FQDN}
+    depends_on:
+      - back
+
+  database:
+    image: mariadb
+    restart: always
+    environment:
+      MARIADB_USER: ${MARIADB_USER}
+      MARIADB_PASSWORD: ${MARIADB_PASSWORD}
+      MARIADB_ROOT_PASSWORD: ${MARIADB_ROOT_PASSWORD}
+      MARIADB_DATABASE: ${MARIADB_DATABASE}
+    volumes:
+      - db:/var/lib/mysql
+      - ./back/db/:/docker-entrypoint-initdb.d/
+    ports:
+      - "3306:3306"
+
+volumes:
+  db:

docker-compose.yml

@@ -1,9 +1,12 @@
-version: "2"
+version: "3.9"
 services:
   nginx:
+    restart: always
     build:
       context: .
       dockerfile: front/Dockerfile
+      args:
+        VUE_APP_ROOT_FQDN: ${SERVICE_ROOT_FQDN}
     ports:
       - 80:80
     depends_on:
@@ -32,6 +35,7 @@ services:
       MARIADB_PASSWORD: ${MARIADB_PASSWORD}
       MARIADB_ROOT_PASSWORD: ${MARIADB_ROOT_PASSWORD}
       MARIADB_DATABASE: ${MARIADB_DATABASE}
+      ROOT_FQDN: ${ROOT_FQDN}
     volumes:
       - db:/var/lib/mysql
       - ./back/db/:/docker-entrypoint-initdb.d/

front/Dockerfile

@@ -2,6 +2,9 @@ FROM node:19.1-alpine AS build
 
 WORKDIR /app
 
+ARG VUE_APP_ROOT_FQDN
+ENV VUE_APP_ROOT_FQDN=$VUE_APP_ROOT_FQDN
+
 COPY front/package.json front/package-lock.json /app/
 RUN npm install
 

front/src/App.vue

@@ -85,7 +85,6 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 5rem;
 }
 
 .router {

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>
@@ -26,7 +26,7 @@
 
 .page {
   border: none;
-  padding: 1rem;
+  padding: 0.5rem;
   margin: 0.2rem;
 }
 
@@ -34,6 +34,7 @@ footer {
   display: flex;
   padding: 0.2rem;
   align-items: center;
+  max-width: 100%;
 }
 
 

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})
         }
     },
@@ -35,7 +37,7 @@ export default {
 
 .search {
   display: flex;
-  min-width: 95%;
+  width: 100vw;
   margin-top: 1rem;
   margin-bottom: 1rem;
 }

front/src/components/TableView.vue

@@ -1,7 +1,7 @@
 <template>
 <table>
   <tr>
-    <th v-bind:style="{ 'min-width': this.width }" v-for="head in headings" :key="head">{{ head }}</th>
+    <th v-for="head in headings" :key="head">{{ head }}</th>
   </tr>
   <slot></slot>
 </table>
@@ -19,5 +19,25 @@ export default {
 <style scoped>
 th {
   text-align: left;
+  width: 20%;
+
 }
+
+tr {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+
+table {
+  display: flex;
+  flex-direction: column;
+}
+
+@media (max-width: 30em) {
+  tr {
+    width: 100vw;
+  }
+}
+
 </style>

front/src/config.js

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

front/src/views/TheBooks.vue

@@ -20,7 +20,7 @@
             </button>
           </form>
           <SearchHeader page="Books" @changeSearch="(s) => {editSearch(s)}"/>
-          <TableView ref="table" :headings="headings" width="15rem">
+          <TableView ref="table" :headings="headings">
             <tr v-for="book in this.$store.getters.getBooks" :key="book">
               <td v-if="editRow === book.biblio_Index">
                 <DropDown
@@ -87,7 +87,7 @@ export default {
   },
   data() {
     return {
-      headings: ['Author', 'Title', 'Editor', 'Type'],
+      headings: ['Author', 'Title', 'Editor', 'Type', 'Control'],
       editMode: false,
       editRow: undefined,
       addMode: false,
@@ -188,11 +188,45 @@ export default {
 </script>
 <style scoped>
 main {
-  max-width: 60.5vw;
+  width: 80vw
 }
 
-td input {
+header {
-  width: 14.5rem;
+  width: 80vw;
+}
+
+tr {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  width: 80vw;
+  align-items: center;
+
+}
+
+td {
+  width: 20%;
+}
+
+.button-panel {
+  width: 20%;
+  display: flex;
+  flex-direction: flex-end;
+}
+
+@media (max-width: 30em) {
+  main {
+    width: 100vw;
+  }
+
+  tr {
+    width: 100vw;
+  }
+
+  td {
+    overflow-x: hidden;
+    white-space: nowrap
+  }
 }
 
 @keyframes lineInsertedIn {