smms_law_re/resources/views/system/setting/RoleManager.blade.php

@extends('system.layouts.app')
@section('title', 'role_manager')
@section('css')
    <!-- Styles -->
    <style>
        label>.form-select {
            display: inline;
            width: auto;
        }
    </style>
@endsection

@section('content')
    @include('system.popup.Role.EditPopUp', ['permissions' => $permissions])
    @include('system.popup.Role.CreatePopUp', ['permissions' => $permissions])

    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-12 mt-3 d-flex justify-content-between">
                <h2 class="title">管理群組-清單</h2>
                @can('role-create')
                    <button onclick="roleCreatePopUp()" type="button" href="#" class="btn btn-sm btn-primary">新增管理群組</button>
                @endcan
            </div>



            <div class="col-12">
                <table id="roleTable" class="table table-striped table-bordered" style="width:100%">
                    <thead>
                        <tr>
                            <th>管理群組名稱</th>

                            <th>功能</th>
                        </tr>
                    </thead>
                    <tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @parent
    <!-- DataTable 用於v2的新版-->
    <script src="{{ asset('js/v2/datatables.min.js') }}"></script>
    <script>
        const config = {
            search: true, // Toggle search feature. Default: false
            creatable: false, // Creatable selection. Default: false
            clearable: false, // Clearable selection. Default: false
            maxHeight: '360px', // Max height for showing scrollbar. Default: 360px
            size: '', // Can be "sm" or "lg". Default ''
        }

        function roleDelete(id) {
            Swal.fire({
                title: '確定要刪除嗎?',
                text: "刪除後將無法復原!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
                confirmButtonText: '確定',
                cancelButtonText: '取消'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: `/api/role/${id}`,
                        type: "DELETE",
                        data: {},
                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: '刪除成功',
                                    showConfirmButton: false,
                                    timer: 1500
                                });
                                roleTable.ajax.reload(null, false);
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: '刪除失敗',
                                    text: response.message
                                });
                            }
                        },
                        error: function(xhr, status, error) {
                            Swal.fire({
                                icon: 'error',
                                title: '刪除失敗',
                                text: 'An error occurred. Please try again.'
                            });
                        }
                    });
                }
            })
        }

        // DataTable 初始化
        $(document).ready(function() {
            $.fn.dataTableExt.sErrMode = 'throw';
            // input 加入時間選擇
            $('input#search_fromdate').datetimepicker({
                format: 'YYYY-MM-DD'
            });
            $('input#search_todate').datetimepicker({
                format: 'YYYY-MM-DD'
            });

            roleTable = $('#roleTable').DataTable({
                "dom": "<'row'<'d-flex justify-content-start mt-2 mb-2' lf>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-12'<'d-flex justify-content-between' ip>>>",
                // 語系設定 UI介面中文化
                "language": {
                    "processing": "處理中...",
                    "loadingRecords": "載入中...",
                    "lengthMenu": "顯示 _MENU_ 項結果",
                    "zeroRecords": "沒有符合的結果",
                    "info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
                    "infoEmpty": "顯示第 0 至 0 項結果，共 0 項",
                    "infoFiltered": "(從 _MAX_ 項結果中過濾)",
                    "infoPostFix": "",
                    "search": "搜尋:",
                    "paginate": {
                        "first": "第一頁",
                        "previous": "上一頁",
                        "next": "下一頁",
                        "last": "最後一頁"
                    },
                    "aria": {
                        "sortAscending": ": 升冪排列",
                        "sortDescending": ": 降冪排列"
                    }
                },
                // 搜尋欄位 是否顯示
                searching: false,
                // searching: true,
                // 處理中 是否顯示
                processing: true,
                serverSide: true,
                // Ajax 取資料
                ajax: {
                    //processcheckStatus =0 未審
                    'url': "{{ route('api.role.index') }}",
                    'data': function(data) {},
                    'error': function() {
                        // roleTable.draw();
                    },
                },
                // 設定不提供排序條件的欄位(例如圖片)
                columnDefs: [{
                        orderable: false,
                        targets: [0]
                    }, {
                        visible: false,
                        targets: []
                    },
                    {
                        className: "dt-center",
                        targets: [0]
                    }
                ],
                order: [
                    [0, "desc"]
                ],
                // 設定 顯示在Table上的欄位
                columns: [
                    // 格式 data: 後端傳遞過來的 欄位名稱
                    {
                        data: 'display_name',
                        "render": function(data, type, JsonResultRow, meta) {
                            return `${JsonResultRow.display_name}`;
                        },
                    },

                    {
                        data: 'id',
                        "render": function(data, type, JsonResultRow, meta) {
                            editBtn = '';
                            @can('role-edit')
                                editBtn =
                                    `<button type="button" onclick="roleEditPopUp(${JsonResultRow.id})" href="#" class="btn btn-sm btn-primary">編輯</button>`;
                            @endcan

                            deleteBtn = '';
                            @can('role-delete')
                                deleteBtn =
                                    `<button type="button" onclick="roleDelete(${JsonResultRow.id})" href="#" class="btn btn-sm btn-danger">刪除</button>`;
                            @endcan

                            return `${editBtn} ${deleteBtn}`;
                        },
                    },

                ],
                initComplete: function() {
                    $('.selectpicker').selectpicker();
                    // dselect(document.querySelector('.violationcodeselect'), config)

                },
                drawCallback: function(settings) {
                    $('.selectpicker').selectpicker();
                    // dselect(document.querySelector('.violationcodeselect'), config)
                }
                // stripeClasses:['striped-odd','striped-even']
            });

        });
    </script>
@stop