Now using Tabulator for tables

web/admin-gui/package-lock.json

@@ -10,11 +10,13 @@
       "dependencies": {
         "@tinymce/tinymce-vue": "^4.0.7",
         "pinia": "^2.0.28",
+        "tabulator-tables": "^5.4.3",
         "vue": "^3.2.38",
         "vue-router": "^4.1.5"
       },
       "devDependencies": {
         "@types/node": "^16.11.56",
+        "@types/tabulator-tables": "^5.4.2",
         "@vitejs/plugin-vue": "^3.0.3",
         "@vue/tsconfig": "^0.1.3",
         "npm-run-all": "^4.1.5",
@@ -83,6 +85,12 @@
       "integrity": "sha512-XU1+v7h81p7145ddPfjv7jtWvkSilpcnON3mQ+bDi9Yuf7OI56efOglXRyXWgQ57xH3fEQgh7WOJMncRHVew5w==",
       "dev": true
     },
+    "node_modules/@types/tabulator-tables": {
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/@types/tabulator-tables/-/tabulator-tables-5.4.2.tgz",
+      "integrity": "sha512-Nw6ilGg3SqJWQ6UUwJ8VL9NtIeRhYKrmzy8hjx3dpfHwccK0pSCUj3G+CNTnoHD4QaIfXq8JaAwQ+dzO4FeHqA==",
+      "dev": true
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz",
@@ -1764,6 +1772,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tabulator-tables": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/tabulator-tables/-/tabulator-tables-5.4.3.tgz",
+      "integrity": "sha512-XnQcfwd2LzHWKAo8ZzUVglKaQnzn3wZwH48ouYr1dDbfUcQiU1ESJjVhmVxPMr9tf0oDcV6qPViEHinAi/tqbw=="
+    },
     "node_modules/tinymce": {
       "version": "5.10.7",
       "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-5.10.7.tgz",
@@ -1971,6 +1984,12 @@
       "integrity": "sha512-XU1+v7h81p7145ddPfjv7jtWvkSilpcnON3mQ+bDi9Yuf7OI56efOglXRyXWgQ57xH3fEQgh7WOJMncRHVew5w==",
       "dev": true
     },
+    "@types/tabulator-tables": {
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/@types/tabulator-tables/-/tabulator-tables-5.4.2.tgz",
+      "integrity": "sha512-Nw6ilGg3SqJWQ6UUwJ8VL9NtIeRhYKrmzy8hjx3dpfHwccK0pSCUj3G+CNTnoHD4QaIfXq8JaAwQ+dzO4FeHqA==",
+      "dev": true
+    },
     "@vitejs/plugin-vue": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz",
