accountant-ui/src/operations/operationEdit.component.ts

// vim: set tw=80 ts=2 sw=2 sts=2 :

import { Location } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

import { Logger } from '@nsalaun/ng-logger';
import { ToastrService } from 'ngx-toastr';

import { Operation } from './operation';
import { OperationService } from './operation.service';
import { OperationFormComponent } from './operationForm.component';

@Component({
  selector: 'operation-new',
  template: `
<div>
  <div class="row">
    <form novalidate (keyup.enter)="submit()" #form="ngForm">
      <div class="form-group">
        <label for="operation-date">Date</label>

        <input class="form-control"
          [class.has-danger]="operationDate.errors"
          id="operation-date" name="operationDate"
          [(ngModel)]="operation.operation_date" #operationDate="ngModel"
          [textMask]="{mask: dateMask}"
          placeholder="Operation date" required>

        <div class="help-block text-danger" *ngIf="operationDate.errors">
          <small class="form-text" *ngIf="operationDate.errors.required">
            The operation date is required.
          </small>
        </div>
      </div>

      <div class="form-group">
        <label for="label">Label</label>

        <input class="form-control"
          [class.has-danger]="label.errors"
          id="label" name="label"
          [(ngModel)]="operation.label" #label="ngModel"
          placeholder="Label" required>

        <div class="help-block text-danger" *ngIf="label.errors">
          <small class="form-text" *ngIf="label.errors.required">
            The operation label is required.
          </small>
        </div>
      </div>

      <div class="form-group">
        <label for="value">Montant</label>

        <input class="form-control"
          [class.has-errors]="value.errors"
          id="value" name="value"
          [(ngModel)]="operation.value" #value="ngModel"
          type="number" placeholder="Value" required>

        <div class="help-block text-danger" *ngIf="value.errors">
          <small class="form-text" *ngIf="value.errors.required">
            The operation value is required.
          </small>
        </div>
      </div>

      <div class="form-group">
        <label for="category">Catégorie</label>

        <input class="form-control"
          [class.has-errors]="category.errors"
          id="category" name="category"
          [(ngModel)]="operation.category" #category="ngModel"
          placeholder="Category" required>

        <div class="help-block text-danger" *ngIf="category.errors">
          <small class="form-text" *ngIf="category.errors.required">
            The operation category is required.
          </small>
        </div>
      </div>

      <button class="btn btn-primary" [disabled]="!form.valid" (click)="submit()">
        Save
      </button>

      <button class="btn btn-default" (click)="cancel()">
        Cancel
      </button>
    </form>
  </div>
</div>
  `
})
export class OperationEditComponent {
  public operation = new Operation();

  //dateMask = [/\d{4}/, '-', /0[1-9]|1[0-2]/, '-', /[0-2]\d|3[0-1]/];
  dateMask = ['2', '0', /\d/, /\d/, '-', /[0-1]/, /\d/, '-', /[0-3]/, /\d/];

  constructor(
    private location: Location,
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private logger: Logger,
    private toastrService: ToastrService,
    private operationService: OperationService
  ) {}

  ngOnInit() {
    let operationId = this.activatedRoute.snapshot.paramMap.get('operationId');

    if (operationId) {
      // Load Operation
      this.operationService.get(
        +operationId
      ).subscribe((operation: Operation) => {
        this.operation = operation;

        this.logger.info(operation);
      });
    } else {
      let accountId = this.activatedRoute.snapshot.paramMap.get('accountId');

      this.operation.account_id = +accountId;
    }
  }

  submit(): void {
    this.save(this.operation);
  }

  /*
   * Save an operation and return a promise.
   */
  save(operation) {
    operation.confirmed = true;

    return this.operationService.create(operation).subscribe(
      (operation) => {
        this.toastrService.success('Operation #' + operation.id + ' saved.');

        this.location.back();
      }, (result) => {
        this.toastrService.error(
          'Error while saving operation: ' + result.message
        );
      }
    );
  }

  cancel(): void {
    this.location.back();
  }
}