New Components

1. ecm-image : To load and display image returned from AttachmentPlugin or E12ExtService

2. ecm-input : To create Input Elements (text, password, checkbox ....), Select Element
using Material CSS

3. ecm-siginin : Signin Screen

4. ecm-user-option : Displays Option for user. In case user not logged in, will display Signin Screen or display User Details with Logout button.


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174344 ce508802-f39f-4f6c-b175-0d175dae99d5

ecm/Angular/ProteusECM/trunk/src/app/ecm-image/ecm-image.component.css

+.ecm-image {
+	border-top-right-radius: 5px;
+	border-top-left-radius: 5px;
+	width: 100%;
+	
+	height: calc( 100% - 90px);
+}
+
+.ecm-image-icon {
+	float: left;
+	/*background-color: mediumvioletred;*/
+	border: none;
+	border-radius: 100%;
+}
+
+.img-loading {
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	background: #ddd;
+	box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;
+	position: absolute;
+	top: 45%;
+	left: 55%;
+	margin: -25px 0 0 -25px;
+	-webkit-animation: loader 0.5s infinite ease-in-out both;
+	-moz-animation: loader 0.5s infinite ease-in-out both;
+	animation: loader 0.5s infinite ease-in-out both;
+}
+
+@-webkit-keyframes loader {
+	0% { background: #ddd; }
+	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
+	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
+}
+
+@-moz-keyframes loader {
+	0% { background: #ddd; }
+	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
+	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
+}
+
+@keyframes loader {
+	0% { background: #ddd; }
+	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
+	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
+}
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-image/ecm-image.component.html

+ <div *ngIf="!attachType" class="img-loading" #loadingImage></div>
+ <div *ngIf="!attachType" class="ecm-image" #targetAttachImage></div>
+ 
+ <img *ngIf="attachType == 'Image'" class="ecm-image" #targetImage />
+ <img *ngIf="attachType == 'Icon'" class="ecm-image-icon" #targetImage />
+ 
+ 
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-image/ecm-image.component.ts

+import { Component, OnInit, AfterViewChecked, Input, ViewChild, ElementRef } from '@angular/core';
+
+declare var getAttachmentsPlugin: any;
+
+@Component({
+  selector: 'ecm-image',
+  templateUrl: './ecm-image.component.html',
+  styleUrls: ['./ecm-image.component.css']
+})
+export class EcmImageComponent implements OnInit, AfterViewChecked {
+
+    @Input() refId : string;
+    @Input() refSer : string;
+    @Input() object : string;
+    @Input() attachType : string;
+
+    @ViewChild('targetAttachImage') targetDiv:ElementRef;
+    @ViewChild('targetImage') targetImg:ElementRef;
+    @ViewChild('loadingImage') loadingDiv:ElementRef;
+    imageUrl : any;
+  
+  attchPluginViewUI: any;
+  constructor() { }
+
+  ngOnInit() 
+  {
+      if( this.attachType )
+      {
+          this.initImage(this.object,this.refSer, this.refId, this.attachType);
+      }
+      else
+      {
+          this.initAttachImage(this.object,this.refSer, this.refId, 'V');
+      }
+  }
+  
+  //192.168.0.222:9090/ibase/rest/E12ExtService/getAttachDocument?
+  //OBJ_NAME=objName&
+  //REF_SER=refSer&
+  //REF_ID=refId&
+  //DOC_TYPE=attachType&
+  //TOKEN_ID=localStorage.getItem('TOKEN_ID')&
+  //DATA_FORMAT=JSON
+  initImage(objName:string, refSer:string, refId:string, attachType:string)
+  {
+      this.imageUrl = "?OBJ_NAME=" + objName + "&REF_SER=" + refSer + "&REF_ID=" + refId +
+                   "&DOC_TYPE=" + attachType + "&TOKEN_ID=" + localStorage.getItem('TOKEN_ID') + "&DATA_FORMAT=JSON";
+      console.log("initImage calling /ibase/rest/E12ExtService/getAttachDocument ");          
+      console.log("created imageUrl " + this.imageUrl);      
+  }
+  
+  initAttachImage(objName:string, refSer:string, refId:string, uiMode:string)
+  {
+      console.log("loadImage check window.getAttachmentsPlugin ");          
+      if (! getAttachmentsPlugin ){
+          console.log("window.getAttachmentsPlugin is null" );          
+          return;
+      }
+      // Get the target element in which you want to add AttachmentsPlugin.
+      console.log("loadImage after check window.getAttachmentsPlugin ");          
+      this.attchPluginViewUI = getAttachmentsPlugin({
+          OBJ_NAME : objName,
+          REF_SER : refSer,
+          REF_ID : refId,//ITEM_CODE
+          // host url can be empty in browser
+          // for mobile devices it has be specified correctly
+          HOST_URL : "",
+          DOC_TYPE : "",
+          // A - For gettig add ui (user can add new attachments and view attached files)
+          // E - For getting edit ui (user can view attachments, add new attachments as well as delete attachments)
+          // V - For getting view ui (user can only view attachments)
+          UI : uiMode,
+          // The thumbnail height and width
+          THUMBNAIL_WIDTH : '100%',
+          THUMBNAIL_HEIGHT : '100%',
+          // Maximum width of attachment plugin, can be specified in pixels
+          MAX_WIDTH : "100%",
+          // true for browser, false for mobile.
+          IS_HOSTED_MODE : true || false
+      });
+      
+      //console.log("created attchPluginViewUI " + this.attchPluginViewUI);      
+      //this.nodeToString( this.attchPluginViewUI );      
+           
+      if (this.targetDiv && this.attchPluginViewUI)
+      {
+          this.targetDiv.nativeElement.innerHTML = "";
+      }
+  }
+  
+  ngAfterViewChecked()
+  {
+      //console.log("EcmImageComponent ngAfterViewChecked... ");
+      if( this.targetDiv && this.attchPluginViewUI && this.attchPluginViewUI.innerHTML !== "" && this.targetDiv.nativeElement.innerHTML === "" )
+      {
+          console.log("EcmImageComponent ngAfterViewChecked... ");
+          this.targetDiv.nativeElement.appendChild(this.attchPluginViewUI);
+          this.loadingDiv.nativeElement.style.display = 'none';
+      }
+      
+      if (this.targetImg && this.imageUrl)
+      {
+          console.log("this.targetImg ngAfterViewChecked... " + this.targetImg);
+          this.targetImg.nativeElement.src = "/ibase/rest/E12ExtService/getAttachDocument" + this.imageUrl;
+          this.imageUrl = null;
+      }
+  }
+  
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-input/ecm-input.component.css

+h2 {
+	text-align: center;
+	margin-bottom: 50px;
+}
+
+h2 small {
+	font-weight: normal;
+	color: #888;
+	display: block;
+}
+
+.footer {
+	text-align: center;
+}
+
+.footer a {
+	color: #53B2C8;
+}
+
+/* form starting stylings ------------------------------- */
+.group {
+	position: relative;
+	margin-bottom: 45px;
+	margin-top: 35px;
+}
+
+input {
+	font-size: 18px;
+/* 	padding: 2px 10px 10px 5px; */
+	padding :2px 10px 0 5px;
+	display: block;
+/* 	width: 300px; */
+	border: none;
+	border-bottom: 1px solid #757575;
+	box-shadow: none;
+	margin: 0;
+}
+
+input:focus {
+	outline: none;
+	border: none;
+	box-shadow: none;
+}
+
+/* LABEL ======================================= */
+label {
+	color: #999;
+	font-size: 18px;
+	font-weight: normal;
+	position: absolute;
+	pointer-events: none;
+	left: 5px;
+	top: 10px;
+	transition: 0.2s ease all;
+	-moz-transition: 0.2s ease all;
+	-webkit-transition: 0.2s ease all;
+}
+
+/* active state */
+input:focus ~ label, input:valid ~ label {
+	top: -20px;
+	font-size: 14px;
+/* 	color: #5264AE; */
+	color: mediumvioletred;
+}
+
+/* BOTTOM BARS ================================= */
+.bar {
+	position: relative;
+	display: block;
+/* 	width: 300px; */
+}
+
+.bar:before, .bar:after {
+	content: '';
+	height: 2px;
+	width: 0;
+	bottom: 1px;
+	position: absolute;
+/* 	background: #5264AE; */
+	background: mediumvioletred;
+	transition: 0.2s ease all;
+	-moz-transition: 0.2s ease all;
+	-webkit-transition: 0.2s ease all;
+}
+
+.bar:before {
+	left: 50%;
+}
+
+.bar:after {
+	right: 50%;
+}
+
+/* active state */
+input:focus ~ .bar:before, input:focus ~ .bar:after {
+	width: 50%;
+}
+
+/* HIGHLIGHTER ================================== */
+.highlight {
+	position: absolute;
+	height: 60%;
+	width: 100px;
+	top: 25%;
+	left: 0;
+	pointer-events: none;
+	opacity: 0.5;
+}
+
+/* active state */
+input:focus ~ .highlight {
+	-webkit-animation: inputHighlighter 0.3s ease;
+	-moz-animation: inputHighlighter 0.3s ease;
+	animation: inputHighlighter 0.3s ease;
+}
+
+/* ANIMATIONS ================ */
+@-webkit-keyframes inputHighlighter {
+	from { background:#5264AE; }
+	to { width: 0; background: transparent; }
+}
+
+@-moz-keyframes inputHighlighter {
+	from { background:#5264AE; }
+	to { width: 0; background: transparent; }
+}
+
+@keyframes inputHighlighter {
+	from { background:#5264AE; }
+	to { width: 0; background: transparent; }
+}
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-input/ecm-input.component.html

+<div class="group" *ngIf="ecmType && ecmLabel">
+	<input [type]="ecmType" required />
+	<span class="highlight"></span>
+	<span class="bar"></span> 
+	<label>{{ecmLabel}}</label>
+</div>
+

ecm/Angular/ProteusECM/trunk/src/app/ecm-input/ecm-input.component.ts

+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'ecm-input',
+  templateUrl: './ecm-input.component.html',
+  styleUrls: ['./ecm-input.component.css']
+})
+export class EcmInputComponent implements OnInit {
+
+    @Input() ecmType : any;
+    @Input() ecmLabel : any;
+    
+    constructor() { }
+    ngOnInit() { }
+
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-signin/ecm-signin.component.css

+.img-logo {
+	content: url(../../assets/images/logo.png);
+	min-width: 200px;
+}
+
+.logo-adj {
+	position: relative;
+	left: calc( ( 100% / 2 ) - 100px );
+	padding: 0;
+	padding-top: 50px;
+	margin: 0;
+}
+
+.signin-form,
+.signin-form-ext {
+	/*position: relative;
+    left: calc( ( 100% / 2 ) - 142px );
+    padding: 0;
+    margin: 0 */
+    
+    position: relative;
+    left: calc( ( 100% / 2 ) - 200px );
+    margin: 0;
+    width: 400px;
+    padding: 25px;
+    color: rgb(199, 21, 133);
+}
+
+.signin-form-ext {
+    border-radius: 5px;
+    border: 1px solid lightgray;
+}
+
+.button {
+    width: 90px;
+    height: 35px;
+    line-height: 15px;
+    text-align: center;
+    border: 1px solid mediumvioletred;
+    background: transparent;
+    border-radius: 2px;
+    position: relative;
+    color: #333;
+    padding: 0;
+    margin: 0;
+    left: 260px;
+}
+
+	
+.button:hover {    
+    background-color: mediumvioletred;
+    color: #fff;
+}    
+    
+    
+    
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-signin/ecm-signin.component.html

+<div class="row">
+	<div class="small-12 medium-5 large-4 medium-centered column">
+		<img class="img-logo logo-adj" />
+	</div>
+	<div class="small-12 medium-5 large-4 medium-centered column">
+		<div [ngClass]="{'signin-form-ext': parent=='_BLANK', 'signin-form': parent=='_POPUP' }">
+			<h4>Sign in</h4>
+			<h6>to continue to Local2do</h6>
+			<form action="">
+			<ecm-input [ecmType]="'text'" [ecmLabel]="'User Name'"></ecm-input>
+			<ecm-input [ecmType]="'password'" [ecmLabel]="'Password'"></ecm-input>
+			<button class="button"> Signin </button>
+			</form>
+		</div>
+	</div>
+</div>
+

ecm/Angular/ProteusECM/trunk/src/app/ecm-signin/ecm-signin.component.ts

+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'ecm-signin',
+  templateUrl: './ecm-signin.component.html',
+  styleUrls: ['./ecm-signin.component.css']
+})
+export class EcmSigninComponent implements OnInit {
+
+  @Input() parent : any  = '_BLANK' ;
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-user-option/ecm-user-option.component.css

+.content {
+    margin: 10 rem;
+    border: 6px;
+}
+
+.button {
+    width: 90px;
+    height: 35px;
+    line-height: 15px;
+    text-align: center;
+    border: 1px solid mediumvioletred;
+    border-radius: 2px;
+    float: right;
+    position: relative;
+    top: 15px;
+    color: #333;
+    right: 10px;
+    padding: .85em 1em;
+    margin:10rem;
+    font-size: .9rem;
+}
+
+	
+.button:hover {    
+    background-color: mediumvioletred;
+    color: #fff;
+}    
+    
+    
+    
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-user-option/ecm-user-option.component.html

+<div>
+	<ecm-signin *ngIf="!userData" [parent]="'_POPUP'"></ecm-signin>
+	<!-- 
+	<button *ngIf="!userData" [routerLink]="['/signin']" class="button medium-btn">Signin</button>
+	<button *ngIf="userData" class="button medium-btn">Logout</button>
+	 -->
+	 <div *ngIf="userData" class="content">
+	 	<button class="button">Logout</button>
+	 </div>
+</div>

ecm/Angular/ProteusECM/trunk/src/app/ecm-user-option/ecm-user-option.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ecm-user-option',
+  templateUrl: './ecm-user-option.component.html',
+  styleUrls: ['./ecm-user-option.component.css']
+})
+export class EcmUserOptionComponent implements OnInit {
+
+  constructor() { }
+  userData : any;
+  ngOnInit() {
+  }
+  
+  logout() {
+      console.log('Logging Out');
+      this.userData = null;
+  }
+}