b2adminui 1.0.0

package/src/app/profile-setting/profile-setting/profile-setting.component.html

@@ -0,0 +1,228 @@
+<main>
+    <div class="ibox float-e-margins">
+        <div class="ibox-content p-md">
+            <form class="form-horizontal custom-form-horizontal" role="form" #f="ngForm"
+                (ngSubmit)="f.form.valid && validateEmail() && saveData()">
+
+                <fieldset class="wallet-fieldset m-b-md">
+                    <legend class="wallet-legend f-s-16 m-l-15px">
+                        <b>Setting Details</b>
+                    </legend>
+
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label class="col-md-6 control-label">Company Name
+                                    <span class="pull-right m-l-sm">:</span>
+                                </label>
+                                <div class="col-md-6 control-label text-left">
+                                    {{ profileSettingModel.CompanyName }}
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label class="col-md-6 control-label">Group Name
+                                    <span class="pull-right m-l-sm">:</span>
+                                </label>
+                                <div class="col-md-6 control-label text-left">
+                                    {{ profileSettingModel.UserGroupName }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+    
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label class="col-md-6 control-label">First Name
+                                    <span class="pull-right m-l-sm">:</span>
+                                </label>
+                                <div class="col-md-6" *ngIf=" pageName == 'edit' ">
+                                    <input type="text" placeholder="First Name" maxlength="30" class="form-control"
+                                        name="firstName" #firstName="ngModel" [(ngModel)]="profileSettingModel.FirstName"
+                                        (keypress)="common.onlyAlphanumeric($event,true)"
+                                        (paste)="common.validateAlphanumeric($event,true)" required>
+                                    <div *ngIf="(f.submitted || firstName.touched) && ((firstName.errors && firstName.errors.required)
+                                    || (profileSettingModel.FirstName && !profileSettingModel.FirstName.trim()))"
+                                        class="message-error">
+                                        <span class='img-warning'></span> Please enter First Name.
+                                    </div>
+                                </div>
+                                <div class="col-md-6 control-label text-left" *ngIf="pageName=='view'">
+                                    {{ profileSettingModel.FirstName }}
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label class="col-md-6 control-label">Last Name
+                                    <span class="pull-right m-l-sm">:</span>
+                                </label>
+                                <div class="col-md-6" *ngIf=" pageName == 'edit' ">
+                                    <input type="text" placeholder="Last Name" maxlength="30" class="form-control"
+                                        name="lastName" #lastName="ngModel" [(ngModel)]="profileSettingModel.LastName"
+                                        (keypress)="common.onlyAlphanumeric($event,true)"
+                                        (paste)="common.validateAlphanumeric($event,true)" required>
+                                    <div *ngIf="(f.submitted || lastName.touched) && ((lastName.errors && lastName.errors.required) || (!profileSettingModel?.LastName.trim()))"
+                                        class="message-error">
+                                        <span class='img-warning'></span>Please enter Last Name.
+                                    </div>
+                                </div>
+                                <div class="col-md-6 control-label text-left" *ngIf=" pageName == 'view' ">
+                                    {{ profileSettingModel.LastName }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+    
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label class="col-md-6 control-label">Department
+                                    <span class="pull-right m-l-sm">:</span>
+                                </label>
+                                <div class="col-md-6" *ngIf=" pageName == 'edit' ">
+                                    <input type="text" maxlength="40" placeholder="Department" class="form-control"
+                                        name="department" #department="ngModel" [(ngModel)]="profileSettingModel.Department"
+                                        (keypress)="common.onlyAlphanumeric($event,true)"
+                                        (paste)="common.validateAlphanumeric($event,true)">
+                                </div>
+                                <div class="col-md-6 control-label text-left" *ngIf=" pageName == 'view' ">
+                                    {{ profileSettingModel.Department }}
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label class="col-md-6 control-label">Office Tel
+                                    <span class="pull-right m-l-sm">:</span>
+                                </label>
+                                <div class="col-md-6 p-l-4" *ngIf=" pageName == 'edit' ">
+                                    <div class="input-group">
+                                        <span class="input-group-addon p-l-none p-r-none no-borders">
+                                            +
+                                        </span>
+                                        <input maxlength="20" type="text" class="form-control" placeholder="Office tel"
+                                            name="telNumber" #telNumber="ngModel" [(ngModel)]="profileSettingModel.TelNo"
+                                            (keypress)="common.onlyNumberKey($event)" pattern="^[0-9]*$">
+                                    </div>
+                                    <div *ngIf="(f.submitted || telNumber.touched) && (f.submitted || telNumber.touched) && (profileSettingModel.TelNo && telNumber.errors && telNumber.errors.pattern)"
+                                        class="message-error">
+                                        <span class='img-warning'></span>Please enter correct Office Telephone number.
+                                    </div>
+                                </div>
+                                <div class="col-md-6 control-label text-left" *ngIf=" pageName == 'view' ">
+                                    <div class="input-group">
+                                        + {{ profileSettingModel.TelNo }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+    
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label class="col-md-6 control-label">Staff ID
+                                    <span class="pull-right m-l-sm">:</span>
+                                </label>
+                                <div class="col-md-6 control-label text-left">
+                                    {{ profileSettingModel.StaffId }}
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label class="col-md-6 control-label">Last Login
+                                    <span class="pull-right m-l-sm">:</span>
+                                </label>
+                                <div class="col-md-6 control-label text-left">
+                                    {{ profileSettingModel.LastLogin ? (profileSettingModel.LastLogin) : '-' }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+    
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label class="col-md-6 control-label">Email
+                                    <span class="pull-right m-l-sm">:</span>
+                                </label>
+                                <div class="col-md-6" *ngIf=" pageName == 'edit' ">
+                                    <input type="email" maxlength="40" placeholder="Email" class="form-control" name="email"
+                                        #email="ngModel" [(ngModel)]="profileSettingModel.Email"
+                                        (focusout)="setIs2c2pDomain()" required
+                                        pattern='^[^<>()[\]\\,;:\%#^\s@\"$&!@]+@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z0-9]+\.)+[a-zA-Z]{2,}))$'>
+                                    <div *ngIf="((f.submitted || email.touched) && (email.errors && email.errors.required)) else invalidDomain"
+                                        class="message-error">
+                                        <span class='img-warning'></span>Please enter Email.
+                                    </div>
+                                    <div *ngIf="(f.submitted || email.touched) && email.errors && email.errors.pattern"
+                                        class="message-error">
+                                        <span class='img-warning'></span>Please enter correct Email.
+                                    </div>
+                                    <ng-template #invalidDomain>
+                                        <div *ngIf="(f.submitted || email.touched) && (!validateEmail())"
+                                            class="message-error">
+                                            <span class='img-warning'></span>Invalid domain.
+                                        </div>
+                                    </ng-template>
+                                </div>
+                                <div class="col-md-6 control-label text-left" *ngIf=" pageName == 'view' ">
+                                    {{ profileSettingModel.Email }}
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label class="col-md-6 control-label">Profile Image
+                                    <span class="pull-right m-l-sm">:</span>
+                                </label>
+                                <div class="col-md-6 custom-upload" *ngIf=" pageName == 'edit' ">
+                                    <input id="picture" class="hide" type="file" (change)="readImage($event)"
+                                        accept="image/*" #profileImageUpload>
+                                    <label class="btn btn-default" for="picture">Browse</label>
+                                    <label *ngIf="imageURL?.src" class="btn btn-default" (click)="clearProfileImage()
+                                    ">Clear</label>
+                                    <div>
+                                        <img *ngIf="imageURL?.src;else thumbnailTemplate" class="image-upload"
+                                            [src]="imageURL?.src">
+                                    </div>
+                                </div>
+                                <div class="col-md-6 control-label text-left" *ngIf="pageName == 'view'">
+                                    <img [src]="imageURL?.src" *ngIf="imageURL?.src;else thumbnailTemplate"
+                                        class="image-upload" alt="image preview" />
+                                </div>
+                                <ng-template #thumbnailTemplate>
+                                    <i class="fa fa-picture-o fa-6 picture-thumbnail"></i>
+                                </ng-template>
+                            </div>
+                        </div>
+                    </div>
+                </fieldset>
+                
+                <div class="row">
+                    <div class="col-sm-12 text-center">
+                        <div class="form-group" *ngIf="pageName == 'edit'">
+                            <div class="col-lg-12 text-center">
+                                <button type="submit" [disabled]="sharedService.disableButton"
+                                    class="btn btn-primary m-r-sm">Save</button>
+                                <button type="button" (click)="common.goToPreviousPage()"
+                                    class="btn btn-warning">Cancel</button>
+                            </div>
+                        </div>
+                        <div class="form-group m-b-none" *ngIf="pageName == 'view'">
+                            <div class="col-lg-12 text-center">
+                                <button type="button" class="btn btn-primary m-r-sm" (click)="onEdit()">Edit</button>
+                                <button type="button" class="btn btn-primary m-r-sm"
+                                    [routerLink]="['/change-password']">Change Password</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</main>

package/src/app/profile-setting/profile-setting.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { RouterModule } from '@angular/router';
+import { ProfileSettingComponent } from './profile-setting/components/profile-setting.component';
+import { ChangePasswordComponent } from './change-password/components/change-password.component';
+import { UploadModule } from '@progress/kendo-angular-upload';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        HttpModule,
+        RouterModule,
+        UploadModule
+    ],
+    declarations: [ProfileSettingComponent, ChangePasswordComponent],
+    exports: [ProfileSettingComponent, ChangePasswordComponent]
+})
+
+export class ProfileSettingModule { }

