fixing announsment design and add pageination, SMS page added label

enad-Q1
enadhilal 5 years ago
parent c145d7b60d
commit ed07f19848

@ -58,6 +58,8 @@
</ion-col> </ion-col>
</ion-row> </ion-row>
<div><p style="color: red; font-weight: bold; font-size: 10px; text-align: center;">{{'general,noOfTriesLogin' | translate}}</p></div>
</div> </div>
</ion-content> </ion-content>

@ -9,15 +9,13 @@
<div *ngFor="let item of announcementList; let i = index" <div *ngFor="let item of announcementList; let i = index"
[ngClass]="i>0 && !item.Open ? 'class-dev-close': 'class-dev-open'" [ngClass]="i>0 && !item.Open ? 'class-dev-close': 'class-dev-open'"
style="margin: 15px; background: white; border-radius: 10px;"> style="margin: 15px; background: white; border-radius: 10px;">
<ion-card *ngIf="i === 0 && !item.isOpen" (click)="toggleAnnouncement(item)" class="main-card-style"> <!-- <ion-card *ngIf="i === 0 && !item.isOpen" (click)="toggleAnnouncement(item)" class="main-card-style">
<img [src]="item.img" class="main-card-image"> <img [src]="item.img" class="main-card-image">
<ion-item class="main-card-item-list-style"> <ion-item class="main-card-item-list-style">
<ion-label class="main-card-label-style-all"> <ion-label class="main-card-label-style-all">
<p class="text-style item-list-first-date">{{item.date}}</p> <p class="text-style item-list-first-date">{{item.date}}</p>
<h2 class="text-style item-list-first-h" *ngIf="direction === 'en'">{{item.title_EN}}</h2> <h2 class="text-style item-list-first-h" *ngIf="direction === 'en'">{{item.title_EN}}</h2>
<h2 class="text-style item-list-first-h" *ngIf="direction === 'ar'">{{item.title_AR}}</h2> <h2 class="text-style item-list-first-h" *ngIf="direction === 'ar'">{{item.title_AR}}</h2>
<!-- <p class="text-style item-list-first-p" *ngIf="direction === 'en'"><span [innerHTML]="item.body_EN"></span></p> -->
<!-- <p class="text-style item-list-first-p" *ngIf="direction === 'ar'">{{item.body_AR}}</p> -->
</ion-label> </ion-label>
</ion-item> </ion-item>
</ion-card> </ion-card>
@ -36,9 +34,9 @@
<p *ngIf="direction === 'en'" class="card-style-p"><span [innerHTML]="item.body_EN"></span></p> <p *ngIf="direction === 'en'" class="card-style-p"><span [innerHTML]="item.body_EN"></span></p>
<p *ngIf="direction === 'ar'" class="card-style-p">{{item.body_AR}}</p> <p *ngIf="direction === 'ar'" class="card-style-p">{{item.body_AR}}</p>
</ion-card-content> </ion-card-content>
</ion-card> </ion-card> -->
<ion-item no-padding *ngIf="i > 0 && !item.isOpen && item.img" (click)="toggleAnnouncement(item)" lines='none' class="announcement-items"> <ion-item no-padding *ngIf="!item.isOpen && item.img" (click)="toggleAnnouncement(item)" lines='none' class="announcement-items">
<img [src]="item.img" [ngClass]="direction === 'en'? 'image-item-en': 'image-item-ar' "> <img [src]="item.img" [ngClass]="direction === 'en'? 'image-item-en': 'image-item-ar' ">
<ion-label style="margin: 5px; margin-top: -20px;"> <ion-label style="margin: 5px; margin-top: -20px;">
<h2 class="item-list-h" *ngIf="direction === 'en'">{{item.title_EN}}</h2> <h2 class="item-list-h" *ngIf="direction === 'en'">{{item.title_EN}}</h2>
@ -49,7 +47,7 @@
<p class="item-list-date-title">{{item.date}}</p> <p class="item-list-date-title">{{item.date}}</p>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item *ngIf="i > 0 && !item.isOpen && !item.img" (click)="toggleAnnouncement(item)" lines='none' class="announcement-items"> <ion-item *ngIf="!item.isOpen && !item.img" (click)="toggleAnnouncement(item)" lines='none' class="announcement-items">
<ion-label style="margin: 10px;"> <ion-label style="margin: 10px;">
<h2 class="item-list-h" *ngIf="direction === 'en'">{{item.title_EN}}</h2> <h2 class="item-list-h" *ngIf="direction === 'en'">{{item.title_EN}}</h2>
<p class="item-list-p-title" *ngIf="direction === 'en'"><span [innerHTML]="item.body_EN"></span></p> <p class="item-list-p-title" *ngIf="direction === 'en'"><span [innerHTML]="item.body_EN"></span></p>
@ -60,7 +58,7 @@
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-card *ngIf="i > 0 && item.isOpen" (click)="toggleAnnouncement(item)" style="margin: 0px;"> <ion-card *ngIf="item.isOpen" (click)="toggleAnnouncement(item)" style="margin: 0px;">
<ion-card-header style="background: transparent;"> <ion-card-header style="background: transparent;">
<ion-card-title style="font-size: 20px; margin: 5px;" *ngIf="direction === 'en'">{{item.title_EN}} <br> <ion-card-title style="font-size: 20px; margin: 5px;" *ngIf="direction === 'en'">{{item.title_EN}} <br>
<p style="font-size: 12px; color: gray;">{{item.date}}</p> <p style="font-size: 12px; color: gray;">{{item.date}}</p>
@ -86,3 +84,7 @@
</ion-infinite-scroll-content> </ion-infinite-scroll-content>
</ion-infinite-scroll> </ion-infinite-scroll>
</ion-content> </ion-content>
<!-- <ion-footer>
<ion-button (click)="loadData($event)"><ion-label><p>more</p></ion-label></ion-button>
</ion-footer> -->

