Bài 20: Cập nhật js Thêm vai trò, Thêm keycode cho màn hình thêm roles

codersulution Thứ Bảy, tháng 9 17, 2022

Cập nhật js Thêm vai trò

- Vào resoucer => views => admin => role =>add.blade.php

<!-- Stored in resources/views/child.blade.php -->

@extends('layouts.admin')

@section('title')
    <title>Trang chủ</title>
@endsection

@section('css')
    <link rel="stylesheet" href="{{asset('admins/role/add/add.css')}}">
@endsection

@section('js')
    <script src="{{asset('admins/role/add/add.js')}}"></script>
@endsection

@section('content')
    <div class="content-wrapper">
        @include('partials.content-header',['name'=>'Roles', 'key'=>'Add']);
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <form action="" method="post" enctype="multipart/form-data" style="width: 100%">
                        <div class="col-md-12">
                            @csrf
                            <div class="form-group">
                                <label>Tên vai trò</label>
                                <input class="form-control "
                                       name="name"
                                       placeholder="Nhập tên vai trò"
                                       value="{{old('name')}}"
                                >

                            </div>
                            <div class="form-group">
                                <label>Mô tả vai trò</label>
                                <textarea name="display_name"
                                          rows="4"
                                          class="form-control "
                                > {{old('display_name')}}</textarea>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="row">
                                @foreach($permissionsParent as $permissionsParentItem)
                                <div class="card boder-primary mb-3 col-md-12">
                                    <div class="card-header">
                                        <label>
                                            <input type="checkbox" value="" class="checkbox_wapper">
                                        </label>
                                        Module {{ $permissionsParentItem->name }}
                                    </div>
                                    <div class="row">
                                        @foreach($permissionsParentItem->permissionChildrent as $permissionChildrentItem)
                                            <div class="card-body text-primary col-md-3">
                                                <h5 class="card-title">
                                                    <label>
                                                        <input type="checkbox" name="permission_id[]"
                                                               class="checkbox_childrent"
                                                               value="{{$permissionChildrentItem->id}}">
                                                    </label>
                                                    {{$permissionChildrentItem->name}}
                                                </h5>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

- Vào public => admins => role =>add.css

.card-header{
    background-color: #00ec67;
}
input[type="checkbox"]{
    transform: scale(1.2);
}

- Vào public => admins => role =>add.js

$('.checkbox_wapper').on('click',function () {
    $(this).parents('.card').find('.checkbox_childrent').prop('checked', $(this).prop('checked'));
});

- Kiểm tra:

Thêm keycode cho màn hình thêm roles

- Vào terminal chạy :

php artisan make:migration add_column_key_permission_table --table=permissions

- Vào file 2021_07_26_090856_add_column_key_permission_table.php

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class AddColumnKeyPermissionTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('permissions', function (Blueprint $table) {
            $table->string('key_code');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('permissions', function (Blueprint $table) {
            //
        });
    }
}