add project files

front/src/App.vue

@@ -0,0 +1,192 @@
+<template>
+<div>
+  <nav class="header">
+    <router-link class="router" to="/">Home</router-link>
+    <router-link class="router" to="/about">About</router-link>
+    <router-link class="router" to="/films">Film library</router-link>
+    <router-link class="router" to="/books">Book library</router-link>
+    <router-link v-if="!$store.state.token" class="router" to="/login">Login</router-link>
+    <a class="router" v-else @click="logout">Log out</a>
+  </nav>
+  <router-view class="view"/>
+</div>
+</template>
+
+<script>
+import { routerLink, routerView} from 'vue-router';
+
+export default {
+  name: 'App',
+  components: {
+    routerLink,
+    routerView
+  },
+  beforeMount() {
+    let token = localStorage.getItem('token')
+    if (token) {
+      this.$store.state.token = localStorage.getItem('token')
+    }
+    else {
+      this.$store.state.token = ""
+      this.$router.push('/login')
+    }
+    this.$store.dispatch('getBooks', {page: 0, search: "", order: ""})
+    this.$store.dispatch('getFilms', {page: 0, search: "", order: ""})
+  }, 
+  methods: {
+    logout() {
+      this.$store.dispatch('logout')
+      this.$router.push('/login')
+    }
+  }
+}
+</script>
+
+<style>
+.red {
+  background-color: rgba(222, 22, 86); 
+  color: #fff;
+}
+
+.red:hover {
+  background-color: rgba(150, 22, 86); 
+}
+
+.green {
+  background-color: rgba(22, 222, 86); 
+}
+
+.green:hover {
+  background-color: rgba(22, 150, 86); 
+
+}
+header {
+  width: 60.5vw;
+  display: flex;
+}
+
+.header {
+  display: flex;
+  
+  /* width: 100%; */
+}
+body {
+  margin: 0px;
+}
+
+.button {
+  border: none;
+  padding: 0.2rem;
+  margin: 0.3rem;
+}
+
+
+.view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 5rem;
+}
+
+.router {
+  flex: 1 1 auto;
+  background-color: rgba(222, 22, 86); 
+  border: none;
+  color: white;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  transition: background-color 0.5s ease-in;
+}
+
+.router:focus {
+  background-color: rgba(150, 22, 86); 
+}
+
+.router:hover {
+  background-color: rgba(150, 22, 86); 
+}
+
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+nav a {
+  padding: 1rem;
+  margin: 0px;
+}
+
+table {
+  table-layout: fixed;
+}
+
+.button-panel {
+  display: flex;
+  flex-flow: row;
+}
+
+tr:nth-child(2n+1) {
+  background-color: rgba(11, 11, 11, 0.1);
+}
+
+tr {
+  text-align: left;
+}
+
+tr:hover {
+  background-color: rgba(11, 11, 11, 0.1);
+}
+
+h1 {
+  flex: 1 1 auto;
+  text-align: left;
+}
+
+td { 
+    overflow: hidden; 
+    text-overflow: ellipsis; 
+    word-wrap: break-word;
+}
+
+.AddButton {
+  border: none;
+  height: 2rem;
+  width: 2rem;
+  margin-right: 0.2rem; 
+  justify-content: flex-end;
+  align-self: center;
+}
+
+.edit {
+  width: 2rem;
+  height: 2rem;
+}
+
+.AddForm {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation-duration: 0.3s;
+  animation-name: lineInsertedIn;
+  transition: height 0.3s;
+}
+.AddForm input {
+  margin: 1rem;
+}
+
+.AddForm .button {
+  align-self: center;
+  /* max-width: 5rem;
+  min-width: 5rem; */
+  align-self: flex-end
+}
+
+.AddForm label {
+  align-self: flex-start;
+}
+</style>

front/src/components/DropDown.vue

@@ -0,0 +1,109 @@
+<template>
+<div>
+    <input 
+        class="dropdown-input"
+        @focus="showOption"
+        @blur="hideOption"
+        v-model="inputVal" />
+    <button
+        class="dropdown button"
+        @blur="hideOption"
+        @click="toggleOption" >
+        <i class="fa-solid fa-angle-down" ></i>
+    </button>
+    <div class="dropdown-content" v-show="showOptions">
+        <div 
+            class="dropdown-item"
+            v-for="val in vals"
+            @mousedown="selectValue(val)"
+            :key="val">{{ val }}
+        </div>
+    </div>
+</div>
+</template>
+<script>
+export default {
+    props: {
+        field: String,
+        values: Array,
+        inputValue: String,
+    },
+    data() {
+        return {
+            inputVal: "",
+            showOptions: false,
+            selected: "",
+            vals: [],
+        }
+    },
+    mounted() {
+        this.inputVal = this.inputValue;
+    },
+    watch: {
+        inputVal: function() {
+            if (!this.inputVal)
+                return
+            this.vals = this.values.filter(word => word.toLowerCase().includes(this.inputVal.toLowerCase(), 0))
+        }
+    },
+    methods: {
+        selectValue(value) {
+            this.selected = value;
+            this.inputVal = value;
+            this.$emit('selected', this.selected);
+        },
+        toggleOption() {
+            this.showOptions = !this.showOptions
+        },
+        showOption() {
+            this.showOptions = true;
+        },
+        hideOption() {
+            this.showOptions = false;
+            this.selected = this.inputVal;
+            this.$emit('selected', this.selected);
+        }
+    }
+}
+</script>
+<style scoped>
+select {
+    max-width: 14.5rem;
+}
+
+.dropdown {
+    background-color: rgba(0, 0, 0, 0);
+}
+
+i:hover {
+    color: rgba(222, 22, 86, 1);
+}
+
+.dropdown-content {
+    position: absolute;
+    background-color: #f8f8F8;
+    min-width: 14em;
+    max-width: 15rem;
+    max-height: 15rem;
+    margin-top: .5rem;
+    border: 1px solid rgba(222, 22, 86, 1);
+    /* border-top-color: rgba(0,0,0,0); */
+    box-shadow: 0px -8px 34px 0px rgba(0,0,0,0.05);
+    overflow: auto;
+    z-index: 1;
+}
+
+.dropdown-input {
+    width: 14em;
+    margin-right: 1em;
+}
+
+.dropdown-item {
+    color: black;
+    line-height: 1em;
+    text-decoration: none;
+    padding: 0.5em;
+    display: block;
+    cursor: pointer;
+}
+</style>

