From d14924de5c47ef69a50f351864ffc580c8721034 Mon Sep 17 00:00:00 2001
From: "alec.schmidt" <alec.schmidt@etu.hesge.ch>
Date: Thu, 8 Jun 2023 11:20:26 +0200
Subject: [PATCH] dashboard styling and modal for users
---
API/db/app.db | Bin 36864 -> 36864 bytes
frontend/src/app/admin/admin.component.html | 83 +++++++++---------
.../create-user/create-user.component.html | 33 ++++---
.../update-user/update-user.component.html | 29 ++++--
4 files changed, 87 insertions(+), 58 deletions(-)
diff --git a/API/db/app.db b/API/db/app.db
index 60f1aabdf30a7e9eb0a4e0c340a5c133a5ae11bf..8b49742970a9374e1b7dbac070064a555c13832b 100644
GIT binary patch
delta 122
zcmZozz|^pSX@WE(|3n#QM*fWnOZd5%`HwO1f8@Wze{3_Kzz%*T5e`-cX;IOz%)I2(
zyb?nrW0R7i(o|t4Rt9lV@siZy5~Im4<Yl;+`5!UxKjQzv|86s%!WDi|Zf0pls2&bZ
UW^qQa%FW;PIRqFv7C8g}0A!~l0{{R3
delta 122
zcmZozz|^pSX@WE(??f4AM&6AHOZd5%`0q0Cf8@W*e`+(Izz%+;R0c2*78MosDNRl^
zG%_|RDJo4BVq#?w6%{W@EiRe-LSBZ8iT^zV{}2B6{O>pODO}+fWdrMC-~{Pm=U^6P
R1gYHoU7tgMk$sUv008MJAX)$b
diff --git a/frontend/src/app/admin/admin.component.html b/frontend/src/app/admin/admin.component.html
index be65ba4..8308512 100644
--- a/frontend/src/app/admin/admin.component.html
+++ b/frontend/src/app/admin/admin.component.html
@@ -1,41 +1,44 @@
-<button (click)="modalCreate=true;">Create User</button>
-
-<table>
- <thead>
- <th>Username</th>
- <th>Admin</th>
- </thead>
- <tbody>
- <tr *ngFor="let user of users">
- <td>{{user.username}}</td>
- <td>{{user.admin}}</td>
- <td><button (click)="showUpdateModal(user)">UPDATE</button></td>
- <td><button (click)="deleteUser(user)">DELETE</button></td>
- </tr>
- </tbody>
-</table>
-
-<table>
- <thead>
- <th>Question</th>
- <th>Catégorie</th>
- </thead>
- <tbody>
- <tr *ngFor="let question of questions">
- <td>{{question.question}}</td>
- <td>{{question.category}}</td>
- <td>UPDATE</td>
- <td><button (click)="deleteQuestion(question)">DELETE</button></td>
- </tr>
- </tbody>
-</table>
-
-
-
-<div *ngIf="modalUpdate">
- <app-update-user [user]="userToEdit" (closeModal)="modalUpdate=false;"></app-update-user>
+<div class="w-full flex justify-center flex-col px-80 mt-20">
+ <button (click)="modalCreate=true;" class="bg-white w-fit border-2 border-black rounded-lg px-2 hover:bg-gray-300 mt-2">Create User</button>
+
+ <table class="text-left">
+ <thead class="border-b font-medium dark:border-neutral-500">
+ <th class="px-6 py-4">Username</th>
+ <th class="px-6 py-4">Admin</th>
+ </thead>
+ <tbody>
+ <tr *ngFor="let user of users" class="border-b dark:border-neutral-500">
+ <td class="whitespace-nowrap px-6 py-4">{{user.username}}</td>
+ <td class="whitespace-nowrap px-6 py-4">{{user.admin}}</td>
+ <td><button class="bg-teal-200 w-fit border-2 border-teal-600 rounded-lg px-2 hover:bg-teal-400 mt-2" (click)="showUpdateModal(user)">UPDATE</button></td>
+ <td><button class="bg-red-400 w-fit border-2 border-red-600 rounded-lg px-2 hover:bg-red-500 mt-2" (click)="deleteUser(user)">DELETE</button></td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ <table class="table-auto mt-20">
+ <thead class="border-b font-medium dark:border-neutral-500">
+ <th class="px-6 py-4">Question</th>
+ <th class="px-6 py-4">Catégorie</th>
+ </thead>
+ <tbody>
+ <tr *ngFor="let question of questions" class="border-b dark:border-neutral-500">
+ <td class="whitespace-nowrap px-6 py-4">{{question.question}}</td>
+ <td class="whitespace-nowrap px-6 py-4">{{question.category}}</td>
+ <td><button class="bg-teal-200 w-fit border-2 border-teal-600 rounded-lg px-2 hover:bg-teal-400 mt-2">UPDATE</button></td>
+ <td><button class="bg-red-400 w-fit border-2 border-red-600 rounded-lg px-2 hover:bg-red-300 mt-2" (click)="deleteQuestion(question)">DELETE</button></td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
+ <div *ngIf="modalUpdate">
+ <app-update-user [user]="userToEdit" (closeModal)="modalUpdate=false;"></app-update-user>
+ </div>
+
+ <div *ngIf="modalCreate">
+ <app-create-user (closeModal)="modalCreate=false;"></app-create-user>
+ </div>
</div>
-
-<div *ngIf="modalCreate">
- <app-create-user (closeModal)="modalCreate=false;"></app-create-user>
-</div>
\ No newline at end of file
diff --git a/frontend/src/app/user-shit/create-user/create-user.component.html b/frontend/src/app/user-shit/create-user/create-user.component.html
index 90b3721..21f033a 100644
--- a/frontend/src/app/user-shit/create-user/create-user.component.html
+++ b/frontend/src/app/user-shit/create-user/create-user.component.html
@@ -1,10 +1,23 @@
-<h1>Create User</h1>
-<form [formGroup]="createUser" (ngSubmit)="onSubmit()">
- <input type="text" placeholder="Username" formControlName="username">
- <br>
- <input type="password" placeholder="Password" formControlName="password">
- <br>
- <label>Admin</label><input type="checkbox" formControlName="admin">
- <br>
- <button type="submit">Create</button><button (click)="closeModal.emit()">Close</button>
-</form>
\ No newline at end of file
+<div class="z-10 relative">
+ <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+ <div class="fixed inset-0 z-10 overflow-y-auto">
+ <div class="flex flex-col min-h-full justify-center p-4 text-center items-center sm:p-0">
+ <div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 ">
+ <h1 class="mt-2 mx-2 font-bold">Create User</h1>
+
+ <form [formGroup]="createUser" (ngSubmit)="onSubmit()" class="flex flex-col pb-2 mx-2">
+ <input class="border-b-4 mt-2 w-full" type="text" placeholder="Username" formControlName="username">
+ <input class="border-b-4 mt-2 w-full" type="password" placeholder="Password" formControlName="password">
+ <div class="my-2 border-b-4">
+ <label class="mt-2 w-fit">Admin</label><input class="ml-6" type="checkbox" formControlName="admin">
+ </div>
+ <div class="flex flex-row justify-between">
+ <button class="border-2 border-black rounded-lg px-2 hover:bg-gray-300 mt-2" type="submit">Create</button>
+ <button class="border-2 border-black rounded-lg px-2 hover:bg-gray-300 mt-2" (click)="closeModal.emit()">Close</button>
+ </div>
+ </form>
+
+ </div>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/user-shit/update-user/update-user.component.html b/frontend/src/app/user-shit/update-user/update-user.component.html
index 2db8b76..e302801 100644
--- a/frontend/src/app/user-shit/update-user/update-user.component.html
+++ b/frontend/src/app/user-shit/update-user/update-user.component.html
@@ -1,8 +1,21 @@
-<h1>Update User</h1>
-<form [formGroup]="updateUser" (ngSubmit)="onSubmit()">
- <input type="text" formControlName="username">
- <br>
- <label>Admin</label><input type="checkbox" formControlName="admin">
- <br>
- <button type="submit">Update</button><button (click)="closeModal.emit();">Close</button>
-</form>
\ No newline at end of file
+<div class="z-10 relative">
+ <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+ <div class="fixed inset-0 z-10 overflow-y-auto">
+ <div class="flex flex-col min-h-full justify-center p-4 text-center items-center sm:p-0">
+ <div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 ">
+ <h1 class="mt-2 mx-2 font-bold">Update User</h1>
+
+ <form [formGroup]="updateUser" (ngSubmit)="onSubmit()" class="flex flex-col pb-2 mx-2">
+ <input class="border-b-4 mt-2 w-full" type="text" formControlName="username">
+ <div class="my-2 border-b-4">
+ <label class="mt-2 w-fit">Admin</label><input class="ml-6" type="checkbox" formControlName="admin">
+ </div>
+ <div class="flex flex-row justify-between">
+ <button class="border-2 border-black rounded-lg px-2 hover:bg-gray-300 mt-2" type="submit">Update</button>
+ <button class="border-2 border-black rounded-lg px-2 hover:bg-gray-300 mt-2" (click)="closeModal.emit();">Close</button>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+</div>
\ No newline at end of file
--
GitLab