Improved and simplified UI further.

src/main/webdemo/js/Deal.js

@@ -14,6 +14,20 @@ let Deal = function(dealViewModel) {
         _.assign(fixedLeg.fixedRate, fixedRateViewModel);
 
         fixedLeg.fixedRate = Number(fixedLeg.fixedRate) / 100;
+        fixedLeg.notional.token = common.baseCurrency;
+        fixedLeg.effectiveDate = formatDateForNode(common.effectiveDate);
+        fixedLeg.terminationDate = formatDateForNode(common.terminationDate);
+        fixedLeg.fixedRate = { ratioUnit: { value: fixedLeg.fixedRate } };
+        fixedLeg.dayCountBasisDay = dayCountBasisLookup[fixedLeg.dayCountBasis].day;
+        fixedLeg.dayCountBasisYear = dayCountBasisLookup[fixedLeg.dayCountBasis].year;
+        delete fixedLeg.dayCountBasis;
+
+        floatingLeg.notional.token = common.baseCurrency;
+        floatingLeg.effectiveDate = formatDateForNode(common.effectiveDate);
+        floatingLeg.terminationDate = formatDateForNode(common.terminationDate);
+        floatingLeg.dayCountBasisDay = dayCountBasisLookup[floatingLeg.dayCountBasis].day;
+        floatingLeg.dayCountBasisYear = dayCountBasisLookup[floatingLeg.dayCountBasis].year;
+        delete floatingLeg.dayCountBasis;
 
         common.tradeID = tradeId;
         common.eligibleCurrency = common.baseCurrency;
@@ -21,21 +35,8 @@ let Deal = function(dealViewModel) {
         common.threshold.token = common.baseCurrency;
         common.minimumTransferAmount.token = common.baseCurrency;
         common.rounding.token = common.baseCurrency;
-
+        delete common.effectiveDate;
-        fixedLeg.notional.token = common.baseCurrency;
+        delete common.terminationDate;
-        fixedLeg.effectiveDate = formatDateForNode(fixedLeg.effectiveDate);
-        fixedLeg.terminationDate = formatDateForNode(fixedLeg.terminationDate);
-        fixedLeg.fixedRate = { ratioUnit: { value: fixedLeg.fixedRate } };
-        fixedLeg.dayCountBasisDay = dayCountBasisLookup[fixedLeg.dayCountBasis].day;
-        fixedLeg.dayCountBasisYear = dayCountBasisLookup[fixedLeg.dayCountBasis].year;
-        delete fixedLeg.dayCountBasis;
-
-        floatingLeg.notional.token = common.baseCurrency;
-        floatingLeg.effectiveDate = formatDateForNode(floatingLeg.effectiveDate);
-        floatingLeg.terminationDate = formatDateForNode(floatingLeg.terminationDate);
-        floatingLeg.dayCountBasisDay = dayCountBasisLookup[floatingLeg.dayCountBasis].day;
-        floatingLeg.dayCountBasisYear = dayCountBasisLookup[floatingLeg.dayCountBasis].year;
-        delete floatingLeg.dayCountBasis;
 
         let json = {
             fixedLeg: fixedLeg,

src/main/webdemo/js/app.js

@@ -18,9 +18,7 @@ let fixedLegModel = {
         quantity: 2500000000
     },
     paymentFrequency: "Annual",
-    effectiveDate: new Date(2016, 3, 11),
     effectiveDateAdjustment: null,
-    terminationDate: new Date(2026, 3, 11),
     terminationDateAdjustment: null,
     fixedRate: "1.676",
     dayCountBasis: "30/360",
@@ -84,6 +82,8 @@ let fixedRateViewModel = {
 
 let commonViewModel = {
     baseCurrency: "EUR",
+    effectiveDate: new Date(2016, 3, 11),
+    terminationDate: new Date(2026, 3, 11),
     eligibleCreditSupport: "Cash in an Eligible Currency",
     independentAmounts: {
         quantity: 0

src/main/webdemo/js/utils/semantic.js

@@ -5,6 +5,7 @@ define(['jquery', 'semantic'], ($, semantic) => {
         init: () => {
             $('.ui.accordion').accordion();
             $('.ui.dropdown').dropdown();
+            $('.ui.sticky').sticky();
         }
     };
 });

src/main/webdemo/view/create-deal.html

@@ -4,8 +4,11 @@
         <div class="ui text loader">Loading</div>
     </div>
     <h2>New Deal</h2>
-    <form class="ui form" ng-submit="createDeal()">
+    <form id="deal-form" class="ui form" ng-submit="createDeal()">
         <div class="ui grid">
+            <div class="sixteen wide column">
+                <input type="submit" class="ui submit primary button fluid"/>
+            </div>
             <div class="sixteen wide column">
                 <div class="field">
                     <label>Base Currency</label>
@@ -15,6 +18,14 @@
                         <option value="GBP">GBP</option>
                     </select>
                 </div>
+                <div class="field">
+                    <label>Effective Date</label>
+                    <input type="date" name="effectiveDate" ng-model="deal.common.effectiveDate"/>
+                </div>
+                <div class="field">
+                    <label>Termination Date</label>
+                    <input type="date" name="terminationDate" ng-model="deal.common.terminationDate"/>
+                </div>
             </div>
             <div class="eight wide column" id="createfixedleg">
                 <h3>Fixed Leg</h3>
@@ -38,14 +49,6 @@
                         <option value="Quarterly">Quarterly</option>
                     </select>
                 </div>
-                <div class="field">
-                    <label>Effective Date</label>
-                    <input type="date" name="effectiveDate" ng-model="deal.fixedLeg.effectiveDate"/>
-                </div>
-                <div class="field">
-                    <label>Termination Date</label>
-                    <input type="date" name="terminationDate" ng-model="deal.fixedLeg.terminationDate"/>
-                </div>
                 <div class="field">
                     <label>Day Count Basis</label>
                     <select class="ui selection dropdown" ng-model="deal.fixedLeg.dayCountBasis">
@@ -113,14 +116,6 @@
                         <option value="SemiAnnual">Semi Annual</option>
                     </select>
                 </div>
-                <div class="field">
-                    <label>Effective Date</label>
-                    <input type="date" name="effectiveDate" ng-model="deal.floatingLeg.effectiveDate"/>
-                </div>
-                <div class="field">
-                    <label>Termination Date</label>
-                    <input type="date" name="terminationDate" ng-model="deal.floatingLeg.terminationDate"/>
-                </div>
                 <div class="field">
                     <label>Day Count Basis</label>
                     <select class="ui selection dropdown" ng-model="deal.floatingLeg.dayCountBasis">

src/main/webdemo/view/deal.html

@@ -70,6 +70,13 @@
                     <td>Effective From</td>
                     <td>{{deal.fixedLeg.effectiveDate}}</td>
                 </tr>
+                <tr class="center aligned">
+                    <td>Fixed Rate</td>
+                    <td>
+                        <span ng-show="!deal.fixedLeg.fixedRate.positive">-</span>
+                        {{deal.fixedLeg.fixedRate.value}}%
+                    </td>
+                </tr>
                 <tr class="center aligned">
                     <td>Terminates</td>
                     <td>{{deal.fixedLeg.terminationDate}}</td>
@@ -105,13 +112,6 @@
                         </div>
                     </td>
                 </tr>
-                <tr class="center aligned">
-                    <td>Fixed Rate</td>
-                    <td>
-                        <span ng-show="!deal.fixedLeg.fixedRate.positive">-</span>
-                        {{deal.fixedLeg.fixedRate.value}}%
-                    </td>
-                </tr>
                 </tbody>
             </table>
         </div>