Skip to content

Commit d0f951f

Browse files
OcunideeOcunidee
committed
✨ Enable edition of fields before printing
1 parent 0666795 commit d0f951f

File tree

4 files changed

+103
-41
lines changed

4 files changed

+103
-41
lines changed

‎src/app/components/formatted-tickets/formatted-tickets.component.html

+64-38
Original file line numberDiff line numberDiff line change
@@ -4,44 +4,8 @@
44
<h1>{{sprintName}}</h1>
55
<div class="flexcontainer">
66
<div class="full-ticket" *ngFor="let issue of fullPostitIssues; index as i">
7-
<div>
8-
<div class="story-header">
9-
<p class="tickeykey">{{issue.key | ticketkey}}</p>
10-
<p class="epic">{{ issue.epic?(issue.epic.name | uppercase):"."}}</p>
11-
</div>
12-
<div class="story-content">
13-
<div class="story-information">
14-
<div class="components">
15-
<p class="badge" *ngFor="let component of issue.components">{{component}}</p>
16-
</div>
17-
<p class="summary">{{issue.summary}}</p>
18-
</div>
19-
<div class="story-side">
20-
<img src="../../assets/assignee.svg" alt="assignee photo area">
21-
<p *ngIf="issue.complexity">{{issue.complexity}}</p>
22-
</div>
23-
</div>
24-
<div *ngIf="isTimeTracked" class="story-footer">
25-
<div class="start-date">
26-
<img src="../../assets/begin.svg" alt="start date">
27-
<p>... / ...</p>
28-
</div>
29-
<p>... J</p>
30-
<div class="end-date">
31-
<p>... / ...</p>
32-
<img src="../../assets/end.svg" alt="end date">
33-
</div>
34-
</div>
35-
<div *ngIf="!fullTicketInEdition && fullTicketInEdition !== 0" class="overlay" (click)="enterFullTicketEditionMode(i)">
36-
<div class="overlay-background"></div>
37-
<img src="../../assets/pencil-black.svg">
38-
</div>
39-
<div *ngIf="fullTicketInEdition !== null && fullTicketInEdition !== i" class="overlay">
40-
<div class="overlay-background permanent-opacity"></div>
41-
</div>
42-
</div>
43-
<button *ngIf="fullTicketInEdition === i" class="card-round-button">&#10003;</button>
44-
<button *ngIf="fullTicketInEdition === i" (click)="exitFullTicketEditionMode()" class="card-round-button card-cancel-button">&#10008;</button>
7+
<ng-container *ngTemplateOutlet="(fullTicketInEdition !== i) ? fullticket : fullticketform; context: { $implicit: i }">
8+
</ng-container>
459
</div>
4610
<ng-container *ngFor="let issues of smallPostitIssues">
4711
<div class="divided-ticket" *ngFor="let chunk of issues | chunks: 3; let i = index; let last = last">
@@ -59,3 +23,65 @@ <h1>{{sprintName}}</h1>
5923
</div>
6024
</ng-container>
6125
</div>
26+
27+
<ng-template #fullticket let-i>
28+
<div>
29+
<div class="story-header">
30+
<p class="tickeykey">{{fullPostitIssues[i].key | ticketkey}}</p>
31+
<p class="epic">{{ fullPostitIssues[i].epic?(fullPostitIssues[i].epic?.name | uppercase):"."}}</p>
32+
</div>
33+
<div class="story-content">
34+
<div class="story-information">
35+
<div class="components">
36+
<p class="badge" *ngFor="let component of fullPostitIssues[i].components">{{component}}</p>
37+
</div>
38+
<p class="summary">{{fullPostitIssues[i].summary}}</p>
39+
</div>
40+
<div class="story-side">
41+
<img src="../../assets/assignee.svg" alt="assignee photo area">
42+
<p *ngIf="fullPostitIssues[i].complexity">{{fullPostitIssues[i].complexity}}</p>
43+
</div>
44+
</div>
45+
<div *ngIf="isTimeTracked" class="story-footer">
46+
<div class="start-date">
47+
<img src="../../assets/begin.svg" alt="start date">
48+
<p>... / ...</p>
49+
</div>
50+
<p>... J</p>
51+
<div class="end-date">
52+
<p>... / ...</p>
53+
<img src="../../assets/end.svg" alt="end date">
54+
</div>
55+
</div>
56+
<div *ngIf="!fullTicketInEdition && fullTicketInEdition !== 0" class="overlay" (click)="enterFullTicketEditionMode(i)">
57+
<div class="overlay-background"></div>
58+
<img src="../../assets/pencil-black.svg">
59+
</div>
60+
<div *ngIf="fullTicketInEdition !== null" class="overlay">
61+
<div class="overlay-background permanent-opacity"></div>
62+
</div>
63+
</div>
64+
</ng-template>
65+
66+
<ng-template #fullticketform>
67+
<form [formGroup]="fullTicketForm" (ngSubmit)="onFullTicketSubmit()" *ngIf="fullTicketInEdition != null">
68+
<div class="story-header">
69+
<p class="tickeykey">{{fullPostitIssues[fullTicketInEdition].key | ticketkey}}</p>
70+
<input class="epic" formControlName="epic">
71+
</div>
72+
<div class="story-content">
73+
<div class="story-information">
74+
<div class="components">
75+
<p class="badge" *ngFor="let component of fullPostitIssues[fullTicketInEdition].components">{{component}}</p>
76+
</div>
77+
<textarea class="summary" formControlName="summary"></textarea>
78+
</div>
79+
<div class="story-side">
80+
<img src="../../assets/assignee.svg" alt="assignee photo area">
81+
<input formControlName="complexity">
82+
</div>
83+
</div>
84+
<button type="button" (click)="exitFullTicketEditionMode()" class="card-round-button card-cancel-button">&#10008;</button>
85+
<button class="card-round-button" type="submit">&#10003;</button>
86+
</form>
87+
</ng-template>

