scb-tender-angular/src/app/_modules/auth/admin-home/admin-home.component.html

<div class="backImage">
<div class="container-responsive">


  
    
  
    <!-- <mat-progress-bar mode="indeterminate" color="warn"></mat-progress-bar> -->
    <!-- <br><br> -->
  
    <div class="container text-center">
      <div class="row">
        <div class="col-12">
          <div class="card-responsive">
            <div class="card-body-responsive">
              <div class="table-responsive">


                <ng-container >
                  <mat-card class="card">
                    <div class="top-bar">
                      <div class="top-left-float">
                        <span class="searchInputSpan">
                          <mat-icon style="margin-right: 3px;margin-left:-35px; transform: translateY(10px);">search</mat-icon>
                          <mat-form-field>
                              <input matInput placeholder="{{ 'search' | translate }}" style="width: fit-content;"
                              [(ngModel)]="searchTerm" (keyup)="search()"/>
                          </mat-form-field>
                      </span>
                      <!-- <button mat-raised-button class="addButton"  (click)="search()"> {{ 'go' | translate }}
                      </button>&nbsp; -->
                      <button mat-raised-button class="addButton"  (click)="reset()"> {{ 'clear' | translate }}
                      </button>
                      </div>
                  </div>
                  <br>
                  <br>
                  
                <mat-table [dataSource]="dataSource" style="min-width: 500px;display: table;" matSort matSortDisableClear="true" (matSortChange)="sortData($event)"
                  class="table">
  
                 
  
                  <ng-container matColumnDef="slno">
                    <th mat-header-cell  *matHeaderCellDef class="table-headers" style="width:80px">
                        {{ 'slno' | translate }}
                        <!-- <mat-icon>sort</mat-icon> -->
                    </th>
                    <td mat-cell *matCellDef="let element;let i = index" style="padding: 5px;" class="table-content">
                      {{i+1}}
                  </td>
                </ng-container>
  
                  <ng-container matColumnDef="title">
                      <th mat-header-cell mat-sort-header  *matHeaderCellDef class="table-headers" style="width:300px">
                          {{ 'title' | translate }}
                          <!-- <mat-icon>sort</mat-icon> -->
                      </th>
                      <td mat-cell *matCellDef="let element" style="padding: 5px;text-align: left;" class="table-content">
                        {{element?.title}}
                    </td>
                  </ng-container>
  
                  <ng-container matColumnDef="publishedDate">
                    <th mat-header-cell mat-sort-header *matHeaderCellDef class="table-headers "  >
                        {{ 'publishedDate' | translate }}
                        <!-- <mat-icon>sort</mat-icon> -->
                    </th>
                    <td mat-cell  *matCellDef="let element" style="padding: 5px;text-align: left;" class="table-content">
                      {{element?.publishDate| date:"YYYY-MM-dd"}}
                  </td>
                    <!-- <td mat-cell *matCellDef="let element" style="padding: 5px;" class="table-content">
                      <button mat-raised-button>edit</button>
                  </td> -->
                </ng-container>
  
                <ng-container matColumnDef="bidOpenDate">
                  <th mat-header-cell mat-sort-header *matHeaderCellDef class="table-headers" >
                      {{ 'bidOpenDate' | translate }}
                      <!-- <mat-icon>sort</mat-icon> -->
                  </th>
                  <td mat-cell  *matCellDef="let element" style="padding: 5px;text-align: left;" class="table-content">
                    {{element?.bidOpenDate| date:"YYYY-MM-dd"}}
                </td>
                  <!-- <td mat-cell *matCellDef="let element" style="padding: 5px;" class="table-content">
                    <button mat-raised-button>edit</button>
                </td> -->
              </ng-container>
  
                <ng-container matColumnDef="view">
                  <th mat-header-cell  *matHeaderCellDef class="table-headers"  >
                      {{ 'view' | translate }}
                      <!-- <mat-icon>sort</mat-icon> -->
                  </th>
                  <td mat-cell *matCellDef="let element" style="padding: 5px;" class="table-content">
                    <button style="padding: 0;" mat-button color="primary"
                        (click)="goToView(element.id)" [disabled]="false">
                        <svg xmlns="http://www.w3.org/2000/svg" height="1em" style="height: 18px;" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M320 464c8.8 0 16-7.2 16-16V160H256c-17.7 0-32-14.3-32-32V48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320zM0 64C0 28.7 28.7 0 64 0H229.5c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64z" fill="#424242"/></svg>

                    </button>
  
                </td>
              </ng-container>
  
                <!-- <ng-container matColumnDef="upload">
                  <th mat-header-cell  *matHeaderCellDef class="table-headers" style="width:80px">
                      {{ 'upload' | translate }}
                  </th>
                  <td mat-cell *matCellDef="let element" style="padding: 5px;" class="table-content">
                    <button style="padding: 0;" mat-button color="primary"
                        (click)="goToUpload(element.id)" [disabled]="false">
                        <mat-icon style="transform: translate(-12px,-2px);" [ngStyle]="{'color':'#353535'}">
                          cloud_upload
                        </mat-icon>
                    </button>
  
                </td>
              </ng-container> -->
  
                  <ng-container matColumnDef="loading">
                      <td mat-footer-cell *matFooterCellDef="" colspan="5">
                          {{ 'loadingData' | translate }}
                      </td>
                  </ng-container>
  
                  <ng-container matColumnDef="nodata">
                      <td mat-footer-cell *matFooterCellDef="" colspan="5">
                          {{ 'noDataToDisplay' | translate }}
                      </td>
                  </ng-container>
  
                  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                  <tr mat-footer-row *matFooterRowDef="['loading']" [ngClass]="{'hide': !loading}"></tr>
                  <tr mat-footer-row *matFooterRowDef="['nodata']" [ngClass]="{'hide': (!noData || loading)}"></tr>
  
              </mat-table>
  
              <mat-paginator #paginator [length]="pageLength" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"
              aria-label="Select page">
          </mat-paginator>
        </mat-card>
        </ng-container>
      </div>

                <!-- <table class="table table-bordered">
                  <thead class="table-dark">
                    <tr>
                      <th class="col-sm-1">#</th>
                      <th class="col-sm-6">TENDER NAME</th>
                      <th class="col-sm-1">REFERENCE ID</th>
                      <th class="col-sm-1">CLOSING DATE</th>
                      <th class="col-sm-1">BID OPEN DATE</th>
                      <th class="col-sm-1">VIEW</th>

                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let tender of tenderData; let i = index">
                      <td class="col-sm-1">{{ i + 1 }}</td>
                      <td class="col-sm-6 table-break-word">{{ tender.title }}</td>
                      <td class="col-sm-1 table-break-word">{{ tender.tenderRefNo }}</td>
                      <td class="col-sm-1 table-break-word">{{ tender.saleEndDate | date: 'dd-MM-yyyy' }}</td>
                      <td class="col-sm-1 table-break-word">{{ tender.bidOpenDate | date: 'dd-MM-yyyy' }}</td>
                      <td class="col-sm-1">
                        <button type="button" class="btn btn-outline-danger btn-sm" (click)="goToView(tender.id)"><i
                            class="bi bi-card-list"></i></button>
                      </td>
                    </tr>
                  </tbody>
                </table> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div><br><br>
    <!-- <div class="footer" >
        <footer id="footer" style="background-color: #48746e; padding: 70px 0; color: #ffffff; font-size: 16px; bottom: 0;" class="py-3">
          <div class="container">
            <div class="row">
              <div class="col-md-12 text-center">
                <p class="mb-0">&copy; <span style="font-weight: bolder;font-family: sans-serif;">Thrickodithanamscb 2023. </span>All Rights Reserved</p>
                <p class="mb-0">Designed by <a href="https://www.simssoftware.in/" style="color: #ffffff;">SiMS</a></p>
              </div>
            </div>
          </div>
        </footer>
        </div> -->
  
  </div>