primekit 1.0.11 → 1.0.13

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

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