Skip to content
Snippets Groups Projects
Commit d14924de authored by alec.schmidt's avatar alec.schmidt
Browse files

dashboard styling and modal for users

parent 1b1a8f0d
No related branches found
No related tags found
No related merge requests found
No preview for this file type
<button (click)="modalCreate=true;">Create User</button>
<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>
<thead>
<th>Username</th>
<th>Admin</th>
<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">
<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 *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>
<thead>
<th>Question</th>
<th>Catégorie</th>
<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">
<td>{{question.question}}</td>
<td>{{question.category}}</td>
<td>UPDATE</td>
<td><button (click)="deleteQuestion(question)">DELETE</button></td>
<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>
......@@ -39,3 +41,4 @@
<div *ngIf="modalCreate">
<app-create-user (closeModal)="modalCreate=false;"></app-create-user>
</div>
</div>
<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>
<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
<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>
<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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment