ps-toolkit-ui 0.0.210 → 0.0.211

package/src/lib/components/table/report/table.report.component.css

@@ -0,0 +1,125 @@
+
+::ng-deep lib-table-row{
+  display: contents;
+}
+tr{
+  position: relative;
+}
+
+tr td{
+  font-family: VazirLight;
+  font-size: 12px;
+  font-weight: normal;
+  text-align: center;
+  position: relative;
+  vertical-align: middle;
+}
+
+tr.children{
+  display: none;
+}
+
+tr.children.rightline:after{
+  right: 20px;
+}
+
+::ng-deep tr td .select-row{
+  font-size: 18px;
+  height: 30px;
+  line-height: 30px;
+  cursor: pointer;
+}
+
+::ng-deep tr td .handle-sortable{
+  cursor: move;
+}
+
+::ng-deep tr td .status{
+  padding: 3px 10px;
+  border-radius: 5px;
+  font-size: 10px;
+  cursor: default;
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -ms-user-select: none;
+}
+::ng-deep tr td .status.blue{
+  color: var(--blue);
+  background-color: var(--blue-22);
+}
+::ng-deep tr td .status.green{
+  color: var(--green);
+  background-color: var(--green-22);
+}
+::ng-deep tr td .status.red{
+  color: var(--red);
+  background-color: var(--red-22);
+}
+::ng-deep tr td .status.gray{
+  color: var(--black);
+  background-color: var(--black-22);
+}
+::ng-deep tr td .status.yellow{
+  color: var(--yellow);
+  background-color: var(--yellow-22);
+}
+
+::ng-deep tr td .plaque{
+  float: right;
+  width: 140px;
+  height: 30px;
+  background-image: url("../../../../assets/images/plaque.png");
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: contain;
+  margin-right: calc(50% - 70px);
+  font-size: 14px;
+  background-color: white;
+  margin-top: 5px;
+  border-radius: 4px;
+}
+::ng-deep tr td .plaque.plaque-m{
+  background-image: url("../../../../assets/images/plaque_m.png");
+}
+::ng-deep tr td .plaque.p{
+  background-color: #ffc913;
+}
+::ng-deep tr td .plaque.g{
+  background-color: #e20600;
+}
+::ng-deep tr td .plaque .part1{
+  float: left;
+  width: 32px;
+  height: 30px;
+  line-height: 33px;
+  margin-left: 13px;
+}
+::ng-deep tr td .plaque.plaque-m .part1{
+  width: 42px;
+  margin-left: 13px;
+}
+::ng-deep tr td .plaque .part2{
+  float: left;
+  width: 25px;
+  height: 30px;
+  line-height: 30px;
+}
+::ng-deep tr td .plaque.plaque-m .part2{
+  width: 57px;
+  line-height: 33px;
+}
+::ng-deep tr td .plaque .part3{
+  float: left;
+  width: 42px;
+  height: 30px;
+  line-height: 33px;
+}
+::ng-deep tr td .plaque .part4{
+  float: left;
+  width: 28px;
+  height: 30px;
+}
+

package/src/lib/components/table/report/table.report.component.html

@@ -0,0 +1,19 @@
+<tr class="underline" [id]="row.Id ? row.Id : ''" [style]="{height: table.height + 'px', zIndex: row.RowNum }">
+  <td style="width: 50px" *ngIf="table.hasChildren && (table.level === null || table.level > level)"><lib-form-icon *ngIf="showChildren != null && showChildren.type === type.Icon" [inp]="showChildren"></lib-form-icon></td>
+  <td style="width: 50px" *ngIf="table.withSelect"><i (click)="select()" [className]="(row.selected ? 'fas fa-check-square green' : 'far fa-square') + ' select-row'"></i></td>
+  <td style="width: 50px" *ngIf="table.sortable"><i class="fa-duotone fa-grip-vertical handle-sortable"></i></td>
+  <td [style]="{width: col.percent + '%'}" [className]="col.class + ' item'" *ngFor="let col of table.cols" [innerHTML]="getCell(col)"></td>
+  <td [style]="{width: (100 - itemsWidth) + '%'}" class="t-l" *ngIf="table.hasOption()">
+      <span *ngFor="let opt of getOptions()">
+        <lib-form-button *ngIf="opt.type == type.Button" [inp]="opt"></lib-form-button>
+        <lib-form-icon *ngIf="opt.type == type.Icon" [inp]="opt"></lib-form-icon>
+      </span>
+  </td>
+</tr>
+<tr #childrenDiv *ngIf="table.hasChildren && (table.level === null || table.level > level)" class="children rightline">
+  <td [colSpan]="table.cols.length + (table.hasChildren ? 1 : 0) + (table.hasOption() ? 1 : 0)">
+    <table style="width: 94%; margin: 15px 3% 15px 0;">
+      <lib-table-row (loadParent)="loadChildren($event)" [level]="level + 1" (changeRows)="onChangeRows($event)" [id]="child.id ? child.id : ''" [table]="table" [row]="child" *ngFor="let child of children"></lib-table-row>
+    </table>
+  </td>
+</tr>

