merde

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",

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",

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: [
 

src/app/pages/page-agenda/page-agenda.component.html

@@ -1,2 +1,37 @@
 <app-header></app-header>
-<app-side-bar></app-side-bar>
+<app-side-bar></app-side-bar>
+
+<div class="alert alert-{{alert.type}}" role="alert" style="position:absolute;z-index:999;top:50%;left:40%; width: 500px;" *ngIf="isShow" id="showAlert">
+    {{alert.content}}
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close" (click)="onClickCloseAlert()">
+        <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+
+<div style="display: flex;">
+    <div style="width:150px;">
+        <app-side-bar></app-side-bar>
+    </div>
+    
+    <div style="width: 100%;">
+        <div class="wrap">
+            <div class="left">
+                <daypilot-navigator [config]="navigatorConfig" [(date)]="date" #navigator></daypilot-navigator>
+            </div>
+            <div class="main">
+                <div style="width:100%; margin:10px">
+                    <a href="#" class="btn btn-sm btn-primary" style="margin-right:5px;" (click)="navigatePrevious($event)">Previous</a>
+                    <a href="#" class="btn btn-sm btn-primary" style="margin-right:5px;" (click)="navigateToday($event)">Today</a>
+                    <a href="#" class="btn btn-sm btn-primary" style="margin-right:5px;" (click)="navigateNext($event)">Next</a>
+                    team : {{teamId}} - user: {{userId}} - role: {{role}}
+                    <span style="float:right"><a href="#" class="btn btn-sm btn-primary" style="margin-right:5px;">Ajouter un évènement</a></span>
+                    
+                </div>
+                
+                    <daypilot-calendar [config]="config" [events]="events" #calendar (viewChange)="viewChange()"></daypilot-calendar>
+                
+            </div>
+        </div>
+    </div>
+    
+</div>

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;
+}

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<any>(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();
+  }
 }

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();
+  });
+});

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<any> {
+    return this.http.get(`${this.apiUrl}/evenements/team/` + id);
+  }
+
+  addEvenements(evenement: any): Observable<any> {
+    console.log(evenement);
+
+    return this.http.post(`${this.apiUrl}/evenements/add`, evenement);
+  }
+
+  deleteEvenements(id: any): Observable<any> {
+    return this.http.delete(`${this.apiUrl}/evenements/delete/`+id,{responseType: 'text'});
+  }
+
+  updateEvenements(evenement:any): Observable<any> {
+    return this.http.put(`${this.apiUrl}/evenements/update/1`, evenement);
+  }
+}

src/environments/environment.ts

@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  apiUrl: 'http://localhost:8088',
+  apiUrl: 'http://localhost:8080',
   tokenKey: 'TOKEN-ORGANIZEE',
 };
 

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;
+}