mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-07-24 17:31:52 +00:00
ACA-4600 Added Edit Profile Functionality (#2597)
This commit is contained in:
Shubham Bansal
GitHub
@@ -38,6 +38,7 @@ import { APP_ROUTES } from './app.routes';
|
||||
import { FilesComponent } from './components/files/files.component';
|
||||
import { LibrariesComponent } from './components/libraries/libraries.component';
|
||||
import { FavoriteLibrariesComponent } from './components/favorite-libraries/favorite-libraries.component';
|
||||
import { ViewProfileModule } from './components/view-profile/view-profile.module';
|
||||
|
||||
import { AppStoreModule } from './store/app-store.module';
|
||||
import { MaterialModule } from './material.module';
|
||||
@@ -135,7 +136,8 @@ registerLocaleData(localeSv);
|
||||
AppSearchResultsModule,
|
||||
AppHeaderModule,
|
||||
AppNodeVersionModule,
|
||||
HammerModule
|
||||
HammerModule,
|
||||
ViewProfileModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
|
||||
@@ -38,6 +38,7 @@ import { RecentFilesComponent } from './components/recent-files/recent-files.com
|
||||
import { SharedFilesComponent } from './components/shared-files/shared-files.component';
|
||||
import { DetailsComponent } from './components/details/details.component';
|
||||
import { HomeComponent } from './components/home/home.component';
|
||||
import { ViewProfileComponent } from './components/view-profile/view-profile.component';
|
||||
|
||||
export const APP_ROUTES: Routes = [
|
||||
{
|
||||
@@ -76,6 +77,10 @@ export const APP_ROUTES: Routes = [
|
||||
component: AppLayoutComponent,
|
||||
canActivate: [AuthGuard, ExtensionsDataLoaderGuard],
|
||||
children: [
|
||||
{
|
||||
path: 'profile',
|
||||
component: ViewProfileComponent
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
component: HomeComponent
|
||||
|
||||
186
app/src/app/components/view-profile/view-profile.component.html
Normal file
186
app/src/app/components/view-profile/view-profile.component.html
Normal file
@@ -0,0 +1,186 @@
|
||||
<div class="app-profile-container">
|
||||
<div class="app-profile-row">
|
||||
<div class="app-profile-title">
|
||||
<mat-icon class="app-profile-icon" (click)="navigateToPersonalFiles()">arrow_back</mat-icon>
|
||||
<h3 class="app-profile">{{'APP.EDIT_PROFILE.MY_PROFILE' | translate}}</h3>
|
||||
</div>
|
||||
<mat-divider class="app-mat-divider"></mat-divider>
|
||||
</div>
|
||||
<div class="app-profile-general-row" [formGroup]="profileForm">
|
||||
<div class="app-profile-general">
|
||||
<div class="app-profile-general-div">
|
||||
<mat-icon class="app-profile-general-icon" (click)="toggleGeneralDropdown()">
|
||||
{{ generalSectionDropdown ? 'expand_more' : 'chevron_right'}}</mat-icon>
|
||||
<h4 class="app-general-title">{{'APP.EDIT_PROFILE.GENERAL' | translate}}</h4>
|
||||
</div>
|
||||
<div class="app-general-edit-btn" *ngIf="generalSectionButtonsToggle">
|
||||
<button mat-raised-button (click)="toggleGeneralButtons()"
|
||||
class="app-general-edit">{{'APP.EDIT_PROFILE.EDIT' | translate}}</button>
|
||||
</div>
|
||||
<div class="app-general-edit-btn" *ngIf="!generalSectionButtonsToggle">
|
||||
<button mat-raised-button class="app-general-cancel-btn"
|
||||
(click)="toggleGeneralButtons()">{{'APP.EDIT_PROFILE.CANCEL' | translate}}</button>
|
||||
<button mat-raised-button class="app-general-save-btn"
|
||||
(click)="onSaveGeneralData(profileForm)">{{'APP.EDIT_PROFILE.SAVE' | translate}}</button>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider class="app-mat-divider" *ngIf="generalSectionDropdown"></mat-divider>
|
||||
<div *ngIf="generalSectionDropdown">
|
||||
<div class="app-general-dropdown">
|
||||
<div class="app-general-dropdown-details">
|
||||
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.FIRST_NAME' | translate}}</h4>
|
||||
<p class="app-profile-general-dropdown-details">{{personDetails?.firstName}}</p>
|
||||
</div>
|
||||
<mat-divider class="app-general-dropdown-divider"></mat-divider>
|
||||
<div class="app-general-dropdown-details">
|
||||
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.LAST_NAME' | translate}}</h4>
|
||||
<p class="app-profile-general-dropdown-details">{{personDetails?.lastName}}</p>
|
||||
</div>
|
||||
<mat-divider class="app-general-dropdown-divider"></mat-divider>
|
||||
<div class="app-general-dropdown-details">
|
||||
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.JOB_TITLE' | translate}}</h4>
|
||||
<p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.jobTitle}}</p>
|
||||
<input type="text" value="" formControlName="jobTitle" *ngIf="!generalSectionButtonsToggle"
|
||||
class="app-profile-general-dropdown-input-details app-selected">
|
||||
</div>
|
||||
<mat-divider class="app-general-dropdown-divider"></mat-divider>
|
||||
<div class="app-general-dropdown-details">
|
||||
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.LOCATION' | translate}}</h4>
|
||||
<p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.location}}</p>
|
||||
<input type="text" value="" formControlName="location" *ngIf="!generalSectionButtonsToggle"
|
||||
class="app-profile-general-dropdown-input-details app-selected">
|
||||
</div>
|
||||
<mat-divider class="app-general-dropdown-divider"></mat-divider>
|
||||
<div class="app-general-dropdown-details">
|
||||
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}</h4>
|
||||
<p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.telephone}}</p>
|
||||
<input type="tel" name="Telephone" value="" formControlName="telephone" *ngIf="!generalSectionButtonsToggle"
|
||||
class="app-profile-general-dropdown-input-details app-selected">
|
||||
</div>
|
||||
<mat-divider class="app-general-dropdown-divider"></mat-divider>
|
||||
<div class="app-general-dropdown-details">
|
||||
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.MOBILE' | translate}}</h4>
|
||||
<p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.mobile}}</p>
|
||||
<input type="tel" value="" formControlName="mobile" *ngIf="!generalSectionButtonsToggle"
|
||||
class="app-profile-general-dropdown-input-details app-selected">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app-profile-login-row" [formGroup]="profileForm">
|
||||
<div class="app-profile-login" >
|
||||
<div class="app-profile-general-div">
|
||||
<mat-icon class="app-profile-general-icon" (click)="toggleLoginDropdown()">
|
||||
{{ loginSectionDropdown ? 'expand_more' : 'chevron_right'}}</mat-icon>
|
||||
<h4 class="app-general-title">{{'APP.EDIT_PROFILE.LOGIN' | translate}}</h4>
|
||||
</div>
|
||||
|
||||
<div class="app-general-edit-btn" *ngIf="loginSectionButtonsToggle">
|
||||
<button mat-raised-button (click)="toggleLoginButtons()"
|
||||
class="app-general-edit">{{'APP.EDIT_PROFILE.EDIT' | translate}}</button>
|
||||
</div>
|
||||
<div class="app-general-edit-btn" *ngIf="!loginSectionButtonsToggle">
|
||||
<button mat-raised-button class="app-general-cancel-btn"
|
||||
(click)="toggleLoginButtons()">{{'APP.EDIT_PROFILE.CANCEL' | translate}}</button>
|
||||
<button mat-raised-button class="app-general-save-btn"
|
||||
(click)="onSaveLoginData()">{{'APP.EDIT_PROFILE.SAVE' | translate}}</button>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider class="app-mat-divider" *ngIf="loginSectionDropdown"></mat-divider>
|
||||
<div class="app-profile-login-dropdown" *ngIf="loginSectionDropdown">
|
||||
<div class="app-general-dropdown" >
|
||||
<div class="app-general-dropdown-details">
|
||||
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.USERNAME' | translate}}</h4>
|
||||
<p class="app-profile-general-dropdown-details">{{personDetails?.id}}</p>
|
||||
</div>
|
||||
<mat-divider class="app-general-dropdown-divider"></mat-divider>
|
||||
<div class="app-general-dropdown-details">
|
||||
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.EMAIL' | translate}}</h4>
|
||||
<p class="app-profile-general-dropdown-details">{{personDetails?.email}}</p>
|
||||
</div>
|
||||
<mat-divider class="app-general-dropdown-divider" *ngIf="!passwordSectionDropdown"></mat-divider>
|
||||
<div class="app-general-dropdown-details" *ngIf="!passwordSectionDropdown">
|
||||
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.PASSWORD' | translate}}</h4>
|
||||
<p class="app-profile-general-dropdown-details"></p>
|
||||
</div>
|
||||
<mat-divider class="app-general-dropdown-divider" *ngIf="passwordSectionDropdown"></mat-divider>
|
||||
<div class="app-general-dropdown-details" *ngIf="passwordSectionDropdown">
|
||||
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.OLD_PASSWORD' | translate}}</h4>
|
||||
<input class="app-profile-login-dropdown-details app-selected" formControlName="oldPassword" type="password">
|
||||
<h4 class="app-profile-login-dropdown-heading-forgot">{{'APP.EDIT_PROFILE.FORGOT_PASSWORD' | translate}}</h4>
|
||||
</div>
|
||||
<mat-divider class="app-general-dropdown-divider" *ngIf="passwordSectionDropdown"></mat-divider>
|
||||
<div class="app-general-dropdown-details" *ngIf="passwordSectionDropdown">
|
||||
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.NEW_PASSWORD' | translate}}</h4>
|
||||
<input class="app-profile-login-dropdown-details app-selected" type="password" formControlName="newPassword">
|
||||
</div>
|
||||
<mat-divider class="app-general-dropdown-divider" *ngIf="passwordSectionDropdown"></mat-divider>
|
||||
<div class="app-general-dropdown-details" *ngIf="passwordSectionDropdown">
|
||||
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.VERIFY_PASSWORD' | translate}}</h4>
|
||||
<input class="app-profile-login-dropdown-details app-selected" type="password" formControlName="verifyPassword">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app-profile-contact-row" [formGroup]="profileForm">
|
||||
<div class="app-profile-general profile-general-bottom-radius">
|
||||
<div class="app-profile-general-div">
|
||||
<mat-icon class="app-profile-general-icon" (click)="toggleContactDropdown()">
|
||||
{{ contactSectionDropdown ? 'expand_more' : 'chevron_right'}}</mat-icon>
|
||||
<h4 class="app-general-title">{{'APP.EDIT_PROFILE.COMPANY_DETAILS' | translate}}</h4>
|
||||
</div>
|
||||
|
||||
<div class="app-general-edit-btn" *ngIf="contactSectionButtonsToggle">
|
||||
<button mat-raised-button class="app-general-edit"
|
||||
(click)="toggleContactButtons()">{{'APP.EDIT_PROFILE.EDIT' | translate}}</button>
|
||||
</div>
|
||||
<div class="app-general-edit-btn" *ngIf="!contactSectionButtonsToggle">
|
||||
<button mat-raised-button class="app-general-cancel-btn"
|
||||
(click)="toggleContactButtons()">{{'APP.EDIT_PROFILE.CANCEL' | translate}}</button>
|
||||
<button mat-raised-button class="app-general-save-btn"
|
||||
(click)="onSaveCompanyData(profileForm)">{{'APP.EDIT_PROFILE.SAVE' | translate}}</button>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider class="app-mat-divider" *ngIf="contactSectionDropdown"></mat-divider>
|
||||
<div *ngIf="contactSectionDropdown">
|
||||
<div class="app-general-dropdown" >
|
||||
<div class="app-general-dropdown-details">
|
||||
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.NAME' | translate}}</h4>
|
||||
<p class="app-profile-general-dropdown-details">{{personDetails?.company?.organization}}</p>
|
||||
</div>
|
||||
<mat-divider class="app-general-dropdown-divider"></mat-divider>
|
||||
<div class="app-general-dropdown-details">
|
||||
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.ADDRESS' | translate}}</h4>
|
||||
<p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.address1}}</p>
|
||||
<input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyAddress"
|
||||
class="app-profile-general-dropdown-input-details app-selected">
|
||||
</div>
|
||||
<mat-divider class="app-general-dropdown-divider" ></mat-divider>
|
||||
<div class="app-general-dropdown-details" >
|
||||
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.POST_CODE' | translate}}</h4>
|
||||
<p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.postcode}}</p>
|
||||
<input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyPostCode"
|
||||
class="app-profile-general-dropdown-input-details app-selected">
|
||||
|
||||
</div>
|
||||
<mat-divider class="app-general-dropdown-divider" ></mat-divider>
|
||||
<div class="app-general-dropdown-details" >
|
||||
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}</h4>
|
||||
<p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.telephone}}</p>
|
||||
<input type="tel" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyTelephone"
|
||||
class="app-profile-general-dropdown-input-details app-selected">
|
||||
|
||||
</div>
|
||||
<mat-divider class="app-general-dropdown-divider" ></mat-divider>
|
||||
<div class="app-general-dropdown-details">
|
||||
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.EMAIL' | translate}}</h4>
|
||||
<p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.email}}</p>
|
||||
<input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyEmail"
|
||||
class="app-profile-general-dropdown-input-details app-selected">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
180
app/src/app/components/view-profile/view-profile.component.scss
Normal file
180
app/src/app/components/view-profile/view-profile.component.scss
Normal file
@@ -0,0 +1,180 @@
|
||||
app-view-profile {
|
||||
letter-spacing: .5px;
|
||||
|
||||
.app-profile-container {
|
||||
margin-top: 1rem;
|
||||
overflow: scroll;
|
||||
height:100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-profile-row {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-profile-title {
|
||||
display: flex;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.app-profile {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-profile-general-row {
|
||||
margin: 2rem 0 0 2rem;
|
||||
width: 70%;
|
||||
border: 1px solid var(--theme-grey-background-color);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.app-profile-icon {
|
||||
margin-right: 1rem;
|
||||
margin-top: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-profile-general-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-profile-text {
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
.app-profile-general {
|
||||
display: flex;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.app-profile-general-bottom-radius {
|
||||
border-bottom-left-radius:0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.app-profile-general-div {
|
||||
display: flex;
|
||||
width: 60%;
|
||||
padding-top: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-general-title {
|
||||
margin-left: 0.6rem;
|
||||
margin-top: 4px;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
.app-general-edit-btn {
|
||||
width:60%;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.app-mat-divider {
|
||||
border-top-width: 2px;
|
||||
border-top-color: var(--theme-grey-background-color);
|
||||
padding-left: -1px;
|
||||
padding-right: 1px;
|
||||
}
|
||||
|
||||
.app-selected:focus {
|
||||
border: 2px solid var(--theme-blue-button-color) !important;
|
||||
border-radius: 6px;
|
||||
outline : none !important;
|
||||
box-shadow: 0 0 2px (--theme-blue-button-color);
|
||||
}
|
||||
|
||||
.app-profile-row {
|
||||
width: 100%;
|
||||
margin: 2rem 0 0 0;
|
||||
}
|
||||
|
||||
.app-general-edit {
|
||||
margin: 0.7rem;
|
||||
background: var(--theme-grey-text-background-color);
|
||||
}
|
||||
|
||||
.app-general-edit:hover {
|
||||
background: var(--theme-grey-hover-background-color);
|
||||
}
|
||||
|
||||
.app-general-cancel-btn {
|
||||
margin: 0.7rem;
|
||||
background-color: var(--theme-grey-text-background-color);
|
||||
}
|
||||
|
||||
.app-general-save-btn {
|
||||
margin: 0.7rem;
|
||||
color: white;
|
||||
background-color: var(--theme-blue-button-color);
|
||||
}
|
||||
|
||||
.app-general-dropdown-divider {
|
||||
border-top-color: var(--theme-grey-divider-color);
|
||||
}
|
||||
|
||||
.app-general-dropdown {
|
||||
padding: 0rem 1rem;
|
||||
}
|
||||
|
||||
.app-general-dropdown-details {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.app-profile-general-dropdown-heading {
|
||||
color: var(--theme-heading-color);
|
||||
width: 20%;
|
||||
font-weight: 400;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
.app-profile-general-dropdown-details {
|
||||
margin-top: 1.3rem;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
.app-profile-general-dropdown-input-details {
|
||||
width: 24%;
|
||||
height: 25px;
|
||||
border: none;
|
||||
margin-top: 1.3rem;
|
||||
background-color: var(--theme-dropdown-color);
|
||||
}
|
||||
|
||||
.app-profile-login-row {
|
||||
margin: 2rem 0 0 2rem;
|
||||
width: 70%;
|
||||
border: 1px solid var(--theme-grey-background-color);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.app-profile-login {
|
||||
display: flex;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.app-profile-login-dropdown-details {
|
||||
width: 24%;
|
||||
height: 25px;
|
||||
border: none;
|
||||
margin-top: 1.3rem;
|
||||
background-color: var(--theme-dropdown-color) ;
|
||||
}
|
||||
|
||||
.app-profile-login-dropdown-heading-forgot {
|
||||
margin-top: 1.3rem;
|
||||
color: var(--theme-heading-color);
|
||||
margin-left: 16rem;
|
||||
}
|
||||
|
||||
.app-profile-company-row {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.app-profile-contact-row {
|
||||
margin: 2rem 0 5rem 2rem;
|
||||
width: 70%;
|
||||
border: 1px solid var(--theme-grey-background-color);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
169
app/src/app/components/view-profile/view-profile.component.ts
Normal file
169
app/src/app/components/view-profile/view-profile.component.ts
Normal file
@@ -0,0 +1,169 @@
|
||||
/*
|
||||
* Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
|
||||
*
|
||||
* License rights for this program may be obtained from Alfresco Software, Ltd.
|
||||
* pursuant to a written agreement and any use of this program without such an
|
||||
* agreement is prohibited.
|
||||
*/
|
||||
import { AlfrescoApiService } from '@alfresco/adf-core';
|
||||
import { PeopleApi, Person } from '@alfresco/js-api';
|
||||
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
import { throwError } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-view-profile',
|
||||
templateUrl: './view-profile.component.html',
|
||||
styleUrls: ['./view-profile.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class ViewProfileComponent implements OnInit {
|
||||
peopleApi: PeopleApi;
|
||||
|
||||
profileForm: FormGroup;
|
||||
personDetails: Person;
|
||||
|
||||
generalSectionDropdown = true;
|
||||
generalSectionButtonsToggle = true;
|
||||
|
||||
loginSectionDropdown = false;
|
||||
loginSectionButtonsToggle = true;
|
||||
passwordSectionDropdown = false;
|
||||
|
||||
contactSectionDropdown = false;
|
||||
contactSectionButtonsToggle = true;
|
||||
|
||||
constructor(private formBuilder: FormBuilder, private router: Router, apiService: AlfrescoApiService) {
|
||||
this.peopleApi = new PeopleApi(apiService.getInstance());
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.populateForm(this.personDetails);
|
||||
|
||||
this.peopleApi
|
||||
.getPerson('-me-')
|
||||
.then((userInfo) => {
|
||||
this.personDetails = userInfo?.entry;
|
||||
this.populateForm(userInfo?.entry);
|
||||
})
|
||||
.catch((error) => {
|
||||
throwError(error);
|
||||
});
|
||||
}
|
||||
|
||||
populateForm(userInfo: Person) {
|
||||
this.profileForm = this.formBuilder.group({
|
||||
jobTitle: [userInfo?.jobTitle || ''],
|
||||
location: [userInfo?.location || ''],
|
||||
telephone: [userInfo?.telephone || '', Validators.pattern('^[0-9]*$')],
|
||||
mobile: [userInfo?.mobile || '', Validators.pattern('^[0-9]*$')],
|
||||
oldPassword: [''],
|
||||
newPassword: [''],
|
||||
verifyPassword: [''],
|
||||
companyPostCode: [userInfo?.company?.postcode || ''],
|
||||
companyAddress: [userInfo?.company?.address1 || ''],
|
||||
companyTelephone: [userInfo?.company?.telephone || '', Validators.pattern('^[0-9]*$')],
|
||||
companyEmail: [userInfo?.company?.email || '', Validators.email]
|
||||
});
|
||||
}
|
||||
|
||||
navigateToPersonalFiles() {
|
||||
this.router.navigate(['/personal-files'], {
|
||||
replaceUrl: true
|
||||
});
|
||||
}
|
||||
|
||||
toggleGeneralDropdown() {
|
||||
this.generalSectionDropdown = !this.generalSectionDropdown;
|
||||
|
||||
if (!this.generalSectionDropdown) {
|
||||
this.generalSectionButtonsToggle = true;
|
||||
}
|
||||
}
|
||||
|
||||
toggleGeneralButtons() {
|
||||
this.generalSectionButtonsToggle = !this.generalSectionButtonsToggle;
|
||||
|
||||
if (!this.generalSectionButtonsToggle) {
|
||||
this.generalSectionDropdown = true;
|
||||
}
|
||||
}
|
||||
|
||||
onSaveGeneralData(event) {
|
||||
this.generalSectionButtonsToggle = !this.generalSectionButtonsToggle;
|
||||
this.updatePersonDetails(event);
|
||||
}
|
||||
|
||||
onSaveLoginData() {
|
||||
this.passwordSectionDropdown = !this.passwordSectionDropdown;
|
||||
this.loginSectionButtonsToggle = !this.loginSectionButtonsToggle;
|
||||
}
|
||||
|
||||
onSaveCompanyData(event) {
|
||||
this.contactSectionButtonsToggle = !this.contactSectionButtonsToggle;
|
||||
this.updatePersonDetails(event);
|
||||
}
|
||||
|
||||
toggleLoginDropdown() {
|
||||
this.loginSectionDropdown = !this.loginSectionDropdown;
|
||||
|
||||
if (!this.loginSectionDropdown) {
|
||||
this.loginSectionButtonsToggle = true;
|
||||
}
|
||||
}
|
||||
|
||||
toggleLoginButtons() {
|
||||
this.loginSectionButtonsToggle = !this.loginSectionButtonsToggle;
|
||||
this.passwordSectionDropdown = !this.passwordSectionDropdown;
|
||||
|
||||
if (!this.loginSectionButtonsToggle) {
|
||||
this.loginSectionDropdown = true;
|
||||
this.passwordSectionDropdown = true;
|
||||
}
|
||||
}
|
||||
|
||||
toggleContactDropdown() {
|
||||
this.contactSectionDropdown = !this.contactSectionDropdown;
|
||||
|
||||
if (!this.contactSectionDropdown) {
|
||||
this.contactSectionButtonsToggle = true;
|
||||
}
|
||||
}
|
||||
|
||||
toggleContactButtons() {
|
||||
this.contactSectionButtonsToggle = !this.contactSectionButtonsToggle;
|
||||
|
||||
if (!this.contactSectionButtonsToggle) {
|
||||
this.contactSectionDropdown = true;
|
||||
}
|
||||
}
|
||||
|
||||
updatePersonDetails(event) {
|
||||
if (this.profileForm.valid) {
|
||||
this.peopleApi
|
||||
.updatePerson(this.personDetails.id, {
|
||||
jobTitle: event.value.jobTitle,
|
||||
location: event.value.location,
|
||||
telephone: event.value.telephone,
|
||||
mobile: event.value.mobile,
|
||||
company: {
|
||||
postcode: event.value.companyPostCode,
|
||||
address1: event.value.companyAddress,
|
||||
telephone: event.value.companyTelephone,
|
||||
email: event.value.companyEmail
|
||||
}
|
||||
})
|
||||
.then((person) => {
|
||||
this.personDetails = person?.entry;
|
||||
this.populateForm(person?.entry);
|
||||
})
|
||||
.catch((error) => {
|
||||
this.populateForm(this.personDetails);
|
||||
throwError(error);
|
||||
});
|
||||
} else {
|
||||
this.populateForm(this.personDetails);
|
||||
}
|
||||
}
|
||||
}
|
||||
35
app/src/app/components/view-profile/view-profile.module.ts
Normal file
35
app/src/app/components/view-profile/view-profile.module.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
/*!
|
||||
* @license
|
||||
* Alfresco Example Content Application
|
||||
*
|
||||
* Copyright (C) 2005 - 2020 Alfresco Software Limited
|
||||
*
|
||||
* This file is part of the Alfresco Example Content Application.
|
||||
* If the software was purchased under a paid Alfresco license, the terms of
|
||||
* the paid license agreement will prevail. Otherwise, the software is
|
||||
* provided under the following open source license terms:
|
||||
*
|
||||
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Lesser General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Lesser General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Lesser General Public License
|
||||
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
import { ViewProfileComponent } from './view-profile.component';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { CoreModule } from '@alfresco/adf-core';
|
||||
|
||||
@NgModule({
|
||||
imports: [CommonModule, CoreModule.forChild()],
|
||||
declarations: [ViewProfileComponent]
|
||||
})
|
||||
export class ViewProfileModule {}
|
||||
@@ -33,6 +33,14 @@ $adf-upload-dragging-level1-border: none;
|
||||
|
||||
$adf-permission-list-width: 100%;
|
||||
|
||||
$grey-background: rgba(33, 33, 33, 0.12);
|
||||
$grey-text-background: rgba(33, 33, 33, 0.05);
|
||||
$grey-hover-background: rgba(33, 33, 33, 0.24);
|
||||
$blue-save-button-background: #1F74DB;
|
||||
$black-heading: #4e4c4c;
|
||||
$grey-dropdown-background: #eee;
|
||||
$grey-divider: rgba(0,0,0,.22);
|
||||
|
||||
$defaults: (
|
||||
--theme-primary-color: mat.get-color-from-palette($primary),
|
||||
--theme-primary-color-default-contrast: mat.get-color-from-palette($primary, default-contrast),
|
||||
@@ -53,6 +61,13 @@ $defaults: (
|
||||
--theme-dialog-background-color: mat.get-color-from-palette($background, dialog),
|
||||
|
||||
--new-button-font-size: 0.9rem,
|
||||
--theme-grey-text-background-color: $grey-text-background,
|
||||
--theme-grey-background-color: $grey-background,
|
||||
--theme-grey-hover-background-color: $grey-hover-background,
|
||||
--theme-blue-button-color: $blue-save-button-background,
|
||||
--theme-heading-color: $black-heading,
|
||||
--theme-dropdown-color: $grey-dropdown-background,
|
||||
--theme-grey-divider-color: $grey-divider,
|
||||
);
|
||||
|
||||
// propagates SCSS variables into the CSS variables scope
|
||||
|
||||
@@ -47,6 +47,31 @@
|
||||
"RESET": "Reset",
|
||||
"APPLY": "Apply"
|
||||
},
|
||||
"EDIT_PROFILE": {
|
||||
"MY_PROFILE": "My Profile",
|
||||
"GENERAL": "General",
|
||||
"EDIT": "Edit",
|
||||
"CANCEL": "Cancel",
|
||||
"SAVE": "Save",
|
||||
"FIRST_NAME": "First name",
|
||||
"LAST_NAME": "Last name",
|
||||
"JOB_TITLE": "Job title",
|
||||
"LOCATION": "Location",
|
||||
"TELEPHONE": "Telephone",
|
||||
"MOBILE": "Mobile",
|
||||
"LOGIN": "Login",
|
||||
"USERNAME": "Username",
|
||||
"EMAIL": "Email",
|
||||
"PASSWORD": "Password",
|
||||
"OLD_PASSWORD": "Old Password",
|
||||
"FORGOT_PASSWORD": "Forgot Password",
|
||||
"NEW_PASSWORD": "New Password",
|
||||
"VERIFY_PASSWORD": "Verify Password",
|
||||
"COMPANY_DETAILS": "Company details",
|
||||
"NAME": "Name",
|
||||
"ADDRESS": "Address",
|
||||
"POST_CODE": "Post code"
|
||||
},
|
||||
"LOCKED_BY": "Locked by: ",
|
||||
"PREVIEW": {
|
||||
"TITLE": "Preview"
|
||||
|
||||
Reference in New Issue
Block a user