From bd2cc4edb1514d9ebbef093b5d092c2de765e23e Mon Sep 17 00:00:00 2001 From: haroon amjad Date: Thu, 4 Jul 2019 16:45:30 +0300 Subject: [PATCH] UI Elements implemented --- Mohem/src/app/uI-elements/button.input.ts | 23 +++++++ Mohem/src/app/uI-elements/date-time.input.ts | 56 ++++++++++++++++ Mohem/src/app/uI-elements/date.input.ts | 53 +++++++++++++++ Mohem/src/app/uI-elements/hidden.input.ts | 29 +++++++++ Mohem/src/app/uI-elements/number.input.ts | 37 +++++++++++ Mohem/src/app/uI-elements/select.input.ts | 42 ++++++++++++ Mohem/src/app/uI-elements/text-area.input.ts | 37 +++++++++++ Mohem/src/app/uI-elements/text.input.ts | 34 ++++++++++ Mohem/src/app/uI-elements/time.input.ts | 51 +++++++++++++++ Mohem/src/app/uI-elements/ui-element.ts | 64 +++++++++++++++++++ .../vacation-rule/home/home.component.html | 7 +- .../app/vacation-rule/home/home.component.ts | 50 +++++++++++++-- .../service/vacation-rule-service.service.ts | 1 - 13 files changed, 478 insertions(+), 6 deletions(-) create mode 100644 Mohem/src/app/uI-elements/button.input.ts create mode 100644 Mohem/src/app/uI-elements/date-time.input.ts create mode 100644 Mohem/src/app/uI-elements/date.input.ts create mode 100644 Mohem/src/app/uI-elements/hidden.input.ts create mode 100644 Mohem/src/app/uI-elements/number.input.ts create mode 100644 Mohem/src/app/uI-elements/select.input.ts create mode 100644 Mohem/src/app/uI-elements/text-area.input.ts create mode 100644 Mohem/src/app/uI-elements/text.input.ts create mode 100644 Mohem/src/app/uI-elements/time.input.ts create mode 100644 Mohem/src/app/uI-elements/ui-element.ts diff --git a/Mohem/src/app/uI-elements/button.input.ts b/Mohem/src/app/uI-elements/button.input.ts new file mode 100644 index 00000000..aa24fedd --- /dev/null +++ b/Mohem/src/app/uI-elements/button.input.ts @@ -0,0 +1,23 @@ +import { UiElement } from "./ui-element"; + +export class ButtonInput extends UiElement { + constructor( + //private label: string, + private elementId: string, + private value: any, + private containerId: string, + private disabled: string) { + super(elementId, containerId, ''); + this.createElement(this.getTemplate()); + + } + + public getTemplate() { + if (this.disabled == "N") { this.disabled = "disabled" } else { this.disabled = "" } + const template = + "
" + + "Submit" + + "
"; + return template; + } +} \ No newline at end of file diff --git a/Mohem/src/app/uI-elements/date-time.input.ts b/Mohem/src/app/uI-elements/date-time.input.ts new file mode 100644 index 00000000..5a63f93a --- /dev/null +++ b/Mohem/src/app/uI-elements/date-time.input.ts @@ -0,0 +1,56 @@ +import { UiElement } from "./ui-element"; + +export class DateTimeInput extends UiElement { + constructor( + private label: string, + private elementId: string, + private value: any, + private containerId: string, + private disabled: string, + private hidden: string, + private required: string) { + super(elementId, containerId, ''); + this.createElement(this.getTemplate()); + + } + + formatDate() { + let date = new Date(); + this.value = date.toISOString().slice(0, 10) + "T" + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds(); + } + public getTemplate() { + let requiredClass: string = ""; + let disaledClass = ""; + //let timeValue=null; + //let dateValue=null; + if (this.disabled == "N") { this.disabled = "disabled"; disaledClass = "disabled" } else { this.disabled = ""; disaledClass = "" } + if (this.hidden == "N") { this.hidden = "display:none;" } else { this.hidden = "" } + if (this.value == "currentDateTime") { + this.formatDate(); + } + if (this.required == 'Y') + requiredClass = "requiredClass" + // let arrayDate=val.split(" "); + // elem.value = this.common.reverseFormatDate(arrayDate[0]); + // elem.setAttribute('value', elem.value); + // const timeInput = document.getElementById(this.validateEitObj[i].APPLICATION_COLUMN_NAME+"Time") as HTMLInputElement; + // timeInput.value = arrayDate[1]; + // timeInput.setAttribute('value', timeInput.value); + // if(this.value){ + // let arrayDate=this.value.split(" "); + // dateValue=arrayDate[0]; + // timeValue=arrayDate[1]; + // } + const template = + "" + + " " + this.label + "" + + // "
" + this.value + "
" + + "" + + // " "+ + // " "+ + // " "+ + "
" + return template; + } + +} \ No newline at end of file diff --git a/Mohem/src/app/uI-elements/date.input.ts b/Mohem/src/app/uI-elements/date.input.ts new file mode 100644 index 00000000..433df253 --- /dev/null +++ b/Mohem/src/app/uI-elements/date.input.ts @@ -0,0 +1,53 @@ +import { UiElement } from "./ui-element"; + +export class DateInput extends UiElement { + private currentDate: any = "" + constructor( + private label: string, + private elementId: string, + private value: any, + private containerId: string, + private disabled: string, + private hidden: string, + private required: string) { + super(elementId, containerId, ''); + this.createElement(this.getTemplate()); + + } + + formatDate() { + let date = new Date(); + this.value = date.toISOString().slice(0, 10); + } + public getTemplate() { + let requiredClass: string = ""; + if (this.disabled == "N") { this.disabled = "disabled" } else { this.disabled = "" } + if (this.hidden == "N") { this.hidden = "display:none;" } else { this.hidden = "" } + if (this.value == "currentDate") { + this.formatDate(); + } else { + if (this.value) { + this.value = new Date(this.value).toISOString().slice(0, 10); + } + } + if (this.required == 'Y') + requiredClass = "requiredClass" + const template = + // "
" + + // " " + + // " "+ + // "
"; + + "" + + " " + this.label + "" + + // "
" + this.value + "
" + + "" + + // " "+ + // " "+ + // " "+ + "
" + + return template; + } + +} \ No newline at end of file diff --git a/Mohem/src/app/uI-elements/hidden.input.ts b/Mohem/src/app/uI-elements/hidden.input.ts new file mode 100644 index 00000000..576cffdb --- /dev/null +++ b/Mohem/src/app/uI-elements/hidden.input.ts @@ -0,0 +1,29 @@ +import { UiElement } from "./ui-element"; + +export class HiddenInput extends UiElement { + private currentDate: any = "" + constructor( + private label: string, + private elementId: string, + private value: any, + private containerId: string) { + super(elementId, containerId, ''); + this.createElement(this.getTemplate()); + + } + + + public getTemplate() { + const template = + // "
" + + // " "+ + // "
"; + + "" + + "" + + " "; + + return template; + } + +} \ No newline at end of file diff --git a/Mohem/src/app/uI-elements/number.input.ts b/Mohem/src/app/uI-elements/number.input.ts new file mode 100644 index 00000000..346f2e07 --- /dev/null +++ b/Mohem/src/app/uI-elements/number.input.ts @@ -0,0 +1,37 @@ +import { UiElement } from "./ui-element"; + +export class NumberInput extends UiElement { + constructor( + private label: string, + private elementId: string, + private value: any, + private containerId: string, + private disabled: string, + private hidden: string, + private required: string) { + super(elementId, containerId, ''); + this.createElement(this.getTemplate()); + + } + + public getTemplate() { + let requiredClass: string = ""; + if (this.required == 'Y') + requiredClass = "requiredClass" + if (this.disabled == "N") { this.disabled = "disabled" } else { this.disabled = "" } + if (this.hidden == "N") { this.hidden = "display:none;" } else { this.hidden = "" } + const template = + // "
" + + // " " + + // " " + + // "
"; + + "" + + "" + this.label + "" + + " " + + " "; + + return template; + } + +} \ No newline at end of file diff --git a/Mohem/src/app/uI-elements/select.input.ts b/Mohem/src/app/uI-elements/select.input.ts new file mode 100644 index 00000000..d7e6079c --- /dev/null +++ b/Mohem/src/app/uI-elements/select.input.ts @@ -0,0 +1,42 @@ +import { UiElement } from "./ui-element"; + +export class SelectInput extends UiElement { + + constructor( + private label: string, + private elementId: string, + private value: any, + private containerId: string, + private disabled: string, + private hidden: string, + private required: string) { + super(elementId, containerId, ''); + this.createElement(this.getTemplate()); + + } + + + public getTemplate() { + let requiredClass: string = ""; + if (this.required == 'Y') + requiredClass = "requiredClass" + if (this.disabled == "N") { this.disabled = "disabled" } else { this.disabled = "" } + if (this.hidden == "N") { this.hidden = "display:none;" } else { this.hidden = "" } + const template = + // "
" + + // "" + + // "" + + // "
"; + + "" + + "" + this.label + "" + + "" + + "" + this.value + "" + + "" + + " "; + + return template; + } +} \ No newline at end of file diff --git a/Mohem/src/app/uI-elements/text-area.input.ts b/Mohem/src/app/uI-elements/text-area.input.ts new file mode 100644 index 00000000..86a60bea --- /dev/null +++ b/Mohem/src/app/uI-elements/text-area.input.ts @@ -0,0 +1,37 @@ +import { UiElement } from "./ui-element"; + +export class TextAreaInput extends UiElement { + constructor( + private label: string, + private elementId: string, + private value: any, + private containerId: string, + private disabled: string, + private hidden: string, + private required: string) { + super(elementId, containerId, ''); + this.createElement(this.getTemplate()); + + } + + public getTemplate() { + let requiredClass: string = ""; + if (this.required == 'Y') + requiredClass = "requiredClass" + if (this.disabled == "N") { this.disabled = "disabled" } else { this.disabled = "" } + if (this.hidden == "N") { this.hidden = "display:none;" } else { this.hidden = "" } + const template = + // "
" + + // "" + + // "" + + // "
"; + + "" + + "" + this.label + "" + + "" + this.value + "" + + ""; + + return template; + } + +} \ No newline at end of file diff --git a/Mohem/src/app/uI-elements/text.input.ts b/Mohem/src/app/uI-elements/text.input.ts new file mode 100644 index 00000000..86d218ce --- /dev/null +++ b/Mohem/src/app/uI-elements/text.input.ts @@ -0,0 +1,34 @@ +import { UiElement } from "./ui-element"; + + +export class TextInput extends UiElement { + + constructor( + private label: string, + private elementId: string, + private value: any, + private containerId: string, + private textVal: string, + private disabled: string, + private hidden: string, + private required: string) { + super(elementId, containerId, ''); + this.createElement(this.getTemplate()); + } + + public getTemplate() { + let requiredClass: string = ""; + if (this.required === 'Y') + requiredClass = "requiredClass" + if (this.disabled === "N") { this.disabled = "disabled" } else { this.disabled = "" } + if (this.hidden === "N") { this.hidden = "display:none;" } else { this.hidden = "" } + const template = + // "
" + + "" + + " " + this.label + "" + + " " + + " "; + + return template; + } +} diff --git a/Mohem/src/app/uI-elements/time.input.ts b/Mohem/src/app/uI-elements/time.input.ts new file mode 100644 index 00000000..33fec9f1 --- /dev/null +++ b/Mohem/src/app/uI-elements/time.input.ts @@ -0,0 +1,51 @@ +import { UiElement } from "./ui-element"; + +export class TimeInput extends UiElement { + constructor( + private label: string, + private elementId: string, + private value: any, + private containerId: string, + private disabled: string, + private hidden: string, + private required: string) { + super(elementId, containerId, ''); + this.createElement(this.getTemplate()); + + } + + formatDate() { + let date = new Date(); + this.value = date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds(); + } + + + public getTemplate() { + let requiredClass: string = ""; + let disaledClass = ""; + if (this.required == 'Y') + requiredClass = "requiredClass" + if (this.disabled == "N") { this.disabled = "disabled"; disaledClass = "disabled" } else { this.disabled = ""; disaledClass = "" } + if (this.hidden == "N") { this.hidden = "display:none;" } else { this.hidden = "" } + if (this.value == "currentTime") { + this.formatDate(); + } + const template = + // "
" + + // " " + + // // " "+ + // "
"+this.value+"
"+ + // "
"; + + "" + + " " + this.label + "" + + // "
" + this.value + "
" + + "" + + // " "+ + // " "+ + // " "+ + "
" + return template; + } + +} \ No newline at end of file diff --git a/Mohem/src/app/uI-elements/ui-element.ts b/Mohem/src/app/uI-elements/ui-element.ts new file mode 100644 index 00000000..2d7ec8f8 --- /dev/null +++ b/Mohem/src/app/uI-elements/ui-element.ts @@ -0,0 +1,64 @@ +export class UiElement { + + constructor(private elementID, private containerID, private viewClass) { + } + + + private getContainer() { + return document.getElementById(this.containerID); + } + + public createElement(html: string) { + + const container = this.getContainer(); + if (container) { + container.appendChild(this.getElement(html)); + } + // this.registerEvents(onConfirm, onCancel); + } + + public delete() { + const element = document.getElementById(this.elementID); + if (element) { + element.remove(); + } + } + + public onClicked(listener: any) { + this.registerEvent('click', listener); + } + + + public onChanged(listener: any) { + this.registerEvent('change', listener); + } + + + public onBlur(listener: any) { + this.registerEvent('blur', listener); + } + + private registerEvent(event: string, listener: any) { + const element = document.getElementById(this.elementID); + element.addEventListener(event, (e) => { + if (listener) { + listener(); + } + e.stopImmediatePropagation(); + }); + } + + + private getElement(html: string) { + const elemDiv = document.createElement('div'); + //elemDiv.id = this.elementID; + elemDiv.className = this.viewClass; + elemDiv.innerHTML = html; + return elemDiv; + } + + public getValue() { + return (document.getElementById(this.elementID) as HTMLInputElement).value; + } +} + diff --git a/Mohem/src/app/vacation-rule/home/home.component.html b/Mohem/src/app/vacation-rule/home/home.component.html index 5f71bdcc..2bd909e4 100644 --- a/Mohem/src/app/vacation-rule/home/home.component.html +++ b/Mohem/src/app/vacation-rule/home/home.component.html @@ -6,6 +6,10 @@ + + +
@@ -73,6 +77,7 @@
- {{'vacation-rule, createRule' | translate}} + + {{'vacation-rule, createRule' | translate}}
\ No newline at end of file diff --git a/Mohem/src/app/vacation-rule/home/home.component.ts b/Mohem/src/app/vacation-rule/home/home.component.ts index a192200b..e9a0785f 100644 --- a/Mohem/src/app/vacation-rule/home/home.component.ts +++ b/Mohem/src/app/vacation-rule/home/home.component.ts @@ -6,7 +6,7 @@ import { VacationRuleServiceService } from './../service/vacation-rule-service.s import { VacationRuleRequest } from './../model/VacationRuleRequest'; import { Component, OnInit } from '@angular/core'; import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service'; -import { NavigationExtras, Router } from '@angular/router'; +import { Router } from '@angular/router'; @Component({ selector: 'app-home', @@ -23,16 +23,59 @@ export class HomeComponent implements OnInit { IsReachEnd: boolean = false; RespondAttributeList: any; + // button: ButtonInput; + // dateTime: DateTimeInput; + // date: DateInput; + // numberInput: NumberInput; + // selectInput: SelectInput; + // textAreaInput: TextAreaInput; + // timeInput: TimeInput; + constructor(public vacationRuleService: VacationRuleServiceService, public ts: TranslatorService, public cs: CommonService, private router: Router) { this.P_PAGE_NUM = 1; this.P_PAGE_LIMIT = 50; + + // this.button = new ButtonInput('btnSubmit', 'Submit', 'containerDiv', 'Y'); + // this.dateTime = new DateTimeInput('Start Date', 'SDate', '', 'containerDiv', 'Y', 'Y', 'Y'); + // this.date = new DateInput('Start Date', 'SDate', '', 'containerDiv', 'Y', 'Y', 'Y'); + // this.numberInput = new NumberInput('Roll No.:', 'rollNo', '', 'containerDiv', 'Y', 'Y', 'Y'); + // this.selectInput = new SelectInput('Gender', 'genderSelect', 'm', 'containerDiv', 'Y', 'Y', 'Y'); + // this.textAreaInput = new TextAreaInput('Message:', 'messageText', '', 'containerDiv', 'Y', 'Y', 'Y'); + // this.timeInput = new TimeInput('Time', 'SDate', '', 'containerDiv', 'Y', 'Y', 'Y'); + + } + + showAlert() { + this.cs.presentAlert('Button Clicked'); } ngOnInit() { console.log('OnInit'); this.getVacationRules(); - console.log(this.GetVacationRulesList); + // let elem = document.getElementById('btnSubmit'); + + // const elemDiv = document.createElement('div'); + //elemDiv.id = this.elementID; + // elemDiv.className = ''; + + // elemDiv.innerHTML = this.button.getTemplate(); + // elemDiv.innerHTML = this.dateTime.getTemplate(); + // elemDiv.innerHTML = this.date.getTemplate(); + // elemDiv.innerHTML = this.numberInput.getTemplate(); + // elemDiv.innerHTML = this.selectInput.getTemplate(); + // elemDiv.innerHTML = this.textAreaInput.getTemplate(); + // elemDiv.innerHTML = this.timeInput.getTemplate(); + + // document.getElementById('containerDiv').appendChild(elemDiv); + + // let elem = document.getElementById("btnSubmit"); + // console.log(elem); + // elem.addEventListener("click", (e) => { + // this.showAlert(); + // e.stopImmediatePropagation(); + // }); + } Vacation_Type() { @@ -52,7 +95,6 @@ export class HomeComponent implements OnInit { }, this.ts.trPK('general', 'retry')).subscribe((result) => { if (this.cs.validResponse(result)) { this.GetVacationRulesList = result.GetVacationRulesList; - console.log(result.GetVacationRulesList); } else { this.cs.presentAlert(result.ErrorEndUserMessage); } @@ -93,7 +135,7 @@ export class HomeComponent implements OnInit { this.cs.sharedService.setSharedData(this.GetVacationRulesList[i], vacationRuleResponse.SHARED_DATA); this.isUpdate = true; - + this.cs.sharedService.setSharedData(this.isUpdate, 'isUpdate'); this.router.navigate(['/vacation-rule/create-vacation-rule']); } diff --git a/Mohem/src/app/vacation-rule/service/vacation-rule-service.service.ts b/Mohem/src/app/vacation-rule/service/vacation-rule-service.service.ts index 4359879f..03b7a670 100644 --- a/Mohem/src/app/vacation-rule/service/vacation-rule-service.service.ts +++ b/Mohem/src/app/vacation-rule/service/vacation-rule-service.service.ts @@ -34,7 +34,6 @@ export class VacationRuleServiceService { public getVacationRule(vacationRuleRequest: VacationRuleRequest, onError: any, errorLabel: string): Observable { const request = vacationRuleRequest; - console.log(request); this.authService.authenticateRequest(request); return this.con.post(VacationRuleServiceService.getVacationRule, request, onError, errorLabel); }