Wappler_Access/views/wadmin/usermanage.ejs

<!-- Wappler include head-page="layouts/admin" is="dmx-app" id="usermanage" appConnect="local" components="{dmxBootstrap5TableGenerator:{},dmxTyped:{},dmxBootstrap5Modal:{},dmxFormRepeat:{},dmxFormatter:{},dmxAutocomplete:{},dmxValidator:{}}" bootstrap5="cdn" bootstrap_icons="cdn" fontawesome_5="cdn" -->
<dmx-value id="var_deleteuser" dmx-on:updated="conn_deleterole.load({})"></dmx-value>
<dmx-serverconnect id="conn_deleterole" url="/api/roles/delete" dmx-on:done="conn_users.load({},true)"></dmx-serverconnect>
<dmx-serverconnect id="conn_userinrole" url="/api/Users/userinrole" noload="true"></dmx-serverconnect>
<dmx-serverconnect id="conn_permissions" url="/api/roles/permissions"></dmx-serverconnect>
<dmx-serverconnect id="conn_depts" url="/api/roles/depts"></dmx-serverconnect>
<dmx-serverconnect id="conn_userroles" url="/api/Users/readroles" noload="true"></dmx-serverconnect>
<dmx-serverconnect id="conn_userdepts" url="/api/Users/readdepts"></dmx-serverconnect>
<dmx-serverconnect id="conn_singleuser" url="/api/Users/read" noload="true"></dmx-serverconnect>
<meta name="ac:route" content="/wadmin/usermanage">
<dmx-serverconnect id="conn_users" url="/api/Users/search" dmx-param:filter="inp_search.value"></dmx-serverconnect>
<dmx-serverconnect id="conn_deleteuser" url="/api/Users/delete" dmx-param:id="var_deleteuser.value" dmx-on:done="conn_users.load({},true)" noload="true"></dmx-serverconnect>
<dmx-serverconnect id="conn_userroles" url="/api/Users/userroles"></dmx-serverconnect>
<div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1" dmx-on:hide-bs-modal="serverconnectform1.reset()">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <form is="dmx-serverconnect-form" id="serverconnectform1" method="post" action="/api/Users/update" dmx-generator="bootstrap5" dmx-form-type="horizontal" dmx-populate="conn_singleuser.data.query" dmx-on:success="conn_users.load({});serverconnectform1.reset();modal1.hide()">
                                <input type="hidden" name="id" id="inp_id" dmx-bind:value="conn_singleuser.data.query.id" dmxorgdomid="d468">
                                <div class="form-group mb-3 row">
                                    <label for="inp_firstname" class="col-sm-2 col-form-label">Firstname</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="inp_firstname" name="firstname" dmx-bind:value="conn_singleuser.data.query.firstname" aria-describedby="inp_firstname_help" placeholder="Enter Firstname" dmxorgdomid="d472">
                                    </div>
                                </div>
                                <div class="form-group mb-3 row">
                                    <label for="inp_lastname" class="col-sm-2 col-form-label">Lastname</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="inp_lastname" name="lastname" dmx-bind:value="conn_singleuser.data.query.lastname" aria-describedby="inp_lastname_help" placeholder="Enter Lastname" dmxorgdomid="d476">
                                    </div>
                                </div>
                                <div class="form-group mb-3 row">
                                    <label for="inp_newuseremail" class="col-sm-2 col-form-label">Email</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="inp_email" name="email" dmx-bind:value="conn_singleuser.data.query.email" aria-describedby="inp_email_help" placeholder="Enter Email" dmxorgdomid="d480">
                                    </div>
                                </div>
                                <div class="form-group mb-3 row">
                                    <legend class="col-sm-2 col-form-label">Validated</legend>
                                    <div class="col-sm-10 align-self-center">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="1" id="inp_validated" name="validated" dmx-bind:value="conn_singleuser.data.query.validated" dmxorgdomid="d485" dmx-bind:checked="conn_singleuser.data.query.validated">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group mb-3 row">
                                    <div class="text-end col-sm-12">
                                        <button type="submit" class="btn btn-primary" dmx-bind:value="conn_singleuser.data.query.Save" dmx-bind:disabled="state.executing" dmxorgdomid="d490">Save <span class="spinner-border spinner-border-sm" role="status" dmx-show="state.executing" dmxorgdomid="d491"></span></button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<div class="modal w-100" id="modal_permissiosn" is="dmx-bs5-modal" tabindex="-1" dmx-on:hide-bs-modal="frm_dept.reset();frm_role.reset()">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Permissions</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <form id="frm_dept" is="dmx-serverconnect-form" method="post" action="/api/roles/create" dmx-on:success="conn_userdepts.load({userid: inp_deptuserid.value})">
                                <input id="inp_deptuserid" name="userid" class="form-control" type="hidden">
                                <div class="form-group md-3"> <label for="inp_department" class="form-label">Department</label>
                                    <input type="text" class="form-control" id="inp_department" name="roleid" aria-describedby="input1_help" placeholder="Enter some text" is="dmx-autocomplete" dmx-bind:data="conn_depts.data.query" optiontext="name" optionvalue="id" optionsearch="name">
                                </div>
                                <button id="btn_adddepartment" class="btn btn-primary" type="submit">Add</button>
                            </form>
                        </div>
                        <div class="col">
                            <form id="frm_role" is="dmx-serverconnect-form" method="post" action="/api/roles/create" dmx-on:success="conn_userroles.load({id: inp_roleuserid.value})">
                                <input id="inp_roleuserid" name="userid" type="hidden" class="form-control">
                                <div class="form-group md-3"> <label for="inp_role" class="form-label">Role</label>
                                    <input type="text" class="form-control" id="inp_role" name="roleid" aria-describedby="input1_help" placeholder="Enter some text" is="dmx-autocomplete" dmx-bind:data="conn_permissions.data.query" optiontext="name" optionvalue="id" optionsearch="name">
                                </div>
                                <button id="btn_addrole" class="btn btn-primary" type="submit">Button</button>
                            </form>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover table-sm">
                                    <thead>
                                        <tr>
                                            <th scope="row"></th>
                                            <th scope="row" class="visually-hidden">idHeader</th>
                                            <th class="visually-hidden">Role IdId</th>
                                            <th>Name</th>
                                        </tr>
                                    </thead>
                                    <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="conn_userdepts.data.query" id="tableRepeat3">
                                        <tr>
                                            <td>
                                                <button id="btn_deletedept" class="btn btn-danger" dmx-on:click="conn_deleterole.load({id: id});conn_userdepts.load({userid: frm_dept.inp_deptuserid.value})">X</button>
                                            </td>
                                            <td dmx-text="id" class="visually-hidden"></td>
                                            <td dmx-text="roleid" class="visually-hidden"></td>
                                            <td dmx-text="name"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover table-sm">
                                    <thead>
                                        <tr>
                                            <th scope="row"></th>
                                            <th scope="row" class="visually-hidden">idHeader</th>
                                            <th class="visually-hidden">Role IdId</th>
                                            <th>Name</th>
                                        </tr>
                                    </thead>
                                    <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="conn_userroles.data.query" id="tableRepeat2">
                                        <tr>
                                            <td>
                                                <button id="btn_deleterole" class="btn btn-danger" dmx-on:click="conn_deleterole.load({id: id});conn_userroles.load({id: frm_role.inp_roleuserid.value})">X</button>
                                            </td>
                                            <td dmx-text="id" class="visually-hidden">Cell</td>
                                            <td dmx-text="rolid" class="visually-hidden"></td>
                                            <td dmx-text="name"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer text-end">
                <button id="btn_done" class="btn btn-primary" dmx-on:click="frm_role.reset();frm_dept.reset();modal_permissiosn.hide()">Done</button>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="modal_newuser" is="dmx-bs5-modal" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="frm_newuser" is="dmx-serverconnect-form" method="post" action="/api/Users/create" dmx-on:success="frm_newuser.reset();modal_newuser.hide();conn_users.load({})">
                    <div class="form-group md-3"> <label for="inp_newuseremail" class="form-label">Email Address</label>
                        <input type="text" class="form-control" id="inp_newuseremail" name="email" aria-describedby="input1_help" placeholder="email address">
                    </div>
                    <div class="form-group md-3"> <label for="inp_newuserdept" class="form-label">Department</label>
                        <input type="text" class="form-control" id="inp_newuserdept" name="department" aria-describedby="input1_help" placeholder="Enter some text" is="dmx-autocomplete" dmx-bind:data="conn_depts.data.query" optiontext="name+' '" optionvalue="id" optionsearch="name+' '" required="">
                    </div>
                    <button id="btn_addnewuser" class="btn btn-primary" type="submit">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="container mt-4">
    <div class="row">
        <div class="col">
            <div class="form-group mb-3 row">
                <label for="inp_search" class="col-sm-2 col-form-label">Search</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="inp_search" name="search" aria-describedby="input1_help" placeholder="Enter Keyword">
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <button id="btn_newuser" class="btn btn-secondary mt-3 mb-3 ms-1 me-1" dmx-on:click="modal_newuser.show()">New User</button>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover table-sm">
                    <thead>
                        <tr>
                            <th scope="row"></th>
                            <th scope="row"></th>
                            <th scope="row"></th>
                            <th>User ID</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Email</th>
                            <th>Validated</th>
                            <th scope="row">Dept</th>
                            <th scope="row">Roles</th>
                        </tr>
                    </thead>
                    <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="conn_users.data.query" id="tableRepeat1" key="id">
                        <tr>
                            <td>
                                <button id="btn_edituser" class="btn btn-success w-100" dmx-bind:value="id" dmx-on:click="conn_singleuser.load({id: id});modal1.show();conn_userroles.load({id: id})">
                                    <i class="fas fa-edit"></i></button>
                            </td>
                            <td>
                                <button id="btn_deleteuser" class="btn btn-danger w-100" dmx-on:click="var_deleteuser.setValue(id)">
                                    <i class="fas fa-trash-alt"></i></button>
                            </td>
                            <td>
                                <button id="btn_userpermissions" class="btn w-100 btn-warning" dmx-on:click="modal_permissiosn.show();conn_userroles.load({id: id},true);conn_userdepts.load({userid: id});modal_permissiosn.frm_dept.inp_deptuserid.setValue(id);modal_permissiosn.frm_role.inp_roleuserid.setValue(id)">
                                    <i class="fas fa-user-tag"></i></button>
                            </td>
                            <td dmx-text="id"></td>
                            <td dmx-text="firstname"></td>
                            <td dmx-text="lastname"></td>
                            <td dmx-text="email"></td>
                            <td dmx-text="validated">
                            </td>
                            <td>
                                <ul class="list-group">
                                    <li class="list-group-item" id="rpt_departments">
                                        <div id="repeat1" is="dmx-repeat"></div>List item
                                    </li>
                                </ul>
                            </td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>