PSTW_CentralizeSystem/Views/Admin/ModuleSetting.cshtml

@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@model PSTW_CentralSystem.Models.ModuleSettingModel
@{
    ViewData["Title"] = "Module Setting";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<p>
    <a asp-action="CreateModule">Create New</a>
</p>
<div class="row" id="app">
    <div class="col-md-12 col-lg-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">{{module.moduleName}}</h4>
                <div class="col-md-12 col-lg-12">
                    <div v-if="moduleData">
                        <table class="table table-bordered border-primary">
                            <thead>
                                <tr>
                                    <th>
                                        ModuleName
                                    </th>
                                    <th>
                                        Access Type
                                    </th>
                                    <th>
                                        Configured Page
                                    </th>
                                    <th>
                                        Description
                                    </th>
                                    <th>
                                        ModuleStatus
                                    </th>
                                    <th>
                                        Action
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="module in moduleData">
                                    <td class="align-middle">
                                        {{module.moduleName}}
                                    </td>
                                    <td class="align-middle">
                                        {{module.allowedUserType}}
                                    </td>
                                    <td class="align-middle">
                                        <ul>
                                            <li v-for="(method, index) in module.methodAllowedUserType" :key="index">
                                                <strong>Method Name:</strong> {{ method.methodName }}<br>
                                                <strong>Allowed User Types:</strong>
                                                <span v-for="(userType, idx) in method.allowedUserTypesArray" :key="idx">
                                                    {{ userType }}<span v-if="idx < method.allowedUserTypesArray.length - 1">, </span>
                                                </span>
                                            </li>
                                        </ul>
                                    </td>
                                    <td class="align-middle">
                                        {{module.description}}
                                    </td>
                                    <td class="align-middle">
                                        <span>
                                            <i :class="{'far fa-lg fa-times-circle': module.moduleStatus === 0, 'far fa-lg fa-check-circle': module.moduleStatus === 1}"
                                               :style="{color: (module.moduleStatus === 0 ? 'red' : 'limegreen')}">
                                            </i>
                                        </span>
                                    </td>
                                    <td class="align-middle">
                                        <button class="btn btn-primary" v-on:click="editModule(module)">Edit</button> |
                                        <button class="btn btn-danger delete-button" v-on:click="deleteModule(module)">Delete</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div v-else><p>... Loading</p></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- MODAL -->
<div class="modal fade" id="confirm-dialog" tabindex="-1" role="dialog" aria-labelledby="confirm-dialog-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirm-dialog-title">Confirmation</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div v-if="selectedModule">
                <div class="modal-body">
                    <p>Are you sure you want to delete module {{ selectedModule.moduleName }}?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <input type="hidden" id="delete-id">
                    <a id="confirmButton" href="#" class="btn btn-danger" @@click="confirmDelete(selectedModule)">Confirm</a>
                </div>
            </div>
            <div v-else><p>Loading...</p></div>
        </div>
    </div>
</div>
@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    moduleData: null,
                    selectedModule: null
                };
            },
            mounted() {
               this.fetchModule();
            },
            methods: {
                fetchModule() {
                    fetch('/AdminAPI/GetModuleInformation', {
                        method: 'POST'
                    })
                        .then(response => response.json())
                        .then(data => {
                            console.log(data);
                            if (data.length > 0) {
                                this.moduleData = data.length ? data : [];
                            }
                        })
                        .catch(error => {
                            console.error('There was a problem with the fetch operation:', error);
                        });
                },
                editModule(module) {
                    // Check if the user ID exists
                    if (module.settingId) {
                        // Redirect the user to the edit user page
                        window.location.href = 'EditModule/' + module.settingId;
                    } else {
                        console.error('Module ID not found');
                    }
                },
                deleteModule(module) {
                    this.selectedModule = module; // Set selected user
                    $('#confirm-dialog').modal('show'); // Show the modal
                },
                confirmDelete(module) {
                    fetch('/AdminAPI/DeleteModule/' + module.settingId, {
                        method: 'POST'
                    })
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('Failed to delete module');
                            }
                            // Remove the deleted user from the userData array
                            const index = this.moduleData.findIndex(u => u.settingId === module.settingId);
                            if (index !== -1) {
                                alert("Module deleted successfully");
                                this.moduleData.splice(index, 1);
                            }
                            $('#confirm-dialog').modal('hide'); // Hide the modal after deletion
                        })
                        .catch(error => {
                            console.error('Failed to delete module with status:', error);
                        });
                }
            }
        })
        app.mount('#app');
    </script>
}