nuxeo-development-framework 3.1.6 → 3.1.8

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

@@ -1,350 +0,0 @@
-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

@@ -1,235 +0,0 @@
-<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>