JSFiddle - React, Tailwind, and code Playground

by Piara Singh

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<div ng-app="paymentsApp" class="application">
    <div class="title-bar">
         <h1 id="paymentsApp-title">Payments-o-matic</h1>
    </div>
    <div class="container" ng-controller="PaymentsController">
        <div class="list">
            <div ng-repeat="payment in payments" id="paymentsApp-list-{{$index}}">
            <a ng-class="isSelected(payment.id)" ng-click="selectPayment(payment.id)" href="">
                <div class="fleft">{{payment.counterparty}}</div>
                <div class="fright">{{payment.valueDate}}</div>
                </a>
            </div>
        </div>
        <div ng-hide="selectedPayment">
            <button class="app-button" ng-click="createPayment()" id="paymentsApp-btn-new">Create new payment</button>
        </div>
        <div ng-show="selectedPayment" class="details" id="paymentsApp-detailsForm">
            <div class="details-container">
                <div class="detail-component">
                    <label>Counterparty</label>
                    <input ng-minlength="1" ng-maxlength="50" ng-pattern="/[A-Za-z]+/" ng-model="selectedPayment.counterparty" id="paymentsApp-inpt-cpty" />
                </div>
                <div class="detail-component">
                    <label>Value Date</label>
                    <input ng-model="selectedPayment.valueDate" id="paymentsApp-inpt-date" />
                </div>
                <div class="detail-component">
                    <label>Credit Account</label>
                    <input ng-model="selectedPayment.creditAccount" id="paymentsApp-inpt-acc" />
                </div>
                <div class="detail-component">
                    <label>Amount</label>
                    <input ng-model="selectedPayment.amount" id="paymentsApp-inpt-amt" />
                </div>
                <div class="detail-component">
                    <label>Currency</label>
             ...

CSS

.application {
    background-color:green;
    bottom: 0;
    display: table;
    font-family:"Segoe UI Light", Georgia, Serif;
    font-size: 1rem;
    height: 100%;
    left: 0;
    min-width: 37.5rem;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
.title-bar {
    background-color: #000000;
    color: white;
    display: table-row;
    font-weight: normal;
    height: 0;
    margin: 0;
}
.title-bar * {
    padding:1rem;
}
.container {
    background-color: white;
    display: table-row;
    height: 100%;
    width: 100%;
}
.list {
    border-right: solid 5px black;
    float: left;
    height: 100%;
    max-width: 25rem;
    min-width: 12.5rem;
    width: 30%;
}

.list a{
    display: block;
    height: 3rem;
    padding: 0.5rem;
    color : black;
}

.list a.active{
  background-color: cyan;
}

.list > div {
    border-bottom: solid 1px black;
    font-weight: bold;
}
.list > div > div {
    float:left;
    width: 50%;
}
.list > div > div:last-child {
    text-align: right;
}

.fleft {
  float: left;
}

.fright {
  float: right;
}

.details {
  float: right;
  width: 60%;
}
.buttons-container {
  margin: 20px auto;
}
.details-container {
  margin: 20px;
}
.detail-component {
  margin: 2px;
}
label, input {
  display: inline-block;
  margin: auto 10px;
}

input {
  float: right;
}

.app-button {
   padding: 5px 10px;
   color: white;
   background: black;
   border: 1px solid;
   margin: 2px;
 }

JavaScript

function PaymentsController(scope) {
    scope.payments = [{
        id: 1,
        counterparty: "Wood-u-like",
        amount: "2,240.00",
        currency: "GBP",
        valueDate: "22/10/2015",
        creditAccount: "68794832"
    }, {
        id: 2,
        counterparty: "Bag o' nails",
        amount: "1,500.00",
        currency: "GBP",
        valueDate: "22/10/2015",
        creditAccount: "30921782"
    }, {
        id: 3,
        counterparty: "Fatcat Investors",
        amount: "22,000.00",
        currency: "USD",
        valueDate: "31/10/2015",
        creditAccount: "44236712"
    }];
    
    scope.selectedPayment = null;
    
    scope.isSelected = function( id ){
        return scope.selectedPayment && scope.selectedPayment.id === id ? 'active' : '';
    }
    
    scope.selectPayment = function( id ){
        var i;
      
      for ( i = 0; i < scope.payments.length; i++ ){
        if ( scope.payments[i].id === id ){
                scope.selectedPayment = angular.copy( scope.payments[ i ] );
          //alert( JSON.stringify(scope.selectedPayment) )
          break;
        }
      }
    }
    
    scope.savePayment = function(){
        if ( scope.save ){
        scope.payments.push( scope.selectedPayment );
        scope.save = false;
      }else{
                scope.payments[ scope.selectedPayment.id - 1 ] =                scope.selectedPayment;
      }
      scope.selectedPayment = null;
    }
    
    scope.createPayment = function(){
         scope.selectedPayment = {};
       scope.save = true;
    }
    scope.deletePayment = function(){
    	scope.payments.pop(scope.selectedPayment);
      scope.save = false;
      scope.selectedPayment = null;
    }
}

angular.module("paymentsApp", [])
    .controller("PaymentsController", ["$scope", PaymentsController]);