Grid example

app.html

<template>
  <table>
    <thead>
      <tr>
        <th>Member Id</th>
        <th>Id Seq</th>
        <th>Identity Value</th>
        <th>Source Name</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr repeat.for="row of rows">
        <td>
          <input type="text" value.bind="row.memberId" if.bind="!row.id || row.isEdit" class="${row.memberIdIsValid ? '' : 'invalid'}" title.bind="row.memberIdIsValid ? 'Enter a member id' : 'Member id entered is invalid'" />
          <div if.bind="row.id && !row.isEdit">${row.memberId}</div>
        </td>
        <td>
          <input type="text" value.bind="row.sequenceId" if.bind="!row.id || row.isEdit" class="${row.sequenceIdIsValid ? '' : 'invalid'}" title.bind="row.sequenceIdIsValid ? 'Enter a sequence id' : 'Sequence id entered is invalid'" />
          <div if.bind="row.id && !row.isEdit">${row.sequenceId}</div>
        </td>
        <td>
          <input type="text" value.bind="row.identityValue" if.bind="!row.id || row.isEdit" class="${row.identityValueIsValid ? '' : 'invalid'}" title.bind="row.identityValueIsValid ? 'Enter a identity value' : 'Identity value entered is invalid'" />
          <div if.bind="row.id && !row.isEdit">${row.identityValue}</div>
        </td>
        <td>
          <input type="text" value.bind="row.sourceName" if.bind="!row.id || row.isEdit" class="${row.sourceNameIsValid ? '' : 'invalid'}" title.bind="row.sourceNameIsValid ? 'Enter a source name' : 'Source name entered is invalid'" />
          <div if.bind="row.id && !row.isEdit">${row.sourceName}</div>
        </td>
        <td>
          <button if.bind="!row.id" click.delegate="createMemberIdentity(row)">Add</button>
          <button if.bind="row.id && row.isEdit" click.delegate="updateMemberIdentity(row)">Update</button>
          <button if.bind="row.id && !row.isEdit" click.delegate="editMemberIdentity(row)">Edit</button>
          <button if.bind="row.id" click.delegate="deleteMemberIdentity(row)">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

app.js

import { inject } from 'aurelia-framework';
import { MemberIdentityService } from './memberIdentityService';

@inject(MemberIdentityService)
export class App {
  rows = [];
  
  constructor(memberIdentityService) {
    this.memberIdentityService = memberIdentityService;
    memberIdentityService.get()
                         .then(memberIdentities => this.updateRows(memberIdentities))
                         .catch(foo => console.log(foo));
  }
  
  createMemberIdentity(row) {
    if (!this.rowIsValid(row)) {
      return;
    }
    
    this.memberIdentityService
        .create(row)
        .then(memberIdentities => this.updateRows(memberIdentities))
        .catch(foo => console.log(foo));
  }
  
  editMemberIdentity(row) {
    row.isEdit = true;
    row.memberIdIsValid = true;
    row.sequenceIdIsValid = true;
    row.identityValueIsValid = true;
    row.sourceNameIsValid = true;
  }

  updateMemberIdentity(row) {
    if (!this.rowIsValid(row)) {
      return;
    }
    
    row.isEdit = false;
    
    this.memberIdentityService
        .update(row)
        .then(memberIdentities => this.updateRows(memberIdentities))
        .catch(foo => console.log(foo));
  }
  
  deleteMemberIdentity(row) {
    this.memberIdentityService
        .delete(row)
        .then(memberIdentities => this.updateRows(memberIdentities))
        .catch(foo => console.log(foo));
  }
  
  rowIsValid(row) {
    let rowIsValid = true;
    row.memberIdIsValid = true;
    row.sequenceIdIsValid = true;
    row.identityValueIsValid = true;
    row.sourceNameIsValid = true;
    
    if (!row.memberId || row.memberId === '') {
      rowIsValid = false;
      row.memberIdIsValid = false;
    }
    
    if (!row.sequenceId || row.sequenceId === '') {
      rowIsValid = false;
      row.sequenceIdIsValid = false;
    }
    
    if (!row.identityValue || row.identityValue === '') {
      rowIsValid = false;
      row.identityValueIsValid = false;
    }
    
    if (!row.sourceName || row.sourceName === '') {
      rowIsValid = false;
      row.sourceNameIsValid = false;
    }
    
    return rowIsValid;
  }

  updateRows(rows) {
    this.rows = [{ memberIdIsValid: true, sequenceIdIsValid: true, identityValueIsValid: true, sourceNameIsValid: true }].concat(rows);
  }
}

index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      .inline {
        display: inline;
      }
      
      .invalid {
        border-color: red;
      }
    </style>
  </head>
  <body aurelia-app="main">
    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

main.js

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  aurelia.start().then(() => aurelia.setRoot());
}

memberIdentityService.js

export class MemberIdentityService {
  memberIdentities;
  
  constructor() {
    this.memberIdentities = [{id: 1, memberId: 'memberId', sequenceId: 'sequenceId', identityValue: 'identityValue', sourceName: 'sourceName', isEdit: false }];
  }
  
  get() {
    let that = this;
    return new Promise((resolve, reject) => resolve(that.memberIdentities));
  }
  
  create(memberIdentity) {
    let that = this;
    let sortedMemberIdentities = that.memberIdentities.sort(function(r1, r2) {
      if (r2.id < r1.id) {
        return -1;
      } else if (r1.id < r2.id) {
        return 1;
      } else {
        return 0;
      }
    });
    
    memberIdentity.id = sortedMemberIdentities[0] ? sortedMemberIdentities[0].id + 1 : 1;
    that.memberIdentities.push(memberIdentity);
    
    return new Promise((resolve, reject) => resolve(that.memberIdentities));
  }
  
  update(memberIdentity) {
    let that = this;
    let index = that.memberIdentities.findIndex(function(r) {
      return memberIdentity.id === r.id;
    });
    
    that.memberIdentities[index] = memberIdentity;
    return new Promise((resolve, reject) => resolve(that.memberIdentities));
  }
  
  delete(memberIdentity) {
    let that = this;
    that.memberIdentities = that.memberIdentities.filter(function(r) {
      return memberIdentity.id !== r.id;
    });
    
    return new Promise((resolve, reject) => resolve(that.memberIdentities));
  }
}