‎src/app/components/formatted-tickets/formatted-tickets.component.ts

+32-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { PrintingConfigurationService } from '../../services/printing-configurat
66
import { Subject } from 'rxjs'
77
import { takeUntil } from 'rxjs/operators'
88
import { Step } from '../progress-bar/step'
9+
import { FormBuilder, FormGroup, FormArray } from '@angular/forms'
10+
import { Epic } from 'src/app/services/scrum-issues/epic'
911

1012
@Component({
1113
selector: 'app-formatted-tickets',
@@ -21,14 +23,21 @@ export class FormattedTicketsComponent implements OnInit, OnDestroy {
2123
isComponentGrouped = false
2224
step = Step.PRINTING
2325
fullTicketInEdition: number | null = null
26+
fullTicketForm: FormGroup
2427
private unsubscribe = new Subject<void>()
2528

2629
constructor(
2730
private issuesService: ScrumIssuesService,
2831
private printingConfigurationService: PrintingConfigurationService,
29-
private route: ActivatedRoute
32+
private route: ActivatedRoute,
33+
private formBuilder: FormBuilder
3034
) {
3135
this.sprintName = this.issuesService.sprint ? this.issuesService.sprint.name : ''
36+
this.fullTicketForm = this.formBuilder.group({
37+
epic: [''],
38+
summary: [''],
39+
complexity: ['']
40+
})
3241
}
3342

3443
ngOnInit(): void {
@@ -121,10 +130,32 @@ export class FormattedTicketsComponent implements OnInit, OnDestroy {
121130
//Edition mode
122131
enterFullTicketEditionMode(index: number) {
123132
this.fullTicketInEdition = index
133+
this.fullTicketForm.get('epic')?.patchValue(this.fullPostitIssues[index].epic?.name)
134+
this.fullTicketForm.get('complexity')?.patchValue(this.fullPostitIssues[index].complexity)
135+
this.fullTicketForm.get('summary')?.patchValue(this.fullPostitIssues[index].summary)
124136
}
125137

126138
exitFullTicketEditionMode() {
127139
this.fullTicketInEdition = null
140+
this.fullTicketForm.reset()
141+
}
142+
143+
onFullTicketSubmit() {
144+
if (this.fullTicketInEdition !== null) {
145+
var modifiedIssue = this.fullPostitIssues[this.fullTicketInEdition]
146+
modifiedIssue.complexity = this.fullTicketForm.get('complexity')?.value
147+
var modifiedEpicName = this.fullTicketForm.get('epic')?.value
148+
var epic: Epic
149+
if (modifiedEpicName != null) {
150+
epic = new Epic('', modifiedEpicName)
151+
} else {
152+
epic = new Epic('', '.')
153+
}
154+
modifiedIssue.epic = epic
155+
modifiedIssue.summary = this.fullTicketForm.get('summary')?.value
156+
this.fullPostitIssues[this.fullTicketInEdition] = modifiedIssue
157+
this.fullTicketInEdition = null
158+
}
128159
}
129160

130161
ngOnDestroy(): void {

‎src/app/services/scrum-issues/epic.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
export interface Epic {
1+
export class Epic {
22
key: string
33
name: string
4+
5+
public constructor(key: string, name: string) {
6+
this.key = key
7+
this.name = name
8+
}
49
}

‎src/app/services/scrum-issues/issue.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export interface Issue {
44
key: string
55
summary: string
66
components: string[]
7-
epic: Epic
7+
epic: Epic | undefined
88
type: string
99
column: string
1010
complexity: string

0 commit comments

Comments
 (0)