package/src/lib/components/table/report/table.report.component.ts

@@ -0,0 +1,238 @@
+import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import * as _ from 'lodash';
+import {TableClass, TableCollClass} from '../../../classes/table.class';
+import {InputType, Method, PermissionAccessTypeEnum, PermissionTypeEnum, TableCollType} from '../../../classes/enum.class';
+import {InputClass} from '../../../classes/form.class';
+import {RequestClass} from '../../../classes/request.class';
+import {HelperClass} from '../../../classes/helper.class';
+import {PsToolkitUiConfigService} from '../../../services/config.service';
+import * as $ from 'jquery';
+
+@Component({
+  selector: 'lib-table-report',
+  templateUrl: './table.report.component.html',
+  styleUrls: ['./table.report.component.css']
+})
+export class TableReportComponent implements OnInit{
+  @Input()
+  confirmShow: any;
+  @Output()
+  changeRows = new EventEmitter<object>();
+  @Input()
+  level: number;
+  @Input()
+  table: TableClass;
+  @Input()
+  row;
+  @Output()
+  loadParent = new EventEmitter<string>();
+  get type(): typeof InputType { return InputType; }
+  options: InputClass[];
+  optEdit: InputClass;
+  optDelete: InputClass;
+  optStatus: InputClass;
+  showChildren: InputClass = null;
+  addChildren: InputClass = null;
+  itemsWidth = 0;
+  children: any[] = [];
+  @ViewChild('childrenDiv') childrenDiv: ElementRef;
+  constructor(public service: PsToolkitUiConfigService) {
+  }
+  ngOnInit(): void {
+    this.itemsWidth = this.table.cols.reduce((a, {percent}) => a + percent, 0);
+    this.optEdit = new InputClass(this.table.environment, this.table.l, this.table.name + 'Update', 'fa-duotone fa-pen', InputType.Icon,
+      'blue h-25 m-h-5 d-ib va-m f-u');
+    this.optDelete = new InputClass(this.table.environment, this.table.l, this.table.name + 'Delete', 'fa-duotone fa-trash', InputType.Icon,
+      'red h-25 m-h-5 d-ib va-m f-u');
+    if (this.table.hasChildren){
+      if (this.table.permissions.hasAccess(PermissionAccessTypeEnum.Insert)){
+        this.addChildren = new InputClass(this.table.environment, this.table.l, 'Add', 'fa-duotone fa-plus fa-rotate-90', InputType.Icon,
+          'green m-h-5 h-25 d-ib va-m f-u');
+        this.addChildren.onClick = () => {
+          this.table.form.url = this.table.url + 'Insert';
+          this.table.form.inputs.find(x => x.name === 'ParentId').setValue(this.row.Id, false);
+          this.table.form.onSuccessBase = () => {
+            this.table.modal.hide();
+            this.showChildren.type = InputType.Icon;
+            this.loadChildren(this.row.Id);
+          };
+          this.table.showInsertModal();
+        };
+      }
+      this.showChildren = new InputClass(this.table.environment, this.table.l, 'Subset', 'fa-duotone fa-angle-left f-s-22',
+        this.row.CountChild > 0 ? InputType.Icon : InputType.Hidden, 'h-25 m-h-5 d-ib va-m f-u');
+      this.showChildren.onClick = () => {
+        if ($(this.childrenDiv.nativeElement).is(':visible')){
+          $(this.childrenDiv.nativeElement).hide();
+          this.showChildren.icon = 'fa-duotone fa-angle-left f-s-22';
+        } else if (this.children.length === 0){
+          this.loadChildren(this.row.Id);
+        } else {
+          $(this.childrenDiv.nativeElement).show();
+          this.showChildren.icon = 'fa-duotone fa-angle-down f-s-22';
+        }
+      };
+    }
+    if (this.table.hasStatus){
+      this.optStatus = new InputClass(this.table.environment, this.table.l, 'Status',
+        this.row.Active ? 'fa-toggle-on' : 'fa-toggle-off', InputType.Icon,
+        'm-h-5 h-20 ' + (this.row.Active ? 'green' : ''));
+      this.optStatus.row = this.row;
+      this.optStatus.onClick = (btn) => {
+        new RequestClass(this.table.l).send(this.table.url + '/Status/' + btn.row.Id, Method.Post, null, btn, (r) => {
+          btn.class = 'm-h-5 h-20 ' + (r ? 'green' : '');
+          btn.icon = r ? 'fa-toggle-on' : 'fa-toggle-off';
+        });
+      };
+    }
+    this.options = this.getOptions();
+    if (this.table.form){
+      this.optEdit.onClick = () => {
+        this.table.form.url = this.table.url + 'Update/' + this.row.Id;
+        if (this.table.hasChildren && this.row.ParentId != null) {
+          this.table.form.onSuccessBase = () => {
+            this.table.modal.hide();
+            this.loadParent.emit(this.row.ParentId);
+          };
+        } else {
+          this.table.form.onSuccessBase = () => {
+            this.table.modal.hide();
+            this.table.load();
+          };
+        }
+        this.edit();
+      };
+    } else {
+      this.optEdit.url = this.table.url + '/' + this.row.Id;
+    }
+    if (this.table.sortable){
+      this.setSortRow();
+    }
+  }
+  loadChildren(p): void{
+    new RequestClass(this.table.l).send(this.table.url + `List?ParentId=${p}`, Method.Post, null, this.showChildren, (result) => {
+      this.children = result.List;
+      setTimeout(() => {
+        $(this.childrenDiv.nativeElement).slideDown();
+        this.showChildren.icon = 'fa-duotone fa-angle-down f-s-22';
+      }, 50);
+    });
+  }
+  select(): void{
+    this.row.selected = !this.row.selected;
+  }
+  onChangeRows(e): void{
+    return this.changeRows.emit(e);
+  }
+  setSortRow(): void{
+    setTimeout(() => {
+      if (this.table.hasChildren) {
+        // @ts-ignore
+        $(this.childrenDiv.nativeElement).sortable({
+          axis: 'y',
+          handle: '> .row > .item-con > .handle-sortable',
+          update: () => {
+            const data = [];
+            // @ts-ignore
+            $(this.childrenDiv.nativeElement).sortable('toArray').forEach(x => data.push(x));
+            new RequestClass(this.table.l).send(this.table.url + 'Sort', Method.Post, data, null, () => {
+              if (this.table.onSort){
+                this.table.onSort();
+              }
+            });
+          }
+        });
+      }
+    }, 500);
+  }
+  getOptions(): InputClass[]{
+    return [];
+    // return (this.addChildren !== null && (this.table.level === null || this.table.level > this.level) ? [this.addChildren] : [])
+    //   .concat(this.table.options.map((o) => {
+    //     const i = HelperClass.clone(o);
+    //     if (i.url){
+    //       i.url = i.url.replace('{}', this.row.Id);
+    //     }
+    //     if (i.modal && i.modal.form){
+    //       i.modal.form.url = i.modal.form.url.replace('{}', this.row.Id);
+    //     }
+    //     i.row = this.row;
+    //     i.class = i.class + ' m-h-5 h-25 d-ib va-m f-u';
+    //     return i;
+    // })).concat(this.table.hasStatus ? [this.optStatus] : [])
+    //     .concat(this.table.permissions.hasAccess('Update') ? [this.optEdit] : [])
+    //     .concat(this.table.permissions.hasAccess('Delete') ? [this.optDelete] : []);
+  }
+  getCell(col: TableCollClass): any{
+    console.log('getCell');
+    const cv = _.get(this.row, col.name);
+    if (col.fun != null) {
+      return col.fun(this.row);
+    } else if (col.enum !== null) {
+      return col.enum.get(cv);
+    } else if (col.type === TableCollType.DateDif) {
+      return HelperClass.getDateDif(this.table.l, cv);
+    } else if (col.type === TableCollType.Date) {
+      return HelperClass.getDate(cv);
+    } else if (col.type === TableCollType.DateTime) {
+      return HelperClass.getDateTime(cv);
+    } else if (col.type === TableCollType.Time) {
+      return HelperClass.getTime(cv);
+    } else if (col.type === TableCollType.Url) {
+      return '<a target="_blank" href="' + cv + '">' + cv + '</a>';
+    } else if (col.type === TableCollType.Image) {
+      return '<img class="h-100" alt="" src="' + this.service.environment.url + cv + '"/>';
+    } else if (col.type === TableCollType.Price) {
+      return cv.toLocaleString() + ' ' + this.table.l('Rial');
+    } else if (col.type === TableCollType.Plaque) {
+      const parts = cv.split('_');
+      if (parts.length === 4) {
+        return '<div class="plaque' + (parts[1] === 'ع' ? ' p' : '') + (parts[1] === 'الف' ? ' g' : '') + '">' +
+          '<div class="part1">' + parts[0] + '</div>' +
+          '<div class="part2">' + parts[1] + '</div>' +
+          '<div class="part3">' + parts[2] + '</div>' +
+          '<div class="part4">' + parts[3] + '</div>' +
+          '</div>';
+      } else if (parts.length === 2){
+        return '<div class="plaque plaque-m">' +
+          '<div class="part1">' + parts[0] + '</div>' +
+          '<div class="part2">' + parts[1] + '</div>' +
+          '</div>';
+      }
+    } else if (col.type === TableCollType.PlaqueText) {
+      const parts = cv.split('_');
+      if (parts.length === 4){
+        return `<div class="ltr">${parts[0]} ${parts[1]}&lrm; ${parts[2]} ${parts[3]}</div>`;
+      }
+    }
+    return this.table.l(cv);
+  }
+  getCol(n): string{
+    let c = this.row;
+    n.split('.').forEach((x) => {
+      c = c[x];
+    });
+    return c;
+  }
+  edit(): void{
+    if (this.table.permissions.Type === PermissionTypeEnum.Form){
+      this.table.form.name = 'Update';
+      this.table.form.setData(this.row);
+      this.table.form.setButtons(this.table.form.onTop, true, this.row.Id);
+      this.table.form.inputs.filter(x => x.inEditDisabled).forEach(x => x.disabled = true);
+      this.table.form.inputs.filter(x => !x.inEditVisible).forEach(x => x.visible = false);
+    }else{
+      new RequestClass(this.table.environment, this.table.l).send(this.table.url + 'Get/' + this.row.Id, Method.Post, null,
+        this.optEdit, (result) => {
+        this.table.form.name = 'Update';
+        this.table.form.setButtons(this.table.form.onTop, true, this.row.Id);
+        this.table.form.setData(result);
+        this.table.form.inputs.filter(x => x.inEditDisabled).forEach(x => x.disabled = true);
+          this.table.form.inputs.filter(x => !x.inEditVisible).forEach(x => x.visible = false);
+        if (this.table.modal){
+          this.table.modal.show();
+        }
+      });
+    }
+  }
+}

