nira-falcon 0.1.22 → 0.1.23

package/src/lib/core-table/core-table-card-manager/core-table-card-manager.component.html

@@ -0,0 +1,94 @@
+<container-element [ngSwitch]="column.type">
+  <ng-content></ng-content>
+
+  <app-core-table-row-selector-column
+    *ngSwitchCase="columnsTypes.ROW_SELECTOR"
+    [rowSelector]="rowSelector"
+    [data]="data"
+    [allTableData]="allTableData"
+    [column]="column"
+  ></app-core-table-row-selector-column>
+  <app-core-table-status-active-column
+    *ngSwitchCase="columnsTypes.STATUS_ACTIVE"
+    [data]="data"
+    [column]="column"
+  ></app-core-table-status-active-column>
+  <app-core-table-status-column
+    *ngSwitchCase="columnsTypes.STATUS"
+    [data]="data"
+    [column]="column"
+  ></app-core-table-status-column>
+  <app-core-table-action-column
+    *ngSwitchCase="columnsTypes.ACTION"
+    [data]="data"
+    [column]="column"
+  ></app-core-table-action-column>
+  <app-core-table-action-buttons-column
+    *ngSwitchCase="columnsTypes.ACTION_BUTTONS"
+    (onClick)="clicked($event)"
+    [data]="data"
+    [column]="column"
+  ></app-core-table-action-buttons-column>
+  <app-core-table-shamsi-date
+    *ngSwitchCase="columnsTypes.SHAMSI_DATE"
+    [data]="data"
+    [column]="column"
+  >
+  </app-core-table-shamsi-date>
+  <app-core-row-pelak
+    class="inline-block"
+    *ngSwitchCase="columnsTypes.PELAK"
+    [data]="data"
+    [column]="column"
+  ></app-core-row-pelak>
+  <span
+    *ngSwitchCase="columnsTypes.TEXT"
+    [ngClass]="{ 'cursor-pointer': column.coptToClipboard }"
+    (click)="onTextColumnClicked(column, data[column.key])"
+    tableDetailViewerManager
+    [detailViewerData]="
+      combinedData(column.detailViewer, data[column.detailViewer?.key])
+    "
+    >{{ data[column.key] | persianDigits }}</span
+  >
+  <span
+    *ngSwitchCase="columnsTypes.NUMBER"
+    [ngClass]="{
+      'cursor-pointer': column.copyToClipboard,
+      green: data[column.key] > 0 && column.canColorfulNumber,
+      red: data[column.key] < 0 && column.canColorfulNumber
+    }"
+    (click)="onTextColumnClicked(column, data[column.key])"
+    tableDetailViewerManager
+    dir="ltr"
+    [detailViewerData]="
+      combinedData(column.detailViewer, data[column.detailViewer?.key])
+    "
+    ><app-core-number
+      [number]="data[column.key]"
+      [type]="'number'"
+      [canSplitNumbers]="true"
+      [canShowWordInToolTip]="true"
+    >
+    </app-core-number>
+  </span>
+  <span *ngSwitchCase="columnsTypes.SELECTOR">
+    <span
+      *ngIf="data[column.key.split('.')[0]]"
+      tableDetailViewerManager
+      [detailViewerData]="
+        combinedData(
+          column.detailViewer,
+          getSelectorData(
+            data[column.key.split('.')[0]],
+            column.detailViewer?.key
+          )
+        )
+      "
+      >{{
+        getSelectorData(data[column.key.split(".")[0]], column.data.key)
+          | persianDigits
+      }}</span
+    >
+  </span>
+</container-element>

package/src/lib/core-table/core-table-card-manager/core-table-card-manager.component.ts

