adds more filter options for the ProfilUpdateView

This commit is contained in:
SimonGschnell
2024-04-11 11:20:32 +02:00
parent 4fc4cd762d
commit 2b68831415
5 changed files with 62 additions and 62 deletions
@@ -480,9 +480,6 @@ class ProfilUpdate extends Auth_Controller
public function getProfilUpdateWithPermission($status = null)
{
// early return if no status has been passed as argument
if (!isset($status)) {
echo json_encode($this->ProfilUpdateModel->getProfilUpdateWithPermission());
+6 -2
View File
@@ -59,8 +59,12 @@ const profilApp = Vue.createApp({
//? use function syntax for provide so that we can access `this`
provide() {
return {
profilUpdateStates: Vue.computed(() => this.profilUpdateStates),
profilUpdateTopic: Vue.computed(() => this.profilUpdateTopic),
profilUpdateStates: Vue.computed(() =>
this.profilUpdateStates ? this.profilUpdateStates : null
),
profilUpdateTopic: Vue.computed(() =>
this.profilUpdateTopic ? this.profilUpdateTopic : null
),
setLoading: (newValue) => {
this.loading = newValue;
},
+22 -12
View File
@@ -3,22 +3,32 @@ import ProfilUpdateView from "../../components/Cis/ProfilUpdate/ProfilUpdateView
import Phrasen from "../../plugin/Phrasen.js";
Vue.$fhcapi = fhcapifactory;
const app = Vue.createApp({
components: {
['profil-update-view']:ProfilUpdateView,
["profil-update-view"]: ProfilUpdateView,
},
data() {
return {
}
},methods:{
}
profilUpdateStates: null,
};
},
provide() {
return {
profilUpdateStates: Vue.computed(() =>
this.profilUpdateStates ? this.profilUpdateStates : false
),
};
},
methods: {},
created() {
Vue.$fhcapi.ProfilUpdate.getStatus()
.then((response) => {
this.profilUpdateStates = response.data;
})
.catch((error) => {
console.error(error);
});
},
});
app.use(Phrasen).mount("#content");
@@ -135,14 +135,6 @@ export default {
<template v-slot:default>
<!-- debugging prints
<pre>{{JSON.stringify(data.profil_update_id,null,2)}}</pre>
<pre>view {{getComponentView}}</pre>
<pre>topic {{JSON.stringify(data.topic,null,2)}}</pre>
-->
<div class="row">
<div class="form-underline mb-2 col-12 col-sm-6">
@@ -226,12 +218,12 @@ export default {
</template>
<template v-if="data.status === profilUpdateStates['Pending'] v-slot:footer>
<template v-if="data.status === profilUpdateStates['Pending']" v-slot:footer>
<div class="form-underline flex-fill">
<div class="form-underline-titel">{{$p.t('global','nachricht')}}</div>
<div class="d-flex flex-row gap-2">
<input class="form-control " v-model="data.status_message" >
<input class="form-control " v-model="data.status_message" />
<button @click="acceptRequest" class="text-nowrap btn btn-success">{{$p.t('profilUpdate','accept')}} <i class="fa fa-check"></i></button>
<button @click="denyRequest" class="text-nowrap btn btn-danger">{{$p.t('profilUpdate','deny')}} <i class="fa fa-xmark"></i></button>
</div>
@@ -40,7 +40,7 @@ export default {
showModal: false,
modalData: null,
loading: false,
showAll: false,
filter: "Pending",
events: [],
profil_update_id: Number(this.id),
profil_updates_table_options: {
@@ -51,13 +51,25 @@ export default {
ajaxURLGenerator: (url, config, params) => {
//? this function needs to be an array function in order to access the this properties of the Vue component
if (this.showAll) {
return url + "getProfilUpdateWithPermission";
} else {
return (
url +
`getProfilUpdateWithPermission/${this.profilUpdateStates["Pending"]}`
);
switch (this.filter) {
case this.profilUpdateStates["Pending"]:
return (
url +
`getProfilUpdateWithPermission/${this.profilUpdateStates["Pending"]}`
);
case this.profilUpdateStates["Accepted"]:
return (
url +
`getProfilUpdateWithPermission/${this.profilUpdateStates["Accepted"]}`
);
case this.profilUpdateStates["Rejected"]:
return (
url +
`getProfilUpdateWithPermission/${this.profilUpdateStates["Rejected"]}`
);
default:
return url + `getProfilUpdateWithPermission`;
}
},
ajaxResponse: (url, params, response) => {
@@ -244,20 +256,7 @@ export default {
},
};
},
computed: {
getFetchUrl: function () {
let url =
FHC_JS_DATA_STORAGE_OBJECT.app_root +
FHC_JS_DATA_STORAGE_OBJECT.ci_router +
`/Cis/ProfilUpdate/`;
if (this.showAll) {
url + "getAllRequests";
} else {
url + "getPendingRequests";
}
return url;
},
},
computed: {},
methods: {
setLoading: function (newValue) {
this.loading = newValue;
@@ -293,7 +292,7 @@ export default {
updateData: function (event) {
this.$refs.UpdatesTable.tabulator.setData();
//? store the selected view in the session storage of the browser
sessionStorage.setItem("showAll", event.target.value);
sessionStorage.setItem("filter", event.target.value);
},
},
watch: {
@@ -321,31 +320,29 @@ export default {
});
}
if (!(sessionStorage.getItem("showAll") === null)) {
if (sessionStorage.getItem("filter")) {
//? converting string into a boolean: https://sentry.io/answers/how-can-i-convert-a-string-to-a-boolean-in-javascript/
this.showAll = sessionStorage.getItem("showAll") === "true";
this.filter = sessionStorage.getItem("filter");
}
},
template: /*html*/ `
<div>
<accept-deny-update :title="$p.t('profilUpdate','profilUpdateRequest')" v-if="showModal" ref="AcceptDenyModal" @hideBsModal="hideAcceptDenyModal" :value="JSON.parse(JSON.stringify(modalData))" :setLoading="setLoading" ></accept-deny-update>
<div class="form-underline flex-fill ">
<div class="form-underline-titel">{{$p.t('ui','anzeigen')}} </div>
<select class="mb-4 " v-model="showAll" @change="updateData" class="form-select" aria-label="Profil updates display selection">
<option :selected="true" :value="false">{{$p.t('profilUpdate','pendingRequests')}}</option>
<option :value="false">{{$p.t('profilUpdate','acceptedRequests')}}</option>
<option :value="false">{{$p.t('profilUpdate','rejectedRequests')}}</option>
<option :value="true">{{$p.t('profilUpdate','allRequests')}}</option>
<select class="mb-4 " v-model="filter" @change="updateData" class="form-select" aria-label="Profil updates display selection">
<option :selected="true" :value="profilUpdateStates['Pending']" >{{$p.t('profilUpdate','pendingRequests')}}</option>
<option :value="profilUpdateStates['Accepted']">{{$p.t('profilUpdate','acceptedRequests')}}</option>
<option :value="profilUpdateStates['Rejected']">{{$p.t('profilUpdate','rejectedRequests')}}</option>
<option :value="'Alle'">{{$p.t('profilUpdate','allRequests')}}</option>
</select>
</div>
<loading ref="loadingModalRef" :timeout="0"></loading>
<core-filter-cmpt :title="$p.t('profilUpdate','profilUpdateRequests')" ref="UpdatesTable" :tabulatorEvents="events" :tabulator-options="profil_updates_table_options" tableOnly :sideMenu="false" />
<core-filter-cmpt v-if="profilUpdateStates" :title="$p.t('profilUpdate','profilUpdateRequests')" ref="UpdatesTable" :tabulatorEvents="events" :tabulator-options="profil_updates_table_options" tableOnly :sideMenu="false" />
</div>`,
};