Tổng quan

EzyPlatform đã cung cấp sẵn mã nguồn cho popup dạng confirm (sử dụng bootstrap) cho cả admin và web. Bạn sẽ cần import mã nguồn của popup vào template của mình, đồng thời bổ sung các mã javascript để thực thi sau khi người dùng xác nhận.

Với admin

Ví dụ bạn có chức năng xoá lớp học với nút bấm thế này:

<button class="btn btn-danger mb-2"
        th:attr="onclick=|elearning.onDeleteClassClick(${eclass.id})|">
    [[#{delete}]] <i class="fas fa-trash"></i>
</button>

Bạn sẽ cần import một confirm popup như thế này:

<th:block layout:fragment="modals">
    <th:block th:replace="~{fragments/prompt :: content(id='delete-class-modal', title=#{confirm}, body=${'body'}, confirmButton=#{delete}, closeButton=#{close})}" />
</th:block>

Và mã javascript thế này:

<script layout:fragment="scripts" th:inline="javascript">
/*<![CDATA[*/
ezyadmin.messages.do_you_want_to_delete_class_pid = /*[[#{do_you_want_to_delete_class_pid}]]*/;
/*]]>*/

// ==================== delete a class ============
elearning.onDeleteClassClick = function(classId) {
    elearning.selectedClassId = classId;
    $('#delete-class-modal-body-content')
        .text(
            ezyadmin
                .messages
                .do_you_want_to_delete_class_pid
                .replace('{0}', elearning.selectedClassId)
        );
    $('#delete-class-modal').modal('show');
}

elearning.onPromptConfirmed = function(modalId) {
    if (modalId == 'delete-class-modal') {
        elearning.deleteEClass();
    }
}

ezyadmin.deleteEClass = function() {
    $.ajax({
        type: 'DELETE',
        url: '/elearning/api/v1/classes/' + elearning.selectedClassId,
        success: function (data) {
            window.location = '/elearning/classes'
                + (ezyadmin.lang ? '?lang=' + ezyadmin.lang : '');
        },
        error: function (e) {
            ezyadmin.processGetApiErrors(e);
        }
    });
}

Khi người dùng nhấn nút thì hàm onDeleteClassClick sẽ được gọi, nó sẽ set nột dung cho popup và hiển thị. Khi người dùng xác nhận thì hàm deleteEClass sẽ được gọi.

Với web

Ví dụ bạn có chức năng xóa dự án với nút bấm thế này:

<button class="btn btn-solid btn-danger d-md-inline-block d-none btn-project-action"
        data-bs-toggle="modal" data-bs-target="#delete-project-modal">
    [[#{delete}]]
</button>

Bạn sẽ cần import một confirm popup thế này:

<th:block layout:fragment="modals">
    <th:block th:replace="~{ezycommon/prompt :: content(id='delete-project-modal', title=#{confirm}, body=${#messages.msg('do_you_want_to_delete_project_pname', project.displayName)}, confirmButton=#{delete}, closeButton=#{close})}" />
</th:block>

Và mã nguồn javascript sẽ thế này:

var onPromptConfirmed = function(modalId) {
    if (modalId == 'delete-project-modal') {
        deleteProject();
    } else {
        actProjectVersion(modalId);
    }
}

var deleteProject = function() {
    $.ajax({
        type: 'DELETE',
        url: '/api/v1/projects/' + projectId,
        success: function (data) {
            window.location = '/account/projects';
        },
        error: function (data, e) {
            ezyweb.processUpdateApiErrors({}, data);
        }
    });
}

Khi người dùng nhấn nút thì popup sẽ được hiển thị. Khi người dùng xác nhận thì hàm deleteProject sẽ được gọi.

Sử dụng popup xác nhận

Tổng quan

Với admin

Với web

Mục lục