Add descriptions to categories

src/app/categories/category-details/category-details.component.css

@@ -0,0 +1,4 @@
+.category-description {
+    padding: 0 1em;
+    white-space: pre-wrap;
+}

src/app/categories/category-details/category-details.component.html

@@ -1,3 +1,4 @@
+<p class="category-description" *ngIf="category && category.description">{{ category.description }}</p>
 <app-transaction-list *ngIf="budgetId && category" [budgetId]="budgetId" [categoryId]="category.id"></app-transaction-list>
 <a mat-fab routerLink="/budgets/{{ budgetId }}/transactions/new">
     <mat-icon aria-label="Add">add</mat-icon>

src/app/categories/category-form/category-form.component.html

@@ -5,6 +5,9 @@
   <mat-form-field (keyup.enter)="doAction()">
     <input matInput [(ngModel)]="currentCategory.title" placeholder="Name" required>
   </mat-form-field>
+  <mat-form-field (keyup.enter)="doAction()">
+    <textarea matInput [(ngModel)]="currentCategory.description" placeholder="Description"></textarea>
+  </mat-form-field>
   <mat-form-field (keyup.enter)="doAction()">
     <input matInput type="text" [(ngModel)]="currentCategory.amount" placeholder="Amount" required currencyMask>
   </mat-form-field>

src/app/categories/category-form/category-form.component.ts

@@ -33,6 +33,7 @@ export class CategoryFormComponent implements OnInit {
         this.currentCategory.id,
         {
           name: this.currentCategory.title,
+          description: this.currentCategory.description,
           amount: this.currentCategory.amount * 100,
           expense: this.currentCategory.expense,
           archived: this.currentCategory.archived
@@ -43,6 +44,7 @@ export class CategoryFormComponent implements OnInit {
       observable = this.twigsService.createCategory(
         this.budgetId,
         this.currentCategory.title,
+        this.currentCategory.description,
         this.currentCategory.amount * 100,
         this.currentCategory.expense
       );

src/app/categories/category.ts

@@ -1,6 +1,7 @@
 export class Category {
   id: number;
   title: string;
+  description: string;
   amount: number;
   expense: boolean;
   archived: boolean;

src/app/shared/twigs.http.service.ts

@@ -116,9 +116,10 @@ export class TwigsHttpService implements TwigsService {
     return this.http.get<Category>(`${this.apiUrl}/categories/${id}`, this.options);
   }
 
-  createCategory(budgetId: number, name: string, amount: number, isExpense: boolean): Observable<Category> {
+  createCategory(budgetId: number, name: string, description: string, amount: number, isExpense: boolean): Observable<Category> {
     const params = {
       'title': name,
+      'description': description,
       'amount': amount,
       'expense': isExpense,
       'budgetId': budgetId

src/app/shared/twigs.local.service.ts

@@ -153,10 +153,11 @@ export class TwigsLocalService implements TwigsService {
     });
   }
 
-  createCategory(budgetId: number, name: string, amount: number, isExpense: boolean): Observable<Category> {
+  createCategory(budgetId: number, name: string, description: string, amount: number, isExpense: boolean): Observable<Category> {
     return Observable.create(subscriber => {
       const category = new Category();
       category.title = name;
+      category.description = description;
       category.amount = amount;
       category.expense = isExpense;
       category.budgetId = budgetId;

src/app/shared/twigs.service.ts

@@ -25,7 +25,7 @@ export interface TwigsService {
   // Categories
   getCategories(budgetId?: number, count?: number): Observable<Category[]>;
   getCategory(id: number): Observable<Category>;
-  createCategory(budgetId: number, name: string, amount: number, isExpense: boolean): Observable<Category>;
+  createCategory(budgetId: number, name: string, description: string, amount: number, isExpense: boolean): Observable<Category>;
   updateCategory(budgetId: number, id: number, changes: object): Observable<Category>;
   deleteCategory(budgetId: number, id: number): Observable<void>;