✨ Enable edition of fields before printing

worldline · Mar 6, 2020 · 47c46b1 · 47c46b1
1 parent 37a5468
commit 47c46b1
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 41 deletions.
diff --git a/src/app/components/formatted-tickets/formatted-tickets.component.html b/src/app/components/formatted-tickets/formatted-tickets.component.html
@@ -4,44 +4,8 @@
 <h1>{{sprintName}}</h1>
 <div class="flexcontainer">
   <div class="full-ticket" *ngFor="let issue of fullPostitIssues; index as i">
-    <div>
-      <div class="story-header">
-        <p class="tickeykey">{{issue.key | ticketkey}}</p>
-        <p class="epic">{{ issue.epic?(issue.epic.name | uppercase):"."}}</p>
-      </div>
-      <div class="story-content">
-        <div class="story-information">
-          <div class="components">
-            <p class="badge" *ngFor="let component of issue.components">{{component}}</p>
-          </div>
-          <p class="summary">{{issue.summary}}</p>
-        </div>
-        <div class="story-side">
-            <img src="../../assets/assignee.svg" alt="assignee photo area">
-            <p *ngIf="issue.complexity">{{issue.complexity}}</p>
-        </div>
-      </div>
-      <div *ngIf="isTimeTracked" class="story-footer">
-        <div class="start-date">
-          <img src="../../assets/begin.svg" alt="start date">
-          <p>... / ...</p>
-        </div>
-        <p>... J</p>
-        <div class="end-date">
-          <p>... / ...</p>
-          <img src="../../assets/end.svg" alt="end date">
-        </div>
-      </div>
-      <div *ngIf="!fullTicketInEdition && fullTicketInEdition !== 0" class="overlay" (click)="enterFullTicketEditionMode(i)">
-        <div class="overlay-background"></div>
-        <img src="../../assets/pencil-black.svg">
-      </div>
-      <div *ngIf="fullTicketInEdition !== null && fullTicketInEdition !== i" class="overlay">
-        <div class="overlay-background permanent-opacity"></div>
-      </div>
-    </div>
-    <button *ngIf="fullTicketInEdition === i" class="card-round-button">&#10003;</button>
-    <button *ngIf="fullTicketInEdition === i" (click)="exitFullTicketEditionMode()" class="card-round-button card-cancel-button">&#10008;</button>
+      <ng-container *ngTemplateOutlet="(fullTicketInEdition !== i) ? fullticket : fullticketform; context: { $implicit: i }">
+      </ng-container>
   </div>
   <ng-container *ngFor="let issues of smallPostitIssues">
     <div class="divided-ticket" *ngFor="let chunk of issues | chunks: 3; let i = index; let last = last">
@@ -59,3 +23,65 @@ <h1>{{sprintName}}</h1>
     </div>
   </ng-container>
 </div>
+
+<ng-template #fullticket let-i>
+  <div>
+    <div class="story-header">
+      <p class="tickeykey">{{fullPostitIssues[i].key | ticketkey}}</p>
+      <p class="epic">{{ fullPostitIssues[i].epic?(fullPostitIssues[i].epic?.name | uppercase):"."}}</p>
+    </div>
+    <div class="story-content">
+      <div class="story-information">
+        <div class="components">
+          <p class="badge" *ngFor="let component of fullPostitIssues[i].components">{{component}}</p>
+        </div>
+        <p class="summary">{{fullPostitIssues[i].summary}}</p>
+      </div>
+      <div class="story-side">
+          <img src="../../assets/assignee.svg" alt="assignee photo area">
+          <p *ngIf="fullPostitIssues[i].complexity">{{fullPostitIssues[i].complexity}}</p>
+      </div>
+    </div>
+    <div *ngIf="isTimeTracked" class="story-footer">
+      <div class="start-date">
+        <img src="../../assets/begin.svg" alt="start date">
+        <p>... / ...</p>
+      </div>
+      <p>... J</p>
+      <div class="end-date">
+        <p>... / ...</p>
+        <img src="../../assets/end.svg" alt="end date">
+      </div>
+    </div>
+    <div *ngIf="!fullTicketInEdition && fullTicketInEdition !== 0" class="overlay" (click)="enterFullTicketEditionMode(i)">
+      <div class="overlay-background"></div>
+      <img src="../../assets/pencil-black.svg">
+    </div>
+    <div *ngIf="fullTicketInEdition !== null" class="overlay">
+      <div class="overlay-background permanent-opacity"></div>
+    </div>
+  </div>
+</ng-template>
+
+<ng-template #fullticketform>
+  <form [formGroup]="fullTicketForm" (ngSubmit)="onFullTicketSubmit()" *ngIf="fullTicketInEdition != null">
+    <div class="story-header">
+      <p class="tickeykey">{{fullPostitIssues[fullTicketInEdition].key | ticketkey}}</p>
+      <input class="epic" formControlName="epic">
+    </div>
+    <div class="story-content">
+      <div class="story-information">
+        <div class="components">
+          <p class="badge" *ngFor="let component of fullPostitIssues[fullTicketInEdition].components">{{component}}</p>
+        </div>
+        <textarea class="summary" formControlName="summary"></textarea>
+      </div>
+      <div class="story-side">
+          <img src="../../assets/assignee.svg" alt="assignee photo area">
+          <input formControlName="complexity">
+      </div>
+    </div>
+    <button type="button" (click)="exitFullTicketEditionMode()" class="card-round-button card-cancel-button">&#10008;</button>
+    <button class="card-round-button" type="submit">&#10003;</button>
+  </form>
+</ng-template>
diff --git a/src/app/components/formatted-tickets/formatted-tickets.component.ts b/src/app/components/formatted-tickets/formatted-tickets.component.ts
@@ -6,6 +6,8 @@ import { PrintingConfigurationService } from '../../services/printing-configurat
 import { Subject } from 'rxjs'
 import { takeUntil } from 'rxjs/operators'
 import { Step } from '../progress-bar/step'