@@ -0,0 +1,58 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { NiraSnackBarService } from 'nira-snack-bar';
+import { COLUMNS_TYPES } from '../../../utils/constants';
+import { BehaviorSubject } from 'rxjs';
+
+@Component({
+  selector: 'app-core-table-card-manager',
+  templateUrl: './core-table-card-manager.component.html',
+  styleUrls: ['./core-table-card-manager.component.scss'],
+})
+export class CoreTableCardManagerComponent {
+  @Input({ required: true }) data!: any;
+  @Input({ required: true }) column!: any;
+  @Input({ required: true }) allTableData!: any;
+  @Input({ required: false }) rowSelector: BehaviorSubject<any> | undefined =
+    undefined;
+  @Output() onColumnClicked: EventEmitter<any> = new EventEmitter();
+  get columnsTypes() {
+    return COLUMNS_TYPES;
+  }
+  constructor(private niraSnackBar: NiraSnackBarService) {}
+  getSelectorData(data: any, key: string) {
+    if (key) {
+      const split = key.split('.');
+      if (split.length === 1) {
+        return data[key];
+      } else {
+        let newData = data;
+        split.forEach((newKay) => {
+          newData = newData[newKay];
+        });
+
+        return newData;
+      }
+    }
+  }
+  onTextColumnClicked(column: any, data: string) {
+    if (!column.coptToClipboard) return;
+    navigator.clipboard
+      .writeText(data)
+      .then((e) => {
+        this.niraSnackBar.show('با موفقیت کپی شد', {
+          statusClass: 'success',
+          duration: 3000,
+        });
+      })
+      .catch((e) => console.error(e));
+  }
+  clicked(val: any) {
+    this.onColumnClicked.emit(val);
+  }
+  combinedData(detailViewer: any, data: any) {
+    return {
+      detailViewer: detailViewer,
+      data: data,
+    };
+  }
+}

package/src/lib/core-table/core-table-column-manager/core-table-column-manager.component.html

@@ -0,0 +1,99 @@
+<container-element [ngSwitch]="column.type">
+  <ng-content></ng-content>
+
+  <app-core-table-row-selector-column
+    *ngSwitchCase="columnsTypes.ROW_SELECTOR"
+    [rowSelector]="rowSelector"
+    [data]="data"
+    [allTableData]="allTableData"
+    [column]="column"
+  ></app-core-table-row-selector-column>
+  <app-core-table-status-active-column
+    *ngSwitchCase="columnsTypes.STATUS_ACTIVE"
+    [data]="data"
+    [column]="column"
+  ></app-core-table-status-active-column>
+  <app-core-table-status-column
+    *ngSwitchCase="columnsTypes.STATUS"
+    [data]="data"
+    [column]="column"
+  ></app-core-table-status-column>
+  <app-core-table-action-column
+    *ngSwitchCase="columnsTypes.ACTION"
+    [data]="data"
+    [column]="column"
+  ></app-core-table-action-column>
+  <app-core-table-action-buttons-column
+    *ngSwitchCase="columnsTypes.ACTION_BUTTONS"
+    (onClick)="clicked($event)"
+    [data]="data"
+    [column]="column"
+  ></app-core-table-action-buttons-column>
+  <app-core-table-shamsi-date
+    *ngSwitchCase="columnsTypes.SHAMSI_DATE"
+    [data]="data"
+    [column]="column"
+  >
+  </app-core-table-shamsi-date>
+  <app-core-row-pelak
+    *ngSwitchCase="columnsTypes.PELAK"
+    [data]="data"
+    [column]="column"
+  ></app-core-row-pelak>
+  <core-table-detail-viewer-for-report
+    *ngSwitchCase="columnsTypes.DETAIL_VIEWER_FOR_REPORT"
+    [data]="data"
+    [column]="column"
+  ></core-table-detail-viewer-for-report>
+  <span
+    *ngSwitchCase="columnsTypes.TEXT"
+    [ngClass]="{ 'cursor-pointer': column.coptToClipboard }"
+    (click)="onTextColumnClicked(column, data[column.key])"
+    tableDetailViewerManager
+    [detailViewerData]="
+      combinedData(column.detailViewer, data[column.detailViewer?.key])
+    "
+    >{{ data[column.key] | persianDigits }}</span
+  >
+  <span
+    *ngSwitchCase="columnsTypes.NUMBER"
+    [ngClass]="{
+      'cursor-pointer': column.copyToClipboard,
+      green: data[column.key] > 0 && column.canColorfulNumber,
+      red: data[column.key] < 0 && column.canColorfulNumber
+    }"
+    (click)="onTextColumnClicked(column, data[column.key])"
+    tableDetailViewerManager
+    dir="ltr"
+    [detailViewerData]="
+      combinedData(column.detailViewer, data[column.detailViewer?.key])
+    "
+    ><app-core-number
+      [number]="data[column.key]"
+      [type]="'number'"
+      [canSplitNumbers]="true"
+      [canShowWordInToolTip]="true"
+    >
+    </app-core-number>
+  </span>
+
+  <span *ngSwitchCase="columnsTypes.SELECTOR">
+    <span
+      *ngIf="data[column.key.split('.')[0]]"
+      tableDetailViewerManager
+      [detailViewerData]="
+        combinedData(
+          column.detailViewer,
+          getSelectorData(
+            data[column.key.split('.')[0]],
+            column.detailViewer?.key
+          )
+        )
+      "
+      >{{
+        getSelectorData(data[column.key.split(".")[0]], column.data.key)
+          | persianDigits
+      }}</span
+    >
+  </span>
+</container-element>

