blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-06-04 21:59:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

adopts logic to fetched profilUpdate status and topic from the database

Browse Source
This commit is contained in:
SimonGschnell
2024-04-11 09:15:19 +02:00
parent 21c2bafed6
commit 4fc4cd762d
4 changed files with 138 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/components/Cis/Profil/ProfilComponents/FetchProfilUpdates.js
+2 -2
View File
@@ -86,7 +86,7 @@ export default {
}
//? adds the status information if the profil update request was rejected or accepted
if (updateRequest.status !== this.profilUpdateStates.Pending) {
if (updateRequest.status !== this.profilUpdateStates["Pending"]) {
content["status"] = updateRequest.status;
content["status_message"] = updateRequest.status_message;
content["status_timestamp"] = updateRequest.status_timestamp;
@@ -119,7 +119,7 @@ export default {
);
},
getView: function (topic, status) {
if (!(status === this.profilUpdateStates.Pending)) {
if (!(status === this.profilUpdateStates["Pending"])) {
return "Status";
}
public/js/components/Cis/Profil/ProfilModal/EditProfilComponents/Status.js
+44 -19
View File
@@ -6,30 +6,53 @@ export default {
Adresse,
Kontakt,
},
inject: ["profilUpdateTopic"],
data() {
return {
files:null,
files: null,
};
},
methods:{
getDocumentLink: function(dms_id){
return FHC_JS_DATA_STORAGE_OBJECT.app_root +
FHC_JS_DATA_STORAGE_OBJECT.ci_router +
`/Cis/ProfilUpdate/show/${dms_id}`;
}
methods: {
getDocumentLink: function (dms_id) {
return (
FHC_JS_DATA_STORAGE_OBJECT.app_root +
FHC_JS_DATA_STORAGE_OBJECT.ci_router +
`/Cis/ProfilUpdate/show/${dms_id}`
);
},
},
computed: {
getComponentView: function () {
let title = this.topic.toLowerCase();
if (title.includes("adressen")) return "Adresse";
else if (title.includes("kontakte")) return "Kontakt";
else return "text_input";
if (
this.topic == this.profilUpdateTopic["Private Adressen"] ||
this.topic == this.profilUpdateTopic["Add Adresse"] ||
this.topic == this.profilUpdateTopic["Delete Adresse"]
) {
return "Adresse";
} else if (
this.topic == this.profilUpdateTopic["Private Kontakte"] ||
this.topic == this.profilUpdateTopic["Add Kontakt"] ||
this.topic == this.profilUpdateTopic["Delete Kontakt"]
) {
return "Kontakt";
} else {
return "text_input";
}
},
cardHeader: function () {
let title = this.topic.toLowerCase();
if (title.includes("delete")) return "Delete";
else if (title.includes("add")) return "Add";
else return "Update";
if (
this.topic == this.profilUpdateTopic["Delete Addresse"] ||
this.topic == this.profilUpdateTopic["Delete Kontakt"]
) {
return "Delete";
} else if (
this.topic == this.profilUpdateTopic["Add Adresse"] ||
this.topic == this.profilUpdateTopic["Add Kontakt"]
) {
return "Add";
} else {
return "Update";
}
},
},
props: {
@@ -42,11 +65,13 @@ export default {
topic: { type: String },
},
created() {
Vue.$fhcapi.ProfilUpdate.getProfilRequestFiles(this.updateID).then((res) =>{
this.files = res.data;
})
Vue.$fhcapi.ProfilUpdate.getProfilRequestFiles(this.updateID).then(
(res) => {
this.files = res.data;
}
);
},
template: /*html*/`
template: /*html*/ `
<div class="row">
<div class="col">
public/js/components/Cis/ProfilUpdate/AcceptDenyUpdate.js
+4 -3
View File
@@ -9,6 +9,7 @@ export default {
Kontakt,
Adresse,
},
inject: ["profilUpdateStates"],
mixins: [BsModal],
props: {
title: {
@@ -151,7 +152,7 @@ export default {
</div>
<div v-if="data.status!==$p.t('profilUpdate','pending')" class="form-underline mb-2 col-12 col-sm-6">
<div v-if="data.status!==profilUpdateStates['Pending']" class="form-underline mb-2 col-12 col-sm-6">
<div class="form-underline-titel">{{$p.t('profilUpdate','statusDate')}}: </div>
<!-- only status timestamp and status message can be null in the database -->
<span class="form-underline-content" >{{data.status_timestamp?data.status_timestamp:'-'}}</span>
@@ -189,7 +190,7 @@ export default {
</div>
<!-- Row with the status message is only visible if the request is not pending and the message is not empty -->
<div v-if="data.status !== $p.t('profilUpdate','pending') && data.status_message" class="row">
<div v-if="data.status !== profilUpdateStates['Pending'] && data.status_message" class="row">
<div class="col">
<div class="form-underline mb-2 ">
<div class="form-underline-titel">{{$p.t('profilUpdate','statusMessage')}}</div>
@@ -225,7 +226,7 @@ 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>
public/js/components/Cis/ProfilUpdate/ProfilUpdateView.js
+88 -75
View File
@@ -1,26 +1,19 @@
import { CoreFilterCmpt } from "../../filter/Filter.js";
import AcceptDenyUpdate from "./AcceptDenyUpdate.js";
import Alert from "../../../components/Bootstrap/Alert.js";
import Loading from "../../../components/Loader.js";
const STATUS = Object.freeze({
PENDING: "Pending",
ACCEPTED: "Accepted",
REJECTED: "Rejected",
})
const sortProfilUpdates = (ele1, ele2, thisPointer)=> {
const sortProfilUpdates = (ele1, ele2, thisPointer) => {
let result = 0;
if (ele1.status === STATUS.PENDING) {
if (ele1.status === thisPointer.profilUpdateStates["Pending"]) {
result = -1;
} else if (ele1.status === STATUS.ACCEPTED) {
result = ele2.status === STATUS.REJECTED ? -1 : 1;
} else if (ele1.status === thisPointer.profilUpdateStates["Accepted"]) {
result =
ele2.status === thisPointer.profilUpdateStates["Rejected"] ? -1 : 1;
} else {
result = 1;
}
if (ele1.status === ele2.status) {
//? if they have the same status , insert_date gets compared for order
result =
@@ -30,27 +23,27 @@ const sortProfilUpdates = (ele1, ele2, thisPointer)=> {
return result;
};
export default{
export default {
components: {
CoreFilterCmpt,
Loading,
AcceptDenyUpdate,
},
props:{
id:{
type:Number,
}
inject: ["profilUpdateTopic", "profilUpdateStates"],
props: {
id: {
type: Number,
},
},
data() {
return {
showModal: false,
modalData: null,
loading:false,
loading: false,
showAll: false,
events:[],
profil_update_id:Number(this.id),
events: [],
profil_update_id: Number(this.id),
profil_updates_table_options: {
ajaxURL:
FHC_JS_DATA_STORAGE_OBJECT.app_root +
FHC_JS_DATA_STORAGE_OBJECT.ci_router +
@@ -61,21 +54,25 @@ export default{
if (this.showAll) {
return url + "getProfilUpdateWithPermission";
} else {
return url + `getProfilUpdateWithPermission/${STATUS.PENDING}`;
return (
url +
`getProfilUpdateWithPermission/${this.profilUpdateStates["Pending"]}`
);
}
},
ajaxResponse: (url, params, response)=> {
ajaxResponse: (url, params, response) => {
//url - the URL of the request
//params - the parameters passed with the request
//response - the JSON object returned in the body of the response.
//? sorts the response data from the backend
if (response) response.sort((ele1,ele2)=>sortProfilUpdates(ele1,ele2,this));
if (response)
response.sort((ele1, ele2) => sortProfilUpdates(ele1, ele2, this));
return response;
},
//? adds tooltip with the status message of a profil update request if its status is not pending
columnDefaults: {
tooltip: (e, cell, onRendered) =>{
tooltip: (e, cell, onRendered) => {
//e - mouseover event
//cell - cell component
//onRendered - onRendered callback registration function
@@ -89,7 +86,7 @@ export default{
el.classList.add("border", "border-dark");
let statusDateEl = document.createElement("span");
statusDateEl.classList.add("d-block","mb-1");
statusDateEl.classList.add("d-block", "mb-1");
statusDateEl.innerHTML =
"Request was " + status + " on " + statusDate;
let statusMessageEl = document.createElement("span");
@@ -102,17 +99,22 @@ export default{
},
rowContextMenu: (e, component) => {
let menu = [];
if (component.getData().status === this.$p.t('profilUpdate','pending')) {
if (
component.getData().status === this.profilUpdateStates["Pending"]
) {
menu.push(
{
label: `<i class='fa fa-check'></i> ${this.$p.t('profilUpdate','acceptUpdate')}`,
label: `<i class='fa fa-check'></i> ${this.$p.t(
"profilUpdate",
"acceptUpdate"
)}`,
action: (e, column) => {
Vue.$fhcapi.ProfilUpdate.acceptProfilRequest(column.getData())
.then((res) => {
this.$refs.UpdatesTable.tabulator.setData();
})
.catch((e) => {
Alert.popup(Vue.h('div',{innerHTML:e.response.data}));
Alert.popup(Vue.h("div", { innerHTML: e.response.data }));
});
},
},
@@ -120,32 +122,39 @@ export default{
separator: true,
},
{
label:
` <i style='width:16px' class='text-center fa fa-xmark'></i> ${this.$p.t('profilUpdate','denyUpdate')}`,
label: ` <i style='width:16px' class='text-center fa fa-xmark'></i> ${this.$p.t(
"profilUpdate",
"denyUpdate"
)}`,
action: (e, column) => {
Vue.$fhcapi.ProfilUpdate.denyProfilRequest(
column.getData()
).then((res) => {
this.$refs.UpdatesTable.tabulator.setData();
}).catch((e) => {
Alert.popup(Vue.h('div',{innerHTML:e.response.data}));
});
Vue.$fhcapi.ProfilUpdate.denyProfilRequest(column.getData())
.then((res) => {
this.$refs.UpdatesTable.tabulator.setData();
})
.catch((e) => {
Alert.popup(Vue.h("div", { innerHTML: e.response.data }));
});
},
},
{
separator: true,
},
{
label: `<i class='fa fa-eye'></i> ${this.$p.t('profilUpdate','showRequest')}`,
label: `<i class='fa fa-eye'></i> ${this.$p.t(
"profilUpdate",
"showRequest"
)}`,
action: (e, column) => {
this.showAcceptDenyModal(column.getData());
},
}
);
} else {
menu.push({
label: `<i class='fa fa-eye'></i> ${this.$p.t('profilUpdate','showRequest')}`,
label: `<i class='fa fa-eye'></i> ${this.$p.t(
"profilUpdate",
"showRequest"
)}`,
action: (e, column) => {
this.showAcceptDenyModal(column.getData());
},
@@ -153,7 +162,7 @@ export default{
}
return menu;
},
height: 600,
layout: "fitColumns",
@@ -196,12 +205,18 @@ export default{
hozAlign: "center",
headerFilter: true,
formatter: (cell, para) => {
let iconClasses =""
let iconClasses = "";
let status = cell.getRow().getData().status;
switch (status){
case "Pending": iconClasses += "fa fa-lg fa-circle-info text-info "; break;
case "Accepted": iconClasses += "fa fa-lg fa-circle-check text-success "; break;
case "Rejected": iconClasses += "fa fa-lg fa-circle-xmark text-danger "; break;
switch (status) {
case this.profilUpdateStates["Pending"]:
iconClasses += "fa fa-lg fa-circle-info text-info ";
break;
case this.profilUpdateStates["Accepted"]:
iconClasses += "fa fa-lg fa-circle-check text-success ";
break;
case this.profilUpdateStates["Rejected"]:
iconClasses += "fa fa-lg fa-circle-xmark text-danger ";
break;
}
return `<div class='row justify-content-center'><div class='col-2'><i class='${iconClasses}'></i></div> <div class='col-4'><span>${cell.getValue()}</span></div></div>`;
},
@@ -244,17 +259,17 @@ export default{
},
},
methods: {
setLoading: function(newValue){
setLoading: function (newValue) {
this.loading = newValue;
},
hideAcceptDenyModal: function () {
//? checks the AcceptDenyModal component property result, if the user made a successful request or not
if (this.$refs.AcceptDenyModal.result) {
//? refetches the data, if any request was denied or accepted
//* setData will call the ajaxURL again to refresh the data
this.$refs.UpdatesTable.tabulator.setData();
//? refetches the data, if any request was denied or accepted
//* setData will call the ajaxURL again to refresh the data
this.$refs.UpdatesTable.tabulator.setData();
} else {
// when modal was closed without submitting request
}
@@ -264,56 +279,54 @@ export default{
showAcceptDenyModal(value) {
this.modalData = value;
if(!this.modalData){
if (!this.modalData) {
return;
}
this.showModal = true;
// after a state change, wait for the DOM updates to complete
Vue.nextTick(() => {
this.$refs.AcceptDenyModal.show();
});
},
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);
},
},
watch:{
loading: function(newValue, oldValue){
if(newValue){
watch: {
loading: function (newValue, oldValue) {
if (newValue) {
this.$refs.loadingModalRef.show();
}else{
} else {
this.$refs.loadingModalRef.hide();
}
}
},
},
mounted() {
//? opens the AcceptDenyUpdate Modal if a preselected profil_update_id was passed to the component (used for email links)
if(this.profil_update_id){
this.$refs.UpdatesTable.tabulator.on("dataProcessed", ()=>{
const arrayRowData = this.$refs.UpdatesTable.tabulator.getData().filter(row => {
if (this.profil_update_id) {
this.$refs.UpdatesTable.tabulator.on("dataProcessed", () => {
const arrayRowData = this.$refs.UpdatesTable.tabulator
.getData()
.filter((row) => {
return row.profil_update_id === this.profil_update_id;
});
if(arrayRowData.length){
this.showAcceptDenyModal(arrayRowData[0]);
});
if (arrayRowData.length) {
this.showAcceptDenyModal(arrayRowData[0]);
}
})
});
}
if (!(sessionStorage.getItem("showAll") === null)) {
//? 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.showAll = sessionStorage.getItem("showAll") === "true";
}
},
template: /*html*/`
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>