package/src/app/shared/alerts/alertOptions.ts

@@ -0,0 +1,14 @@
+// custom-option.ts
+import { ToastOptions } from 'ng2-toastr';
+import { Constants } from '../constants/constants';
+
+/**
+ * AlertOptions: This class has the custom configuration of the Toast alerts.
+ */
+export class AlertOptions extends ToastOptions {
+    toastLife = Constants.TIMEOUT;
+    animate = Constants.FADE;
+    showCloseButton = true;
+    enableHTML = true;
+    positionClass = Constants.TOP_CENTER;
+}

package/src/app/shared/alerts/alerts.ts

@@ -0,0 +1,57 @@
+import { Injectable, ViewContainerRef } from '@angular/core';
+import { ToastsManager, ToastOptions } from 'ng2-toastr';
+import { Constants } from '../constants/constants';
+
+/**
+ * Alerts: This class is to handel the all types of alerts from the application. The default setting is created for all alerts.
+ * This class will generate success, error, info, warning & custom alerts. 
+ * In custom alert user can customize the alert box with user defined configuration.
+ */
+@Injectable()
+export class Alerts {
+
+    constructor(public toastr: ToastsManager) { }
+
+    /**
+     * setRootViewContainerRef: Set the roo view control where toastr will be shown.
+     */
+    public setRootViewContainerRef(vcr: ViewContainerRef) {
+        this.toastr.setRootViewContainerRef(vcr);
+    }
+
+    /**
+     * success: This method will display success type of alert toastr.
+     */
+    public success(message: string): Promise<any> {
+        return this.toastr.success(message, Constants.SUCCESS_TITLE);
+    }
+
+    /**
+     * error: This method will display error type of alert toastr.
+     */
+    public error(message: string): Promise<any> {
+        return this.toastr.error(message, Constants.ERROR_TITLE);
+    }
+
+    /**
+     * warning: This method will display warning type of alert toastr.
+     */
+    public warning(message: string): Promise<any> {
+        return this.toastr.warning(message, Constants.ALERT_TITLE);
+    }
+
+    /**
+     * info: This method will display info type of alert toastr.
+     */
+    public info(message: string): Promise<any> {
+        return this.toastr.info(message, Constants.INFO_TITLE);
+    }
+
+    /**
+     * custom: This method will display custom type of alert toastr.
+     * User can modify its message and title.
+     */
+    public custom(message: string, title?: string): Promise<any> {
+        return this.toastr.custom(message, title);
+    }
+}