crud-modal.html

<template>
  <div id="details" class="ui small modal">
    <div class="header">
      <h4>${heading}</h4>
    </div>
    <div class="content">
      <div class="description">
        <compose view-model.bind="content" model.bind="record"></compose>
      </div>
    </div>
    <div class="actions">
      <div class="field">
        <div class="ui small primary labeled icon button" click.delegate="submit()">
          <i class="user icon"></i> Add
        </div>
      </div>
    </div>
  </div>
</template>

crud-modal.js

import {inject, bindable} from 'aurelia-framework';
import $ from 'jquery';

@inject(Element)
export class CrudModal {
  @bindable api;
  @bindable heading;
  @bindable content;
  @bindable record;
  @bindable method;

  constructor(element) {
    this.element = element;
  }

  attached() {
    this.modal = $('.modal', this.element);
  }

  show() {
    this.modal.modal('show');
  }

  submit() {
    this.api[this.method](this.record);
  }
}

rest-api.js

import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';

@inject(HttpClient)
export class RestApi {
  constructor(http) {
    this.baseUrl = "http://localhost:3000/api";
    this.http = http;

    var self = this;
    this.template = {
      create: function(record) {
        return self.http.post(self.baseUrl + '/template', record);
      },
      update: function(record) {
        return self.http.put(self.baseUrl + '/template', record);
      },
      list: function() {
        return self.http.get(self.baseUrl + '/template');
      }
    };
  }
}

template-detail.html

<template>
  <form class="ui form">
    <div class="field">
      <label>Source</label>
      <input type="text" value.bind="record.source" placeholder="NFS Path">
    </div>
    <div class="field">
      <label>Name</label>
      <input type="text" value.bind="record.name" placeholder="w7-hive-template">
    </div>
    <div class="ui selection dropdown">
      <div class="default text">Format</div>
      <i class="dropdown icon"></i>
      <div class="menu">
        <div class="item" repeat.for="format of formats">
          ${format}
        </div>
      </div>
    </div>
  </form>
</template>

template-detail.js

import {inject, bindable} from 'aurelia-framework';
import $ from 'jquery';

@inject(Element)
export class TemplateDetail {
  @bindable record;
  formats = [
    'Auto Detect',
    'VMDK (VMWare)',
    'VHD (HyperV)',
    'VDI (VirtualBox)',
    'qcow2 (Xen)',
    'Raw'
  ];

  constructor(element) {
    this.element = element;
  }

  activate(params, routeConfig) {
    this.record = params;
  }

  attached() {
    $('.dropdown', this.element).dropdown();
  }
}

templates.html

<template>
  <section>
    <div class="two fields">
      <div class="ui small green labeled icon button" click.delegate="add()">
        <i class="plus icon"></i> Add Template
      </div>
      <div class="ui icon input" style="float:right">
        <input type="text" placeholder="Search templates...">
        <i class="users icon"></i>
      </div>
    </div>

    <table class="ui compact striped table">
      <thead>
        <tr>
          <th></th>
          <th>Name</th>
          <th>Status</th>
          <th>Disk Size</th>
          <th>Used Space</th>
        </tr>
      </thead>
      <tbody>
        <tr repeat.for="template of templates">
          <td class="collapsing">
            <div class="tiny icon ui button" click.delegate="$parent.edit(template)">
              <i class="edit icon"></i>
            </div>
          </td>
          <td>${template.name}</td>
          <td>${template.status}</td>
          <td>${template.diskSize}</td>
          <td>${template.usedSpace}</td>
        </tr>
      </tbody>
    </table>

    <require from="./crud-modal"></require>
    <crud-modal ref.view-model="templateForm" record.bind="selected" api.bind="api.template"
                content="publishing/templates/template-detail">
    </crud-modal>

  </section>
</template>

templates.js

import {inject} from 'aurelia-framework';
import {RestApi} from './rest-api';

@inject(RestApi)
export class Templates {
  templates = [];
  selected = {};

  constructor(api) {
    this.api = api;
  }

  activate() {
    this.api.template.list().then(response => {
      this.templates = JSON.parse(response.response);
    });
  }

  add() {
    this.selected = {};
    this.templateForm.heading = "Add Template";
    this.templateForm.method = "create";
    this.templateForm.show();
  }

  edit(record) {
    this.selected = record;
    this.templateForm.heading = "Edit Template";
    this.templateForm.method = "update";
    this.templateForm.show();
  }
}