package/src/lib/core-table/core-table-column-manager/core-table-column-manager.component.ts

@@ -0,0 +1,59 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { NiraSnackBarService } from 'nira-snack-bar';
+import { COLUMNS_TYPES } from '../../../utils/constants';
+import { BehaviorSubject } from 'rxjs';
+
+@Component({
+  selector: 'app-core-table-column-manager',
+  templateUrl: './core-table-column-manager.component.html',
+  styleUrls: ['./core-table-column-manager.component.scss'],
+})
+export class CoreTableColumnManagerComponent {
+  @Input({ required: true }) data!: any;
+  @Input({ required: true }) column!: any;
+  @Input({ required: true }) allTableData!: any;
+  @Input({ required: false }) rowSelector: BehaviorSubject<any> | undefined =
+    undefined;
+  @Output() onColumnClicked: EventEmitter<any> = new EventEmitter();
+  get columnsTypes() {
+    return COLUMNS_TYPES;
+  }
+  constructor(private niraSnackBar: NiraSnackBarService) {}
+  getSelectorData(data: any, key: string) {
+    if (!key) {
+      return '';
+    }
+    const split = key.split('.');
+    if (split.length === 1) {
+      return data[key];
+    } else {
+      let newData = data;
+      split.forEach((newKey) => {
+        newData = newData[newKey];
+      });
+
+      return newData;
+    }
+  }
+  onTextColumnClicked(column: any, data: string) {
+    if (!column.coptToClipboard) return;
+    navigator.clipboard
+      .writeText(data)
+      .then((e) => {
+        this.niraSnackBar.show('با موفقیت کپی شد', {
+          statusClass: 'success',
+          duration: 3000,
+        });
+      })
+      .catch((e) => console.error(e));
+  }
+  clicked(val: any) {
+    this.onColumnClicked.emit(val);
+  }
+  combinedData(detailViewer: any, data: any) {
+    return {
+      detailViewer: detailViewer,
+      data: data,
+    };
+  }
+}

package/src/lib/core-table/core-table-detail-viewer-for-report/core-table-detail-viewer-for-report.component.html

@@ -0,0 +1,5 @@
+<span class="text" *ngIf="hasDetailViewers()" (click)="onClick()"
+  ><app-caret-up-icon class="inline-block w-3 h-3"></app-caret-up-icon
+  >{{ data[column.key] }}</span
+>
+<span *ngIf="!hasDetailViewers()">{{ data[column.key] }}</span>

package/src/lib/core-table/core-table-detail-viewer-for-report/core-table-detail-viewer-for-report.component.scss

@@ -0,0 +1,8 @@
+.text {
+  background-color: #b4dcff;
+  cursor: pointer;
+  border-radius: 18px;
+  padding: 2px 8px;
+  color: #2c7be5 !important;
+  fill: #2c7be5 !important;
+}

