612-2-admin-gestion-des-structures

src/app/admin/components/button-cell-renderer/button-cell-renderer.component.ts

@@ -10,8 +10,16 @@ import { ICellRendererParams } from 'ag-grid-community';
     [disabled]="disabled"
     [label]="'Relancer'"
     [variant]="'secondary'"
-    [style]="'display: inline-block'"
+    [style]="'display: inline-block;max-width: 100%;'"
   />`,
+  styles: [
+    `
+      ::ng-deep button {
+        max-width: 100%;
+        min-width: 60px;
+      }
+    `,
+  ],
 })
 export class ButtonCellRendererComponent implements ICellRendererAngularComp {
   public disabled = true;

src/app/admin/components/comment-cell-renderer/comment-cell-renderer.component.ts

+import { ChangeDetectorRef, Component } from '@angular/core';
+import { ICellRendererAngularComp } from 'ag-grid-angular';
+import { ICellRendererParams } from 'ag-grid-community';
+
+interface CommentCellParams extends ICellRendererParams {
+  value: string;
+}
+
+@Component({
+  selector: 'app-comment-cell',
+  template: `
+    <div class="comment-cell" [attr.title]="params.value">
+      <div
+        #commentText
+        tabindex="0"
+        role="button"
+        [class.expanded]="expanded"
+        [class.long-text]="isLongText"
+        [attr.aria-expanded]="expanded"
+        (click)="toggleExpand()"
+        (keydown.enter)="toggleExpand()"
+        (keydown.space)="toggleExpand()"
+      >
+        {{ this.params.value }}
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      .comment-cell {
+        white-space: normal;
+        line-height: normal;
+      }
+      .comment-cell > div {
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        cursor: pointer;
+        transition: all 0.5s ease;
+      }
+      .comment-cell > div.expanded {
+        padding-bottom: 0.5em;
+        -webkit-line-clamp: unset;
+      }
+      .comment-cell > div.long-text:not(.expanded)::after {
+        content: '...';
+      }
+    `,
+  ],
+})
+export class CommentCellRendererComponent implements ICellRendererAngularComp {
+  params!: CommentCellParams;
+  expanded = false;
+  isLongText = false;
+  displayText = '';
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  agInit(params: CommentCellParams): void {
+    this.params = params;
+    this.isLongText = params.value && params.value.length > 100;
+  }
+
+  toggleExpand(): void {
+    this.expanded = !this.expanded;
+    this.cdr.detectChanges();
+  }
+
+  refresh(params: CommentCellParams): boolean {
+    this.params = params;
+    this.isLongText = params.value && params.value.length > 100;
+    return true;
+  }
+}

src/app/admin/components/structures-list/admin-structures-list.component.ts

@@ -3,9 +3,11 @@ import { Component, OnInit } from '@angular/core';
 import { ColDef, ICellRendererParams } from 'ag-grid-community';
 import { finalize } from 'rxjs/operators';
 import { NotificationService } from '../../../services/notification.service';
+import { StructureService } from '../../../services/structure.service';
 import { AdminStructure } from '../../models/adminStructureList.interface';
 import { AdminService } from '../../services/admin.service';
 import { ButtonCellRendererComponent } from '../button-cell-renderer/button-cell-renderer.component';
+import { CommentCellRendererComponent } from '../comment-cell-renderer/comment-cell-renderer.component';
 
 @Component({
   selector: 'app-admin-structures-list',
@@ -25,6 +27,7 @@ export class AdminStructuresListComponent implements OnInit {
     private adminService: AdminService,
     private datePipe: DatePipe,
     private notificationService: NotificationService,
+    private structureService: StructureService,
   ) {}
 
   public filterOptions = [
@@ -68,6 +71,21 @@ export class AdminStructuresListComponent implements OnInit {
       sortable: false,
       onCellClicked: this.handleRelance.bind(this),
     },
+    {
+      headerName: 'Commentaire',
+      field: 'comment',
+      flex: 1,
+      editable: true,
+      cellEditor: 'agLargeTextCellEditor',
+      cellEditorPopup: true,
+      cellEditorParams: {
+        maxLength: 500,
+      },
+      sortable: false,
+      cellRenderer: CommentCellRendererComponent,
+      onCellValueChanged: this.onChangeComment.bind(this),
+      autoHeight: true,
+    },
   ];
 
   public gridSections = [];
@@ -147,4 +165,13 @@ export class AdminStructuresListComponent implements OnInit {
       },
     });
   }
+
+  public onChangeComment(arg): void {
+    const { structureId, ...data } = arg.data;
+    const comment = data.comment.slice(0, 500);
+
+    this.structureService.editStructure({ ...data, comment }, structureId).subscribe(() => {
+      this.notificationService.showSuccess('Le commentaire a bien été mis à jour.');
+    });
+  }
 }

src/app/models/structure.model.ts

@@ -59,6 +59,7 @@ export class Structure {
   public hasUserWithAppointmentDN?: boolean = null;
   public permalink = '';
   public lastUpdateMail: Date = null;
+  public comment = null;
 
   constructor(obj?: any) {
     Object.assign(this, obj, {