Update and merge

This commit is contained in:
MOHD ARIFF 2024-12-02 09:39:41 +08:00
commit 961b8c6db5
5 changed files with 256 additions and 45 deletions

View File

@ -32,6 +32,74 @@ namespace PSTW_CentralSystem.Controllers.API
return Json(qcList); return Json(qcList);
} }
[HttpPost("addMethod")]
public async Task<IActionResult> AddMethod(int? id, string? module)
{
// Retrieve the module setting from the database
var moduleSetting = await _authDbContext.ModuleSettings
.Where(x => x.SettingId == id)
.FirstOrDefaultAsync();
if (moduleSetting == null)
{
return NotFound("Module setting not found");
}
// Initialize the list if null
if (moduleSetting.MethodAllowedUserType == null)
{
moduleSetting.MethodAllowedUserType = new List<MethodAllowedUserType>();
}
// Add the new module
moduleSetting.MethodAllowedUserType.Add(new MethodAllowedUserType
{
MethodName = module,
AllowedUserTypesArray = Array.Empty<string>()
});
// Save the changes to the database
_authDbContext.ModuleSettings.Update(moduleSetting);
await _authDbContext.SaveChangesAsync();
return Json(moduleSetting);
}
[HttpPost("saveData")]
public async Task<IActionResult> saveData([FromBody] ModuleSettingModel modelSettingList)
{
var qcList = await _authDbContext.ModuleSettings
.Where(x => x.SettingId == modelSettingList.SettingId)
.FirstOrDefaultAsync();
if (qcList != null)
{
qcList.ModuleName = modelSettingList.ModuleName;
qcList.AllowedUserType = modelSettingList.AllowedUserType;
if (modelSettingList.MethodAllowedUserType != null)
{
qcList.MethodAllowedUserType = modelSettingList.MethodAllowedUserType
.Select(m => new MethodAllowedUserType
{
MethodName = m.MethodName,
AllowedUserTypesArray = m.AllowedUserTypesArray
}).ToList();
}
qcList.ModuleStatus = modelSettingList.ModuleStatus;
qcList.Description = modelSettingList.Description;
_authDbContext.ModuleSettings.Update(qcList);
await _authDbContext.SaveChangesAsync();
}
return Json(qcList);
}
[HttpPost("AddModule")] [HttpPost("AddModule")]
public async Task<IActionResult> AddModule([FromBody] ModuleSettingModel module) public async Task<IActionResult> AddModule([FromBody] ModuleSettingModel module)
{ {

View File

@ -42,6 +42,12 @@ namespace PSTW_CentralSystem.Controllers
return View(moduleSettings); return View(moduleSettings);
} }
public IActionResult AddModule()
{
return View();
}
public IActionResult ModuleCreate() public IActionResult ModuleCreate()
{ {
return View(); return View();

View File

@ -3,7 +3,7 @@ Microsoft Visual Studio Solution File, Format Version 12.00
# Visual Studio Version 17 # Visual Studio Version 17
VisualStudioVersion = 17.11.35327.3 VisualStudioVersion = 17.11.35327.3
MinimumVisualStudioVersion = 10.0.40219.1 MinimumVisualStudioVersion = 10.0.40219.1
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "PSTW_CentralSystem", "PSTW_CentralSystem.csproj", "{1B3D8BB0-F297-4F4B-8C09-6D97CE5D44F1}" Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "PSTW_CentralSystem", "PSTW_CentralSystem.csproj", "{1B3D8BB0-F297-4F4B-8C09-6D97CE5D44F1}"
EndProject EndProject
Global Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution GlobalSection(SolutionConfigurationPlatforms) = preSolution

View File

@ -0,0 +1,93 @@

@{
ViewData["Title"] = "Add Module";
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">
<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" v-model="moduleData.ModuleName" />
</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>
</select>
</div>
</div>
</div>
<div class="border-top">
<div class="card-body">
<button type="button" class="btn btn-primary" v-on:click="saveData">
Add
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@section Scripts {
@{
await Html.RenderPartialAsync("_ValidationScriptsPartial");
}
<script>
</script>
<script>
const app = Vue.createApp({
data() {
return {
moduleData:{
ModuleName : null,
AllowedUserType : null,
MethodAllowedUserType : null,
ModuleStatus : "1",
Description : null,
}
};
},
methods: {
saveData() {
fetch('/ModuleAPI/AddModule', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(this.moduleData)
})
.then(response => {
if (!response.ok) {
throw new Error('Name module already exist');
}
alert('Module information saved successfully');
})
.catch(error => {
console.error('There was a problem with the update operation:', error);
alert('Failed to save data: ' + error.message);
});
}
}
})
$(function () {
app.mount('#app');
});
</script>
}

View File

@ -45,45 +45,45 @@
<option v-for="(methods, index) in availableMethod" :key="index" :value="methods">{{ methods }}</option> <option v-for="(methods, index) in availableMethod" :key="index" :value="methods">{{ methods }}</option>
</select> </select>
</div> </div>
<button class="btn col-md-3 f-icon mt-3 d-flex align-items-center" style="height: 36px; width: auto"> <button class="btn col-md-3 f-icon mt-3 d-flex align-items-center" style="height: 36px; width: auto" v-on:click="addMethod(selectedModule)">
<i class=" fas fa-plus-square fa-lg"></i>&ensp;Add method <i class=" fas fa-plus-square fa-lg"></i>&ensp;Add method
</button> </button>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-md-3 mt-3">Add Method Rules</label> <label class="col-md-3 mt-3">Add Method Rules</label>
<div class="col-md-9"> <div class="col-md-9">
<ul class="nav nav-tabs" role="tablist"> <ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation" v-for="(setMethod, index) in moduleData.methodAllowedUserType" :key="index"> <li class="nav-item" role="presentation" v-for="(setMethod, index) in moduleData.methodAllowedUserType" :key="index">
<a :class="['nav-link', activeTab === index ? 'active' : '']" <a :class="['nav-link', activeTab === index ? 'active' : '']"
:id="'simple-tab-' + index" :id="'simple-tab-' + index"
data-bs-toggle="tab" data-bs-toggle="tab"
:href="'#simple-tabpanel-' + index" :href="'#simple-tabpanel-' + index"
role="tab" role="tab"
:aria-controls="'simple-tabpanel-' + index" :aria-controls="'simple-tabpanel-' + index"
:aria-selected="activeTab === index ? 'true' : 'false'"> :aria-selected="activeTab === index ? 'true' : 'false'">
{{ setMethod.methodName }} {{ setMethod.methodName }}
</a> </a>
</li> </li>
</ul> </ul>
<div class="tab-content pt-5" id="tab-content"> <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"> <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> <p>Tab {{ setMethod.methodName }} selected</p>
<div class="form-group row"> <div class="form-group row">
<label class="col-md-1">Role:</label> <label class="col-md-1">Role:</label>
<div class="col-md-6"> <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"> <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> <option v-for="(roleType, index) in roleData" :key="index" :value="roleType.name">{{ roleType.name }}</option>
</select> </select>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
<div class="border-top"> <div class="border-top">
<div class="card-body"> <div class="card-body" v-on:click="saveData">
<button type="button" class="btn btn-primary"> <button type="button" class="btn btn-primary">
Save Save
</button> </button>
@ -141,7 +141,7 @@
mounted() { mounted() {
this.fetchXModule(); this.fetchXModule();
this.fetchControllerMethodList(); this.fetchControllerMethodList();
}, },
watch: { watch: {
// Watching allowedUserType directly // Watching allowedUserType directly
// 'moduleData.allowedUserType'(newVal, oldVal) { // 'moduleData.allowedUserType'(newVal, oldVal) {
@ -156,20 +156,20 @@
fetchXModule() { fetchXModule() {
var id = @Model.SettingId var id = @Model.SettingId
fetch('/ModuleAPI/GetXModuleInformation?id=' + id, { fetch('/ModuleAPI/GetXModuleInformation?id=' + id, {
method: 'POST' method: 'POST'
})
.then(response => response.json())
.then(data => {
console.log(data);
if (data != null) {
this.moduleData = data;
this.fetchRoleList();
}
}) })
.catch(error => { .then(response => response.json())
console.error('There was a problem with the fetch operation:', error); .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() { fetchRoleList() {
fetch('/RoleAPI/GetRoleList', { fetch('/RoleAPI/GetRoleList', {
@ -181,7 +181,10 @@
if (data != null) { if (data != null) {
this.roleData = data; this.roleData = data;
this.$nextTick(() => { this.$nextTick(() => {
$(".select2").select2(); // Initialize Select2 after DOM update $(".select2").select2().on("change", (event) => {
const index = $(event.target).closest('.tab-pane').index();
this.moduleData.methodAllowedUserType[index].allowedUserTypesArray = $(event.target).val();
});
}); });
} }
}) })
@ -191,7 +194,7 @@
}, },
fetchControllerMethodList() { fetchControllerMethodList() {
var moduleName = '@Model.ModuleName' var moduleName = '@Model.ModuleName'
fetch('/AdminAPI/GetClassAndMethodInformation?moduleName=' + moduleName, { fetch('/AdminAPI/GetClassAndMethodInformation?moduleName=' + moduleName, {
method: 'POST' method: 'POST'
}) })
.then(response => response.json()) .then(response => response.json())
@ -229,9 +232,50 @@
console.error('Failed to delete module with status:', error); console.error('Failed to delete module with status:', error);
}); });
}, },
addMethod(module) {
var id = @Model.SettingId;
fetch('/ModuleAPI/addMethod?id=' + id + '&module=' + encodeURIComponent(module), {
method: 'POST'
})
.then(response => {
if (!response.ok) {
throw new Error('HTTP error! status: ' + response.status);
}
return response.json();
})
.then(data => {
console.log('Method added successfully:', data);
alert('Method added successfully');
this.fetchXModule(); // Refresh the module data
})
.catch(error => {
console.error('There was a problem when adding the module operation:', error);
alert('Failed to add method: ' + error.message);
});
},
saveData() {
fetch('/ModuleAPI/saveData', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(this.moduleData)
})
.then(response => {
if (!response.ok) {
throw new Error('Failed to save module information');
}
alert('Module information saved successfully');
})
.catch(error => {
console.error('There was a problem with the update operation:', error);
alert('Failed to save data: ' + error.message);
});
},
filterAvailableMethods() { filterAvailableMethods() {
const moduleMethods = this.moduleData.methodAllowedUserType.map(method => method.methodName); 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 this.availableMethod = this.controllerMethodData.methods.filter(method => !moduleMethods.includes(method)); // exclude methods that are already in moduleMethods
}, },
}, },
}) })