@@ -3128,6 +3147,11 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
+    "tabulator-tables": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/tabulator-tables/-/tabulator-tables-5.4.3.tgz",
+      "integrity": "sha512-XnQcfwd2LzHWKAo8ZzUVglKaQnzn3wZwH48ouYr1dDbfUcQiU1ESJjVhmVxPMr9tf0oDcV6qPViEHinAi/tqbw=="
+    },
     "tinymce": {
       "version": "5.10.7",
       "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-5.10.7.tgz",

web/admin-gui/package.json

@@ -11,11 +11,13 @@
   "dependencies": {
     "@tinymce/tinymce-vue": "^4.0.7",
     "pinia": "^2.0.28",
+    "tabulator-tables": "^5.4.3",
     "vue": "^3.2.38",
     "vue-router": "^4.1.5"
   },
   "devDependencies": {
     "@types/node": "^16.11.56",
+    "@types/tabulator-tables": "^5.4.2",
     "@vitejs/plugin-vue": "^3.0.3",
     "@vue/tsconfig": "^0.1.3",
     "npm-run-all": "^4.1.5",

web/admin-gui/src/assets/base.css

@@ -68,7 +68,8 @@ button,
 span,
 li,
 td,
-th {
+th,
+.tabulator {
 	font-family: 'Hind', sans-serif;
 	color: var(--neutral-dark);
 }
@@ -111,7 +112,8 @@ th {
 	padding: 8px;
 }
 
-.tags li {
+.tags li,
+.tags .tag {
 	background-color: var(--neutral-verylight);
 	border-radius: var(--radius);
 

web/admin-gui/src/main.ts

@@ -5,6 +5,7 @@ import App from './App.vue'
 import router from './router'
 
 import '@/assets/base.css'
+import '@/assets/tabulator_bootstrap5.min.css'
 
 const app = createApp(App)
 

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

@@ -2,50 +2,85 @@
 import { getArticles, type Article } from '@/utils/database';
 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([])
 
+const table = ref<HTMLInputElement | string>('')
+const tabulator: Ref<Tabulator | undefined> = ref(undefined)
+
 onMounted(async () => {
 	articles.value = await getArticles('')
+	tabulator.value = new Tabulator(table.value, {
+		data: articles.value,
+		reactiveData: true,
+		layout: 'fitColumns',
+		columns: [
+			{
+				title: 'Titre',
+				field: 'title',
+			},
+			{
+				title: 'Date création',
+				field: 'date',
+				formatter: function (cell) {
+					return new Date(cell.getValue()).toLocaleDateString('fr-FR')
+				}
+			},
+			{
+				title: 'Tags',
+				field: 'tags',
+				formatter: function (cell) {
+					return cell.getValue().join(' ')
+				},
+				sorter: 'alphanum'
+			},
+			{
+				title: 'Statut',
+				field: 'online',
+				formatter: function (cell) {
+					return cell.getValue() as boolean ? '🟢' : '🔴'
+				},
+				headerSort: false
+			},
+			{
+				title: 'Actions',
+				field: 'titleID',
+				formatter: function (cell) {
+					const container = document.createElement('div')
+
+					const editButton = document.createElement('a')
+					const deleteButton = document.createElement('a')
+					editButton.classList.add('button-secondary')
+					deleteButton.classList.add('button-secondary')
+					editButton.textContent = '✏️'
+					deleteButton.textContent = '🗑️'
+
+					editButton.href = `/articles/edit/${cell.getValue()}`
+
+					container.append(editButton, deleteButton)
+					return container
+				},
+				headerSort: false
+			}
+		]
+	})
 })
 </script>
 
 <template>
 	<main>
 		<RouterLink class="button-primary" to="/articles/new">Créer un article</RouterLink>
-		<table>
-			<thead>
-				<th>Titre</th>
-				<th>Date création</th>
-				<th>Tags</th>
-				<th>Statut</th>
-				<th>Actions</th>
-			</thead>
-			<tbody>
-				<tr v-for="article in articles">
-					<td>{{ article.title }}</td>
-					<td>{{ new Date(article.date).toLocaleDateString('fr-FR') }}</td>
-					<td>
-						<ul class="tags">
-							<li v-for="tag in article.tags">{{ tag }}</li>
-						</ul>
-					</td>
-					<td class="status">{{`${article.online ? '🟢' : '🔴'}`}}</td>
-					<td>
-						<div class="action-buttons">
-							<RouterLink class="button-secondary" :to="`articles/edit/${article.titleID}`">✏️
-							</RouterLink>
-							<button class="button-secondary">❌</button>
-						</div>
-					</td>
-				</tr>
-			</tbody>
-		</table>
+		<div id="table" ref="table"></div>
 	</main>
 </template>
 
 <style scoped>
 main {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+
 	padding: 32px;
 }
 
@@ -53,14 +88,10 @@ main>a {
 	width: fit-content;
 }
 
-main table {
+#table {
 	width: 100%;
 
-	border-collapse: collapse;
-}
-
-main table td {
-	padding: 8px;
+	margin: auto;
 }
 
 .action-buttons {