File
Implements
Metadata
| selector |
app-profile |
| styleUrls |
./profile.component.scss |
| templateUrl |
./profile.component.html |
Methods
|
Async
ngOnInit
|
ngOnInit()
|
|
|
|
|
|
resetPassword
|
Default value : () => {...}
|
|
|
|
stateChangeForTopic
|
Default value : () => {...}
|
|
|
import { Observable } from 'rxjs';
import { Component, OnInit } from '@angular/core';
import { UserService } from 'src/app/services/user/user.service';
import { SwalService } from 'src/app/services/swal/swal.service';
import { User } from 'src/app/models/User';
import { OverallService } from 'src/app/services/overall/overall.service';
import { map, mergeMap } from 'rxjs/operators';
import * as _ from 'lodash';
import { Topic } from 'src/app/models/Topic';
@Component({
selector: 'app-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.scss']
})
export class ProfileComponent implements OnInit {
constructor(
private user: UserService,
private swal: SwalService,
private overall: OverallService
) {}
userInfo: User;
topics: Observable<Topic[]>;
async ngOnInit() {
this.user.getCurrentUserInfo().subscribe(data => (this.userInfo = data));
this.topics = this.overall.getNoticeTopics().pipe(
mergeMap((topics: Topic[]) => {
return this.user.getUserTopics().pipe(
map(userTopics => {
return topics.map(({ name }) => {
return { name, state: userTopics.includes(name) ? true : false };
});
})
);
})
);
}
// Sending a password reset email
resetPassword = () => {
this.swal.displayConfirmation(
'Confrimation',
'You are about to reset your password please confirm your request',
() => this.user.resetPassword()
);
};
// Subscribing for a topic
stateChangeForTopic = (event, topic: string) => {
const status = event['detail']['checked'];
if (status) {
this.user.subscribeToTopic(topic);
} else {
this.user.unsubscribeToTopic(topic);
}
};
}
<ion-content class="ion-padding">
<app-loading *ngIf="!userInfo"></app-loading>
<section *ngIf="userInfo">
<ion-avatar style="margin: 0 auto">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
</ion-avatar>
<br />
<ion-grid>
<ion-grid>
<ion-row>
<ion-col sizeXl="3">Name</ion-col>
<ion-col>{{ userInfo.displayName }}</ion-col>
</ion-row>
<ion-row>
<ion-col sizeXl="3">Contact Number</ion-col>
<ion-col>{{ userInfo.phoneNumber }}</ion-col>
</ion-row>
<ion-row>
<ion-col sizeXl="3">Email</ion-col>
<ion-col>{{ userInfo.email }}</ion-col>
</ion-row>
<ion-row>
<ion-col sizeXl="3">Address</ion-col>
<ion-col>
<ion-row>Karawitawatta</ion-row>
<ion-row>Sapugahawatta</ion-row>
<ion-row>Dodangoda</ion-row>
</ion-col>
</ion-row>
<br />
<ion-row justify-content-center>
<ion-col sizeXl="6">
<ion-button expand="block" fill="outline" size="small" (click)="resetPassword()">
Change Password
</ion-button>
</ion-col>
<ion-col sizeXl="6">
<ion-button expand="block" fill="outline" size="small"> Update picture</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-grid>
<app-loading *ngIf="!topics"></app-loading>
<ion-card *ngIf="topics">
<ion-card-header>Subscribe for Library messages</ion-card-header>
<ion-card-content>
<ion-item *ngFor="let topic of (topics | async)">
<ion-label>{{ topic.name }}</ion-label>
<ion-toggle (ionChange)="stateChangeForTopic($event, topic.name)" [checked]="topic.state">
Notices
</ion-toggle>
</ion-item>
</ion-card-content>
</ion-card>
</section>
</ion-content>
Legend
Html element with directive