adds more filter options for the ProfilUpdateView

application/controllers/Cis/ProfilUpdate.php

@@ -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());

public/js/apps/Cis/Profil.js

@@ -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),
+      profilUpdateStates: Vue.computed(() =>
-      profilUpdateTopic: Vue.computed(() => this.profilUpdateTopic),
+        this.profilUpdateStates ? this.profilUpdateStates : null
+      ),
+      profilUpdateTopic: Vue.computed(() =>
+        this.profilUpdateTopic ? this.profilUpdateTopic : null
+      ),
       setLoading: (newValue) => {
         this.loading = newValue;
       },

public/js/apps/Cis/ProfilUpdateRequests.js

@@ -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 {
-   
+      profilUpdateStates: null,
-    }
+    };
-  },methods:{
+  },
-   
+  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");
-

public/js/components/Cis/ProfilUpdate/AcceptDenyUpdate.js

@@ -136,14 +136,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">
       <div class="form-underline-titel">{{$p.t('global','status')}}: </div>
@@ -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>

public/js/components/Cis/ProfilUpdate/ProfilUpdateView.js

@@ -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";
+          switch (this.filter) {
-          } else {
+            case this.profilUpdateStates["Pending"]:
-            return (
+              return (
-              url +
+                url +
-              `getProfilUpdateWithPermission/${this.profilUpdateStates["Pending"]}`
+                `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: {
+  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;
-    },
-  },
   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">
+      <select class="mb-4 " v-model="filter" @change="updateData" class="form-select" aria-label="Profil updates display selection">
-        <option :selected="true" :value="false">{{$p.t('profilUpdate','pendingRequests')}}</option>
+        <option :selected="true" :value="profilUpdateStates['Pending']" >{{$p.t('profilUpdate','pendingRequests')}}</option>
-        <option :value="false">{{$p.t('profilUpdate','acceptedRequests')}}</option>
+        <option :value="profilUpdateStates['Accepted']">{{$p.t('profilUpdate','acceptedRequests')}}</option>
-        <option :value="false">{{$p.t('profilUpdate','rejectedRequests')}}</option>
+        <option :value="profilUpdateStates['Rejected']">{{$p.t('profilUpdate','rejectedRequests')}}</option>
-        <option :value="true">{{$p.t('profilUpdate','allRequests')}}</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>`,
 };