2. 7 Edit menu element (ok)
C:\xampp82\htdocs\testnet\resources\js\app.js
import './bootstrap';
import './menu-edit';C:\xampp82\htdocs\testnet\resources\js\menu-edit.js
let self = this;
this.buildSelectParent = function (data) {
let result = '<option value="none">Do not have parent</option>';
let $parentId = document.getElementById("parentId").value;
let $menuElementId = document.getElementById("menuElementId").value;
for (let i = 0; i < data.length; i++) {
if (data[i].id != $menuElementId) {
if (data[i].id == $parentId) {
result +=
'<option value="' +
data[i].id +
'" selected>' +
data[i].name +
"</option>";
} else {
result +=
'<option value="' + data[i].id + '">' + data[i].name + "</option>";
}
}
}
return result;
};
this.updateSelectParent = function () {
axios
.get("/menu/element/get-parents/" + document.getElementById("menu").value)
.then(function (response) {
document.getElementById("parent").innerHTML = self.buildSelectParent(
response.data
);
})
.catch(function (error) {
// handle error
console.log(error);
});
};
this.toggleDivs = function () {
let value = document.getElementById("type").value;
if (value === "title") {
document.getElementById("div-href").classList.add("d-none");
document.getElementById("div-dropdown-parent").classList.add("d-none");
document.getElementById("div-icon").classList.add("d-none");
} else if (value === "link") {
document.getElementById("div-href").classList.remove("d-none");
document.getElementById("div-dropdown-parent").classList.remove("d-none");
document.getElementById("div-icon").classList.remove("d-none");
} else {
document.getElementById("div-href").classList.add("d-none");
document.getElementById("div-dropdown-parent").classList.remove("d-none");
document.getElementById("div-icon").classList.remove("d-none");
}
};
this.updateSelectParent();
this.toggleDivs();
document.getElementById("menu").onchange = function () {
self.updateSelectParent();
};
document.getElementById("type").onchange = function () {
self.toggleDivs();
};
C:\xampp82\htdocs\testnet\resources\views\elements\edit.blade.php
@extends('layouts.main')
@section('main')
<div class="container-fluid">
<div class="fade-in">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<h4>Edit menu element</h4>
</div>
<div class="card-body">
@if(Session::has('message'))
<div class="alert alert-success" role="alert">{{ Session::get('message') }}</div>
@endif
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('menu.element.update') }}" method="POST">
@csrf
<input type="hidden" name="id" value="{{ $menuElement->id }}" id="menuElementId" />
<table class="table table-striped table-bordered datatable aaa2">
<tbody>
<tr>
<th>
Menu
</th>
<td>
<select class="form-control" name="menu" id="menu">
@foreach($menulist as $menu1)
@if($menu1->id == $menuElement->menu_id )
<option value="{{ $menu1->id }}" selected>{{ $menu1->name }}</option>
@else
<option value="{{ $menu1->id }}">{{ $menu1->name }}</option>
@endif
@endforeach
</select>
</td>
</tr>
<tr>
<th>
User Roles
</th>
<td>
<table class="table">
@foreach($roles as $role)
<tr>
<td>
@php
$temp = false;
@endphp
@foreach($menuroles as $menurole)
@if($role == $menurole->role_name)
@php
$temp = true;
@endphp
@endif
@endforeach
@if($temp === true)
<input checked type="checkbox" name="role[]" value="{{ $role }}" class="form-check-input" />
@else
<input type="checkbox" name="role[]" value="{{ $role }}" class="form-check-input" />
@endif
{{ $role }}
</td>
</tr>
@endforeach
</table>
</td>
</tr>
<tr>
<th>
Name
</th>
<td>
<input type="text" class="form-control" name="name" value="{{ $menuElement->name }}"
placeholder="Name" />
</td>
</tr>
<tr>
<th>
Type
</th>
<td>
<select class="form-control" name="type" id="type">
@if($menuElement->target === 'link')
<option value="link" selected>Link</option>
@else
<option value="link">Link</option>
@endif
@if($menuElement->target === 'title')
<option value="title" selected>Title</option>
@else
<option value="title">Title</option>
@endif
@if($menuElement->target === 'dropdown')
<option value="dropdown" selected>Dropdown</option>
@else
<option value="dropdown">Dropdown</option>
@endif
</select>
</td>
</tr>
<tr>
<th>
Other
</th>
<td>
<div id="div-href">
Slug:
<input type="text" name="slug" class="form-control" placeholder="slug" value="{{ $menuElement->slug }}" />
</div>
<br><br>
<div id="div-dropdown-parent">
Dropdown parent:
<input type="hidden" id="parentId" value="{{ $menuElement->parent_id }}" />
<select class="form-control" name="parent" id="parent">
</select>
</div>
<br><br>
<div id="div-icon">
Icon - Find icon class in:
<a href="https://coreui.io/docs/icons/icons-list/#coreui-icons-free-502-icons" target="_blank">
CoreUI icons documentation
</a>
<br>
<input class="form-control" name="icon" type="text"
placeholder="CoreUI Icon class - example: cil-bell" value="{{ $menuElement->icon }}">
</div>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" type="submit">Save</button>
<a class="btn btn-primary" href="{{ route('menu.element.index',$menuElement->menu_id) }}">Return</a>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('script')
@vite(['resources/js/app.js'])
@endsectionC:\xampp82\htdocs\testnet\routes\web.php
<?php
use App\Http\Controllers\BannerController;
use App\Http\Controllers\HomeController;
use App\Http\Controllers\MenuController;
use App\Http\Controllers\UsersController;
use App\Http\Controllers\MenuElementController;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::group(['middleware' => 'get.menu'], function () {
Route::get('/', function () {
return view('dashboard.homepage');
});
Auth::routes();
Route::get('/home', [HomeController::class, 'index'])->name('home');
Route::group(['middleware' => ['role:admin']], function () {
Route::get('/test-role-admin', function () {
echo "Hello Admin";
});
Route::resource('users', UsersController::class)->except(['create', 'store']);
});
Route::group(['prefix' => 'menu/menu'], function () {
Route::get('/', [MenuController::class, 'index'])->name('menu.menu.index');
Route::get('show/{id}', [MenuController::class, 'show'])->name('menu.menu.show');
Route::get('edit/{id}', [MenuController::class, 'edit'])->name('menu.menu.edit');
Route::post('update', [MenuController::class, 'update'])->name('menu.menu.update');
Route::get('create', [MenuController::class, 'create'])->name('menu.menu.create');
Route::post('store', [MenuController::class, 'store'])->name('menu.menu.store');
Route::post('destroy/{id}', [MenuController::class, 'destroy'])->name('menu.menu.destroy');
});
Route::group(['prefix' => 'menu/element'], function () {
Route::get('/', [MenuElementController::class, 'index'])->name('menu.element.index');
Route::get('/show/{id}', [MenuElementController::class, 'show'])->name('menu.element.show');
Route::get('/{id}/edit', [MenuElementController::class, 'edit'])->name('menu.element.edit');
Route::get('/destroy/{id}', [MenuElementController::class, 'destroy'])->name('menu.element.destroy');
Route::post('/update', [MenuElementController::class, 'update'])->name('menu.element.update');
Route::get('/get-parents/{id}', [MenuElementController::class, 'getParents'])->name('menu.element.getParents');
});
});
Previous2.6.2.3 Sử dụng copyfiles, copy-assets copy thư mục fonts sang thư mục dist (ok)Next2.8 Change Menu (ok)
Last updated
