79214173

Date: 2024-11-22 08:28:08
Score: 1
Natty:
Report link
    <div class="container-fluid mt-5">
      <div class="table-responsive shadow">
        <table class="table  table-bordereless mb-0">
          <thead class="table-head">
            <tr>
              @for (head of thead; track head.displayName) {
              <th [class]="head.thClass" [ngClass]="{ 'pointer': head?.sortable }" [style]="head.thStyle">
                @switch (head.elementType)
                {
                <!-- #region Text -->
                @case ('text') {
                <span [id]="head?.id" (click)="head?.event == 'click'? eventTriggered($event, head.displayName): '' "
                  [class]="head?.class" [style]="head?.style">
                  @if (head?.sortable) {
                  <i class="fa-solid fa-sort"></i>
                  }
                  {{head.displayName}}
                </span>
                }
                <!-- #endregion -->
    
                <!-- #region innerHTML -->
                @case ('innerHTML') {
                <span (click)="head?.event === 'click' ? eventTriggered($event,head.displayName) : ''"
                  [innerHTML]="head.displayName" [id]="head?.id" [class]="head?.class" [style]="head?.style">
                </span>
                }
                <!-- #endregion -->
    
                <!-- #region input -->
                @case ('input') {
                <input [type]="head?.inputType" [id]="head?.id" [class]="head?.class" [style]="head?.style"
                  (click)="head?.event === 'click' ? eventTriggered($event,head.displayName,'click') : ''"
                  (change)="head?.event === 'change' ? eventTriggered($event,head.displayName,'change') : ''">
                <label [for]="head?.id" [class]="head?.class" [innerHTML]="head?.inputLabel"></label>
                }
                <!-- #endregion -->
    
                <!-- #region icon -->
                @case ('icon') {
                <button class="btn border-0" [id]="head?.id" [style]="head?.style"
                  (click)="head.event === 'click' ? eventTriggered($event,head.displayName):''">
                  <i [class]="head?.iconClass"></i>
                </button>
                }
                @case ('iconWithText') {
                <button class="btn border-0" [id]="head?.id" [style]="head?.style"
                  (click)="head.event === 'click' ? eventTriggered($event,head.displayName):''">
                  <i [class]="head?.iconClass"></i>
                </button>
                <span>{{head.iconText}}</span>
                }
                <!-- #endregion -->
                }
              </th>
              }
            </tr>
          </thead>
          <tbody>
            @for (data of dataArr | paginate:{itemsPerPage: pagination.pageSize , currentPage: pagination.page , totalItems:
            pagination.totalItems}; track data?.id;) {
            <tr>
              @for (body of tbody; track $index; ) {
              <td [style]="body?.tdStyle" [class]="body.tdClass"
                [ngClass]="{'pointer':body?.routerLink || body?.clickFunction}"
                (click)="(body?.clickFunction && body.parameter) ? eventTriggered($event,data[body.parameter],'click') : ''"
                [routerLink]="body?.routerLink">
    
                @switch (body.elementType) {
    
                <!-- #region Text -->
                @case ('text') {
                <span [class]="body?.class" [style]="body?.style" [id]="body?.id" 
                [pTooltip]="data[body.attrName]?.length >=40 ? data[body.attrName] : ''" tooltipPosition="top">
                  {{data[body.attrName]?.slice(0,40)}}
                </span>
                @if (data[body.attrName]?.length >= 40) {
                  <span>...</span>
                }
                }
                <!-- #endregion -->
    
                <!-- #region Serial No -->
                @case ('serialNo') {
                <span [class]="body?.class" [style]="body?.style" [id]="body?.id">
                  {{($index + 1 ) }}
    
                </span>
                }
                <!-- #endregion -->
    
                <!-- #region input -->
                @case ('input') {
                <input [type]="body?.inputType" [class]="body?.inputClass"
                  [id]="body.inputId ? 'id-'+data[body.inputId] : 'id'+body.attrName"
                  (click)="body?.event === 'click' ? eventTriggered($event,(body.parameter ? data[body.parameter]:data[body.attrName]),body.action ? body.action : 'click') : ''"
                  (change)="body?.event === 'change' ? eventTriggered($event,(body.parameter ? data[body.parameter] : data[body.attrName]),body.action ? body.action : 'change'):''">
                @if (body.inputLabel) {
                <label [for]="body.inputId ? body.inputId : 'id'+body.attrName">{{body.inputLabel}}</label>
                }
                }
                <!-- #endregion -->
    
                <!-- #region innerHTML -->
                @case ('innerHTML') {
                <span [innerHTML]="body.attrName ? data[body.attrName] : body?.innerHTML" [class]="body?.class"
                  [style]="body?.style" [id]="body?.id"
                  (click)="body?.event === 'click' ? eventTriggered($event,(body.parameter ? data[body.parameter] : data[body.attrName])) : ''">
                </span>
                }
                <!-- #endregion -->
    
                <!-- #region Dropdown -->
                @case ('dropdown') {
                <div class="dropdown">
                  <button class="btn p-0 px-3 border-0" data-bs-toggle="dropdown">
                    <i class="fa-solid fa-ellipsis-vertical"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-overflow">
                    @for (dd of body?.dropdownData; track dd.content) {
                    <li>
                      <span class="dropdown-item pointer" [attr.data-bs-toggle]="dd.modelId ? 'modal' : ''"
                        [attr.data-bs-target]="dd.modelId ? '#'+dd.modelId : ''"
                        [innerHTML]="(dd.icon ? iconArr[dd['icon']] : '') +'&nbsp;&nbsp;'+dd?.content"
                        (click)="eventTriggered($event,data[dd.parameter],dd?.icon+(body?.attrName ? '-' +body.attrName : ''))"></span>
                    </li>
                    }
                  </ul>
                </div>
                }
                <!-- #endregion -->
    
                <!-- #region Icon -->
                @case ('icon') {
                <button class="btn border-0" [id]="body?.id" [style]="body?.style"
                  [attr.data-bs-toggle]="body.modelId ? 'modal' : ''"
                  [attr.data-bs-targrt]="body.modelId ? '#'+body.modelId : ''"
                  (click)="body?.event === 'click' ? eventTriggered($event,body.parameter && data[body.parameter],'click '+body.attrName) : ''"
                  (dblclick)="body?.event == 'dblclick' ? eventTriggered($event,body.parameter && data[body.parameter],'dblclick'+body.attrName) : ''">
                  <i [class]="body?.iconClass"></i>
                </button>
                }
                @case ('iconWithText') {
                <button class="btn border-0" [id]="body?.id" [style]="body?.style"
                  [attr.data-bs-toggle]="body.modelId ? 'modal' : ''"
                  [attr.data-bs-targrt]="body.modelId ? '#'+body.modelId : ''"
                  (click)="body?.event === 'click' ? eventTriggered($event,body.parameter && data[body.parameter],'click'+body.attrName) : ''"
                  (dblclick)="body?.event == 'dblclick' ? eventTriggered($event,body.parameter && data[body.parameter],'dblclick'+body.attrName) : ''">
                  <i [class]="body?.iconClass"></i>
                </button>
                <span>{{body?.iconText}}</span>
                }
                <!-- #endregion -->
    
                <!-- #region Select -->
                @case ('select') {
                <select [class]="body?.class" [style]="body?.style"
                  [id]="body?.id+'_'+(body.parameter ? data[body.parameter] : '')"
                  (change)="eventTriggered($event,body.parameter ? data[body.parameter] : '','change')">
                  @for (option of body?.optionArr; track option) {
                  <option [value]="body.optionValue ? option[body.optionValue] : option"
                    [selected]="body.selecterOption && body.optionValue ? data[body.selecterOption] == option[body.optionValue] : false  ">
                    {{body.optionLabel ? option[body.optionLabel] : option}}
                  </option>
                  }
                </select>
                }
                <!-- #endregion -->
    
                <!-- #region Conditional -->
                @case ('conditional') {
                <span [class]="body?.class" [style]="body?.style">
                  @if (data[body.attrName] == body.condition) {
                  <span [innerHTML]="body?.trueStatement"></span>
                  }@else {
                  <span [innerHTML]="body?.falseStatement"></span>
                  }
                </span>
                }
                <!-- #endregion -->
                }
              </td>
              }
            </tr>
            }
          </tbody>
        </table>
      </div>
      <div class="table-bottom">
        <div class="row align-items-center mt-3 px-3">
          <div class="col-lg-3">
            <span>
              &nbsp;Displaying
              {{ ( ( pagination.page - 1 ) * ( pagination.pageSize ) ) + 1 }}
              to
              {{ ( ( pagination.page - 1 ) * ( pagination.pageSize ) + (pagination.pageSize) >
              pagination.totalItems )
              ? pagination.totalItems
              : ( pagination.page - 1 ) * ( pagination.pageSize ) + (pagination.pageSize) }}
              of {{ pagination.totalItems }}
            </span>
          </div>
          <div class="col-lg-9 text-end">
            <pagination-controls (pageChange)="changePage($event)" previousLabel="" nextLabel="">
            </pagination-controls>
          </div>
        </div>
      </div>
    </div>

   <!-- #region typescript -->