package/src/lib/components/table/row/table.row.component.css

@@ -0,0 +1,170 @@
+
+::ng-deep lib-table-row {
+  display: contents;
+}
+
+tr {
+  position: relative;
+}
+
+tr td {
+  font-family: VazirLight;
+  font-size: 12px;
+  font-weight: normal;
+  text-align: center;
+  position: relative;
+  vertical-align: middle;
+}
+
+tr td .options-con {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 0;
+  overflow: hidden;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  background: linear-gradient(270deg, transparent 0, #fff 80px, #fff);
+}
+tr td .options-con.show {
+  width: unset;
+  overflow: unset;
+}
+
+tr:hover > td > .options-con {
+  width: auto;
+  overflow: unset;
+}
+
+tr td .options-con:not(.show) span:first-child{
+  margin-right: 100px;
+}
+
+tr td .options-con span:last-child{
+  margin-left: 10px;
+}
+
+tr.children {
+  display: none;
+}
+
+tr.children.rightline:after {
+  right: 20px;
+}
+
+::ng-deep tr td .select-row {
+  font-size: 18px;
+  height: 30px;
+  line-height: 30px;
+  cursor: pointer;
+}
+
+::ng-deep tr td .handle-sortable {
+  cursor: move;
+}
+
+::ng-deep tr td .status {
+  padding: 3px 10px;
+  border-radius: 5px;
+  font-size: 10px;
+  cursor: default;
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -ms-user-select: none;
+}
+
+::ng-deep tr td .status.blue {
+  color: var(--blue);
+  background-color: var(--blue-22);
+}
+
+::ng-deep tr td .status.green {
+  color: var(--green);
+  background-color: var(--green-22);
+}
+
+::ng-deep tr td .status.red {
+  color: var(--red);
+  background-color: var(--red-22);
+}
+
+::ng-deep tr td .status.gray {
+  color: var(--black);
+  background-color: var(--black-22);
+}
+
+::ng-deep tr td .status.yellow {
+  color: var(--yellow);
+  background-color: var(--yellow-22);
+}
+
+::ng-deep tr td .plaque {
+  float: right;
+  width: 140px;
+  height: 30px;
+  background-image: url("../../../../assets/images/plaque.png");
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: contain;
+  margin-right: calc(50% - 70px);
+  font-size: 14px;
+  background-color: white;
+  border-radius: 4px;
+}
+
+::ng-deep tr td .plaque.plaque-m {
+  background-image: url("../../../../assets/images/plaque_m.png");
+}
+
+::ng-deep tr td .plaque.p {
+  background-color: #ffc913;
+}
+
+::ng-deep tr td .plaque.g {
+  background-color: #e20600;
+}
+
+::ng-deep tr td .plaque .part1 {
+  float: left;
+  width: 32px;
+  height: 30px;
+  line-height: 33px;
+  margin-left: 13px;
+}
+
+::ng-deep tr td .plaque.plaque-m .part1 {
+  width: 42px;
+  margin-left: 13px;
+}
+
+::ng-deep tr td .plaque .part2 {
+  float: left;
+  width: 25px;
+  height: 30px;
+  line-height: 30px;
+}
+
+::ng-deep tr td .plaque.plaque-m .part2 {
+  width: 57px;
+  line-height: 33px;
+}
+
+::ng-deep tr td .plaque .part3 {
+  float: left;
+  width: 42px;
+  height: 30px;
+  line-height: 33px;
+}
+
+::ng-deep tr td .plaque .part4 {
+  float: left;
+  height: 20px;
+  width: 28px;
+  margin-top: 8px;
+}
+

package/src/lib/components/table/row/table.row.component.html

@@ -0,0 +1,21 @@
+<tr class="underline p-r" [id]="row.Id ? row.Id : ''" [style]="{height: table.height + 'px', zIndex: row.RowNum }">
+  <td style="width: 50px" *ngIf="table.hasChildren && (table.level === null || table.level > level)"><lib-form-icon *ngIf="showChildren != null && showChildren.type === type.Icon" [inp]="showChildren"></lib-form-icon></td>
+  <td style="width: 50px" *ngIf="table.withSelect"><i (click)="select()" [className]="(row.selected ? 'fas fa-check-square green' : 'far fa-square') + ' select-row'"></i></td>
+  <td style="width: 50px" *ngIf="table.sortable"><i class="fa-duotone fa-grip-vertical handle-sortable"></i></td>
+  <td [style]="{width: col.percent + '%'}" [className]="col.class + ' item'" *ngFor="let col of table.cols" [innerHTML]="getCell(col)"></td>
+  <td *ngIf="row.Options.length > 0">
+    <div [className]="(table.optionType == tableOptionType.Show ? 'show ' : '') + 'options-con'">
+      <span *ngFor="let opt of getOptions()">
+        <lib-form-button *ngIf="opt.type == type.Button" [inp]="opt"></lib-form-button>
+        <lib-form-icon *ngIf="opt.type == type.Icon" [inp]="opt"></lib-form-icon>
+      </span>
+    </div>
+  </td>
+</tr>
+<tr #childrenDiv *ngIf="table.hasChildren && (table.level === null || table.level > level)" class="children rightline">
+  <td [colSpan]="table.cols.length + (table.hasChildren ? 1 : 0) + (row.Options.length > 0 ? 1 : 0)">
+    <table style="width: 94%; margin: 15px 3% 15px 0;">
+      <lib-table-row (loadParent)="loadChildren($event)" (confirmShow)="onConfirmShow($event)" [level]="level + 1" (changeRows)="onChangeRows($event)" [id]="child.id ? child.id : ''" [table]="table" [row]="child" *ngFor="let child of children"></lib-table-row>
+    </table>
+  </td>
+</tr>