Skip to content

L
laravel-adminpanel
Unverified Commit 009599af authored by Vipul Basapati's avatar Vipul Basapati Committed by GitHub
Browse files
Options

Merge pull request #197 from viralsolani/develop 

Refactored Menu Module Js
parents 23cc26ba 191e8a27
Hide whitespace changes
Inline Side-by-side
Showing with 242 additions and 180 deletions
public/js/backend/admin.js
View file @ 009599af
......@@ -2,6 +2,7 @@
var Backend = {}; // common variable used in all the files of the backend
(function (){
Backend = {
Utils: {
......@@ -44,6 +45,7 @@ var Backend = {}; // common variable used in all the files of the backend
ajaxrequest: function (url, method, data, csrf, callback) {
var request = new XMLHttpRequest();
var loadingIcon = jQuery(".loading");
if (window.XMLHttpRequest) {
// code for modern browsers
request = new XMLHttpRequest();
......@@ -52,6 +54,13 @@ var Backend = {}; // common variable used in all the files of the backend
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open(method, url, true);
request.onloadstart = function() {
loadingIcon.show();
};
request.onloadend = function() {
loadingIcon.hide();
};
request.setRequestHeader('X-CSRF-TOKEN', csrf);
request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
if ("post" === method.toLowerCase() || "patch" === method.toLowerCase()) {
......@@ -74,7 +83,6 @@ var Backend = {}; // common variable used in all the files of the backend
jsontoformdata: function (srcjson) {
if (typeof srcjson !== "object")
if (typeof console !== "undefined") {
console.log("\"srcjson\" is not a JSON object");
return null;
}
u = encodeURIComponent;
......@@ -96,7 +104,7 @@ var Backend = {}; // common variable used in all the files of the backend
Pages:
{
init: function () {
Backend.tinyMCE.init();
Backend.tinyMCE.init();
},
},
......@@ -149,16 +157,16 @@ var Backend = {}; // common variable used in all the files of the backend
Users:
{
selectors: {
select2: $(".select2"),
select2: jQuery(".select2"),
getPremissionURL: "",
showPermission: document.querySelectorAll(".show-permissions")
},
init: function (page) {
init: function (page) {
this.setSelectors();
this.addHandlers(page);
this.addHandlers(page);
},
setSelectors: function () {
this.selectors.select2 = $(".select2");
this.selectors.select2 = jQuery(".select2");
this.selectors.getRoleForPermissions = document.querySelectorAll(".get-role-for-permissions");
this.selectors.getAvailabelPermissions = document.querySelector(".get-available-permissions");
this.selectors.Role3 = document.getElementById("role-3");
......@@ -221,7 +229,7 @@ var Backend = {}; // common variable used in all the files of the backend
},
windowloadhandler: function () {
// scripts to be handeled on user create and edit when window is laoaded
Backend.Users.selectors.showPermission.forEach(function (element) {
element.onclick = function (event) {
......@@ -376,6 +384,219 @@ var Backend = {}; // common variable used in all the files of the backend
}
},
Menu:
{
selectors: {
menuItemContainer: jQuery("#menu-items"),
menuItemsData: jQuery(".menu-items-field"),
addCustomUrlButton: jQuery(".show-modal"),
modal: jQuery("#showMenuModal"),
document: jQuery("document"),
addCustomUrlForm: "#menu-add-custom-url",
addModuleToMenuButton: ".add-module-to-menu",
removeMenuItemButton : ".remove-menu-item",
editMenuItemButton : ".edit-menu-item",
formUrl: "",
},
methods: {
getNewId : function(str) {
var arr = str.match(/"id":[0-9]+/gi);
if(arr) {
$.each(arr, function(index, item) {
arr[index] = parseInt(item.replace('"id":', ''));
});
return Math.max.apply(Math, arr) + 1;
}
return 1;
},
findItemById : function(item, id) {
if(item.id == id) {
return item;
}
var found = false;
var foundItem;
if(item.children){
$.each(item.children, function(index, childItem){
foundItem = Backend.Menu.methods.findItemById(childItem, id);
if(foundItem)
{
found = true;
return false;
}
});
}
if(found)
{
return foundItem;
}
return null;
},
addMenuItem : function(obj) {
Backend.Menu.selectors.menuItemContainer.nestable('add', {
"id": Backend.Menu.methods.getNewId(Backend.Menu.selectors.menuItemsData.val()),
"content": obj.name,
"name": obj.name,
"url": obj.url,
"url_type" : obj.url_type,
"open_in_new_tab": obj.open_in_new_tab,
"icon": obj.icon,
"view_permission_id": obj.view_permission_id
});
Backend.Menu.selectors.menuItemsData.val(
JSON.stringify(
Backend.Menu.selectors.menuItemContainer.nestable('serialise')
)
);
},
editMenuItem : function(obj) {
var newObject = {
"id": obj.id,
"content": obj.name,
"name": obj.name,
"url": obj.url,
"url_type": obj.url_type,
"open_in_new_tab": obj.open_in_new_tab,
"icon": obj.icon,
"view_permission_id": obj.view_permission_id
};
var menuItems = Backend.Menu.selectors.menuItemContainer.nestable('serialise');
var itemData;
$.each(menuItems, function(index, item){
itemData = Backend.Menu.methods.findItemById(item, id);
if(itemData) { return false; }
});
if(itemData.children) {
newObject.children = itemData.children;
}
Backend.Menu.selectors.menuItemContainer.nestable('replace', newObject);
Backend.Menu.selectors.menuItemsData.val(
JSON.stringify(
Backend.Menu.selectors.menuItemContainer.nestable('serialise')
)
);
}
},
init: function () {
this.addHandlers();
},
addHandlers: function () {
var context = this;
var formName = "_add_custom_url_form";
this.selectors.menuItemContainer.nestable({
callback: function(l, e){
this.selectors.menuItemsData.val(JSON.stringify($(l).nestable('serialise')));
},
json: this.selectors.menuItemsData.val(),
includeContent:true,
scroll: false,
maxDepth: 10
});
this.selectors.addCustomUrlButton.click(function() {
var title = context.selectors.addCustomUrlButton.attr("data-header");
context.selectors.modal.find(".modal-title").html(title);
context.selectors.modal.modal("show");
callback = {
success: function (request) {
if (request.status >= 200 && request.status < 400) {
// Success!
context.selectors.modal.find(".modal-body").html(request.responseText);
// jQuery(document).find(context.selectors.modal).find(".view-permission-block").remove();
jQuery(document).find(context.selectors.addCustomUrlForm).removeClass("hidden");
}
},
error: function (request) {
//Do Something
}
}
Backend.Utils.ajaxrequest(context.selectors.formUrl + "/" + formName, "get", {}, Backend.Utils.csrf, callback);
});
jQuery(document).on("submit", context.selectors.addCustomUrlForm, function(e){
e.preventDefault();
var formData = jQuery(this).serializeArray().reduce(function(obj, item) {
obj[item.name] = item.value;
return obj;
}, {});
if(formData.name.length > 0) {
if(formData.id.length > 0) {
context.methods.editMenuItem(formData);
} else {
context.methods.addMenuItem(formData);
}
context.selectors.modal.modal("hide");
}
});
jQuery(document).on("click", context.selectors.addModuleToMenuButton, function(){
var dataObj = {
id: $(this).attr("data-id"),
name: $(this).attr("data-name"),
url: $(this).attr("data-url"),
url_type: $(this).attr("data-url_type"),
open_in_new_tab: $(this).attr("data-open_in_new_tab"),
view_permission_id: $(this).attr("data-view_permission_id"),
}
context.methods.addMenuItem(dataObj);
});
jQuery(document).on("click", context.selectors.removeMenuItemButton, function() {
context.selectors.menuItemContainer.nestable('remove', jQuery(this).parents(".dd-item").first().attr("data-id"));
Backend.Menu.selectors.menuItemsData.val(
JSON.stringify(
Backend.Menu.selectors.menuItemContainer.nestable('serialise')
)
);
});
jQuery(document).on("click", context.selectors.editMenuItemButton, function() {
id = jQuery(this).parents(".dd-item").first().attr("data-id");
var menuItems = context.selectors.menuItemContainer.nestable('serialise');
var itemData;
$.each(menuItems, function(index, item){
itemData = context.methods.findItemById(item, id);
if(itemData) { return false; }
});
if(itemData.id != undefined && itemData.id == id)
{
callback = {
success: function (request) {
if (request.status >= 200 && request.status < 400) {
// Success!
context.selectors.modal.find(".modal-body").html(request.responseText);
context.selectors.modal.find(".modal-dialog .modal-content .modal-header .modal-title").html("Edit: " + itemData.name);
$(document).find(context.selectors.modal).find(".mi-id").val(itemData.id);
$(document).find(context.selectors.modal).find(".mi-name").val(itemData.name);
$(document).find(context.selectors.modal).find(".mi-url").val(itemData.url);
$(document).find(context.selectors.modal).find(".mi-url_type_"+itemData.url_type).prop("checked", true);
if(itemData.open_in_new_tab == 1) {
$(document).find(context.selectors.modal).find(".mi-open_in_new_tab").prop("checked", true);
}
$(document).find(context.selectors.modal).find(".mi-icon").val(itemData.icon);
$(document).find(context.selectors.modal).find(".mi-view_permission_id").val(itemData.view_permission_id);
$(document).find("#menu-add-custom-url").removeClass("hidden");
context.selectors.modal.modal("show");
}
},
error: function (request) {
//Do Something
}
}
Backend.Utils.ajaxrequest(context.selectors.formUrl + "/" + formName, "get", {}, Backend.Utils.csrf, callback);
}
});
}
},
/**
* Tiny MCE
......@@ -441,7 +662,7 @@ var Backend = {}; // common variable used in all the files of the backend
// ! Backend.emailTemplate.addHandlers
addHandlers: function () {
$(".select2").select2();
jQuery(".select2").select2();
// to add placeholder in to active textarea
document.getElementById("addPlaceHolder").onclick = function (event) {
Backend.emailTemplate.addPlaceHolder(event);
......@@ -456,7 +677,7 @@ var Backend = {}; // common variable used in all the files of the backend
addPlaceHolder: function (event) {
var placeHolder = document.getElementById('placeHolder').value;
if (placeHolder != '') {
tinymce.activeEditor.execCommand('mceInsertContent', false, "[" + $('#placeHolder :selected').text() + "]");
tinymce.activeEditor.execCommand('mceInsertContent', false, "[" + jQuery('#placeHolder :selected').text() + "]");
}
},
......@@ -464,7 +685,7 @@ var Backend = {}; // common variable used in all the files of the backend
showPreview: function (event) {
document.querySelector(".modal-body").innerHTML = tinyMCE.get('txtBody').getContent();
//jQuery( ".modal-body" ).html(tinyMCE.get('txtBody').getContent());
$(".model-wrapper").modal('show');
jQuery(".model-wrapper").modal('show');
},
},
......@@ -526,9 +747,12 @@ var Backend = {}; // common variable used in all the files of the backend
},
init: function (dataTable) {
this.setSelectors();
this.addHandlers(dataTable);
this.setSelectors.divAlerts.delay(2000).fadeOut(800);
this.addHandlers(dataTable);
},
setSelectors: function () {
......@@ -541,6 +765,7 @@ var Backend = {}; // common variable used in all the files of the backend
this.setSelectors.excelButton = document.getElementById("excelButton");
this.setSelectors.pdfButton = document.getElementById("pdfButton");
this.setSelectors.printButton = document.getElementById("printButton");
this.setSelectors.divAlerts = jQuery('div.alert').not('.alert-important');
},
cloneElement: function (element, callback) {
......@@ -683,6 +908,7 @@ var Backend = {}; // common variable used in all the files of the backend
}
}
};
})();
......
resources/views/backend/layouts/app.blade.php
View file @ 009599af
......@@ -42,6 +42,7 @@
</script>
</head>
<body class="skin-{{ config('backend.theme') }} {{ config('backend.layout') }}">
<div class="loading" style="display:none"></div>
@include('includes.partials.logged-in-as')
<div class="wrapper">
......
resources/views/backend/menus/form.blade.php
View file @ 009599af
......@@ -56,173 +56,7 @@
@section("after-scripts")
{{ Html::script('js/nestable2/jquery.nestable.js') }}
<script type="text/javascript">
var formName = '_add_custom_url_form';
var lastId = null;
$('#menu-items').nestable({
callback: function(l, e){
$(".menu-items-field").val(JSON.stringify($(l).nestable('serialise')));
},
json: $(".menu-items-field").val(),
includeContent:true,
scroll: false,
maxDepth: 10
});
$(".show-modal").click(function(){
$("#showMenuModal").find(".modal-dialog .modal-content .modal-header .modal-title").html($(this).attr("data-header"));
formName = $(this).attr("data-form");
$("#showMenuModal").modal("show");
setTimeout(function() {
$(document).find("#showMenuModal .view-permission-block").remove();
$(document).find("#menu-add-custom-url").removeClass("hidden");
}, 500);
});
$("#showMenuModal").on('show.bs.modal', function () {
$.get("{{ route('admin.menus.getform') }}/" + formName, function(data, status){
if(status == "success") {
$("#showMenuModal").find(".modal-dialog .modal-content .modal-body").html(data);
}
else {
$("#showMenuModal").find(".modal-dialog .modal-content .modal-body").html("Something went wrong! Please try again later.");
}
});
});
var getNewId = function(str) {
var arr = str.match(/"id":[0-9]+/gi);
if(arr) {
$.each(arr, function(index, item) {
arr[index] = parseInt(item.replace('"id":', ''));
});
return Math.max.apply(Math, arr) + 1;
}
return 1;
}
var addMenuItem = function(obj) {
$('#menu-items').nestable('add', {
"id": getNewId($(".menu-items-field").val()),
"content": obj.name,
"name": obj.name,
"url": obj.url,
"url_type" : obj.url_type,
"open_in_new_tab": obj.open_in_new_tab,
"icon": obj.icon,
"view_permission_id": obj.view_permission_id
});
$(".menu-items-field").val(JSON.stringify($('#menu-items').nestable('serialise')));
}
var editMenuItem = function(obj) {
var newObject = {
"id": obj.id,
"content": obj.name,
"name": obj.name,
"url": obj.url,
"url_type": obj.url_type,
"open_in_new_tab": obj.open_in_new_tab,
"icon": obj.icon,
"view_permission_id": obj.view_permission_id
};
var menuItems = $("#menu-items").nestable('serialise');
var itemData;
$.each(menuItems, function(index, item){
itemData = findItemById(item, id);
if(itemData) { return false; }
});
if(itemData.children) {
newObject.children = itemData.children;
}
$('#menu-items').nestable('replace', newObject);
$(".menu-items-field").val(JSON.stringify($('#menu-items').nestable('serialise')));
}
$(document).on("submit", "#menu-add-custom-url", function(e){
e.preventDefault();
var formData = $(this).serializeArray().reduce(function(obj, item) {
obj[item.name] = item.value;
return obj;
}, {});
if(formData.name.length > 0) {
if(formData.id.length > 0) {
editMenuItem(formData);
} else {
addMenuItem(formData);
}
$("#showMenuModal").modal("hide");
}
});
$(document).on("click", ".add-module-to-menu", function(){
var dataObj = {
id: $(this).attr("data-id"),
name: $(this).attr("data-name"),
url: $(this).attr("data-url"),
url_type: $(this).attr("data-url_type"),
open_in_new_tab: $(this).attr("data-open_in_new_tab"),
view_permission_id: $(this).attr("data-view_permission_id"),
}
addMenuItem(dataObj);
});
var findItemById = function(item, id) {
if(item.id == id) {
return item;
}
var found = false;
var foundItem;
if(item.children){
$.each(item.children, function(index, childItem){
foundItem = findItemById(childItem, id);
if(foundItem)
{
console.log(foundItem);
found = true;
return false;
}
});
}
if(found)
{
return foundItem;
}
return null;
};
$(document).ready(function(){
$(document).on("click", ".edit-menu-item", function() {
id = $(this).parents(".dd-item").first().attr("data-id");
$("#showMenuModal").modal("show");
var menuItems = $("#menu-items").nestable('serialise');
var itemData;
$.each(menuItems, function(index, item){
itemData = findItemById(item, id);
//console.log(itemData);
if(itemData) { return false; }
});
if(itemData.id != undefined && itemData.id == id)
{
setTimeout(function() {
$("#showMenuModal").find(".modal-dialog .modal-content .modal-header .modal-title").html("Edit: "+itemData.name);
$(document).find("#showMenuModal .mi-id").val(itemData.id);
$(document).find("#showMenuModal .mi-name").val(itemData.name);
$(document).find("#showMenuModal .mi-url").val(itemData.url);
$(document).find("#showMenuModal .mi-url_type_"+itemData.url_type).prop("checked", true);
if(itemData.open_in_new_tab == 1) {
$(document).find("#showMenuModal .mi-open_in_new_tab").prop("checked", true);
}
$(document).find("#showMenuModal .mi-icon").val(itemData.icon);
if(itemData.view_permission_id) {
$(document).find("#showMenuModal .mi-view_permission_id").val(itemData.view_permission_id);
} else {
$(document).find("#showMenuModal .view-permission-block").remove();
}
$(document).find("#menu-add-custom-url").removeClass("hidden");
}, 500 );
return;
}
});
$(document).on("click", ".remove-menu-item", function() {
$("#menu-items").nestable('remove', $(this).parents(".dd-item").first().attr("data-id"));
$(".menu-items-field").val(JSON.stringify($("#menu-items").nestable('serialise')));
});
});
Backend.Menu.selectors.formUrl = "{{route('admin.menus.getform')}}";
Backend.Menu.init();
</script>
@endsection
webpack.mix.js
View file @ 009599af
......@@ -21,6 +21,7 @@ mix.sass('resources/assets/sass/frontend/app.scss', 'public/css/frontend.css')
'public/js/select2/select2.css',
'public/css/bootstrap.min.css',
'public/css/custom-style.css',
'public/css/loader.css',
'public/css/bootstrap-datetimepicker.min.css'
], 'public/css/backend-custom.css')
.js([
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Technounit-GROUP 2023