Skip to content
Snippets Groups Projects
Verified Commit 0dd440de authored by Alex ORLUC's avatar Alex ORLUC
Browse files

FEAT #7994 change component for status choose with chips list

parent 2c28af5d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
apps/maarch_entreprise/Views/basket-administration-settings-modal.component.html
+ 32
− 21
View file @ 0dd440de
......@@ -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
+ 52
− 8
View file @ 0dd440de
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({
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment