added search modal and its CSS

master
umasoodch 6 years ago
parent 2e6dd95004
commit 86e96c11d0

@ -32,7 +32,7 @@
</ion-slides>
</ion-row>
<ion-row class="search-container">
<ion-row class="search-container" (click)="openSearchModal()">
<ion-icon name="search" ></ion-icon>
<span>Advanced Search</span>
</ion-row>
@ -70,4 +70,4 @@
</div>
</div>
</div>
</ion-content>
</ion-content>

@ -1,4 +1,5 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { ModalController } 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 { WorkListRequest } from '../models/workListRequest';
@ -7,6 +8,7 @@ import { WorKListResponse } from '../models/workListResponse';
import { WorklistService } from '../service/worklist.service';
import { IonInfiniteScroll } from '@ionic/angular';
import { WorklistMainService } from '../service/work-list.main.service';
import { WorklistAdvancedSearchComponent } from '../worklist-advanced-search/worklist-advanced-search.component';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
@ -119,6 +121,7 @@ constructor(
public ts: TranslatorService,
public WorklistService: WorklistService,
public workListService: WorklistMainService,
public modalController: ModalController
) {
this.WorkListObj = new WorkListRequest();
this.WorkListObj.P_NOTIFICATION_TYPE = '1';
@ -136,6 +139,40 @@ constructor(
}
this.filters[index].active = true;
}
async openSearchModal() {
console.log('umar786');
const modal = await this.modalController.create({
component: WorklistAdvancedSearchComponent,
cssClass: 'advanced-search-modal',
componentProps: {
// dateFrom : this.dateFrom,
// dateTo : this.dateTo
}
});
modal.onDidDismiss().then(result => {
// console.log(result.data);
// this.loadMore = false;
// this.rightIconActive = false;
// this.leftIconActive = false;
// this.dayHoursData = [];
// this.timeCardSummaryData = [];
// this.dayAndHoursPageNumber = 1;
// this.loadMoreDateHoursData = false;
// this.dateFrom = result.data.dateFrom;
// this.dateTo = result.data.dateTo;
// this.selectedFilters = result.data.keySelectedFilters;
// this.selectedShiftFilter = result.data.selectedShiftType;
// if (this.dateFrom && this.dateTo) {
// this.getDayHoursTypeDetails();
// this.getTimeCardSummaryDetails();
// }
});
return await modal.present();
}
ngOnInit() {
// this.direction = TranslatorService.getCurrentDirection();
}

@ -25,6 +25,8 @@ import { WorklistMainPoComponent } from './worklist-main-po/worklist-main-po.com
import { ItemHistoryComponent } from './item-history/item-history.component';
import { QutationAnalysisComponent } from './qutation-analysis/qutation-analysis.component';
import { WorklistMainMRComponent } from './worklist-main-mr/worklist-main-mr.component';
import { WorklistAdvancedSearchComponent } from './worklist-advanced-search/worklist-advanced-search.component';
// import { WorklistMainComponent } from './worklist-main/worklist-main.component';
@ -128,9 +130,13 @@ const routes: Routes = [
WorklistMainPoComponent,
ItemHistoryComponent,
QutationAnalysisComponent,
WorklistMainMRComponent
WorklistMainMRComponent,
WorklistAdvancedSearchComponent
// WorklistMainComponent
],
entryComponents: [
WorklistAdvancedSearchComponent
],
providers: [WorklistService, WorklistMainService, WorklistAttachService]
})
export class NotificationPageModule {}

@ -0,0 +1,48 @@
<div class="search-header" (click)="dismissModal()">
<h2>Advanced Search</h2>
<ion-icon slot="icon-only" name="md-close"></ion-icon>
</div>
<div class="search-container">
<ion-item lines="none">
<ion-label>{{ts.trPK('worklist','view')}}</ion-label>
<ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}"
[(ngModel)]="notificationType" (ionChange)=onChangeView($event)>
<ion-select-option value="1" selected="true">{{ts.trPK('worklist','openNot')}}</ion-select-option>
<ion-select-option value="2">{{ts.trPK('worklist','fyi')}}</ion-select-option>
<ion-select-option value="3">{{ts.trPK('worklist','toDo')}}</ion-select-option>
<ion-select-option value="4">{{ts.trPK('worklist','all')}}</ion-select-option>
<ion-select-option value="5">{{ts.trPK('worklist','meNot')}} </ion-select-option>
</ion-select>
</ion-item>
<ion-item lines="none">
<ion-label>{{ts.trPK('worklist','searchby')}}</ion-label>
<ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}"
[(ngModel)]="searchBy" (ionChange)="getValueSelected($event)">
<ion-select-option value="1">{{ts.trPK('worklist','from')}}</ion-select-option>
<ion-select-option value="2">{{ts.trPK('worklist','subject')}}</ion-select-option>
<ion-select-option value="3">{{ts.trPK('worklist','sent')}}</ion-select-option>
<ion-select-option value="4">{{ts.trPK('worklist','itemType')}}</ion-select-option>
<ion-select-option value="5">{{ts.trPK('worklist','none')}}</ion-select-option>
</ion-select>
</ion-item>
<ion-item lines="none">
<ion-label>Request Type</ion-label>
<ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}"
[(ngModel)]="searchBy" (ionChange)="getValueSelected($event)">
<ion-select-option value="1">{{ts.trPK('worklist','from')}}</ion-select-option>
<ion-select-option value="2">{{ts.trPK('worklist','subject')}}</ion-select-option>
<ion-select-option value="3">{{ts.trPK('worklist','sent')}}</ion-select-option>
<ion-select-option value="4">{{ts.trPK('worklist','itemType')}}</ion-select-option>
<ion-select-option value="5">{{ts.trPK('worklist','none')}}</ion-select-option>
</ion-select>
</ion-item>
<div class="search-button">
<span>SEARCH</span>
</div>
</div>

@ -0,0 +1,40 @@
.search-header{
display: inline-block;
h2 {
display: inline-block;
margin-left: 20px;
font-family: WorkSans-Regular;
font-size: 18px;
margin-top: 12px;
}
ion-icon {
display: inline-block;
font-size: 23px;
position: absolute;
right: 15px;
top: 8px;
}
}
.search-container {
margin-right: 15px;
margin-left: 15px;
padding-bottom: 100px;
margin-top: 5px;
ion-item{
border: 2px solid #eaeaea;
border-radius: 25px;
margin-bottom: 20px;
}
}
.search-button{
background: #3dcab3;
height: 50px;
text-align: center;
font-family: WorkSans-Regular;
border-radius: 22px;
margin-top: 20px;
line-height: 50px;
span{
color: white;
}
}

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

@ -0,0 +1,30 @@
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
@Component({
selector: 'app-worklist-advanced-search',
templateUrl: './worklist-advanced-search.component.html',
styleUrls: ['./worklist-advanced-search.component.scss'],
})
export class WorklistAdvancedSearchComponent implements OnInit {
constructor(
public modalController: ModalController,
public ts: TranslatorService
) { }
ngOnInit() {}
public dismissModal() {
console.log('umar 545');
this.modalController.dismiss({
// dismissed: true,
// keySelectedFilters: selectedFilters,
// selectedShiftType: this.selectedShiftType,
// dateFrom: this.dateFrom,
// dateTo: this.dateTo
});
}
}

@ -931,4 +931,10 @@ border:0px
// }
// .filters-row .swiper-container .swiper-wrapper .swiper-slide:first-child {
// margin-left:32px;
// }
// }
.advanced-search-modal {
--height: 9cm !important;
--width: 88% !important;
--border-radius: 0.6cm;
}
Loading…
Cancel
Save