Skip to content
Snippets Groups Projects
Commit c2d49d8f authored by narindra.rajohnso's avatar narindra.rajohnso
Browse files

feat: add interface for list users and add modal

parent 8cd4a5d8
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 492 additions and 205 deletions
Frontend/quizz-game/src/app/manage/list-questions/list-questions.component.html 0 → 100644
+ 1
− 0
View file @ c2d49d8f
<p>list-questions works!</p>
Frontend/quizz-game/src/app/manage/list-questions/list-questions.component.spec.ts 0 → 100644
+ 21
− 0
View file @ c2d49d8f
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ListQuestionsComponent } from './list-questions.component';
describe('ListQuestionsComponent', () => {
let component: ListQuestionsComponent;
let fixture: ComponentFixture<ListQuestionsComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ListQuestionsComponent]
});
fixture = TestBed.createComponent(ListQuestionsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
Frontend/quizz-game/src/app/manage/list-questions/list-questions.component.ts 0 → 100644
+ 10
− 0
View file @ c2d49d8f
import { Component } from '@angular/core';
@Component({
selector: 'app-list-questions',
templateUrl: './list-questions.component.html',
styleUrls: ['./list-questions.component.css']
})
export class ListQuestionsComponent {
}
Frontend/quizz-game/src/app/manage/list-users/list-users.component.css 0 → 100644
+ 0
− 0
View file @ c2d49d8f
Frontend/quizz-game/src/app/manage/list-users/list-users.component.html 0 → 100644
+ 122
− 0
View file @ c2d49d8f
<div class="p-4 bg-white block sm:flex items-center justify-between border-b border-gray-200 lg:mt-1.5">
<div class="mb-1 w-full">
<div class="mb-4">
<nav class="flex mb-5" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-2">
<li class="inline-flex items-center">
<a href="#" class="text-gray-700 hover:text-gray-900 inline-flex items-center">
<svg class="w-5 h-5 mr-2.5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
</svg>
</a>
</li>
<li>
<div class="flex items-center">
<svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"></path>
</svg>
<a href="#" class="text-gray-700 hover:text-gray-900 ml-1 md:ml-2 text-sm font-medium">Liste des
utilisateurs</a>
</div>
</li>
</ol>
</nav>
<h1 class="text-xl sm:text-2xl font-semibold text-gray-900">All users</h1>
</div>
<div class="sm:flex">
<div class="hidden sm:flex items-center sm:divide-x sm:divide-gray-100 mb-3 sm:mb-0">
<form class="lg:pr-3" action="#" method="GET">
<label for="users-search" class="sr-only">Search</label>
<div class="mt-1 relative lg:w-64 xl:w-96">
<input type="text" name="email" id="users-search"
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-cyan-600 focus:border-cyan-600 block w-full p-2.5"
placeholder="Search for users">
</div>
</form>
</div>
<div class="flex items-center space-x-2 sm:space-x-3 ml-auto">
<button type="button" (click)="addUser()"
class="w-1/2 text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-4 focus:ring-cyan-200 font-medium inline-flex items-center justify-center rounded-lg text-sm px-3 py-2 text-center sm:w-auto">
<svg class="-ml-1 mr-2 h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
clip-rule="evenodd"></path>
</svg>
Ajouter un utilisateur
</button>
</div>
</div>
</div>
</div>
<div class="flex flex-col w-screen">
<div class="overflow-x-auto">
<div class="align-middle inline-block min-w-full">
<div class="shadow overflow-hidden">
<table class="table-fixed min-w-full divide-y divide-gray-200">
<thead class="bg-gray-100">
<tr>
<th scope="col" class="p-4 text-left text-xs font-medium text-gray-500 uppercase">
Name
</th>
<th scope="col" class="p-4 text-left text-xs font-medium text-gray-500 uppercase">
Position
</th>
<th scope="col" class="p-4 text-left text-xs font-medium text-gray-500 uppercase">
Country
</th>
<th scope="col" class="p-4 text-left text-xs font-medium text-gray-500 uppercase">
Status
</th>
<th scope="col" class="p-4">
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="hover:bg-gray-100" >
<td class="p-4 flex items-center whitespace-nowrap space-x-6 mr-12 lg:mr-0">
<div class="text-sm font-normal text-gray-500">
<div class="text-base font-semibold text-gray-900">Nom</div>
<div class="text-sm font-normal text-gray-500">Email</div>
</div>
</td>
<td class="p-4 whitespace-nowrap text-base font-medium text-gray-900">Job</td>
<td class="p-4 whitespace-nowrap text-base font-medium text-gray-900">Pays</td>
<td class="p-4 whitespace-nowrap text-base font-normal text-gray-900">
<div class="flex items-center">
Active
<div class="h-2.5 w-2.5 rounded-full bg-green-400 mr-2"></div>
</div>
</td>
<td class="p-4 whitespace-nowrap space-x-2">
<button type="button" data-modal-toggle="user-modal"
class="text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-4 focus:ring-cyan-200 font-medium rounded-lg text-sm inline-flex items-center px-3 py-2 text-center">
<svg class="mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
<path fill-rule="evenodd"
d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
clip-rule="evenodd"></path>
</svg>
Edit user
</button>
<button type="button" data-modal-toggle="delete-user-modal"
class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm inline-flex items-center px-3 py-2 text-center">
<svg class="mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
clip-rule="evenodd"></path>
</svg>
Delete user
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<app-create-user *ngIf="modalUser" (closeModal)="closeModal()"></app-create-user>
Frontend/quizz-game/src/app/manage/list-users/list-users.component.spec.ts 0 → 100644
+ 21
− 0
View file @ c2d49d8f
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ListUsersComponent } from './list-users.component';
describe('ListUsersComponent', () => {
let component: ListUsersComponent;
let fixture: ComponentFixture<ListUsersComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ListUsersComponent]
});
fixture = TestBed.createComponent(ListUsersComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
Frontend/quizz-game/src/app/manage/list-users/list-users.component.ts 0 → 100644
+ 20
− 0
View file @ c2d49d8f
import { Component } from '@angular/core';
@Component({
selector: 'app-list-users',
templateUrl: './list-users.component.html',
styleUrls: ['./list-users.component.css']
})
export class ListUsersComponent {
modalUser=false;
constructor() {
}
addUser(){
this.modalUser=true;
}
closeModal(){
}
}
Frontend/quizz-game/src/app/manage/manage.component.html
+ 214
− 203
View file @ c2d49d8f
<div class="absolute top-5 left-0 right-0 flex items-center justify-center h-16">
<app-alert-add></app-alert-add>
</div>
<div class="flex h-screen">
<div class="w-1/4 flex h-screen flex-col justify-between border-e bg-white"> <div class="w-1/4 flex h-screen flex-col justify-between border-e bg-white">
<div class="px-4 py-6"> <div class="px-4 py-6">
<span <span
...@@ -49,7 +55,7 @@ ...@@ -49,7 +55,7 @@
<nav aria-label="Users Manage Nav" class="mt-2 flex flex-col px-4"> <nav aria-label="Users Manage Nav" class="mt-2 flex flex-col px-4">
<a <a
href="#" routerLink="./list-users"
class="flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700" class="flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
> >
<svg <svg
...@@ -71,7 +77,7 @@ ...@@ -71,7 +77,7 @@
</a> </a>
<a <a
href="#" routerLink="./create-user"
class="flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700" class="flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
> >
<svg <svg
...@@ -135,7 +141,7 @@ ...@@ -135,7 +141,7 @@
<nav aria-label="Users Manage Nav" class="mt-2 flex flex-col px-4"> <nav aria-label="Users Manage Nav" class="mt-2 flex flex-col px-4">
<a <a
href="#" routerLink="./list-questions"
class="flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700" class="flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
> >
<svg <svg
...@@ -157,7 +163,7 @@ ...@@ -157,7 +163,7 @@
</a> </a>
<a <a
href="#" routerLink="./create-question"
class="flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700" class="flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
> >
<svg <svg
...@@ -222,7 +228,7 @@ ...@@ -222,7 +228,7 @@
<nav aria-label="Account Nav" class="mt-2 flex flex-col px-4"> <nav aria-label="Account Nav" class="mt-2 flex flex-col px-4">
<a <a
href="#" routerLink="./account-details"
class="flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700" class="flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
> >
<svg <svg
...@@ -280,13 +286,18 @@ ...@@ -280,13 +286,18 @@
/> />
<div> <div>
<p class="text-xs"> <p class="text-xs" #userInfo>
<strong class="block font-medium">Eric Frusciante</strong> <strong class="block font-medium">{{userNamLast}}</strong>
<span> eric@frusciante.com </span> <span>{{userEm}}</span>
</p> </p>
</div> </div>
</a> </a>
</div> </div>
</div> </div>
<div class="w-3/4 h-screen">
<router-outlet></router-outlet>
</div>
</div>
Frontend/quizz-game/src/app/manage/manage.component.ts
+ 32
− 2
View file @ c2d49d8f
import { Component } from '@angular/core'; import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from "@angular/router";
import {ManageService} from "./manage.service";
@Component({ @Component({
selector: 'app-manage', selector: 'app-manage',
templateUrl: './manage.component.html', templateUrl: './manage.component.html',
styleUrls: ['./manage.component.css'] styleUrls: ['./manage.component.css']
}) })
export class ManageComponent { export class ManageComponent implements OnInit {
@ViewChild('userInfo') userInfo!: ElementRef;
userNamLast = '';
userEm: string = '';
loading=false;
constructor(private actRoute: ActivatedRoute, private router: Router, private manageService: ManageService) {
}
ngOnInit() {
this.loading=true;
this.actRoute.paramMap.subscribe((paramM) => {
if (!paramM.has('admin')) {
this.router.navigate(['/', 'login']);
return;
}
this.manageService.username = paramM.get('admin')!!;
console.log(this.manageService.username);
this.manageService.getUserInfo().then(userInfo => {
this.loading=false;
this.userNamLast=userInfo.firstname+' '+userInfo.lastname;
this.userEm=userInfo.email;
})
})
}
} }
Frontend/quizz-game/src/app/manage/manage.service.spec.ts 0 → 100644
+ 16
− 0
View file @ c2d49d8f
import { TestBed } from '@angular/core/testing';
import { ManageService } from './manage.service';
describe('ManageService', () => {
let service: ManageService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(ManageService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
Frontend/quizz-game/src/app/manage/manage.service.ts 0 → 100644
+ 35
− 0
View file @ c2d49d8f
import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {ErrorLogin} from "../login/login.service";
@Injectable({
providedIn: 'root'
})
export class ManageService {
constructor(private httpClient: HttpClient) { }
private _username!:string;
get username():string{
return this._username;
}
set username(value: string){
this._username=value;
}
async getUserInfo():Promise<any>{
return new Promise<any>((resolve, reject) => {
let usernamePost = {
username: this.username
};
this.httpClient.post<any>('http://localhost:30992/api/v1/admin/' + this.username + '/get-user', usernamePost).subscribe(
response => {
resolve(response.info_user);
},
error => {
reject(error.error.message);
}
);
});
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment