nuxeo-development-framework 3.0.9 → 3.1.2

package/src/lib/components/dynamic-form/components/dynamic-form-treeview-select/dropdown-treeview-select.component.ts

@@ -0,0 +1,350 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ViewChild,
+  OnChanges,
+  ViewEncapsulation,
+  OnInit,
+  OnDestroy,
+} from "@angular/core";
+import { isNil } from "lodash";
+import {
+  TreeviewI18n,
+  TreeviewItem,
+  TreeviewConfig,
+  DropdownTreeviewComponent,
+  TreeviewHelper,
+} from "ngx-treeview";
+import { Subject, Subscription } from "rxjs";
+import { takeUntil } from "rxjs/operators";
+import { TranslationService } from "../../../../Core/services/translation/translation.service";
+import { DepartmentManagementService } from "../dynamic-form-department/services/department-management.service";
+import { DepartmentApiService } from "../dynamic-form-department/services/department-api.service";
+import { DropdownTreeviewSelectI18n } from "./dropdown-treeview-select-i18n";
+import { RolesService } from "../../../../Core/services/roles/roles.service";
+import { NuxeoService } from "../../../../Core/services/nuxeo/nuxeo.service";
+/**
+ * A tree view selector component that can be used in reactive and template driven forms,
+ * it can be a flat tree or a dropdown
+ * @title
+ * Tree view selector
+ *
+ * @example
+ * <app-dynamic-form-treeview-select
+ * [treeview]="false"
+ * [multiple]="false"
+ * [items]="itemsTree"
+ * (valueChange)="onValueChange($event)"
+ * [(value)]="selectedValue"
+ * >
+ * </app-dynamic-form-treeview-select>
+ */
+@Component({
+  selector: "app-dynamic-form-treeview-select",
+  templateUrl: "./dynamic-form-treeview-select.component.html",
+  styleUrls: ["./dynamic-form-treeview-select.component.scss"],
+  encapsulation: ViewEncapsulation.None,
+  providers: [{ provide: TreeviewI18n, useClass: DropdownTreeviewSelectI18n }],
+})
+export class TreeviewSelectComponent implements OnInit, OnChanges, OnDestroy {
+  multipleSelection = [];
+  selectedItem;
+  selectedParentWithChild = [];
+  showPlus = false;
+  preSelected = [];
+  myDepartment: any;
+  /** is tree View or dropdown view */
+  @Input()
+  treeview = false;
+  /** use tree view inside form */
+  @Input()
+  treeViewAsFormControl = false;
+  /** Config object */
+  @Input() config: TreeviewConfig;
+  /** Items tree */
+  @Input() items: TreeviewItem[];
+  /** Selected value */
+  @Input() value: any;
+  /** can select multiple */
+  @Input() multiple: boolean = false;
+  /** event emitted on value change */
+  @Output() valueChange = new EventEmitter<any>();
+  /** event emitted on plus button clicked (for department management) */
+  @Output() plusClicked = new EventEmitter<any>();
+  /** event emitted on plus button clicked (for department management) */
+  @Input() defaultSelect = false;
+/** custom page provider to get department nested tree from it can be passed from outside or not passed and use the defulte value */
+  @Input() pp_departmentNestedTree; 
+  /** use outside custom function instead of the iner function  */
+  @Input() useCustomAddEditAction = false;
+    /** custom prefix to be used for adapting data coming from api */
+    @Input() customPrefix;
+  /** custom parent property name to be passed from outside the component */
+  @Input() customParentProperty;
+  @Input() placeholder;
+  @Output() actionClicked = new EventEmitter<any>();
+  @ViewChild(DropdownTreeviewComponent, { static: false })
+  dropdownTreeviewComponent: DropdownTreeviewComponent;
+  filterText: string;
+  arabic = false;
+  languageSubscription: Subscription;
+  onDestroy$: Subject<boolean> = new Subject<boolean>();
+
+  private dropdownTreeviewSelectI18n: DropdownTreeviewSelectI18n;
+
+  // this component is used in two places the flag is this.treeview
+
+  constructor(
+    public i18n: TreeviewI18n,
+    private translation: TranslationService,
+    private departmentApiService: DepartmentApiService,
+    private departmentManagment: DepartmentManagementService,
+    private rolesService: RolesService,
+    private nuxeoService: NuxeoService
+  ) {
+    this.config = TreeviewConfig.create({
+      hasAllCheckBox: false,
+      hasCollapseExpand: false,
+      hasFilter: true,
+      maxHeight: 200,
+      decoupleChildFromParent: true,
+    });
+    this.dropdownTreeviewSelectI18n = i18n as DropdownTreeviewSelectI18n;
+  }
+
+  ngOnInit() {
+    this.translation.isArabic
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe((res) => {
+        this.arabic = res;
+      });
+  }
+
+  ngOnDestroy() {
+    this.onDestroy$.complete();
+  }
+
+  ngOnChanges(): void {
+    if (this.items && this.treeview) {
+      this.updateSelectedItem();
+    }
+    if (!this.treeview && !this.multiple) {
+      // this. function is to set ui with pre selected value
+      // delay to make sure that page get the value and send it to here
+      // we use the value sent to here and search for its item on our items and set it as the selected item
+      this.items.map((item) => {
+        this.setPreSeletedItem(item, this.value);
+      });
+    }
+    if (
+      !this.treeview &&
+      this.multiple &&
+      this.value &&
+      this.value.length > 0
+    ) {
+      // this.preSelected = this.value;
+      this.multipleSelection = this.value;
+      this.dropdownTreeviewSelectI18n.selectionLength =
+        this.multipleSelection.length;
+      this.dropdownTreeviewComponent.onSelectedChange([
+        this.multipleSelection.length,
+      ]);
+    }
+  }
+
+  setPreSeletedItem(item, compareWithValue) {
+    if (item.value === compareWithValue) {
+      this.select(item);
+      return;
+    } else {
+      if (item.internalChildren) {
+        item.internalChildren.map((child) => {
+          this.setPreSeletedItem(child, compareWithValue);
+        });
+      } else {
+        return;
+      }
+    }
+  }
+  selectDefault() {
+    this.myDepartment = this.rolesService.getUserDepartment(
+      this.nuxeoService.nuxeoClient.user
+    );
+    this.items.map((item) => {
+      this.setPreSeletedItem(item, this.myDepartment);
+    });
+  }
+  select(item: TreeviewItem): void {
+    // if (!item.children) {
+    this.selectItem(item);
+    // }
+  }
+
+  private updateSelectedItem(): void {
+    if (!isNil(this.items)) {
+      const selectedItem = TreeviewHelper.findItemInList(
+        this.items,
+        this.value
+      );
+      this.selectItem(selectedItem);
+    }
+  }
+
+  private selectItem(item: TreeviewItem): void {
+    document.body.click();
+    if (this.dropdownTreeviewSelectI18n.selectedItem !== item) {
+      this.dropdownTreeviewSelectI18n.selectedItem = item;
+      if (this.dropdownTreeviewComponent) {
+        this.dropdownTreeviewComponent.onSelectedChange([item]);
+      }
+
+      if (item) {
+        if (this.treeview) {
+          this.selectedItem = item.value;
+          // this.valueChange.emit(item.value.title);
+          this.valueChange.emit(item);
+        } else {
+          this.valueChange.emit(item.value);
+        }
+      }
+    }
+  }
+  selectMultiple(e, item: TreeviewItem) {
+    this.selectedParentWithChild = [];
+    this.getChildernValues(item);
+    if (e) {
+      this.multipleSelection = this.multipleSelection.concat(
+        this.selectedParentWithChild
+      );
+    } else {
+      this.multipleSelection = this.multipleSelection.filter((e) => {
+        return this.selectedParentWithChild.indexOf(e) < 0;
+      });
+    }
+
+    this.dropdownTreeviewSelectI18n.selectionLength =
+      this.multipleSelection.length;
+    this.dropdownTreeviewComponent.onSelectedChange([
+      this.multipleSelection.length,
+    ]);
+    this.valueChange.emit(this.multipleSelection);
+  }
+  getChildernValues(item: TreeviewItem) {
+    this.selectedParentWithChild.push(item.value);
+    if (item.children) {
+      item.children.forEach((item) => {
+        this.getChildernValues(item);
+      });
+    } else return;
+  }
+
+  onPlusClicked(e: MouseEvent, item: TreeviewItem): void {
+    e.stopPropagation();
+    if (item) {
+      this.plusClicked.emit(item.value.uid);
+    }
+  }
+  /**
+   *
+   * @param e  click event
+   * @param action name of action (add , update)
+   * @param item TreeviewItem
+   */
+  onAction(e: MouseEvent, action: string, item: TreeviewItem) {
+    e.stopPropagation();
+    if (item) {
+      if (action === "add") {
+        // emit action to outside to execute function from outside the component 
+        if(this.useCustomAddEditAction){
+          this.actionClicked.emit({
+            action : action,
+            item : item
+          });
+        }else{
+          this.departmentManagment
+            .openFormDialog(item.value.uid, false, item.value.title, item)
+            .subscribe((res) => {
+              if (res) {
+                this.update(item);
+              }
+            });
+        }
+      }
+      if (action === "update") {
+        if(this.useCustomAddEditAction){
+        // emit action to outside to execute function from outside the component 
+          this.actionClicked.emit({
+            action : action,
+            item : item
+          });
+        }else{
+          this.departmentManagment
+            .openFormDialog(item.value.uid, true)
+            .subscribe((res) => {
+              // this.update(item);
+              this.departmentApiService.getDepartmentTree().subscribe((res) => {
+                this.items = this.departmentApiService.recursiveFill(
+                  res.entries , 
+                  undefined , 
+                  undefined , 
+                  undefined , 
+                  this.customPrefix);
+              });
+            });
+        }
+      }
+    }
+  }
+  
+  /**
+   *due to the business requirements which stated that more than 3 levels will existed the current api support only 3 levels so *we have to inject 3 new levels on each tree end
+   * @param item TreeviewItem
+   */
+  onCollapsed(item: TreeviewItem) {
+    item.collapsed = !item.collapsed;
+    if (item.value.level === 2) {
+      this.departmentApiService
+        .getDepartmentNestedTree(
+          item.value.title , 
+          this.pp_departmentNestedTree ? this.pp_departmentNestedTree : 'PP_Department',
+          this.customParentProperty)
+        .subscribe(
+          (res) => {
+            item.children = this.departmentApiService.recursiveFill(
+              res.entries , 
+              undefined , 
+              undefined , 
+              undefined , 
+              this.customPrefix
+            );
+          },
+          (err) => {}
+        );
+    }
+  }
+  /**
+   *due to the business requirements which stated that more than 3 levels will existed the current api support only 3 levels so *we have to inject 3 new levels on each tree end
+   * @param item TreeviewItem
+   */
+  update(item) {
+    this.departmentApiService
+      .getDepartmentNestedTree(
+        item.value.title , 
+        this.pp_departmentNestedTree ? this.pp_departmentNestedTree : 'PP_Department',
+        this.customParentProperty)
+      .subscribe(
+        (data) => {
+          item.children = this.departmentApiService.recursiveFill(
+            data.entries,
+            0,
+            true,
+            true,
+            this.customPrefix
+          );
+        },
+        (err) => {}
+      );
+  }
+}

