Add special note and new invoice template 2022

openartcoded · Oct 15, 2022 · 65ca12a · 65ca12a
1 parent 277cde4
commit 65ca12a
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 22 deletions.
diff --git a/src/app/core/models/invoice.ts b/src/app/core/models/invoice.ts
@@ -38,6 +38,7 @@ export interface Invoice {
   taxRate?: number;
   imported?: boolean;
   importedDate?: Date;
+  specialNote?: string;
 }
 
 export interface InvoiceFreemarkerTemplate {

diff --git a/src/app/features/invoice/invoice-detail/invoice-detail.component.html b/src/app/features/invoice/invoice-detail/invoice-detail.component.html
@@ -70,18 +70,24 @@
                     [value]="invoice.total | currency:'€'" placeholder="total">
                 </div>
               </div>
-              <ng-container *ngIf="templates$ | async as templates">
+              <ng-container *ngIf="templates">
                 <div class="mb-1 row" *ngIf="templates.length">
                   <label class="col-sm-2 col-form-label" for="freemarkerTemplateId">Template</label>
                   <div class="col-sm-10">
                     <select class="form-select" id="freemarkerTemplateId" formControlName="freemarkerTemplateId">
+                      <option [value]="null">Please select</option>
                       <option *ngFor="let template of templates" [value]="template.id">{{template.name}}</option>
                     </select>
                   </div>
                 </div>
-
               </ng-container>
-
+              <div class="mb-1 row">
+                <label class="col-sm-2 col-form-label" for="specialNote">Special note</label>
+                <div class="col-sm-10">
+                  <textarea id="specialNote" [autosize]="true" class="form-control" formControlName="specialNote"
+                    placeholder="Put a note here"></textarea>
+                </div>
+              </div>
               <hr>
               <div class="form-check form-check-inline">
                 <input class="form-check-input" type="checkbox" id="uploadedManually"

diff --git a/src/app/features/invoice/invoice-detail/invoice-detail.component.ts b/src/app/features/invoice/invoice-detail/invoice-detail.component.ts
@@ -29,7 +29,7 @@ export class InvoiceDetailComponent implements OnInit {
   invoice: Invoice;
 
   @Input()
-  templates$: Observable<InvoiceFreemarkerTemplate[]>;
+  templates: InvoiceFreemarkerTemplate[];
 
   @Input()
   clients: BillableClient[];
@@ -66,10 +66,10 @@ export class InvoiceDetailComponent implements OnInit {
       ]),
       freemarkerTemplateId: new UntypedFormControl(
         {
-          value: this.invoice.freemarkerTemplateId,
+          value: this.templates.some(templ => templ.id === this.invoice.freemarkerTemplateId) ? this.invoice.freemarkerTemplateId : null,
           disabled: this.invoice.locked,
         },
-        []
+        [Validators.required]
       ),
       selectedClient: new UntypedFormControl(
         {
@@ -110,6 +110,8 @@ export class InvoiceDetailComponent implements OnInit {
       billToCity: new UntypedFormControl({ value: this.invoice?.billTo?.city, disabled: this.invoice.locked }, [
         Validators.required,
       ]),
+      specialNote: new UntypedFormControl({ value: this.invoice?.specialNote, disabled: this.invoice.locked }, [
+      ]),
       billToAddress: new UntypedFormControl({ value: this.invoice?.billTo?.address, disabled: this.invoice.locked }, [
         Validators.required,
       ]),
@@ -147,6 +149,13 @@ export class InvoiceDetailComponent implements OnInit {
   set file(file) {
     this.invoiceForm.get('file').patchValue(file);
   }
+  get specialNote() {
+    return this.invoiceForm.get('specialNote').value;
+  }
+
+  set specialNote(note) {
+    this.invoiceForm.get('specialNote').patchValue(note);
+  }
 
   drop(files: NgxFileDropEntry[]) {
     for (const droppedFile of files) {
@@ -193,6 +202,7 @@ export class InvoiceDetailComponent implements OnInit {
     let toSave = {
       invoiceNumber: this.invoiceForm.get('invoiceNumber').value,
       freemarkerTemplateId: this.invoiceForm.get('freemarkerTemplateId').value,
+      specialNote: this.invoiceForm.get('specialNote').value,
       maxDaysToPay: this.invoiceForm.get('maxDaysToPay').value,
       dateOfInvoice: DateUtils.getDateFromInput(this.invoiceForm.get('dateOfInvoice').value),
       taxRate: this.invoiceForm.get('taxRate').value,

diff --git a/src/app/features/invoice/invoice-table-result/invoice-table-result.component.ts b/src/app/features/invoice/invoice-table-result/invoice-table-result.component.ts
@@ -76,12 +76,12 @@ export class InvoiceTableResultComponent implements OnInit, OnApplicationEvent {
 
   async openModal(invoice: Invoice) {
     this.clients = await firstValueFrom(this.billableClientService.findByContractStatus(ContractStatus.ONGOING));
-
+    const templates = await firstValueFrom(this.invoiceService.listTemplates());
     const ngbModalRef = this.modalService.open(InvoiceDetailComponent, {
       size: 'xl',
     });
     ngbModalRef.componentInstance.invoice = invoice;
-    ngbModalRef.componentInstance.templates$ = this.invoiceService.listTemplates();
+    ngbModalRef.componentInstance.templates = templates;
     ngbModalRef.componentInstance.clients = this.clients;
     ngbModalRef.componentInstance.onSaveInvoice.subscribe((invoiceForm) => {
       ngbModalRef.close();
@@ -168,18 +168,23 @@ export class InvoiceTableResultComponent implements OnInit, OnApplicationEvent {
   }
 
   templateModal() {
-    const ngbModalRef = this.modalService.open(TemplateComponent, {
-      size: 'lg',
-    });
-    ngbModalRef.componentInstance.templates$ = this.invoiceService.listTemplates();
-    ngbModalRef.componentInstance.onSaveTemplate.subscribe(async (formData) => {
-      ngbModalRef.close();
-      await firstValueFrom(this.invoiceService.addTemplate(formData));
-    });
-    ngbModalRef.componentInstance.onDeleteTemplate.subscribe(async (template) => {
-      ngbModalRef.close();
-      await firstValueFrom(this.invoiceService.deleteTemplate(template));
-    });
+    this.invoiceService.listTemplates().subscribe(templates => {
+      const ngbModalRef = this.modalService.open(TemplateComponent, {
+        size: 'lg',
+      });
+      ngbModalRef.componentInstance.templates = templates ;
+      ngbModalRef.componentInstance.onSaveTemplate.subscribe(async (formData) => {
+        ngbModalRef.close();
+        await firstValueFrom(this.invoiceService.addTemplate(formData));
+        this.toastService.showSuccess("Will add the template");
+      });
+      ngbModalRef.componentInstance.onDeleteTemplate.subscribe(async (template) => {
+        ngbModalRef.close();
+        await firstValueFrom(this.invoiceService.deleteTemplate(template));
+        this.toastService.showSuccess("Will delete the template");
+      });
+    })
+
   }
 
   setSort(propertyName: string) {

diff --git a/src/app/features/invoice/invoice.module.ts b/src/app/features/invoice/invoice.module.ts
@@ -10,6 +10,7 @@ import { NgbDatepickerModule, NgbDropdownModule, NgbPaginationModule, NgbNavModu
 import { InvoiceTableResultComponent } from './invoice-table-result/invoice-table-result.component';
 import { NgxFileDropModule } from 'ngx-file-drop';
 import { TemplateComponent } from './template/template.component';
+import { AutosizeModule } from 'ngx-autosize';
 
 @NgModule({
   declarations: [
@@ -25,6 +26,7 @@ import { TemplateComponent } from './template/template.component';
     FontAwesomeModule,
     ReactiveFormsModule,
     NgbDatepickerModule,
+    AutosizeModule,
     NgbTooltipModule,
     NgbDropdownModule,
     FormsModule,

diff --git a/src/app/features/invoice/template/template.component.html b/src/app/features/invoice/template/template.component.html
@@ -10,7 +10,7 @@
       <li ngbNavItem>
         <a ngbNavLink>Current Templates</a>
         <ng-template ngbNavContent>
-          <ng-container *ngIf="templates$ | async as templates">
+          <ng-container *ngIf="templates">
             <ul class="list-group mt-2" id="templates">
               <li class="list-group-item" *ngFor="let t of templates">
                 <div class="d-flex justify-content-between">

diff --git a/src/app/features/invoice/template/template.component.ts b/src/app/features/invoice/template/template.component.ts
@@ -15,7 +15,7 @@ import { WindowRefService } from '@core/service/window.service';
 })
 export class TemplateComponent implements OnInit {
   @Input()
-  templates$: Observable<InvoiceFreemarkerTemplate[]>;
+  templates: InvoiceFreemarkerTemplate[];
 
   @Output()
   onSaveTemplate: EventEmitter<FormData> = new EventEmitter<FormData>();