246 lines
13 KiB
Plaintext
246 lines
13 KiB
Plaintext
@*
|
|
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";
|
|
}
|
|
|
|
<div class="row" id="app">
|
|
<div class="col-md-12 col-lg-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="col-md-12 col-lg-12">
|
|
<div v-if="moduleData">
|
|
<form v-on:submit.prevent="">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Settings</h5>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 mt-3">Module Name</label>
|
|
<div class="col-md-6">
|
|
<input type="text" class="form-control" name="moduleName" :value="moduleData.moduleName" readonly />
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 mt-3">Module Access</label>
|
|
<div class="col-md-6">
|
|
<select class="form-select shadow-none mt-3" name="allowedUserType" v-model="moduleData.allowedUserType" style="height: 36px; width: 100%">
|
|
<optgroup label="General">
|
|
<option value="Public">Public</option>
|
|
<option value="Registered User">Registered User</option>
|
|
</optgroup>
|
|
<optgroup label="Role">
|
|
<option v-for="(roleType, index) in roleData" :key="index" :value="roleType.name">{{ roleType.name }}</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div v-show="moduleData && moduleData.allowedUserType == 'Registered User'">
|
|
<div class="form-group row">
|
|
<label class="col-md-3 mt-3">Available Method</label>
|
|
<div class="col-md-3">
|
|
<select class="form-select shadow-none mt-3" name="allowedUserType" v-model="selectedModule" style="height: 36px; width: 100%">
|
|
<option v-for="(methods, index) in availableMethod" :key="index" :value="methods">{{ methods }}</option>
|
|
</select>
|
|
</div>
|
|
<button class="btn col-md-3 f-icon mt-3 d-flex align-items-center" style="height: 36px; width: auto">
|
|
<i class=" fas fa-plus-square fa-lg"></i> Add method
|
|
</button>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 mt-3">Add Method Rules</label>
|
|
<div class="col-md-9">
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li class="nav-item" role="presentation" v-for="(setMethod, index) in moduleData.methodAllowedUserType" :key="index">
|
|
<a :class="['nav-link', activeTab === index ? 'active' : '']"
|
|
:id="'simple-tab-' + index"
|
|
data-bs-toggle="tab"
|
|
:href="'#simple-tabpanel-' + index"
|
|
role="tab"
|
|
:aria-controls="'simple-tabpanel-' + index"
|
|
:aria-selected="activeTab === index ? 'true' : 'false'">
|
|
{{ setMethod.methodName }}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content pt-5" id="tab-content">
|
|
<div :class="['tab-pane', activeTab === index ? 'active' : '']" :id="'simple-tabpanel-' + index" role="tabpanel" :aria-labelledby="'simple-tab-' + index" v-for="(setMethod, index) in moduleData.methodAllowedUserType" :key="index">
|
|
<p>Tab {{ setMethod.methodName }} selected</p>
|
|
<div class="form-group row">
|
|
<label class="col-md-1">Role:</label>
|
|
<div class="col-md-6">
|
|
<select class="select2 form-select shadow-none mt-3" multiple="multiple" style="height: 36px; width: 100%" v-model="moduleData.methodAllowedUserType[index].allowedUserTypesArray
|
|
">
|
|
<option v-for="(roleType, index) in roleData" :key="index" :value="roleType.name">{{ roleType.name }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="border-top">
|
|
<div class="card-body">
|
|
<button type="button" class="btn btn-primary">
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</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">×</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" v-on:click="confirmDelete(selectedModule)">Confirm</a>
|
|
</div>
|
|
</div>
|
|
<div v-else><p>Loading...</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@section Scripts {
|
|
@{
|
|
await Html.RenderPartialAsync("_ValidationScriptsPartial");
|
|
}
|
|
<script>
|
|
</script>
|
|
<script>
|
|
const app = Vue.createApp({
|
|
data() {
|
|
return {
|
|
moduleData: null,
|
|
roleData: null,
|
|
controllerMethodData: null,
|
|
activeTab: null,
|
|
availableMethod: [],
|
|
selectedModule: null
|
|
};
|
|
},
|
|
mounted() {
|
|
this.fetchXModule();
|
|
this.fetchControllerMethodList();
|
|
},
|
|
watch: {
|
|
// Watching allowedUserType directly
|
|
// 'moduleData.allowedUserType'(newVal, oldVal) {
|
|
// console.log(`allowedUserType changed from ${oldVal} to ${newVal}`);
|
|
// }
|
|
'moduleData.allowedUserType'(newVal, oldVal) {
|
|
// console.log(`allowedUserType changed from ${oldVal} to ${newVal}`);
|
|
this.filterAvailableMethods();
|
|
}
|
|
},
|
|
methods: {
|
|
fetchXModule() {
|
|
var id = @Model.SettingId
|
|
fetch('/ModuleAPI/GetXModuleInformation?id=' + id, {
|
|
method: 'POST'
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
console.log(data);
|
|
if (data != null) {
|
|
this.moduleData = data;
|
|
|
|
this.fetchRoleList();
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('There was a problem with the fetch operation:', error);
|
|
});
|
|
},
|
|
fetchRoleList() {
|
|
fetch('/RoleAPI/GetRoleList', {
|
|
method: 'POST'
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
console.log(data);
|
|
if (data != null) {
|
|
this.roleData = data;
|
|
this.$nextTick(() => {
|
|
$(".select2").select2(); // Initialize Select2 after DOM update
|
|
});
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('There was a problem with the fetch operation:', error);
|
|
});
|
|
},
|
|
fetchControllerMethodList() {
|
|
var moduleName = '@Model.ModuleName'
|
|
fetch('/AdminAPI/GetClassAndMethodInformation?moduleName=' + moduleName, {
|
|
method: 'POST'
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
console.log(data);
|
|
if (data != null) {
|
|
this.controllerMethodData = data;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('There was a problem with the fetch operation:', error);
|
|
});
|
|
},
|
|
deleteModule(module) {
|
|
this.selectedModule = module; // Set selected user
|
|
$('#confirm-dialog').modal('show'); // Show the modal
|
|
},
|
|
confirmDelete(module) {
|
|
fetch('/ModuleAPI/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);
|
|
});
|
|
},
|
|
filterAvailableMethods() {
|
|
const moduleMethods = this.moduleData.methodAllowedUserType.map(method => method.methodName);
|
|
this.availableMethod = this.controllerMethodData.methods.filter(method => !moduleMethods.includes(method)); // exclude methods that are already in moduleMethods
|
|
},
|
|
}
|
|
})
|
|
$(function () {
|
|
app.mount('#app');
|
|
});
|
|
</script>
|
|
}
|