Refactor and improve Modal support for Assets (#3884)

This commit is contained in:
Brady Wetherington 2017-08-24 22:24:02 -07:00 committed by snipe
parent 6a67426140
commit c1dcc22217
13 changed files with 260 additions and 159 deletions

View file

@ -76,7 +76,7 @@ class AssetModelsController extends Controller
$assetmodel->fill($request->all());
if ($assetmodel->save()) {
return response()->json(Helper::formatStandardApiResponse('success', $assetmodel, trans('admin/assetmodels/message.create.success')));
return response()->json(Helper::formatStandardApiResponse('success', $assetmodel, trans('admin/models/message.create.success')));
}
return response()->json(Helper::formatStandardApiResponse('error', null, $assetmodel->getErrors()));

View file

@ -116,9 +116,9 @@ class AssetsController extends Controller
->with('statuslabel_list', Helper::statusLabelList())
->with('location_list', Helper::locationsList())
->with('item', new Asset)
->with('manufacturer', Helper::manufacturerList())
->with('category', Helper::categoryList('asset'))
->with('statuslabel_types', Helper::statusTypeList())
->with('manufacturer', Helper::manufacturerList()) //handled in modal now?
->with('category', Helper::categoryList('asset')) //handled in modal now?
->with('statuslabel_types', Helper::statusTypeList()) //handled in modal now?
->with('users_list', Helper::usersList())
->with('assets_list', Helper::assetsList())
->with('locations_list', Helper::locationsList());

View file

@ -0,0 +1,32 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Helpers\Helper;
class ModalController extends Controller
{
function location() {
return view('modals.location');
}
function model() {
return view('modals.model')
->with('manufacturer', Helper::manufacturerList())
->with('category', Helper::categoryList('asset'));
}
function statuslabel() {
return view('modals.statuslabel')->with('statuslabel_types', Helper::statusTypeList());
}
function supplier() {
return view('modals.supplier');
}
function user() {
return view('modals.user');
}
}

View file

@ -39,7 +39,7 @@
{!! $errors->first('model_id', '<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="model" data-select="model_select_id" class="btn btn-sm btn-default">New</a>
<a href='{{ route('modal.model') }}' data-toggle="modal" data-target="#createModal" data-dependency="model" data-select="model_select_id" class="btn btn-sm btn-default">New</a>
<span class="mac_spinner" style="padding-left: 10px; color: green; display:none; width: 30px;"><i class="fa fa-spinner fa-spin"></i> </span>
</div>
</div>
@ -74,7 +74,7 @@
</div>
<div class="col-md-1 col-sm-1 text-left" style="margin-left: -20px; padding-top: 3px">
@can('users.create')
<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' class="btn btn-sm btn-default">New</a>
@endcan
</div>
</div>
@ -98,7 +98,7 @@
{!! $errors->first('assigned_location', '<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="location" data-select='assigned_location' class="btn btn-sm btn-default">New</a>
<a href='{{ route('modal.location') }}' data-toggle="modal" data-target="#createModal" data-dependency="location" data-select='assigned_location' class="btn btn-sm btn-default">New</a>
</div>
</div>
@endif
@ -127,7 +127,7 @@
{!! $errors->first('rtd_location_id', '<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='location' data-select='rtd_location_select' class="btn btn-sm btn-default">New</a>
<a href='{{ route('modal.location') }}' data-toggle="modal" data-target="#createModal" data-dependency='location' data-select='rtd_location_select' class="btn btn-sm btn-default">New</a>
</div>
</div>
@ -160,7 +160,9 @@
@stop
@section('moar_scripts')
@include('partials/modals')
{{-- Some room for the modals --}}
<div class="modal fade" id="createModal">
</div><!-- /.modal -->
<script>
@ -188,19 +190,6 @@
}
}
$(function () {
$('#model_select_id').on("change", fetchCustomFields);
});
$(function () {
user_add($(".status_id option:selected").val());
});
var $statusSelect = $(".status_id");
$statusSelect.on("change", function () {
user_add($statusSelect.val());
});
function user_add(status_id) {
if (status_id != '') {
@ -230,52 +219,30 @@
;
$(function () {
//grab custom fields for this model whenever model changes.
$('#model_select_id').on("change", fetchCustomFields);
//initialize assigned user/loc/asset based on statuslabel's statustype
user_add($(".status_id option:selected").val());
//whenever statuslabel changes, update assigned user/loc/asset
$(".status_id").on("change", function () {
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");
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 'model':
show_er('#modal-manufacturer_id');
show_er('#modal-category_id');
show_er('#modal-modelno');
show_er('#modal-fieldset_id');
break;
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-password");
show_er("#modal-password_confirm");
break;
case 'location':
show_er('#modal-city');
show_er('#modal-country');
break;
case 'statuslabel':
show_er("#modal-type");
break;
case 'supplier':
}
// 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) {
@ -404,7 +371,8 @@
}
$('#modal-save').on('click', function () {
$('#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) {
@ -414,6 +382,7 @@
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();
@ -432,12 +401,21 @@
data: data,
success: function (result) {
var id = result.id;
// {"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);
$('.modal-body input:visible').val("");
$('#createModal').modal('hide');
$('#createModal').html("");
// "select" is the original drop-down menu that someone
// clicked 'add' on to add a new 'thing'
@ -453,7 +431,8 @@
error: function (result) {
// console.log('Error: ' + result.responseJSON.error.message );
msg = result.responseJSON.messages || result.responseJSON.error;
window.alert("Unable to add new " + model + " - error: " + msg);
$('#modal_error_msg').html("Server Error: "+msg).show();
//window.alert("Unable to add new " + model + " - error: " + msg);
}

View file

@ -0,0 +1,32 @@
<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">{{ trans('general.location') }}</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger" id="modal_error_msg" style="display:none">
</div>
<div class="dynamic-form-row">
<div class="col-md-4 col-xs-12"><label for="modal-name">{{ trans('general.name') }}:
</label></div>
<div class="col-md-8 col-xs-12 required"><input type='text' id='modal-name' class="form-control"></div>
</div>
<div class="dynamic-form-row">
<div class="col-md-4 col-xs-12"><label for="modal-city">{{ trans('general.city') }}:</label></div>
<div class="col-md-8 col-xs-12 required"><input type='text' id='modal-city' class="form-control"></div>
</div>
<div class="dynamic-form-row">
<div class="col-md-4 col-xs-12 country"><label for="modal-country">{{ trans('general.country') }}:</label></div>
<div class="col-md-8 col-xs-12">{!! Form::countries('country', Input::old('country'), 'select2 country',"modal-country") !!}</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 -->

View file

@ -0,0 +1,41 @@
<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">{{ trans('general.model') }}</h4>
</div>
<div class="modal-body">
<div class="dynamic-form-row">
<div class="col-md-4 col-xs-12"><label for="modal-name">{{ trans('general.name') }}:
</label></div>
<div class="col-md-8 col-xs-12 required"><input type='text' id='modal-name' class="form-control"></div>
</div>
<div class="dynamic-form-row">
<div class="col-md-4 col-xs-12"><label for="modal-manufacturer_id">{{ trans('general.manufacturer') }}:
</label></div>
<div class="col-md-8 col-xs-12 required">{{ Form::select('modal-manufacturer', $manufacturer , '', array('class'=>'select2 parent', 'style'=>'width:100%','id' =>'modal-manufacturer_id')) }}</div>
</div>
<div class="dynamic-form-row">
<div class="col-md-4 col-xs-12"><label for="modal-category_id">{{ trans('general.category') }}:
</label></div>
<div class="col-md-8 col-xs-12 required">{{ Form::select('modal-category', $category ,'', array('class'=>'select2 parent', 'style'=>'width:100%','id' => 'modal-category_id')) }}</div>
</div>
<div class="dynamic-form-row">
<div class="col-md-4 col-xs-12"><label for="modal-modelno">{{ trans('general.model_no') }}:</label></div>
<div class="col-md-8 col-xs-12"><input type='text' id='modal-modelno' class="form-control"></div>
</div>
<div class="dynamic-form-row">
<div class="col-md-4 col-xs-12"><label for="modal-fieldset_id">{{ trans('admin/models/general.fieldset') }}:</label></div>
<div class="col-md-8 col-xs-12">{{ Form::select('custom_fieldset', \App\Helpers\Helper::customFieldsetList(),Input::old('custom_fieldset'), array('class'=>'select2', 'id'=>'modal-fieldset_id', 'style'=>'width:350px')) }}</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 -->

View file

@ -0,0 +1,26 @@
<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">{{ trans('admin/hardware/form.status') }}</h4>
</div>
<div class="modal-body">
<div class="dynamic-form-row">
<div class="col-md-4 col-xs-12"><label for="modal-name">{{ trans('general.name') }}:
</label></div>
<div class="col-md-8 col-xs-12 required"><input type='text' id='modal-name' class="form-control"></div>
</div>
<div class="dynamic-form-row">
<div class="col-md-4 col-xs-12"><label for="modal-type">{{ trans('admin/statuslabels/table.status_type') }}:
</label></div>
<div class="col-md-8 col-xs-12 required">{{ Form::select('modal-type', $statuslabel_types, '', array('class'=>'select2', 'style'=>'width:90%','id' =>'modal-type')) }}</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 -->

View file

@ -0,0 +1,20 @@
<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">{{ trans('general.supplier') }}</h4>
</div>
<div class="modal-body">
<div class="dynamic-form-row">
<div class="col-md-4 col-xs-12"><label for="modal-name">{{ trans('general.name') }}:
</label></div>
<div class="col-md-8 col-xs-12 required"><input type='text' id='modal-name' 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 -->

View file

@ -0,0 +1,44 @@
<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">{{ trans('general.user') }}</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-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">
<a href="#" class="left" id="genPassword">Generate</a>
</div>
</div>
<div class="dynamic-form-row">
<div class="col-md-4 col-xs-12"><label for="modal-password_confirm">{{ trans('admin/users/table.password_confirm') }}:</label></div>
<div class="col-md-8 col-xs-12 required"><input type='password' id='modal-password_confirm' class="form-control">
<div id="generated-password"></div>
</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 -->

View file

@ -6,7 +6,7 @@
{!! $errors->first('status_id', '<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='statuslabel' data-select='status_select_id' class="btn btn-sm btn-default">New</a>
<a href='{{ route('modal.statuslabel') }}' data-toggle="modal" data-target="#createModal" data-dependency='statuslabel' data-select='status_select_id' class="btn btn-sm btn-default">New</a>
<span class="status_spinner" style="padding-left: 10px; color: green; display:none; width: 30px;"><i class="fa fa-spinner fa-spin"></i> </span>
</div>
<div class="col-md-7 col-sm-11 col-md-offset-3">

View file

@ -6,6 +6,6 @@
{!! $errors->first('supplier_id', '<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="supplier" data-select='supplier_select_id' class="btn btn-sm btn-default">New</a>
<a href='{{ route('modal.supplier') }}' data-toggle="modal" data-target="#createModal" data-dependency="supplier" data-select='supplier_select_id' class="btn btn-sm btn-default">New</a>
</div>
</div>

View file

@ -1,90 +0,0 @@
{{-- 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-name">{{ trans('general.name') }}:
</label></div>
<div class="col-md-8 col-xs-12 required"><input type='text' id='modal-name' class="form-control"></div>
</div>
<div class="dynamic-form-row">
<div class="col-md-4 col-xs-12"><label for="modal-manufacturer_id">{{ trans('general.manufacturer') }}:
</label></div>
<div class="col-md-8 col-xs-12 required">{{ Form::select('modal-manufacturer', $manufacturer , '', array('class'=>'select2 parent', 'style'=>'width:100%','id' =>'modal-manufacturer_id')) }}</div>
</div>
<div class="dynamic-form-row">
<div class="col-md-4 col-xs-12"><label for="modal-category_id">{{ trans('general.category') }}:
</label></div>
<div class="col-md-8 col-xs-12 required">{{ Form::select('modal-category', $category ,'', array('class'=>'select2 parent', 'style'=>'width:100%','id' => 'modal-category_id')) }}</div>
</div>
<div class="dynamic-form-row">
<div class="col-md-4 col-xs-12"><label for="modal-modelno">{{ trans('general.model_no') }}:</label></div>
<div class="col-md-8 col-xs-12"><input type='text' id='modal-modelno' class="form-control"></div>
</div>
<div class="dynamic-form-row">
<div class="col-md-4 col-xs-12"><label for="modal-type">{{ trans('admin/statuslabels/table.status_type') }}:
</label></div>
<div class="col-md-8 col-xs-12 required">{{ Form::select('modal-type', $statuslabel_types, '', array('class'=>'select2', 'style'=>'width:90%','id' =>'modal-type')) }}</div>
</div>
<div class="dynamic-form-row">
<div class="col-md-4 col-xs-12"><label for="modal-city">{{ trans('general.city') }}:</label></div>
<div class="col-md-8 col-xs-12 required"><input type='text' id='modal-city' class="form-control"></div>
</div>
<div class="dynamic-form-row">
<div class="col-md-4 col-xs-12 country"><label for="modal-country">{{ trans('general.country') }}:</label></div>
<div class="col-md-8 col-xs-12">{!! Form::countries('country', Input::old('country'), 'select2 country',"modal-country") !!}</div>
</div>
<div class="dynamic-form-row">
<div class="col-md-4 col-xs-12"><label for="modal-fieldset_id">{{ trans('admin/models/general.fieldset') }}:</label></div>
<div class="col-md-8 col-xs-12">{{ Form::select('custom_fieldset', \App\Helpers\Helper::customFieldsetList(),Input::old('custom_fieldset'), array('class'=>'select2', 'id'=>'modal-fieldset_id', 'style'=>'width:350px')) }}</div>
</div>
<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-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">
<a href="#" class="left" id="genPassword">Generate</a>
</div>
</div>
<div class="dynamic-form-row">
<div class="col-md-4 col-xs-12"><label for="modal-password_confirm">{{ trans('admin/users/table.password_confirm') }}:</label></div>
<div class="col-md-8 col-xs-12 required"><input type='password' id='modal-password_confirm' class="form-control">
<div id="generated-password"></div>
</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 -->

View file

@ -70,6 +70,23 @@ Route::group(['middleware' => 'auth'], function () {
});
/*
|
|--------------------------------------------------------------------------
| Re-Usable Modal Dialog routes.
|--------------------------------------------------------------------------
|
| Routes for various modal dialogs to interstitially create various things
|
*/
Route::group(['middleware' => 'auth','prefix' => 'modals'], function () {
Route::get('location',['as' => 'modal.location','uses' => 'ModalController@location']);
Route::get('model',['as' => 'modal.model','uses' => 'ModalController@model']);
Route::get('statuslabel',['as' => 'modal.statuslabel','uses' => 'ModalController@statuslabel']);
Route::get('supplier',['as' => 'modal.supplier','uses' => 'ModalController@supplier']);
Route::get('user',['as' => 'modal.user','uses' => 'ModalController@user']);
});
/*
|--------------------------------------------------------------------------