File
Constructor
constructor(router: Router, location: Location, headerService: AppHeaderService, platform: Platform, translate: TranslateService, db: DbService, params: ActivatedRoute)
|
|
|
Parameters :
| Name |
Type |
Optional |
| router |
Router
|
No
|
| location |
Location
|
No
|
| headerService |
AppHeaderService
|
No
|
| platform |
Platform
|
No
|
| translate |
TranslateService
|
No
|
| db |
DbService
|
No
|
| params |
ActivatedRoute
|
No
|
|
Methods
|
Private
handleBackButton
|
handleBackButton()
|
|
|
|
|
|
ionViewWillEnter
|
ionViewWillEnter()
|
|
|
|
|
|
Private
backButtonFunc
|
Type : Subscription
|
|
|
|
headerConfig
|
Type : object
|
Default value : {
showHeader: true,
showBurgerMenu: false,
pageTitle: '',
actionButtons: []
}
|
|
|
import { Component } from '@angular/core';
import { RouterLinks } from '@app/app/app.constant';
import { Router, ActivatedRoute } from '@angular/router';
import { AppHeaderService } from '@app/services';
import { Subscription } from 'rxjs';
import { Location } from '@angular/common';
import { Platform } from '@ionic/angular';
import { TranslateService } from '@ngx-translate/core';
import { DbService } from '../../core';
@Component({
selector: 'app-project-edit',
templateUrl: './project-edit.page.html',
styleUrls: ['./project-edit.page.scss'],
})
export class ProjectEditPage {
private backButtonFunc: Subscription;
headerConfig = {
showHeader: true,
showBurgerMenu: false,
pageTitle: '',
actionButtons: []
};
projectId;
project;
constructor(
private router: Router,
private location: Location,
private headerService: AppHeaderService,
private platform: Platform,
private translate: TranslateService,
private db: DbService,
private params: ActivatedRoute
) {
params.params.subscribe((parameters) => {
this.projectId = parameters.id;
this.getProject();
});
}
ionViewWillEnter() {
let data;
this.translate.get(["FRMELEMNTS_LBL_PROJECT_VIEW"]).subscribe((text) => {
data = text;
});
this.headerConfig = this.headerService.getDefaultPageConfig();
this.headerConfig.actionButtons = [];
this.headerConfig.showHeader = true;
this.headerConfig.showBurgerMenu = false;
this.headerConfig.pageTitle = data["FRMELEMNTS_LBL_PROJECT_VIEW"];
this.headerService.updatePageConfig(this.headerConfig);
this.handleBackButton();
}
getProject() {
this.db.query({ _id: this.projectId }).then(
(success) => {
this.project = success.docs.length ? success.docs[0] : {}
})
}
private handleBackButton() {
this.backButtonFunc = this.platform.backButton.subscribeWithPriority(10, () => {
this.location.back();
this.backButtonFunc.unsubscribe();
});
}
edit(type) {
type == "metaData" ?
this.router.navigate([`${RouterLinks.CREATE_PROJECT_PAGE}`], {
queryParams: {
projectId: this.project._id, type: type
}
}) :
this.router.navigate([`${RouterLinks.PROJECT_OPERATION_PAGE}`, this.project._id], { queryParams: { availableInLocal: true, isEdit: true } });
}
}
<ion-content *ngIf="project">
<ion-card class="project-box">
<ion-card-header class="custom-filed" (click)="edit('metaData')">
<div style="height: 1.25rem;">
<ion-icon name="create" color="primary"></ion-icon>
</div>
</ion-card-header>
<ion-card-content>
<div class="custom-filed _capitalize">
<ion-label> {{'FRMELEMNTS_LBL_PROJECT_TITLE' | translate}} : </ion-label>
{{project?.title}}
</div>
<div class="custom-filed _capitalize">
<ion-label position="fixed"> {{'FRMELEMNTS_LBL_OBJECTIVE' | translate}} : </ion-label>
{{project?.description}}
</div>
<div class="custom-filed _capitalize" *ngIf="project?.duration">
<ion-label position="fixed"> {{'FRMELEMNTS_LBL_DURATION' | translate}} : </ion-label>
{{project?.duration}}
</div>
<div class="custom-filed _capitalize">
<ion-label position="fixed"> {{'FRMELEMNTS_LBL_CATEGORIES' | translate}} : </ion-label>
<!-- {{categories}} -->
<span *ngFor="let category of project?.categories;let last=last">
{{category?.label || category?.name}} {{!last ?', ':"" }}
</span>
</div>
</ion-card-content>
</ion-card>
<ion-card class="project-box">
<ion-card-header class="custom-filed _capitalize" (click)="edit('others')">
<div style="height: 1.25rem;">
<ion-icon name="create" color="primary"></ion-icon>
</div>
</ion-card-header>
<ion-card-content>
<div class="custom-filed _capitalize" *ngIf="project?.startDate">
<ion-label position="fixed"> {{'FRMELEMNTS_LBL_START_DATE' | translate}} : </ion-label>
{{project?.startDate | date : 'dd/MM/yyyy' }}
</div>
<div class="custom-filed _capitalize" *ngIf="project?.endDate">
<ion-label position="fixed"> {{'FRMELEMNTS_LBL_END_DATE' | translate}} : </ion-label>
{{project?.endDate | date : 'dd/MM/yyyy' }}
</div>
<div class="custom-filed _capitalize">
<ion-label> {{'FRMELEMNTS_LBL_PROGRAM_NAME' | translate}} : </ion-label>
{{project?.programName}}
</div>
<div class="custom-filed _capitalize" *ngIf="project?.duration">
<ion-label position="fixed"> {{'FRMELEMNTS_LBL_DURATION' | translate}} : </ion-label>
{{project?.duration}}
</div>
<div class="custom-filed _capitalize" *ngIf="project?.entityId">
<ion-label position="fixed"> {{'FRMELEMNTS_LBL_ENTITIES' | translate}} </ion-label>
<ion-card>
<ion-card-content>
{{project?.entityName}}
</ion-card-content>
</ion-card>
</div>
<div class="custom-filed _capitalize" *ngIf="project.learningResources && project.learningResources.length">
<ion-label position="fixed"> {{'FRMELEMNTS_LBL_LEARNING_RESOURCES' | translate}} : </ion-label>
<ion-card *ngFor="let resources of project.learningResources">
<ion-card-content>
{{resources?.name}}
</ion-card-content>
</ion-card>
</div>
</ion-card-content>
</ion-card>
</ion-content>
@import "../../../../assets/styles/variables";
@import "../../../../assets/styles/base/variables";
.project-box {
background: $white;
margin: 10px 8px;
ion-card-header {
padding: 0px 15px;
}
.custom-filed {
margin: 10px 0px;
font-size: 0.875rem;
ion-label {
font-weight: 600;
// color: $black-color;
}
ion-icon {
float: right;
font-size: 1.5rem;
}
ion-col {
padding: 0px;
}
ion-card ion-card-content {
font-size: 0.875rem;
}
}
}
Legend
Html element with directive