Oracle JET Base

Fiddle with Oracle JET

by dougiei

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>
<div class="oj-offcanvas-outer-wrapper">
  <!--    had to cheat with a z-index to get the drawer to come up over top of the form elements-->
  <div id="wrapper" class="oj-offcanvas-inner-wrapper" >

    <!-- inner start offcanvas -->
    <div id="innerDrawer" class="oj-offcanvas-top oj-panel oj-panel-alt2" style="z-index: 9999; outline: none">

      <div class="demo-offcanvas-close">
        <button class="oj-button-sm" aria-label="close" role="button" data-bind="click: closeInner,
                                     ojComponent: {component:'ojButton', 
                                     label: 'Close inner offcanvas', 
                                     chroming: 'half',
                                     display: 'icons', 
                                     icons: {start: 'oj-fwk-icon-cross oj-fwk-icon'}}">
        </button>
      </div>
      <div>Confirmation: <strong data-bind="text: employee"></strong> is assigned to <strong data-bind="text: assignment"></strong> at <strong data-bind="text: rate"></strong>/hour.


      </div>
    </div>



    <h1>Employee New Assignment</h1>

    <hr/>

    <div id="form-container" class="oj-form-layout">
      <div class="oj-form oj-sm-odd-cols-12 oj-md-odd-cols-4 oj-md-labels-inline">

        <div class="oj-flex">
          <div class="oj-flex-item">
            <label for="combobox3">My employees</label>
          </div>
          <div class="oj-flex-item">
            <input id="combobox3" data-bind="ojComponent: {
                            component: 'ojCombobox', 
                            required: true,
                            options: employees,
                            value: employee,
                            rootAttributes: {style:'max-width:20em'}}" />
          </div>
        </div>

        <div class="oj-flex">
          <div class="oj-flex-item">
            <label for="combobox2">New...

CSS

@import url('//rawgit.com/oracle/oraclejet/2.0.1/dist/css/alta/oj-alta-min.css');
.demo-offcanvas-close {
  float: right;
  margin-right: -7px;
  margin-top: -7px;
}
.oj-offcanvas-top {
  outline: none;
  border-bottom: 4px solid #7EBAF7
}

JavaScript

require(['knockout',
  'ojs/ojcore',
  'jquery',
  'ojs/ojknockout',
  'ojs/ojbutton', 'ojs/ojinputtext', 'ojs/ojinputnumber',
  'ojs/ojoffcanvas', 'ojs/ojselectcombobox'
], function(ko, oj, $) {
  'use strict';

  var ViewModel = function() {
    var self = this;

    //number converter for alert message because i couldn't get the dollar amount to line up except as a <strong>
    var converterFactory = oj.Validation.converterFactory("number");
    var options = {
      style: "currency",
      currency: "USD",
      minimumIntegerDigits: 1
    };
    self.converter = converterFactory.createConverter(options);

    //LOVs for my employees
    self.employees = ko.observableArray([{
      value: 'Sam Malone',
      label: 'Sam Malone'
    }, {
      value: 'Carla Torelli',
      label: 'Carla Torelli'
    }, {
      value: 'Woody Boyd',
      label: 'Woody Boyd'
    }, {
      value: 'Rebecca Howe',
      label: 'Rebecca Howe'
    }, {
      value: 'Diane Chambers',
      label: 'Diane Chambers'
    }, {
      value: 'Ernie Pantusso',
      label: 'Ernie Pantusso'
    }]);

    //selected choices from form
    self.employee = ko.observable();
    self.assignment = ko.observable();
    self.hourlyRate = ko.observable();

    //formatted string with dollar sign
    self.rate = ko.computed(function() {
      return self.converter.format(self.hourlyRate() ? self.hourlyRate() : 0);
    });

    //LOVs for new assignment
    self.groupData = ko.observableArray([{
      label: "Front of house",
      children: [{
        value: "Server",
        label: "Server"
      }, {
        value: "Server trainee",
        label: "Server trainee"
      }, {
        value: "Host/Hostess",
        label: "Host/Hostess"
      }, {
        value: "Bartender",
        label: "Bartender"
      }]
    }, {
      label: "Kitchen",
      children: [{
        value: "Line Cook",
        label: "Line Cook"
      }, {
        value: "Dishwasher",
        label: "Dishwasher"
      }, {
       ...