FEAT #7994 change component for status choose with chips list

apps/maarch_entreprise/Views/basket-administration-settings-modal.component.html

@@ -34,22 +34,33 @@
                         <div id="jstree"></div>
                     </mat-expansion-panel>
                     <mat-expansion-panel *ngIf="data.action.keyword == 'indexing'" [disabled]="data.action.id_status != '_NOSTATUS_'">
-                            <mat-expansion-panel-header>
-                                <mat-panel-title>
-                                    {{lang.toStatuses}} &nbsp;<mat-icon *ngIf="data.action.id_status != '_NOSTATUS_'" color="warn" class="fa fa-exclamation-circle" matTooltip="{{lang.toStatusesDesc}}"
-                                    style="cursor:help"></mat-icon>
-                                </mat-panel-title>
-    
-                            </mat-expansion-panel-header>
-                            <mat-form-field>
-                                    <mat-select id="statuses" [(ngModel)]="data.action.statuses" name="statuses" placeholder="{{lang.availableStatuses}}" multiple>
-                                        <mat-option *ngFor="let status of this.statuses" [value]="status.id">
-                                            {{status.label_status}}
-                                        </mat-option>
-                                    </mat-select>
-                                </mat-form-field>
+                        <mat-expansion-panel-header>
+                            <mat-panel-title>
+                                {{lang.toStatuses}} &nbsp;
+                                <mat-icon *ngIf="data.action.id_status != '_NOSTATUS_'" color="warn"
+                                    class="fa fa-exclamation-circle" matTooltip="{{lang.toStatusesDesc}}" style="cursor:help"></mat-icon>
+                            </mat-panel-title>
+
+                        </mat-expansion-panel-header>
+                        <mat-form-field class="example-chip-list">
+                            <mat-chip-list #chipList class="mat-chip-list-stacked">
+                                <mat-chip *ngFor="let status of selectedStatuses;let i = index" selectable="true" removable="true" (removed)="remove(i)"
+                                    style="cursor:pointer;margin:5px;border-radius:0px;display:flex;">
+                                    <b>{{i+1}})</b>&nbsp;{{status.idToDisplay}}
+                                    <span style="flex: 1 1 auto;"></span>
+                                    <mat-icon matChipRemove class="fa fa-times"></mat-icon>
+                                </mat-chip>
+                                <input placeholder="{{lang.availableStatuses}}" #statusInput [formControl]="statusCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList"
+                                    style="flex: 1 0 0px;width: 100%;">
+                            </mat-chip-list>
+                            <mat-autocomplete #auto="matAutocomplete">
+                                <mat-option *ngFor="let status of filteredStatuses | async" [value]="status.id" (click)="add(status)">
+                                    {{status.idToDisplay}}
+                                </mat-option>
+                            </mat-autocomplete>
+                        </mat-form-field>
 
-                        </mat-expansion-panel>
+                    </mat-expansion-panel>
                     <mat-expansion-panel (opened)="initService2()" *ngIf="data.action.keyword == 'redirect'">
                         <mat-expansion-panel-header>
                             <mat-panel-title>
@@ -65,8 +76,8 @@
             </mat-tab>
             <mat-tab label="{{lang.otherParameters}}">
                 <mat-form-field>
-                    <textarea matInput name="clause" title="{{lang.whereClauseAction}}" placeholder="{{lang.whereClauseAction}}"
-                        [(ngModel)]="data.action.where_clause" matTextareaAutosize matAutosizeMinRows="1"></textarea>
+                    <textarea matInput name="clause" title="{{lang.whereClauseAction}}" placeholder="{{lang.whereClauseAction}}" [(ngModel)]="data.action.where_clause"
+                        matTextareaAutosize matAutosizeMinRows="1"></textarea>
                 </mat-form-field>
                 <mat-accordion>
                     <mat-expansion-panel>
@@ -100,14 +111,14 @@
                             <p mat-line style="font-size:10px;">{{lang.keywordHelpDesc_9}}</p>
                             <h4 mat-line style="font-weight:bold;font-size:10px;">@immediate_children['entity_1',..., 'entity_id'] :</h4>
                             <p mat-line style="font-size:10px;">{{lang.keywordHelpDesc_10}}</p>
-                        </mat-list>  
+                        </mat-list>
                     </mat-expansion-panel>
-                </mat-accordion>                      
+                </mat-accordion>
             </mat-tab>
         </mat-tab-group>
     </form>
 </mat-dialog-content>
 <mat-dialog-actions>
-    <button mat-raised-button type="submit" [disabled]="!data.action.used_in_basketlist && !data.action.used_in_action_page" color="primary" style="margin:auto;"
-        (click)="dialogRef.close(data)">{{lang.validate}}</button>
+    <button mat-raised-button type="submit" [disabled]="!data.action.used_in_basketlist && !data.action.used_in_action_page"
+        color="primary" style="margin:auto;" (click)="saveSettings()">{{lang.validate}}</button>
 </mat-dialog-actions>
\ No newline at end of file

apps/maarch_entreprise/js/angular/app/administration/basket-administration.component.ts

