opensourcecode/Hyper-M_UserPortal/src/app/common/user-profile/user-profile.component.html

<app-main-header></app-main-header>
<div class="profile">
    <div class="profile_bg">
        <div class="container-fluid pro_head">
            <div class="text-center">
                <p>SET PROFILE</p>
            </div>
            <div class="row align-items-center">
                <div class="col-sm-2 pro text-center">
                    <div class="profile_img">
                        <img class="pro_img" src="assets/img/user_vc.png" />
                        <!-- <img class="pro_img" *ngIf="!croper_image.image" src="{{userData.profile_photo}}" />
                        <img class="pro_img" *ngIf="croper_image.image" [src]='croper_image.image' />
                        <img class="profile_cam" [ngClass]="is_edit ?'browser_disble':''" (click)="onFileBrowse()" src="assets/img/camera.png" /> -->
                        <div style="display:none!important;">
                            <input type="file" accept="image/*" (change)="onFileBrowserChange($event)" id='file_browser' #file_browser>
                        </div>
                        <div class='col-md-12 float pad-0 text-center' *ngIf="show_croper" style="display:none!important;">
                            <img-cropper style="position:absolute" class="col-md-12 crop_popup" #cropper [image]="croper_image" [settings]="cropperSettings"
                                (onCrop)="onImageCroped($event)"></img-cropper>
                        </div>
                    </div>
                </div>
                <div class="col-sm-9 nopadding">
                    <h2>{{userData.fname}}</h2>
                    <h4>{{userData.rolename}}</h4>
                </div>
                <div class="col-sm-1 edit text-center" (click)="edit()">
                    <img src="assets/img/edit.png" />EDIT
                </div>
            </div>
        </div>
        <div class="container-fluid form_bg">
            <form class="row form_2">
                <!-- <div class="form-group col-sm-6 user_p disable">
                    <input type="text" id="fname" class="form-control" [(ngModel)]="userData.fname" name="fname" autocomplete="off" required
                        disabled>
                    <label for="fname" class="control-label form-control-placeholder">First Name</label>
                </div> -->
                <!-- <div class="form-group col-sm-6 user_p disable">
                    <input type="text" id="lname" class="form-control" [(ngModel)]="userData.lname" name="lname" autocomplete="off" required
                        disabled>
                    <label for="lname" class="control-label form-control-placeholder">Last Name</label>
                </div> -->
                <div class="form-group col-sm-6 phone disable">
                    <input type="text" id="mobileno" class="form-control" [(ngModel)]="userData.mobileno" name="mobileno" autocomplete="off"
                        required disabled>
                    <label for="mobileno" class="control-label form-control-placeholder">Mobile Number</label>
                </div>
                <div class="form-group col-sm-6 email" [ngClass]="is_edit ?'disable':'over'">
                    <input type="text" *ngIf="is_edit" id="email" class="form-control" [(ngModel)]="userData.emailid" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"
                        name="email" autocomplete="off" disabled >
                    <input type="text" *ngIf="!is_edit" id="email" class="form-control" [(ngModel)]="userData.emailid" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"
                        name="email" autocomplete="off" required>
                    <label for="email" class="control-label form-control-placeholder">Email Address</label>
                    <div class="color_error shake" *ngIf="message_email!=''">
                        <img src="assets/img/error.png" /> {{message_email}} </div>

                </div>
                <div class="form-group col-sm-6 dob" [ngClass]="is_edit ?'disable':'over'">
                    <ng-datepicker *ngIf="!is_edit"  [(ngModel)]="dob" [options]="options" name="dob" class="form-control" ></ng-datepicker>
                    <ng-datepicker *ngIf="is_edit" [(ngModel)]="dob" [options]="options"  name="dob" class="form-control" ></ng-datepicker>

                    <label for="dob" class="control-label form-control-placeholder">Date of birth</label>
                </div>
                <div class="form-group col-sm-6 designation disable">
                    <input type="text" id="salesconsultant" class="form-control" [(ngModel)]="userData.rolename" name="salesconsultant" autocomplete="salesconsultant"
                        required disabled>
                    <label for="salesconsultant" class="control-label form-control-placeholder">Designation</label>
                </div>
                <!-- <div class="form-group col-sm-6 date_oj" [ngClass]="is_edit ?'disable':'over'">
                    <ng-datepicker *ngIf="is_edit" [(ngModel)]="doj" name="doj" class="form-control"></ng-datepicker>
                    <ng-datepicker *ngIf="!is_edit" [(ngModel)]="doj" name="doj" class="form-control"></ng-datepicker>
                    <label for="doj" class="control-label form-control-placeholder">Date of joining</label>
                </div> -->
                <div class="form-group col-sm-6 date_oj disable" >
                        <ng-datepicker  [(ngModel)]="doj" name="doj" class="form-control" disabled></ng-datepicker>
                        <!-- <ng-datepicker *ngIf="!is_edit" [(ngModel)]="doj" name="doj" class="form-control"></ng-datepicker> -->
                        <label for="doj" class="control-label form-control-placeholder">Date of joining</label>
                    </div>
                <div class="form-group col-sm-6 dealer disable">
                    <input type="text" id="abt" class="form-control" [(ngModel)]="dear_code" name="abt" autocomplete="off" required disabled>
                    <label for="abt" class="control-label form-control-placeholder">Dealer</label>
                </div>
                <div class="form-group col-sm-6 location disable">
                    <input type="text" id="zone" class="form-control" [(ngModel)]="userData.zone" name="zone" autocomplete="off" required disabled>
                    <label for="zone" class="control-label form-control-placeholder">Zone</label>
                </div>
                <div class="form-group col-sm-6 location disable">
                    <input type="text" id="state" class="form-control" [(ngModel)]="userData.state" name="state" autocomplete="off" required
                        disabled>
                    <label for="state" class="control-label form-control-placeholder">State</label>
                </div>
                <div class="form-group col-sm-6 location disable">
                    <input type="text" id="city" class="form-control" [(ngModel)]="userData.city" name="city" autocomplete="off" required
                        disabled>
                    <label for="city" class="control-label form-control-placeholder">City</label>
                </div>
                <div class="col-sm-6 box_check">
                    <div class="v-center">
                        <div class="check mx-auto d-block" [ngClass]="{'disable':is_edit}">
                            <input type="checkbox" *ngIf="!is_edit" id="3dCheck" name="is_married" (change)="marriedCheck()" [checked]="userData.is_married==1"
                            />
                            <input type="checkbox" *ngIf="is_edit" id="3dCheck" name="is_married" (change)="marriedCheck()" [checked]="userData.is_married==1"
                                disabled />
                            <label for="3dCheck">Are you Married?</label>
                        </div>
                    </div>
                </div>
                <div class="form-group col-sm-6 wedding" *ngIf="userData.is_married==1" [ngClass]="is_edit ?'disable':'over'">
                    <ng-datepicker *ngIf="is_edit" [(ngModel)]="marriage_date" [options]="options" name="marriage_date" class="form-control"></ng-datepicker>
                    <ng-datepicker *ngIf="!is_edit" [(ngModel)]="marriage_date" [options]="options" name="marriage_date" class="form-control"></ng-datepicker>
                    <label for="marriage_date" class="control-label form-control-placeholder">Wedding Anniversary Date</label>
                </div>
                <div class="col-sm-12 text-center ">
                    <button type="submit" class="btn primary fixed" (click)="resetProfile()">Cancel</button>
                    <button type="submit" *ngIf="!is_edit" class="btn primary fixed" (click)="updateUserProfile()">Submit</button>
                    <button type="submit" *ngIf="is_edit" class="btn primary fixed" disabled>Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>