mohemm q2 changes
parent
f997ac8812
commit
6b02bc1a76
@ -1,33 +1,42 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
|
||||
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', redirectTo: 'authentication/login', pathMatch: 'full' },
|
||||
{
|
||||
path: 'authentication', loadChildren: './authentication/authentication.module#AuthenticationPageModule'},
|
||||
{ path: 'home', loadChildren: './home/home.module#HomePageModule' },
|
||||
{ path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
|
||||
{ path: 'vacation-rule', loadChildren: './vacation-rule/vacation-rule.module#VacationRulePageModule' },
|
||||
{ path: 'accrual-balances', loadChildren: './accrual-balances/accrual-balances.module#AccrualBalancesPageModule' },
|
||||
{ path: 'my-team', loadChildren: './my-team/my-team.module#MyTeamPageModule' },
|
||||
{ path: 'attendance', loadChildren: './attendance/attendance.module#AttendancePageModule' },
|
||||
{ path: 'eit', loadChildren: './eit/eit.module#EITPageModule' },
|
||||
{ path: 'absence', loadChildren: './absence/absence.module#AbsencePageModule' },
|
||||
{ path: 'notification', loadChildren: './notification/notification.module#NotificationPageModule' },
|
||||
{ path: 'my-specialist', loadChildren: './my-specialist/my-specialist.module#MySpecialistPageModule' },
|
||||
{ path: 'my-subordinate', loadChildren: './my-subordinate/my-subordinate.module#MySubordinatePageModule' },
|
||||
{ path: 'time-card', loadChildren: './time-card/time-card.module#TimeCardPageModule' },
|
||||
{ path: 'payslip', loadChildren: './payslip/payslip.module#PayslipPageModule' },
{ path: 'attendance-tracking', loadChildren: './attendance-tracking/attendance-tracking.module#AttendanceTrackingPageModule' }
|
||||
import { NgModule } from '@angular/core';
|
||||
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
|
||||
|
||||
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
/*RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules}),*/
|
||||
RouterModule.forRoot(routes),
|
||||
],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AppRoutingModule { }
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', redirectTo: 'authentication/login', pathMatch: 'full' },
|
||||
{
|
||||
path: 'authentication', loadChildren: './authentication/authentication.module#AuthenticationPageModule'
|
||||
},
|
||||
{ path: 'home', loadChildren: './home/home.module#HomePageModule' },
|
||||
{ path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
|
||||
{ path: 'vacation-rule', loadChildren: './vacation-rule/vacation-rule.module#VacationRulePageModule' },
|
||||
{ path: 'accrual-balances', loadChildren: './accrual-balances/accrual-balances.module#AccrualBalancesPageModule' },
|
||||
{ path: 'my-team', loadChildren: './my-team/my-team.module#MyTeamPageModule' },
|
||||
{ path: 'attendance', loadChildren: './attendance/attendance.module#AttendancePageModule' },
|
||||
{ path: 'eit', loadChildren: './eit/eit.module#EITPageModule' },
|
||||
{ path: 'absence', loadChildren: './absence/absence.module#AbsencePageModule' },
|
||||
{ path: 'notification', loadChildren: './notification/notification.module#NotificationPageModule' },
|
||||
{ path: 'my-specialist', loadChildren: './my-specialist/my-specialist.module#MySpecialistPageModule' },
|
||||
{ path: 'my-subordinate', loadChildren: './my-subordinate/my-subordinate.module#MySubordinatePageModule' },
|
||||
{ path: 'time-card', loadChildren: './time-card/time-card.module#TimeCardPageModule' },
|
||||
{ path: 'payslip', loadChildren: './payslip/payslip.module#PayslipPageModule' },
|
||||
{ path: 'attendance-tracking', loadChildren: './attendance-tracking/attendance-tracking.module#AttendanceTrackingPageModule' },
|
||||
{ path: 'itemforsale', loadChildren: './itemforsale/itemforsale.module#ItemforsalePageModule' },
|
||||
{ path: 'offersdiscount', loadChildren: './offersdiscount/offersdiscount.module#OffersdiscountPageModule' },
|
||||
{ path: 'mowadhafi', loadChildren: './mowadhafi/mowadhafi.module#MowadhafiPageModule' },
|
||||
{ path: 'erm-channel', loadChildren: './erm-channel/erm-channel.module#ErmChannelPageModule' },
|
||||
{ path: 'backend-integrations', loadChildren: './backend-integrations/backend-integrations.module#BackendIntegrationsPageModule' }
|
||||
|
||||
|
||||
|
||||
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
/*RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules}),*/
|
||||
RouterModule.forRoot(routes),
|
||||
],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AppRoutingModule { }
|
||||
|
||||
@ -0,0 +1,90 @@
|
||||
<app-generic-header
|
||||
showBack="true"
|
||||
[headerText]="'login,announcement' | translate">
|
||||
</app-generic-header>
|
||||
|
||||
<ion-content style="--background:#F4F4F4;">
|
||||
<ion-searchbar mode='md' (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]="item.Open ? 'class-dev-close': 'class-dev-open'"
|
||||
style="margin: 15px; background: white; border-radius: 10px;">
|
||||
<!-- <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>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-card>
|
||||
|
||||
<ion-card *ngIf="i === 0 && item.isOpen" (click)="toggleAnnouncement(item)" style="margin: 0px; background: white;">
|
||||
<ion-card-header style="background: transparent;">
|
||||
<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 *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'" class="card-style-p"><span [innerHTML]="item.body_EN"></span></p>
|
||||
<p *ngIf="direction === 'ar'" class="card-style-p">{{item.body_AR}}</p>
|
||||
</ion-card-content>
|
||||
</ion-card> -->
|
||||
|
||||
<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' ">
|
||||
<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'"><span [innerHTML]="item.body_EN"></span></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="!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'"><span [innerHTML]="item.body_EN"></span></p>
|
||||
|
||||
<h2 class="item-list-h" *ngIf="direction === 'ar'">{{item.title_AR}}</h2>
|
||||
<p class="item-list-p-title" *ngIf="direction === 'ar'"><span [innerHTML]="item.body_AR"></span></p>
|
||||
<p class="item-list-date-title">{{item.date}}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-card *ngIf="item.isOpen" (click)="closeAnnouncement(item)" style="margin: 0px;">
|
||||
<ion-card-header style="background: transparent;">
|
||||
<ion-card-title style="font-size: 20px; margin: 5px;" *ngIf="direction === 'en'">{{detialData.title_EN}} <br>
|
||||
<p style="font-size: 12px; color: gray;">{{detialData.date}}</p>
|
||||
</ion-card-title>
|
||||
<ion-card-title style="font-size: 20px; margin: 5px;" *ngIf="direction === 'ar'">{{detialData.title_AR}} <br>
|
||||
<p style="font-size: 12px; color: gray;">{{detialData.date}}</p>
|
||||
</ion-card-title>
|
||||
<img *ngIf='detialData.img' [src]="detialData.img" class="image-center">
|
||||
<div *ngIf='!detialData.img'></div>
|
||||
</ion-card-header>
|
||||
<ion-card-content>
|
||||
<p *ngIf="direction === 'en'"><span [innerHTML]="detialData.body_EN"></span></p>
|
||||
<p *ngIf="direction === 'ar'"><span [innerHTML]="detialData.body_AR"></span></p>
|
||||
</ion-card-content>
|
||||
</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>
|
||||
|
||||
<!-- <ion-footer>
|
||||
<ion-button (click)="loadData($event)"><ion-label><p>more</p></ion-label></ion-button>
|
||||
</ion-footer> -->
|
||||
@ -0,0 +1,140 @@
|
||||
.image-center {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
height: 190px;
|
||||
}
|
||||
.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 {
|
||||
}
|
||||
|
||||
.image-item-en {
|
||||
padding-left: 5px;
|
||||
width: 100px;
|
||||
min-height: 100px;
|
||||
border: 5px solid white;
|
||||
border-radius: 11px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.image-item-ar {
|
||||
padding-right: 5px;
|
||||
width: 100px;
|
||||
min-height: 100px;
|
||||
border: 5px solid white;
|
||||
border-radius: 11px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
}
|
||||
|
||||
.announcement-items {
|
||||
border: 1px solid #00000029;
|
||||
border-radius: 10px;
|
||||
height: 100px;
|
||||
box-shadow: 0px 0px 5px #00000000;
|
||||
}
|
||||
|
||||
.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: -0.3px;
|
||||
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;
|
||||
}
|
||||
|
||||
.item-native {
|
||||
padding-left: 5px !important;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AnnouncementComponent } from './announcement.component';
|
||||
|
||||
describe('AnnouncementComponent', () => {
|
||||
let component: AnnouncementComponent;
|
||||
let fixture: ComponentFixture<AnnouncementComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ AnnouncementComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(AnnouncementComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,147 @@
|
||||
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',
|
||||
templateUrl: './announcement.component.html',
|
||||
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 arrList = [];
|
||||
public listOfAnnouncement;
|
||||
direction: string;
|
||||
public announcementList = [];
|
||||
public numberOfListLength = 10;
|
||||
public announcememntCounter = this.numberOfListLength;
|
||||
@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
|
||||
public pageSize = 1;
|
||||
public pageLength = 0;
|
||||
public lengthCounter = 5;
|
||||
public detialData: {
|
||||
id: number,
|
||||
title_EN: string,
|
||||
title_AR: string,
|
||||
body_EN: string,
|
||||
body_AR: string,
|
||||
img?: string,
|
||||
date: Date};
|
||||
|
||||
constructor(
|
||||
public announcementService: AnnouncementService,
|
||||
public translate: TranslatorService,
|
||||
public common: CommonService
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.common.startLoading();
|
||||
this.direction = TranslatorService.getCurrentLanguageName();
|
||||
this.getAnnouncementListService();
|
||||
}
|
||||
|
||||
filterList(event) {
|
||||
const val = event.target.value;
|
||||
if (val === '') {
|
||||
this.announcementList = this.arrList;
|
||||
}
|
||||
this.announcementList = this.arrList.filter((item) => {
|
||||
return (item.title_EN.toLowerCase().indexOf(val.toLowerCase()) > -1);
|
||||
});
|
||||
}
|
||||
|
||||
toggleAnnouncement(item) {
|
||||
this.common.startLoading();
|
||||
let holdData;
|
||||
let data;
|
||||
this.announcementList.forEach(element => {
|
||||
if (element.id === item.id) {
|
||||
this.announcementService.getAnnouncementListService(this.pageSize, item.id).subscribe((result: any) => {
|
||||
this.common.stopLoading();
|
||||
if (this.common.validResponse(result)) {
|
||||
holdData = JSON.parse(result.Mohemm_ITG_ResponseItem);
|
||||
data = JSON.parse(holdData.result.data)[0];
|
||||
console.log(data);
|
||||
this.detialData = {
|
||||
id: data.rowID,
|
||||
title_EN: data.Title_EN,
|
||||
title_AR: data.Title_AR,
|
||||
body_EN: data.Body_EN,
|
||||
body_AR: data.Body_AR,
|
||||
date: data.created,
|
||||
img: data.Banner_Image
|
||||
};
|
||||
element.isOpen = !element.isOpen;
|
||||
// this.common.stopLoading();
|
||||
}
|
||||
console.log(this.detialData);
|
||||
});
|
||||
} else {
|
||||
element.isOpen = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
closeAnnouncement(item){
|
||||
item.isOpen = false;
|
||||
}
|
||||
|
||||
getAnnouncementListService() {
|
||||
// this.common.startLoading();
|
||||
let holdData;
|
||||
this.announcementService.getAnnouncementListService(this.pageSize).subscribe((result: any) => {
|
||||
this.common.stopLoading();
|
||||
if (this.common.validResponse(result)) {
|
||||
holdData = JSON.parse(result.Mohemm_ITG_ResponseItem);
|
||||
this.listOfAnnouncement = JSON.parse(holdData.result.data);
|
||||
this.pageLength = this.listOfAnnouncement[0].TotalItems;
|
||||
for (let i = 0; i < this.listOfAnnouncement.length; i++) {
|
||||
this.listOfAnnouncement[i].Title_EN = this.listOfAnnouncement[i].Title_EN;
|
||||
this.listOfAnnouncement[i].Title_AR = this.listOfAnnouncement[i].Title_AR;
|
||||
this.listOfAnnouncement[i].EmailBody_EN = this.listOfAnnouncement[i].EmailBody_EN;
|
||||
this.listOfAnnouncement[i].EmailBody_AR = this.listOfAnnouncement[i].EmailBody_AR;
|
||||
this.arr[i] = {
|
||||
id: this.listOfAnnouncement[i].rowID,
|
||||
title_EN: this.listOfAnnouncement[i].Title_EN,
|
||||
title_AR: this.listOfAnnouncement[i].Title_AR,
|
||||
body_EN: this.listOfAnnouncement[i].EmailBody_EN,
|
||||
body_AR: this.listOfAnnouncement[i].EmailBody_AR,
|
||||
date: this.listOfAnnouncement[i].created,
|
||||
img: this.listOfAnnouncement[i].Banner_Image,
|
||||
isopen: false
|
||||
};
|
||||
if ( i < this.numberOfListLength){
|
||||
this.announcementList.push(this.arr[i]);
|
||||
}
|
||||
this.arrList.push(this.arr[i]);
|
||||
}
|
||||
}
|
||||
// this.common.stopLoading();
|
||||
});
|
||||
}
|
||||
|
||||
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 ++;
|
||||
// }
|
||||
// }
|
||||
this.pageSize += 1;
|
||||
if (this.lengthCounter >= this.pageLength) {
|
||||
event.target.disabled = true;
|
||||
} else {
|
||||
this.getAnnouncementListService();
|
||||
}
|
||||
this.lengthCounter += 5;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { HmgCommonModule } from '../hmg-common/hmg-common.module';
|
||||
|
||||
import { BackendIntegrationsPage } from './backend-integrations.page';
|
||||
import { AnnouncementComponent } from './announcement/announcement.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: BackendIntegrationsPage,
|
||||
children: [
|
||||
{
|
||||
path: 'announcement',
|
||||
component: AnnouncementComponent
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
HmgCommonModule,
|
||||
RouterModule.forChild(routes)
|
||||
],
|
||||
declarations: [BackendIntegrationsPage, AnnouncementComponent]
|
||||
})
|
||||
export class BackendIntegrationsPageModule {}
|
||||
@ -0,0 +1,3 @@
|
||||
<ion-content>
|
||||
<ion-router-outlet></ion-router-outlet>
|
||||
</ion-content>
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { BackendIntegrationsPage } from './backend-integrations.page';
|
||||
|
||||
describe('BackendIntegrationsPage', () => {
|
||||
let component: BackendIntegrationsPage;
|
||||
let fixture: ComponentFixture<BackendIntegrationsPage>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ BackendIntegrationsPage ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(BackendIntegrationsPage);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-backend-integrations',
|
||||
templateUrl: './backend-integrations.page.html',
|
||||
styleUrls: ['./backend-integrations.page.scss'],
|
||||
})
|
||||
export class BackendIntegrationsPage implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
|
||||
import { EitTransactionModel } from './eit.transaction.model';
|
||||
|
||||
export class EitAddressRequest {
|
||||
public static SHARED_DATA = 'eit-request';
|
||||
public P_MENU_TYPE: string;
|
||||
public P_SELECTED_EMPLOYEE_NUMBER: string;
|
||||
public P_FUNCTION_NAME: string;
|
||||
public P_SELECTED_RESP_ID: Number;
|
||||
P_DESC_FLEX_CONTEXT_CODE: string;
|
||||
EITTransactionTBL: EitTransactionModel[];
|
||||
P_COUNTRY_CODE: string;
|
||||
P_EFFECTIVE_DATE: string;
|
||||
P_ACTION: string;
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
import { IonicRatingModule } from 'ionic4-rating';
|
||||
import { ErmChannelPage } from './erm-channel.page';
|
||||
import { HomeComponent } from './home/home.component';
|
||||
import { SurveyComponent } from './survey/survey.component';
|
||||
import { HmgCommonModule } from '../hmg-common/hmg-common.module';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: ErmChannelPage,
|
||||
children: [
|
||||
{
|
||||
path: 'home',
|
||||
component: HomeComponent
|
||||
},
|
||||
{
|
||||
path: 'survey',
|
||||
component: SurveyComponent
|
||||
},
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
IonicRatingModule,
|
||||
HmgCommonModule,
|
||||
RouterModule.forChild(routes)
|
||||
],
|
||||
declarations: [ErmChannelPage, HomeComponent, SurveyComponent]
|
||||
})
|
||||
export class ErmChannelPageModule { }
|
||||
@ -0,0 +1,4 @@
|
||||
|
||||
<ion-content>
|
||||
<ion-router-outlet></ion-router-outlet>
|
||||
</ion-content>
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ErmChannelPage } from './erm-channel.page';
|
||||
|
||||
describe('ErmChannelPage', () => {
|
||||
let component: ErmChannelPage;
|
||||
let fixture: ComponentFixture<ErmChannelPage>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ErmChannelPage ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ErmChannelPage);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-erm-channel',
|
||||
templateUrl: './erm-channel.page.html',
|
||||
styleUrls: ['./erm-channel.page.scss'],
|
||||
})
|
||||
export class ErmChannelPage implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
<div class="full-ads" >
|
||||
|
||||
<img [src]="advertisement.base64String" *ngIf="advertisement.contentType =='image/jpeg'"/>
|
||||
|
||||
<video style="width: 100%; position: absolute; bottom: 45%;" autoplay="autoplay" *ngIf="advertisement.contentType =='video/mp4'" controls>
|
||||
<source type="video/mp4" [src]="advertisement.base64String">
|
||||
</video>
|
||||
|
||||
<!-- <div class="skip-btn" (click)="skip()" *ngIf="isSkip ==true">{{ts.trPK('worklistMain','skip')}}</div> -->
|
||||
|
||||
<div class="info-container">
|
||||
<div class="seconds" *ngIf="isSkip ==false">{{setTime}}</div>
|
||||
<div *ngIf="setTime ==0">
|
||||
<ion-icon name="thumbs-down" class="red" (click)="setView('Dislike')"></ion-icon>
|
||||
<img src="../../../assets/imgs/light-bulb.svg" style="width: 70px; padding: 15px;" (click)="setView('Info')">
|
||||
<ion-icon name="thumbs-up" class="green" (click)="setView('Like')"></ion-icon>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,48 @@
|
||||
.full-ads{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
}
|
||||
.skip-btn{
|
||||
position: absolute;
|
||||
background: black;
|
||||
color: #fff;
|
||||
margin: 10px;
|
||||
right: 10px;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
bottom: 10%;
|
||||
position: absolute;
|
||||
}
|
||||
.info-container ion-icon{
|
||||
margin: 10px;
|
||||
font-size: 32px;
|
||||
padding: 10px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
.red{
|
||||
background: #ff5757;
|
||||
|
||||
color: #fff;
|
||||
}
|
||||
.green{
|
||||
background: #23f172;
|
||||
|
||||
color: #fff;
|
||||
}
|
||||
.white{
|
||||
background: #fff;
|
||||
|
||||
color: #000;
|
||||
}
|
||||
.seconds{
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HomeComponent } from './home.component';
|
||||
|
||||
describe('HomeComponent', () => {
|
||||
let component: HomeComponent;
|
||||
let fixture: ComponentFixture<HomeComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ HomeComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(HomeComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,68 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NavController } from '@ionic/angular';
|
||||
import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service';
|
||||
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
|
||||
import { DomSanitizer } from '@angular/platform-browser';
|
||||
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-home',
|
||||
templateUrl: './home.component.html',
|
||||
styleUrls: ['./home.component.scss'],
|
||||
})
|
||||
export class HomeComponent implements OnInit {
|
||||
isSkip: boolean = false;
|
||||
setTime: number = 5;
|
||||
advertisement: any;
|
||||
data: any;
|
||||
constructor(public nav: NavController, public cs: CommonService, public sanitizer: DomSanitizer, public authService: AuthenticationService, public ts: TranslatorService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.data = this.cs.sharedService.getSharedData(
|
||||
AuthenticationService.ADS_DATA,
|
||||
false
|
||||
);
|
||||
this.advertisement = this.data.result.data.advertisement.viewAttachFileColl[0];
|
||||
this.setTime = this.data.result.data.advertisement.durationInSeconds;
|
||||
this.setTimer();
|
||||
}
|
||||
skip() {
|
||||
this.nav.pop();
|
||||
CommonService.SKIP = true;
|
||||
}
|
||||
setTimer() {
|
||||
setTimeout(() => {
|
||||
this.setTime--;
|
||||
if (this.setTime == 0) {
|
||||
this.isSkip = true;
|
||||
} else {
|
||||
this.setTimer();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
setView(status) {
|
||||
// var request =
|
||||
// {
|
||||
// "ItgSurveyId": data.serviceId, "ItgNotificationMasterId": data.notificationMasterId, "ItgComments": this.note, "ItgQuestionResponses": [
|
||||
// { "questionId": 1, "optionId": null, "starRating": parseInt(this.rate) },
|
||||
// { "questionId": 2, "optionId": 4, "starRating": parseInt(this.satisfied) }
|
||||
// ]
|
||||
// };
|
||||
|
||||
|
||||
|
||||
this.authService.setViewAds({
|
||||
"ItgNotificationMasterId": this.data.result.data.notificationMasterId,
|
||||
"ItgAdvertisement": {
|
||||
"advertisementId": this.data.result.data.advertisementId,
|
||||
"acknowledgment": status
|
||||
}
|
||||
}, (
|
||||
|
||||
) => { }, this.ts.trPK('general', 'ok')).subscribe((result) => {
|
||||
CommonService.SKIP = true;
|
||||
this.cs.openHome();
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,72 @@
|
||||
<ion-content padding class="survey-content">
|
||||
<!-- <div class="skip-btn" (click)="skip()" *ngIf="isSkip ==true">{{ts.trPK('worklistMain','skip')}} </div>
|
||||
<div class="seconds" *ngIf="isSkip ==false">{{setTime}}</div> -->
|
||||
<ion-grid class="ion-no-padding grid-parent">
|
||||
<ion-row>
|
||||
<ion-text class="title-text">
|
||||
|
||||
{{ts.trPK('erm-channel','fedback-about-ux')}}
|
||||
</ion-text>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col [size]="12">
|
||||
<p class="subheading">1. {{ts.trPK('erm-channel','how-would-you-like')}} </p>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col [size]="12">
|
||||
<rating id="surveyRatingNew" [(ngModel)]="rate" readonly="false" size="default"></rating>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<p class="subheading">2. {{ts.trPK('erm-channel','how-would-you-satisfied')}} </p>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row class="faces-row">
|
||||
<ion-col [ngClass]="{'select2' : satisfied=='1'}">
|
||||
<img class="face" src="assets/icon/rate/poor.svg" (click)="select(1)">
|
||||
</ion-col>
|
||||
<ion-col [ngClass]="{'select2' : satisfied=='2'}">
|
||||
<img class="face" src="assets/icon/rate/bad.svg" (click)="select(2)">
|
||||
</ion-col>
|
||||
<ion-col [ngClass]="{'select2' : satisfied=='3'}">
|
||||
<img class="face" src="assets/icon/rate/normal.svg" (click)="select(3)">
|
||||
</ion-col>
|
||||
<ion-col [ngClass]="{'select2' : satisfied=='4'}">
|
||||
<img class="face" src="assets/icon/rate/good.svg" (click)="select(4)">
|
||||
</ion-col>
|
||||
<ion-col [ngClass]="{'select2' : satisfied=='5'}">
|
||||
<img class="face" src="assets/icon/rate/xcellent.svg" (click)="select(5)">
|
||||
</ion-col>
|
||||
|
||||
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<p class="comments"> {{ts.trPK('erm-channel','give-comments')}} </p>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-card class="doctor-card">
|
||||
|
||||
<ion-row class="input-field">
|
||||
<ion-col [size]="12">
|
||||
|
||||
|
||||
<ion-textarea rows="6" cols="20" [(ngModel)]="note" [placeholder]="ts.trPK('replacementRoll','enterNote')"></ion-textarea>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-card>
|
||||
|
||||
</ion-content>
|
||||
<ion-footer >
|
||||
<div class="centerDiv">
|
||||
<ion-button class="footer-button" ion-button (click)="saveSurvey()" [disabled]="!rate || (rate==1 && !note)">
|
||||
{{'general,submit' | translate}} </ion-button>
|
||||
|
||||
</div>
|
||||
</ion-footer>
|
||||
@ -0,0 +1,55 @@
|
||||
|
||||
.survey-content{
|
||||
--background:#f5f5f5;
|
||||
|
||||
}
|
||||
.title-text{ font-size: 28px; font-weight: bold;text-align: center; margin-top:20%}
|
||||
.survey-content{
|
||||
margin-top:50px;
|
||||
}
|
||||
.subheading{
|
||||
margin:30px 30px 0px 30px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;}
|
||||
|
||||
.bottom-line{
|
||||
height: 150px;
|
||||
}
|
||||
.doctor-card{
|
||||
background: #fff;
|
||||
margin: 10px 20px 10px 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.comments{
|
||||
margin-left: 20px;
|
||||
margin-bottom: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
.faces-row{
|
||||
margin-left: 20px;
|
||||
margin-right:20px;
|
||||
}
|
||||
.faces-row ion-col{
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
border-radius: 7px;
|
||||
margin: 5px;
|
||||
}
|
||||
ion-footer .footer-button{
|
||||
--background: #259CB8;
|
||||
width: 80%;
|
||||
background: #259CB8;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.skip-btn{
|
||||
position: absolute;
|
||||
background: black;
|
||||
color: #fff;
|
||||
margin: 10px;
|
||||
right: 10px;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.select2{
|
||||
border:1px solid #000;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { SurveyComponent } from './survey.component';
|
||||
|
||||
describe('SurveyComponent', () => {
|
||||
let component: SurveyComponent;
|
||||
let fixture: ComponentFixture<SurveyComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ SurveyComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SurveyComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,63 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NavController } from '@ionic/angular';
|
||||
import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service';
|
||||
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
|
||||
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-survey',
|
||||
templateUrl: './survey.component.html',
|
||||
styleUrls: ['./survey.component.scss'],
|
||||
})
|
||||
export class SurveyComponent implements OnInit {
|
||||
rate: any;
|
||||
isSkip: boolean = false;
|
||||
setTime: number = 5;
|
||||
satisfied: any = '5';
|
||||
note: any;
|
||||
constructor(public ts: TranslatorService, public cs: CommonService, public nav: NavController, public authService: AuthenticationService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.setTimer();
|
||||
}
|
||||
skip() {
|
||||
this.nav.pop();
|
||||
CommonService.SKIP = true;
|
||||
}
|
||||
setTimer() {
|
||||
setTimeout(() => {
|
||||
this.setTime--;
|
||||
if (this.setTime == 0) {
|
||||
this.isSkip = true;
|
||||
} else {
|
||||
this.setTimer();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
saveSurvey() {
|
||||
|
||||
var data = this.cs.sharedService.getSharedData(
|
||||
AuthenticationService.SERVEY_DATA,
|
||||
false
|
||||
)
|
||||
|
||||
var request =
|
||||
{
|
||||
"ItgSurveyId": data.serviceId, "ItgNotificationMasterId": data.notificationMasterId, "ItgComments": this.note, "ItgQuestionResponses": [
|
||||
{ "questionId": 1, "optionId": null, "starRating": parseInt(this.rate) },
|
||||
{ "questionId": 2, "optionId": 4, "starRating": parseInt(this.satisfied) }
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
|
||||
this.authService.saveAdsStatus(request, () => { }, this.ts.trPK('general', 'ok')).subscribe((result) => {
|
||||
CommonService.SKIP = true;
|
||||
this.cs.openHome();
|
||||
})
|
||||
}
|
||||
select(rating) {
|
||||
this.satisfied = rating;
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AnnouncementService } from './announcement.service';
|
||||
|
||||
describe('AnnouncementService', () => {
|
||||
beforeEach(() => TestBed.configureTestingModule({}));
|
||||
|
||||
it('should be created', () => {
|
||||
const service: AnnouncementService = TestBed.get(AnnouncementService);
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,35 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Request } from 'src/app/hmg-common/services/models/request';
|
||||
import { Observable } from 'rxjs';
|
||||
import { AuthenticationService } from '../authentication/authentication.service';
|
||||
import { ConnectorService } from '../connector/connector.service';
|
||||
import { AnnouncementRequest } from '../models/announcement-request';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AnnouncementService {
|
||||
public static getAnnouncemntList = 'Services/COCWS.svc/REST/GetAnnouncementDiscountsConfigData';
|
||||
|
||||
constructor(
|
||||
public authService: AuthenticationService,
|
||||
public con: ConnectorService,
|
||||
) { }
|
||||
|
||||
|
||||
getAnnouncementListService(pageNumber: number, id?: number, onError ?: any , oerrorLable ?: any) {
|
||||
const request = new AnnouncementRequest();
|
||||
this.authService.authenticateRequest(request);
|
||||
request.EmployeeNumber = request.P_USER_NAME;
|
||||
request.ItgPageNo = pageNumber;
|
||||
request.ItgPageSize = 5;
|
||||
request.ItgAwarenessID = 0;
|
||||
request.ItgRowID = (id) ? Number(id) : 0;
|
||||
return this.con.postNoLoad(
|
||||
AnnouncementService.getAnnouncemntList,
|
||||
request,
|
||||
onError,
|
||||
oerrorLable
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
|
||||
import { Request } from 'src/app/hmg-common/services/models/request';
|
||||
|
||||
export class AnnouncementRequest extends Request {
|
||||
public TokenID: string;
|
||||
public EmployeeNumber: string;
|
||||
public ItgPageNo: number;
|
||||
public ItgPageSize: number;
|
||||
public ItgAwarenessID: number;
|
||||
public ItgRowID: number;
|
||||
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
|
||||
|
||||
<div class="main-container" [ngStyle]="active === true ? {'color': color} : {}">
|
||||
<div class="main-container-radius" [ngStyle]="active === true ? {'color': '#ffffff'} : {'color': color}"></div>
|
||||
<span class="text-span" [ngStyle]="active === true ? {'color': '#269DB8'} : {}">{{text}}</span>
|
||||
</div>
|
||||
@ -0,0 +1,21 @@
|
||||
|
||||
|
||||
.main-container{
|
||||
width: 47px;
|
||||
position: relative;
|
||||
margin-left: 9px;
|
||||
}
|
||||
.main-container-radius{
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
}
|
||||
.number-span{
|
||||
display: block;
|
||||
|
||||
}
|
||||
|
||||
.text-span{
|
||||
font-size: 13px;
|
||||
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
|
||||
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { CardCalendarComponent } from './card-calendar.component';
|
||||
|
||||
describe('CardCalendarComponent', () => {
|
||||
let component: CardCalendarComponent;
|
||||
let fixture: ComponentFixture<CardCalendarComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ CardCalendarComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(CardCalendarComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,18 @@
|
||||
import { Component, OnInit, Input } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-card-calendar',
|
||||
templateUrl: './card-calendar.component.html',
|
||||
styleUrls: ['./card-calendar.component.scss'],
|
||||
})
|
||||
export class CardCalendarComponent implements OnInit {
|
||||
|
||||
@Input() text: string;
|
||||
@Input() active: boolean;
|
||||
@Input() color: string;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {}
|
||||
|
||||
}
|
||||
@ -0,0 +1,273 @@
|
||||
|
||||
<ion-content>
|
||||
<div class="head-title">
|
||||
<!-- <ion-toolbar class="header-toolbar">
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title color="light" >{{ts.trPK('itemforsale','title')}}</ion-title>
|
||||
</ion-toolbar> -->
|
||||
|
||||
<app-generic-header
|
||||
showImage="false"
|
||||
showBack="true"
|
||||
[headerText]="'itemforsale,title' | translate">
|
||||
</app-generic-header>
|
||||
</div>
|
||||
<div class="header"></div>
|
||||
<div class="bottom"></div>
|
||||
<div class="md-stepper-horizontal ">
|
||||
<ion-row>
|
||||
<ion-col size="4"> <div class="md-step active " [ngClass]="step >1 ? 'green' : 'orange'">
|
||||
<div class="md-step-circle"><span style="content: url(/assets/imgs/check-white.svg)"></span></div>
|
||||
<div class="md-step-title">{{ts.trPK('itemforsale','select-category')}}</div>
|
||||
<div class="md-step-optional">{{ts.trPK('itemforsale','completed')}}</div>
|
||||
<div class="md-step-bar-left"></div>
|
||||
<!-- <div class="md-step-bar-right" [ngClass]="step ==1 ? 'orange-border' : 'green-border'"></div> -->
|
||||
</div>
|
||||
</ion-col>
|
||||
|
||||
<ion-col size="4"> <div class="md-step" [ngClass]="step >2 ? 'green' : step ==2 ? 'orange' : 'grey'">
|
||||
<div class="md-step-circle"><span *ngIf="step==1" style="content: url(/assets/imgs/check.svg)"></span>
|
||||
<span *ngIf="step>2 || step==2" style="content: url(/assets/imgs/check-white.svg)">
|
||||
</span>
|
||||
</div>
|
||||
<div class="md-step-title">{{ts.trPK('itemforsale','add-details')}}</div>
|
||||
|
||||
<div class="md-step-optional">{{step >2 ? "Completed" : "Locked"}}</div>
|
||||
<div class="md-step-bar-left"></div>
|
||||
|
||||
</div></ion-col>
|
||||
<ion-col size="4"><div class="md-step" [ngClass]="step >3 ? 'green' : step ==3 ? 'orange' : 'grey'">
|
||||
<div class="md-step-circle"><span *ngIf="step==1 || step==2" style="content: url(/assets/imgs/check.svg)"></span>
|
||||
<span *ngIf="step>=3" style="content: url(/assets/imgs/check-white.svg)"></span></div>
|
||||
<div class="md-step-title">{{ts.trPK('itemforsale','review-sell')}}</div>
|
||||
<div class="md-step-optional">{{step >3 ? "Completed" : "Locked"}}</div>
|
||||
<div class="md-step-bar-left"></div>
|
||||
|
||||
</div></ion-col>
|
||||
</ion-row>
|
||||
</div>
|
||||
<div class="content">
|
||||
|
||||
|
||||
|
||||
<div class="offering" *ngIf="step==1">
|
||||
<h2>What are you offering?</h2>
|
||||
</div>
|
||||
<ion-grid *ngIf="step==1">
|
||||
<ion-row>
|
||||
<ion-col size="4">
|
||||
<div class="sale-icon" (click)="nextStep()">
|
||||
<div class="top">
|
||||
<img src="/assets/imgs/itemsforsale/mobile.svg">
|
||||
</div>
|
||||
<div class="bottom-icon">
|
||||
<p>Mobile & Tablets</p>
|
||||
</div>
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="4">
|
||||
<div class="sale-icon" (click)="openItem()">
|
||||
<div class="top">
|
||||
<img src="/assets/imgs/itemsforsale/cars.svg">
|
||||
</div>
|
||||
<div class="bottom-icon">
|
||||
<p>Cars & Vehicles</p>
|
||||
</div>
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="4">
|
||||
<div class="sale-icon">
|
||||
<div class="top">
|
||||
<img src="/assets/imgs/itemsforsale/electronic_appliances.svg">
|
||||
</div>
|
||||
<div class="bottom-icon">
|
||||
<p>Electronic Applicance</p>
|
||||
</div>
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="4">
|
||||
<div class="sale-icon">
|
||||
<div class="top">
|
||||
<img src="/assets/imgs/itemsforsale/furniture.svg">
|
||||
</div>
|
||||
<div class="bottom-icon">
|
||||
<p>Furniture & Home Decor</p>
|
||||
</div>
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="4">
|
||||
<div class="sale-icon">
|
||||
<div class="top">
|
||||
<img src="/assets/imgs/itemsforsale/fashion.svg">
|
||||
</div>
|
||||
<div class="bottom-icon">
|
||||
<p>Fashion & beauty</p>
|
||||
</div>
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="4">
|
||||
<div class="sale-icon">
|
||||
<div class="top">
|
||||
<img src="/assets/imgs/itemsforsale/book and sports.svg">
|
||||
</div>
|
||||
<div class="bottom-icon">
|
||||
<p>Books, Sports & Hobbies</p>
|
||||
</div>
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
<div class="offering" *ngIf="step==2">
|
||||
<h2>Add Details</h2>
|
||||
</div>
|
||||
<div class="add-details" *ngIf="step==2">
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<p>Item Info</p>
|
||||
<ion-col size="12">
|
||||
<ion-item lines="none">
|
||||
<ion-input placeholder="Item Info"></ion-input>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col size="12">
|
||||
<ion-item lines="none">
|
||||
|
||||
|
||||
<ion-textarea rows="6" cols="20" placeholder="Description"></ion-textarea>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<p>Item Condition</p>
|
||||
<ion-radio-group value="new">
|
||||
|
||||
|
||||
|
||||
<ion-col>
|
||||
<ion-radio value="new"></ion-radio>
|
||||
<ion-label>New</ion-label>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-radio value="used"></ion-radio>
|
||||
<ion-label>Used</ion-label>
|
||||
</ion-col>
|
||||
|
||||
|
||||
</ion-radio-group>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col size="12">
|
||||
<p>Item Price</p>
|
||||
<ion-item lines="none">
|
||||
<ion-input placeholder="Item Price"></ion-input>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
|
||||
<p>Item Photos</p>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col lines="none" size="3">
|
||||
<div class="image-container">
|
||||
<div class="uploaded">
|
||||
<div class="closed">X</div>
|
||||
<img src="assets/imgs/itemsforsale/fashion.svg" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col lines="none" size="3">
|
||||
<div class="image-container">
|
||||
<div class="uploaded">
|
||||
<div class="closed">X</div>
|
||||
<img src="assets/imgs/itemsforsale/fashion.svg" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col lines="none" size="3">
|
||||
<div class="image-container uploader-box">
|
||||
<div class="uploaded">
|
||||
<ion-icon name="camera" class="camera-icon"></ion-icon>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
|
||||
|
||||
</ion-grid>
|
||||
</div>
|
||||
|
||||
<div class="offering" *ngIf="step==3">
|
||||
<h2>Review & Sell</h2>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="add-details" *ngIf="step==3">
|
||||
<h2 class="review-title">Furniture Table</h2>
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
Consectetur adipiscing elit. Donec blandit diam nulla, non euismod eros efficitur imperdiet. Fusce erat enim, volutpat at enim in, venenatis iaculis risus.
|
||||
</p>
|
||||
<div class="description-details">
|
||||
<p class="orange">Used</p>
|
||||
|
||||
<img src="assets/imgs/itemsforsale/fashion.svg" />
|
||||
<img src="assets/imgs/itemsforsale/fashion.svg" />
|
||||
<div class="selling">
|
||||
|
||||
|
||||
<strong>Selling for </strong> <h2>500 SAR</h2>
|
||||
</div>
|
||||
<div class="waring">
|
||||
<img src="/assets/imgs/itemsforsale/alert.svg"> <label>This ad will be valid for 2 week after approval</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<ion-footer *ngIf="step==1">
|
||||
<div class="centerDiv">
|
||||
<ion-button class="footer-button red-button" ion-button>
|
||||
cancel </ion-button>
|
||||
|
||||
|
||||
</div>
|
||||
</ion-footer>
|
||||
|
||||
|
||||
<ion-footer *ngIf="step>1">
|
||||
<div class="centerDiv">
|
||||
<ion-button class="footer-button red-button small-btn" ion-button (click)="step =3" *ngIf="step ==2 || step ==3">
|
||||
cancel </ion-button>
|
||||
<ion-button class="footer-button small-btn" ion-button (click)="step =3" *ngIf="step ==2">
|
||||
{{ts.trPK('general','next')}} </ion-button>
|
||||
|
||||
<ion-button class="footer-button small-btn" ion-button (click)="openItem()" *ngIf="step ==3">
|
||||
Confirm </ion-button>
|
||||
</div>
|
||||
</ion-footer>
|
||||
|
||||
</ion-content>
|
||||
@ -0,0 +1,343 @@
|
||||
.md-stepper-horizontal {
|
||||
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0 3px 8px -6px #DDDDDD;
|
||||
|
||||
margin: auto;
|
||||
position: relative;
|
||||
border-radius: 25px;
|
||||
}
|
||||
.md-stepper-horizontal .md-step {
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
padding: 20px 10px;
|
||||
text-align: left;
|
||||
}
|
||||
.md-stepper-horizontal .md-step:hover,
|
||||
.md-stepper-horizontal .md-step:active {
|
||||
background-color:rgba(0,0,0,0.04);
|
||||
}
|
||||
.md-stepper-horizontal .md-step:active {
|
||||
border-radius: 15% / 75%;
|
||||
}
|
||||
.md-stepper-horizontal .md-step:first-child:active {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.md-stepper-horizontal .md-step:last-child:active {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.md-stepper-horizontal .md-step:hover .md-step-circle {
|
||||
background-color:#757575;
|
||||
}
|
||||
.md-stepper-horizontal ion-col:last-child .md-step-bar-left {
|
||||
display:none;
|
||||
}
|
||||
.md-stepper-horizontal .md-step .md-step-circle {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
z-index: 3;
|
||||
}
|
||||
.md-stepper-horizontal .md-step:last-child .md-step-circle {
|
||||
margin-left:0px
|
||||
}
|
||||
.md-stepper-horizontal.green .md-step.active .md-step-circle {
|
||||
background-color:#00AE4D;
|
||||
}
|
||||
.md-stepper-horizontal.orange .md-step.active .md-step-circle {
|
||||
background-color:#CC9B14;
|
||||
}
|
||||
.md-stepper-horizontal .md-step.active .md-step-circle {
|
||||
background-color: rgb(33,150,243);
|
||||
}
|
||||
.md-stepper-horizontal .md-step.done .md-step-circle:before {
|
||||
font-family:'FontAwesome';
|
||||
font-weight:100;
|
||||
content: "\f00c";
|
||||
}
|
||||
.md-stepper-horizontal .md-step.done .md-step-circle *,
|
||||
.md-stepper-horizontal .md-step.editable .md-step-circle * {
|
||||
display:none;
|
||||
}
|
||||
.md-stepper-horizontal .md-step.editable .md-step-circle {
|
||||
-moz-transform: scaleX(-1);
|
||||
-o-transform: scaleX(-1);
|
||||
-webkit-transform: scaleX(-1);
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
.md-stepper-horizontal .md-step.editable .md-step-circle:before {
|
||||
font-family:'FontAwesome';
|
||||
font-weight:100;
|
||||
content: "\f040";
|
||||
}
|
||||
.md-stepper-horizontal .md-step .md-step-title {
|
||||
margin-top: 5px;
|
||||
font-size: 10px;
|
||||
font-weight:bold;
|
||||
}
|
||||
.md-stepper-horizontal .md-step .md-step-title,
|
||||
.md-stepper-horizontal .md-step .md-step-optional {
|
||||
text-align: center;
|
||||
color:rgba(0,0,0,.26);
|
||||
margin-left:0 ;
|
||||
}
|
||||
.md-stepper-horizontal .md-step.orange .md-step-title, .md-stepper-horizontal .md-step.green .md-step-title {
|
||||
font-weight: 600;
|
||||
color:black;
|
||||
}
|
||||
.md-stepper-horizontal .md-step.active.done .md-step-title,
|
||||
.md-stepper-horizontal .md-step.active.editable .md-step-title {
|
||||
font-weight:600;
|
||||
}
|
||||
.md-stepper-horizontal .md-step .md-step-optional {
|
||||
font-size:10px;
|
||||
}
|
||||
|
||||
.md-stepper-horizontal .md-step .md-step-bar-left,
|
||||
.md-stepper-horizontal .md-step .md-step-bar-right {
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
height: 2px;
|
||||
background: #DDDDDD;
|
||||
width: 120px;
|
||||
z-index: 0;
|
||||
left: 25px;
|
||||
}
|
||||
|
||||
.md-stepper-horizontal .md-step .md-step-bar-left {
|
||||
margin-right: 0px;
|
||||
left: 40%;
|
||||
}
|
||||
.orange .md-step-bar-left {
|
||||
background:#CC9B14 !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
.green .md-step-bar-left {
|
||||
background:#1FA169 !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
.header{
|
||||
height: 15%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background: #259CB8;
|
||||
top: 0;
|
||||
}
|
||||
.header-toolbar{
|
||||
--background: #259CB8 !important;
|
||||
}
|
||||
.bottom{
|
||||
height: 85%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background: #F5F5F5;
|
||||
top: 15%;
|
||||
}
|
||||
.md-step-optional{
|
||||
font-size: 12px;
|
||||
background: #cccccc;
|
||||
color: #ffffff !important;
|
||||
padding: 2px 5px 2px 5px;
|
||||
border-radius: 5px;
|
||||
margin: 5px;
|
||||
}
|
||||
.orange .md-step-optional{
|
||||
font-size: 12px;
|
||||
background: #CC9B14;
|
||||
color: #ffffff !important;
|
||||
padding:2px 5px 2px 5px;
|
||||
border-radius: 5px;
|
||||
margin-left:0 ;
|
||||
}
|
||||
.green .md-step-optional{
|
||||
font-size: 12px;
|
||||
background-color:#00AE4D;
|
||||
color: #ffffff !important;
|
||||
padding: 2px 5px 2px 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.green .md-step-circle{
|
||||
background-color:#00AE4D !important;
|
||||
}
|
||||
.orange .md-step-circle{
|
||||
background: #CC9B14 !important;
|
||||
}
|
||||
.grey .md-step-circle{
|
||||
background: #E3E3E3 !important;
|
||||
}
|
||||
.content{
|
||||
position: relative;
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
.offering{
|
||||
font-weight: bold;
|
||||
margin: 20px 20px 0px;
|
||||
position: relative;
|
||||
}
|
||||
.offering h2{
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.sale-icon{
|
||||
box-shadow: 1px 1px 5px 1px #cccc;
|
||||
padding: 10px;
|
||||
margin: 2px;
|
||||
border-radius: 15px;
|
||||
background: #fff;
|
||||
height: 115px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sale-icon ion-icon{
|
||||
font-size: 35px;
|
||||
}
|
||||
.sale-icon p{
|
||||
margin-bottom: 0;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
text-align: left;
|
||||
padding: 5px;
|
||||
}
|
||||
.add-details{
|
||||
background: #fff;
|
||||
margin: 15px;
|
||||
padding: 10px;
|
||||
box-shadow: 3px 4px 3px -1px #ccc;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.add-details ion-item{
|
||||
border-radius: 25px;
|
||||
border: 1px solid #cdcd;
|
||||
padding: 5px;
|
||||
}
|
||||
.add-details p{
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
.add-details ion-label{
|
||||
margin: 10px;
|
||||
position: relative;
|
||||
bottom: 3px;
|
||||
}
|
||||
.add-details ion-radio {
|
||||
--color-checked: #009688;
|
||||
}
|
||||
.image-container{
|
||||
position: relative;
|
||||
height: 70px;
|
||||
}
|
||||
.image-container .uploaded{
|
||||
position: relative;
|
||||
}
|
||||
.image-container .uploaded .closed{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
top: -15px;
|
||||
right: -10px;
|
||||
font-weight: bolder;
|
||||
background: red;
|
||||
padding: 6px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: .7;
|
||||
}
|
||||
.image-container .uploaded img{
|
||||
width: 70px;
|
||||
}
|
||||
.footer-button{
|
||||
background: var(--newgreen)!important;border-radius: 10px; --background: transparent;
|
||||
width: 80%;
|
||||
}
|
||||
.description-details .orange{
|
||||
color: #CC9B14;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
.description-details img{
|
||||
margin:10px;
|
||||
}
|
||||
.waring{
|
||||
color: #CA3332;
|
||||
padding: 10px;
|
||||
font-size: 10px;
|
||||
|
||||
}
|
||||
.waring label{
|
||||
font-size: 11px;
|
||||
padding: 0px 10px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
}
|
||||
.waring img{
|
||||
margin: 0px;
|
||||
}
|
||||
.selling h2{
|
||||
display: inline-block;
|
||||
font-weight: bolder;
|
||||
font-size: 25px;
|
||||
}
|
||||
.selling strong{
|
||||
font-size: 14px;
|
||||
}
|
||||
.flaot-button{float:right;margin:30px}
|
||||
.orange-border{
|
||||
border-top:2px solid #CC9B14;
|
||||
}
|
||||
.green-border{
|
||||
border-top:2px solid #00AE4D;
|
||||
}
|
||||
.md-step span{
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.red-button{
|
||||
--background:#CA3332;
|
||||
}
|
||||
ion-footer{
|
||||
bottom: 0;
|
||||
position: fixed;
|
||||
}
|
||||
.small-btn{
|
||||
width: 40%;
|
||||
}
|
||||
.uploader-box{
|
||||
border-width: 2px;
|
||||
border-color: #259CB8;
|
||||
border-style: dotted;
|
||||
border-radius: 10px;
|
||||
left: 10px;
|
||||
|
||||
}
|
||||
.review-title{
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.camera-icon{
|
||||
font-size: 35px;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 60px;
|
||||
bottom: 0;
|
||||
color: #259CB8;
|
||||
}
|
||||
.top img{
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HomeComponent } from './home.component';
|
||||
|
||||
describe('HomeComponent', () => {
|
||||
let component: HomeComponent;
|
||||
let fixture: ComponentFixture<HomeComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ HomeComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(HomeComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,27 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
|
||||
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-home',
|
||||
templateUrl: './home.component.html',
|
||||
styleUrls: ['./home.component.scss'],
|
||||
})
|
||||
export class HomeComponent implements OnInit {
|
||||
step: any = 1;
|
||||
constructor(public ts: TranslatorService, public cs: CommonService,) { }
|
||||
|
||||
ngOnInit() { }
|
||||
openItem() {
|
||||
|
||||
|
||||
this.cs.navigateForward('/itemforsale/items');
|
||||
}
|
||||
nextStep() {
|
||||
this.step = 2;
|
||||
}
|
||||
openMyAds() {
|
||||
this.cs.navigateForward('/itemforsale/my-ads');
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,63 @@
|
||||
<ion-content>
|
||||
<div class="head-title">
|
||||
|
||||
<app-generic-header
|
||||
showImage="false"
|
||||
showBack="true"
|
||||
[headerText]="'itemforsale,title' | translate">
|
||||
</app-generic-header>
|
||||
</div>
|
||||
<div class="header"></div>
|
||||
<div class="bottom"></div>
|
||||
<div>
|
||||
<ion-card>
|
||||
<ion-card-header>
|
||||
<img src="https://ii1.pepperfry.com/media/catalog/product/r/o/568x625/royal-wing-chair-in-blue-color-by-dreamzz-furniture-royal-wing-chair-in-blue-color-by-dreamzz-furnit-6hcjya.jpg" />
|
||||
|
||||
|
||||
<ion-card-title>Furniture Table</ion-card-title>
|
||||
</ion-card-header>
|
||||
|
||||
<ion-card-content>
|
||||
Keep close to Nature's heart... and break clear away, once in awhile,
|
||||
and climb a mountain or spend a week in the woods. Wash your spirit clean.
|
||||
<div class="content-bottom">
|
||||
<p class="green">New</p>
|
||||
<h1>500 SAR</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="profile">
|
||||
<ion-item lines="none" >
|
||||
<ion-avatar slot="start">
|
||||
<img class="profile-img" src="/assets/imgs/S.png">
|
||||
</ion-avatar>
|
||||
<ion-label>
|
||||
<p class="profile-title">Mohammed Imran</p>
|
||||
<p>Posted on 22 April 2020</p>
|
||||
<p><a href="">View Profile</a></p>
|
||||
</ion-label>
|
||||
|
||||
</ion-item>
|
||||
|
||||
</div>
|
||||
</ion-card-content>
|
||||
|
||||
|
||||
</ion-card>
|
||||
</div>
|
||||
|
||||
|
||||
<ion-footer >
|
||||
<div class="centerDiv details-button" >
|
||||
|
||||
<ion-button class="footer-button" ion-button>
|
||||
<img class="icon-footer" src="/assets/imgs/itemsforsale/sms.svg">
|
||||
{{ts.trPK('sms','title')}} </ion-button>
|
||||
|
||||
<ion-button class="footer-button" ion-button>
|
||||
<img class="icon-footer" src="/assets/imgs/itemsforsale/call.svg">
|
||||
{{ts.trPK('vacation-rule','call')}} </ion-button>
|
||||
</div>
|
||||
</ion-footer>
|
||||
</ion-content>
|
||||
@ -0,0 +1,79 @@
|
||||
.header{
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
|
||||
position: absolute;
|
||||
background: #259CB8;
|
||||
top: 0;
|
||||
}
|
||||
.header-toolbar{
|
||||
--background: #259CB8 !important;
|
||||
}
|
||||
.bottom{
|
||||
height: 88%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background: #F5F5F5;
|
||||
top: 20%;
|
||||
}
|
||||
ion-card-header{
|
||||
background-color: #fff;
|
||||
padding: 10px 10px 5px !important;
|
||||
}
|
||||
ion-card-header img{
|
||||
height: 320px;
|
||||
}
|
||||
ion-card-title{
|
||||
margin: 15px 10px 0px;
|
||||
}
|
||||
ion-card-content{
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
.content-bottom{
|
||||
padding-top: 15px;
|
||||
}
|
||||
.green{
|
||||
color:#1FA169;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
.content-bottom h1{
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.details-button ion-button{
|
||||
--background: #565656;
|
||||
width: 150px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.profile-title{
|
||||
color:#000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.profile-img{
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
ion-avatar{
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
ion-avatar p{
|
||||
color:#000;
|
||||
}
|
||||
ion-avatar a{
|
||||
color:#259CB8;
|
||||
text-decoration: underline;
|
||||
}
|
||||
ion-footer{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
}
|
||||
.icon-footer{
|
||||
margin: 0px;
|
||||
position: relative;
|
||||
left: -10px;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ItemDetailsComponent } from './item-details.component';
|
||||
|
||||
describe('ItemDetailsComponent', () => {
|
||||
let component: ItemDetailsComponent;
|
||||
let fixture: ComponentFixture<ItemDetailsComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ItemDetailsComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ItemDetailsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
|
||||
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-item-details',
|
||||
templateUrl: './item-details.component.html',
|
||||
styleUrls: ['./item-details.component.scss'],
|
||||
})
|
||||
export class ItemDetailsComponent implements OnInit {
|
||||
constructor(public ts: TranslatorService, public cs: CommonService,) { }
|
||||
|
||||
ngOnInit() { }
|
||||
|
||||
}
|
||||
@ -0,0 +1,50 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { ItemforsalePage } from './itemforsale.page';
|
||||
import { HomeComponent } from './home/home.component';
|
||||
import { ItemsComponent } from './items/items.component';
|
||||
import { ItemDetailsComponent } from './item-details/item-details.component';
|
||||
import { MyAdsComponent } from './my-ads/my-ads.component';
|
||||
import { HmgCommonModule } from '../hmg-common/hmg-common.module';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: ItemforsalePage,
|
||||
children: [
|
||||
{
|
||||
path: 'home',
|
||||
component: HomeComponent
|
||||
},
|
||||
{
|
||||
path: 'items',
|
||||
component: ItemsComponent
|
||||
},
|
||||
{
|
||||
path: 'items-details',
|
||||
component: ItemDetailsComponent
|
||||
},
|
||||
{
|
||||
path: 'my-ads',
|
||||
component: MyAdsComponent
|
||||
}
|
||||
],
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
HmgCommonModule,
|
||||
RouterModule.forChild(routes)
|
||||
],
|
||||
declarations: [ItemforsalePage, HomeComponent, ItemsComponent, ItemDetailsComponent, MyAdsComponent]
|
||||
})
|
||||
export class ItemforsalePageModule { }
|
||||
@ -0,0 +1,4 @@
|
||||
|
||||
<ion-content>
|
||||
<ion-router-outlet></ion-router-outlet>
|
||||
</ion-content>
|
||||
@ -0,0 +1 @@
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ItemforsalePage } from './itemforsale.page';
|
||||
|
||||
describe('ItemforsalePage', () => {
|
||||
let component: ItemforsalePage;
|
||||
let fixture: ComponentFixture<ItemforsalePage>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ItemforsalePage ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ItemforsalePage);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-itemforsale',
|
||||
templateUrl: './itemforsale.page.html',
|
||||
styleUrls: ['./itemforsale.page.scss'],
|
||||
})
|
||||
export class ItemforsalePage implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,186 @@
|
||||
<ion-content>
|
||||
<div class="head-title">
|
||||
<app-generic-header
|
||||
showImage="false"
|
||||
showBack="true"
|
||||
[headerText]="'itemforsale,title' | translate">
|
||||
</app-generic-header>
|
||||
</div>
|
||||
<div class="segments-container">
|
||||
<ion-segment (ionChange)="segmentChanged($event)" value="1" class="item-for-sale-indicator">
|
||||
<ion-segment-button value="1" >
|
||||
<ion-label>{{ts.trPK('itemforsale','title')}} </ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="2">
|
||||
<ion-label>{{ts.trPK('itemforsale','my-posted-ad')}}</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</div>
|
||||
<div class="header"></div>
|
||||
<div class="bottom"></div>
|
||||
|
||||
<div class="sales-items" *ngIf="segment =='1'">
|
||||
<div class="fab-button">
|
||||
<ion-fab-button class="flaot-button" (click)="openSale()"><img src="assets/imgs/itemsforsale/add.svg"></ion-fab-button>
|
||||
</div>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
|
||||
<ion-col size="12">
|
||||
<ion-item lines="none" class="SearchtextBox">
|
||||
<ion-input [placeholder]="'itemforsale,search-items'| translate"></ion-input>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col size="10">
|
||||
<p class="filterText"> {{ts.trPK('itemforsale','browse-categories')}} </p>
|
||||
</ion-col>
|
||||
<ion-col size="2">
|
||||
<img class="filter-icon" src="assets/imgs/itemsforsale/filter.svg">
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<div class="container-icon">
|
||||
<div class="box-icon">
|
||||
<div class="sale-icon">
|
||||
<div class="top">
|
||||
<img src="assets/imgs/itemsforsale/mobile.svg">
|
||||
</div>
|
||||
<div class="bottom-icon">
|
||||
<p>Mobile & Tablets</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-icon">
|
||||
<div class="sale-icon">
|
||||
<div class="top">
|
||||
<img src="assets/imgs/itemsforsale/cars.svg">
|
||||
</div>
|
||||
<div class="bottom-icon">
|
||||
<p>Cars & Vehicle</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-icon">
|
||||
<div class="sale-icon">
|
||||
<div class="top">
|
||||
<img src="assets/imgs/itemsforsale/electronic_appliances.svg">
|
||||
</div>
|
||||
<div class="bottom-icon">
|
||||
<p>Electronic Appliance</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-icon">
|
||||
<div class="sale-icon">
|
||||
<div class="top">
|
||||
<img src="assets/imgs/itemsforsale/fashion.svg">
|
||||
</div>
|
||||
<div class="bottom-icon">
|
||||
<p>Fashion & Beauty</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="grid-row">
|
||||
<ion-row >
|
||||
<ion-col size="6" (click)="openDetails()">
|
||||
<ion-card>
|
||||
<ion-card-header>
|
||||
<img src="https://ii1.pepperfry.com/media/catalog/product/r/o/568x625/royal-wing-chair-in-blue-color-by-dreamzz-furniture-royal-wing-chair-in-blue-color-by-dreamzz-furnit-6hcjya.jpg" />
|
||||
|
||||
<ion-card-title>Furniture Table</ion-card-title>
|
||||
</ion-card-header>
|
||||
|
||||
<ion-card-content>
|
||||
Keep close to Nature's heart... and break
|
||||
<p class="orange">
|
||||
Used
|
||||
</p>
|
||||
<ion-row>
|
||||
<ion-col size="10">
|
||||
<strong>
|
||||
500 SAR
|
||||
</strong>
|
||||
</ion-col>
|
||||
<ion-col size="2">
|
||||
<img src="assets/imgs/itemsforsale/arrow.svg">
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</ion-col>
|
||||
<ion-col size="6" (click)="openDetails()">
|
||||
<ion-card>
|
||||
<ion-card-header>
|
||||
<img src="https://ii1.pepperfry.com/media/catalog/product/r/o/568x625/royal-wing-chair-in-blue-color-by-dreamzz-furniture-royal-wing-chair-in-blue-color-by-dreamzz-furnit-6hcjya.jpg" />
|
||||
|
||||
<ion-card-title>Furniture Table</ion-card-title>
|
||||
</ion-card-header>
|
||||
|
||||
<ion-card-content>
|
||||
Keep close to Nature's heart... and break
|
||||
<p class="green">
|
||||
New
|
||||
</p>
|
||||
<ion-row>
|
||||
<ion-col size="10">
|
||||
<strong>
|
||||
500 SAR
|
||||
</strong>
|
||||
</ion-col>
|
||||
<ion-col size="2">
|
||||
<img src="assets/imgs/itemsforsale/arrow.svg">
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-ads" *ngIf="segment =='2'">
|
||||
<ion-row>
|
||||
<ion-item button detail="false">
|
||||
<ion-thumbnail slot="start">
|
||||
<img src="https://ii1.pepperfry.com/media/catalog/product/r/o/568x625/royal-wing-chair-in-blue-color-by-dreamzz-furniture-royal-wing-chair-in-blue-color-by-dreamzz-furnit-6hcjya.jpg" />
|
||||
</ion-thumbnail>
|
||||
<ion-label class="label-thumb">
|
||||
|
||||
<h3>Furniture Table</h3>
|
||||
<p class="posted-on">
|
||||
Posted on 24 April 2021
|
||||
</p>
|
||||
<p class="details-text">good condition only 6th month used </p>
|
||||
<ion-row>
|
||||
<ion-col size="8">
|
||||
<p class="yellow">Pending Review</p>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<img class="icon" src="assets/imgs/itemsforsale/delete.svg" />
|
||||
<img class="icon edit" src="assets/imgs/itemsforsale/edit.svg" />
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-label>
|
||||
|
||||
</ion-item>
|
||||
</ion-row>
|
||||
|
||||
</div>
|
||||
|
||||
<ion-footer *ngIf="segment=='2'" >
|
||||
<div class="centerDiv">
|
||||
<ion-button class="footer-button" ion-button (click)="openSale()">
|
||||
{{ts.trPK('itemforsale','create-new-ad')}} </ion-button>
|
||||
|
||||
</div>
|
||||
</ion-footer>
|
||||
|
||||
</ion-content>
|
||||
|
||||
@ -0,0 +1,222 @@
|
||||
|
||||
.header{
|
||||
|
||||
width: 100%;
|
||||
|
||||
position: absolute;
|
||||
background: #259CB8;
|
||||
top: 0;
|
||||
}
|
||||
.header-toolbar{
|
||||
--background: #259CB8 !important;
|
||||
}
|
||||
.bottom{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background: #F5F5F5;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.filterText{
|
||||
margin: 5px 15px 15px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.container-icon{
|
||||
padding: 0 10px 20px;
|
||||
position: relative;
|
||||
white-space:nowrap;
|
||||
overflow-x:auto;
|
||||
}
|
||||
|
||||
.box-icon{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0px;
|
||||
display: inline-block;
|
||||
}
|
||||
.sale-icon{
|
||||
box-shadow: 1px 1px 5px 1px #cccc;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
.sale-icon ion-icon{
|
||||
font-size: 25px;
|
||||
}
|
||||
.sale-icon p{
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.bottom-icon{
|
||||
text-overflow: clip;
|
||||
white-space: normal;
|
||||
}
|
||||
ion-card-header{
|
||||
background: #fff;
|
||||
}
|
||||
ion-card-header img{
|
||||
margin:15px auto;
|
||||
border-radius: 6px;
|
||||
height: 170px;
|
||||
}
|
||||
ion-card-title{
|
||||
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
padding: 5px
|
||||
}
|
||||
.orange{
|
||||
color: #CC9B14;
|
||||
font-weight: bold;
|
||||
}
|
||||
.green{
|
||||
color:#1FA169;
|
||||
font-weight: bold;
|
||||
}
|
||||
ion-card-content p{
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 0px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.my-ads ion-item{
|
||||
margin: 10px;
|
||||
--border-radius: 10px;
|
||||
padding: 15px 10px 0px 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.my-ads ion-thumbnail img{
|
||||
position: relative;
|
||||
top: -10px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.my-ads .details-text{
|
||||
font-size: 11px;
|
||||
margin: 0;
|
||||
}
|
||||
.my-ads .yellow, .my-ads .green{
|
||||
font-size: 11px;
|
||||
}
|
||||
ion-segment-button{
|
||||
--background-checked: #000;
|
||||
--indicator-color : transparent!important;
|
||||
border: none;
|
||||
}
|
||||
ion-segment-button ion-label{
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
white-space: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
.segment-button-checked ion-label{
|
||||
color: #fff !important;
|
||||
}
|
||||
.segment-button-checked{
|
||||
background: rgb(46, 46, 46);
|
||||
}
|
||||
ion-item.SearchtextBox{
|
||||
--background: #fff;
|
||||
margin: 10px;
|
||||
--border-radius: 100px;
|
||||
padding: 5px;
|
||||
}
|
||||
ion-item h3{
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
.yellow{
|
||||
color:#CC9B14;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ion-item .icon{
|
||||
margin: 5px 0px;
|
||||
}
|
||||
.edit{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
.fab-button{
|
||||
position: fixed;
|
||||
bottom: 5%;
|
||||
z-index: 2;
|
||||
right: 10%;
|
||||
}
|
||||
.fab-button ion-fab-button{
|
||||
--background: #259CB8;
|
||||
}
|
||||
ion-footer{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
ion-footer .footer-button{
|
||||
--background: #259CB8;
|
||||
width: 80%;
|
||||
background: #259CB8;
|
||||
border-radius: 10px;
|
||||
}
|
||||
ion-segment{
|
||||
height:55px
|
||||
}
|
||||
ion-card{
|
||||
margin: 0px;
|
||||
--background: #fff;
|
||||
--border-radius: 53px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.filter-icon{
|
||||
margin-left: 15px;
|
||||
}
|
||||
.top img{
|
||||
width: 25px;
|
||||
height: 30px;
|
||||
margin: 5px 5px 0px 5px;
|
||||
}
|
||||
.forward-arrow{
|
||||
color:#259CB8;
|
||||
font-size: 26px;
|
||||
}
|
||||
ion-card-content{
|
||||
padding: 0 15px 10px 15px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.label-thumb h2{
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.posted-on{
|
||||
color: #969696;
|
||||
float: right;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 10px;
|
||||
margin: 5px;
|
||||
padding: 0px 5px;
|
||||
}
|
||||
.details-text{
|
||||
white-space: normal;
|
||||
}
|
||||
ion-card-content ion-icon{
|
||||
font-size: 25px;
|
||||
}
|
||||
ion-card-content strong{
|
||||
margin-left: -5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
ion-fab-button{
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
}
|
||||
.grid-row{
|
||||
margin:10px;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ItemsComponent } from './items.component';
|
||||
|
||||
describe('ItemsComponent', () => {
|
||||
let component: ItemsComponent;
|
||||
let fixture: ComponentFixture<ItemsComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ItemsComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ItemsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,25 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
|
||||
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-items',
|
||||
templateUrl: './items.component.html',
|
||||
styleUrls: ['./items.component.scss'],
|
||||
})
|
||||
export class ItemsComponent implements OnInit {
|
||||
segment: any = '1';
|
||||
constructor(public ts: TranslatorService, public cs: CommonService,) { }
|
||||
|
||||
ngOnInit() { }
|
||||
openDetails() {
|
||||
this.cs.navigateForward('/itemforsale/items-details');
|
||||
}
|
||||
segmentChanged(value) {
|
||||
this.segment = value.detail.value;
|
||||
}
|
||||
openSale() {
|
||||
this.cs.navigateForward('/itemforsale/home');
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
<ion-content>
|
||||
<div class="head-title">
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title color="light" >{{ts.trPK('itemforsale','title')}}</ion-title>
|
||||
</ion-toolbar>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
@ -0,0 +1,11 @@
|
||||
.header{
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
|
||||
position: absolute;
|
||||
background: #259CB8;
|
||||
top: 0;
|
||||
}
|
||||
.header-toolbar{
|
||||
--background: #259CB8 !important;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MyAdsComponent } from './my-ads.component';
|
||||
|
||||
describe('MyAdsComponent', () => {
|
||||
let component: MyAdsComponent;
|
||||
let fixture: ComponentFixture<MyAdsComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ MyAdsComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(MyAdsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
|
||||
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-my-ads',
|
||||
templateUrl: './my-ads.component.html',
|
||||
styleUrls: ['./my-ads.component.scss'],
|
||||
})
|
||||
export class MyAdsComponent implements OnInit {
|
||||
|
||||
constructor(public ts: TranslatorService, public cs: CommonService,) { }
|
||||
ngOnInit() { }
|
||||
|
||||
}
|
||||
@ -0,0 +1,127 @@
|
||||
|
||||
|
||||
<app-generic-header
|
||||
showBack="true"
|
||||
[headerText]="'userProfile, createHR-Request' | translate">
|
||||
</app-generic-header>
|
||||
|
||||
<ion-content>
|
||||
<!-- <form [formGroup] = "form" (ngSubmit) = "submitRequest(form.value)"> -->
|
||||
|
||||
<div >
|
||||
<ion-card class="result-serviceType">
|
||||
<ion-card-content>
|
||||
<div class="request-heading">
|
||||
<span>{{ts.trPK('userProfile','ServiceType')}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<ion-row class="custom-radio">
|
||||
<ion-radio-group [(ngModel)]="SelectedServiceType" class="radio-list" required style="display: flex;">
|
||||
<!--
|
||||
<ion-radio value="HRServices" [color]="myColor">{{HR}}</ion-radio>
|
||||
<ion-label class="text-label" >{{HR}}</ion-label>
|
||||
|
||||
<ion-radio value="Complaints" [color]="myColor" >{{complaints}}</ion-radio>
|
||||
<ion-label class="text-label">{{complaints}}</ion-label>
|
||||
|
||||
<ion-radio value="Inquiry" [color]="myColor" >{{inquiry}}</ion-radio>
|
||||
<ion-label class="text-label">{{inquiry}}</ion-label> -->
|
||||
|
||||
<div style="display: inline-block !important;" *ngFor="let ticket of ticketType">
|
||||
|
||||
<ion-item lines='none' class="ion-no-padding">
|
||||
<ion-radio mode="md" [value]="ticket.ticketTypeId" [color]="myColor" ></ion-radio>
|
||||
<ion-label class="text-label">{{ticket.typeName}}</ion-label>
|
||||
</ion-item>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</ion-radio-group>
|
||||
</ion-row>
|
||||
</div>
|
||||
|
||||
<!-- /////////////////////////////////////////// -->
|
||||
<div>
|
||||
<div>
|
||||
<ion-list >
|
||||
<label class="labels">{{ts.trPK('userProfile','DeptName')}}</label>
|
||||
<ion-item lines="none" class="filed-container">
|
||||
<select [(ngModel)]="depType" (change)="onSelectChange($event,1)" class="filed1" id="firstLabel"
|
||||
placeholder="Select Department" type="text" required >
|
||||
<option value="" selected hidden selected>{{ts.trPK('userProfile','selectDep')}}</option>
|
||||
<option [value]="x.projectDepartmentId" *ngFor="let x of departTypeList"> {{x.departmentName}} </option>
|
||||
<!-- <option [value]="x.departmentId" *ngFor="let x of departTypeList"> {{x.departmentName}} </option> -->
|
||||
</select>
|
||||
</ion-item>
|
||||
<label class="labels">{{ts.trPK('userProfile','RelatedSection')}}</label>
|
||||
<ion-item lines="none" class="filed-container">
|
||||
<select [(ngModel)]="secType" (change)="onSelectChange($event,2)" class="filed1"
|
||||
selected="selected" placeholder="Select Sectiont" type="text" required>
|
||||
<option value="" hidden selected>{{ts.trPK('userProfile','selectSec')}}</option>
|
||||
<option [value]="x.departmentSectionId"
|
||||
*ngFor="let x of sectionTypeList">
|
||||
{{x.sectionName}} </option>
|
||||
|
||||
</select>
|
||||
</ion-item>
|
||||
<label class="labels">{{ts.trPK('userProfile','RelatedTopic')}}</label>
|
||||
<ion-item lines="none" class="filed-container">
|
||||
<select [(ngModel)]="topicType" (change)="onSelectChange($event, 3)" class="filed1"
|
||||
placeholder="Select Topic" type="text" required>
|
||||
<option value="" hidden selected>{{ts.trPK('userProfile','selectTopic')}}</option>
|
||||
<option [value]="x.sectionTopicId" *ngFor="let x of topicTypeList"> {{x.topicName}} </option>
|
||||
</select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</div>
|
||||
<div class="request-heading">
|
||||
<span>{{ts.trPK('userProfile','SupportingDocument')}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="fileUpload btn btn-primary">
|
||||
<img slot="start" style=" height: 55px;"src="../assets/imgs/add-photo.svg">
|
||||
<input end class="upload" type="file" ng2FileSelect [uploader]="uploader"
|
||||
(change)="onFileSelected($event)" (click)="onFileSelectedclick($event)" />
|
||||
</div>
|
||||
<ion-slides>
|
||||
<ion-slide>
|
||||
<ion-grid class=" gridAH" *ngIf="uploader?.queue?.length > 0">
|
||||
<ion-col class="rowAH" *ngFor="let item of uploader.queue">
|
||||
<ion-col style=" background: #dad8d8;" size="4">
|
||||
<label for="">{{ item?.file?.name }}</label>
|
||||
</ion-col>
|
||||
<ion-col style=" background: #dad8d8;" size="2">
|
||||
<button class="iconButton" ion-button (click)="removeFile(item)">
|
||||
<ion-icon style="color: red;" name="close"></ion-icon>
|
||||
</button>
|
||||
</ion-col>
|
||||
</ion-col>
|
||||
</ion-grid>
|
||||
</ion-slide>
|
||||
</ion-slides>
|
||||
</div>
|
||||
<div class="request-heading">
|
||||
<span>{{ts.trPK('userProfile','Description')}}</span>
|
||||
</div>
|
||||
<ion-col size="12">
|
||||
<ion-item style="margin-left: -20px;margin-right: -13px;margin-top: -24px;" lines="none">
|
||||
<ion-input [(ngModel)]="Description" [ngClass]="direction == 'en' ? 'filedDesc':'filedDesc-ar' " placeholder="{{ts.trPK('userProfile','Description')}}" type="text"></ion-input>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
</div>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</div>
|
||||
<!-- </form> -->
|
||||
</ion-content>
|
||||
<ion-footer >
|
||||
<div class="centerDiv" >
|
||||
<ion-button class="gridCancelBtn main-button" ion-button (click)="cancelRequest()">{{ts.trPK('general','cancel')}}</ion-button>
|
||||
<ion-button [disabled]="isValidForm()" class="gridSubmitBtn main-button" ion-button (click)="CreateTicket()">{{ts.trPK('general','submit')}}</ion-button>
|
||||
</div>
|
||||
</ion-footer>
|
||||
|
||||
|
||||
@ -0,0 +1,529 @@
|
||||
|
||||
|
||||
.header-toolbar-new{
|
||||
--background: #269DB8;
|
||||
}
|
||||
|
||||
.contentBg{
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
.contentBg:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background: #269DB8;
|
||||
height: 140px;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1px) and (max-width:767px){
|
||||
.result-graph {
|
||||
position: relative;
|
||||
background: white;
|
||||
// margin-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
border-radius: 20px;
|
||||
z-index: 1;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 56px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #ccc;
|
||||
padding-top: 12px;
|
||||
}}
|
||||
|
||||
@media screen and (min-width: 768px) and (max-width:1024px){
|
||||
.result-graph {
|
||||
position: relative;
|
||||
background: white;
|
||||
// margin-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
border-radius: 20px;
|
||||
z-index: 1;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 89px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #ccc;
|
||||
padding-top: 114px !important;
|
||||
}}
|
||||
|
||||
.user-info{
|
||||
text-align: center;
|
||||
margin-bottom: 3px;
|
||||
.user-image-container{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
align-items: center;
|
||||
}}
|
||||
|
||||
.Boldtext{
|
||||
font-size: 13px;
|
||||
font-family: WorkSans-Bold;
|
||||
color: black !important;
|
||||
display: block !important;
|
||||
// line-height: 0px !important;
|
||||
}
|
||||
|
||||
.Nametext{
|
||||
font-size: 15px;
|
||||
font-family: WorkSans-Bold;
|
||||
color: black !important;
|
||||
display: block !important;
|
||||
// line-height: 0px !important;
|
||||
}
|
||||
|
||||
.employee-information-indetail{
|
||||
background: white;
|
||||
margin-top: 15px;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #ccc;
|
||||
ion-col{
|
||||
padding: 15px;
|
||||
// border-bottom: 1px solid #ccc;
|
||||
}
|
||||
h2{
|
||||
font-size: 13px;
|
||||
// font-family: WorkSans-Bold;
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
color: rgb(128, 124, 124);
|
||||
}
|
||||
p{
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
font-family: WorkSans-Bold;
|
||||
// margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1px) and (max-width:767px){
|
||||
.user-image{
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 80px;
|
||||
/* border: 1px solid #ccc; */
|
||||
margin-top: -125px;
|
||||
|
||||
}}
|
||||
@media screen and (min-width: 768px) and (max-width:1024px){
|
||||
.user-image{
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 80px;
|
||||
margin-bottom: 371px;
|
||||
}}
|
||||
|
||||
.img{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: inline-flex;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
border-radius: 70% !important;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.sendCodeBtn{
|
||||
--background: #269DB8;
|
||||
color: white;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
margin-left: 5px !important;
|
||||
margin-top: 15px !important;
|
||||
margin-bottom: 20px !important;
|
||||
/* border-radius: 4px; */
|
||||
height: 26px;
|
||||
/* padding: 6px 24px; */
|
||||
font-size: 15px;
|
||||
width: 322px;
|
||||
}
|
||||
|
||||
.verify-code{
|
||||
position: relative;
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
z-index: 1;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #ccc;
|
||||
padding: 21px 3px 34px 14px;
|
||||
margin: 25px 22px 2px 22px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// .sms_code{
|
||||
// margin: 0px;
|
||||
// text-align: center;
|
||||
// }
|
||||
|
||||
ion-input {
|
||||
margin: 0 5px;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
font-size: 32px;
|
||||
//border: solid 1px #ccc;
|
||||
border: 1px solid #ccc !important;
|
||||
//box-shadow: 0 0 5px #ccc inset;
|
||||
outline: none;
|
||||
width: 20%;
|
||||
transition: all .2s ease-in-out;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
&:focus {
|
||||
border-color:var(--ion-color-secondary) !important;
|
||||
box-shadow: 0 0 5px var(--ion-color-secondary) !important;
|
||||
}
|
||||
|
||||
&::selection {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.sendVerifyBtn{
|
||||
--background: #269DB8;
|
||||
color: white;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
margin-top: 15px !important;
|
||||
margin-bottom: 20px !important;
|
||||
/* border-radius: 4px; */
|
||||
height: 26px;
|
||||
font-size: 15px;
|
||||
width: 322px;
|
||||
margin-left: 22px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1px) and (max-width:320px){
|
||||
.custom-radio .radio-icon {
|
||||
margin: 0px;
|
||||
border-radius: 50%;
|
||||
border-width: var(--border-width);
|
||||
border-style: var(--border-style);
|
||||
border-color: #dcdcdc;
|
||||
margin-top: 6px !important;
|
||||
border-color: #d8d4d4 !important;
|
||||
margin-bottom: 18px;}
|
||||
|
||||
.text-label{
|
||||
color: black !important;
|
||||
font-size: 9px;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
font-family: 'WorkSans-Bold';
|
||||
} }
|
||||
|
||||
@media screen and (min-width: 325px){
|
||||
.custom-radio .radio-icon {
|
||||
margin: 0px;
|
||||
border-radius: 50%;
|
||||
border-width: var(--border-width);
|
||||
border-style: var(--border-style);
|
||||
border-color: #dcdcdc;
|
||||
margin-top: 6px !important;
|
||||
border-color: #d8d4d4 !important;
|
||||
margin-bottom: 18px;}
|
||||
|
||||
.text-label{
|
||||
color: black !important;
|
||||
font-size: 10px;
|
||||
margin-left: 15px;
|
||||
margin-right: 13px;
|
||||
font-family: 'WorkSans-Bold';
|
||||
} }
|
||||
|
||||
// .radio-list{
|
||||
// background: white;
|
||||
// margin-left: 18px;
|
||||
// /* margin-right: 10px; */
|
||||
// margin-top: 12px;
|
||||
// }
|
||||
|
||||
.result-serviceType{
|
||||
position: relative;
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
z-index: 1;
|
||||
border-radius: 25px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.request-heading {
|
||||
span {
|
||||
display: block;
|
||||
margin-bottom: 15px;
|
||||
// padding-top: 8px;
|
||||
padding-left: 3px;
|
||||
/* font-weight: bold; */
|
||||
font-size: 14px;
|
||||
font-family: 'WorkSans-Bold';
|
||||
}
|
||||
}
|
||||
|
||||
.filed1{
|
||||
border-radius: 30px;
|
||||
border: 1px solid #d3d5d5 !important;
|
||||
margin: 10px;
|
||||
padding-left: 10px !important;
|
||||
padding-top: 10px !important;
|
||||
color: #636161;
|
||||
padding-bottom: 10px;
|
||||
width: 130% !important;
|
||||
}
|
||||
|
||||
.filedDesc{
|
||||
border-radius: 30px;
|
||||
border: 1px solid #d3d5d5 !important;
|
||||
// margin: 10px;
|
||||
padding-left: 20px !important;
|
||||
padding-top: 6px !important;
|
||||
color: #636161;
|
||||
--padding-bottom: 90px;
|
||||
font-size: 13px;
|
||||
text-align: start;
|
||||
}
|
||||
.filedDesc-ar{
|
||||
border-radius: 30px;
|
||||
border: 1px solid #d3d5d5 !important;
|
||||
// margin: 10px;
|
||||
padding-right: 20px !important;
|
||||
padding-top: 6px !important;
|
||||
color: #636161;
|
||||
--padding-bottom: 90px;
|
||||
font-size: 13px;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.labelDesc{
|
||||
display: block;
|
||||
padding-top: 8px;
|
||||
padding-left: 15px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #adabab;
|
||||
}
|
||||
|
||||
.selectLabel{
|
||||
display: block;
|
||||
padding-top: 8px;
|
||||
padding-left: 15px;
|
||||
font-size: 14px;
|
||||
/* font-family: 'WorkSans-Bold'; */
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
// .cancelRequest{
|
||||
// padding: 10px 7px 10px 0px;
|
||||
// ion-button{
|
||||
// border-radius: 7px;
|
||||
// padding: 12px 30px 12px 30px;
|
||||
// background: #d00a0a;
|
||||
// --background: transparent;
|
||||
// --box-shadow: none !important;
|
||||
// height: auto;
|
||||
// min-height: inherit;
|
||||
// font-size: 16px;
|
||||
// font-weight: bold;
|
||||
// margin-top: -5px;
|
||||
// }}
|
||||
// .submitRequest{
|
||||
// padding: 10px 7px 10px 0px;
|
||||
// ion-button{
|
||||
// border-radius: 7px;
|
||||
// padding: 12px 30px 12px 30px;
|
||||
// background: #19a163;
|
||||
// --background: transparent;
|
||||
// --box-shadow: none !important;
|
||||
// height: auto;
|
||||
// min-height: inherit;
|
||||
// font-size: 16px;
|
||||
// font-weight: bold;
|
||||
// margin-top: -5px;
|
||||
// }}
|
||||
|
||||
|
||||
.gridDiv{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-top: 18px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.gridCancelBtn{
|
||||
min-width: auto;
|
||||
// margin: 0px;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--cusgray);
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
background: #d00a0a;
|
||||
color: white;
|
||||
margin-left: 15px;
|
||||
margin-right: 5px;
|
||||
font-family: 'WorkSans-bold';
|
||||
font-size: 16px;
|
||||
min-height: 1.0cm;
|
||||
--background: #d00a0a !important;
|
||||
}
|
||||
|
||||
.main-button{
|
||||
--box-shadow:none;
|
||||
}
|
||||
|
||||
.gridSubmitBtn{
|
||||
min-width: auto;
|
||||
// margin: 0px;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--cusgray);
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
background: #19a163;
|
||||
color: white;
|
||||
// margin-left: 15px;
|
||||
// margin-right: 5px;
|
||||
font-family: 'WorkSans-bold';
|
||||
font-size: 16px;
|
||||
min-height: 1.0cm;
|
||||
--background: #19a163 !important;}
|
||||
|
||||
|
||||
.filed-container{
|
||||
margin-right: -17px;
|
||||
margin-left: -25px;
|
||||
}
|
||||
|
||||
.labels{
|
||||
display: block;
|
||||
margin-top: 15px;
|
||||
padding-top: 8px;
|
||||
padding-left: 3px;
|
||||
font-size: 14px;
|
||||
font-family: 'WorkSans-Bold';
|
||||
}
|
||||
|
||||
.CreateBtn{
|
||||
--background: var(--newgreen) !important;
|
||||
background: var(--newgreen) !important;
|
||||
white-space: normal;
|
||||
color: var(--light);
|
||||
text-transform: capitalize;
|
||||
min-height: 1.0cm;
|
||||
--border-radius: 7px !important;
|
||||
border-radius: 7px !important;
|
||||
--min-height: 1.6cm !important;
|
||||
width: 315px;
|
||||
}
|
||||
.footer{
|
||||
padding: 15px 0px 0px 0px;
|
||||
background-color: var(--light) !important;
|
||||
border: 0px !important;
|
||||
box-shadow: none !important;
|
||||
-webkit-box-shadow: none;
|
||||
}
|
||||
.Btn{
|
||||
margin: auto; text-align: center; display: block;
|
||||
}
|
||||
.footer2{
|
||||
padding: 15px 0px 0px 24px;
|
||||
background-color: var(--light) !important;
|
||||
border: 0px !important;
|
||||
box-shadow: none !important;
|
||||
-webkit-box-shadow: none;
|
||||
}
|
||||
|
||||
ion-footer .footer-button{
|
||||
--background: #259CB8;
|
||||
width: 80%;
|
||||
}
|
||||
@media screen and (min-width: 325px){
|
||||
.fileUpload {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 10px;
|
||||
margin-left: -233px;
|
||||
}}
|
||||
@media screen and (min-width: 1px) and (max-width:320px){
|
||||
.fileUpload {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 10px;
|
||||
margin-left: -158px;
|
||||
|
||||
}}
|
||||
|
||||
.fileUpload input.upload {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
|
||||
.iconButton .imgSize{
|
||||
width: 10px !important;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
button.iconButton.button.button-ios.button-default.button-default-ios,
|
||||
button.iconButton.button.button-md.button-default.button-default-md {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
select option[data-default] {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.Field-en{
|
||||
border-radius: 30px;
|
||||
border: 1px solid #a2a5a6!important;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 20px !important;
|
||||
padding-top: 6px !important;
|
||||
color: #999999 !important;
|
||||
}
|
||||
|
||||
.Field-ar{
|
||||
border-radius: 30px;
|
||||
border: 1px solid #a2a5a6!important;
|
||||
margin-bottom: 20px;
|
||||
padding-right: 20px !important;
|
||||
padding-top: 6px !important;
|
||||
color: #999999 !important;
|
||||
}
|
||||
|
||||
.button-native {
|
||||
box-shadow: none!important;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HrRequestFormComponent } from './hr-request-form.component';
|
||||
|
||||
describe('HrRequestFormComponent', () => {
|
||||
let component: HrRequestFormComponent;
|
||||
let fixture: ComponentFixture<HrRequestFormComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ HrRequestFormComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(HrRequestFormComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,420 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Platform, Events, MenuController } from '@ionic/angular';
|
||||
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
|
||||
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
|
||||
import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service';
|
||||
import { AuthenticatedUser } from 'src/app/hmg-common/services/authentication/models/authenticated-user';
|
||||
import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service';
|
||||
import { MowadhafiService } from '../mowadhafi.service';
|
||||
import { Location } from '@angular/common';
|
||||
import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response';
|
||||
import { LoginModel } from 'src/app/authentication/models/LoginModel';
|
||||
import { SendActivationByType } from 'src/app/authentication/models/sendActivationByType';
|
||||
import { FileUploader } from 'ng2-file-upload';
|
||||
@Component({
|
||||
selector: 'app-hr-request-form',
|
||||
templateUrl: './hr-request-form.component.html',
|
||||
styleUrls: ['./hr-request-form.component.scss'],
|
||||
})
|
||||
export class HrRequestFormComponent implements OnInit {
|
||||
public EmpName: string;
|
||||
public EmpNum: string;
|
||||
public EmpGroup: string;
|
||||
public EmpMobile: string;
|
||||
public EmpJob: string;
|
||||
public EmpOrgName: string;
|
||||
public EmpPayrol: string;
|
||||
public EmpPosition: string;
|
||||
public EmpEmail: string;
|
||||
public EmpCatMeaning: string;
|
||||
public EmpGRADENAME: string;
|
||||
public EmpLocation: string;
|
||||
public EmpImg: string;
|
||||
public userImage: any = '../assets/imgs/profile.png';
|
||||
public loginData = new LoginModel();
|
||||
public searchKeySelect = 'Complaints';
|
||||
myColor: string = 'secondary';
|
||||
public showRequestDetails = false;
|
||||
public proID = "CS"
|
||||
public inquiry: string;
|
||||
public HR: string;
|
||||
public complaints: string;
|
||||
public Projectresult: any;
|
||||
public EmpRelations: any;
|
||||
public Hr: any;
|
||||
public Payroll: any;
|
||||
public GovRelation: any;
|
||||
public projName: any;
|
||||
public topicName: any;
|
||||
public departTypeList: any;
|
||||
public topicTypeList: any;
|
||||
public sectionTypeList: any;
|
||||
public projectDetial: any;
|
||||
public projectDep: any;
|
||||
public sectionDep: any;
|
||||
public projectCode;
|
||||
public SelectedServiceType: any;
|
||||
public depType: any ="";
|
||||
public secType: any ="";
|
||||
public topicType: any ="";
|
||||
indexLastObj: any;
|
||||
addAttachRequest: any = [];
|
||||
TransactionID: any;
|
||||
public teckitDetial: any;
|
||||
public teckitInfo: any;
|
||||
public Description: any;
|
||||
public selectedFile: any;
|
||||
filterAllowedType: any = [
|
||||
"application/pdf",
|
||||
"image/jpeg",
|
||||
"image/png",
|
||||
"text/plain",
|
||||
"image/jpg",
|
||||
"application/vnd.ms-excel",
|
||||
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
||||
];
|
||||
projctid:any;
|
||||
employeeNumber:any;
|
||||
ticketType: any =[];
|
||||
public direction: string;
|
||||
HRServices = '';
|
||||
Complaints='';
|
||||
Inquiry='';
|
||||
input = document.getElementById ("firstLabel");
|
||||
|
||||
|
||||
|
||||
constructor(
|
||||
public ts: TranslatorService,
|
||||
public cs: CommonService,
|
||||
public authService: AuthenticationService,
|
||||
public sharedData: SharedDataService,
|
||||
public events: Events,
|
||||
public MowadhafiService: MowadhafiService,
|
||||
private location: Location,
|
||||
private menu: MenuController,
|
||||
|
||||
|
||||
) {
|
||||
this.direction = TranslatorService.getCurrentLanguageName();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.projectCode = this.cs.sharedService.getSharedData("projcet-code",false);
|
||||
this.getTicketTypes();
|
||||
this.getProject();
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
public isValidForm(): boolean {
|
||||
if (this.depType && this.SelectedServiceType && this.secType && this.topicType) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
onSelectChange(event, type) {
|
||||
const value = event.target.value;
|
||||
console.log(value);
|
||||
// this.topicTypeList =[];
|
||||
// this.sectionTypeList =[];
|
||||
if(type==1){
|
||||
this.depType = value;
|
||||
this.sectionTypeList =[];
|
||||
this.topicTypeList =[];
|
||||
this.getDepartmentSections(value);
|
||||
|
||||
}else if(type==2){
|
||||
this.getSectionTopics(value);
|
||||
this.topicTypeList =[];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onFileSelectedclick(event){
|
||||
event.target.value = '';
|
||||
}
|
||||
|
||||
|
||||
|
||||
goback() {
|
||||
this.location.back();
|
||||
|
||||
}
|
||||
|
||||
showSelectedField() { }
|
||||
|
||||
getTicketTypes() {
|
||||
const request = {
|
||||
EmployeeNumber: "",
|
||||
|
||||
};
|
||||
this.MowadhafiService.getTicketTypes(request, () => { }, this.ts.trPK('general', 'retry')).subscribe((result) => {
|
||||
this.handlegetTicketTypesResult(result);
|
||||
|
||||
})
|
||||
}
|
||||
handlegetTicketTypesResult(result) {
|
||||
this.ticketType =result.Mohemm_Itg_TicketTypesList;
|
||||
|
||||
}
|
||||
|
||||
/////////////////////////////////////////////////
|
||||
|
||||
getProject() {
|
||||
const request = {
|
||||
EmployeeNumber: "",
|
||||
ItgProjectCode: this.projectCode
|
||||
|
||||
};
|
||||
this.MowadhafiService.getProject(request, () => { }, this.ts.trPK('general', 'retry')).subscribe((result) => {
|
||||
this.handlegetProjectResult(result);
|
||||
|
||||
})
|
||||
}
|
||||
handlegetProjectResult(result) {
|
||||
this.Projectresult = result.Mohemm_Itg_ProjectsList;
|
||||
this.projctid=this.Projectresult[0].projectId;
|
||||
this.getProjectDepartments();
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
getProjectDepartments() {
|
||||
const request = {
|
||||
EmployeeNumber: "",
|
||||
ItgProjectId: this.Projectresult[0].projectId,
|
||||
|
||||
|
||||
};
|
||||
this.MowadhafiService.getProjectDepartments(request, () => { }, this.ts.trPK('general', 'retry')).subscribe((result) => {
|
||||
this.handlegetProjectDepartmentsResult(result);
|
||||
|
||||
})
|
||||
}
|
||||
handlegetProjectDepartmentsResult(result) {
|
||||
this.departTypeList = result.Mohemm_ITG_ProjectDepartmentsList;
|
||||
// this.getDepartmentSections();
|
||||
|
||||
}
|
||||
//////////////////////////////////////////////////////
|
||||
|
||||
getDepartmentSections(value) {
|
||||
const request = {
|
||||
EmployeeNumber: "",
|
||||
ItgProjectDepartmentId: value ?value : this.departTypeList.projectDepartmentId,
|
||||
|
||||
|
||||
};
|
||||
this.MowadhafiService.getDepartmentSections(request, () => { }, this.ts.trPK('general', 'retry')).subscribe((result) => {
|
||||
this.handlegetDepartmentSectionsResult(result);
|
||||
|
||||
})
|
||||
}
|
||||
handlegetDepartmentSectionsResult(result) {
|
||||
this.sectionTypeList = result.Mohemm_ITG_DepartmentSectionsList;
|
||||
// this.getSectionTopics();
|
||||
}
|
||||
|
||||
getSectionTopics(value=null) {
|
||||
const request = {
|
||||
EmployeeNumber: "",
|
||||
// ItgDepartmentSectionId: this.sectionTypeList.departmentSectionId,
|
||||
ItgDepartmentSectionId: value ?value : this.sectionTypeList.departmentSectionId,
|
||||
|
||||
};
|
||||
this.MowadhafiService.getSectionTopics(request, () => { }, this.ts.trPK('general', 'retry')).subscribe((result) => {
|
||||
this.handlegetSectionTopicsResult(result);
|
||||
|
||||
})
|
||||
}
|
||||
handlegetSectionTopicsResult(result) {
|
||||
// this.topicName=result.Mohemm_ITG_SectionTopicsList[0].topicName
|
||||
this.topicTypeList = result.Mohemm_ITG_SectionTopicsList;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*******************Create Ticket Function*************/
|
||||
|
||||
CreateTicket() {
|
||||
|
||||
var authUser =this.authService.getAuthenticatedRequest();
|
||||
this.cs.startLoading();
|
||||
var request = new FormData();
|
||||
request.append('ticketTypeId', this.SelectedServiceType);
|
||||
request.append('projectId', this.projctid);
|
||||
request.append('departmentId', this.depType);
|
||||
request.append('sectionId', this.secType);
|
||||
request.append('sectionTopicId', this.topicType);
|
||||
request.append('description', this.Description);
|
||||
console.log("TEST:______")
|
||||
console.log(this.selectedFile);
|
||||
if(this.selectedFile && this.selectedFile !== undefined){
|
||||
request.append('fileColl', this.selectedFile[0], this.selectedFile[0].name);
|
||||
}
|
||||
request.append('employeeNumber', authUser.P_USER_NAME);
|
||||
request.append('ticketStatus', 'new');
|
||||
request.append('channelId', '3');
|
||||
request.append('Channel', authUser.Channel.toString());
|
||||
request.append('LogInToken', authUser.LogInTokenID);
|
||||
request.append('Token', authUser.TokenID);
|
||||
request.append('EmployeeNumber', authUser.P_USER_NAME);
|
||||
request.append('MobileNo', authUser.MobileNumber);
|
||||
|
||||
|
||||
this.MowadhafiService.getCreateTicket(request, () => { }, this.ts.trPK('general', 'retry')).subscribe((result) => {
|
||||
this.cs.stopLoading();
|
||||
this.handlegetCreateTicketResult(result);
|
||||
this.checkERM('After Service Submission');
|
||||
//hear you have to redirect page
|
||||
|
||||
this.cs.openMyRequestPage();
|
||||
})
|
||||
}
|
||||
handlegetCreateTicketResult(result) {
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
public cancelRequest() {
|
||||
this.cs.openMyRequestPage();
|
||||
// this.menu.toggle();
|
||||
}
|
||||
|
||||
|
||||
/*******************Add attchement Functions*************/
|
||||
public uploader: FileUploader = new FileUploader({
|
||||
allowedMimeType: [
|
||||
"application/pdf",
|
||||
"image/jpeg",
|
||||
"image/png",
|
||||
"text/plain",
|
||||
"image/jpg",
|
||||
"application/vnd.ms-excel",
|
||||
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
||||
],
|
||||
maxFileSize: 10 * 1024 * 1024,
|
||||
formatDataFunctionIsAsync: true,
|
||||
formatDataFunction: async item => {
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve({
|
||||
name: item._file.name,
|
||||
length: item._file.size,
|
||||
contentType: item._file.type,
|
||||
date: new Date()
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
onFileSelected(input) {
|
||||
if (!(this.filterAllowedType.indexOf(input.target.files[0].type) > -1)) {
|
||||
let msg: string = "";
|
||||
msg = this.ts.trPK("general", "noFileSelect");
|
||||
this.cs.presentAlert(msg);
|
||||
return;
|
||||
} // todo: show alert that you tried uploading wrong files
|
||||
else {
|
||||
const file = input.target.files[0];
|
||||
this.selectedFile = input.target.files;
|
||||
|
||||
|
||||
this.getBase64(file).then(data =>
|
||||
this.pushObject(data, file.name, file.type)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
getBase64(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => resolve(reader.result);
|
||||
reader.onerror = error => reject(error);
|
||||
});
|
||||
}
|
||||
|
||||
pushObject(fileData, name, type) {
|
||||
|
||||
this.indexLastObj++;
|
||||
try {
|
||||
let array = name.split(".");
|
||||
let attachType: string = array[array.length - 1];
|
||||
|
||||
this.addAttachRequest.push({
|
||||
AttachmentID: this.indexLastObj,
|
||||
P_FILE_CONTENT_TYPE: attachType, //type.split('/')[1],
|
||||
P_FILE_DATA: fileData.split(",")[1],
|
||||
P_FILE_NAME: name, //.split('.')[0],
|
||||
P_TRANSACTION_ID: this.TransactionID
|
||||
});
|
||||
} catch (e) { }
|
||||
}
|
||||
|
||||
removeFile(objectitem) {
|
||||
let objIndex1 = this.uploader.queue.findIndex(item => item == objectitem);
|
||||
this.uploader.queue.splice(objIndex1, 1);
|
||||
let objIndex = this.addAttachRequest.findIndex(
|
||||
item => item.AttachmentID == objectitem.AttachmentID
|
||||
);
|
||||
this.addAttachRequest.splice(objIndex, 1);
|
||||
}
|
||||
|
||||
|
||||
submitRequest() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
checkERM(status) {
|
||||
|
||||
this.authService.checkAds({
|
||||
EmployeeNumber: '',
|
||||
ItgEnableAt: status, //After Service Submission
|
||||
ItgServiceName: "Ticket"
|
||||
}, () => { }, this.ts.trPK('general', 'ok')).subscribe(res => {
|
||||
|
||||
var result = JSON.parse(res.Mohemm_ITG_ResponseItem).result.data;
|
||||
|
||||
this.cs.sharedService.setSharedData(
|
||||
result,
|
||||
AuthenticationService.SERVEY_DATA
|
||||
)
|
||||
if (!CommonService.SKIP && result) {
|
||||
if (result.notificationType == 'Survey') {
|
||||
this.cs.navigateForward('/erm-channel/survey');
|
||||
} else {
|
||||
this.authService.adsDetails({
|
||||
"ItgNotificationMasterId": result['notificationMasterId']
|
||||
},
|
||||
() => { }, this.ts.trPK('general', 'ok')
|
||||
).subscribe((result) => {
|
||||
var data = result.Mohemm_ITG_ResponseItem;
|
||||
if (data) {
|
||||
this.cs.sharedService.setSharedData(
|
||||
JSON.parse(data),
|
||||
AuthenticationService.ADS_DATA
|
||||
);
|
||||
this.cs.navigateForward('/erm-channel/home');
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,132 @@
|
||||
|
||||
|
||||
<app-generic-header
|
||||
showBack="true"
|
||||
[headerText]="'userProfile, createHR-Request' | translate">
|
||||
</app-generic-header>
|
||||
|
||||
|
||||
<ion-content>
|
||||
<div class="contentBg">
|
||||
<div class="result-graph" >
|
||||
<div class="user-info">
|
||||
<div class="user-image-container">
|
||||
<div class="user-image">
|
||||
<img class="img" [src]="EmpImg ? 'data:image/png;base64,'+ EmpImg : '../assets/imgs/profile.png'" alt="Team Member Image"/>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 25px;">
|
||||
|
||||
<span class="Nametext">{{EmpName}}</span>
|
||||
<p class="p1">{{EmpEmail}}</p>
|
||||
</div>
|
||||
<div >
|
||||
<ion-row>
|
||||
<ion-col style="border-right: 1px solid rgb(221 221 221);">
|
||||
<p class="p">{{ts.trPK('userProfile','role')}}</p>
|
||||
<span class="Boldtext">{{EmpPosition}}</span>
|
||||
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<p class="p" style="line-height: 12px !important;">{{ts.trPK('userProfile','empNo')}}</p>
|
||||
|
||||
<span class="Boldtext">{{EmpNum}}</span>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div [ngClass]="direction == 'en' ? 'employee-information-indetail':'employee-information-indetail-ar' ">
|
||||
<ion-row style="padding-left: 13px;">
|
||||
<ion-col>
|
||||
<div [ngClass]="direction == 'en' ? 'title':'title-ar' " >{{ts.trPK('userProfile','profile-details')}}</div>
|
||||
</ion-col>
|
||||
<ion-col style="margin-bottom: -22px;" [size]="12">
|
||||
<h2>{{ts.trPK('userProfile','category')}}</h2>
|
||||
<p>{{EmpCatMeaning}}</p>
|
||||
|
||||
</ion-col >
|
||||
<ion-col style="margin-bottom: -22px;" [size]="12">
|
||||
<h2>{{ts.trPK('userProfile','address')}}</h2>
|
||||
<p class="hL">{{EmpLocation}}</p>
|
||||
|
||||
</ion-col>
|
||||
<ion-col style="margin-bottom: -22px;" [size]="12">
|
||||
<h2>{{ts.trPK('userProfile','phone-no')}}</h2>
|
||||
<p>{{EmpMobile}}</p>
|
||||
|
||||
</ion-col>
|
||||
<ion-col style="margin-bottom: -22px;" [size]="12">
|
||||
<h2>{{ts.trPK('userProfile','busG')}}</h2>
|
||||
<p>{{EmpOrgName}}</p>
|
||||
|
||||
</ion-col>
|
||||
<ion-col style="margin-bottom: -22px;" [size]="12">
|
||||
<h2>{{ts.trPK('userProfile','job')}}</h2>
|
||||
<p>{{EmpPosition}}</p>
|
||||
|
||||
</ion-col>
|
||||
<ion-col style="margin-bottom: -22px;" [size]="12">
|
||||
<h2>{{ts.trPK('userProfile','payrol')}}</h2>
|
||||
<p>{{EmpPayrol}}</p>
|
||||
</ion-col>
|
||||
|
||||
<ion-col style="margin-bottom: -22px;" [size]="12">
|
||||
<h2>{{ts.trPK('userProfile','position')}}</h2>
|
||||
<p class="hL">{{EmpPosition}}</p>
|
||||
|
||||
</ion-col>
|
||||
<ion-col style="margin-bottom: -22px;" [size]="12" style="border-bottom: none;">
|
||||
<h2>{{ts.trPK('userProfile','grade')}}</h2>
|
||||
<p>{{EmpGRADENAME}}</p>
|
||||
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ///////////////////////////////////////////////////////////////////next page -->
|
||||
|
||||
<!-- <div>
|
||||
<div class="verify-code">
|
||||
<ion-row style=" margin-left: 9px; margin-bottom: 13px;">
|
||||
<ion-col style="font-size: 12px; color: rgb(128, 124, 124);">{{ts.trPK('userProfile','code-sent')}}</ion-col>
|
||||
<ion-col class="Boldtext"> {{EmpMobile}}</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row dir="ltr">
|
||||
<ion-col [size]="12">
|
||||
<ion-input type="tel" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
|
||||
inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()" #ref autofocus="true">
|
||||
</ion-input>
|
||||
|
||||
<ion-input type="tel" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
|
||||
inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()"></ion-input>
|
||||
<ion-input type="tel" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
|
||||
inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()"></ion-input>
|
||||
<ion-input type="tel" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
|
||||
inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()"></ion-input>
|
||||
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</div>
|
||||
<div>
|
||||
<ion-button class="sendVerifyBtn" (click)="VerifyCode()" >{{ts.trPK('userProfile','verify-code')}}</ion-button>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
<!-- ///////////////////////////////////////////////////////////////////next page -->
|
||||
|
||||
|
||||
|
||||
</ion-content>
|
||||
|
||||
<ion-footer class="footer">
|
||||
<div class="Btn">
|
||||
<ion-button class="CreateBtn" (click)="createRequest()" >{{ts.trPK('userProfile','createHR-Request')}}</ion-button>
|
||||
</div>
|
||||
</ion-footer>
|
||||
@ -0,0 +1,616 @@
|
||||
|
||||
|
||||
.header-toolbar-new{
|
||||
--background: #269DB8;
|
||||
}
|
||||
ion-content {
|
||||
--ion-background-color: whitesmoke;
|
||||
}
|
||||
.contentBg{
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
.contentBg:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background: #269DB8;
|
||||
height: 140px;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1px) and (max-width:767px){
|
||||
.result-graph {
|
||||
position: relative;
|
||||
background: white;
|
||||
// margin-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
border-radius: 20px;
|
||||
z-index: 1;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 56px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #ccc;
|
||||
padding-top: 12px;
|
||||
}}
|
||||
|
||||
@media screen and (min-width: 768px) and (max-width:1024px){
|
||||
.result-graph {
|
||||
position: relative;
|
||||
background: white;
|
||||
// margin-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
border-radius: 20px;
|
||||
z-index: 1;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 89px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #ccc;
|
||||
padding-top: 114px !important;
|
||||
}}
|
||||
|
||||
.user-info{
|
||||
text-align: center;
|
||||
margin-bottom: 3px;
|
||||
.user-image-container{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
align-items: center;
|
||||
}}
|
||||
|
||||
.Boldtext{
|
||||
// font-size: 13px;
|
||||
// font-family: WorkSans-Bold;
|
||||
// color: black !important;
|
||||
// display: block !important;
|
||||
text-align: center;
|
||||
// font: normal normal 600 16px/19px Poppins;
|
||||
letter-spacing: -0.64px;
|
||||
color: #2B353E;
|
||||
opacity: 1;
|
||||
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
|
||||
}
|
||||
.p{
|
||||
text-align: center;
|
||||
// font: normal normal 600 13px/0px Poppins;
|
||||
letter-spacing: -0.52px;
|
||||
color: #A2A2A2;
|
||||
opacity: 1;
|
||||
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
|
||||
font-size: 13px;
|
||||
line-height: 0px;
|
||||
}
|
||||
.p1{
|
||||
text-align: center;
|
||||
// font: normal normal 600 13px/6px Poppins;
|
||||
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
|
||||
font-size: 13px;
|
||||
line-height: 6px;
|
||||
letter-spacing: -0.52px;
|
||||
color: #A2A2A2;
|
||||
opacity: 1;
|
||||
}
|
||||
.Nametext{
|
||||
// font-size: 15px;
|
||||
// font-family: WorkSans-Bold;
|
||||
// color: black !important;
|
||||
// display: block !important;
|
||||
text-align: center;
|
||||
/* font: normal normal 600 21px/31px Poppins; */
|
||||
letter-spacing: -0.84px;
|
||||
color: #2B353E;
|
||||
opacity: 1;
|
||||
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
|
||||
line-height: 21px;
|
||||
font-size: 21px;
|
||||
|
||||
}
|
||||
|
||||
.title{
|
||||
text-align: left;
|
||||
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
|
||||
line-height: 20px;
|
||||
font-size: 20px;
|
||||
letter-spacing: -0.8px;
|
||||
color: #2B353E;
|
||||
opacity: 1;
|
||||
margin-top: 12px;
|
||||
margin-bottom: -22px;
|
||||
}
|
||||
|
||||
.title-ar{
|
||||
text-align: right;
|
||||
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
|
||||
line-height: 20px;
|
||||
font-size: 20px;
|
||||
letter-spacing: -0.8px;
|
||||
color: #2B353E;
|
||||
opacity: 1;
|
||||
margin-top: 12px;
|
||||
margin-bottom: -22px;
|
||||
}
|
||||
|
||||
.employee-information-indetail{
|
||||
background: white;
|
||||
// margin-top: 15px;
|
||||
border-radius: 20px;
|
||||
// margin-bottom: 15px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #ccc;
|
||||
ion-col{
|
||||
padding: 15px;
|
||||
// border-bottom: 1px solid #ccc;
|
||||
}
|
||||
h2{
|
||||
// font-size: 13px;
|
||||
// margin: 0;
|
||||
// font-weight: bold;
|
||||
// color: rgb(128, 124, 124);
|
||||
text-align: left;
|
||||
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
|
||||
line-height: 0px;
|
||||
font-size: 13px;
|
||||
letter-spacing: -0.52px;
|
||||
color: #A2A2A2;
|
||||
opacity: 1;
|
||||
}
|
||||
p{
|
||||
// font-size: 13px;
|
||||
// margin: 0;
|
||||
// font-family: WorkSans-Bold;
|
||||
|
||||
text-align: left;
|
||||
// font: normal normal 600 16px/5px Poppins;
|
||||
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
|
||||
line-height: 5px;
|
||||
font-size: 16px;
|
||||
letter-spacing: -0.64px;
|
||||
color: #2B353E;
|
||||
opacity: 1;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.employee-information-indetail-ar{
|
||||
background: white;
|
||||
// margin-top: 15px;
|
||||
border-radius: 20px;
|
||||
// margin-bottom: 15px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #ccc;
|
||||
ion-col{
|
||||
padding: 15px;
|
||||
// border-bottom: 1px solid #ccc;
|
||||
}
|
||||
h2{
|
||||
// font-size: 13px;
|
||||
// margin: 0;
|
||||
// font-weight: bold;
|
||||
// color: rgb(128, 124, 124);
|
||||
text-align: right;
|
||||
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
|
||||
line-height: 0px;
|
||||
font-size: 13px;
|
||||
letter-spacing: -0.52px;
|
||||
color: #A2A2A2;
|
||||
opacity: 1;
|
||||
}
|
||||
p{
|
||||
// font-size: 13px;
|
||||
// margin: 0;
|
||||
// font-family: WorkSans-Bold;
|
||||
|
||||
text-align: right;
|
||||
// font: normal normal 600 16px/5px Poppins;
|
||||
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
|
||||
line-height: 5px;
|
||||
font-size: 16px;
|
||||
letter-spacing: -0.64px;
|
||||
color: #2B353E;
|
||||
opacity: 1;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1px) and (max-width:767px){
|
||||
.user-image{
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 80px;
|
||||
/* border: 1px solid #ccc; */
|
||||
margin-top: -125px;
|
||||
|
||||
}}
|
||||
@media screen and (min-width: 768px) and (max-width:1024px){
|
||||
.user-image{
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 80px;
|
||||
margin-bottom: 371px;
|
||||
}}
|
||||
|
||||
.img{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: inline-flex;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
border-radius: 70% !important;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.sendCodeBtn{
|
||||
--background: #269DB8;
|
||||
color: white;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
margin-left: 5px !important;
|
||||
margin-top: 15px !important;
|
||||
margin-bottom: 20px !important;
|
||||
/* border-radius: 4px; */
|
||||
height: 26px;
|
||||
/* padding: 6px 24px; */
|
||||
font-size: 15px;
|
||||
width: 322px;
|
||||
}
|
||||
|
||||
.verify-code{
|
||||
position: relative;
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
z-index: 1;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #ccc;
|
||||
padding: 21px 3px 34px 14px;
|
||||
margin: 25px 22px 2px 22px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// .sms_code{
|
||||
// margin: 0px;
|
||||
// text-align: center;
|
||||
// }
|
||||
|
||||
ion-input {
|
||||
margin: 0 5px;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
font-size: 32px;
|
||||
//border: solid 1px #ccc;
|
||||
border: 1px solid #ccc !important;
|
||||
//box-shadow: 0 0 5px #ccc inset;
|
||||
outline: none;
|
||||
width: 20%;
|
||||
transition: all .2s ease-in-out;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
&:focus {
|
||||
border-color:var(--ion-color-secondary) !important;
|
||||
box-shadow: 0 0 5px var(--ion-color-secondary) !important;
|
||||
}
|
||||
|
||||
&::selection {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.sendVerifyBtn{
|
||||
--background: #269DB8;
|
||||
color: white;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
margin-top: 15px !important;
|
||||
margin-bottom: 20px !important;
|
||||
/* border-radius: 4px; */
|
||||
height: 26px;
|
||||
font-size: 15px;
|
||||
width: 322px;
|
||||
margin-left: 22px;
|
||||
}
|
||||
|
||||
.custom-radio .radio-icon {
|
||||
margin: 0px;
|
||||
border-radius: 50%;
|
||||
border-width: var(--border-width);
|
||||
border-style: var(--border-style);
|
||||
border-color: #dcdcdc;
|
||||
margin-top: 6px !important;
|
||||
border-color: #d8d4d4 !important;
|
||||
margin-bottom: 18px;}
|
||||
|
||||
.text-label{
|
||||
color: black !important;
|
||||
font-size: 10px;
|
||||
margin-left: 15px;
|
||||
margin-right: 18px;
|
||||
font-family: 'WorkSans-Bold';
|
||||
}
|
||||
|
||||
// .radio-list{
|
||||
// background: white;
|
||||
// margin-left: 18px;
|
||||
// /* margin-right: 10px; */
|
||||
// margin-top: 12px;
|
||||
// }
|
||||
|
||||
.result-serviceType{
|
||||
position: relative;
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
z-index: 1;
|
||||
border-radius: 25px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.request-heading {
|
||||
span {
|
||||
display: block;
|
||||
margin-bottom: 15px;
|
||||
// padding-top: 8px;
|
||||
// padding-left: 15px;
|
||||
/* font-weight: bold; */
|
||||
font-size: 14px;
|
||||
font-family: 'WorkSans-Bold';
|
||||
}
|
||||
}
|
||||
|
||||
.filed1{
|
||||
border-radius: 30px;
|
||||
border: 1px solid #d3d5d5 !important;
|
||||
margin: 10px;
|
||||
padding-left: 11px !important;
|
||||
padding-top: 6px !important;
|
||||
color: #636161;
|
||||
padding-bottom: 15px;
|
||||
// padding-right: 252px;
|
||||
padding-right: 115px;
|
||||
}
|
||||
.filed2{
|
||||
border-radius: 30px;
|
||||
border: 1px solid #d3d5d5 !important;
|
||||
margin: 10px;
|
||||
padding-left: 11px !important;
|
||||
padding-top: 6px !important;
|
||||
color: #636161;
|
||||
padding-bottom: 15px;
|
||||
// padding-right: 252px;
|
||||
padding-right: 153px;
|
||||
}
|
||||
.filed3{
|
||||
border-radius: 30px;
|
||||
border: 1px solid #d3d5d5 !important;
|
||||
margin: 10px;
|
||||
padding-left: 11px !important;
|
||||
padding-top: 6px !important;
|
||||
color: #636161;
|
||||
padding-bottom: 15px;
|
||||
// padding-right: 252px;
|
||||
padding-right: 61px;
|
||||
}
|
||||
.filedDesc{
|
||||
border-radius: 30px;
|
||||
border: 1px solid #d3d5d5 !important;
|
||||
// margin: 10px;
|
||||
padding-left: 20px !important;
|
||||
padding-top: 6px !important;
|
||||
color: #636161;
|
||||
--padding-bottom: 90px;
|
||||
font-size: 13px;
|
||||
text-align: start;
|
||||
}
|
||||
.filedDesc-ar{
|
||||
border-radius: 30px;
|
||||
border: 1px solid #d3d5d5 !important;
|
||||
// margin: 10px;
|
||||
padding-right: 20px !important;
|
||||
padding-top: 6px !important;
|
||||
color: #636161;
|
||||
--padding-bottom: 90px;
|
||||
font-size: 13px;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.labelDesc{
|
||||
display: block;
|
||||
padding-top: 8px;
|
||||
padding-left: 15px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #adabab;
|
||||
}
|
||||
|
||||
.selectLabel{
|
||||
display: block;
|
||||
padding-top: 8px;
|
||||
padding-left: 15px;
|
||||
font-size: 14px;
|
||||
/* font-family: 'WorkSans-Bold'; */
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
// .cancelRequest{
|
||||
// padding: 10px 7px 10px 0px;
|
||||
// ion-button{
|
||||
// border-radius: 7px;
|
||||
// padding: 12px 30px 12px 30px;
|
||||
// background: #d00a0a;
|
||||
// --background: transparent;
|
||||
// --box-shadow: none !important;
|
||||
// height: auto;
|
||||
// min-height: inherit;
|
||||
// font-size: 16px;
|
||||
// font-weight: bold;
|
||||
// margin-top: -5px;
|
||||
// }}
|
||||
// .submitRequest{
|
||||
// padding: 10px 7px 10px 0px;
|
||||
// ion-button{
|
||||
// border-radius: 7px;
|
||||
// padding: 12px 30px 12px 30px;
|
||||
// background: #19a163;
|
||||
// --background: transparent;
|
||||
// --box-shadow: none !important;
|
||||
// height: auto;
|
||||
// min-height: inherit;
|
||||
// font-size: 16px;
|
||||
// font-weight: bold;
|
||||
// margin-top: -5px;
|
||||
// }}
|
||||
|
||||
|
||||
.gridDiv{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-top: 18px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.gridCancelBtn{
|
||||
min-width: auto;
|
||||
// margin: 0px;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--cusgray);
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
background: #d00a0a;
|
||||
color: white;
|
||||
margin-left: 15px;
|
||||
margin-right: 5px;
|
||||
font-family: 'WorkSans-bold';
|
||||
}
|
||||
|
||||
.gridSubmitBtn{
|
||||
min-width: auto;
|
||||
// margin: 0px;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--cusgray);
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
background: #19a163;
|
||||
color: white;
|
||||
// margin-left: 15px;
|
||||
// margin-right: 5px;
|
||||
font-family: 'WorkSans-bold';}
|
||||
|
||||
|
||||
.filed-container{
|
||||
margin-right: -17px;
|
||||
margin-left: -25px;
|
||||
}
|
||||
|
||||
.labels{
|
||||
display: block;
|
||||
margin-top: 15px;
|
||||
padding-top: 8px;
|
||||
padding-left: 15px;
|
||||
font-size: 14px;
|
||||
font-family: 'WorkSans-Bold';
|
||||
}
|
||||
|
||||
@media screen and (min-width: 325px) { .CreateBtn{
|
||||
--background: var(--newgreen) !important;
|
||||
background: var(--newgreen) !important;
|
||||
white-space: normal;
|
||||
color: var(--light);
|
||||
text-transform: capitalize;
|
||||
min-height: 1.0cm;
|
||||
--border-radius: 7px !important;
|
||||
border-radius: 7px !important;
|
||||
--min-height: 1.6cm !important;
|
||||
width: 315px;
|
||||
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
|
||||
}}
|
||||
@media screen and (min-width: 1px) and (max-width:320px) {
|
||||
.CreateBtn{
|
||||
--background: var(--newgreen) !important;
|
||||
background: var(--newgreen) !important;
|
||||
white-space: normal;
|
||||
color: var(--light);
|
||||
text-transform: capitalize;
|
||||
min-height: 1.0cm;
|
||||
--border-radius: 7px !important;
|
||||
border-radius: 7px !important;
|
||||
--min-height: 1.6cm !important;
|
||||
width: 231px;
|
||||
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
|
||||
}}
|
||||
|
||||
|
||||
.footer{
|
||||
padding: 15px 0px 0px 0px;
|
||||
background-color: var(--light) !important;
|
||||
border: 0px !important;
|
||||
box-shadow: none !important;
|
||||
-webkit-box-shadow: none;
|
||||
}
|
||||
.Btn{
|
||||
margin: auto; text-align: center; display: block;
|
||||
}
|
||||
.footer2{
|
||||
padding: 15px 0px 0px 24px;
|
||||
background-color: var(--light) !important;
|
||||
border: 0px !important;
|
||||
box-shadow: none !important;
|
||||
-webkit-box-shadow: none;
|
||||
}
|
||||
|
||||
ion-footer .footer-button{
|
||||
--background: #259CB8;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.fileUpload {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 10px;
|
||||
margin-left: -233px;
|
||||
}
|
||||
.fileUpload input.upload {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
|
||||
.hL{
|
||||
line-height: 19px !important;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HRRequestComponent } from './hr-request.component';
|
||||
|
||||
describe('HrRequestComponent', () => {
|
||||
let component: HRRequestComponent;
|
||||
let fixture: ComponentFixture<HRRequestComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ HRRequestComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(HRRequestComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,52 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { MowadhafiPage } from './mowadhafi.page';
|
||||
import { HmgCommonModule } from '../hmg-common/hmg-common.module';
|
||||
import {MyRequestComponent} from './my-request/my-request.component';
|
||||
import {HRRequestComponent} from './hr-request/hr-request.component';
|
||||
import {RequestDetailsComponent} from'./request-details/request-details.component';
|
||||
import {HrRequestFormComponent} from './hr-request-form/hr-request-form.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: MowadhafiPage,
|
||||
children:[{
|
||||
path: 'my-request',
|
||||
component: MyRequestComponent
|
||||
},
|
||||
{
|
||||
path: 'hr-request',
|
||||
component: HRRequestComponent
|
||||
},
|
||||
{
|
||||
path: 'request-details',
|
||||
component: RequestDetailsComponent
|
||||
},
|
||||
{
|
||||
path: 'hr-request-form',
|
||||
component: HrRequestFormComponent
|
||||
}
|
||||
|
||||
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
HmgCommonModule,
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
RouterModule.forChild(routes)
|
||||
],
|
||||
declarations: [MowadhafiPage,MyRequestComponent,HRRequestComponent
|
||||
,RequestDetailsComponent,HrRequestFormComponent]
|
||||
})
|
||||
export class MowadhafiPageModule {}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue