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'])
@endsection

C:\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');
  });
});

27MB

testnet-edit-menu-element.rar