Merge branch 'dev' into cecile
This commit is contained in:
AlineRinquin
GitHub
commit
6504d28c4b
82 changed files with 3557 additions and 2862 deletions
|
|
@ -1 +0,0 @@
|
|||
<p>avatar works!</p>
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
@ -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 {
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,46 @@
|
|||
<p>card-menu works!</p>
|
||||
<div class="menu">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
.menu {
|
||||
margin-left: 500px;
|
||||
}
|
||||
|
|
@ -1,4 +1,16 @@
|
|||
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';
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-card-menu',
|
||||
|
|
@ -6,10 +18,92 @@ import { Component, OnInit } from '@angular/core';
|
|||
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 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']);
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
//affichage des menus d'une team
|
||||
this.menusService.getMenu()?.subscribe((listMenus: any[])=>{
|
||||
console.log(listMenus);
|
||||
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
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,29 +1,43 @@
|
|||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<button routerLink="../modifier-contact/{{personne.id}}" class="w-100 btn btn-lg btn-rounded btn-secondary">
|
||||
Modifier
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<button class="w-100 btn btn-lg btn-rounded btn-secondary">
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6 offset-md-3">
|
||||
<img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/contact-1.png"/>
|
||||
<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="row d-flex justify-content-end align-items-center flex-row">
|
||||
<div class="couleur col-7" [style.background-color]="personne.couleur"></div>
|
||||
<div class="col-5">
|
||||
<div class="col">
|
||||
<button routerLink="../modifier-contact/{{personne.id}}"
|
||||
class=" btn btn-sm btn-rounded btn-secondary mb-2">
|
||||
Modifier
|
||||
</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class=" btn btn-sm btn-rounded btn-secondary" (click)="onClickDelete(personne.id)">
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-12">
|
||||
<div class="row my-3 d-flex justify-content-center flex-row">
|
||||
<span class="fiche-contact col-7">{{ personne.prenom }} {{ personne.nom }} </span>
|
||||
</div>
|
||||
<div class="row my-3 d-flex justify-content-center flex-row">
|
||||
<span i class="col-4 bi bi-telephone-inbound"></span>
|
||||
<span class="fiche-contact col-7">{{ personne.telephone }}</span>
|
||||
</div>
|
||||
<div class="row my-3 d-flex justify-content-center flex-row">
|
||||
<i class="col-4 bi bi-envelope"></i>
|
||||
<span class="fiche-contact col-7">{{ personne.email }}</span>
|
||||
</div>
|
||||
<div class="row my-3 d-flex justify-content-center flex-row">
|
||||
<i class="col-4 bi bi-calendar-heart"></i>
|
||||
<span class="fiche-contact col-7">{{ personne.dateNaissance }}</span>
|
||||
</div>
|
||||
<div class="row my-3 d-flex justify-content-center flex-row">
|
||||
<i class="col-4 bi bi-map"></i>
|
||||
<span class="fiche-contact col-7">{{ personne.adresse }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,10 +1,26 @@
|
|||
.btn-secondary {
|
||||
color: #fff;
|
||||
background-color: #5a1e63 !important;
|
||||
width: 100%;
|
||||
max-width: 150px;
|
||||
padding: 15px;
|
||||
margin: auto;
|
||||
min-width: 100px;
|
||||
border-radius: 55px;
|
||||
}
|
||||
|
||||
.couleur{
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
.info{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.fiche-contact{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-fiche-contact',
|
||||
|
|
@ -7,8 +7,14 @@ import { Component, Input, OnInit } from '@angular/core';
|
|||
})
|
||||
export class FicheContactComponent implements OnInit {
|
||||
@Input() personne: any;
|
||||
@Output() clickDelete = new EventEmitter();
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnInit(): void {}
|
||||
|
||||
onClickDelete(numPerson: number){
|
||||
window.alert("Le contact à bien été supprimé!")
|
||||
this.clickDelete.emit(numPerson);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
<div class="meteo">
|
||||
<input type="text" id="ville">
|
||||
<label for="ville">Entrez votre code postal</label>
|
||||
<button id="meteo-button">Ok !</button>
|
||||
<iframe id="widget_autocomplete_preview" width="150" height="300" frameborder="0"
|
||||
<iframe id="widget_autocomplete_preview" width="400" height="150" frameborder="1" border-radius="5"
|
||||
src="https://meteofrance.com/widget/prevision/751010"> </iframe>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
|
||||
|
|
@ -1,11 +1,29 @@
|
|||
<nav class="custom-side-bar flex-shrink-0 bg-white border-end">
|
||||
<div id="navbarNavAltMarkup">
|
||||
<div class="navbar-nav">
|
||||
<a routerLink="../compte" routerLinkActive="active-custom" class="nav-link">Ma Team</a>
|
||||
<a routerLink="../repertoire" routerLinkActive="active-custom" class="nav-link">Répertoire</a>
|
||||
<a routerLink="../to-do-list" routerLinkActive="active-custom" class="nav-link">To-Do-List</a>
|
||||
<a routerLink="../menu" routerLinkActive="active-custom" class="nav-link">Menus</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
Ma Team</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a routerLink="/repertoire" routerLinkActive="active-custom" class="nav-link">
|
||||
<i class="bi bi-person-rolodex"></i>
|
||||
Répertoire</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a routerLink="../to-do-list" routerLinkActive="active-custom" class="nav-link">
|
||||
<i class="bi bi-check2-square"></i>
|
||||
To-Do-List</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a routerLink="../menu" routerLinkActive="active-custom" class="nav-link">
|
||||
<i class='fas fa-pizza-slice'></i>
|
||||
Menus</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a routerLink="../agenda" routerLinkActive="active-custom" class="nav-link">
|
||||
<i class="bi bi-calendar-event"></i>
|
||||
Agenda</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: left;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background-color: rgb(238, 238, 238);
|
||||
}
|
||||
.nav{
|
||||
margin-top: 20px;
|
||||
align-items: left;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
a{
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -1,40 +1,55 @@
|
|||
<input
|
||||
type="text"
|
||||
class="todo-title"
|
||||
placeholder="Titre"
|
||||
value = "{{todo.nom}}"
|
||||
/>
|
||||
<div>
|
||||
<button (click)="effacerList()">Effacer la To Do List</button>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
class="todo-input"
|
||||
placeholder="Ajoute une nouvelle Tâche"
|
||||
placeholder="+ Nouvelle Tâche"
|
||||
[(ngModel)]="todoTitle"
|
||||
(keyup.enter)="addTitle()"
|
||||
(keyup.enter)="addTache(todo.id)"
|
||||
/>
|
||||
|
||||
<div class="element" *ngFor="let todo of todosFilter()">
|
||||
|
||||
|
||||
<div class="element" *ngFor="let tache of todo.taches">
|
||||
<div class="element-gauche">
|
||||
<input
|
||||
type="checkbox"
|
||||
[(ngModel)]="todo.completed"
|
||||
(change)="doneEdit(todo)"
|
||||
[(ngModel)]="tache.etat"
|
||||
(change)="doneEdit(tache)"
|
||||
checked="checked"
|
||||
/>
|
||||
<div
|
||||
*ngIf="!todo.editing; else editingTodo"
|
||||
*ngIf="!tache.editing; else editingTodo"
|
||||
class="nomTache"
|
||||
[ngClass]="{ completed: todo.completed }"
|
||||
(dblclick)="modifier(todo)"
|
||||
[ngClass]="{ completed: tache.etat }"
|
||||
(dblclick)="modifier(tache)"
|
||||
>
|
||||
{{ todo.title }}
|
||||
{{ tache.texte }}
|
||||
</div>
|
||||
<ng-template #editingTodo>
|
||||
<input
|
||||
type="text"
|
||||
class="modifier-element"
|
||||
[(ngModel)]="todo.title"
|
||||
(blur)="doneEdit(todo)"
|
||||
(keyup.enter)="doneEdit(todo)"
|
||||
(keyup.esc)="cancelEdit(todo)"
|
||||
[(ngModel)]="tache.texte"
|
||||
(blur)="doneEdit(tache)"
|
||||
(keyup.enter)="doneEdit(tache)"
|
||||
(keyup.esc)="cancelEdit(tache)"
|
||||
autofocus
|
||||
/>
|
||||
</ng-template>
|
||||
</div>
|
||||
<div class="deleteTache" (click)="deleteTodo(todo.id)">×</div>
|
||||
<div class="deleteTache" (click)="deleteTodo(tache.id)">×</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="extra-container">
|
||||
<div>
|
||||
<label
|
||||
|
|
@ -48,7 +63,7 @@
|
|||
<div>{{ toDoRest() }} tâches</div>
|
||||
</div>
|
||||
<div class="extra-container">
|
||||
<div>
|
||||
<!-- <div>
|
||||
<button [ngClass]="{ active: filter === 'tous' }" (click)="filter = 'tous'">
|
||||
Toutes la To Do List
|
||||
</button>
|
||||
|
|
@ -65,8 +80,6 @@
|
|||
Terminées
|
||||
</button>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div>
|
||||
<button (click)="effacerList()">Effacer la To Do List</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,15 @@
|
|||
.todo-title {
|
||||
width: 25%;
|
||||
padding: 10px 18px;
|
||||
font-size: xx-large;
|
||||
margin-bottom: 16px;
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.todo-input {
|
||||
width: 100%;
|
||||
width: 20%;
|
||||
padding: 10px 18px;
|
||||
font-size: 18px;
|
||||
margin-bottom: 16px;
|
||||
|
|
@ -7,6 +17,8 @@
|
|||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.element {
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
|
|
@ -16,6 +28,7 @@
|
|||
}
|
||||
|
||||
.deleteTache {
|
||||
width: 75%;
|
||||
cursor: pointer;
|
||||
margin-left: 14px;
|
||||
&:hover {
|
||||
|
|
@ -40,11 +53,12 @@
|
|||
margin-left: 12px;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc; //override defaults
|
||||
border: 1px solid rgb(204, 204, 204); //override defaults
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
background-color:aquamarine;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -53,15 +67,6 @@
|
|||
color: grey;
|
||||
}
|
||||
|
||||
.extra-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 16px;
|
||||
border-top: 1px solid lightgrey;
|
||||
padding-top: 14px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 14px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Todo } from 'src/app/interfaces/todo';
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { Tache} from 'src/app/models/tache';
|
||||
import { ToDoList} from 'src/app/models/to-do-list';
|
||||
import { TodoService } from 'src/app/services/todo.service';
|
||||
import { TodoList } from 'src/app/todo-list';
|
||||
|
||||
@Component({
|
||||
selector: 'app-to-do-list',
|
||||
|
|
@ -7,22 +11,26 @@ import { Todo } from 'src/app/interfaces/todo';
|
|||
styleUrls: ['./to-do-list.component.scss'],
|
||||
})
|
||||
export class ToDoListComponent implements OnInit {
|
||||
@Input() todo!: ToDoList;
|
||||
public beforeEditCache: string;
|
||||
public todos: Todo[];
|
||||
//public todos: ToDoList[];
|
||||
public todoTitle: string;
|
||||
public idTodo: number;
|
||||
public filter : string;
|
||||
public casesRestantes : boolean;
|
||||
public masterSelected: boolean;
|
||||
public result : any;
|
||||
public tache : Tache [];
|
||||
|
||||
constructor() {
|
||||
constructor(private TodoService : TodoService, private router: Router ) {
|
||||
this.beforeEditCache = '';
|
||||
this.todos = [];
|
||||
//this.todos = [];
|
||||
this.todoTitle = '';
|
||||
this.idTodo = 0;
|
||||
this.filter ='';
|
||||
this.casesRestantes=true;
|
||||
this.masterSelected= false;
|
||||
this.tache = [];
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
|
|
@ -31,89 +39,83 @@ export class ToDoListComponent implements OnInit {
|
|||
this.filter='tous';
|
||||
this.idTodo = 4;
|
||||
this.todoTitle = '';
|
||||
this.todos = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Finish Angular Screencast',
|
||||
completed: false,
|
||||
editing: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Take over world',
|
||||
completed: false,
|
||||
editing: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'One more thing',
|
||||
completed: false,
|
||||
editing: false,
|
||||
},
|
||||
];
|
||||
|
||||
}
|
||||
//ajouter tache
|
||||
addTitle(): void {
|
||||
if (this.todoTitle.trim().length === 0) {
|
||||
return;
|
||||
|
||||
addTache(idTodoList : number) {//idTodoList id que la todoList que l'on récupère
|
||||
console.log(idTodoList);
|
||||
const tache: Tache = {
|
||||
id : 0,
|
||||
texte: this.todoTitle,
|
||||
etat : false,
|
||||
editing : false,
|
||||
|
||||
}
|
||||
|
||||
this.todos.push({
|
||||
id: this.idTodo,
|
||||
title: this.todoTitle,
|
||||
completed: false,
|
||||
editing: false,
|
||||
});
|
||||
this.todoTitle = '';
|
||||
this.idTodo++;
|
||||
console.log(this.tache);
|
||||
this.TodoService.addTache(tache,idTodoList).subscribe((resp)=>{
|
||||
window.location.reload();
|
||||
})
|
||||
}
|
||||
|
||||
//modifier la tâche
|
||||
modifier(todo: Todo): void {
|
||||
this.beforeEditCache = todo.title;
|
||||
todo.editing = true;
|
||||
|
||||
|
||||
//modifier par l'input
|
||||
modifier(tache: Tache): void {
|
||||
this.beforeEditCache = tache.texte;
|
||||
tache.editing = true;
|
||||
}
|
||||
|
||||
// modifier l'apparence focus
|
||||
doneEdit(todo: Todo): void {
|
||||
if (todo.title.trim().length === 0) {
|
||||
todo.title = this.beforeEditCache;
|
||||
// ajouter la modification dans la liste
|
||||
doneEdit(tache: Tache): void {
|
||||
if (tache.texte.trim().length === 0) {
|
||||
tache.texte = this.beforeEditCache;
|
||||
}
|
||||
this.casesRestantes= this.casesQuiRestes();
|
||||
todo.editing = false;
|
||||
tache.editing = false;
|
||||
this.TodoService.updateTache(tache).subscribe((resp)=>{
|
||||
console.log(tache);
|
||||
window.location.reload();
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
// annuler la modification
|
||||
cancelEdit(todo: Todo): void {
|
||||
todo.title = this.beforeEditCache;
|
||||
todo.editing = false;
|
||||
cancelEdit(tache: Tache): void {
|
||||
tache.texte = this.beforeEditCache;
|
||||
tache.editing = false;
|
||||
}
|
||||
|
||||
//supprimer la tache
|
||||
deleteTodo(id: number): void {
|
||||
this.todos = this.todos.filter((todo) => todo.id !== id);
|
||||
}
|
||||
deleteTodo(id: number) {
|
||||
this.TodoService.deleteTacheById(id).subscribe(
|
||||
resp =>{
|
||||
window.location.reload();
|
||||
}
|
||||
);}
|
||||
|
||||
|
||||
|
||||
//nombre de tâches restantes
|
||||
toDoRest(): number{
|
||||
return this.todos.filter(todo=> !todo.completed).length;
|
||||
return this.todo.taches.filter((tache: Tache)=> !tache.etat).length;
|
||||
}
|
||||
|
||||
//Cocher toutes les tâches de la liste
|
||||
listComplete(): boolean {
|
||||
return this.todos.filter(todo=> todo.completed).length>0;
|
||||
return this.todo.taches.filter((tache: Tache)=> tache).length>0;
|
||||
}
|
||||
|
||||
//Effacer la to do list
|
||||
|
||||
effacerList(): void {
|
||||
this.todos = [];
|
||||
//this.todo = [];
|
||||
}
|
||||
|
||||
//cocher toutes les cases de la todoList
|
||||
cocherAllTodoList(): void {
|
||||
for (var i = 0; i < this.todos.length; i++) {
|
||||
this.todos[i].completed = this.masterSelected;
|
||||
for (var i = 0; i < this.todo.taches.length; i++) {
|
||||
this.todo.taches[i].etat = this.masterSelected;
|
||||
}
|
||||
this.cocherAllTodoList();
|
||||
}
|
||||
|
|
@ -123,16 +125,16 @@ export class ToDoListComponent implements OnInit {
|
|||
}
|
||||
|
||||
//barre de filtre des tâches
|
||||
todosFilter(): Todo[] {
|
||||
/* todosFilter(): ToDoList[] {
|
||||
if(this.filter === 'tous'){
|
||||
return this.todos
|
||||
return this.todo.taches
|
||||
}else if (this.filter === 'active'){
|
||||
return this.todos.filter(todo=> !todo.completed)
|
||||
return this.todo.taches.filter((tache: Tache)=> !tache.etat)
|
||||
}else if (this.filter === 'complete'){
|
||||
return this.todos.filter(todo=>todo.completed)
|
||||
}
|
||||
return this.todos
|
||||
return this.todo.taches.filter((tache: Tache)=>tache.etat)
|
||||
}
|
||||
return this.todo
|
||||
} */
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue