added page to turn on or off worklist notification and add indecator in my profile

enad-Q3
enadhilal 4 years ago
parent 99cdc67d56
commit e7f39ba02f

@ -111,6 +111,7 @@ import { GenericHeaderComponent } from './ui/generic-header/generic-header.compo
import { BackgroundGeolocation } from '@ionic-native/background-geolocation/ngx';
import { AttendanceOptionsComponent } from '../home/attendance-options/attendance-options.component';
import { CardCalendarComponent } from './ui/card-calendar/card-calendar.component';
import { WorklistSettingComponent } from '../notification/worklist-setting/worklist-setting.component';
@NgModule({
imports: [
@ -194,7 +195,8 @@ import { CardCalendarComponent } from './ui/card-calendar/card-calendar.componen
Modal,
GenericHeaderComponent,
AttendanceOptionsComponent,
CardCalendarComponent
CardCalendarComponent,
WorklistSettingComponent
],
exports: [
FabButtonComponent,
@ -306,7 +308,7 @@ import { CardCalendarComponent } from './ui/card-calendar/card-calendar.componen
BarcodeScanner,
BackgroundGeolocation
],
entryComponents: [DateInfoModalComponent],
entryComponents: [DateInfoModalComponent, WorklistSettingComponent],
})
export class HmgCommonModule { }

@ -27,8 +27,8 @@ export class ConnectorService {
public static retryTimes = 0;
public static timeOut = 120 * 1000;
// public static host = 'https://uat.hmgwebservices.com/';
public static host = 'https://hmgwebservices.com/';
public static host = 'https://uat.hmgwebservices.com/';
// public static host = 'https://hmgwebservices.com/';
constructor(public httpClient: HttpClient,
public cs: CommonService,

@ -30,6 +30,12 @@
</ion-buttons> -->
</ion-col>
<ion-col *ngIf="worklistSetting" [size]="2" style="padding: 0;" (click)="openNotifictionSetting()">
<div class="profile-image-container">
<ion-icon name='settings' style="width: 30px;height: 30px;margin-top: 5px; color: white;"></ion-icon>
</div>
</ion-col>
</ion-row>
</ion-toolbar>
</ion-header>

@ -1,4 +1,6 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { WorklistSettingComponent } from 'src/app/notification/worklist-setting/worklist-setting.component';
import { CommonService } from '../../services/common/common.service';
@Component({
@ -16,10 +18,13 @@ export class GenericHeaderComponent implements OnInit {
@Input() updateDirection = false;
@Input() headerText = '';
@Input() backLink: string;
@Input() worklistSetting = false;
@Output() trigger = new EventEmitter();
public close = 'assets/imgs/cancel.png';
constructor(public common: CommonService) { }
constructor(
public common: CommonService,
public modalController: ModalController) { }
ngOnInit() {
if (this.updateDirection) {
@ -35,4 +40,12 @@ export class GenericHeaderComponent implements OnInit {
this.trigger.emit();
}
async openNotifictionSetting() {
const modal = await this.modalController.create({
component: WorklistSettingComponent,
cssClass: 'app-update-modal-css',
});
return await modal.present();
}
}

@ -1,6 +1,7 @@
<app-generic-header
showBack="true"
backLink="/home"
[worklistSetting] ='true'
[headerText]="'home, worklist' | translate">
</app-generic-header>

@ -0,0 +1,32 @@
<ion-header>
<ion-toolbar class="header-toolbar">
<ion-title color="light">{{ 'worklist, worklist-setting' | translate}} </ion-title>
<ion-buttons slot="primary">
<ion-button style="background: none !important;" (click)="dismiss()">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<div style="padding: 5px;">
<h3 style="font-weight: bold;">{{ 'worklist, turn-on-notification' | translate}}</h3>
</div>
<br>
<ion-list>
<ion-item *ngFor="let data of notificationList">
<ion-label>
<p *ngIf="direction == 'ltr'" style="color: black">{{data.nameEn}}</p>
<p *ngIf="direction == 'rtl'" style="color: black">{{data.nameAr}}</p>
</ion-label>
<ion-toggle [checked]="data.isChecked"></ion-toggle>
</ion-item>
<br>
</ion-list>
</ion-content>
<ion-footer>
<ion-button style="font-size: 16px !important; width:371px; --background: #259CB8; background: white;" expand="block" (click)='dismiss()'>{{ 'worklist, save-changes' | translate}}</ion-button>
</ion-footer>

@ -0,0 +1,7 @@
.header-toolbar{
--background: #269DB8;
}
ion-toggle{
--background-checked: #269DB8;
}

@ -0,0 +1,27 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { WorklistSettingComponent } from './worklist-setting.component';
describe('WorklistSettingComponent', () => {
let component: WorklistSettingComponent;
let fixture: ComponentFixture<WorklistSettingComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ WorklistSettingComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(WorklistSettingComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

@ -0,0 +1,60 @@
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
@Component({
selector: 'app-worklist-setting',
templateUrl: './worklist-setting.component.html',
styleUrls: ['./worklist-setting.component.scss'],
})
export class WorklistSettingComponent implements OnInit {
notificationList = [
{
id: 0,
nameEn: "Human Resource (HR)",
nameAr: "الموارد البشرية (HR)",
isChecked: false
},
{
id: 1,
nameEn: "Purchase Order (PO)",
nameAr: "امر شراء (PO)",
isChecked: false
},
{
id: 2,
nameEn: "Purchase Requesr (PR)",
nameAr: "طلب شراء (PR)",
isChecked: false
},
{
id: 3,
nameEn: "Move Request (MR)",
nameAr: "طلب نقل (MR)",
isChecked: false
},
{
id: 4,
nameEn: "Item Creation (IC)",
nameAr: "انشاء عنصر (IC)",
isChecked: false
}
];
public direction: string;
constructor(public modalController: ModalController, public ts: TranslatorService) { }
ngOnInit() {
this.direction = TranslatorService.getCurrentDirection();
}
dismiss() {
this.modalController.dismiss({
'dismissed': true
});
}
}

@ -37,25 +37,32 @@
</div>
<div class="user-actions">
<ion-row class="ion-justify-content-center">
<ion-col [size]="4" (click)="selectedSegment('personal')">
<ion-col [size]="3" (click)="selectedSegment('personal')">
<div class="action-button col-button">
<img *ngIf="!personalInfoSegment" style="width: 40px;" src="../assets/imgs/profile-icons/info@2x.png">
<img *ngIf="personalInfoSegment" style="width: 40px;" src="../assets/imgs/profile-icons/info-a@2x.png">
<span class="btnTitle">{{ts.trPK('general','personal-info')}}</span>
</div>
</ion-col>
<ion-col [size]="4" (click)="selectedSegment('basic')">
<ion-col [size]="3" (click)="selectedSegment('basic')">
<div class="action-button col-button">
<img *ngIf="!basicDetailsSegment" style="width: 40px;" src="../assets/imgs/profile-icons/basic-detail@2x.png">
<img *ngIf="basicDetailsSegment" style="width: 40px;" src="../assets/imgs/profile-icons/basic-detail@21.png">
<span class="btnTitle">{{ts.trPK('general','basic-details')}}</span>
</div>
</ion-col>
<ion-col [size]="4" (click)="selectedSegment('address')">
<ion-col [size]="3" (click)="selectedSegment('address')">
<div class="action-button col-button">
<img *ngIf="!addressSegment" style="width: 40px;" src="../assets/imgs/profile-icons/main-address@2x.png">
<img *ngIf="addressSegment" style="width: 40px;" src="../assets/imgs/profile-icons/main address-a@2x.png">
<span class="btnTitle">{{ts.trPK('userProfile','address')}} </span>
<span class="btnTitle">{{ts.trPK('userProfile','contact-details')}} </span>
</div>
</ion-col>
<ion-col [size]="3">
<div class="action-button col-button">
<img *ngIf="!basicDetailsSegment" style="width: 40px;" src="../assets/imgs/profile-icons/basic-detail@2x.png">
<img *ngIf="basicDetailsSegment" style="width: 40px;" src="../assets/imgs/profile-icons/basic-detail@21.png">
<span class="btnTitle">{{ts.trPK('userProfile','family-members')}}</span>
</div>
</ion-col>
</ion-row>
@ -110,7 +117,14 @@
</ion-grid>
</div>
<br>
<br><br>
<div style="display: flex; justify-content: center;">
<div [ngClass]='profileProgress > 0 && profileProgress >= 25 ? "profile-green":"profile-gray"'></div>
<div [ngClass]='profileProgress >= 25 && profileProgress >= 50 ? "profile-green":"profile-gray"'></div>
<div [ngClass]='profileProgress >= 50 && profileProgress >= 75? "profile-green":"profile-gray"'></div>
<div [ngClass]='profileProgress >= 85 ? "profile-green":"profile-gray"'></div>
</div>
<div style="margin-left: 20px; margin-top: 5px; font-size: 13px;">{{ts.trPK('userProfile','profile-compitation')}} {{profileProgress}}%</div>
<ion-card *ngIf="personalInfoSegment" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' ">
<ion-card-content>
@ -184,6 +198,39 @@
</ion-card-content>
</ion-card>
<ion-card *ngIf="addressSegment" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' ">
<ion-card-content *ngIf="!editAddress && employeeAdress">
<ion-grid>
<ion-row style="width: 113%;">
<ion-col size="10">
<ion-label>
<h1 [ngClass]="direction === 'ltr'? 'header-label-text-form': 'header-label-text-form-ar' ">{{ts.trPK('userProfile','phone-no')}}</h1>
</ion-label>
</ion-col>
<ion-col size="2" *ngIf="addressSubMenu && addressSubMenu.UPDATE_BUTTON === 'Y'" (click)="allowEdit('address')">
<img style="width: 18px; height: 18px;" src="../assets/imgs/profile-icons/editing@2x.png">
</ion-col>
<ion-col size="2" *ngIf="addressSubMenu && addressSubMenu.ADD_BUTTON === 'Y'" (click)="allowEdit('address')">
<ion-icon class="add-icon-styling" name="add"></ion-icon>
</ion-col>
</ion-row>
</ion-grid>
<br>
<ion-label>
<h3 [ngClass]="direction === 'ltr'? 'type-label-text-form': 'type-label-text-form-ar' " >{{ts.trPK('general','mobile')}}</h3>
</ion-label>
<h3 [ngClass]="direction === 'ltr'? 'result-label-text-form': 'result-label-text-form-ar' " >0567845661</h3>
<br>
<br>
<ion-label>
<h3 [ngClass]="direction === 'ltr'? 'type-label-text-form': 'type-label-text-form-ar' " >{{ts.trPK('userProfile','work')}}</h3>
</ion-label>
<h3 [ngClass]="direction === 'ltr'? 'result-label-text-form': 'result-label-text-form-ar' " >4922</h3>
<br>
</ion-card-content>
</ion-card>
<ion-card *ngIf="addressSegment" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' ">
<ion-card-content *ngIf="!editAddress && employeeAdress">
<ion-grid>

@ -1352,4 +1352,20 @@ $actionBtnSize: 36px;
letter-spacing: -0.64px;
color: #2B353E;
opacity: 1;
}
.profile-green{
background: #20A16A;
margin-right: 5px;
width: 80px;
height: 8px;
border-radius: 5px;
}
.profile-gray{
background: #D9D9D9;
margin-right: 5px;
width: 80px;
height: 8px;
border-radius: 5px;
}

@ -51,6 +51,7 @@ export class HomeComponent implements OnInit {
public country: any;
public employeeAdress: any = [];
public jobName: any;
public profileProgress = 84;
constructor(
public ts: TranslatorService,

@ -1434,6 +1434,22 @@
"postal-code": {
"en": "Postal Code",
"ar": "الرمز البريدي"
},
"contact-details":{
"en":"Contact Details",
"ar":"بيانات المتصل"
},
"family-members":{
"en":"Family Members",
"ar":"أفراد الأسرة"
},
"profile-compitation":{
"en":"Profile Completions",
"ar":"استكمال الملف الشخصي"
},
"work":{
"en":"Work",
"ar":"العمل"
}
},
"changePassword": {
@ -2487,6 +2503,18 @@
"urgent": {
"en": "Urgent",
"ar": "عاجل"
},
"worklist-setting":{
"en":"WORKLIST SETTINGS",
"ar":"اعدادات اشعارات"
},
"turn-on-notification":{
"en":"Turn on notification for",
"ar":"تفعيل الاشعارات "
},
"save-changes":{
"en":"Save Changes",
"ar":"حفظ التغيرات"
}
},
"worklistMain": {

Loading…
Cancel
Save