Formalize modals (#3898)

* Refactor Modal JS into standalone file, remove duplicated JS and HTML

* Finish fixing Bulk-checkout and checkout

build/mix-manifest.json

@@ -13,11 +13,6 @@
   "/css/overrides.css": "/css/overrides.css",
   "/css/skin-blue.css": "/css/skin-blue.css",
   "/vue.js": "/vue.js",
-  "/vue.js.map": "/vue.js.map",
-  "/mix.js.map": "/mix.js.map",
-  "/css/AdminLTE.css.map": "/css/AdminLTE.css.map",
-  "/css/app.css.map": "/css/app.css.map",
-  "/css/overrides.css.map": "/css/overrides.css.map",
   "public/css/dist/all.css": "public/css/dist/all.css",
   "public/js/dist/all.js": "public/js/dist/all.js"
 }

build/mix.js

@@ -1,2 +1,110 @@
-!function(n){function t(e){if(r[e])return r[e].exports;var o=r[e]={i:e,l:!1,exports:{}};return n[e].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};t.m=n,t.c=r,t.i=function(n){return n},t.d=function(n,r,e){t.o(n,r)||Object.defineProperty(n,r,{configurable:!1,enumerable:!0,get:e})},t.n=function(n){var r=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(r,"a",r),r},t.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},t.p="",t(t.s=62)}({6:function(n,t){},62:function(n,t,r){r(9),r(7),r(8),n.exports=r(6)},7:function(n,t){},8:function(n,t){},9:function(n,t){}});
+/******/ (function(modules) { // webpackBootstrap
-//# sourceMappingURL=mix.js.map
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+/******/
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// identity function for calling harmony imports with the correct context
+/******/ 	__webpack_require__.i = function(value) { return value; };
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, {
+/******/ 				configurable: false,
+/******/ 				enumerable: true,
+/******/ 				get: getter
+/******/ 			});
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 62);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 6:
+/***/ (function(module, exports) {
+
+eval("// removed by extract-text-webpack-plugin//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiNi5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL3Jlc291cmNlcy9hc3NldHMvbGVzcy9vdmVycmlkZXMubGVzcz9lNDcxIl0sInNvdXJjZXNDb250ZW50IjpbIi8vIHJlbW92ZWQgYnkgZXh0cmFjdC10ZXh0LXdlYnBhY2stcGx1Z2luXG5cblxuLy8vLy8vLy8vLy8vLy8vLy8vXG4vLyBXRUJQQUNLIEZPT1RFUlxuLy8gLi9yZXNvdXJjZXMvYXNzZXRzL2xlc3Mvb3ZlcnJpZGVzLmxlc3Ncbi8vIG1vZHVsZSBpZCA9IDZcbi8vIG1vZHVsZSBjaHVua3MgPSAxIl0sIm1hcHBpbmdzIjoiQUFBQSIsInNvdXJjZVJvb3QiOiIifQ==");
+
+/***/ }),
+
+/***/ 62:
+/***/ (function(module, exports, __webpack_require__) {
+
+__webpack_require__(9);
+__webpack_require__(7);
+__webpack_require__(8);
+module.exports = __webpack_require__(6);
+
+
+/***/ }),
+
+/***/ 7:
+/***/ (function(module, exports) {
+
+eval("// removed by extract-text-webpack-plugin//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiNy5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL3Jlc291cmNlcy9hc3NldHMvbGVzcy9BZG1pbkxURS5sZXNzP2U4YTYiXSwic291cmNlc0NvbnRlbnQiOlsiLy8gcmVtb3ZlZCBieSBleHRyYWN0LXRleHQtd2VicGFjay1wbHVnaW5cblxuXG4vLy8vLy8vLy8vLy8vLy8vLy9cbi8vIFdFQlBBQ0sgRk9PVEVSXG4vLyAuL3Jlc291cmNlcy9hc3NldHMvbGVzcy9BZG1pbkxURS5sZXNzXG4vLyBtb2R1bGUgaWQgPSA3XG4vLyBtb2R1bGUgY2h1bmtzID0gMSJdLCJtYXBwaW5ncyI6IkFBQUEiLCJzb3VyY2VSb290IjoiIn0=");
+
+/***/ }),
+
+/***/ 8:
+/***/ (function(module, exports) {
+
+eval("// removed by extract-text-webpack-plugin//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiOC5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL3Jlc291cmNlcy9hc3NldHMvbGVzcy9hcHAubGVzcz80OTY1Il0sInNvdXJjZXNDb250ZW50IjpbIi8vIHJlbW92ZWQgYnkgZXh0cmFjdC10ZXh0LXdlYnBhY2stcGx1Z2luXG5cblxuLy8vLy8vLy8vLy8vLy8vLy8vXG4vLyBXRUJQQUNLIEZPT1RFUlxuLy8gLi9yZXNvdXJjZXMvYXNzZXRzL2xlc3MvYXBwLmxlc3Ncbi8vIG1vZHVsZSBpZCA9IDhcbi8vIG1vZHVsZSBjaHVua3MgPSAxIl0sIm1hcHBpbmdzIjoiQUFBQSIsInNvdXJjZVJvb3QiOiIifQ==");
+
+/***/ }),
+
+/***/ 9:
+/***/ (function(module, exports) {
+
+eval("//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiOS5qcyIsInNvdXJjZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZVJvb3QiOiIifQ==");
+
+/***/ })
+
+/******/ });

