primekit 1.0.9 → 1.0.10

package/src/lib/lib/atomix-table/atomix-table.component.html

@@ -0,0 +1,647 @@
+<atomix-snackbar></atomix-snackbar>
+<atomix-card>
+  <p-table
+    #dt1
+    [columns]="cols"
+    [reorderableColumns]="true"
+    [value]="rows"
+    [lazy]="true"
+    (onPage)="onPage($event)"
+    [(selection)]="selectedTableRows"
+    [selectionMode]="enableMultiselect ? 'multiple' : 'single'"
+    [metaKeySelection]="!enableMultiselect"
+    [totalRecords]="enablePaginator ? totalRecords : rows.length"
+    [tableStyle]="{ 'min-width': '50rem' }"
+    (onRowSelect)="onRowSelect()"
+    (onRowReorder)="onRowReorder($event)"
+    (onRowUnselect)="onRowUnselect()"
+    (onHeaderCheckboxToggle)="onCheckboxSelect()"
+    (onFilter)="filterResults($event)"
+    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
+    dataKey="id"
+    styleClass="p-datatable-sm"
+    [customSort]="true"
+    [scrollable]="true"
+    [scrollHeight]="'68vh'"
+    [loading]="isLoading"
+    [showLoader]="false"
+  >
+    <ng-template pTemplate="header" let-columns>
+      <tr>
+        <th *ngIf="enableMultiselect && rows.length > 0 && !isLoading">
+          <p-checkbox
+            [(ngModel)]="isAllSelected"
+            [value]="isAllSelected"
+            [binary]="true"
+            inputId="binary"
+            (onChange)="toggleAllRows($event)"
+            class="lib-table-header-checkbox"
+          >
+            <ng-template pTemplate="icon">
+              <i
+                [class]="
+                  isAnyRowSelected()
+                    ? 'pi pi-minus'
+                    : isAllSelected
+                      ? 'pi pi-check'
+                      : ''
+                "
+              ></i>
+            </ng-template>
+          </p-checkbox>
+        </th>
+        <th *ngIf="enableReorderableRow && !isLoading"></th>
+        <th *ngIf="enableExpandableRow && !isLoading"></th>
+
+        <!-- Reorder logic -->
+        <th
+          *ngFor="let col of columns"
+          pReorderableColumn
+          (click)="customSort(col.field)"
+        >
+          <span class="header-content icon-container">
+            <i
+              [class]="
+                sortBy === col.field && orderBy === 'desc'
+                  ? 'pi pi-arrow-down table-sort-icon'
+                  : 'pi pi-arrow-up table-sort-icon'
+              "
+              [ngClass]="
+                sortBy === col.field &&
+                (orderBy === 'desc' || orderBy === 'asc')
+                  ? 'active-sort-column'
+                  : 'inactive-sort-column'
+              "
+              *ngIf="isEnableSorting"
+            ></i>
+
+            <span class="header-content-text">{{ col.name }}</span>
+          </span>
+          <p-columnFilter
+            *ngIf="
+              enableColumnFilters &&
+              !(col?.filterDisabled ?? false) &&
+              !(col?.hideFilter ?? false) &&
+              !col?.filterByDropdown &&
+              !col?.filterByDate &&
+              !col?.filterByDateRange
+            "
+            type="text"
+            [field]="col.field"
+            display="menu"
+            [showMatchModes]="true"
+            [showOperator]="!(col.hideAdvancedFilters ?? false)"
+            [showClearButton]="true"
+            [maxConstraints]="col.hideAdvancedFilters ? 1 : 2"
+            [matchModeOptions]="
+              col.hideAdvancedFilters
+                ? [
+                    { label: 'Equals', value: 'equals' },
+                    { label: 'Not Equals', value: 'notEquals' },
+                  ]
+                : undefined
+            "
+          >
+          </p-columnFilter>
+          <p-columnFilter
+            *ngIf="
+              enableColumnFilters &&
+              !(col?.filterDisabled ?? false) &&
+              !(col?.hideFilter ?? false) &&
+              col?.filterByDropdown
+            "
+            [field]="col.field"
+            matchMode="equals"
+            display="menu"
+            [showMatchModes]="true"
+            [showOperator]="!(col.hideAdvancedFilters ?? false)"
+            [showClearButton]="true"
+            [maxConstraints]="col.hideAdvancedFilters ? 1 : 2"
+            [matchModeOptions]="
+              col.hideAdvancedFilters
+                ? [
+                    { label: 'Equals', value: 'equals' },
+                    { label: 'Not Equals', value: 'notEquals' },
+                  ]
+                : undefined
+            "
+          >
+            <ng-template
+              pTemplate="filter"
+              let-value
+              let-filter="filterCallback"
+            >
+              <p-dropdown
+                [ngModel]="value"
+                [filter]="true"
+                [options]="col.filterByDropdown"
+                (onChange)="filter($event.value)"
+                [placeholder]="'Select ' + col.name"
+              >
+                <ng-template let-option pTemplate="item">
+                  <span [class]="'customer-badge status-' + option.value">{{
+                    option.label
+                  }}</span>
+                </ng-template>
+              </p-dropdown>
+            </ng-template>
+          </p-columnFilter>
+          <p-columnFilter
+            *ngIf="
+              enableColumnFilters &&
+              !(col?.filterDisabled ?? false) &&
+              !(col?.hideFilter ?? false) &&
+              !col?.filterByDropdown &&
+              col?.filterByDate
+            "
+            [field]="col.field"
+            matchMode="dateIs"
+            display="menu"
+            [showMatchModes]="false"
+            [showOperator]="false"
+            [showClearButton]="true"
+            [maxConstraints]="1"
+          >
+            <ng-template
+              pTemplate="filter"
+              let-value
+              let-filter="filterCallback"
+            >
+              <p-calendar
+                [ngModel]="value"
+                (ngModelChange)="filter($event)"
+                dateFormat="mm/dd/yy"
+                [placeholder]="'Select ' + col.name"
+              ></p-calendar>
+            </ng-template>
+          </p-columnFilter>
+          <p-columnFilter
+            *ngIf="
+              enableColumnFilters &&
+              !(col?.filterDisabled ?? false) &&
+              !(col?.hideFilter ?? false) &&
+              !col?.filterByDropdown &&
+              !col?.filterByDate &&
+              col?.filterByDateRange
+            "
+            [field]="col.field"
+            matchMode="between"
+            display="menu"
+            [showMatchModes]="false"
+            [showOperator]="false"
+            [showClearButton]="true"
+            [maxConstraints]="1"
+          >
+            <ng-template
+              pTemplate="filter"
+              let-value
+              let-filter="filterCallback"
+            >
+              <atomix-daterange-calendar
+                [selectedDate]="value"
+                (dateRangeChange)="handleDateRangeFilter($event, filter)"
+                [placeholder]="'Select ' + col.name"
+                [disabled]="isLoading"
+                [maxDate]="col?.maxDate"
+                [minDate]="col?.minDate"
+                [defaultPreset]="col?.defaultPreset"
+                styleClass="atomix-overlay-calendar"
+                inputStyleClass="atomix-table-date-input"
+                [inline]="true"
+              ></atomix-daterange-calendar>
+            </ng-template>
+          </p-columnFilter>
+        </th>
+        <th
+          *ngIf="
+            enableEditButtons ||
+            enableDeleteButtons ||
+            actionButtonConfig.enabled
+          "
+        ></th>
+        <th *ngIf="showActionsColumn && !isLoading">
+          <div class="header-content" style="margin-left: 0.5rem">
+            <span class="header-content-text">Actions</span>
+          </div>
+        </th>
+      </tr>
+    </ng-template>
+
+    <ng-template pTemplate="loadingbody" let-columns="columns">
+      <tr *ngFor="let record of [].constructor(10); let i = index">
+        <ng-container *ngFor="let item of cols">
+          <td>
+            <p-skeleton width="100px" height="2rem"></p-skeleton>
+          </td>
+        </ng-container>
+      </tr>
+    </ng-template>
+    <!--when loading state -->
+
+    <ng-template pTemplate="emptymessage">
+      <tr>
+        <td colspan="100%" class="empty-table-container">
+          <div class="empty-table-content">
+            <svg
+              width="200px"
+              height="160px"
+              viewBox="0 0 200 160"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              class="empty-table-image"
+            >
+              <title>Empty Table</title>
+              <defs>
+                <linearGradient
+                  x1="50%"
+                  y1="0%"
+                  x2="50%"
+                  y2="100%"
+                  id="linearGradient-1"
+                >
+                  <stop stop-color="#E2E8F0" offset="0%"></stop>
+                  <stop stop-color="#CBD5E1" offset="100%"></stop>
+                </linearGradient>
+              </defs>
+              <g
+                id="Empty-Table"
+                stroke="none"
+                stroke-width="1"
+                fill="none"
+                fill-rule="evenodd"
+              >
+                <rect
+                  id="Table-Base"
+                  fill="url(#linearGradient-1)"
+                  x="20"
+                  y="100"
+                  width="160"
+                  height="20"
+                  rx="4"
+                ></rect>
+                <rect
+                  id="Table-Top"
+                  fill="#F1F5F9"
+                  x="30"
+                  y="40"
+                  width="140"
+                  height="60"
+                  rx="4"
+                ></rect>
+                <rect
+                  id="Table-Shadow"
+                  fill="#94A3B8"
+                  opacity="0.2"
+                  x="20"
+                  y="120"
+                  width="160"
+                  height="6"
+                  rx="2"
+                ></rect>
+                <g id="No-Data" transform="translate(50, 55)">
+                  <rect
+                    id="Cell-1"
+                    fill="#E2E8F0"
+                    x="0"
+                    y="0"
+                    width="100"
+                    height="8"
+                    rx="2"
+                  ></rect>
+                  <rect
+                    id="Cell-2"
+                    fill="#E2E8F0"
+                    x="0"
+                    y="16"
+                    width="100"
+                    height="8"
+                    rx="2"
+                  ></rect>
+                  <rect
+                    id="Cell-3"
+                    fill="#E2E8F0"
+                    x="0"
+                    y="32"
+                    width="60"
+                    height="8"
+                    rx="2"
+                  ></rect>
+                </g>
+                <g id="Magnifying-Glass" transform="translate(120, 30)">
+                  <circle
+                    id="Glass"
+                    stroke="#64748B"
+                    stroke-width="4"
+                    fill="#F8FAFC"
+                    cx="15"
+                    cy="15"
+                    r="15"
+                  ></circle>
+                  <line
+                    x1="26"
+                    y1="26"
+                    x2="40"
+                    y2="40"
+                    id="Handle"
+                    stroke="#64748B"
+                    stroke-width="4"
+                    stroke-linecap="round"
+                  ></line>
+                  <circle
+                    id="Reflection"
+                    fill="#E2E8F0"
+                    cx="10"
+                    cy="10"
+                    r="4"
+                  ></circle>
+                </g>
+              </g>
+            </svg>
+            <div class="empty-table-message">
+              {{ emptyStateMessage || 'No records found' }}
+            </div>
+          </div>
+        </td>
+      </tr>
+    </ng-template>
+
+    <ng-template
+      pTemplate="body"
+      let-rowData
+      let-columns="columns"
+      let-expanded="expanded"
+      let-index="rowIndex"
+    >
+      <ng-template
+        [ngTemplateOutlet]="rowDataOutlet || default"
+        [ngTemplateOutletContext]="{
+          $implicit: rowData,
+          index,
+          columns,
+        }"
+      ></ng-template>
+      <ng-content select="[body]"> </ng-content>
+      <ng-template #default>
+        <tr
+          *ngIf="!isLoading"
+          [pSelectableRow]="rowData"
+          [pReorderableRow]="index"
+        >
+          <td *ngIf="enableMultiselect && rows.length > 0 && !isLoading">
+            <p-checkbox
+              [(ngModel)]="rowData.isSelected"
+              [value]="rowData?.isSelected"
+              [binary]="true"
+              [pTooltip]="rowData?.tooltip"
+              inputId="binary"
+              (onChange)="singleCheckboxHandler($event, rowData)"
+            ></p-checkbox>
+          </td>
+          <td *ngIf="enableReorderableRow">
+            <span class="pi pi-bars" pReorderableRowHandle></span>
+          </td>
+
+          <td *ngIf="enableExpandableRow">
+            <button
+              type="button"
+              (click)="expandedRow.emit(rowData)"
+              pButton
+              pRipple
+              [pRowToggler]="rowData"
+              class="p-button-text p-button-rounded p-button-plain"
+              [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"
+              [disabled]="disableExpandWhenNoChildren && !hasChildRows(rowData)"
+            ></button>
+          </td>
+          <td *ngFor="let col of columns">
+            <i
+              class="pi pi-copy copy-icon"
+              title="Copy"
+              *ngIf="col.copyIcon === true && rowData[col.field]"
+              (click)="copyHandler($event, rowData[col.field])"
+            ></i>
+            <span class="table-text" *ngIf="!col.chip && !col.progress">{{
+              getRowDataValue(rowData, col.field, col.type) || '-'
+            }}</span>
+            <p-chip
+              [label]="rowData[col.field] | titlecase"
+              [styleClass]="getChipCss(rowData[col.field])"
+              *ngIf="
+                col.chip === true &&
+                rowData[col.field] !== null &&
+                rowData[col.field] !== '' &&
+                isString(rowData[col.field])
+              "
+              [title]="rowData[col.field] | titlecase"
+            >
+              <i
+                class="pi"
+                [ngClass]="getChipIcon(rowData[col.field])"
+                class="chip-icon"
+                *ngIf="col.chipIcon === true"
+              ></i>
+            </p-chip>
+            <div
+              *ngIf="
+                col.progress === true &&
+                rowData[col.field] !== null &&
+                rowData[col.field] !== ''
+              "
+              class="progress-container"
+            >
+              <div class="progress-bar-wrapper">
+                <p-progressBar
+                  [value]="rowData[col.field]"
+                  [showValue]="false"
+                ></p-progressBar>
+                <span class="progress-text-overlay"
+                  >{{
+                    rowData[col.field] !== undefined ? rowData[col.field] : 0
+                  }}%</span
+                >
+              </div>
+            </div>
+          </td>
+
+          <!-- actions -->
+          <td
+            *ngIf="
+              showActionsColumn && !isLoading && (rowData.showActions ?? true)
+            "
+            class="no-wrap"
+          >
+            <div class="download-cell-content action-buttons-container">
+              <ng-container *ngFor="let action of actionButtonsData">
+                <button
+                  pButton
+                  class="p-button-text"
+                  *ngIf="shouldShowActionButton(action, rowData)"
+                  [ngClass]="
+                    rowData.disabled && action.icon === 'pi pi-trash'
+                      ? 'trash-icon-style-disabled'
+                      : action.class
+                  "
+                  pButton
+                  [icon]="action.icon || ''"
+                  [disabled]="action.disabled || false"
+                  [pTooltip]="action.tooltip || ''"
+                  (click)="handleActionClick(action, rowData)"
+                ></button>
+              </ng-container>
+            </div>
+          </td>
+          <td *ngIf="rowData.showActions === false"></td>
+
+          <td
+            *ngIf="
+              enableEditButtons ||
+              enableDeleteButtons ||
+              actionButtonConfig.enabled
+            "
+          >
+            <button
+              expandedRow
+              *ngIf="enableEditButtons"
+              pButton
+              pRipple
+              icon="pi pi-pencil"
+              class="p-button-rounded p-button-success mr-2"
+              (click)="editRow.emit(rowData)"
+            ></button>
+            <button
+              *ngIf="enableDeleteButtons"
+              pButton
+              pRipple
+              icon="pi pi-trash"
+              class="p-button-rounded p-button-warning mr-2"
+              (click)="deleteRowConfirmation(rowData)"
+            ></button>
+            <button
+              *ngIf="actionButtonConfig.enabled"
+              pButton
+              pRipple
+              [icon]="actionButtonConfig.icon"
+              [class]="actionButtonConfig.class"
+              (click)="
+                actionButtonConfig.confirmation
+                  ? actionRowConfirmation(rowData)
+                  : actionRow.emit(rowData)
+              "
+            ></button>
+          </td>
+        </tr>
+      </ng-template>
+    </ng-template>
+    <ng-template pTemplate="rowexpansion" let-rowData>
+      <tr *ngIf="!isLoading">
+        <td colspan="40">
+          <div class="p-4">
+            <p-table [value]="rowData[secondaryRowsKey]" dataKey="id">
+              <ng-template pTemplate="header">
+                <tr class="child-row-header">
+                  <td *ngFor="let col of expandedColumns">
+                    {{ col.name }}
+                  </td>
+                  <td *ngIf="showExpandedActionsColumn">Actions</td>
+                </tr>
+              </ng-template>
+              <ng-template pTemplate="body" let-rowOrder>
+                <tr>
+                  <td *ngFor="let col of expandedColumns">
+                    <i
+                      class="pi pi-copy copy-icon"
+                      title="Copy"
+                      *ngIf="col.copyIcon === true && rowOrder[col.field]"
+                      (click)="copyHandler($event, rowOrder[col.field])"
+                    ></i>
+                    <span class="table-text" *ngIf="!col.chip">{{
+                      getRowDataValue(rowOrder, col.field, col.type || '') ||
+                        '-'
+                    }}</span>
+                    <p-chip
+                      [label]="rowOrder[col.field] | titlecase"
+                      [styleClass]="getChipCss(rowOrder[col.field])"
+                      *ngIf="
+                        col.chip === true &&
+                        rowOrder[col.field] !== null &&
+                        rowOrder[col.field] !== '' &&
+                        isString(rowOrder[col.field])
+                      "
+                      [title]="rowOrder[col.field] | titlecase"
+                    >
+                      <i
+                        class="pi"
+                        [class]="getChipIcon(rowOrder[col.field])"
+                        *ngIf="col.chipIcon === true"
+                      ></i>
+                    </p-chip>
+                  </td>
+                  <td *ngIf="showExpandedActionsColumn" class="no-wrap">
+                    <div class="download-cell-content action-buttons-container">
+                      <ng-container
+                        *ngFor="let action of childRowsActionButtonsData"
+                      >
+                        <button
+                          pButton
+                          class="p-button-text"
+                          *ngIf="shouldShowAction(action, rowOrder)"
+                          [ngClass]="
+                            rowOrder.disabled && action.icon === 'pi pi-trash'
+                              ? 'trash-icon-style-disabled'
+                              : action.class
+                          "
+                          [icon]="action.icon || ''"
+                          [disabled]="action.disabled || false"
+                          [pTooltip]="action.tooltip || ''"
+                          (click)="handleChildActionClick(action, rowOrder)"
+                        ></button>
+                      </ng-container>
+                    </div>
+                  </td>
+                </tr>
+              </ng-template>
+              <ng-template
+                pTemplate="emptymessage"
+                class="table-row-row-expansion"
+              >
+                <tr>
+                  <td
+                    [colSpan]="
+                      expandedColumns.length +
+                      (showExpandedActionsColumn ? 1 : 0)
+                    "
+                  >
+                    {{ emptyExpandableRowMessage }}
+                  </td>
+                </tr>
+              </ng-template>
+            </p-table>
+          </div>
+        </td>
+      </tr>
+    </ng-template>
+  </p-table>
+  <div class="pagination-container" *ngIf="showPagination">
+    <span class="mx-1 text-color table-text">Items per page: </span>
+    <p-dropdown
+      [options]="options"
+      optionLabel="label"
+      optionValue="value"
+      [(ngModel)]="size"
+      (onChange)="dropdownHandler($event)"
+      styleClass="pagination-dropdown"
+      appendTo="body"
+    />
+    <p-paginator
+      [first]="currentPage * size"
+      [rows]="size"
+      [totalRecords]="totalRecords"
+      (onPageChange)="handlePageChange($event)"
+      [showCurrentPageReport]="true"
+      currentPageReportTemplate="{first} - {last} of {totalRecords}"
+      [showPageLinks]="false"
+      [showFirstLastIcon]="false"
+    ></p-paginator>
+  </div>
+</atomix-card>