Add a view to see all books in a collection

front/src/CollectionForm.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { getCollection } from './api.js'
+import CollectionFormBookItem from './CollectionFormBookItem.vue'
+import Pagination from './Pagination.vue'
+
+const props = defineProps({
+  id: String,
+})
+
+const limit = 5
+const pageNumber = ref(1)
+
+const offset = computed(() => (pageNumber.value - 1) * limit)
+
+const data = ref(null)
+const error = ref(null)
+
+let totalElementsNumber = computed(() =>
+  typeof data != 'undefined' && data.value != null ? data.value['count'] : 0,
+)
+
+let pageTotal = computed(() => Math.ceil(totalElementsNumber.value / limit))
+
+getCollection(data, error, props.id, limit, offset.value)
+
+function pageChange(newPageNumber) {
+  pageNumber.value = newPageNumber
+  data.value = null
+  getCollection(data, error, props.id, limit, offset.value)
+}
+</script>
+
+<template>
+  <div v-if="error">{{ $t('bookform.error', { error: error.message }) }}</div>
+  <div v-if="data">
+    <h2 class="title">{{ data.name }}</h2>
+    <div>
+      <CollectionFormBookItem v-for="book in data.books" :key="book.id" v-bind="book" />
+    </div>
+    <Pagination
+      class="mt-5"
+      :pageNumber="pageNumber"
+      :pageTotal="pageTotal"
+      maxItemDisplayed="11"
+      @pageChange="pageChange"
+    />
+  </div>
+</template>
+
+<style></style>