Merge branch 'MOHEMM-Q2-DEV' of https://gitlab.com/haroon6138/mohemmionic5 into sultan26April

MOHEMM-SFH-COLORS
Sultan Khan 4 years ago
commit bed5d7457e

@ -4,52 +4,61 @@
</app-generic-header>
<ion-content style="--background:#F4F4F4;">
<ion-searchbar (ionInput)="filterList($event)" style="--background: white"></ion-searchbar>
<ion-list style="background: #f4f4f4;">
<div *ngFor="let item of arrList; let i = index"
<ion-searchbar (ionInput)="filterList($event)" style="--background: white; margin-top: 10px; padding-bottom: 20px;"></ion-searchbar>
<ion-list style="background: #f4f4f4; margin-top: -8px !important;">
<div *ngFor="let item of announcementList; let i = index"
[ngClass]="i>0 && !item.Open ? 'class-dev-close': 'class-dev-open'"
style="background: white; margin: 20px; padding: 0px;">
<ion-card *ngIf="i === 0 && !item.isOpen" (click)="toggleAnnouncement(item)" style="margin: 0px;">
<img [src]="item.img" class="image-center">
<ion-item>
<ion-label>
<h2 class="text-style" *ngIf="direction === 'en'">{{item.title_EN}}</h2>
<h2 class="text-style" *ngIf="direction === 'ar'">{{item.title_AR}}</h2>
<p class="text-style" *ngIf="direction === 'en'">{{item.body_EN}}</p>
<p class="text-style" *ngIf="direction === 'ar'">{{item.body_EN}}</p>
<p class="text-style">{{item.date}}</p>
style="margin: 15px;">
<ion-card *ngIf="i === 0 && !item.isOpen" (click)="toggleAnnouncement(item)" class="main-card-style">
<img [src]="item.img" class="main-card-image">
<ion-item class="main-card-item-list-style">
<ion-label class="main-card-label-style-all">
<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 === 'ar'">{{item.title_AR}}</h2>
<p class="text-style item-list-first-p" *ngIf="direction === 'en'">{{item.body_EN}}</p>
<p class="text-style item-list-first-p" *ngIf="direction === 'ar'">{{item.body_EN}}</p>
</ion-label>
</ion-item>
</ion-card>
<ion-card *ngIf="i === 0 && item.isOpen" (click)="toggleAnnouncement(item)" style="margin: 0px;">
<ion-card *ngIf="i === 0 && item.isOpen" (click)="toggleAnnouncement(item)" style="margin: 0px; background: white;">
<ion-card-header style="background: transparent;">
<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>
<ion-card-title *ngIf="direction === 'en'"><h2 class="card-style-h">{{item.title_EN}}</h2><br>
<p class="card-style-date">{{item.date}}</p>
</ion-card-title>
<ion-card-title style="font-size: 20px; margin: 5px;" *ngIf="direction === 'ar'">{{item.title_AR}} <br>
<p style="font-size: 12px; color: gray;">{{item.date}}</p>
<ion-card-title *ngIf="direction === 'ar'" class="card-style-h">{{item.title_AR}} <br>
<p class="card-style-date">{{item.date}}</p>
</ion-card-title>
<img [src]="item.img" class="image-center">
</ion-card-header>
<ion-card-content>
<p *ngIf="direction === 'en'">{{item.body_EN}}</p>
<p *ngIf="direction === 'ar'">{{item.body_AR}}</p>
<p *ngIf="direction === 'en'" class="card-style-p">{{item.body_EN}}</p>
<p *ngIf="direction === 'ar'" class="card-style-p">{{item.body_AR}}</p>
</ion-card-content>
</ion-card>
<ion-item *ngIf="i > 0 && !item.isOpen" (click)="toggleAnnouncement(item)" lines='none'
style="border: 1px solid lightgray; border-radius: 30px; height: 100px;">
<img [src]="item.img" class="image-item">
<ion-label style="margin: 5px;">
<h2 *ngIf="direction === 'en'">{{item.title_EN}}</h2>
<p *ngIf="direction === 'en'">{{item.body_EN}}</p>
<ion-item *ngIf="i > 0 && !item.isOpen && item.img" (click)="toggleAnnouncement(item)" lines='none' class="announcement-items">
<img [src]="item.img" class="image-item">
<ion-label style="margin: 5px; margin-top: -20px;">
<h2 class="item-list-h" *ngIf="direction === 'en'">{{item.title_EN}}</h2>
<p class="item-list-p-title" *ngIf="direction === 'en'">{{item.body_EN}}</p>
<h2 class="item-list-h" *ngIf="direction === 'ar'">{{item.title_AR}}</h2>
<p class="item-list-p-title" *ngIf="direction === 'ar'">{{item.body_AR}}</p>
<p class="item-list-date-title">{{item.date}}</p>
</ion-label>
</ion-item>
<ion-item *ngIf="i > 0 && !item.isOpen && !item.img" (click)="toggleAnnouncement(item)" lines='none' class="announcement-items">
<ion-label style="margin: 10px;">
<h2 class="item-list-h" *ngIf="direction === 'en'">{{item.title_EN}}</h2>
<p class="item-list-p-title" *ngIf="direction === 'en'">{{item.body_EN}}</p>
<h2 *ngIf="direction === 'ar'">{{item.title_AR}}</h2>
<p *ngIf="direction === 'ar'">{{item.body_AR}}</p>
<p>{{item.date}}</p>
<h2 class="item-list-h" *ngIf="direction === 'ar'">{{item.title_AR}}</h2>
<p class="item-list-p-title" *ngIf="direction === 'ar'">{{item.body_AR}}</p>
<p class="item-list-date-title">{{item.date}}</p>
</ion-label>
</ion-item>
</ion-item>
<ion-card *ngIf="i > 0 && item.isOpen" (click)="toggleAnnouncement(item)" style="margin: 0px;">
<ion-card-header style="background: transparent;">
@ -68,4 +77,11 @@
</ion-card>
</div>
</ion-list>
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>

@ -1,31 +1,132 @@
.image-center{
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
.image-center {
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}
.text-style{
margin: 5px;
.main-card-image {
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
position: absolute;
height: 100%;
}
.text-style {
margin: 5px;
}
.class-dev-close {
// border: 1px solid lightgray;
// border-radius: 30px;
}
.class-dev-open {
}
.class-item-open {
border: 1px solid lightgray;
border-radius: 30px;
height: 100px;
}
.class-item-close {
}
.class-dev-close{
border: 1px solid lightgray;
border-radius: 30px;
.image-item {
// width: 30%;
// height: 70%;
// margin-top: 30px;
// border: 1px solid white;
// border-radius: 11px;
// margin-bottom: 25px;
width: 100px;
height: 100px;
margin-top: 1px;
border: 5px solid white;
border-radius: 11px;
border-left: 0px;
border-right: 0px;
}
.class-dev-open{}
.class-item-open{
border: 1px solid lightgray;
border-radius: 30px;
height: 100px;
.announcement-items {
border: 1px solid #00000029;
border-radius: 10px;
height: 100px;
box-shadow: 0px 0px 5px #00000000;
}
.class-item-close{}
.image-item{
width: 30%;
height: 70%;
margin-top: 30px;
border: 1px solid white;
border-radius: 11px;
margin-bottom: 25px;
.item-list-h {
font: normal normal 600 14px/11px Poppins;
letter-spacing: -0.56px;
color: #2b353e;
opacity: 1;
padding-bottom: 5px;
}
.item-list-p-title {
font: normal normal medium 11px/16px Poppins;
letter-spacing: -0.44px;
color: #535353;
}
.item-list-date-title {
font: normal normal 600 10px/16px Poppins;
letter-spacing: -0.4px;
color: #7c7c7c;
}
.item-list-first-h {
font: normal normal bold 23px/24px Poppins;
letter-spacing: -1.38px;
color: #ffffff;
white-space: break-spaces;
}
.item-list-first-p {
font: normal normal normal 12px/17px Poppins;
letter-spacing: -0.12px;
color: #ffffff;
}
.item-list-first-date {
text-align: left;
font: normal normal bold 8px/23px Poppins;
letter-spacing: 0px;
color: #ffffff;
}
.card-style-h {
font: normal normal 600 20px/22px Poppins;
letter-spacing: -0.8px;
color: #2b353e;
margin-bottom: -34px;
}
.card-style-p {
font: normal normal medium 13px/18px Poppins;
letter-spacing: -0.52px;
color: #535353;
}
.card-style-date {
font: normal normal 600 12px/18px Poppins;
letter-spacing: -0.48px;
color: #7c7c7c;
}
.main-card-style {
margin: 0px;
position: relative;
min-height: 283px;
}
.main-card-item-list-style {
position: absolute;
bottom: 0px;
--background: transparent;
}
.main-card-label-stle{
margin: 0px;
padding: 0px;
width: 237px;
}
.main-card-label-style-all{
padding: 0px;
margin: 0px;
width: 200px;
}

@ -1,8 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild } from '@angular/core';
import { detachEmbeddedView } from '@angular/core/src/view';
import { AnnouncementService } from 'src/app/hmg-common/services/announcement-services/announcement.service';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { IonInfiniteScroll } from '@ionic/angular';
@Component({
selector: 'app-announcement',
@ -10,10 +11,14 @@ import { TranslatorService } from 'src/app/hmg-common/services/translator/transl
styleUrls: ['./announcement.component.scss'],
})
export class AnnouncementComponent implements OnInit {
public arr: { id: number, title_EN: string, title_AR: string, body_EN: string, body_AR: string, img: string, date: Date, isopen: boolean }[] = [];
public arr: { id: number, title_EN: string, title_AR: string, body_EN: string, body_AR: string, img?: string, date: Date, isopen: boolean }[] = [];
public arrList = [];
public listOfAnnouncement;
direction: string;
public announcementList = [];
public numberOfListLength = 10;
public announcememntCounter = this.numberOfListLength;
@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
constructor(
public announcementService: AnnouncementService,
@ -71,10 +76,30 @@ export class AnnouncementComponent implements OnInit {
img: this.listOfAnnouncement[i].Banner_Image,
isopen: false
};
if ( i < this.numberOfListLength){
this.announcementList.push(this.arr[i]);
}
}
this.arrList = this.arr;
}
});
}
loadData(event) {
let counter = this.numberOfListLength + this.announcememntCounter;
setTimeout(() => {
event.target.complete();
for(let i = this.announcememntCounter; i < counter; i++) {
if(this.arrList[i]) {
this.announcementList.push(this.arrList[i]);
this.announcememntCounter ++;
}
}
if (this.announcememntCounter >= this.arrList.length) {
event.target.disabled = true;
}
}, 500);
}
}

