editable_ng2.js

import {Component, View, Input, Output, EventEmitter} from 'angular2/core';
import {NgFor, NgClass, NgIf} from 'angular2/common';
import {ROUTER_DIRECTIVES} from 'angular2/router';
import template from './editable.html';
import styles from './editable.css';
import * as alerts from 'Utils/alerts'

const headers = {
  'Authorization': (()=>getJWT())(),
  'Accept': 'application/json, text/plain, */*',
  'Content-Type': 'application/json',
}

@Component({ selector: 'editable'})
@View({template, styles: [styles],  directives: [ROUTER_DIRECTIVES, NgFor, NgClass]})
export class Editable {
  @Input() text = String(); // what we display;
  @Input() uri = String();
  @Input() key = String(); // key to send to the server, ex: "sla", "notes"
  @Input() placeholder = String();
  isEditing = false;
  initVal = '';
  constructor() {}
  open(e){
    e.preventDefault();
    this.initVal = this.text;
    this.isEditing = !this.isEditing;
  }
  async save(e){
    e.preventDefault();
    let body = {
      [this.key]: this.text,
    };
    body = JSON.stringify(body);
    const response = await fetch(`${this.uri}`, { method: 'PATCH', headers, body });
    if(response.status !== 200){
      alerts.error();
    }
    let data = await response.json();
    alerts.success();
    this.isEditing = !this.isEditing;
  }
  cancel(e){
    e.preventDefault();
    this.isEditing = !this.isEditing;
    this.text = this.initVal;
  }
}