index.html.twig

{% extends 'layout_new.html.twig' %}

{% block stylesheets %}{% apply spaceless %}
    <link rel="stylesheet" href="{{asset('lib/select2/css/select2.min.css')}}">
{% endapply %}{% endblock %}

{% block title %}{% apply spaceless %}{{ title | upper }}{% endapply %}{% endblock %}

{% block page_title %}{% apply spaceless %}{{ title }}{% endapply %}{% endblock %}

{% block content %}{% apply spaceless %}
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ 'label.crud.list_title' | trans }} {{ title }}</h3>
                <div class="card-tools col-md-6">
                    <div class="input-group">
                        {% if is_granted('add', code_to_menu('USER')) %}
                            <div class="input-group-prepend">
                                <button type="button" class="btn btn-primary form-modal-action"><i class="fa fa-plus-circle"></i> {{ 'label.crud.add' | trans }}</button>
                            </div>
                        {% endif %}
                        <input type="text" name="table_search" class="form-control pull-right query-string" placeholder="{{ 'label.crud.search_text' | trans }}">
                        <div class="input-group-append">
                            <button type="submit" class="btn btn-danger search-action"><i class="fa fa-search-plus"></i> {{ 'label.crud.search' | trans }}</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <table id="table-content" class="table table-bordered table-hover table-striped">
                    <thead>
                        <tr>
                            <th class="text-center" style="width: 49px;">No</th>
                            <th class="text-center">{{ 'label.user.full_name' | trans }} <i data-sort="no" data-sort-field="fullName" class="fa fa-sort sortable sortable-default pull-right"></i></th>
                            <th class="text-center">{{ 'label.user.username' | trans }} <i data-sort="no" data-sort-field="username" class="fa fa-sort sortable pull-right"></i></th>
                            <th class="text-center">{{ 'label.user.group' | trans }} <i data-sort="no" data-sort-field="group.name" class="fa fa-sort sortable pull-right"></i></th>
                            <th class="text-center" style="width: 177px">{{ 'label.crud.action' | trans }}</th>
                        </tr>
                    </thead>
                    <tbody class="table-content">
                    </tbody>
                </table>
            </div>
            <div class="card-footer">
                <div class="float-left">
                    <button type="button" class="btn btn-danger refresh"><i class="fa fa-refresh"></i> {{ 'label.crud.refresh' | trans }}</button>
                </div>
                <div class="col-md-9 float-right pagination-box">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal modal-default" id="form-modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title form-title"></h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="semartForm" method="POST">
                    <input type="hidden" id="id" value="">
                    <div class="form-group">
                        <label for="role" class="control-label">{{ 'label.user.group' | trans }}</label>
                        <select class="form-control select2-static" id="group">
                            <option value="">---PILIH {{ 'label.user.group' | trans | upper }}---</option>
                            {% for i, data in groups %}
                                <option value="{{ data.id }}">{{ data.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="username" class="control-label">{{ 'label.user.full_name' | trans }}</label>
                        <input type="text" class="form-control" id="fullName" placeholder="{{ 'label.user.full_name' | trans }}">
                    </div>
                    <div class="form-group">
                        <label for="username" class="control-label">{{ 'label.user.username' | trans }}</label>
                        <input type="text" class="form-control" id="username" placeholder="{{ 'label.user.username' | trans }}">
                    </div>
                    <div class="form-group">
                        <label for="password" class="control-label">{{ 'label.user.password' | trans }}</label>
                        <input type="password" class="form-control" id="plainPassword" placeholder="{{ 'label.user.password' | trans }}">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn pull-left btn-warning" data-dismiss="modal">{{ 'label.crud.cancel' | trans }}</button>
                <button type="button" class="btn btn-danger save">{{ 'label.crud.save' | trans }}</button>
            </div>
        </div>
    </div>
</div>

{% include 'default/notification_modal.html.twig' %}
{% endapply %}{% endblock %}

{% block javascripts %}{% apply spaceless %}
<script src="{{ asset('lib/select2/js/select2.min.js') }}"></script>
<script>
    $(window).ready(function () {
        localStorage.setItem('csrf_token', '{{ csrf_token('APP_CSRF_TOKEN') }}');
        localStorage.setItem('cache_id', '{{ cacheId }}');

        $('.select2-static').select2();
        $('.query-string').val('');

        $(document).on('click', '.form-modal-action', function () {
            formReset();
            $('.form-title').html('{{ 'label.crud.add_title' | trans({'%title%': title }) }}');
            $('#form-modal').modal();
        });

        $(document).on('click', '.save', function () {
            let id = $('#id').val();
            let fullName = $('#fullName').val();
            let username = $('#username').val();
            let plainPassword = $('#plainPassword').val();
            let group = $('#group').val();

            $.post(Routing.generate('users_save'), {
                _csrf_token: localStorage.getItem('csrf_token'),
                _cache_id: localStorage.getItem('cache_id'),
                id: id,
                fullName: fullName,
                username: username,
                plainPassword: plainPassword,
                group: group
            }, function (response) {
                localStorage.setItem('csrf_token', response._csrf_token);
                if ('OK' === response.status) {
                    formReset();
                    $('#form-modal').modal('hide');

                    toastr['success']('{{ 'label.crud.save_message' | trans }}');

                    refreshTable(window.location.href, '{{ title }}');
                } else {
                    let listError = '<ul>';
                    $.each(response.errors, function (key, value) {
                        listError = listError + '<li><b> ' + value + '</b></li>';
                    });
                    listError = listError + '</ul>';

                    $('.error-body').html(listError);
                    $('.error-modal').modal();
                }
            });
        });

        $(document).on('click', '.edit', function () {
            let id = $(this).data('primary');

            $.get(Routing.generate('users_detail', {id : id}), function (response) {
                let data = JSON.parse(response);
                $('#id').val(data.id);
                $('#fullName').val(data.fullName);
                $('#username').val(data.username);
                $('#group').val(data.group.id);

                $('.select2-static').trigger('change');

                $('.form-title').html('{{ 'label.crud.edit_title' | trans({'%title%': title }) }}');
                $('#form-modal').modal();
            });
        });

        $(document).on('click', '.delete', function () {
            $('#primaryId').val($(this).data('primary'));
            $('.delete-modal').modal();
        });

        $(document).on('click', '.notif-delete', function () {
            $('.delete-modal').modal('hide');
            $.post(Routing.generate('users_remove', {id: $('#primaryId').val()}), {_csrf_token: localStorage.getItem('csrf_token')}, function (response) {

                toastr['success']('{{ 'label.crud.delete_message' | trans }}');

                refreshTable(Routing.generate('users_index'), '{{ title }}');

                localStorage.setItem('csrf_token', response._csrf_token);
            });
        });

        $(document).on('click', '.search-action', function () {
            let params = getQueriesString();

            params['q'] = $('.query-string').val();

            refreshTable(Routing.generate('users_index', params), '{{ title }}');
        });

        $(document).on('click', '.pagination-container a.btn-danger', function (e) {
            e.preventDefault();
            let url = jQuery(this).attr('href');

            refreshTable(url, '{{ title }}');
        });
    });
</script>
{% endapply %}{% endblock %}