Merge branch 'dev' into isa

This commit is contained in:
AlineRinquin 2022-02-17 10:24:53 +01:00 committed by GitHub
commit b66b59badc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
33 changed files with 603 additions and 427 deletions

View file

@ -1 +0,0 @@
<p>avatar works!</p>

View file

@ -1,25 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AvatarComponent } from './avatar.component';
describe('AvatarComponent', () => {
let component: AvatarComponent;
let fixture: ComponentFixture<AvatarComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AvatarComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(AvatarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View file

@ -1,15 +0,0 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-avatar',
templateUrl: './avatar.component.html',
styleUrls: ['./avatar.component.scss']
})
export class AvatarComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

View file

@ -1 +1,23 @@
<p>card-member works!</p>
<div class="container mt-5 membre">
<div class="row d-flex justify-content-center">
<div class="col-md-auto">
<div class="card p-3 py-4 align-items">
<!-- récuperer couleur du back-->
<div class="text-center"><div class="rounded-circle"id="couleur"[style.background-color]="membre.couleur"></div></div>
<div class="text-center mt-3">
<h3 class="mt-2 mb-0">{{membre.prenom }} {{membre.nom }}</h3>
<div class="buttons text-center"><button button type="button" class="btn btn-outline-primary px-4"
routerLink="../modifier-membre"
routerLinkActive="active-custom">
Modifier
</button><button button type="button" class="btn btn-primary px-4"
routerLink="../supprimer-membre"
routerLinkActive="active-custom">
Supprimer
</button>
</div>
</div>
</div>
</div>
</div>
</div>

View file

@ -0,0 +1,56 @@
#couleur{
width: 100px;
height: 100px;
margin: 0 auto;
background: black;
}
.card {
min-height: 22rem;
border: none;
position: relative;
overflow: hidden;
border-radius: 8px;
cursor: pointer
}
.fonts {
font-size: 11px
}
.buttons button:nth-child(1) {
margin-top: 5px;
border: 1px solid #7879F1 !important;
color: #7879F1;
height: 40px;
width: 150px;
}
.buttons button:nth-child(1):hover {
margin-top: 5px;
border: 1px solid #7879F1 !important;
color: #fff;
height: 40px;
width: 150px;
background-color: #7879F1
}
.buttons button:nth-child(2) {
margin-top: 5px;
border: 1px solid #7879F1 !important;
background-color: #7879F1;
color: #fff;
height: 40px;
width: 150px;
}
.buttons button:nth-child(2):hover {
margin-top: 5px;
border: 1px solid #bd4646 !important;
background-color: #bd4646;
color: #fff;
height: 40px;
width: 150px;
}

View file

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-card-member',
@ -6,10 +6,12 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./card-member.component.scss']
})
export class CardMemberComponent implements OnInit {
@Input() membre: any;
constructor() { }
ngOnInit(): void {
}
}

View file

@ -2,4 +2,45 @@
<div *ngFor="let menu of listMenus">
<p>{{ menu.dateMenu }} {{ menu.libelle }}</p>
</div>
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">
Ajouter un menu
</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">
×
</span>
</button>
</div>
<div class="modal-body">
<form [formGroup]="menuForm">
<div class="form-group">
<label for="dateMenu">
Date
</label>
<div class="input-group">
<input id="dateMenu" class="form-control" formControlName="dateMenuFc" placeholder="yyyy-mm-dd" name="date"
>
<input id="libelle" class="form-control" formControlName="libelleFc" placeholder="" name="libelle"
>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="modal.close(saveMenu())">
Save
</button>
</div>
</ng-template>
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">
Ajouter un menu
</button>
</div>

View file

