page agenda + module daypilot

package-lock.json

@@ -1799,6 +1799,14 @@
         "to-fast-properties": "^2.0.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",
     "bootstrap": "^5.1.3",
     "jwt-decode": "^3.1.2",
     "ngx-autofocus-fix": "^1.0.4",

src/app/app.module.ts

@@ -38,8 +38,7 @@ import { PageModifierContactComponent } from './pages/page-modifier-contact/page
 import { PageCreationTeamComponent } from './pages/page-creation-team/page-creation-team.component';
 import { AutofocusFixModule  } from 'ngx-autofocus-fix';
 import { EmoticonComponent } from './emoticon/emoticon.component';
-
-
+import { DayPilot, DayPilotModule } from "@daypilot/daypilot-lite-angular";
 
 @NgModule({
   declarations: [
@@ -84,6 +83,7 @@ import { EmoticonComponent } from './emoticon/emoticon.component';
     HttpClientModule,
     FormsModule,
     AutofocusFixModule.forRoot(),
+    DayPilotModule
   ],
   providers: [],
   bootstrap: [AppComponent],

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

@@ -1,13 +1,34 @@
 <app-header></app-header>
 
 
+<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%;">
-        AGENDA
+        <div class="wrap">
+            <div class="left">
+                <daypilot-navigator [config]="navigatorConfig" [(date)]="date" #navigator></daypilot-navigator>
+            </div>
+            <div class="main">
+                <div>
+                    <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>
+                </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,42 @@
+.wrap {
+    display: flex;
+  }
+  
+  .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,244 @@
-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;
+  isShow: boolean;
+  alert:any;
+
+  @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: 2,
+    skipMonths: 2,
+    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;
+    }else{
+      //
+    }
   }
   
+  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());
+      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!')
+        }
+      );
+    },
+    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());
+      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!')
+      })
+    },
+    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
+          };
+        });
+        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/auth.service.ts

@@ -43,7 +43,7 @@ export class AuthService {
       map((x: any) => {
         console.log('Service : ', x.accessToken);
         // Modification à faire ici
-        localStorage.setItem(this.tokenKey, x.accessToken);
+        localStorage.setItem(this.tokenKey, x.token);
         return x; // permet de renvoyer la réponse à l'initiateur (page Signin) après le traitement du map
       })
     );

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/index.html

@@ -6,6 +6,7 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 </head>
 <body>
   <app-root></app-root>