diff --git a/package-lock.json b/package-lock.json index 3a59d04..fb625c1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@angular/platform-browser": "~13.0.0", "@angular/platform-browser-dynamic": "~13.0.0", "@angular/router": "~13.0.0", + "@daypilot/daypilot-lite-angular": "^3.2.0", "@ng-bootstrap/ng-bootstrap": "^12.0.0", "bootstrap": "^5.1.3", "bootstrap-icons": "^1.8.1", @@ -2371,6 +2372,18 @@ "postcss": "^8.3" } }, + "node_modules/@daypilot/daypilot-lite-angular": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@daypilot/daypilot-lite-angular/-/daypilot-lite-angular-3.2.0.tgz", + "integrity": "sha512-tpxwGZOL7Jdm4ACvuHIdWUkEu0iMk4gKznRB+8BUsNeo+gfP+Wx4xEgoeuKEFdA4lSxsrufjjPjK3B6azgZUOg==", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": ">=12.0.0", + "@angular/core": ">=12.0.0" + } + }, "node_modules/@discoveryjs/json-ext": { "version": "0.5.6", "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz", @@ -12943,6 +12956,14 @@ "postcss-value-parser": "^4.2.0" } }, + "@daypilot/daypilot-lite-angular": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@daypilot/daypilot-lite-angular/-/daypilot-lite-angular-3.2.0.tgz", + "integrity": "sha512-tpxwGZOL7Jdm4ACvuHIdWUkEu0iMk4gKznRB+8BUsNeo+gfP+Wx4xEgoeuKEFdA4lSxsrufjjPjK3B6azgZUOg==", + "requires": { + "tslib": "^2.3.0" + } + }, "@discoveryjs/json-ext": { "version": "0.5.6", "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz", diff --git a/package.json b/package.json index c17bf17..ecaf75d 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@angular/platform-browser": "~13.0.0", "@angular/platform-browser-dynamic": "~13.0.0", "@angular/router": "~13.0.0", + "@daypilot/daypilot-lite-angular": "^3.2.0", "@ng-bootstrap/ng-bootstrap": "^12.0.0", "bootstrap": "^5.1.3", "bootstrap-icons": "^1.8.1", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d1960bf..3f6ed7b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -39,8 +39,7 @@ import { PageHumeurComponent } from './pages/page-humeur/page-humeur.component'; import { FooterComponent } from './components/footer/footer.component'; import { PageDeleteAccountComponent } from './pages/page-delete-account/page-delete-account.component'; import { PageUpdateAccountComponent } from './pages/page-update-account/page-update-account.component'; - - +import { DayPilot, DayPilotModule } from "@daypilot/daypilot-lite-angular"; @NgModule({ declarations: [ @@ -87,6 +86,7 @@ import { PageUpdateAccountComponent } from './pages/page-update-account/page-upd HttpClientModule, FormsModule, AutofocusFixModule.forRoot(), + DayPilotModule ], providers: [ diff --git a/src/app/pages/page-agenda/page-agenda.component.html b/src/app/pages/page-agenda/page-agenda.component.html index 2d3d7d1..bd993c8 100644 --- a/src/app/pages/page-agenda/page-agenda.component.html +++ b/src/app/pages/page-agenda/page-agenda.component.html @@ -1,2 +1,37 @@ - \ No newline at end of file + + + + +
+
+ +
+ +
+
+
+ +
+
+
+ Previous + Today + Next + team : {{teamId}} - user: {{userId}} - role: {{role}} + Ajouter un évènement + +
+ + + +
+
+
+ +
\ No newline at end of file diff --git a/src/app/pages/page-agenda/page-agenda.component.scss b/src/app/pages/page-agenda/page-agenda.component.scss index e69de29..95439b2 100644 --- a/src/app/pages/page-agenda/page-agenda.component.scss +++ b/src/app/pages/page-agenda/page-agenda.component.scss @@ -0,0 +1,43 @@ +.wrap { + display: flex; + margin: 10px; +} + +.left { + margin-right: 10px; +} + +.main { + flex-grow: 1; +} + +.buttons { + margin-bottom: 10px; +} + +.buttons a { + display: inline-block; + text-align: center; + background-color: #3c78d8; + border: 1px solid #1155cc; + color: #fff; + padding: 6px 20px; + border-radius: 2px; + cursor: pointer; + margin-right: 5px; + width: 80px; + text-decoration: none; +} + +.main-body { + position: absolute; + left: 0px; + right: 0px; + top: 0px; + bottom: 0px; + overflow: hidden; +} + +.fullscreen { + position: absolute; top:90px; left: 0px; right: 0px; bottom: 0px; +} \ No newline at end of file diff --git a/src/app/pages/page-agenda/page-agenda.component.ts b/src/app/pages/page-agenda/page-agenda.component.ts index d0c98bc..291b1e0 100644 --- a/src/app/pages/page-agenda/page-agenda.component.ts +++ b/src/app/pages/page-agenda/page-agenda.component.ts @@ -1,15 +1,269 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core'; +import { DayPilot, DayPilotCalendarComponent, DayPilotNavigatorComponent } from "@daypilot/daypilot-lite-angular"; +import { EvenementService } from 'src/app/services/evenement.service'; +import { environment } from 'src/environments/environment'; +import jwt_decode from 'jwt-decode'; @Component({ selector: 'app-page-agenda', templateUrl: './page-agenda.component.html', styleUrls: ['./page-agenda.component.scss'] }) -export class PageAgendaComponent implements OnInit { +export class PageAgendaComponent implements AfterViewInit { - constructor() { } + userId : any; + teamId : any; + role:any; + isShow: boolean; + alert:any; - ngOnInit(): void { + @ViewChild("navigator") navigator!: DayPilotNavigatorComponent; + @ViewChild("calendar") calendar!: DayPilotCalendarComponent; + + constructor(private evenementService:EvenementService) { + this.isShow = false; + this.alert = ""; } + get date(): DayPilot.Date { + return this.config.startDate as DayPilot.Date; + } + + set date(value: DayPilot.Date) { + this.config.startDate = value; + } + + navigatorConfig: DayPilot.NavigatorConfig = { + showMonths: 1, + skipMonths: 1, + locale: "fr-fr", + selectMode: "Week", + cellWidth: 30, + cellHeight: 30, + dayHeaderHeight: 30, + titleHeight: 30 + }; + + events: DayPilot.EventData[] = []; + + onClickCloseAlert(){ + console.log('fermeture'); + this.isShow = ! this.isShow; + } + + ngAfterViewInit(): void { + } + + ngOnInit(): void { + const token = localStorage.getItem(environment.tokenKey); + if(token) { + const decodedToken = jwt_decode(token); + this.userId = decodedToken.userId; + this.teamId = decodedToken.teamId; + this.role = decodedToken.auth[0].authority; + }else{ + // + } + } + + // petite triche pour eviter la repetition du nom dans le RDV + rdvSplit(rdv:any){ + let titleRDV = rdv.split('\r'); + console.log(titleRDV[0]); + return titleRDV[0]; + } + + config: DayPilot.CalendarConfig = { + startDate: DayPilot.Date.today(), + locale: "fr-fr", + viewType: "Week", + //heightSpec: "Parent100Pct", + cellHeight: 30, + headerHeight: 30, + hourWidth: 60, + onEventMoved: (args) => { + console.log("Event moved:"+args.e.id()+" - "+args.e.text()+" - "+args.e.end()+" - "+args.e.start()+' - '+args.e.data.tags.membre); + let event = { + start: args.e.start(), + end: args.e.end(), + id: args.e.id(), + barColor: "#555555", + text: this.rdvSplit(args.e.text()), + membre: {id:args.e.data.tags.membre}, + team: {id:this.teamId} + } + if( (args.e.data.tags.membre == this.userId) || (this.role == 'ROLE_PARENT')){ // mettre role parent en variable + this.evenementService.updateEvenements(event).subscribe( + { + next: result => { + this.viewChange(); + this.alert={"type":"success", "content":"L'évènement à bien été modifié"}; + this.isShow = true; + }, + error: err => { + this.viewChange(); + this.alert={"type":"danger", "content":"Problème lors de la modification de l'évenment"}; + this.isShow = true; + }, + complete: () => console.log('DONE!') + } + ); + }else{ + this.viewChange(); + this.alert={"type":"danger", "content":"Vous ne pouvez pas modifié cet évènement !"}; + this.isShow = true; + } + + }, + onTimeRangeSelected: async (args) => { + const modal = await DayPilot.Modal.prompt("Create a new event:", "Nouveau RDV"); + const dp = args.control; + dp.clearSelection(); + if (!modal.result) { return; } + let event = { + start: args.start, + end: args.end, + id: DayPilot.guid(), + barColor: "#555555", + text: modal.result + } + dp.events.add(event); + Object.assign(event, {id: ""}); + Object.assign(event, {membre: {id:this.userId}}); + Object.assign(event, {team: {id:this.teamId}}); + console.log("Event added: " + event); + // let data = dp.events; + // Object.keys(data).map(function(key, index) { + // data[key] = { + // barColor:data[key].membre.couleur, + // //backColor:data[key].membre.couleur, + // "id": data[key].id, + // "start": data[key].start, + // "end": data[key].end, + // "text": data[key].text + // }; + // }); + this.evenementService.addEvenements(event).subscribe({ + next: result => { + this.viewChange(); + this.alert={"type":"success", "content":"L'évènement à été correctement ajouté au calendrier"}; + this.isShow = true; + }, + error: err => { + this.viewChange(); + this.alert={"type":"danger", "content":"Problème lors de l'ajout de l'évenment"}; + this.isShow = true; + }, + complete: () => console.log('DONE!') + }); + }, + eventDeleteHandling: "Update", + onEventDeleted: (args) => { + console.log("Event deleted: " + args.e.id()); + if( (args.e.data.tags.membre == this.userId) || (this.role == 'ROLE_PARENT')){ // mettre role parent en variable + this.evenementService.deleteEvenements(Number(args.e.id())).subscribe({ + next: result => { + this.viewChange(); + this.alert={"type":"success", "content":"L'évènement à été correctement supprimé du calendrier"}; + this.isShow = true; + }, + error: err => { + this.viewChange(); + this.alert={"type":"danger", "content":"Problème lors de la suppression de l'évenment"}; + this.isShow = true; + }, + complete: () => console.log('DONE!') + }) + }else{ + this.viewChange(); + this.alert={"type":"danger", "content":"Vous ne pouvez pas suprimé cet évènement !"}; + this.isShow = true; + } + }, + eventResizeHandling: "Update", + onEventResized: (args) => { + console.log("Event resized: " + args.e.id()); + let event = { + start: args.e.start(), + end: args.e.end(), + id: args.e.id(), + barColor: "#555555", + text: args.e.text(), + membre: {id:this.userId}, + team: {id:this.teamId} + } + this.evenementService.updateEvenements(event).subscribe( + { + next: result => { + this.viewChange(); + this.alert={"type":"success", "content":"L'évènement à bien été modifié"}; + this.isShow = true; + }, + error: err => { + this.viewChange(); + this.alert={"type":"danger", "content":"Problème lors de la modification de l'évenment"}; + this.isShow = true; + }, + complete: () => console.log('DONE!') + } + ); + } + } + + adjust(color:string, amount:number) { + return '#' + color.replace(/^#/, '').replace(/../g, color => + ('0' + Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2)); + } + + viewChange(): void { + var from = this.calendar.control.visibleStart(); + var to = this.calendar.control.visibleEnd(); + + console.log("viewChange(): " + from + " " + to); + + // this.ds.getEvents(from, to).subscribe(result => { + //this.events = this.evenements; + this.evenementService.getEvenementsByIdTeam(this.teamId).subscribe((data: any) => { + // this.events = [{ + // "id": data[0].id, + // "start": data[0].eventDebut, + // "end": data[0].eventFin, + // "text": data[0].libelle, + // barColor: data[0].membre.couleur, + // //cssClass: "toto" + // }]; + Object.keys(data).map((key, index) => { + data[key] = { + barColor:data[key].membre.couleur, + backColor: this.adjust(data[key].membre.couleur, 90), + id: data[key].id, + start: data[key].start, + end: data[key].end, + text: data[key].text.toUpperCase()+'\r('+data[key].membre.prenom+')', + tags : { + membre: data[key].membre.id + } + }; + }); + this.events = data; + console.log(data); + console.log(this.events); + }); + // }); + } + + navigatePrevious(event: MouseEvent): void { + event.preventDefault(); + this.config.startDate = (this.config.startDate as DayPilot.Date).addDays(-7); + } + + navigateNext(event: MouseEvent): void { + event.preventDefault(); + this.config.startDate = (this.config.startDate as DayPilot.Date).addDays(7); + } + + navigateToday(event: MouseEvent): void { + event.preventDefault(); + this.config.startDate = DayPilot.Date.today(); + } } diff --git a/src/app/services/evenement.service.spec.ts b/src/app/services/evenement.service.spec.ts new file mode 100644 index 0000000..04d41e1 --- /dev/null +++ b/src/app/services/evenement.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { EvenementService } from './evenement.service'; + +describe('EvenementService', () => { + let service: EvenementService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(EvenementService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/evenement.service.ts b/src/app/services/evenement.service.ts new file mode 100644 index 0000000..7c32dcf --- /dev/null +++ b/src/app/services/evenement.service.ts @@ -0,0 +1,36 @@ +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { environment } from 'src/environments/environment'; + +@Injectable({ + providedIn: 'root' +}) +export class EvenementService { + apiUrl: string; + tokenKey: string; + + constructor(private http: HttpClient) { + // On se sert des variables d'environnement de notre application + this.apiUrl = environment.apiUrl; + this.tokenKey = environment.tokenKey; + } + + getEvenementsByIdTeam(id: any): Observable { + return this.http.get(`${this.apiUrl}/evenements/team/` + id); + } + + addEvenements(evenement: any): Observable { + console.log(evenement); + + return this.http.post(`${this.apiUrl}/evenements/add`, evenement); + } + + deleteEvenements(id: any): Observable { + return this.http.delete(`${this.apiUrl}/evenements/delete/`+id,{responseType: 'text'}); + } + + updateEvenements(evenement:any): Observable { + return this.http.put(`${this.apiUrl}/evenements/update/1`, evenement); + } +} diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 90149fd..0a4331f 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -4,7 +4,7 @@ export const environment = { production: false, - apiUrl: 'http://localhost:8088', + apiUrl: 'http://localhost:8080', tokenKey: 'TOKEN-ORGANIZEE', }; diff --git a/src/styles.scss b/src/styles.scss index 6effa48..d9d51fc 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,3 +1,12 @@ @import "~bootstrap/scss/bootstrap.scss"; //Pour utiliser les icons ne fonctionne que si vous avez fait cette commande : npm i bootstrap-icons --save @import "~bootstrap-icons/font/bootstrap-icons.scss"; + +// pour surpasser le CSS par defaut +.calendar_default_event_inner{ + font-weight: bold; +} + +.calendar_default_event{ + border-radius: 10px; +} \ No newline at end of file