front/src/components/PaginationFooter.vue

@@ -0,0 +1,40 @@
+<template>
+<div>
+    <footer v-if="$store.getters.getBookPageNb <= 5">
+        <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
+            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})">
+            {{ 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 @click="$store.dispatch('fetchPageBooks', {page: $store.getters.getBookPageNb, nooption: false})" class="page"> >> </button>
+    </footer>
+</div>
+</template>
+<style scoped>
+.elipsis {
+  font-size: 3rem
+}
+
+.page {
+  border: none;
+  padding: 1rem;
+  margin: 0.2rem;
+}
+
+footer {
+  display: flex;
+  padding: 0.2rem;
+  align-items: center;
+}
+
+
+</style>

front/src/components/SearchHeader.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="searchBox">
+        <input class="search" type="text" v-model="search"/>
+        <button class="searchButton" @click="clearSearch" >x</button>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        page: String,
+    },
+    watch: {
+        search: function() {
+            this.$emit('changeSearch', this.search);
+            this.$store.dispatch('fetchPage'+this.page, {page: 0, nooption: false, search: this.search, order: this.order})
+        }
+    },
+    methods: {
+        clearSearch() {
+            this.$store.dispatch('fetchPage'+this.page, {page: 0, nooption: true})
+            this.search = ""
+        },
+    },
+    data() {
+        return {
+            search: "",
+        }
+    }
+}
+</script>
+<style scoped>
+.searchBox {
+  display: flex;
+}
+
+.search {
+  display: flex;
+  min-width: 95%;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.searchButton {
+  color: rgba(11, 11, 11, 0.8);
+  margin-left: -1.1rem;
+  width: 1rem;
+  height: 1rem;
+  align-self: center;
+  align-items: center;
+  font-size: 0.6rem;
+  border: none;
+}
+
+</style>

front/src/components/TableView.vue

@@ -0,0 +1,23 @@
+<template>
+<table>
+  <tr>
+    <th v-bind:style="{ 'min-width': this.width }" v-for="head in headings" :key="head">{{ head }}</th>
+  </tr>
+  <slot></slot>
+</table>
+</template>
+
+<script>
+export default {
+  name: "TableView",
+  props: {
+    headings: Array,
+    width: String
+  },
+};
+</script>
+<style scoped>
+th {
+  text-align: left;
+}
+</style>

front/src/config.js

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

front/src/main.js

@@ -0,0 +1,19 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+import store from './store';
+
+const app = createApp(App)
+app.use(router)
+app.use(store)
+app.mount('#app')
+
+
+// new Vue({
+//     router,
+//     store,
+//     el: '#app',
+//     components: { App },
+//     render: h => h(App)
+
+// })

front/src/router/index.js

@@ -0,0 +1,30 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import TheBooks from '../views/TheBooks.vue';
+import TheAbout from '../views/TheAbout.vue';
+import TheHome from '../views/TheHome.vue';
+import TheFilms from '../views/TheFilms.vue';
+import TheLogin from '../views/TheLogin.vue';
+import store from '../store';
+// import ABook from '@/views/ABook.vue';
+
+const routes = [
+    { name: 'TheHome', path: '/', component: TheHome },
+    { name: 'TheFilms', path: '/films', component: TheFilms },
+    { name: 'TheBooks', path: '/books', component: TheBooks },
+    { name: 'TheAbout', path: '/about', component: TheAbout },
+    { name: 'Login', path: '/login', component: TheLogin },
+    // { name: 'ABook', path: '/book/:bookId', component: ABook }
+]
+
+const router = new createRouter({
+    history: createWebHistory(process.env.BASE_URL),
+    routes,
+});
+
+router.beforeEach(async (to) => {
+    if (!store.state.token && to.name !== 'Login') {
+      return { name: 'Login', query: {redirect: to.path} }
+    }
+})
+
+export default router;

front/src/store/index.js

@@ -0,0 +1,389 @@
+import { createStore } from 'vuex';
+import { ROOT_FQDN } from '@/config';
+
+const store = createStore({
+    state() {
+        return {
+            books: [
+            ],
+            films: [
+            ],
+            token: "",
+            bookPageNb: 0,
+            bookCurrentPage: 0,
+            filmPageNb: 0,
+            filmCurrentPage: 0,
+        }
+    },
+    mutations: {
+        setBooks(state, books) {
+            state.books = books.result
+        },
+        setFilms(state, films) {
+            state.films = films
+        },
+        logout(state) {
+            state.token = ""
+        },
+        addToken(state, token) {
+            state.token = token
+        },
+        removeBook(state, id) {
+            let index = state.books.findIndex(book => book.biblio_Index === id)
+            state.books.splice(index, 1)
+        },
+        editBook(state, payload) {
+            let index = state.books.findIndex(book => book.biblio_Index === payload.id)
+            state.books.splice(index, 1, payload.newBook)
+        },
+        addBook(state, book) {
+            state.books.push(book);
+        },
+        removeFilm(state, id) {
+            let index = state.films.findIndex(film => film.Number === id)
+            state.films.splice(index, 1)
+        },
+        editFilm(state, payload) {
+            let index = state.films.findIndex(film => film.Number === payload.id)
+            state.films.splice(index, 1, payload.newfilm)
+        },
+        addFilm(state, film) {
+            state.films.push(film);
+        },
+        setBookPageNb(state, nb) {
+            state.bookPageNb = nb
+        },
+        setBookCurrentPage(state, page) {
+            state.bookCurrentPage = page
+        },
+        setFilmCurrentPage(state, page) {
+            state.filmCurrentPage = page
+        }
+    },
+    getters: {
+        getBooks(state) {
+            return state.books;
+        },
+        getBookCurrentPage(state) {
+            return state.bookCurrentPage
+        },
+        getBookPageNb(state) {
+            return state.bookPageNb
+        },
+        getFilms(state) {
+            return state.films;
+        },
+        getFilmCurrentPage(state) {
+            return state.filmCurrentPage
+        },
+        getFilmPageNb(state) {
+            return state.filmPageNb
+        },
+    },
+    actions: {
+        logout(ctx) {
+            ctx.commit('logout')
+            localStorage.setItem('token', '')
+        },
+        async login(ctx, info) {
+            let username = info.username
+            let password = info.password
+            const data = new FormData()
+            data.append('username', username)
+            data.append('password', password)
+            return await fetch(ROOT_FQDN + '/token', {
+                method: 'POST',
+                body: data
+            }).then((response) => {
+                if (response.ok) {
+                    return response.json()
+                } else {
+                    return null
+                }
+            }).then(res => {
+                if (res !== null) {
+                    ctx.commit('addToken', res.access_token)
+                    localStorage.setItem('token', res.access_token)
+                    ctx.dispatch('getBooks', {page: 0, search: "", order:""})
+                    ctx.dispatch('getFilms', {page: 0, search: "", order:""})
+                }
+            })
+        },
+        async removeBook({dispatch, commit, state}, id) {
+            await fetch(ROOT_FQDN+'/book/'+id, {
+                method: 'DELETE',
+                headers: {
+                    "Authorization": 'Bearer ' + state.token,
+                    "Content-Type": "application/json"
+                },
+            }).then((response) => {
+                if (response.ok) {
+                    commit('setBookPageNb', response.headers.get('x-nbpage'))
+                    return response.json()
+                } else
+                    return null
+            }).then(res => {
+                if (res === null)
+                {
+                    dispatch('logout')
+                    return null
+                }
+                return res
+            })            
+            commit('removeBook', id)
+        },
+        async editBook({dispatch, commit, state}, payload) {
+            let data = {
+                title: payload.newBook.title,
+                author: payload.newBook.author,
+                type: payload.newBook.type,
+                editor: payload.newBook.editor
+            }
+            await fetch(ROOT_FQDN+'/book/'+payload.id, {
+                method: 'PUT',
+                headers: {
+                    "Authorization": 'Bearer ' + state.token,
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(data)
+            }).then(res => {
+                if (res.ok) {
+                    return res.json()
+                } else 
+                    return null
+            }).then((res) => {
+                if (res === null)
+                    dispatch('logout')
+                dispatch('getBooks', {page: 0, search: payload.search, order:""})
+            })
+            commit('editBook', payload)
+        },
+        async addBook({dispatch, commit, state}, book) {
+            let data = {
+                title: book.Titre,
+                author: book.Auteur,
+                type: book.Type,
+                editor: book.Editeur
+            }
+            await fetch(ROOT_FQDN+'/books', {
+                method: 'POST',
+                headers: {
+                    "Authorization": 'Bearer ' + state.token,
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(data)
+            }).then((response) => {
+                commit('setBookPageNb', response.headers.get('x-nbpage'))
+                if (response.ok)
+                    return response.json()
+                else
+                    return null
+            }).then(res => {
+                if (res === null)
+                {
+                    dispatch('logout')
+                    return null
+                }
+                return res
+            })            
+            commit('addBook', book)
+        },
+        async getBooks({dispatch, commit, state}, payload) {
+            let test =  payload.page ? "?page=" + payload.page : ""
+            if (payload.page)
+                test += '&'
+            else
+                test += '?'
+            test += payload.search ? "search="+payload.search : ""
+            await fetch(ROOT_FQDN+'/books'+test, {
+                method: 'GET',
+                headers: {
+                    "Authorization": 'Bearer ' + state.token,
+                    "Content-Type": "application/json"
+                }
+            }).then((response) => {
+                commit('setBookPageNb', response.headers.get('x-nbpage'))
+                if (response.ok)
+                    return response.json()
+                else
+                    return null
+            }).then(res => {
+                if (res === null)
+                {
+                    dispatch('logout')
+                    return null
+                }
+                commit('setBooks', res)
+                return res
+            })
+        },
+        async removeFilm({dispatch, commit, state}, id) {
+            await fetch(ROOT_FQDN+'/film/'+id, {
+                method: 'DELETE',
+                headers: {
+                    "Authorization": 'Bearer ' + state.token,
+                    "Content-Type": "application/json"
+                },
+            }).then((response) => {
+                if (response.ok) {
+                    commit('setFilmPageNb', response.headers.get('x-nbpage'))
+                    return response.json()
+                } else
+                    return null
+            }).then(res => {
+                if (res === null)
+                {
+                    dispatch('logout')
+                    return null
+                }
+                return res
+            })            
+            commit('removeFilm', id)
+        },
+        async editFilm({dispatch, commit, state}, payload) {
+            let data = {
+                title: payload.newfilm.Title,
+                actors: payload.newfilm.Actors,
+                director: payload.newfilm.Director,
+                type: payload.newfilm.Type,
+                producer: payload.newfilm.Producer,
+                length: payload.newfilm.Length
+            }
+            await fetch(ROOT_FQDN+'/film/'+payload.id, {
+                method: 'PUT',
+                headers: {
+                    "Authorization": 'Bearer ' + state.token,
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(data)
+            }).then(res => {
+                if (res.ok) {
+                    return res.json()
+                } else 
+                    return null
+            }).then((res) => {
+                if (res === null)
+                    dispatch('logout')
+                dispatch('getFilms', {page: 0, search:"", order:""})
+            })
+            commit('editFilm', payload)
+        },
+        async addFilm({dispatch, commit, state}, film) {
+            let data = {
+                title: film.Title,
+                actors: film.Actors,
+                director: film.Director,
+                type: film.Type,
+                producer: film.Producer,
+                length: film.Length
+            }
+            await fetch(ROOT_FQDN+'/films', {
+                method: 'POST',
+                headers: {
+                    "Authorization": 'Bearer ' + state.token,
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(data)
+            }).then((response) => {
+                commit('setFilmPageNb', response.headers.get('x-nbpage'))
+                if (response.ok)
+                    return response.json()
+                else
+                    return null
+            }).then(res => {
+                if (res === null)
+                {
+                    dispatch('logout')
+                    return null
+                }
+                return res
+            })            
+            commit('addFilm', film)
+        },
+        async getFilms({dispatch, commit, state}, payload) {
+            let test =  payload.page ? "?page=" + payload.page : ""
+            if (payload.page)
+                test += '&'
+            else
+                test += '?'
+            test += payload.search ? "search="+payload.search : ""
+            await fetch(ROOT_FQDN+'/films'+test, {
+                method: 'GET',
+                headers: {
+                    "Authorization": 'Bearer ' + state.token,
+                    "Content-Type": "application/json"
+                }
+            }).then((response) => {
+                if (response.ok)
+                    return response.json()
+                else
+                    return null
+            }).then(res => {
+                commit('setFilms', res)
+                if (res === null) {
+                    dispatch('logout');
+                    return null
+                }
+                return res
+            })
+        },
+        async fetchPageBooks({dispatch, commit}, payload) {
+            commit('setBookCurrentPage', payload.page)
+            if (payload.nooption) {
+                dispatch('getBooks', {page: payload.page, search: "", order: ""})
+            } else {
+                dispatch('getBooks', {page: payload.page, search: payload.search, order: payload.sort})
+            }
+        },
+        async fetchPageFilms({dispatch, commit}, payload) {
+            commit('setFilmCurrentPage', payload.page)
+            if (payload.nooption) {
+                dispatch('getFilms', {page: payload.page, search: "", order: ""})
+            } else {
+                dispatch('getFilms', {page: payload.page, search: payload.search, order: payload.sort})
+            }
+        },
+        async getBookField({dispatch, state}, field) {
+            return await fetch(ROOT_FQDN+'/books/' + field, {
+                method: 'GET',
+                headers: {
+                    "Authorization": 'Bearer ' + state.token,
+                    "Content-Type": "application/json"
+                }
+            }).then((response) => {
+                if (response.ok)
+                    return response.json()
+                else
+                    return null
+            }).then(res => {
+                if (res === null) {
+                    dispatch('logout');
+                    return null
+                }
+                return res
+            })
+        },
+        async getFilmField({dispatch, state}, field) {
+            return await fetch(ROOT_FQDN+'/films/' + field, {
+                method: 'GET',
+                headers: {
+                    "Authorization": 'Bearer ' + state.token,
+                    "Content-Type": "application/json"
+                }
+            }).then((response) => {
+                if (response.ok)
+                    return response.json()
+                else
+                    return null
+            }).then(res => {
+                if (res === null) {
+                    dispatch('logout');
+                    return null
+                }
+                return res
+            })
+        }
+    }
+})
+
+export default store;

front/src/views/ABook.vue

@@ -0,0 +1,15 @@
+<template>
+    <!-- <header>{{ book.title }}</header> -->
+</template>
+<script>
+export default {
+    components: {
+
+    },
+    data() {
+        return {
+            title: "qwe"
+        }
+    }
+}
+</script>

front/src/views/TheAbout.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="about">
+      <header>
+        <h1>About</h1>
+      </header>
+      <main>
+        <h2>Home Library</h2>
+        <p>
+          
+        </p>
+        <p>
+          Made with <a href="https://vuejs.org/"><b>VueJS</b></a> and <a href="https://fastapi.tiangolo.com/"><b>FastAPI</b></a> by <a href="https://julien.aldon.fr/"><b><em>Julien Aldon</em></b></a>
+        </p>
+      </main>
+      <footer>
+      </footer>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  }
+}
+</script>
+<style scoped>
+a {
+  text-decoration: none;
+}
+
+p {
+  text-align: left;
+}
+
+h2 {
+  text-align: left;
+}
+</style>

front/src/views/TheBooks.vue

@@ -0,0 +1,206 @@
+<template>
+  <div>
+      <header>
+          <h1>Books</h1>
+          <button v-if="!addMode" class="AddButton" v-show="!addMode" @click="toggleEditMode"><i class="fas fa-plus"></i></button>
+          <button v-else class="AddButton red" @click="addMode=!addMode">X</button>
+      </header>
+      <main>
+          <form ref="form" class="AddForm collapsed" v-on:submit.prevent="addElem" v-if="addMode">
+            <label for="author">Author</label>
+            <input id="author" v-model="formAdd.author" placeholder="Author"/>
+            <label for="title">Title</label>
+            <input id="title" v-model="formAdd.title" placeholder="Title"/>
+            <label for="editor">Editor</label>
+            <input id="editor" v-model="formAdd.editor" placeholder="Editor"/>
+            <label for="type">Type</label>
+            <input id="type" v-model="formAdd.type" placeholder="Type"/>
+            <button class="button edit">
+              <i class="fa-solid fa-arrow-right"></i>
+            </button>
+          </form>
+          <SearchHeader page="Books" @changeSearch="(s) => {editSearch(s)}"/>
+          <TableView ref="table" :headings="headings" width="15rem">
+            <tr v-for="book in this.$store.getters.getBooks" :key="book">
+              <td v-if="editRow === book.biblio_Index">
+                <DropDown
+                  :values="this.bookFields.authors"
+                  field="Auteur"
+                  :inputValue="book.Auteur"
+                  @selected="(n) => {formEdit.author = n}"
+                  />
+              </td>
+              <td v-else>{{ book.Auteur }}</td>
+              <td v-if="editRow === book.biblio_Index">
+                <DropDown
+                  :values="this.bookFields.titles"
+                  field="Titre"
+                  :inputValue="book.Titre"
+                  @selected="(n) => {formEdit.title = n}"
+                  />
+              </td>
+              <td v-else>{{ book.Titre }}</td>
+              <td v-if="editRow === book.biblio_Index">
+                <DropDown
+                  :values="this.bookFields.editors"
+                  field="Editeur"
+                  :inputValue="book.Editeur"
+                  @selected="(n) => {formEdit.editor = n}"
+                  />
+              </td>
+              <td v-else>{{ book.Editeur }}</td>
+              <td v-if="editRow === book.biblio_Index">
+                <DropDown
+                  :values="this.bookFields.types"
+                  field="Type"
+                  :inputValue="book.Type"
+                  @selected="(n) => {formEdit.type = n}"
+                  />
+              </td>
+              <td v-else>{{ book.Type }}</td>
+              <div class="button-panel">
+                <button class="button edit" @click="editElem(book.biblio_Index)">
+                  <i v-if="editRow === book.biblio_Index" class="fa fa-check" aria-hidden="true"></i>
+                  <i v-else class="fa fa-pencil-square-o" aria-hidden="true"></i>
+                </button>
+                <button class="button edit" @click="removeElem(book.biblio_Index)"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
+              </div>
+            </tr>
+          </TableView>
+      </main>
+      <PaginationFooter/>
+  </div>
+</template>
+
+<script>
+import TableView from '../components/TableView.vue';
+import PaginationFooter from '../components/PaginationFooter.vue';
+import SearchHeader from '../components/SearchHeader.vue';
+import DropDown from '../components/DropDown.vue';
+
+export default {
+  components: {
+      TableView,
+      PaginationFooter,
+      SearchHeader,
+      DropDown
+  },
+  data() {
+    return {
+      headings: ['Author', 'Title', 'Editor', 'Type'],
+      editMode: false,
+      editRow: undefined,
+      addMode: false,
+      formEdit: {},
+      formAdd: {},
+      search: "",
+      sort: "",
+      bookFields: {},
+    }
+  },
+  mounted() {
+    this.$store.dispatch('getBookField', 'Auteur').then((res) => {
+      if (res === null) {
+        this.$store.dispatch('logout');
+        return;
+      }
+      this.bookFields.authors = [...res];
+
+    })
+    this.$store.dispatch('getBookField', 'Titre').then((res) => {
+      if (res === null) {
+        this.$store.dispatch('logout');
+        return;
+      }
+      this.bookFields.titles = [...res];
+    })
+    this.$store.dispatch('getBookField', 'Editeur').then((res) => {
+      if (res === null) {
+        this.$store.dispatch('logout');
+        return;
+      }
+      this.bookFields.editors = [...res];
+    })
+    this.$store.dispatch('getBookField', 'Type').then((res) => {
+      if (res === null) {
+        this.$store.dispatch('logout');
+        return;
+      }
+      this.bookFields.types = [...res];
+    })
+  },
+  methods: {
+    removeElem(id) {
+      this.$store.dispatch('removeBook', id)
+    },
+    toggleEditMode() {
+      this.addMode =! this.addMode
+    },
+    editSearch(search) {
+      this.search = search;
+    },
+    addElem() {
+      if (!this.formAdd.title || !this.formAdd.author)
+        return
+      this.$store.dispatch('addBook', {
+        'Titre': this.formAdd.title, 
+        'Auteur': this.formAdd.author,
+        'Editeur': this.formAdd.editor,
+        'Type': this.formAdd.type,
+        'biblio_Index': new Date().valueOf()
+      })
+      this.addMode = true
+      this.formAdd = {}
+    },
+    editElem(id) {
+      this.editMode =! this.editMode
+      if (this.editMode || this.editRow !== id) {
+        let currentBook = this.$store.getters.getBooks.filter(b => b.biblio_Index === id)
+        this.formEdit.author = currentBook[0].Auteur
+        this.formEdit.title = currentBook[0].Titre
+        this.formEdit.editor = currentBook[0].Editeur
+        this.formEdit.type = currentBook[0].Type
+        this.editRow = id
+      }
+      else {
+        this.editRow = undefined
+        let book = this.$store.getters.getBooks.filter(b => b.biblio_Index === id)[0]
+        let newObj = {author: '', title: '', type: '', editor: ''}
+        if (book) {
+          newObj.author = this.formEdit.author ? this.formEdit.author : book.Auteur
+          newObj.title = this.formEdit.title ? this.formEdit.title : book.Titre
+          newObj.type = this.formEdit.type ? this.formEdit.type : book.Type
+          newObj.editor = this.formEdit.editor ? this.formEdit.editor : book.Editeur
+          newObj.id = id
+        } else {
+          newObj.author = this.formEdit.author ? this.formEdit.author : ""
+          newObj.title = this.formEdit.title  ? this.formEdit.title : ""
+          newObj.type = this.formEdit.type  ? this.formEdit.type : ""
+          newObj.editor = this.formEdit.editor ? this.formEdit.editor : ""
+          newObj.id = id;
+        }
+        this.$store.dispatch('editBook', {id: id, newBook: newObj, search: this.search})
+        this.formEdit = {}
+      }
+    },
+  }
+}
+</script>
+<style scoped>
+main {
+  max-width: 60.5vw;
+}
+
+td input {
+  width: 14.5rem;
+}
+
+@keyframes lineInsertedIn {
+  0% {
+    height: 0rem;
+  }
+  100% {
+    height: 23rem;
+  }
+}
+</style>

front/src/views/TheFilms.vue

@@ -0,0 +1,243 @@
+<template>
+  <div>
+     <header>
+          <h1>Films</h1>
+          <button v-if="!addMode" class="AddButton" v-show="!addMode" @click="toggleEditMode"><i class="fas fa-plus"></i></button>
+          <button v-else class="AddButton red" @click="addMode=!addMode">X</button>
+      </header>
+      <main>
+          <form ref="form" class="AddForm collapsed" v-on:submit.prevent="addElem" v-if="addMode">
+            <label for="Director">Director</label>
+            <input id="Director" v-model="formAdd.director" placeholder="director"/>
+            <label for="Title">Title</label>
+            <input id="Title" v-model="formAdd.title" placeholder="title"/>
+            <label for="Actors">Actors</label>
+            <input id="Actors" v-model="formAdd.actors" placeholder="Actors"/>
+            <label for="Length">Length</label>
+            <input id="Length" type="number" v-model="formAdd.length" placeholder="Lenght (in min)"/>
+            <label for="Producer">Producer</label>
+            <input id="Producer" v-model="formAdd.producer" placeholder="Producer"/>
+            <label for="Type">Type</label>
+            <input id="Type" v-model="formAdd.type" placeholder="type"/>
+            <button class="button edit">
+              <i class="fa-solid fa-arrow-right"></i>
+            </button>
+          </form>
+          <SearchHeader page="Films"/>
+          <TableView ref="table" :headings="headings" width="10rem">
+            <tr :key="film" v-for="film in this.$store.getters.getFilms">
+              <td v-if="editRow === film.Number">
+                <DropDown 
+                  :values="this.filmFields.directors"
+                  field="Director"
+                  :inputValue="film.Director"
+                  @selected="(n) => {formEdit.director = n}"
+                />
+              </td>
+              <td v-else>{{ film.Director }}</td>
+              <td v-if="editRow === film.Number">
+                <DropDown 
+                  :values="this.filmFields.titles"
+                  field="Title"
+                  :inputValue="film.Title"
+                  @selected="(n) => {formEdit.title = n}"
+                />
+              </td>
+              <td v-else>{{ film.Title }}</td>
+              <td v-if="editRow === film.Number">
+                <DropDown 
+                  :values="this.filmFields.actors"
+                  field="Actors"
+                  :inputValue="film.Actors"
+                  @selected="(n) => {formEdit.actors = n}"
+                />
+              </td>
+              <td v-else>{{ film.Actors }}</td>
+              <td v-if="editRow === film.Number">
+                <input :placeholder="film.Length" v-model="formEdit.length"/>
+              </td>
+              <td v-else>{{ film.Length }}</td>
+              <td v-if="editRow === film.Number">
+                <DropDown 
+                  :values="this.filmFields.producers"
+                  field="Producer"
+                  :inputValue="film.Producer"
+                  @selected="(n) => {formEdit.producer = n}"
+                />
+              </td>
+              <td v-else>{{ film.Producer }}</td>
+              <td v-if="editRow === film.Number">
+                <DropDown 
+                  :values="this.filmFields.types"
+                  field="Type"
+                  :inputValue="film.Type"
+                  @selected="(n) => {formEdit.type = n}"
+                />
+              </td>
+              <td v-else>{{ film.Type }}</td>
+              <div class="button-panel">
+                <button class="button edit" @click="editElem(film.Number)">
+                  <i v-if="editRow === film.Number" class="fa fa-check" aria-hidden="true"></i>
+                  <i v-else class="fa fa-pencil-square-o" aria-hidden="true"></i>
+                </button>
+                <button class="button edit" @click="removeElem(film.Number)"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
+              </div>
+            </tr>
+          </TableView>
+      </main>
+     <footer v-if="$store.getters.getFilmPageNb <= 5">
+        <button class="page" v-for="index in $store.getters.getFilmCurrentPage + 1" :key="index">{{ index }}</button>
+      </footer>
+      <footer v-else>
+        <button @click="fetchPage(0)" class="page"> {{ '<<' }} </button>
+        <button
+          class="page"
+          :class="{ 'red': $store.getters.getFilmCurrentPage - Math.max(0, Math.min($store.getters.getFilmCurrentPage - 2, $store.getters.getFilmPageNb - 5)) === index}" 
+          v-for="(n, index) in (Math.max(5, Math.min($store.getters.getFilmCurrentPage + 2, $store.getters.getFilmPageNb)) - Math.max(0, Math.min($store.getters.getFilmCurrentPage - 2, $store.getters.getFilmPageNb - 5)))"
+          :key="index"
+          @click="fetchPage(Math.max(0, Math.min($store.getters.getFilmCurrentPage - 2, $store.getters.getFilmPageNb - 5)) + index)">
+          {{ Math.max(0, Math.min($store.getters.getFilmCurrentPage - 2, $store.getters.getFilmPageNb - 5)) + index }}
+        </button>
+        <p v-if="$store.getters.getFilmCurrentPage !== $store.getters.getFilmPageNb" class="elipsis">...</p>
+        <button v-if="$store.getters.getFilmCurrentPage !== $store.getters.getFilmPageNb" class="page" @click="fetchPage($store.getters.getFilmPageNb)">{{ $store.getters.getFilmPageNb }}</button>
+        <button @click="fetchPage($store.getters.getFilmPageNb)" class="page"> >> </button>
+      </footer>
+  </div>
+</template>
+
+<script>
+import TableView from '../components/TableView.vue';
+import DropDown from '../components/DropDown.vue';
+import SearchHeader from '../components/SearchHeader.vue';
+
+export default {
+  components: {
+      TableView,
+      DropDown,
+      SearchHeader
+  },
+  data() {
+    return {
+      headings: ['Director', 'Title', 'Actors', 'Length', 'Producer', 'Type'],
+      editMode: false,
+      editRow: undefined,
+      addMode: false,
+      formEdit: {},
+      formAdd: {},
+      search: "",
+      sort: "",
+      filmFields: {},
+    }
+  },
+  mounted() {
+    this.$store.dispatch('getFilmField', 'Director').then((res) => {
+      this.filmFields.directors = [...res];
+    })
+    this.$store.dispatch('getFilmField', 'Title').then((res) => {
+      this.filmFields.titles = [...res];
+    })
+    this.$store.dispatch('getFilmField', 'Actors').then((res) => {
+      this.filmFields.actors = [...res];
+    })
+    this.$store.dispatch('getFilmField', 'Producer').then((res) => {
+      this.filmFields.producers = [...res];
+    })
+    this.$store.dispatch('getFilmField', 'Type').then((res) => {
+      this.filmFields.types = [...res];
+    })
+  },
+  methods: {
+    removeElem(id) {
+      this.$store.dispatch('removeFilm', id)
+    },
+    toggleEditMode() {
+      this.addMode =! this.addMode
+    },
+    addElem() {
+      if (!this.formAdd.title || !this.formAdd.director 
+          || !this.formAdd.producer || !this.formAdd.type
+          || !this.formAdd.actors || !this.formAdd.length) {
+            //TODO: error handling
+            return
+          }
+      this.$store.dispatch('addFilm', {
+        'Title': this.formAdd.title, 
+        'Director': this.formAdd.director,
+        'Producer': this.formAdd.producer,
+        'Type': this.formAdd.type,
+        'Actors': this.formAdd.actors,
+        'Length': this.formAdd.length,
+        'Number': new Date().valueOf()
+      })
+      this.addMode = true
+      this.formAdd = {}
+    },
+    editElem(id) {
+      this.editMode =! this.editMode
+      if (this.editMode || this.editRow !== id) {
+        this.editRow = id
+      }
+      else {
+        this.editRow = undefined;
+        let ele = this.$store.getters.getFilms.filter(test => test.Number === id)[0]
+        let newObj = {Director: '', Title: '', Producer: '', Type: '', Length: '', Actors: ''}
+        if (ele) {
+          newObj.Director = this.formEdit.director ? this.formEdit.director : ele.Director
+          newObj.Producer = this.formEdit.producer ? this.formEdit.producer : ele.Producer
+          newObj.Title = this.formEdit.title ? this.formEdit.title : ele.Title
+          newObj.Type = this.formEdit.type ? this.formEdit.type : ele.Type
+          newObj.Length = this.formEdit.length ? this.formEdit.length : ele.Length
+          newObj.Actors = this.formEdit.actors ? this.formEdit.actors : ele.Actors
+          newObj.Number = id
+        } else {
+          newObj.Director = this.formEdit.director ? this.formEdit.director : ""
+          newObj.Producer = this.formEdit.producer ? this.formEdit.producer : ""
+          newObj.Title = this.formEdit.title ? this.formEdit.title : ""
+          newObj.Type = this.formEdit.type ? this.formEdit.type : ""
+          newObj.Length = this.formEdit.length ? this.formEdit.length : ""
+          newObj.Actors = this.formEdit.actors ? this.formEdit.actors : ""
+          newObj.Number = id
+        }
+        this.$store.dispatch('editFilm', {id: id, newfilm: newObj})
+        this.formEdit = {}
+      }
+    },
+    fetchPage(page, nooption=false) {
+      this.$store.commit('setFilmCurrentPage', page)
+      if (nooption) {
+        this.$store.dispatch('getFilms', {page: page, search: "", order: ""})
+      } else {
+        this.$store.dispatch('getFilms', {page: page, search: this.search, order: this.sort})
+      }
+    },
+  }
+}
+</script>
+<style scoped>
+main {
+  width: 80vw;
+}
+
+table {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.elipsis {
+  font-size: 3rem
+}
+
+.page {
+  border: none;
+  padding: 1rem;
+  margin: 0.2rem;
+}
+
+footer {
+  display: flex;
+  padding: 0.2rem;
+  align-items: center;
+}
+
+
+</style>

front/src/views/TheHome.vue

@@ -0,0 +1,33 @@
+<template>
+<div>
+  <header>
+    <h1>Home</h1>
+  </header>
+  <main>
+    <h2>Welcome to the Library</h2>
+    <p>You can manage, edit, delete book references from the home library</p>
+  </main>
+</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  }
+}
+</script>
+<style scoped>
+a {
+  text-decoration: none;
+}
+
+p {
+  text-align: left;
+}
+
+h2 {
+  text-align: left;
+}
+</style>

front/src/views/TheLogin.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+      <header>
+        <h1>Login</h1>
+      </header>
+      <main @keydown.enter="login()">
+        <label for="username">Username</label>
+        <input id="username" type="text" v-model="username"/>
+        <label for="password">Password</label>
+        <input id="password" type="password" v-model="password"/>
+        <button @click="login">Login</button>
+      </main>
+      <footer>
+      </footer>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+        username: "",
+        password: ""
+    }
+  },
+  methods: {
+      login() {
+        if (this.username !== "" && this.password !== "")
+            this.$store.dispatch('login', {'username': this.username, 'password': this.password}).then(() => {
+              this.username = ""
+              this.password = ""
+              this.$router.push(this.$route.query.redirect || '/books')
+            })
+      }
+  }
+}
+</script>
+<style scoped>
+button {
+    margin-top: 0.5rem
+}
+label {
+    margin: 0.2rem;
+    text-align: left;
+}
+input {
+    background-color: rgba(0.1, 0.1, 0.1, 0.1);
+    border: none
+}
+input:hover {
+    background-color: rgba(0.1, 0.1, 0.1, 0.1);
+}
+main {
+    width : 20rem;
+    align-self: center;
+    display: flex;
+    align-content: center;
+    flex-direction: column;
+}
+div { 
+    flex-direction: column;
+    display: flex;
+}
+</style>