feat(ng-client): add simple ticket update modal

getlarge · Dec 15, 2023 · 42d6321 · 42d6321
1 parent 0c3812c
commit 42d6321
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 20 deletions.
diff --git a/apps/ng-client/src/app/tickets/list/list.component.ts b/apps/ng-client/src/app/tickets/list/list.component.ts
@@ -14,6 +14,7 @@ import {
   TicketStoreSelectors,
 } from '../../store';
 import { CreateTicketModalComponent } from '../create-ticket-modal/create-ticket-modal.component';
+import { UpdateTicketModalComponent } from '../update-ticket-modal/update-ticket-modal.component';
 
 @Component({
   selector: 'ticketing-ticket-list',
@@ -29,19 +30,19 @@ export class TicketListComponent implements OnInit {
   constructor(
     private store: Store<RootStoreState.RootState>,
     private router: Router,
-    private modalService: NgbModal
+    private modalService: NgbModal,
   ) {}
 
   ngOnInit(): void {
     //? TODO: only show available tickets with TicketStoreSelectors.selectAvailableTicketItems
     this.tickets$ = this.store.select(
-      TicketStoreSelectors.selectAllTicketItems
+      TicketStoreSelectors.selectAllTicketItems,
     );
     this.currentFilter$ = this.store.select(
-      TicketStoreSelectors.selectTicketCurrentFilter
+      TicketStoreSelectors.selectTicketCurrentFilter,
     );
     this.isLoading$ = this.store.select(
-      TicketStoreSelectors.selectTicketIsLoading
+      TicketStoreSelectors.selectTicketIsLoading,
     );
     this.users$ = of([]);
     this.store.dispatch(new TicketStoreActions.LoadTicketsAction());
@@ -55,10 +56,10 @@ export class TicketListComponent implements OnInit {
     void this.router.navigate([`/${Resources.TICKETS}`, ticketId]);
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onUpdateTicket(_ticketId: string): void {
-    // const modalRef = this.modalService.open(UpdateTicketModalComponent);
-    // modalRef.componentInstance.ticketId = ticketId;
+  onUpdateTicket(ticketId: string): void {
+    // TODO: add basic permission check
+    const modalRef = this.modalService.open(UpdateTicketModalComponent);
+    modalRef.componentInstance.ticketId = ticketId;
   }
 
   onOrderTicket(ticketId: string): void {

diff --git a/apps/ng-client/src/app/tickets/list/list.module.ts b/apps/ng-client/src/app/tickets/list/list.module.ts
@@ -4,22 +4,24 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
 import { CreateTicketModalComponent } from '../create-ticket-modal/create-ticket-modal.component';
+import { UpdateTicketModalComponent } from '../update-ticket-modal/update-ticket-modal.component';
 import { TicketListComponent } from './list.component';
 import { TicketListFilterFormComponent } from './ticket-list-filter-form/ticket-list-filter-form.component';
 import { TicketListGridComponent } from './ticket-list-grid/ticket-list-grid.component';
 
 @NgModule({
-    declarations: [
-        TicketListComponent,
-        TicketListFilterFormComponent,
-        TicketListGridComponent,
-        CreateTicketModalComponent,
-    ],
-    imports: [
-        CommonModule,
-        ReactiveFormsModule,
-        FormsModule,
-        RouterModule.forChild([{ path: '', component: TicketListComponent }]),
-    ]
+  declarations: [
+    TicketListComponent,
+    TicketListFilterFormComponent,
+    TicketListGridComponent,
+    CreateTicketModalComponent,
+    UpdateTicketModalComponent,
+  ],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    FormsModule,
+    RouterModule.forChild([{ path: '', component: TicketListComponent }]),
+  ],
 })
 export class ListModule {}
diff --git a/apps/ng-client/src/app/tickets/update-ticket-modal/update-ticket-modal.component.html b/apps/ng-client/src/app/tickets/update-ticket-modal/update-ticket-modal.component.html
@@ -0,0 +1,51 @@
+<div *ngIf="ticket$ | async as ticket; else loading">
+  <div class="modal-header">
+    <h4 class="modal-title">Update Ticket</h4>
+    <button type="button" class="close" aria-label="Close" (click)="cancel()">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+
+  <div class="modal-body">
+    <div class="form-row">
+      <div class="form-group col">
+        <label for="title">Title</label>
+        <input
+          type="text"
+          class="form-control"
+          name="title"
+          [placeholder]="ticket.title"
+          [(ngModel)]="ticketTitle"
+        />
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-body">
+    <div class="form-row">
+      <div class="form-group col">
+        <label for="price">Price</label>
+        <input
+          type="number"
+          class="form-control"
+          name="price"
+          [placeholder]="ticket.price"
+          [(ngModel)]="ticketPrice"
+        />
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-footer">
+    <button type="button" class="btn btn-primary" (click)="update()">
+      Update Ticket
+    </button>
+    <button type="button" class="btn btn-secondary" (click)="cancel()">
+      Cancel
+    </button>
+  </div>
+</div>
+
+<ng-template #loading>
+  <div>Loading Ticket...</div>
+</ng-template>
diff --git a/apps/ng-client/src/app/tickets/update-ticket-modal/update-ticket-modal.component.ts b/apps/ng-client/src/app/tickets/update-ticket-modal/update-ticket-modal.component.ts
@@ -0,0 +1,62 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { ActionsSubject, Store } from '@ngrx/store';
+import { UpdateTicketDto } from '@ticketing/ng/open-api';
+import { Ticket } from '@ticketing/shared/models';
+import { Observable } from 'rxjs';
+
+import {
+  RootStoreState,
+  TicketStoreActions,
+  TicketStoreSelectors,
+} from '../../store';
+
+@Component({
+  selector: 'ticketing-create-ticket-modal',
+  templateUrl: './update-ticket-modal.component.html',
+})
+export class UpdateTicketModalComponent implements OnInit {
+  @Input() ticketId!: string | null;
+
+  ticket$!: Observable<Ticket | undefined>;
+
+  ticketPrice = 0;
+  ticketTitle = '';
+
+  constructor(
+    private store: Store<RootStoreState.RootState>,
+    private activeModal: NgbActiveModal,
+    private actionsSubj: ActionsSubject,
+  ) {}
+
+  ngOnInit(): void {
+    if (this.ticketId) {
+      this.store.dispatch(
+        new TicketStoreActions.LoadTicketAction({ ticketId: this.ticketId }),
+      );
+      this.ticket$ = this.store.select(
+        TicketStoreSelectors.selectTicketForId(this.ticketId),
+      );
+    }
+  }
+
+  update(): void {
+    const ticket: UpdateTicketDto = {
+      price: this.ticketPrice,
+      title: this.ticketTitle,
+    };
+    if (this.ticketId) {
+      this.store.dispatch(
+        new TicketStoreActions.UpdateTicketAction({
+          ticketId: this.ticketId,
+          ticket,
+        }),
+      );
+      this.activeModal.close();
+    }
+  }
+
+  cancel(): void {
+    this.activeModal.close();
+  }
+}