ps-toolkit-ui 0.0.210 → 0.0.211

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

@@ -0,0 +1,373 @@
+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,
+  PermissionInputActionEnum,
+  PermissionInputTypeEnum,
+  PermissionTypeEnum,
+  TableCollType,
+  TableOptionType
+} 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';
+import {PermissionClass} from '../../../classes/permission.class';
+
+@Component({
+  selector: 'lib-table-row',
+  templateUrl: './table.row.component.html',
+  styleUrls: ['./table.row.component.css']
+})
+export class TableRowComponent implements OnInit{
+  @Output()
+  confirmShow = new EventEmitter<object>();
+  @Output()
+  changeRows = new EventEmitter<object>();
+  @Input()
+  level: number;
+  @Input()
+  table: TableClass;
+  @Input()
+  row;
+  @Output()
+  loadParent = new EventEmitter<string>();
+  get type(): typeof InputType { return InputType; }
+  get tableOptionType(): typeof TableOptionType{ return TableOptionType; }
+  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);
+    if (this.table.hasChildren){
+      if (!this.table.childrenAutoLoad){
+        this.children = this.getChildren();
+      }
+      if (this.table.permissions.hasAccess(PermissionAccessTypeEnum.Insert)){
+        this.addChildren = new InputClass(this.table.environment, this.table.l, this.table.name + 'AddSubsetTitle',
+          '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.onSuccessBase = () => {
+            this.table.modal.hide();
+            this.showChildren.type = InputType.Icon;
+            this.loadChildren(this.row.Data.Id);
+          };
+          this.table.showInsertModal(this.row.Data.Id);
+        };
+      }
+      this.showChildren = new InputClass(this.table.environment, this.table.l, this.table.name + 'SubsetTitle', 'fa-duotone fa-angle-left f-s-22',
+        this.row.Data.CountChild > 0 || (!this.table.childrenAutoLoad && this.children.length > 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.Data.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.Data.Active ? 'fa-toggle-on' : 'fa-toggle-off', InputType.Icon,
+        'm-h-5 h-20 ' + (this.row.Data.Active ? 'green' : ''));
+      this.optStatus.row = this.row.Data;
+      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';
+        });
+      };
+    }
+    if (this.table.sortable){
+      this.setSortRow();
+    }
+  }
+  loadChildren(p): void{
+    new RequestClass(this.table.environment, this.table.l).send(this.table.url + `List/${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.Data.selected = !this.row.Data.selected;
+  }
+  onChangeRows(e): void{
+    return this.changeRows.emit(e);
+  }
+  onConfirmShow(e): void{
+    return this.confirmShow.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[]{
+    const opts: InputClass[] = this.addChildren !== null && (this.table.level === null || this.table.level > this.level) ?
+      [this.addChildren] : [];
+    for (const option of this.row.Options.filter(x => x.Type === PermissionTypeEnum.Option)){
+      const opt = new InputClass(this.table.environment, this.table.l, option.Name, option.Icon,
+        option.InputType === PermissionInputTypeEnum.Icon ? InputType.Icon : InputType.Button, 'blue h-25 m-h-5 d-ib va-m f-u');
+      opt.row = this.row;
+      if (option.AccessType === PermissionAccessTypeEnum.Update){
+        if (this.table.form){
+          opt.onClick = () => {
+            this.table.form.url = this.table.url + 'Update/' + this.row.Data.Id;
+            if (this.table.hasChildren && this.row.Data.ParentId != null) {
+              this.table.form.onSuccessBase = () => {
+                this.table.modal.hide();
+                if (this.table.childrenAutoLoad){
+                  this.loadParent.emit(this.row.Data.ParentId);
+                }else{
+                  this.table.load();
+                }
+              };
+            } else {
+              this.table.form.onSuccessBase = () => {
+                if (!this.table.form.onTop){
+                  this.table.modal.hide();
+                }
+                this.table.form.clear();
+                this.table.load();
+              };
+            }
+            this.edit(opt);
+          };
+        } else {
+          opt.url = this.table.url + '/Update/' + this.row.Data.Id;
+        }
+      }
+      else if (option.AccessType === PermissionAccessTypeEnum.Delete){
+        opt.class = opt.class.replace('blue', 'red');
+        opt.onClick = () => {
+          if (this.table.form){
+            this.table.form.clear();
+          }
+          if (this.table.permissions.Type === PermissionTypeEnum.Form){
+            this.table.rows = this.table.rows.filter(x => x.Id !== this.row.Data.Id);
+            this.changeRows.emit(this.row.Data);
+          } else {
+            this.confirmShow.emit({id: this.row.Data.Id, accept: () => {
+                if (this.table.hasChildren && this.table.childrenAutoLoad && this.row.Data.ParentId != null ){
+                  this.loadParent.emit(this.row.Data.ParentId);
+                }else{
+                  this.table.load();
+                }
+              }});
+          }
+        };
+      }
+      else if (option.AccessType === PermissionAccessTypeEnum.Print){
+        const p = new PermissionClass();
+        p.RelatedId = 'Index';
+        p.Area = this.table.permissions.Area;
+        p.Controller = 'Print';
+        p.Action = option.Controller;
+        opt.url = '/Report' + p.getUrl() + '/' + this.row.Data.Id;
+        opt.urlNewTab = true;
+      }
+      else if (option.InputAction === PermissionInputActionEnum.Link || option.InputAction === PermissionInputActionEnum.LinkNewTab){
+        const p = new PermissionClass();
+        p.RelatedId = this.table.permissions.RelatedId;
+        p.Area = this.table.permissions.Area;
+        p.Controller = option.Controller;
+        p.Action = option.Action;
+        opt.url = p.getUrl() + '/' + this.row.Data.Id;
+        opt.urlNewTab = option.InputAction === PermissionInputActionEnum.LinkNewTab;
+      }
+      else if (option.InputAction === PermissionInputActionEnum.Modal){
+        opt.modal = this.table.optionsActions.find(x => x.name === option.Action);
+        opt.onClick = () => {
+          if (opt.modal.table){
+            const p = new PermissionClass();
+            p.RelatedId = this.row.Data.Id;
+            p.Area = this.table.permissions.Area;
+            p.Controller = this.table.permissions.Controller;
+            p.Action = option.Action;
+            p.Accesses = this.row.Options.filter(x => x.ParentId === option.Id);
+            opt.modal.table.permissions = p;
+            if (opt.modal.table.form){
+              opt.modal.table.form.url = p.getUrl() + 'Insert';
+              opt.modal.table.form.baseUrl = p.getUrl() + 'Insert';
+            }
+            opt.modal.table.set();
+          }
+          if (opt.modal.form){
+            opt.modal.form.name = option.Name;
+            opt.modal.form.url = opt.modal.form.baseUrl + 'Update/' + this.row.Data.Id;
+            opt.modal.form.loadData(opt.modal.form.baseUrl + 'Get/' + this.row.Data.Id);
+            opt.modal.form.onSuccessBase = () => {
+              opt.modal.hide();
+            };
+          }
+          if (opt.modal.accordion){
+            for (const r of opt.modal.accordion.rows){
+              if (r.table){
+                const p = new PermissionClass();
+                p.RelatedId = this.row.Data.Id;
+                p.Area = this.table.permissions.Area;
+                p.Controller = option.Controller;
+                p.Action = r.name;
+                p.Accesses = this.row.Options.filter(x => x.ParentId === option.Id);
+                r.table.permissions = p;
+                if (r.table.form){
+                  r.table.form.url = p.getUrl() + 'Insert';
+                  r.table.form.baseUrl = p.getUrl() + 'Insert';
+                }
+                r.table.set();
+              }
+            }
+          }
+        };
+      }
+      else if (option.InputAction === PermissionInputActionEnum.File){
+        const p = new PermissionClass();
+        p.RelatedId = this.table.permissions.RelatedId;
+        p.Area = this.table.permissions.Area;
+        p.Controller = option.Controller;
+        p.Action = option.Action;
+        opt.url = '/File' + p.getUrl() + '/' + this.row.Data.Id;
+        opt.urlNewTab = true;
+      }
+      else if (option.InputAction === PermissionInputActionEnum.Confirm){
+        opt.onClick = () => {
+          const p = new PermissionClass();
+          p.RelatedId = this.table.permissions.RelatedId;
+          p.Area = this.table.permissions.Area;
+          p.Controller = option.Controller;
+          p.Action = option.Action;
+          this.table.showConfirm(this.table.l(option.Action + 'Confirm'), p.getUrl() + '/' + this.row.Data.Id, null, () => {
+            this.table.load();
+          });
+        };
+      }
+      else if (option.InputAction === PermissionInputActionEnum.OnClick){
+        opt.onClick = (btn) => {
+          this.table.optionsActions.find(x => x.name === option.Action).onClick(btn);
+        };
+      }
+      opts.push(opt);
+    }
+    return opts;
+    // return (this.addChildren !== null && (this.table.level === null || this.table.level > this.level) ? [this.addChildren] : [])
+    //   .concat(this.table.options.filter(x => x.condition == null ||
+    //     (x.condition.startsWith('!') ? !this.row.Data[x.condition.substring(1)] : this.row.Data[x.condition])).map((o) => {
+    //     const i = HelperClass.clone(o);
+    //     if (i.url){
+    //       i.url = i.url.replace('{}', this.row.Data.Id);
+    //     }
+    //     i.row = this.row.Data;
+    //     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.Data, col.name);
+    if (col.fun != null) {
+      return col.fun(this.row.Data);
+    } 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.Data;
+    n.split('.').forEach((x) => {
+      c = c[x];
+    });
+    return c;
+  }
+  edit(opt: InputClass): void{
+    if (this.table.permissions.Type === PermissionTypeEnum.Form){
+      this.table.form.name = opt.name;
+      this.table.form.setData(this.row.Data);
+      this.table.form.setButtons(this.table.form.onTop, true, this.row.Data.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.Data.Id, Method.Post,
+        null, opt, (result) => {
+        this.table.form.name = opt.name;
+        this.table.form.setButtons(this.table.form.onTop, true, this.row.Data.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();
+        }
+      });
+    }
+  }
+  getChildren(): any[]{
+    return this.row.Data.Id ? this.table.rows.filter(x => x.Data.ParentId === this.row.Data.Id) : [];
+  }
+}

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

@@ -0,0 +1,116 @@
+.table-con {
+  float: right;
+  width: 100%;
+  border-radius: 5px;
+  padding: 20px;
+  background-color: white;
+  position: relative;
+  box-shadow: var(--box-shadow-table);
+}
+.table-con.maximum {
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 11;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  border-radius: 0;
+}
+.table-con > .title{
+  float: right;
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  font-family: VazirBold;
+  font-size: 16px;
+  text-align: right;
+  margin-bottom: 10px;
+  position: relative;
+}
+.table-con > .title .description{
+  font-size: 13px;
+  margin-right: 10px;
+  font-family: VazirLight;
+  vertical-align: middle;
+}
+.table-con > .title .extra-buttons{
+  float: left;
+  margin-top: 5px;
+}
+.table-con > .title .buttons{
+  float: left;
+  margin-left: 10px;
+  margin-top: 5px;
+}
+.table-con > .search-form {
+  float: right;
+  width: 100%;
+  border-radius: 5px;
+  margin-bottom: 5px;
+}
+
+.table-con table{
+  width: 100%;
+  border-spacing: 0 !important;
+}
+.table-con table thead tr{
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -ms-user-select: none;
+}
+.table-con table thead tr th{
+  height: 45px;
+  font-family: VazirLight;
+  font-weight: normal;
+  position: relative;
+  color: var(--black-88);
+  vertical-align: middle;
+  font-size: 12px;
+  background-color: var(--base-11);
+}
+.table-con table thead tr th:first-child{
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+.table-con table thead tr th:last-child{
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+.table-con table thead tr th.sort{
+  cursor: pointer;
+}
+
+.table-con table thead tr th .sort-icon {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  top: calc(50% - 10px);
+  left: 5px;
+  font-size: 13px;
+  opacity: 0.6;
+}
+.table-con table tbody{
+  position: relative;
+}
+.table-con table tfoot tr{
+  height: 45px;
+}
+.table-con table tfoot tr td {
+  position: relative;
+  vertical-align: bottom;
+}
+
+::ng-deep .table-con:not(.sortable) table lib-table-row:last-of-type > tr:after{
+  background-image: unset;
+}
+
+::ng-deep .table-con table thead tr th .select-row{
+  font-size: 18px;
+  height: 30px;
+  line-height: 30px;
+  cursor: pointer;
+}

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

@@ -0,0 +1,62 @@
+<div [id]="table.id + 'Table'" [style]="table.style" #tableDiv [className]="(table.class ? table.class : '') + (table.sortable ? 'sortable' : '') + (table.hasChildren ? ' has-children' : '') + ' table-con'">
+  <div *ngIf="table.displayLabel" class="title">
+    {{this.table.title ? this.table.title : 'List'}}
+    <span class="description" *ngIf="this.table.description != null" [innerHTML]="'( ' + this.table.description + ' )'"></span>
+    <div class="extra-buttons" *ngIf="table.showExtraButtons">
+      <lib-form-icon *ngFor="let btn of table.extraButtons" [inp]="btn"></lib-form-icon>
+      <lib-form-icon [inp]="reload"></lib-form-icon>
+      <lib-form-icon [inp]="maximum"></lib-form-icon>
+    </div>
+    <div *ngIf="table.buttons.length > 0" class="buttons">
+      <lib-form-button [inp]="btn" *ngFor="let btn of table.buttons"></lib-form-button>
+    </div>
+  </div>
+  <div class="search-form" *ngIf="table.searchForm">
+    <lib-form [form]="table.searchForm"></lib-form>
+  </div>
+  <lib-form *ngIf="table.form && table.form.onTop" [form]="table.form"></lib-form>
+  <table>
+    <thead>
+      <tr>
+        <th *ngIf="table.hasChildren" style="width: 50px"></th>
+        <th *ngIf="table.sortable" style="width: 50px"></th>
+        <th *ngIf="table.withSelect" style="width: 50px">
+          <i (click)="selectAll()" [className]="(allSelected() ? 'fas fa-check-square green' : isSelected() ? 'fas fa-minus-square green' : 'far fa-square') + ' select-row'" *ngIf="table.rows.length > 0"></i>
+        </th>
+        <th (click)="!table.sortable && col.sort && changeSort($event, col.name)" [className]="(!table.sortable && col.sort ? 'sort' : '')" *ngFor="let col of table.cols" [style]="{width: col.percent + '%'}">
+          <i *ngIf="!table.sortable && col.sort" [className]="'sort-icon fas' + (table.sort === col.name ? (table.sortType === 'ASC' ? ' fa-sort-up' : ' fa-sort-down') : ' fa-sort')"></i>
+          <span *ngIf="col.search == null">{{ table.l(col.name) }}</span>
+          <div class="w-90 header-search p-h-20 m-r-5" *ngIf="!table.sortable && col.search != null">
+            <lib-form-textbox *ngIf="col.type != colType.Date" [inp]="col.search"></lib-form-textbox>
+            <lib-form-date *ngIf="col.type == colType.Date" [inp]="col.search"></lib-form-date>
+          </div>
+        </th>
+        <th *ngIf="table.optionType == tableOptionType.Show" [style]="{width: (100 - itemsWidth) + '%'}">{{table.l('Options')}}</th>
+<!--        <th *ngIf="table.hasOption()" [style]="{width: (100 - itemsWidth) + '%'}">-->
+<!--          <span *ngIf="!table.withSelect || !isSelected()">{{ table.l('Options') }}</span>-->
+<!--          <span *ngIf="table.withSelect && isSelected()" class="option-con">-->
+<!--            <span *ngFor="let opt of options">-->
+<!--              <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>-->
+<!--          </span>-->
+<!--        </th>-->
+      </tr>
+    </thead>
+    <tbody #rows [style]="table.perPage > 0 ? {height: table.height * table.perPage + 'px'} : table.loading || !table.permission || table.rows.length == 0 ? {height: '100px'} : {}">
+      <lib-table-row (confirmShow)="onConfirmShow($event)" [level]="1" (changeRows)="onChangeRows($event)" [id]="row.id ? row.id : ''" [table]="table" [row]="row" *ngFor="let row of getRows()"></lib-table-row>
+      <tr *ngIf="table.perPage > 0" [style]="{height: (table.perPage > 0 ? (table.perPage - table.rows.length) * table.height : '100') + 'px', visibility: 'hidden'}"></tr>
+      <lib-table-loading [table]="table"></lib-table-loading>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td colspan="100%">
+          <lib-table-pagination [table]="table" *ngIf="table.perPage > 0"></lib-table-pagination>
+        </td>
+      </tr>
+    </tfoot>
+  </table>
+  <lib-modal *ngIf="table.modal != null" [modal]="table.modal"></lib-modal>
+  <lib-modal [modal]="opt" *ngFor="let opt of getModals()"></lib-modal>
+  <lib-confirm #confirm [tableId]="table.name"></lib-confirm>
+</div>