package/src/lib/core-table/core-table-detail-viewer-for-report/core-table-detail-viewer-for-report.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input } from '@angular/core';
+import { DetailViewers } from '../../falconTypes';
+
+@Component({
+  selector: 'core-table-detail-viewer-for-report',
+  templateUrl: './core-table-detail-viewer-for-report.component.html',
+  styleUrls: ['./core-table-detail-viewer-for-report.component.scss'],
+})
+export class CoreTableDetailViewerForReportComponent {
+  @Input({ required: true }) data!: any;
+  @Input({ required: true }) column!: any;
+
+  get detailViewers() {
+    return this.column.data.detailViewers;
+  }
+
+  ngOnInit(): void {}
+
+  hasDetailViewers() {
+    return this.detailViewers.some(
+      (item: any) => item === this.data[this.column.data.keyType]
+    );
+  }
+
+  onClick() {
+    this.column.data.onClick(this.data);
+  }
+}

package/src/lib/core-table/core-table-filter-dialog/core-table-filter-dialog/core-table-filter-dialog.component.html

@@ -0,0 +1,24 @@
+<core-card class="block min-w-64 max-h-[80vh] overflow-auto">
+  <div class="root flex mb-6 justify-between">
+    <b class="m-3 self-center">فیلتر جدول</b>
+    <close-icon
+      (click)="close()"
+      class="close-icon h-10 m-3 rounded-full cursor-pointer p-2 hover:shadow-md"
+    ></close-icon>
+  </div>
+
+  <div *ngFor="let column of columnsSchema">
+    <div>
+      <core-checkbox
+        class="inline-block w-4 ms-4"
+        [checked]="column.active === undefined ? true : column.active"
+        (onChange)="onCheckboxClicked(column, $event)"
+      ></core-checkbox>
+      {{ column.label }}
+    </div>
+  </div>
+
+  <div class="grid grid-cols-3 gap-x-2 p-3" dir="ltr">
+    <core-btn (btnClicked)="submitBtn()" class="col-span-1"> بستن </core-btn>
+  </div>
+</core-card>

package/src/lib/core-table/core-table-filter-dialog/core-table-filter-dialog/core-table-filter-dialog.component.scss

@@ -0,0 +1,10 @@
+.close-icon {
+  fill: var(--default-table-column-date-picker-close-icon-color);
+  :hover {
+    background-color: var(--default-table-hover-background-icon-color);
+    fill: var(--default-table-hover-fill-icon-color);
+  }
+}
+.root {
+  background-color: var(--default-table-th-background-color);
+}

package/src/lib/core-table/core-table-filter-dialog/core-table-filter-dialog/core-table-filter-dialog.component.ts

@@ -0,0 +1,76 @@
+import { Component, Input } from '@angular/core';
+import { NgxIndexedDBService } from 'ngx-indexed-db';
+import { IModal, NiraModalConfig } from 'nira-modal';
+import { Subject } from 'rxjs';
+
+@Component({
+  selector: 'app-core-table-filter-dialog',
+  templateUrl: './core-table-filter-dialog.component.html',
+  styleUrls: ['./core-table-filter-dialog.component.scss'],
+})
+export class CoreTableFilterDialogComponent implements IModal {
+  @Input() closeSubject!: Subject<any>;
+  @Input() config!: NiraModalConfig;
+  key!: string;
+  columnsSchema: any[] = [];
+  dbTableFilter: any;
+  constructor(private dbService: NgxIndexedDBService) {}
+  ngOnInit() {
+    this.columnsSchema = this.config.data.columnsSchema;
+    this.key = this.config.data.key;
+    this.getDbTableFilter();
+  }
+  onCheckboxClicked(selectedColumn: any, event: any) {
+    this.columnsSchema.map((column) => {
+      if (selectedColumn.key === column.key) {
+        column.active = event.srcElement.checked;
+      }
+      return column;
+    });
+    setTimeout(() => {
+      this.saveTableFilter();
+    }, 50);
+  }
+  getDbTableFilter() {
+    this.dbService
+      .getByIndex('tableFilter', 'key', this.key)
+      .subscribe((data) => {
+        this.dbTableFilter = data;
+        if (this.dbTableFilter) {
+          this.setTableFilter();
+        }
+      });
+  }
+  saveTableFilter() {
+    const data: any = {
+      key: this.key,
+      columnsSchema: JSON.stringify(this.columnsSchema),
+    };
+    if (this.dbTableFilter) {
+      data.id = this.dbTableFilter.id;
+      this.dbService.update('tableFilter', data).subscribe(() => {});
+    } else {
+      this.dbService.add('tableFilter', data).subscribe(() => {
+        this.getDbTableFilter();
+      });
+    }
+  }
+  setTableFilter() {
+    this.columnsSchema.map((column: any) => {
+      JSON.parse(this.dbTableFilter.columnsSchema).forEach(
+        (dbColumnsSchema: any) => {
+          if (dbColumnsSchema.key === column.key) {
+            column.active = dbColumnsSchema.active;
+          }
+        }
+      );
+      return column;
+    });
+  }
+  submitBtn() {
+    this.closeSubject.next('');
+  }
+  close() {
+    this.closeSubject.next('');
+  }
+}