+import { FormBuilder, FormGroup, FormArray } from '@angular/forms'
+import { Epic } from 'src/app/services/scrum-issues/epic'
 
 @Component({
   selector: 'app-formatted-tickets',
@@ -21,14 +23,21 @@ export class FormattedTicketsComponent implements OnInit, OnDestroy {
   isComponentGrouped = false
   step = Step.PRINTING
   fullTicketInEdition: number | null = null
+  fullTicketForm: FormGroup
   private unsubscribe = new Subject<void>()
 
   constructor(
     private issuesService: ScrumIssuesService,
     private printingConfigurationService: PrintingConfigurationService,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private formBuilder: FormBuilder
   ) {
     this.sprintName = this.issuesService.sprint ? this.issuesService.sprint.name : ''
+    this.fullTicketForm = this.formBuilder.group({
+      epic: [''],
+      summary: [''],
+      complexity: ['']
+    })
   }
 
   ngOnInit(): void {
@@ -121,10 +130,32 @@ export class FormattedTicketsComponent implements OnInit, OnDestroy {
   //Edition mode
   enterFullTicketEditionMode(index: number) {
     this.fullTicketInEdition = index
+    this.fullTicketForm.get('epic')?.patchValue(this.fullPostitIssues[index].epic?.name)
+    this.fullTicketForm.get('complexity')?.patchValue(this.fullPostitIssues[index].complexity)
+    this.fullTicketForm.get('summary')?.patchValue(this.fullPostitIssues[index].summary)
   }
 
   exitFullTicketEditionMode() {
     this.fullTicketInEdition = null
+    this.fullTicketForm.reset()
+  }
+
+  onFullTicketSubmit() {
+    if (this.fullTicketInEdition !== null) {
+      var modifiedIssue = this.fullPostitIssues[this.fullTicketInEdition]
+      modifiedIssue.complexity = this.fullTicketForm.get('complexity')?.value
+      var modifiedEpicName = this.fullTicketForm.get('epic')?.value
+      var epic: Epic
+      if (modifiedEpicName != null) {
+        epic = new Epic('', modifiedEpicName)
+      } else {
+        epic = new Epic('', '.')
+      }
+      modifiedIssue.epic = epic
+      modifiedIssue.summary = this.fullTicketForm.get('summary')?.value
+      this.fullPostitIssues[this.fullTicketInEdition] = modifiedIssue
+      this.fullTicketInEdition = null
+    }
   }
 
   ngOnDestroy(): void {

diff --git a/src/app/services/scrum-issues/epic.ts b/src/app/services/scrum-issues/epic.ts
@@ -1,4 +1,9 @@
-export interface Epic {
+export class Epic {
     key: string
     name: string
+
+    public constructor(key: string, name: string) {
+        this.key = key
+        this.name = name
+    }
 }
diff --git a/src/app/services/scrum-issues/issue.ts b/src/app/services/scrum-issues/issue.ts
@@ -4,7 +4,7 @@ export interface Issue {
     key: string
     summary: string
     components: string[]
-    epic: Epic
+    epic: Epic | undefined
     type: string
     column: string
     complexity: string