Article pagination frontend implementation

web/admin-gui/src/assets/tabulator.min.css

@@ -1,2 +0,0 @@
-.tabulator{position:relative;border:1px solid #999;background-color:#888;font-size:14px;text-align:left;overflow:hidden;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.tabulator[tabulator-layout=fitDataFill] .tabulator-tableholder .tabulator-table{min-width:100%}.tabulator[tabulator-layout=fitDataTable]{display:inline-block}.tabulator.tabulator-block-select{user-select:none}.tabulator .tabulator-header{position:relative;box-sizing:border-box;width:100%;border-bottom:1px solid #999;background-color:#e6e6e6;color:#555;font-weight:700;white-space:nowrap;overflow:hidden;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none}.tabulator .tabulator-header.tabulator-header-hidden{display:none}.tabulator .tabulator-header .tabulator-header-contents{position:relative;overflow:hidden}.tabulator .tabulator-header .tabulator-header-contents .tabulator-headers{display:inline-block}.tabulator .tabulator-header .tabulator-col{display:inline-flex;position:relative;box-sizing:border-box;flex-direction:column;justify-content:flex-start;border-right:1px solid #aaa;background:#e6e6e6;text-align:left;vertical-align:bottom;overflow:hidden}.tabulator .tabulator-header .tabulator-col.tabulator-moving{position:absolute;border:1px solid #999;background:#cdcdcd;pointer-events:none}.tabulator .tabulator-header .tabulator-col .tabulator-col-content{box-sizing:border-box;position:relative;padding:4px}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button{padding:0 8px}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button:hover{cursor:pointer;opacity:.6}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title-holder{position:relative}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title{box-sizing:border-box;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title.tabulator-col-title-wrap{white-space:normal;text-overflow:clip}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor{box-sizing:border-box;width:100%;border:1px solid #999;padding:1px;background:#fff}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-header-popup-button+.tabulator-title-editor{width:calc(100% - 22px)}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter{display:flex;align-items:center;position:absolute;top:0;bottom:0;right:4px}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #bbb}.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols{position:relative;display:flex;border-top:1px solid #aaa;overflow:hidden;margin-right:-1px}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter{position:relative;box-sizing:border-box;margin-top:2px;width:100%;text-align:center}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea{height:auto!important}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg{margin-top:3px}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input::-ms-clear{width:0;height:0}.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title{padding-right:25px}.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover{cursor:pointer;background-color:#cdcdcd}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter{color:#bbb}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover{cursor:pointer;border-bottom:6px solid #555}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-top:none;border-bottom:6px solid #bbb}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter{color:#666}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover{cursor:pointer;border-bottom:6px solid #555}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-top:none;border-bottom:6px solid #666}.tabulator .tabulator-header .tabulator-col.tabulator-sortabLine truncated
-/*# sourceMappingURL=tabulator.min.css.map */

web/admin-gui/src/assets/tabulator.min.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["tabulator.scss"],"names":[],"mappings":"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 truncated

web/admin-gui/src/views/Articles.vue

@@ -1,20 +1,29 @@
 <script setup lang="ts">
-import { getArticles, type Article } from '@/utils/database';
-import { onMounted, ref, type Ref } from 'vue';
+import { onMounted, ref, type Ref } from 'vue'
 import { RouterLink } from 'vue-router'
 import { TabulatorFull as Tabulator } from 'tabulator-tables'
-
-const articles: Ref<Array<Article>> = ref([])
+import { baseApiUrl } from '@/utils/api'
 
 const table = ref<HTMLInputElement | string>('')
 const tabulator: Ref<Tabulator | undefined> = ref(undefined)
 
 onMounted(async () => {
-	articles.value = await (await getArticles('')).content
 	tabulator.value = new Tabulator(table.value, {
-		data: articles.value,
-		reactiveData: true,
 		layout: 'fitColumns',
+		locale: 'fr-FR',
+		reactiveData: true,
+		pagination: true,
+		paginationSizeSelector: true,
+		paginationMode: 'remote',
+		paginationSize: 10,
+		ajaxURL: `${baseApiUrl}/articles`,
+		ajaxURLGenerator: function (url, config, params) {
+			config.credentials = 'include'
+			return url + `?skip=${params.size * (params.page - 1)}&take=${params.size}`
+		},
+		dataReceiveParams: {
+			"data": "content"
+		},
 		columns: [
 			{
 				title: 'Titre',
@@ -63,7 +72,23 @@ onMounted(async () => {
 				},
 				headerSort: false
 			}
-		]
+		],
+		langs: {
+			"fr-FR": {
+				"pagination": {
+					"first": "Premier",
+					"first_title": "Première Page",
+					"last": "Dernier",
+					"last_title": "Dernière Page",
+					"prev": "Précédent",
+					"prev_title": "Page Précédente",
+					"next": "Suivant",
+					"next_title": "Page Suivante",
+					"all": "Toute",
+					"page_size": "Nombre d'éléments"
+				},
+			},
+		}
 	})
 })
 </script>
@@ -81,6 +106,8 @@ main {
 	flex-direction: column;
 	gap: 16px;
 
+	height: 100%;
+
 	padding: 32px;
 }
 
@@ -90,7 +117,7 @@ main>a {
 
 #table {
 	width: 100%;
-
+	height: 100%;
 	margin: auto;
 }