@ -2,6 +2,13 @@ import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Menu } from 'src/app/models/menu';
import { MenusService } from 'src/app/services/menus.service';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
import {
FormBuilder,
FormControl,
FormGroup,
Validators,
} from '@angular/forms';
@ -11,16 +18,49 @@ import { MenusService } from 'src/app/services/menus.service';
styleUrls: ['./card-menu.component.scss']
})
export class CardMenuComponent implements OnInit {
closeResult = '';
public listMenus:any[];
public menuId : any;
public menuForm : FormGroup;
constructor(
private menusService: MenusService,
private router: Router,
private route: ActivatedRoute
private route: ActivatedRoute,
private modalService: NgbModal,
private fb: FormBuilder
) {
this.listMenus=[];
this.menuId=0;
this.menuForm = new FormGroup({});
}
//ajout d'un menu
saveMenu(): void {
const dateValue = this.menuForm.value['dateMenuFc'];
const libelleValue = this.menuForm.value['libelleFc'];
const menu: Menu = {
dateMenu: dateValue,
libelle: libelleValue,
};
// if (menu.dateMenu != undefined && menu.libelle != '') {
console.log(dateValue);
this.menusService.addMenu(menu)?.subscribe((resp) => {
this.router.navigate(['menu']);
});
// } else {
// this.router.navigate(['menu']);
// }
}
ngOnInit(): void {
//affichage des menus d'une team
this.menusService.getMenu()?.subscribe((listMenus: any[])=>{
@ -28,6 +68,42 @@ this.menusService.getMenu()?.subscribe((listMenus: any[])=>{
this.listMenus=listMenus;
});
this.menuForm = this.fb.group(
{
dateMenuFc: new FormControl('',[Validators.required]),
libelleFc: new FormControl('',[Validators.required]),
}
);
}
open(content: any) {
this.modalService.open(content,
{ariaLabelledBy: 'menu'}).result.then((result)=> {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult =
`Dismissed ${this.getDismissReason(reason)}`;
});
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
}
//modif d'un menu
// this.menuId=this.route.snapshot.paramMap.get('id');
// this.menusService.getMenuById(this.menuId)
// .subscribe((this.listMenus:any)=>)
//delete d'un menu

View file

@ -11,18 +11,32 @@
</button>
</div>
<div class="row align-items-center">
<div class="col-md-6 offset-md-3">
<p class="fiche-contact" >
{{ personne.couleur }}</p>
<p class="fiche-contact" >{{ personne.prenom }} {{ personne.nom }}</p>
<p class="fiche-contact" ><img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/phone.png"/>
{{ personne.telephone }}</p>
<p class="fiche-contact" ><img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/logo-gmail.png"/>
{{ personne.email }}</p>
<p class="fiche-contact" ><img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/gateau.png"/>
{{ personne.dateNaissance }}</p>
<p class="fiche-contact" >
{{ personne.adresse }}</p>
<div class="col-md-12">
<div class="row d-flex justify-content-center flex-row">
<div class= "couleur col-4" [style.background-color]="personne.couleur"></div>
<span class="fiche-contact col-7" >{{ personne.prenom }} {{ personne.nom }} </span>
</div>
<div class="row d-flex justify-content-center flex-row">
<img class= "col-4" style="max-height: 12% ; max-width: 12%" src="../../../assets/images/phone.png"/>
<span class="fiche-contact col-7" >{{ personne.telephone }}</span>
</div>
<div class="row d-flex justify-content-center flex-row">
<img class= "col-4" style="max-height: 12% ; max-width: 12%" src="../../../assets/images/logo-gmail.png"/>
<span class="fiche-contact col-7" >{{ personne.email }}</span>
</div>
<div class="row d-flex justify-content-center flex-row">
<img class= "col-4" style="max-height: 12% ; max-width: 12%" src="../../../assets/images/gateau.png"/>
<span class="fiche-contact col-7" >{{ personne.dateNaissance }}</span>
</div>
<div class="row d-flex justify-content-center flex-row">
<p class="fiche-contact col-7" >{{ personne.adresse }}</p>
</div>
</div>
</div>

View file

@ -7,6 +7,26 @@
margin: auto;
}
.couleur{
border: none;
margin-top: -15px;
border-radius: 80%;
width: 60px;
height: 60px;
flex-direction: row;
}
.info{
display:flex;
justify-content: center;
}
.fiche-contact{
display:flex;
justify-content: center;
flex-direction: row;
}
.container {
border: 1px solid 8c2e9b;
padding: 10px;

View file

@ -1,5 +1,5 @@
<nav class="wrapper">
<ul class="nav flex-column">
<nav class="wrapper md-auto position-fixed ">
<ul class="nav flex-column" id="sticky-sidebar">
<li class="nav-item" ngbNavItem="maTeam" >
<a routerLink="../compte" routerLinkActive="active-custom" class="nav-link">
<i class="bi bi-people-fill"></i>

View file

@ -1,12 +1,11 @@
.wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
flex-direction: column;
align-items: left;
width: auto;
height: 100%;
position: absolute;
background-color: rgb(238, 238, 238);
}
.nav{
margin-top: 20px;