add project files

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>