@ -19,6 +19,9 @@ export class AnnouncementComponent implements OnInit {
public numberOfListLength = 10; public numberOfListLength = 10;
public announcememntCounter = this.numberOfListLength; public announcememntCounter = this.numberOfListLength;
@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll; @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
public pageSize = 1;
public pageLength = 0;
public lengthCounter = 5;
constructor( constructor(
public announcementService: AnnouncementService, public announcementService: AnnouncementService,
@ -53,10 +56,12 @@ export class AnnouncementComponent implements OnInit {
getAnnouncementListService() { getAnnouncementListService() {
let holdData; let holdData;
this.announcementService.getAnnouncementListService().subscribe((result: any) => { this.announcementService.getAnnouncementListService(this.pageSize).subscribe((result: any) => {
if (this.common.validResponse(result)) { if (this.common.validResponse(result)) {
holdData = JSON.parse(result.Mohemm_ITG_ResponseItem); holdData = JSON.parse(result.Mohemm_ITG_ResponseItem);
this.listOfAnnouncement = JSON.parse(holdData.result.data); this.listOfAnnouncement = JSON.parse(holdData.result.data);
console.log(this.listOfAnnouncement);
this.pageLength = this.listOfAnnouncement[0].TotalItems;
for (let i = 0; i < this.listOfAnnouncement.length; i++) { for (let i = 0; i < this.listOfAnnouncement.length; i++) {
this.listOfAnnouncement[i].Title_EN = this.listOfAnnouncement[i].Title_EN; this.listOfAnnouncement[i].Title_EN = this.listOfAnnouncement[i].Title_EN;
// this.listOfAnnouncement[i].Title_EN = this.listOfAnnouncement[i].Title_EN.replace(/\&nbsp;/g, ''); // this.listOfAnnouncement[i].Title_EN = this.listOfAnnouncement[i].Title_EN.replace(/\&nbsp;/g, '');
@ -82,23 +87,29 @@ export class AnnouncementComponent implements OnInit {
} }
this.arrList = this.arr; this.arrList = this.arr;
console.log(this.arrList);
console.log(this.listOfAnnouncement);
} }
}); });
} }
loadData(event) { loadData(event) {
let counter = this.numberOfListLength + this.announcememntCounter; // let counter = this.numberOfListLength + this.announcememntCounter;
setTimeout(() => { setTimeout(() => {
event.target.complete(); event.target.complete();
for(let i = this.announcememntCounter; i < counter; i++) { // for(let i = this.announcememntCounter; i < counter; i++) {
if(this.arrList[i]) { // if(this.arrList[i]) {
this.announcementList.push(this.arrList[i]); // this.announcementList.push(this.arrList[i]);
this.announcememntCounter ++; // this.announcememntCounter ++;
} // }
} // }
if (this.announcememntCounter >= this.arrList.length) { this.pageSize += 1;
if (this.lengthCounter >= this.pageLength) {
event.target.disabled = true; event.target.disabled = true;
} else {
this.getAnnouncementListService();
} }
this.lengthCounter += 5;
}, 500); }, 500);
} }

@ -17,10 +17,13 @@ export class AnnouncementService {
) { } ) { }
getAnnouncementListService(onError ?: any , oerrorLable ?: any) { getAnnouncementListService(pageNumber: number, onError ?: any , oerrorLable ?: any) {
const request = new AnnouncementRequest(); const request = new AnnouncementRequest();
this.authService.authenticateRequest(request); this.authService.authenticateRequest(request);
request.EmployeeNumber = request.P_USER_NAME; request.EmployeeNumber = request.P_USER_NAME;
request.ItgPageNo = pageNumber;
request.ItgPageSize = 5;
request.ItgAwarenessID = 0;
return this.con.post( return this.con.post(
AnnouncementService.getAnnouncemntList, AnnouncementService.getAnnouncemntList,
request, request,

@ -4,5 +4,8 @@ import { Request } from 'src/app/hmg-common/services/models/request';
export class AnnouncementRequest extends Request { export class AnnouncementRequest extends Request {
public TokenID: string; public TokenID: string;
public EmployeeNumber: string; public EmployeeNumber: string;
public ItgPageNo: number;
public ItgPageSize: number;
public ItgAwarenessID: number;
} }

Loading…
Cancel
Save