type Thead = {
  displayName: string;
  sortable?: boolean;
  sortItem?: string;
  thClass: string | '';
  thStyle?: string;
  inputClass?: string;
  inputId?: string;
  iconClass?: string;
  class?: string;
  id?: string;
  style?: string;
  // for elements and events
  elementType: Exclude<typeElement, 'serialNo' | 'conditional' | 'dropdown'>;
  iconText?: string;
  inputType?: string;
  inputLabel?: string;
  event?: typeEvent;
  action?: string;
};

type Tbody = {
  attrName: string;
  tdClass: string | '';
  tdStyle?: string;
  inputClass?: string;
  inputId?: string;
  iconClass?: string;
  class?: string;
  id?: string;
  style?: string;
  innerHTML?: string;

  //for elements and events
  elementType: typeElement;
  iconText?: string;
  inputType?: string;
  inputLabel?: string;
  event?: typeEvent;
  modelId?: string;

  //for routers and parameters
  routerLink?: string;
  clickFunction?: string;
  parameter?: string;
  action?: string;

  //for dropdown
  dropdownData?: typeDropdown[];

  //for conditional
  condition?: unknown;
  trueStatement?: unknown;
  falseStatement?: unknown;

  //for select
  optionArr?: any[];
  optionValue?: string;
  optionLabel?: string;
  selecterOption?: string;
};

type typeElement =
  | 'input'
  | 'icon'
  | 'text'
  | 'serialNo'
  | 'iconWithText'
  | 'innerHTML'
  | 'dropdown'
  | 'conditional'
  | 'select';

type typeEvent = 'click' | 'change' | 'input' | 'dblclick';
type TriggeredEvent = { event: Event; action?: string; parameter: string };
type typeDropdown = {
  icon?: string;
  content: string;
  parameter: string;
  modelId?: string;
};

type Pagination = {
  totalItems: number;
  page: number;
  pageSize: number;
  optimization: boolean;
  getPagination?: boolean;
};

type PaginationOutput = {
  page: number;
  pageSize: number;
};

export { Thead, Tbody, TriggeredEvent, Pagination, PaginationOutput };

this is a custom table i created how but the $index serial number is not working how do i fix it
Reasons:
  • Blacklisted phrase (1): how do i
  • Long answer (-1):
  • Has code block (-0.5):
  • Unregistered user (0.5):
  • Low reputation (1):
Posted by: user28428859