diff --git a/src/views/Catalog.vue b/src/views/Catalog.vue
index 2213dae7e8867064e325fa02c0cfa351508fc00f..df481c85fafdb9002ddea7bf7adbcecdf12b1173 100644
--- a/src/views/Catalog.vue
+++ b/src/views/Catalog.vue
@@ -12,8 +12,8 @@
<div>Ressource</div>
</div>
<div
- v-for="ressource in ressources"
- :key="ressource.ressource"
+ v-for="(ressource, index) in paginatedRessources"
+ :key="`${ressource.ressource}-${index}`"
class="row"
>
<div>{{ ressource.organisation }}</div>
@@ -21,6 +21,62 @@
<div>{{ ressource.ressource }}</div>
</div>
</div>
+
+ <div
+ v-if="nbPages.length > 1"
+ id="table-features_info"
+ class="dataTables_info"
+ >
+ Affichage de l'élément {{ pagination.start + 1 }} Ã
+ {{ displayedPageEnd }}
+ sur {{ ressources.length }} éléments
+ </div>
+ <div
+ v-if="nbPages.length > 1"
+ id="table-features_paginate"
+ class="dataTables_paginate paging_simple_numbers"
+ >
+ <a
+ @click="toPreviousPage"
+ id="table-features_previous"
+ :class="[
+ 'paginate_button previous',
+ { disabled: pagination.currentPage === 1 },
+ ]"
+ aria-controls="table-features"
+ data-dt-idx="0"
+ tabindex="0"
+ >Précédent</a
+ >
+ <span>
+ <a
+ v-for="pageNumber in nbPages"
+ :key="'page' + pageNumber"
+ @click="toPage(pageNumber)"
+ :class="[
+ 'paginate_button',
+ { current: pageNumber === pagination.currentPage },
+ ]"
+ aria-controls="table-features"
+ data-dt-idx="1"
+ tabindex="0"
+ >{{ pageNumber }}</a
+ >
+ </span>
+ <!-- // TODO : <span v-if="nbPages > 4" class="ellipsis">...</span> -->
+ <a
+ id="table-features_next"
+ :class="[
+ 'paginate_button next',
+ { disabled: pagination.currentPage === nbPages.length },
+ ]"
+ aria-controls="table-features"
+ data-dt-idx="7"
+ tabindex="0"
+ @click="toNextPage"
+ >Suivant</a
+ >
+ </div>
</div>
</template>
@@ -33,31 +89,242 @@ export default {
return {
ressources: [
{
- organisation: "organisation1",
- dataset: "dataset1",
- ressource: "ressource1",
+ organisation: "Organisation 1",
+ dataset: "Dataset 1",
+ ressource: "Ressource 1",
+ },
+ {
+ organisation: "Organisation 2",
+ dataset: "Dataset 2",
+ ressource: "Ressource 2",
+ },
+ {
+ organisation: "Organisation 3",
+ dataset: "Dataset 3",
+ ressource: "Ressource 3",
+ },
+ {
+ organisation: "Organisation 4",
+ dataset: "Dataset 4",
+ ressource: "Ressource 4",
+ },
+ {
+ organisation: "Organisation 1",
+ dataset: "Dataset 1",
+ ressource: "Ressource 1",
+ },
+ {
+ organisation: "Organisation 2",
+ dataset: "Dataset 2",
+ ressource: "Ressource 2",
+ },
+ {
+ organisation: "Organisation 3",
+ dataset: "Dataset 3",
+ ressource: "Ressource 3",
+ },
+ {
+ organisation: "Organisation 4",
+ dataset: "Dataset 4",
+ ressource: "Ressource 4",
+ },
+ {
+ organisation: "Organisation 1",
+ dataset: "Dataset 1",
+ ressource: "Ressource 1",
+ },
+ {
+ organisation: "Organisation 2",
+ dataset: "Dataset 2",
+ ressource: "Ressource 2",
+ },
+ {
+ organisation: "Organisation 3",
+ dataset: "Dataset 3",
+ ressource: "Ressource 3",
+ },
+ {
+ organisation: "Organisation 4",
+ dataset: "Dataset 4",
+ ressource: "Ressource 4",
+ },
+ {
+ organisation: "Organisation 1",
+ dataset: "Dataset 1",
+ ressource: "Ressource 1",
+ },
+ {
+ organisation: "Organisation 2",
+ dataset: "Dataset 2",
+ ressource: "Ressource 2",
+ },
+ {
+ organisation: "Organisation 3",
+ dataset: "Dataset 3",
+ ressource: "Ressource 3",
+ },
+ {
+ organisation: "Organisation 4",
+ dataset: "Dataset 4",
+ ressource: "Ressource 4",
+ },
+ {
+ organisation: "Organisation 1",
+ dataset: "Dataset 1",
+ ressource: "Ressource 1",
+ },
+ {
+ organisation: "Organisation 2",
+ dataset: "Dataset 2",
+ ressource: "Ressource 2",
+ },
+ {
+ organisation: "Organisation 3",
+ dataset: "Dataset 3",
+ ressource: "Ressource 3",
+ },
+ {
+ organisation: "Organisation 4",
+ dataset: "Dataset 4",
+ ressource: "Ressource 4",
},
{
- organisation: "organisation2",
- dataset: "dataset2",
- ressource: "ressource2",
+ organisation: "Organisation 1",
+ dataset: "Dataset 1",
+ ressource: "Ressource 1",
},
{
- organisation: "organisation3",
- dataset: "dataset3",
- ressource: "ressource3",
+ organisation: "Organisation 2",
+ dataset: "Dataset 2",
+ ressource: "Ressource 2",
},
{
- organisation: "organisation4",
- dataset: "dataset4",
- ressource: "ressource4",
+ organisation: "Organisation 3",
+ dataset: "Dataset 3",
+ ressource: "Ressource 3",
+ },
+ {
+ organisation: "Organisation 4",
+ dataset: "Dataset 4",
+ ressource: "Ressource 4",
+ },
+ {
+ organisation: "Organisation 1",
+ dataset: "Dataset 1",
+ ressource: "Ressource 1",
+ },
+ {
+ organisation: "Organisation 2",
+ dataset: "Dataset 2",
+ ressource: "Ressource 2",
+ },
+ {
+ organisation: "Organisation 3",
+ dataset: "Dataset 3",
+ ressource: "Ressource 3",
+ },
+ {
+ organisation: "Organisation 4",
+ dataset: "Dataset 4",
+ ressource: "Ressource 4",
+ },
+ {
+ organisation: "Organisation 1",
+ dataset: "Dataset 1",
+ ressource: "Ressource 1",
+ },
+ {
+ organisation: "Organisation 2",
+ dataset: "Dataset 2",
+ ressource: "Ressource 2",
+ },
+ {
+ organisation: "Organisation 3",
+ dataset: "Dataset 3",
+ ressource: "Ressource 3",
+ },
+ {
+ organisation: "Organisation 4",
+ dataset: "Dataset 4",
+ ressource: "Ressource 4",
+ },
+ {
+ organisation: "Organisation 1",
+ dataset: "Dataset 1",
+ ressource: "Ressource 1",
+ },
+ {
+ organisation: "Organisation 2",
+ dataset: "Dataset 2",
+ ressource: "Ressource 2",
+ },
+ {
+ organisation: "Organisation 3",
+ dataset: "Dataset 3",
+ ressource: "Ressource 3",
+ },
+ {
+ organisation: "Organisation 4",
+ dataset: "Dataset 4",
+ ressource: "Ressource 4",
},
],
+ pagination: {
+ currentPage: 1,
+ pagesize: 15,
+ start: 0,
+ end: 15,
+ },
};
},
computed: {
...mapGetters(["project", "permissions"]),
+
+ paginatedRessources() {
+ return this.ressources.slice(this.pagination.start, this.pagination.end);
+ },
+
+ nbPages() {
+ let N = Math.ceil(this.ressources.length / this.pagination.pagesize);
+ const arr = [...Array(N).keys()].map(function (x) {
+ ++x;
+ return x;
+ });
+ return arr;
+ },
+
+ displayedPageEnd() {
+ return this.ressources.length <= this.pagination.end
+ ? this.ressources.length
+ : this.pagination.end;
+ },
+ },
+
+ methods: {
+ toPage(pageNumber) {
+ const toAddOrRemove =
+ (pageNumber - this.pagination.currentPage) * this.pagination.pagesize;
+ this.pagination.start += toAddOrRemove;
+ this.pagination.end += toAddOrRemove;
+ this.pagination.currentPage = pageNumber;
+ },
+
+ toPreviousPage() {
+ if (this.pagination.start > 0) {
+ this.pagination.start -= this.pagination.pagesize;
+ this.pagination.end -= this.pagination.pagesize;
+ this.pagination.currentPage -= 1;
+ }
+ },
+
+ toNextPage() {
+ if (this.pagination.end < this.ressources.length) {
+ this.pagination.start += this.pagination.pagesize;
+ this.pagination.end += this.pagination.pagesize;
+ this.pagination.currentPage += 1;
+ }
+ },
},
created() {
@@ -93,4 +360,82 @@ h1 {
.table > .header {
background-color: #e0e0e0;
}
+
+/* datatables */
+.dataTables_length,
+.dataTables_filter,
+.dataTables_info,
+.dataTables_processing,
+.dataTables_paginate {
+ color: #333;
+}
+.dataTables_info {
+ clear: both;
+ float: left;
+ padding-top: 0.755em;
+}
+.dataTables_paginate {
+ float: right;
+ text-align: right;
+ padding-top: 0.25em;
+}
+.dataTables_paginate .paginate_button.current,
+.dataTables_paginate .paginate_button.current:hover {
+ color: #333 !important;
+ border: 1px solid #979797;
+ background-color: white;
+ background: -webkit-gradient(
+ linear,
+ left top,
+ left bottom,
+ color-stop(0%, #fff),
+ color-stop(100%, #dcdcdc)
+ );
+ background: -webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%);
+ background: -moz-linear-gradient(top, #fff 0%, #dcdcdc 100%);
+ background: -ms-linear-gradient(top, #fff 0%, #dcdcdc 100%);
+ background: -o-linear-gradient(top, #fff 0%, #dcdcdc 100%);
+ background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%);
+}
+.dataTables_paginate .paginate_button {
+ box-sizing: border-box;
+ display: inline-block;
+ min-width: 1.5em;
+ padding: 0.5em 1em;
+ margin-left: 2px;
+ text-align: center;
+ text-decoration: none !important;
+ cursor: pointer;
+ color: #333 !important;
+ border: 1px solid transparent;
+ border-radius: 2px;
+}
+.dataTables_paginate .paginate_button:hover {
+ color: white !important;
+ border: 1px solid #111;
+ background-color: #585858;
+ background: -webkit-gradient(
+ linear,
+ left top,
+ left bottom,
+ color-stop(0%, #585858),
+ color-stop(100%, #111)
+ );
+ background: -webkit-linear-gradient(top, #585858 0%, #111 100%);
+ background: -moz-linear-gradient(top, #585858 0%, #111 100%);
+ background: -ms-linear-gradient(top, #585858 0%, #111 100%);
+ background: -o-linear-gradient(top, #585858 0%, #111 100%);
+ background: linear-gradient(to bottom, #585858 0%, #111 100%);
+}
+.dataTables_paginate .paginate_button.disabled,
+.dataTables_paginate .paginate_button.disabled:hover,
+.dataTables_paginate .paginate_button.disabled:active {
+ cursor: default;
+ color: #666 !important;
+ border: 1px solid transparent;
+ background: transparent;
+ box-shadow: none;
+}
+
+
</style>
\ No newline at end of file