gulpfile.js

@@ -1,80 +0,0 @@
-var elixir = require('laravel-elixir');
-require('laravel-elixir-codeception-standalone');
-require('laravel-elixir-phpcs');
-require('laravel-elixir-vue-2');
-var bowerPath = './bower_components';
-
-/*
- |--------------------------------------------------------------------------
- | Elixir Asset Management
- |--------------------------------------------------------------------------
- |
- | Elixir provides a clean, fluent API for defining some basic Gulp tasks
- | for your Laravel application. By default, we are compiling the Sass
- | file for our application, as well as publishing vendor resources.
- |
- */
-
-
-elixir(function(mix) {
-
-    mix.less(
-        [
-            'app.less',
-             bowerPath + '/iCheck/skins/minimal/*',
-             'AdminLTE.less',
-             'skins/skin-blue.less',
-             'overrides.less'
-         ], 'public/assets/css/')
-            .copy(bowerPath + '/bootstrap-less/assets/fonts/bootstrap/**', 'public/assets/fonts')
-            .copy(bowerPath + '/font-awesome/fonts/*', 'public/build/fonts');
-
-
-
-    mix.webpack(
-            // jQuery is loaded from vue.js webpack process
-            './resources/assets/js/vue.js',
-            './resources/assets/js/vue-dist.js'
-        );
-
-
-
-
-    mix.scripts([
-     bowerPath + '/tether/dist/js/tether.js',
-        'vue-dist.js',
-        bowerPath + '/jquery-ui/jquery-ui.js',
-        bowerPath + '/jquery-slimscroll/jquery.slimscroll.js',
-        bowerPath + '/jquery.iframe-transport/jquery.iframe-transport.js',
-        bowerPath + '/blueimp-file-upload/js/jquery.fileupload.js',
-        bowerPath + '/fastclick/lib/fastclick.js',
-        bowerPath + '/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js',
-        bowerPath + '/bootstrap-datepicker/dist/js/bootstrap-datepicker.js',
-        bowerPath + '/iCheck/icheck.js',
-        bowerPath + '/select2/dist/js/select2.full.js',
-        bowerPath + '/ekko-lightbox/dist/ekko-lightbox.js',
-        'snipeit.js',
-        'app.js'
-
-    ],'public/assets/js');
-    mix.version(['assets/css/app.css','assets/js/all.js']);
-
-
-    // mix.codeception(null, { flags: '--report' });
-
-
-    // mix.phpcs([
-    //     'app/**/*.php',
-    //     'tests/unit/*.php',
-    //     'tests/functional/*.php',
-    //     'tests/acceptance/*.php'
-    // ], {
-    //     bin: 'vendor/bin/phpcs',
-    //     standard: 'PSR2'
-    // });
-
-
-
-});
-
-

resources/assets/js/snipeit_modals.js

