From 8bbbdd2dfabc62719149878f7113df17b71c68c9 Mon Sep 17 00:00:00 2001
From: Jan Klattenhoff <jan@kjan.email>
Date: Sun, 19 Jan 2025 21:23:26 +0100
Subject: [PATCH] feat(dashboard): add dashboard table with links display

---
 package-lock.json                          | 45 ++++++++++++++++++++++
 package.json                               |  1 +
 src/app/dashboard/dashboard.component.html | 25 +++++++++++-
 src/app/dashboard/dashboard.component.ts   |  5 ++-
 src/index.html                             |  2 +-
 tailwind.config.js                         |  2 +-
 6 files changed, 76 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5e3721d..89da0b2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "@angular/compiler-cli": "^19.0.0",
         "@types/jasmine": "~5.1.0",
         "autoprefixer": "^10.4.20",
+        "daisyui": "^4.12.23",
         "jasmine-core": "~5.4.0",
         "karma": "~6.4.0",
         "karma-chrome-launcher": "~3.2.0",
@@ -6234,6 +6235,16 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/css-selector-tokenizer": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
+      "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "fastparse": "^1.1.2"
+      }
+    },
     "node_modules/css-what": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
@@ -6258,12 +6269,40 @@
         "node": ">=4"
       }
     },
+    "node_modules/culori": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
+      "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
     "node_modules/custom-event": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
       "integrity": "sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==",
       "dev": true
     },
+    "node_modules/daisyui": {
+      "version": "4.12.23",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.23.tgz",
+      "integrity": "sha512-EM38duvxutJ5PD65lO/AFMpcw+9qEy6XAZrTpzp7WyaPeO/l+F/Qiq0ECHHmFNcFXh5aVoALY4MGrrxtCiaQCQ==",
+      "dev": true,
+      "dependencies": {
+        "css-selector-tokenizer": "^0.8",
+        "culori": "^3",
+        "picocolors": "^1",
+        "postcss-js": "^4"
+      },
+      "engines": {
+        "node": ">=16.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/daisyui"
+      }
+    },
     "node_modules/date-format": {
       "version": "4.0.14",
       "resolved": "https://registry.npmjs.org/date-format/-/date-format-4.0.14.tgz",
@@ -7056,6 +7095,12 @@
         }
       ]
     },
+    "node_modules/fastparse": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
+      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
+      "dev": true
+    },
     "node_modules/fastq": {
       "version": "1.18.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz",
diff --git a/package.json b/package.json
index a20eced..f9fbe53 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@angular/compiler-cli": "^19.0.0",
     "@types/jasmine": "~5.1.0",
     "autoprefixer": "^10.4.20",
+    "daisyui": "^4.12.23",
     "jasmine-core": "~5.4.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 9c5fce9..9230a4a 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -1 +1,24 @@
-<p>dashboard works!</p>
+<div class="overflow-x-auto">
+  <table class="table">
+    <!-- head -->
+    <thead>
+      <tr>
+        <th></th>
+        <th>Name</th>
+        <th>Url</th>
+        <th>Short Url</th>
+      </tr>
+    </thead>
+    <tbody>
+      <!-- row 1 -->
+      @for (link of links; track link) {
+      <tr class="bg-base-200">
+        <th>{{link.id}}</th>
+        <td>{{link.name}}</td>
+        <td>{{link.url}}</td>
+        <td>Not done yet</td>
+      </tr>
+      }
+    </tbody>
+  </table>
+</div>
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index f9cae2b..91d246d 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { LinkService } from '../service/link.service';
+import { RecordModel } from 'pocketbase';
 
 @Component({
   selector: 'app-dashboard',
@@ -8,11 +9,13 @@ import { LinkService } from '../service/link.service';
   styleUrl: './dashboard.component.css'
 })
 export class DashboardComponent {
+  public links: any[] = [];
+
   constructor(private linkService: LinkService) { };
 
   ngOnInit(): void {
     this.linkService.getLinks().then(links => {
-      console.log(links);
+      this.links = links;
     });
   }
 }
diff --git a/src/index.html b/src/index.html
index ca13c95..2d2f2be 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
-<body class="h-full">
+<body class="h-full" data-theme="light">
   <app-root></app-root>
 </body>
 </html>
diff --git a/tailwind.config.js b/tailwind.config.js
index 7586753..e4f5ffc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,6 +6,6 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [require('daisyui'),],
 }