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/vacation-rule/home/home.component.html

126 lines
4.1 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<app-generic-header
showBack="true"
[headerText]="'vacation-rule,vacationRule' | translate">
</app-generic-header>
<ion-content class="colorBG" padding>
<!-- <div #containerDiv id="containerDiv"> -->
<!-- </div> -->
<!-- <div style="padding: 0 10px;" [innerHTML]='"vacation-rule, tip" | translate'></div> -->
<!-- <ion-card *ngFor="let item of GetVacationRulesList; let i = index;">
<ion-card-header class="boxHdr">
<ion-grid no-padding>
<ion-row class="hrTitle" nowrap>
<ion-col size="8">
<ion-text style="font-size: larger;"><b>{{'vacation-rule, ruleInfo' | translate}}</b></ion-text>
</ion-col>
<ion-col size="2">
<button class="btnBack" ion-button (click)="deleteFunc(i)">
<img class="imgSize" src="../assets/imgs/delete.png"></button>
</ion-col>
<ion-col size="2">
<button class="btnBack" ion-button (click)="updateFunc(i)">
<img class="imgSize" src="../assets/imgs/edit.png"></button>
</ion-col>
</ion-row>
</ion-grid>
</ion-card-header>
<ion-card-content>
<ion-grid>
<div>
<ion-row>
<ion-col class="colBold">
<label for="">{{'vacation-rule, ruleName' | translate}}</label>
</ion-col>
<ion-col>
<label for=""> {{item.RULE_NAME}}</label>
</ion-col>
</ion-row>
</div>
<ion-row>
<ion-col class="colBold">
<label for="">{{'vacation-rule, itemType' | translate}}</label>
</ion-col>
<ion-col>
<label for=""> {{item.ITEM_TYPE_DISPLAY_NAME}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="colBold">
<label for="">{{'vacation-rule, notification' | translate}}</label>
</ion-col>
<ion-col>
<label for=""> {{item.NOTIFICATION_DISPLAY_NAME}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="colBold">
<label for="">{{'vacation-rule, status' | translate}}</label>
</ion-col>
<ion-col>
<label for=""> {{item.RULE_STATUS}}</label>
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
-->
<ion-list class="listVR">
<!-- Multi-line sliding item with icon options on both sides -->
<ion-item-sliding class="itemVR" *ngFor="let item of GetVacationRulesList; let i = index;">
<ion-item lines="none" >
<ion-label>
<ion-badge [ngClass]=" direction === 'rtl' ? 'end-badge' : 'start-badge'" slot="end" color="danger" class="main-badge">{{notBadge}}</ion-badge>
<p [ngClass]="item.RULE_STATUS === 'Inactive' || item.RULE_STATUS === 'غير ساري' ? 'red-status' : 'green-status' ">{{item.RULE_STATUS}}</p><br/>
<p class="textBold" > {{item.RULE_NAME}} | {{item.ITEM_TYPE_DISPLAY_NAME}}</p><br/>
<p class="label">{{item.BEGIN_DATE | dateString }} - {{item.END_DATE | dateString}}</p>
<!-- <br/>
<p class="createdOn">Created on:</p><br/> -->
</ion-label>
</ion-item>
<ion-item-options side="start">
<ion-item-option class="optionBtn" (click)="deleteFunc(i)">
<img class="imgSize" src="../assets/imgs/delete-circle.png">
</ion-item-option>
<ion-item-option class="optionBtn" (click)="updateFunc(i)">
<img class="imgSize" src="../assets/imgs/update-circle.png">
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
<div class="fixed-shift-timer" >
<fab-button [type]="add" (trigger)="Vacation_Type()"></fab-button>
<!-- <page-trailer [small] = "true"></page-trailer> -->
</div>
<ion-footer class="colorBG">
<!-- <div class="centerDiv">
<ion-button class="footer-button" color="customnavy" ion-button (click)="Vacation_Type()">
{{'vacation-rule, createRule' | translate}}</ion-button>
</div> -->
</ion-footer>