JSFiddle - React, Tailwind, and code Playground

by samur3

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.5/ui-grid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.5/ui-grid.min.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<div ng-app="my-app">
  <div ng-controller="homeCtrl as vm">
    <div ui-grid="vm.gridOptions" ui-grid-edit />
  </div>

  <div ng-controller="ModalDemoCtrl as vm1">
    <button type="button" class="btn btn-default" ng-click="vm1.open()">Open me!</button>

    <script type="text/ng-template" id="myModalContent.html">
      <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
      </div>
      <div class="modal-body">
        <ul>
          <li ng-repeat="item in items">
            <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
          </li>
        </ul>
        Selected: <b>{{ selected.item }}</b>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
      </div>
    </script>

  </div>

</div>
  </body>

CSS

.busy {
  color: red;
}

JavaScript

angular.module('my-app', ['ui.grid', 'ui.grid.edit', 'ui.bootstrap', 'ngAnimate']);
angular.module('my-app').directive('uiSelectWrap', uiSelectWrap);
angular.module('my-app').controller('homeCtrl', function($scope, $rootScope) {
    const dropDownOptions = [{
      value: 0,
      label: 'None'
    }, {
      value: 1,
      label: 'ID'
    }, {
      value: 2,
      label: 'DisplayName'
    }, {
      value: 3,
      label: 'Location'
    }, {
      value: 4,
      label: 'Password'
    }, {
      value: 5,
      label: 'UserName'
    }];

    var requiredValues = ['ID', 'DisplayName', 'Location'];

    function contains(arr, obj) {
      var i = arr.length;
      while (i--) {
        if (arr[i] === obj) {
          return true;
        }
      }
      return false;
    }

    this.ds = dropDownOptions.map(obj => Object.assign({}, obj, {
      selectedBy: null
    }));
    this.gridData = [{
      name: 'Identity',
      something: ''
    }, {
      name: 'First Name',
      something: ''
    }, {
      name: 'Last Name',
      something: ''
    }, {
      name: 'Address',
      something: ''
    }, {
      name: 'Password',
      something: ''
    }, {
      name: 'Residency',
      something: ''
    }, ];

    this.updateSelection = (row) => {

      // debugger;
      // deselect previous value
      const toDeselect = this.ds.find(obj => obj.selectedBy === row);
      toDeselect && (toDeselect.selectedBy = null);

      // if a valid option was chosen
      if (row.selected) {


        // find the new value to select
        const toSelect = this.ds.find(obj => obj.value === +row.selected);

        if (toSelect) {
          $rootScope.selectValue = toSelect.label;
          // if the value was selected by another control, reset this control's selection to empty
          toSelect.selectedBy && (toSelect.selectedBy.selected = null);
          // select a value
          //debugger;
          if (row.selected !== "0" && (contains(requiredValues,...