package/src/lib/components/dynamic-form/components/dynamic-form-treeview-select/dynamic-form-treeview-select.component.html

@@ -0,0 +1,235 @@
+<ng-template
+  #itemTemplate
+  let-item="item"
+  let-onCollapseExpand="onCollapseExpand"
+  let-onCheckedChange="onCheckedChange"
+>
+  <!-- single -->
+  <div *ngIf="!treeview && !multiple">
+    <div
+      class="text-nowrap row-item"
+      [ngClass]="{ active: item.value === this.value }"
+    >
+      <i
+        *ngIf="item.children"
+        (click)="onCollapseExpand()"
+        aria-hidden="true"
+        [ngSwitch]="item.collapsed"
+      >
+        <span
+          *ngSwitchCase="true"
+          class="bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon"
+        ></span>
+        <span
+          *ngSwitchCase="false"
+          class="bi bi-caret-down-fill caret-icon"
+        ></span>
+      </i>
+      <label class="form-check-label" (click)="select(item)">{{
+        item.text
+      }}</label>
+    </div>
+  </div>
+  <!-- Multiple -->
+  <div *ngIf="!treeview && multiple">
+    <div
+      class="text-nowrap row-item"
+      [ngClass]="{ active: item.value === this.value }"
+    >
+      <i
+        *ngIf="item.children"
+        (click)="onCollapseExpand()"
+        aria-hidden="true"
+        [ngSwitch]="item.collapsed"
+      >
+        <span
+          *ngSwitchCase="true"
+          class="bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon"
+        ></span>
+        <span
+          *ngSwitchCase="false"
+          class="bi bi-caret-down-fill caret-icon"
+        ></span>
+      </i>
+      <!-- <input
+        class="multiple-checkBox"
+        type="checkbox"
+        [checked]="multipleSelection.includes(item.value)"
+        (change)="selectMultiple($event.target.checked, item)"
+      />
+
+      <label class="form-check-label">{{ item.text }}</label> -->
+      <div class="multiple-treeview">
+        <mat-checkbox
+          [checked]="multipleSelection.includes(item.value)"
+          (change)="selectMultiple($event.checked, item)"
+        >
+          <span> {{ item.text }} </span>
+        </mat-checkbox>
+      </div>
+    </div>
+  </div>
+  <!-- treeView -->
+  <div *ngIf="treeview && !treeViewAsFormControl" class="tree-view-container">
+    <div
+      (mouseenter)="hoverField.style.display = 'flex'"
+      (mouseleave)="hoverField.style.display = 'none'"
+      class="text-nowrap row-item treeview-row"
+      [ngClass]="{ selected: item.value == selectedItem }"
+    >
+      <i
+        *ngIf="item.children"
+        (click)="onCollapsed(item)"
+        aria-hidden="true"
+        [ngSwitch]="item.collapsed"
+      >
+        <span
+          *ngSwitchCase="true"
+          class="bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon"
+        ></span>
+
+        <span
+          *ngSwitchCase="false"
+          class="bi bi-caret-down-fill caret-icon"
+        ></span>
+      </i>
+      <label class="form-check-label-treeview" (click)="select(item)"
+        >{{ item.text }}
+        <span #hoverField class="hoverField">
+          <span
+            type="button"
+            matTooltip="{{ 'department_management.form.edit' | translate }}"
+            (click)="onAction($event, 'update', item)"
+          >
+            <li class="bi bi-pencil"></li>
+          </span>
+
+          <span
+            type="button"
+            matTooltip="{{
+              'department_management.form.toolTip_message' | translate
+            }}"
+            (click)="onAction($event, 'add', item)"
+          >
+            <li class="bi bi-plus"></li>
+          </span>
+        </span>
+      </label>
+    </div>
+  </div>
+    <!-- treeView as form control -->
+    <div *ngIf="treeview && treeViewAsFormControl" class="tree-view-container">
+      <div
+        class="text-nowrap row-item treeview-row-form-control"
+        [ngClass]="{ 'selected-form-control': item.value == selectedItem }"
+      >
+        <i
+          *ngIf="item.children"
+          (click)="onCollapsed(item)"
+          aria-hidden="true"
+          [ngSwitch]="item.collapsed"
+        >
+          <span
+            *ngSwitchCase="true"
+            class="bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon"
+          ></span>
+  
+          <span
+            *ngSwitchCase="false"
+            class="bi bi-caret-down-fill caret-icon"
+          ></span>
+        </i>
+        <label class="form-check-label-treeview" (click)="select(item)"
+          >{{ item.text }}
+        </label>
+      </div>
+    </div>
+</ng-template>
+<ng-template
+  #headerTemplate
+  let-config="config"
+  let-item="item"
+  let-onCollapseExpand="onCollapseExpand"
+  let-onCheckedChange="onCheckedChange"
+  let-onFilterTextChange="onFilterTextChange"
+>
+  <div *ngIf="config.hasFilter" class="row row-filter">
+    <div class="col-12">
+      <input
+        class="form-control"
+        type="text"
+        [placeholder]="i18n.getFilterPlaceholder(placeholder)"
+        [(ngModel)]="filterText"
+        (ngModelChange)="onFilterTextChange($event)"
+      />
+    </div>
+  </div>
+  <div *ngIf="config.hasAllCheckBox || config.hasCollapseExpand" class="row">
+    <div class="col-12">
+      <label *ngIf="config.hasAllCheckBox" (click)="select(item)">
+        <strong>{{ i18n.getAllCheckboxText() }}</strong>
+      </label>
+      <label
+        *ngIf="config.hasCollapseExpand"
+        class="float-right"
+        (click)="onCollapseExpand()"
+      >
+        <i
+          [title]="i18n.getTooltipCollapseExpandText(item.collapsed)"
+          aria-hidden="true"
+          [ngSwitch]="item.collapsed"
+        >
+          <span *ngSwitchCase="true" class="bi bi-arrows-angle-expand"></span>
+          <span
+            *ngSwitchCase="false"
+            class="bi bi-arrows-angle-contract"
+          ></span>
+        </i>
+      </label>
+    </div>
+  </div>
+  <a *ngIf="defaultSelect" class="select-default" (click)="selectDefault()">{{'department_management.selectDefault'| translate}}</a>
+  <div *ngIf="config.hasDivider" class="dropdown-divider" [ngClass]="{'dropdown-divider-noMargin': defaultSelect}"></div>
+</ng-template>
+
+<ng-container *ngIf="!treeview && !multiple">
+  <ngx-dropdown-treeview
+    [config]="config"
+    [headerTemplate]="headerTemplate"
+    [items]="items"
+    [itemTemplate]="itemTemplate"
+  >
+  </ngx-dropdown-treeview
+></ng-container>
+<ng-container *ngIf="!treeview && multiple">
+  <div class="multiple-tree-view">
+    <ngx-dropdown-treeview
+      [config]="config"
+      [items]="items"
+      [itemTemplate]="itemTemplate"
+    >
+    </ngx-dropdown-treeview>
+  </div>
+</ng-container>
+<ng-container *ngIf="treeview && !treeViewAsFormControl">
+  <div class="tree-view">
+    <ngx-treeview
+      [config]="config"
+      [headerTemplate]="headerTemplate"
+      [items]="items"
+      [itemTemplate]="itemTemplate"
+    >
+    </ngx-treeview>
+  </div>
+</ng-container>
+<ng-container *ngIf="treeview && treeViewAsFormControl">
+  <div class="tree-view-form-control">
+    <ngx-treeview
+      [config]="config"
+      [headerTemplate]="headerTemplate"
+      [items]="items"
+      [itemTemplate]="itemTemplate"
+    >
+    </ngx-treeview>
+  </div>
+</ng-container>