package/src/lib/core-table/core-table-no-content/core-table-no-content.component.html

@@ -0,0 +1,6 @@
+<div *ngIf="tableData; let data" class="text-center mt-10 mb-10">
+  <ng-container *ngIf="$any(data).length == 0 && !loading">
+    <warning-icon class="icon-color inline-block w-24"></warning-icon>
+    <b class="content block">{{ labels.noResult }}</b></ng-container
+  >
+</div>

package/src/lib/core-table/core-table-no-content/core-table-no-content.component.scss

@@ -0,0 +1,7 @@
+.icon-color {
+  fill: var(--default-table-warning-icon-color);
+}
+
+.content {
+  color: var(--default-table-warning-color);
+}

package/src/lib/core-table/core-table-no-content/core-table-no-content.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+import { Label } from './core-table-no-content.label';
+
+@Component({
+  selector: 'core-table-no-content',
+  templateUrl: './core-table-no-content.component.html',
+  styleUrls: ['./core-table-no-content.component.scss'],
+})
+export class CoreTableNoContentComponent {
+  labels = Label['fa'];
+  @Input({ required: true }) tableData: any;
+  @Input({ required: false }) loading: any;
+  constructor() {}
+}

package/src/lib/core-table/core-table-no-content/core-table-no-content.label.ts

@@ -0,0 +1,14 @@
+import { UserLanguage } from '../../../utils/constants';
+
+export interface ITabelNoContent {
+  noResult: string;
+}
+
+export const Label: Record<UserLanguage, ITabelNoContent> = {
+  fa: {
+    noResult: 'موردی یافت نشد',
+  },
+  en: {
+    noResult: 'No Result',
+  },
+};

package/src/lib/core-table/core-table-row-selector-column/core-table-row-selector-column.component.html

@@ -0,0 +1,5 @@
+<core-checkbox
+  (contextmenu)="oncontextmenu($event)"
+  [checked]="checked"
+  (onChange)="change($event)"
+></core-checkbox>

package/src/lib/core-table/core-table-row-selector-column/core-table-row-selector-column.component.ts

