245 lines
14 KiB
Plaintext
245 lines
14 KiB
Plaintext
|
|
@{
|
|
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">
|
|
<select class="form-select" name="ModuleName" v-model="moduleData.moduleName" >
|
|
<option value="" disabled selected>Select Module</option>
|
|
<option v-for="(item, index) in controllerMethodData" :key="index" :value="item.controller">{{ item.controller }} {{ item.module ? ' - [ ' + item.module + ' ]' : '' }}</option>
|
|
</select>
|
|
</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%">
|
|
<option value="" disabled selected>Please select</option>
|
|
<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.moduleName != '' && 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="(item, index) in availableMethod.methods" :key="index" :value="item">{{ item }}</option>
|
|
</select>
|
|
</div>
|
|
<button :class="['btn','col-md-3','f-icon','mt-3','d-flex','align-items-center',
|
|
selectedModule !== null && selectedModule !== undefined && selectedModule !== ''? 'text-primary': 'text-danger']"
|
|
style="height: 36px; width: auto" v-on:click="addMethod(selectedModule)"><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" v-model="moduleData.methodAllowedUserType[index].allowedUserTypesArray" style="height: 50px; width: 100%">
|
|
<option value="All">All Registered User</option>
|
|
<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" 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 : "",
|
|
allowedUserType : "",
|
|
methodAllowedUserType : [],
|
|
moduleStatus : "1",
|
|
description : null,
|
|
},
|
|
roleData: null,
|
|
controllerMethodData: null,
|
|
activeTab: null,
|
|
availableMethod: {
|
|
methods: [],
|
|
},
|
|
selectedModule: null
|
|
};
|
|
},
|
|
mounted(){
|
|
this.fetchControllerMethodList();
|
|
this.fetchRoleList();
|
|
},
|
|
watch: {
|
|
'moduleData.moduleName'(newVal, oldVal) {
|
|
this.filterAvailableMethods();
|
|
},
|
|
'moduleData.allowedUserType'(newVal, oldVal) {
|
|
this.filterAvailableMethods();
|
|
},
|
|
'moduleData.methodAllowedUserType': {
|
|
handler(newValue) {
|
|
if (Array.isArray(newValue) && newValue.length > 0) {
|
|
this.$nextTick(() => {
|
|
$('#tab-content .select2')
|
|
.select2({
|
|
placeholder: 'Select a role',
|
|
allowClear: true,
|
|
})
|
|
.off("change") // Clear previous listeners to avoid duplication
|
|
.on("change", (event) => {
|
|
const $target = $(event.target);
|
|
const panelId = $target.closest('.tab-pane').attr('id');
|
|
const index = this.moduleData.methodAllowedUserType.findIndex(
|
|
(method) =>
|
|
`simple-tabpanel-${this.moduleData.methodAllowedUserType.indexOf(method)}` === panelId
|
|
);
|
|
|
|
if (index !== -1) {
|
|
this.moduleData.methodAllowedUserType[index].allowedUserTypesArray = $target.val() || [];
|
|
console.log(this.moduleData.methodAllowedUserType[index].allowedUserTypesArray);
|
|
}
|
|
else {
|
|
console.warn("Failed to find the corresponding tab-pane index.");
|
|
}
|
|
});
|
|
// console.log("Select2 reinitialized for updated methodAllowedUserType.");
|
|
});
|
|
}
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
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');
|
|
window.history.back();
|
|
})
|
|
.catch(error => {
|
|
console.error('There was a problem with the update operation:', error);
|
|
alert('Failed to save data: ' + error.message);
|
|
})
|
|
.finally(() => {
|
|
|
|
});
|
|
},
|
|
fetchControllerMethodList() {
|
|
fetch('/AdminAPI/GetListClassAndMethodInformation', {
|
|
method: 'POST'
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data != null) {
|
|
this.controllerMethodData = data;
|
|
}
|
|
})
|
|
.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 => {
|
|
if (data != null) {
|
|
this.roleData = data;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('There was a problem with the fetch operation:', error);
|
|
});
|
|
},
|
|
addMethod(selectedModule){
|
|
this.selectedModule = null;
|
|
if(selectedModule !== null && selectedModule !== undefined && selectedModule !== ""){
|
|
this.availableMethod.methods = this.availableMethod.methods.filter(method => method !== selectedModule)
|
|
this.moduleData.methodAllowedUserType.push({
|
|
methodName: selectedModule,
|
|
allowedUserTypesArray: []
|
|
});
|
|
}
|
|
},
|
|
filterAvailableMethods() {
|
|
this.moduleData.methodAllowedUserType=[];
|
|
const moduleMethods = this.controllerMethodData.find(controller => controller.controller === this.moduleData.moduleName);
|
|
this.availableMethod.methods = moduleMethods.methods;
|
|
},
|
|
},
|
|
});
|
|
$(function () {
|
|
app.mount('#app');
|
|
});
|
|
</script>
|
|
}
|