2017-08-26 16:06:52 -07:00
/ *
*
* Snipe - IT Universal Modal support
*
* Enables modal dialogs to create sub - resources throughout Snipe - IT
*
* /
/ *
HOW TO USE
Create a Button looking like this :
2020-04-02 18:33:26 -07:00
< a href = '{{ route(' modal . user ') }}' data - toggle = "modal" data - target = "#createModal" data - select = 'assigned_to' class = "btn btn-sm btn-primary" > New < / a >
2017-08-26 16:06:52 -07:00
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
2017-10-16 20:34:22 -07:00
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 !
2020-04-02 18:33:26 -07:00
class = "btn btn-sm btn-primary" - makes it look button - ey , feel free to change : )
2018-01-20 00:42:29 -08:00
If you want to pass additional variables to the modal ( In the Category Create one , for example , you can pass category _id ) , you can encode them as URL variables in the href
2017-08-26 16:06:52 -07:00
* /
2018-07-16 14:22:25 -07:00
$ ( function ( ) {
2017-10-24 19:20:00 -07:00
2017-08-26 16:06:52 -07:00
//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" ) ;
$ ( '#createModal' ) . load ( link . attr ( 'href' ) , function ( ) {
2018-07-16 14:22:25 -07:00
//do we need to re-select2 this, after load? Probably.
$ ( '#createModal' ) . find ( 'select.select2' ) . select2 ( ) ;
// Initialize the ajaxy select2 with images.
// This is a copy/paste of the code from snipeit.js, would be great to only have this in one place.
$ ( '.js-data-ajax' ) . each ( function ( i , item ) {
var link = $ ( item ) ;
var endpoint = link . data ( "endpoint" ) ;
var select = link . data ( "select" ) ;
link . select2 ( {
ajax : {
// the baseUrl includes a trailing slash
url : baseUrl + 'api/v1/' + endpoint + '/selectlist' ,
dataType : 'json' ,
delay : 250 ,
headers : {
"X-Requested-With" : 'XMLHttpRequest' ,
"X-CSRF-TOKEN" : $ ( 'meta[name="csrf-token"]' ) . attr ( 'content' )
} ,
data : function ( params ) {
var data = {
search : params . term ,
page : params . page || 1 ,
assetStatusType : link . data ( "asset-status-type" ) ,
} ;
return data ;
} ,
processResults : function ( data , params ) {
params . page = params . page || 1 ;
var answer = {
results : data . items ,
pagination : {
more : "true" //(params.page < data.page_count)
}
} ;
return answer ;
} ,
cache : true
} ,
escapeMarkup : function ( markup ) { return markup ; } , // let our custom formatter work
templateResult : formatDatalist ,
templateSelection : formatDataSelection
} ) ;
} ) ;
2017-08-26 16:06:52 -07:00
} ) ;
2018-07-16 14:22:25 -07:00
2017-08-26 16:06:52 -07:00
} ) ;
2018-07-16 14:22:25 -07:00
2017-08-26 16:06:52 -07:00
$ ( '#createModal' ) . on ( 'click' , '#modal-save' , function ( ) {
$ . ajax ( {
type : 'POST' ,
2018-01-20 00:42:29 -08:00
url : $ ( '.modal-body form' ) . attr ( 'action' ) ,
2017-08-26 16:06:52 -07:00
headers : {
"X-Requested-With" : 'XMLHttpRequest' ,
"X-CSRF-TOKEN" : $ ( 'meta[name="csrf-token"]' ) . attr ( 'content' )
} ,
2018-01-20 00:42:29 -08:00
data : $ ( '.modal-body form' ) . serialize ( ) ,
2017-08-26 16:06:52 -07:00
success : function ( result ) {
2017-10-24 19:20:00 -07:00
2017-08-26 16:06:52 -07:00
if ( result . status == "error" ) {
var error _message = "" ;
for ( var field in result . messages ) {
2017-10-24 19:20:00 -07:00
error _message += "<li>Problem(s) with field <i><strong>" + field + "</strong></i>: " + result . messages [ field ] ;
2018-01-20 07:42:48 -08:00
2017-08-26 16:06:52 -07:00
}
$ ( '#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 ) ;
2018-01-20 07:42:48 -08:00
2017-08-26 16:06:52 -07:00
if ( ! selector ) {
return false ;
}
2017-10-24 17:10:42 -07:00
2017-08-26 16:06:52 -07:00
selector . options [ selector . length ] = new Option ( name , id ) ;
selector . selectedIndex = selector . length - 1 ;
$ ( selector ) . trigger ( "change" ) ;
2017-10-16 20:34:22 -07:00
if ( window . fetchCustomFields ) {
2017-08-26 16:06:52 -07:00
fetchCustomFields ( ) ;
}
} ,
error : function ( result ) {
msg = result . responseJSON . messages || result . responseJSON . error ;
$ ( '#modal_error_msg' ) . html ( "Server Error: " + msg ) . show ( ) ;
}
} ) ;
} ) ;
2017-10-16 20:12:11 -07:00
} ) ;
2018-07-16 14:22:25 -07:00
function formatDatalist ( datalist ) {
var loading _markup = '<i class="fa fa-spinner fa-spin" aria-hidden="true"></i> Loading...' ;
if ( datalist . loading ) {
return loading _markup ;
}
var markup = "<div class='clearfix'>" ;
markup += "<div class='pull-left' style='padding-right: 10px;'>" ;
if ( datalist . image ) {
2020-03-27 22:03:30 -07:00
markup += "<div style='width: 30px;'><img src='" + datalist . image + "' alt='" + datalist . tex + "' style='max-height: 20px; max-width: 30px;'></div>" ;
2018-07-16 14:22:25 -07:00
} else {
markup += "<div style='height: 20px; width: 30px;'></div>" ;
}
markup += "</div><div>" + datalist . text + "</div>" ;
markup += "</div>" ;
return markup ;
}
function formatDataSelection ( datalist ) {
2019-05-21 18:29:50 -07:00
return datalist . text . replace ( />/g , '>' )
. replace ( /</g , '<' )
. replace ( /"/g , '"' )
. replace ( /'/g , ''' ) ;
2018-07-16 14:22:25 -07:00
}