@@ -0,0 +1,60 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Component({
+  selector: 'app-core-table-row-selector-column',
+  templateUrl: './core-table-row-selector-column.component.html',
+  styleUrls: ['./core-table-row-selector-column.component.scss'],
+})
+export class CoreTableRowSelectorColumnComponent {
+  checked = false;
+  @Input({ required: true }) data!: any;
+  @Input({ required: true }) column!: any;
+  @Input({ required: true }) allTableData!: any;
+  @Input({ required: false }) rowSelector: BehaviorSubject<any> | undefined =
+    undefined;
+
+  ngOnInit() {
+    this.rowSelector?.subscribe((data: any[]) => {
+      const index = data.findIndex((item) => item.id === this.data.id);
+      this.checked = index >= 0;
+    });
+  }
+
+  change(event: any) {
+    let rowSelector: any[] = this.rowSelector?.getValue();
+    if (event.srcElement.checked) {
+      rowSelector = [...rowSelector, this.data];
+    } else {
+      const index = rowSelector.findIndex((item) => this.data.id === item.id);
+      rowSelector.splice(index, 1);
+    }
+    this.rowSelector?.next(rowSelector);
+  }
+  async oncontextmenu(event: any) {
+    if (!this.column.data.key) return;
+    event.preventDefault();
+    let rowSelector: any[] = this.rowSelector?.getValue();
+    if (!event.srcElement.checked) {
+      const others = this.allTableData.filter(
+        (data: any) =>
+          data[this.column.data.key] === this.data[this.column.data.key]
+      );
+      for await (const row of others) {
+        const index = rowSelector.findIndex((item) => row.id === item.id);
+        if (!(index >= 0)) {
+          rowSelector = [...rowSelector, row];
+        }
+      }
+    } else {
+      const others = rowSelector.filter(
+        (item) => this.data[this.column.data.key] === item[this.column.data.key]
+      );
+      for await (const row of others) {
+        const index = rowSelector.findIndex((item) => row.id === item.id);
+        rowSelector.splice(index, 1);
+      }
+    }
+    this.rowSelector?.next(rowSelector);
+  }
+}

package/src/lib/core-table/core-table-shamsi-date/core-table-shamsi-date.component.html

@@ -0,0 +1,3 @@
+<span dir="ltr">{{
+  data[column.key] | shamsiDate : dateFormat | persianDigits
+}}</span>

package/src/lib/core-table/core-table-shamsi-date/core-table-shamsi-date.component.ts

@@ -0,0 +1,24 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { COLUMNS_TYPES } from '../../../utils/constants';
+
+@Component({
+  selector: 'app-core-table-shamsi-date',
+  templateUrl: './core-table-shamsi-date.component.html',
+  styleUrls: ['./core-table-shamsi-date.component.scss'],
+})
+export class CoreTableShamsiDateComponent {
+  @Input({ required: true }) data!: any;
+  @Input({ required: true }) column!: any;
+  @Output() onClick: EventEmitter<any> = new EventEmitter();
+  dateFormat = 'jYYYY/jMM/jDD HH:mm';
+
+  ngOnInit() {
+    if (this.column?.data?.dateFormat) {
+      this.dateFormat = this.column.data.dateFormat;
+    }
+  }
+
+  get columnsTypes() {
+    return COLUMNS_TYPES;
+  }
+}

package/src/lib/core-table/core-table-status-active-column/core-table-status-active-column.component.html

@@ -0,0 +1,3 @@
+<b [ngClass]="data[column.key] ? 'active' : 'deActive'">
+  {{ data[column.key] ? "بلی" : "خیر" }}
+</b>

package/src/lib/core-table/core-table-status-active-column/core-table-status-active-column.component.scss

@@ -0,0 +1,14 @@
+.active {
+  background: #d9f8eb;
+  color: #00894f;
+  border-radius: 16px;
+  padding: 2px 12px 2px 12px;
+  font-size: smaller;
+}
+.deActive {
+  color: #ac5a2b;
+  background: #fde6d8;
+  border-radius: 16px;
+  padding: 2px 12px 2px 12px;
+  font-size: smaller;
+}

package/src/lib/core-table/core-table-status-active-column/core-table-status-active-column.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-core-table-status-active-column',
+  templateUrl: './core-table-status-active-column.component.html',
+  styleUrls: ['./core-table-status-active-column.component.scss'],
+})
+export class CoreTableStatusActiveColumnComponent {
+  @Input({ required: true }) data: any;
+  @Input({ required: true }) column!: any;
+  ngOnInit(): void {
+    
+  }
+}

package/src/lib/core-table/core-table-status-column/core-table-status-column.component.html

@@ -0,0 +1,3 @@
+<b [ngClass]="data[column.key] ? 'active' : 'deActive'">
+  {{ data[column.key] ? "فعال" : "غیر فعال" }}
+</b>