File
Implements
Methods
|
prepareTaskMeta
|
prepareTaskMeta()
|
|
|
|
|
|
selectedTaskStatus
|
selectedTaskStatus(event)
|
|
|
|
|
|
currentYear
|
Default value : new Date().getFullYear()
|
|
|
|
Public
platform
|
Type : Platform
|
|
|
|
statuses
|
Default value : statuses
|
|
|
import { Component, OnInit } from '@angular/core';
import { AttachmentService, statuses, ToastService, UtilsService } from '@app/app/manage-learn/core';
import { ModalController, Platform } from '@ionic/angular';
import { GenericPopUpService } from '../../generic.popup';
@Component({
selector: 'app-create-task-form',
templateUrl: './create-task-form.component.html',
styleUrls: ['./create-task-form.component.scss'],
})
export class CreateTaskFormComponent implements OnInit {
newTask;
currentYear = new Date().getFullYear();
statuses = statuses;
today
constructor(
private modalCtrl: ModalController,
private utils: UtilsService,
private attachmentService: AttachmentService,
private toast: ToastService,
private popupService: GenericPopUpService,
public platform: Platform
) { }
ngOnInit() {
this.prepareTaskMeta();
}
prepareTaskMeta() {
this.newTask = JSON.parse(JSON.stringify(this.utils.getMetaData('task')));
}
close() {
this.modalCtrl.dismiss();
}
openAction() {
this.attachmentService.selectImage().then(data => {
!this.newTask.attachments ? this.newTask.attachments = [] : '';
data.data ? this.newTask.attachments.push(data.data) : ''
})
}
doAction() {
this.popupService.showPPPForProjectPopUp('FRMELEMNTS_LBL_EVIDENCES_CONTENT_POLICY', 'FRMELEMNTS_LBL_EVIDENCES_CONTENT_POLICY_TEXT', 'FRMELEMNTS_LBL_EVIDENCES_CONTENT_POLICY_LABEL', 'FRMELEMNTS_LBL_UPLOAD_EVIDENCES', 'https://diksha.gov.in/term-of-use.html', 'contentPolicy').then((data: any) => {
if (data.isClicked) {
data.isChecked ? this.openAction() : this.toast.showMessage('FRMELEMNTS_MSG_EVIDENCES_CONTENT_POLICY_REJECT', 'danger');
}
})
}
selectedTaskStatus(event) {
}
addTask() {
this.newTask.name ? this.modalCtrl.dismiss(this.newTask) : this.toast.showMessage('FRMELEMNTS_MSG_REQUIRED_FIELDS', 'danger');
}
share() {
this.toast.showMessage('FRMELEMNTS_MSG_COMING_SOON', 'danger');
}
}
<ion-toolbar [ngClass]="{'container': platform.is('ios')}">
<ion-title>
{{'FRMELEMNTS_LBL_ADD_NEW_TASK' | translate}}
</ion-title>
<ion-buttons (click)="close()" slot="start" class="padding" color="primary">
<ion-icon role="button" name="close" aria-label="close" slot="icon-only" style="padding-left: 10px;"></ion-icon>
</ion-buttons>
</ion-toolbar>
<ion-content class="ion-padding">
<ion-item class="custom-item">
<ion-label position="stacked" class="custom-label-float">
{{'FRMELEMNTS_LBL_TASK_DESCRIPTION' | translate}}<span class="reuired-field">* </span>
</ion-label>
<ion-textarea type="text" [(ngModel)]="newTask.name">
</ion-textarea>
</ion-item>
<ion-item class="custom-datetime" lines="none">
<ion-label id="endate">
{{'FRMELEMNTS_LBL_END_DATE' | translate}}
</ion-label>
<ion-icon name="caret-down-outline" slot="end"></ion-icon>
<ion-datetime for="endate" min="{{currentYear-2}}" max="{{currentYear + 5}}" class="no-rght-brdr-rds" displayFormat="DD/MM/YYYY"
display-timezone="utc" value={{newTask.endDate}} [(ngModel)]="newTask.endDate" class="project-date"
placeholder={{today}}>
</ion-datetime>
</ion-item>
<ion-item class="custom-item" lines="none">
<ion-label>{{'FRMELEMNTS_LBL_STATUS' | translate}}</ion-label>
<ion-select [(ngModel)]="newTask.status" class="custom-select" [interfaceOptions]="{
cssClass: 'select-box',
animated: false
}" placeholder="{{'FRMELEMNTS_LBL_SELECT_STATUS_PLACEHOLDER' | translate}}"
(ionChange)="selectedTaskStatus($event)">
<ion-select-option *ngFor="let status of statuses" value="{{status.title}}"
selected="status.title === newTask.status">{{status.title | camelToTitle}}</ion-select-option>
</ion-select>
</ion-item>
<div class="attachments-box">
<div *ngIf="newTask.attachments.length > 0">
<p *ngFor="let file of newTask.attachments">
<ion-icon name="attach" class="img"></ion-icon>
{{file.name}}
</p>
</div>
<ion-row class="file-box">
<ion-col size="6" class="file-list">
<div *ngIf="newTask.attachments.length == 0">
<ion-icon color="primary" name="image"></ion-icon>
</div>
</ion-col>
<ion-col size="6">
<a class="attach-label" (click)="doAction()">{{'FRMELEMNTS_LBL_ATTACH_FILES' | translate}}</a>
</ion-col>
</ion-row>
</div>
<ion-button class="custom-btn-txt-transform-none custom-btn-txt-transform-none" expand="block" (click)="addTask()" [disabled]="!newTask.name" [ngClass]="{'btn-disabled': !newTask.name}">
{{'FRMELEMNTS_LBL_ADD_TASK' | translate}}
</ion-button>
</ion-content>
@import "src/assets/styles/_variables.scss";
.custom-label{
font-size: 1rem;
font-weight: 400;
margin-bottom: 15px;
}
.custom-datetime{
display: flex;
justify-content: space-between;
margin: 20px 0px;
font-size: 1rem;
ion-datetime{
border-bottom: 1px solid #999999;
min-width: 11.563rem;
font-size: 1rem;
}
ion-icon{
font-size: $font-size-base;
color: #999999;
padding: 0px;
margin: 0px;
}
}
.custom-datetime-label{
font-size: 1rem;
font-weight: 600;
margin-top: 15px;
}
.custom-label-float{
font-size: 1.25rem;
font-weight: 400;
margin-bottom: 15px;
}
.file-list{
margin: auto;
font-size: 1.5rem;
}
.custom-item{
margin: 20px 0px;
font-size: 1rem;
ion-select{
min-width: 12.5rem;
}
}
.btn-disabled{
--background: #999999 !important;
--border-color: #999999 !important;
}
.attachments-box{
background: $white;
margin-bottom: 35px;
height: auto;
padding: 5px 10px;
.file-box{
img{
margin: 5px 5px;
font-size: 1.438rem;
}
.attach-label{
color: #{$blue};
text-align:right;
float: right;
margin: 10px 10px;
}
}
.img{
margin: 5px 5px;
margin-bottom: -5px;
font-size: 1.438rem;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
p{
margin-top: 5px;
margin-bottom: 5px;
font-weight: 500;
}
}
.container {
margin-top: env(safe-area-inset-top);
}
ion-content ion-button {
font-size: 0.875rem;
height: 2.25rem;
}
Legend
Html element with directive