@@ -0,0 +1,127 @@
+/* 
+ * 
+ * Snipe-IT Universal Modal support
+ * 
+ * Enables modal dialogs to create sub-resources throughout Snipe-IT
+ * 
+ */
+
+ /* 
+ HOW TO USE
+
+ Create a Button looking like this:
+
+ <a href='{{ route('modal.user') }}' data-toggle="modal"  data-target="#createModal" data-dependency="user" data-select='assigned_to' class="btn btn-sm btn-default">New</a>
+
+ If you don't have access to Blade commands (like {{ and }}, etc), you can hard-code a URL as the 'href'
+
+ data-toggle="modal" - required for Bootstrap Modals
+ data-target="#createModal" - fixed ID for the modal, do not change
+ data-dependency="user" - which Snipe-IT model you're going to be creating.
+ data-select="assigned_to" - What is the *ID* of the select-dropdown that you're going to be adding to, if the modal-create was a 
+                             success? Be on the lookout for duplicate ID's, it will confuse this library!
+ class="btn btn-sm btn-default" - makes it look button-ey, feel free to change :)
+ */
+
+ $(function () {
+  console.warn("Loading up Modal functionality.");
+
+  //handle modal-add-interstitial calls
+  var model, select;
+
+  if($('#createModal').length == 0) {
+    $('body').append('<div class="modal fade" id="createModal"></div><!-- /.modal -->');
+  }
+
+  $('#createModal').on("show.bs.modal", function (event) {
+      var link = $(event.relatedTarget);
+      model = link.data("dependency");
+      select = link.data("select");
+      // console.warn("Uh, href is: "+link.attr('href'));
+      // console.dir(link);
+      $('#createModal').load(link.attr('href'),function () {
+          //do we need to re-select2 this, after load? Probably.
+          $('#createModal').find('select.select2').select2();                
+      });
+  });
+
+
+  $('#createModal').on('click','#modal-save', function () {
+    console.warn("MODAL SAVE CALLED FOR MODAL!");
+    var data = {};
+    console.warn("We are about to SAVE!!! for model: "+model+" and select ID: "+select);
+    $('.modal-body input:visible').each(function (index, elem) {
+        console.warn("["+index+"]: "+elem.id+" = "+$(elem).val());
+        var bits = elem.id.split("-");
+        if (bits[0] === "modal") {
+            data[bits[1]] = $(elem).val();
+        }
+    });
+    //this can probably get replaced with a normal 'serialize' instead
+    $('.modal-body select:visible').each(function (index, elem) {
+        var bits = elem.id.split("-");
+        data[bits[1]] = $(elem).val();
+    });
+
+    data._token = Laravel.csrfToken;
+    console.log(data);
+
+    $.ajax({
+        type: 'POST',
+        url: "/api/v1/" + model + "s",
+        headers: {
+            "X-Requested-With": 'XMLHttpRequest',
+            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
+        },
+
+        data: data,
+        success: function (result) {
+            // {"status":"error","messages":{"name":["The name field is required."]}}
+            if(result.status == "error") {
+                var error_message="";
+                for(var field in result.messages) {
+                    error_message+="Problem(s) with field '"+field+"': "+result.messages[field].join(", ");
+                }
+                //window.alert("Error adding "+model+": "+error_message);
+                $('#modal_error_msg').html(error_message).show();
+                return false;
+            }
+            var id = result.payload.id;
+            var name = result.payload.name || (result.payload.first_name + " " + result.payload.last_name);
+            if(!id || !name) {
+                console.error("Could not find resulting name or ID from modal-create. Name: "+name+", id: "+id);
+                return false;
+            }
+            $('#createModal').modal('hide');
+            $('#createModal').html("");
+
+            // "select" is the original drop-down menu that someone
+            // clicked 'add' on to add a new 'thing'
+            // this code adds the newly created object to that select
+            var selector = document.getElementById(select);
+            if(!selector) {
+                console.error("Could not find original <select> element with an id of: "+select);
+                return false;
+            }
+            //console.log(document.getElementById(select));
+            console.dir(selector);
+            selector.options[selector.length] = new Option(name, id);
+            selector.selectedIndex = selector.length - 1;
+            $(selector).trigger("change");
+            if(fetchCustomFields) {
+                fetchCustomFields();
+            }
+
+        },
+        error: function (result) {
+            // console.log('Error: ' + result.responseJSON.error.message );
+            msg = result.responseJSON.messages || result.responseJSON.error;
+            $('#modal_error_msg').html("Server Error: "+msg).show();
+            //window.alert("Unable to add new " + model + " - error: " + msg);
+        }
+
+
+
+    });
+  });
+});

resources/views/hardware/bulk-checkout.blade.php

