You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
mohemm_srca/Mohem/src/app/pending-transaction/home/home.component.html

103 lines
4.5 KiB
HTML

<ion-content>
<div class="head-title">
<app-generic-header showImage="false" showBack="true" [headerText]="'general,pending-transaction' | translate">
</app-generic-header>
</div>
<div class="header"></div>
<div class="bottom"></div>
<div #containerDiv id="containerDiv">
<div class="search-header" *ngIf="!transactionDetails">
<ion-row class="ion-justify-content-center">
<ion-col [size]="11">
<div [ngClass]=" direction === 'en' ? 'custom-text-area-element Field-en' : 'custom-text-area-element Field-ar'" >
<label class="label" position='floating' class="colBold requiredClass">{{ 'general,select' | translate}} </label>
<select name="selectAbsenceType" class="label-Select" #selectAbsenceType="ngModel" [(ngModel)]="selectedTransaction" required>
<option value="noType" selected hidden selected><p>{{ts.trPK('absenceList','selectType')}}</p></option>
<option *ngFor="let transaction of transactions" [value]="transaction.FUNCTION_ID">{{ transaction.FUNCTION_PROMPT}} </option>
</select>
</div>
<!-- </ion-item> -->
</ion-col>
</ion-row>
<div class="date-container">
<ion-row class="ion-justify-content-center">
<ion-col [size]="6">
<ion-item [ngClass]=" direction === 'en' ? 'custom-text-area-element Field-en padding_date' : 'custom-text-area-element padding_date Field-ar'" >
<div class="date-time-icon date-primary"> <ion-icon name="calendar" class="date-icon"></ion-icon></div>
<ion-label>{{ 'general,from-date' | translate}}</ion-label>
<ion-datetime
display-format="DD/MM/YYYY"
[min]="1900"
[max]="2100"
[(ngModel)]="dateFrom"
[doneText]="'general,done' | translate"
[cancelText]="'general,cencel' | translate"
></ion-datetime>
</ion-item>
</ion-col>
<ion-col [size]="6">
<ion-item [ngClass]=" direction === 'en' ? 'custom-text-area-element padding_date Field-en' : 'custom-text-area-element padding_date Field-ar'" >
<div class="date-time-icon date-primary"> <ion-icon class="date-icon" name="calendar"></ion-icon></div>
<ion-label>{{ 'general,to-date' | translate}}</ion-label>
<ion-datetime
placeholder="Select"
display-format="DD/MM/YYYY"
[min]="1900"
[max]="2100"
[(ngModel)]="dateTo"
[doneText]="'general,done' | translate"
[cancelText]="'general,cencel' | translate"
></ion-datetime>
</ion-item>
</ion-col>
</ion-row>
</div>
</div>
<div class="data-content">
<div class="no-dataDiv"
*ngIf="transactionDetails && transactionDetails.length==0">
<!-- <div class="no-dataDiv"> -->
<ion-row>
<img class="empty-data" src="../assets/imgs/box.png" />
</ion-row>
<h4> {{'general, noData' | translate}}</h4>
</div>
</div>
<div *ngIf="transactionDetails && transactionDetails.length>0" class="transaction-list">
<ion-card *ngFor="let transaction of transactionDetails">
<div [ngClass]="direction ==='en'? 'date-en':'date-ar'">{{transaction.CREATION_DATE}}</div>
<ion-label class="ion-text-wrap">
<ion-text color="primary">
<p class="display-created bold" >{{'transaction, created-for' | translate}}</p>
<p class="display-created bold padding">{{transaction.TRANSACTION_CREATED_FOR}}</p>
</ion-text>
<ion-text color="secondary">
<div class="">
<p class="color-black display-inline">{{'transaction, request-type' | translate}}</p>
<p class="display-inline red">{{transaction.REQUEST_TYPE}}</p>
</div>
</ion-text>
</ion-label>
</ion-card>
</div>
</div>
</ion-content>
<ion-footer>
<div class="centerDiv">
<ion-button *ngIf="!transactionDetails" class="footer-button" style="background: var(--newgreen)!important;border-radius: 10px; --background: transparent; width:80%; --border-radius: 10px;" ion-button [disabled]="!isValid()" (click)="getPendingRequestDetails()">
{{'general, submit' | translate}}</ion-button>
<ion-button *ngIf="transactionDetails && transactionDetails.length>0" class="footer-button" style="background: var(--newgreen)!important;border-radius: 10px; --background: transparent; width:80%; --border-radius: 10px;" ion-button (click)="transactionDetails=null">
{{'general, reset' | translate}}</ion-button>
</div>
</ion-footer>