Update and merge

Controllers/API/ModuleAPI.cs

@@ -32,6 +32,74 @@ namespace PSTW_CentralSystem.Controllers.API
             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")]
         public async Task<IActionResult> AddModule([FromBody] ModuleSettingModel module)
         {

Controllers/AdminController.cs

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

PSTW_CentralSystem.sln

@@ -3,7 +3,7 @@ Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio Version 17
 VisualStudioVersion = 17.11.35327.3
 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
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution

Views/Admin/AddModule.cshtml

@@ -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>
+}

Views/Admin/ModuleSetting.cshtml

@@ -45,45 +45,45 @@
                                                     <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">
+                                            <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
                                             </button>
                                         </div>
                                         <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 class="border-top">
-                                    <div class="card-body">
+                                    <div class="card-body" v-on:click="saveData">
                                         <button type="button" class="btn btn-primary">
                                             Save
                                         </button>
@@ -141,7 +141,7 @@
             mounted() {
                 this.fetchXModule();
                 this.fetchControllerMethodList();
-            }, 
+            },
             watch: {
                 // Watching allowedUserType directly
                 // 'moduleData.allowedUserType'(newVal, oldVal) {
@@ -156,20 +156,20 @@
                 fetchXModule() {
                     var id = @Model.SettingId
                         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() {
                     fetch('/RoleAPI/GetRoleList', {
@@ -181,7 +181,10 @@
                             if (data != null) {
                                 this.roleData = data;
                                 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() {
                     var moduleName = '@Model.ModuleName'
-                        fetch('/AdminAPI/GetClassAndMethodInformation?moduleName=' + moduleName, {
+                    fetch('/AdminAPI/GetClassAndMethodInformation?moduleName=' + moduleName, {
                         method: 'POST'
                     })
                         .then(response => response.json())
@@ -229,9 +232,50 @@
                             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() {
                     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
                 },
             },
         })