@@ -37,7 +37,7 @@
               {!! $errors->first('assigned_to', '<span class="alert-msg"><i class="fa fa-times"></i> :message</span>') !!}
             </div>
             <div class="col-md-1 col-sm-1 text-left">
-              <a href='#' data-toggle="modal"  data-target="#createModal" data-dependency="user" data-select='assigned_to' class="btn btn-sm btn-default">New</a>
+              <a href='{{ route('modal.user') }}' data-toggle="modal"  data-target="#createModal" data-dependency="user" data-select='assigned_to' class="btn btn-sm btn-default">New</a>
             </div>
           </div>
 
@@ -107,121 +107,6 @@
 @stop
 
 @section('moar_scripts')
-
-    {{-- Some room for the modals --}}
-    <div class="modal fade" id="createModal">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                    <h4 class="modal-title">Modal title</h4>
-                </div>
-                <div class="modal-body">
-
-                    <div class="dynamic-form-row">
-                        <div class="col-md-4 col-xs-12"><label for="modal-first_name">{{ trans('general.first_name') }}:</label></div>
-                        <div class="col-md-8 col-xs-12 required"><input type='text' id='modal-first_name' class="form-control"></div>
-                    </div>
-
-                    <div class="dynamic-form-row">
-                        <div class="col-md-4 col-xs-12"><label for="modal-last_name">{{ trans('general.last_name') }}:</label></div>
-                        <div class="col-md-8 col-xs-12"><input type='text' id='modal-last_name' class="form-control"></div>
-                    </div>
-
-                    <div class="dynamic-form-row">
-                        <div class="col-md-4 col-xs-12"><label for="modal-username">{{ trans('admin/users/table.username') }}:</label></div>
-                        <div class="col-md-8 col-xs-12 required"><input type='text' id='modal-username' class="form-control"></div>
-                    </div>
-
-                    <div class="dynamic-form-row">
-                        <div class="col-md-4 col-xs-12"><label for="modal-email">{{ trans('admin/users/table.email') }}:</label></div>
-                        <div class="col-md-8 col-xs-12"><input type='email' id='modal-email' class="form-control"></div>
-                    </div>
-
-                    <div class="dynamic-form-row">
-                        <div class="col-md-4 col-xs-12"><label for="modal-password">{{ trans('admin/users/table.password') }}:</label></div>
-                        <div class="col-md-8 col-xs-12 required"><input type='password' id='modal-password' class="form-control"></div>
-                    </div>
-
-
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">{{ trans('button.cancel') }}</button>
-                    <button type="button" class="btn btn-primary" id="modal-save">{{ trans('general.save') }}</button>
-                </div>
-            </div><!-- /.modal-content -->
-        </div><!-- /.modal-dialog -->
-    </div><!-- /.modal -->
-
-
-
-
-    <!-- Ajax call to retrieve user assets -->
-
-<script>
-    $(function () {
-        var model,select;
-        $('#createModal').on("show.bs.modal",function (event) {
-            console.warn('modal ran');
-            var link = $(event.relatedTarget);
-            model=link.data("dependency");
-            select=link.data("select");
-            var modal = $(this);
-            modal.find('.modal-title').text('Add a new ' + model);
-            $('.dynamic-form-row').hide();
-            function show_er(selector) {
-                $(selector).parent().parent().show();
-            }
-            show_er('#modal-name');
-            switch(model) {
-                case 'user':
-                    $('.dynamic-form-row').hide(); //we don't want a generic "name"
-                    show_er("#modal-first_name");
-                    show_er("#modal-last_name");
-                    show_er("#modal-username");
-                    show_er("#modal-email");
-                    show_er("#modal-password");
-                    show_er("#modal-password_confirm");
-                    break;
-                    //do nothing, they just need 'name'
-            }
-            //console.warn("The Model is: "+model+" and the select is: "+select);
-        });
-        $('#modal-save').on('click',function () {
-            var data={};
-            //console.warn("We are about to SAVE!!! for model: "+model+" and select ID: "+select);
-            $('.modal-body input:visible').each(function (index,elem) {
-                //console.warn("["+index+"]: "+elem.id+" = "+$(elem).val());
-                var bits=elem.id.split("-");
-                if(bits[0]==="modal") {
-                    data[bits[1]]=$(elem).val();
-                }
-            });
-            $('.modal-body select:visible').each(function (index,elem) {
-                var bits=elem.id.split("-");
-                data[bits[1]]=$(elem).val();
-            });
-            data._token =  '{{ csrf_token() }}',
-                 //   console.dir(data);
-                $.post("{{url('/') }}/api/"+model+"s",data,function (result) {
-                    var id=result.id;
-                    var name=result.name || (result.first_name+" "+result.last_name);
-                    $('.modal-body input:visible').val("");
-                    $('#createModal').modal('hide');
-                    //console.warn("The select ID thing we're going for is: "+select);
-                    var selector=document.getElementById(select);
-                    selector.options[selector.length] = new Option(name,id);
-                    selector.selectedIndex=selector.length-1;
-                    $(selector).trigger("change");
-                }).fail(function (result) {
-                    //console.dir(result.responseJSON);
-                    msg=result.responseJSON.error.message || result.responseJSON.error;
-                    window.alert("Unable to add new "+model+" - error: "+msg);
-                });
-        });
-    });
-</script>
-
 <script>
 $(function() {
   $('#assigned_to').on("change",function () {

resources/views/hardware/checkout.blade.php

@@ -49,13 +49,13 @@
             <div id="assigned_user" class="form-group{{ $errors->has('assigned_to') ? ' has-error' : '' }}">
               {{ Form::label('assigned_user', trans('admin/hardware/form.checkout_to'), array('class' => 'col-md-3 control-label')) }}
               <div class="col-md-7 required">
-                {{ Form::select('assigned_user', $users_list , Input::old('assigned_user', $asset->assigned_type == 'App\Models\User' ? $asset->assigned_to : 0), array('class'=>'select2', 'id'=>'assigned_user', 'style'=>'width:100%')) }}
+                {{ Form::select('assigned_user', $users_list , Input::old('assigned_user', $asset->assigned_type == 'App\Models\User' ? $asset->assigned_to : 0), array('class'=>'select2', 'id'=>'assigned_user_select', 'style'=>'width:100%')) }}
 
                 {!! $errors->first('assigned_user', '<span class="alert-msg"><i class="fa fa-times"></i> :message</span>') !!}
               </div>
               <div class="col-md-1 col-sm-1 text-left">
                   @can('create', \App\Models\User::class)
-                    <a href='#' data-toggle="modal"  data-target="#createModal" data-dependency="user" data-select='assigned_user' class="btn btn-sm btn-default">New</a>
+                    <a href='{{ route('modal.user') }}' data-toggle="modal"  data-target="#createModal" data-dependency="user" data-select='assigned_user_select' class="btn btn-sm btn-default">New</a>
                   @endcan
               </div>
             </div>
@@ -158,142 +158,7 @@
 @stop
 
 @section('moar_scripts')
-
-    {{-- Some room for the modals --}}
-    <div class="modal fade" id="createModal">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                    <h4 class="modal-title">Modal title</h4>
-                </div>
-                <div class="modal-body">
-
-                    <div class="dynamic-form-row">
-                        <div class="col-md-4 col-xs-12"><label for="modal-first_name">{{ trans('general.first_name') }}:</label></div>
-                        <div class="col-md-8 col-xs-12 required"><input type='text' id='modal-first_name' class="form-control"></div>
-                    </div>
-
-                    <div class="dynamic-form-row">
-                        <div class="col-md-4 col-xs-12"><label for="modal-last_name">{{ trans('general.last_name') }}:</label></div>
-                        <div class="col-md-8 col-xs-12"><input type='text' id='modal-last_name' class="form-control"></div>
-                    </div>
-
-                    <div class="dynamic-form-row">
-                        <div class="col-md-4 col-xs-12"><label for="modal-username">{{ trans('admin/users/table.username') }}:</label></div>
-                        <div class="col-md-8 col-xs-12 required"><input type='text' id='modal-username' class="form-control"></div>
-                    </div>
-
-                    <div class="dynamic-form-row">
-                        <div class="col-md-4 col-xs-12"><label for="modal-email">{{ trans('admin/users/table.email') }}:</label></div>
-                        <div class="col-md-8 col-xs-12"><input type='email' id='modal-email' class="form-control"></div>
-                    </div>
-
-                    <div class="dynamic-form-row">
-                        <div class="col-md-4 col-xs-12"><label for="modal-password">{{ trans('admin/users/table.password') }}:</label></div>
-                        <div class="col-md-8 col-xs-12 required"><input type='password' id='modal-password' class="form-control"></div>
-                    </div>
-
-
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">{{ trans('button.cancel') }}</button>
-                    <button type="button" class="btn btn-primary" id="modal-save">{{ trans('general.save') }}</button>
-                </div>
-            </div><!-- /.modal-content -->
-        </div><!-- /.modal-dialog -->
-    </div><!-- /.modal -->
-
-
-
-
-    <!-- Ajax call to retrieve user assets -->
-
 <script>
-
-
-    $(function () {
-        var model,select;
-
-
-        $('#createModal').on("show.bs.modal",function (event) {
-            console.warn('modal ran');
-            var link = $(event.relatedTarget);
-            model=link.data("dependency");
-            select=link.data("select");
-
-            var modal = $(this);
-            modal.find('.modal-title').text('Add a new ' + model);
-
-            $('.dynamic-form-row').hide();
-            function show_er(selector) {
-                $(selector).parent().parent().show();
-            }
-            show_er('#modal-name');
-            switch(model) {
-
-                case 'user':
-                    $('.dynamic-form-row').hide(); //we don't want a generic "name"
-                    show_er("#modal-first_name");
-                    show_er("#modal-last_name");
-                    show_er("#modal-username");
-                    show_er("#modal-email");
-                    show_er("#modal-password");
-                    show_er("#modal-password_confirm");
-                    break;
-
-
-                    //do nothing, they just need 'name'
-            }
-
-            //console.warn("The Model is: "+model+" and the select is: "+select);
-        });
-
-
-
-
-
-        $('#modal-save').on('click',function () {
-            var data={};
-            //console.warn("We are about to SAVE!!! for model: "+model+" and select ID: "+select);
-            $('.modal-body input:visible').each(function (index,elem) {
-                //console.warn("["+index+"]: "+elem.id+" = "+$(elem).val());
-                var bits=elem.id.split("-");
-                if(bits[0]==="modal") {
-                    data[bits[1]]=$(elem).val();
-                }
-            });
-            $('.modal-body select:visible').each(function (index,elem) {
-                var bits=elem.id.split("-");
-                data[bits[1]]=$(elem).val();
-            });
-
-            data._token =  '{{ csrf_token() }}',
-                 //   console.dir(data);
-
-                $.post("{{url('/') }}/api/"+model+"s",data,function (result) {
-                    var id=result.id;
-                    var name=result.name || (result.first_name+" "+result.last_name);
-                    $('.modal-body input:visible').val("");
-                    $('#createModal').modal('hide');
-
-                    //console.warn("The select ID thing we're going for is: "+select);
-                    var selector=document.getElementById(select);
-                    selector.options[selector.length] = new Option(name,id);
-                    selector.selectedIndex=selector.length-1;
-                    $(selector).trigger("change");
-
-
-                }).fail(function (result) {
-                    //console.dir(result.responseJSON);
-                    msg=result.responseJSON.error.message || result.responseJSON.error;
-                    window.alert("Unable to add new "+model+" - error: "+msg);
-                });
-
-        });
-    });
-
-
 $(function() {
   $('#assigned_user').on("change",function () {
     var userid = $('#assigned_user option:selected').val();

resources/views/hardware/edit.blade.php

@@ -160,9 +160,6 @@
 @stop
 
 @section('moar_scripts')
-{{-- Some room for the modals --}}
-<div class="modal fade" id="createModal">
-</div><!-- /.modal -->
 <script>
 
 
@@ -230,21 +227,6 @@
             user_add($(".status_id").val());
         });
 
-        //handle modal-add-interstitial calls
-        var model, select;
-
-        $('#createModal').on("show.bs.modal", function (event) {
-            var link = $(event.relatedTarget);
-            model = link.data("dependency");
-            select = link.data("select");
-            // console.warn("Uh, href is: "+link.attr('href'));
-            // console.dir(link);
-            $('#createModal').load(link.attr('href'),function () {
-                //do we need to re-select2 this, after load? Probably.
-                $('#createModal').find('select.select2').select2();                
-            });
-        });
-
         $("form").submit(function (event) {
             event.preventDefault();
             return sendForm();
@@ -370,98 +352,6 @@
             return false;
         }
 
-
-        $('#createModal').on('click','#modal-save', function () {
-            console.warn("MODAL SAVE CALLED FOR MODAL!");
-            var data = {};
-            console.warn("We are about to SAVE!!! for model: "+model+" and select ID: "+select);
-            $('.modal-body input:visible').each(function (index, elem) {
-                console.warn("["+index+"]: "+elem.id+" = "+$(elem).val());
-                var bits = elem.id.split("-");
-                if (bits[0] === "modal") {
-                    data[bits[1]] = $(elem).val();
-                }
-            });
-            //this can probably get replaced with a normal 'serialize' instead
-            $('.modal-body select:visible').each(function (index, elem) {
-                var bits = elem.id.split("-");
-                data[bits[1]] = $(elem).val();
-            });
-
-            data._token = '{{ csrf_token() }}';
-            console.log(data);
-
-                $.ajax({
-                    type: 'POST',
-                    url: "{{ url('/') }}/api/v1/" + model + "s",
-                    headers: {
-                        "X-Requested-With": 'XMLHttpRequest',
-                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
-                    },
-
-                    data: data,
-                    success: function (result) {
-                        // {"status":"error","messages":{"name":["The name field is required."]}}
-                        if(result.status == "error") {
-                            var error_message="";
-                            for(var field in result.messages) {
-                                error_message+="Problem(s) with field '"+field+"': "+result.messages[field].join(", ");
-                            }
-                            //window.alert("Error adding "+model+": "+error_message);
-                            $('#modal_error_msg').html(error_message).show();
-                            return false;
-                        }
-                        var id = result.payload.id;
-                        var name = result.payload.name || (result.payload.first_name + " " + result.payload.last_name);
-                        console.log(name);
-                        $('#createModal').modal('hide');
-                        $('#createModal').html("");
-
-                        // "select" is the original drop-down menu that someone
-                        // clicked 'add' on to add a new 'thing'
-                        // this code adds the newly created object to that select
-                        var selector = document.getElementById(select);
-                        //console.log(document.getElementById(select));
-                        selector.options[selector.length] = new Option(name, id);
-                        selector.selectedIndex = selector.length - 1;
-                        $(selector).trigger("change");
-                        fetchCustomFields();
-
-                    },
-                    error: function (result) {
-                       // console.log('Error: ' + result.responseJSON.error.message );
-                        msg = result.responseJSON.messages || result.responseJSON.error;
-                        $('#modal_error_msg').html("Server Error: "+msg).show();
-                        //window.alert("Unable to add new " + model + " - error: " + msg);
-                    }
-
-
-
-        });
-        });
-    });
-</script>
-
-<script src="{{ asset('js/pGenerator.jquery.js') }}"></script>
-
-<script>
-
-
-    $(document).ready(function () {
-
-        $('#genPassword').pGenerator({
-            'bind': 'click',
-            'passwordElement': '#modal-password',
-            'displayElement': '#generated-password',
-            'passwordLength': 16,
-            'uppercase': true,
-            'lowercase': true,
-            'numbers': true,
-            'specialChars': true,
-            'onPasswordGenerated': function (generatedPassword) {
-                $('#modal-password_confirm').val($('#modal-password').val());
-            }
-        });
     });
 </script>
 @stop

resources/views/modals/user.blade.php

@@ -1,3 +1,24 @@
+
+<script src="/js/pGenerator.jquery.js"></script>
+
+<script>
+    $(document).ready(function () {
+
+        $('#genPassword').pGenerator({
+            'bind': 'click',
+            'passwordElement': '#modal-password',
+            'displayElement': '#generated-password',
+            'passwordLength': 16,
+            'uppercase': true,
+            'lowercase': true,
+            'numbers': true,
+            'specialChars': true,
+            'onPasswordGenerated': function (generatedPassword) {
+                $('#modal-password_confirm').val($('#modal-password').val());
+            }
+        });
+    });
+</script>
 <div class="modal-dialog">
     <div class="modal-content">
         <div class="modal-header">

webpack.mix.js

@@ -46,6 +46,7 @@ mix.scripts([
     './node_modules/ekko-lightbox/dist/ekko-lightbox.js',
     './resources/assets/js/app.js', //this is part of AdminLTE
     './resources/assets/js/snipeit.js', //this is the actual Snipe-IT JS
+    './resources/assets/js/snipeit_modals.js'
 ],'public/js/dist/all.js');
 
 //if (mix.config.inProduction) {