-import { ChangeDetectorRef, Component, OnInit, Inject, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Inject, ViewChild, ElementRef } from '@angular/core';
 import { MediaMatcher } from '@angular/cdk/layout';
 import { HttpClient } from '@angular/common/http';
 import { Router, ActivatedRoute } from '@angular/router';
@@ -6,6 +6,7 @@ import { MatPaginator, MatTableDataSource, MatSort, MatDialog, MatDialogRef, MAT
 import { LANG } from '../translate.component';
 import { NotificationService } from '../notification.service';
 import { AutoCompletePlugin } from '../../plugins/autocomplete.plugin';
+import { FormControl } from '@angular/forms';
 
 declare function $j(selector: any): any;
 declare var angularGlobals: any;
@@ -276,11 +277,15 @@ export class BasketAdministrationSettingsModalComponent extends AutoCompletePlug
     lang        : any   = LANG;
     allEntities : any[] = [];
     statuses    : any;
+    selectedStatuses    : any[] = [];
+    statusCtrl = new FormControl();
 
     constructor(public http: HttpClient, @Inject(MAT_DIALOG_DATA) public data: any, public dialogRef: MatDialogRef<BasketAdministrationSettingsModalComponent>) {
-        super(http, ['users']);
+        super(http, ['users','statuses']);
     }
 
+    @ViewChild('statusInput') statusInput: ElementRef;
+
     ngOnInit(): void {
         this.http.get(this.coreUrl + "rest/entities")
             .subscribe((entities: any) => {
@@ -352,10 +357,41 @@ export class BasketAdministrationSettingsModalComponent extends AutoCompletePlug
                 location.href = "index.php";
             });
         this.http.get(this.coreUrl + 'rest/statuses')
-            .subscribe((data: any) => {
-                this.statuses = data.statuses;
+            .subscribe((response: any) => {
+                this.statuses = response.statuses;
+                response.statuses.forEach((status: any) => {
+                    if (this.data.action.statuses.indexOf(status.id) > -1) {
+                        this.selectedStatuses.push({idToDisplay:status.label_status,id:status.id});
+                    }
+                });
             });
     }
+
+      remove(index: number): void {
+
+        this.selectedStatuses.splice(index, 1);
+        this.statusCtrl.setValue(null);
+        this.statusInput.nativeElement.value = '';
+    
+      }
+
+      add(status: any): void {
+        let isIn = false;
+
+        this.selectedStatuses.forEach((statusList: any) => {
+            if (status.id == statusList.id) {
+                isIn = true;
+            }
+        });
+        if(!isIn) {
+            this.selectedStatuses.push(status);
+            this.statusCtrl.setValue(null);
+            this.statusInput.nativeElement.value = '';
+        } 
+      }
+
+
+
     initService() {
         this.allEntities.forEach((entity: any) => {
             entity.state = { "opened": false, "selected": false };
@@ -382,14 +418,14 @@ export class BasketAdministrationSettingsModalComponent extends AutoCompletePlug
         });
         $j('#jstree')
             // listen for event
-            .on('select_node.jstree', (e: any, data: any) => {
+            .on('select_node.jstree', (data: any) => {
                 if (data.node.original.keyword) {
                     this.data.action.redirects.push({ action_id: this.data.action.id, entity_id: '', keyword: data.node.id, redirect_mode: 'ENTITY' })
                 } else {
                     this.data.action.redirects.push({ action_id: this.data.action.id, entity_id: data.node.id, keyword: '', redirect_mode: 'ENTITY' })
                 }
 
-            }).on('deselect_node.jstree', (e: any, data: any) => {
+            }).on('deselect_node.jstree', (data: any) => {
                 this.data.action.redirects.forEach((redirect: any) => {
                     if (data.node.original.keyword) {
                         if (redirect.keyword == data.node.original.keyword) {
@@ -443,14 +479,14 @@ export class BasketAdministrationSettingsModalComponent extends AutoCompletePlug
         });
         $j('#jstree2')
             // listen for event
-            .on('select_node.jstree', (e: any, data: any) => {
+            .on('select_node.jstree', (data: any) => {
                 if (data.node.original.keyword) {
                     this.data.action.redirects.push({ action_id: this.data.action.id, entity_id: '', keyword: data.node.id, redirect_mode: 'USERS' })
                 } else {
                     this.data.action.redirects.push({ action_id: this.data.action.id, entity_id: data.node.id, keyword: '', redirect_mode: 'USERS' })
                 }
 
-            }).on('deselect_node.jstree', (e: any, data: any) => {
+            }).on('deselect_node.jstree', (data: any) => {
                 this.data.action.redirects.forEach((redirect: any) => {
                     if (data.node.original.keyword) {
                         if (redirect.keyword == data.node.original.keyword) {
@@ -478,6 +514,14 @@ export class BasketAdministrationSettingsModalComponent extends AutoCompletePlug
             }, 250);
         });
     }
+
+    saveSettings() {
+        this.data.action.statuses = [];
+        this.selectedStatuses.forEach((status: any) => {
+            this.data.action.statuses.push(status.id);
+        });
+        this.dialogRef.close(this.data);
+    }
 }
 
 @Component({