@ -161,6 +161,15 @@ export class WorkListMainItgComponent implements OnInit {
if (actionName == "ReportGenerated") {
return "../assets/imgs/mohemm-action/info.png"
}
if (actionName == "Doable") {
return "../assets/imgs/mohemm-action/info.png"
}
if (actionName == "NotDoable") {
return "../assets/imgs/mohemm-action/info.png"
}
if (actionName == "DataCorrected") {
return "../assets/imgs/mohemm-action/info.png"
}
}
public segmentChangedClick(event: any) {
@ -459,6 +468,9 @@ export class WorkListMainItgComponent implements OnInit {
if (action === 6) {
return this.ts.trPK('worklist', 'grantMsg');
}
if (action === 7) {
return this.ts.trPK('worklist', 'grantMsg');
}
}
@ -471,16 +483,16 @@ export class WorkListMainItgComponent implements OnInit {
this.actionService(1, this.commentText);
}
if (this.actionSelected == "Delegate") {
// this.actionService(4, this.commentText)
// this.common.openWorklistRollReplacement();
this.presentModal(4);
}
if (this.actionSelected === 'Doable') {
this.actionService(1, this.commentText);
}
if (this.actionSelected === 'Grant') {
this.actionService(6, this.commentText, this.grantRequest);
}
if (this.actionSelected === 'NotDoable') {
this.actionService(2, this.commentText);
}
if (this.actionSelected === 'Question') {
}
@ -493,6 +505,9 @@ export class WorkListMainItgComponent implements OnInit {
if (this.actionSelected === 'ReportGenerated') {
this.actionService(7, this.grantRequest);
}
if (this.actionSelected === 'DataCorrected') {
this.actionService(7, this.grantRequest);
}
}

@ -1591,4 +1591,17 @@ ion-segment-button {
}
.offers-discount-card ion-card-content div{
font-size: 11px !important;
}
}
.searchbar-input-container.sc-ion-searchbar-ios{
height: 48px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 10px solid white;
border-radius: 50px;
width: 345px;
left: 3px;
}
.searchbar-input.sc-ion-searchbar-md {
border-radius: 25px;
}

Loading…
Cancel
Save