+ return (
+ <>
+ {definition.link && this.props.submissionLink ? (
-
-
- {definition.shortText}
-
+ ) : (
+
+ {definition.shortText}
+
+ )}
+
+
+
+
+ > {this.props.t("You are about to submit a ")}
+ {this.props.t("completely new article.")}
+
+
+ > {this.props.t("If you are making a ")}
+ {this.props.t("resubmission to an article ")}
+ {this.props.t("under review, please do so using the ")}
+ {this.props.t("Resubmit button ")}
+ {this.props.t(
+ "next to the latest version of the article you submitted."
+ )}
+
+
+
+ > {this.props.t("The ")}
+ {this.props.t("Resubmit button ")}
+ {this.props.t(
+ "will only be available after the article has been reviewed."
+ )}
+
+
+ > {this.props.t("Would you like to proceed?")}
+
- );
- } else {
- return (
-
- {definition.shortText}
-
- );
- }
+
+
+ );
};
+
render() {
const definition = this.mapStatus(this.props.event);
if (this.props.longForm) {
diff --git a/webapp/src/pages/ResponseDetails/ResponseDetails.css b/webapp/src/pages/ResponseDetails/ResponseDetails.css
new file mode 100644
index 000000000..ffa1bed71
--- /dev/null
+++ b/webapp/src/pages/ResponseDetails/ResponseDetails.css
@@ -0,0 +1,59 @@
+.application-list {
+ padding: 20px;
+ background-color: #f9f9f9;
+ border-radius: 8px;
+ }
+
+ .application-list h3 {
+ margin-bottom: 15px;
+ font-size: 1.5em;
+ color: #333;
+ }
+
+ .application-list_items {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ }
+
+ .application-list_item {
+ margin-bottom: 10px;
+ padding: 10px;
+ background-color: #ffffff;
+ border-radius: 6px;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ transition: all 0.3s ease;
+ }
+
+ .application-list_item:hover {
+ transform: translateY(-3px);
+ }
+
+ .application-list_link {
+ text-decoration: none;
+ color: #333;
+ font-weight: bold;
+ display: block;
+ transition: color 0.3s ease;
+ }
+
+ .application-list_link:hover {
+ color: #007BFF;
+ }
+
+ .shift_button{
+ margin-left: 30px;
+ }
+
+ .buttons-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ gap: 10px;
+ align-items: flex-end;
+ }
+ .buttons-container button {
+ width: 100%;
+ min-width: 200px;
+ box-sizing: border-box;
+ }
\ No newline at end of file
diff --git a/webapp/src/pages/ResponseDetails/ResponseDetails.js b/webapp/src/pages/ResponseDetails/ResponseDetails.js
new file mode 100644
index 000000000..924ea8d93
--- /dev/null
+++ b/webapp/src/pages/ResponseDetails/ResponseDetails.js
@@ -0,0 +1,317 @@
+import React, { Component } from "react";
+import { withRouter } from "react-router";
+import { applicationFormService } from "../../services/applicationForm";
+import Loading from "../../components/Loading";
+import { withTranslation } from "react-i18next";
+import AnswerValue from "../../components/answerValue";
+import { eventService } from "../../services/events";
+import moment from "moment";
+import "./ResponseDetails.css";
+
+class ReponseDetails extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ applicationData: null,
+ applicationForm: null,
+ all_responses: null,
+ isLoading: true,
+ outcome: null,
+ error: false,
+ };
+ }
+
+ componentDidMount() {
+ const eventId = this.props.event ? this.props.event.id : 0;
+ Promise.all([
+ applicationFormService.getForEvent(eventId),
+ applicationFormService.getResponse(eventId),
+ eventService.getEvent(eventId),
+ ]).then((responses) => {
+ console.log("Responses:", responses);
+
+ this.setState({
+ applicationForm: responses[0].formSpec,
+ all_responses: responses[1].response,
+ applicationData: responses[1].response.find(
+ (item) => item.id === parseInt(this.props.match.params.id)
+ ),
+ isLoading: false,
+ error: responses[0].error || responses[1].error || responses[2].error,
+
+ });
+ });
+
+ }
+
+
+ renderSections() {
+ const { applicationForm, applicationData } = this.state;
+
+ if (applicationForm && applicationData) {
+ return applicationForm.sections.map((section) => (
+
+
+
{section.name}
+
+
{this.renderResponses(section)}
+
+ ));
+ }
+
+ return null;
+}
+
+ renderResponses(section) {
+ const applicationData = this.state.applicationData;
+ const questions = section.questions.map((q) => {
+ const a = applicationData.answers.find((a) => a.question_id === q.id);
+ if (q.type === "information") {
+ return
{q.headline} ;
+ }
+ return (
+
+
+ {q.headline}
+ {q.description && (
+
+
+ )}
+
+
+
+
+ );
+ });
+ return questions;
+ }
+ goBack() {
+ window.location.href = `/${this.props.event.key}/apply/view`;
+ }
+
+ formatDate = (dateString) => {
+ return moment(dateString).format("D MMM YYYY, H:mm:ss [(UTC)]");
+ };
+
+ applicationStatus() {
+ const data = this.state.applicationData;
+ if (data) {
+ const unsubmitted = !data.is_submitted && !data.is_withdrawn;
+ const submitted = data.is_submitted;
+ const withdrawn = data.is_withdrawn;
+
+ if (unsubmitted) {
+ return (
+
+ {this.props.t('Unsubmitted')} {this.formatDate(data.started_timestamp)}
+
+ );
+ }
+ if (submitted) {
+ return (
+
+ {this.props.t('Submitted')} {this.formatDate(data.submitted_timestamp)}
+
+ );
+ }
+ if (withdrawn) {
+ return (
+
+ {this.props.t('Withdrawn')} {this.formatDate(data.started_timestamp)}
+
+ );
+ }
+ }
+ }
+
+
+ outcomeStatus= (response) => {
+ if (response.outcome) {
+ const badgeClass =
+ response.outcome === "ACCEPTED"
+ ? "badge-success"
+ : response.outcome === "REJECTED"
+ ? "badge-danger"
+ : "badge-warning";
+ const outcome= response.outcome==='ACCEPTED'?this.props.t("ACCEPTED"):response.outcome==='REJECTED'?
+ this.props.t("REJECTED"):response.outcome==='ACCEPT_W_REVISION'?
+ this.props.t("ACCEPTED WITH REVISION"):response.outcome==='REJECT_W_ENCOURAGEMENT'?
+ this.props.t("REJECTED WITH ENCOURAGEMENT TO RESUMIT"):this.props.t("REVIEWING");
+ return (
+
{outcome}
+ );
+ }
+ return (
+
+ {this.props.t("PENDING")}
+
+ );
+ };
+
+ getChainById = (data, id) => {
+ const elementMap = data.reduce((map, element) => {
+ map[element.id] = element;
+ return map;
+ }, {});
+
+ if (!elementMap[id]) return [];
+
+ function getParentChain(element, chain = []) {
+ if (!element || chain.some(e => e.id === element.id)) return chain;
+ chain.unshift(element);
+ if (element.parent_id !== null && elementMap[element.parent_id]) {
+ return getParentChain(elementMap[element.parent_id], chain);
+ }
+ return chain;
+ }
+
+
+ function getChildChain(element, visited = new Set(), chain = []) {
+ if (!element || visited.has(element.id)) return;
+ visited.add(element.id);
+ chain.push(element);
+
+ data
+ .filter(child => child.parent_id === element.id)
+ .sort((a, b) => a.id - b.id)
+ .forEach(child => getChildChain(child, visited, chain));
+ }
+
+
+ const parentChain = getParentChain(elementMap[id]);
+ const childChain = [];
+ const visited = new Set();
+
+ getChildChain(elementMap[id], visited, childChain);
+
+
+ let finalChain = [...parentChain, ...childChain.slice(1)];
+
+ finalChain = finalChain.map((element, index) => ({
+ ...element,
+ chain_number: index + 1
+ }));
+
+ return finalChain.sort((a, b) => a.id - b.id);
+ };
+
+ getSubmissionList = (applications) => {
+
+ if (!applications || applications.length === 0) {
+ return
No submissions available.
;
+ }
+ return (
+
+
{this.props.t("Related Submissions")}
+
+
+ );
+ };
+
+ getLastResponse(response) {
+ const lastResponse = response.at(-1);;
+ if (lastResponse.outcome!=null && lastResponse.outcome !== 'ACCEPTED'&& lastResponse.outcome !== 'REJECTED') {
+ return true;
+ }
+ return false;
+}
+
+
+ render() {
+ const { applicationData, isLoading, error, all_responses } = this.state;
+ console.log("Application Data:", applicationData);
+
+
+ if (isLoading) {
+ return
;
+ }
+
+ const chain_responses = this.getChainById(all_responses, this.props.match.params.id);
+
+ return (
+
+ {error && (
+
+
{JSON.stringify(error)}
+
+ )}
+
+
+
+
{this.props.t("Application Status")} {" "}
+
{this.applicationStatus()}
+
{this.props.t("Application Outcome")} {" "}
+
{this.outcomeStatus(applicationData)}
+
+
+
+
+ (window.location.href = `/${
+ this.props.event.key
+ }/apply/new/${chain_responses.at(-1).id}`)
+ }
+ disabled={!this.getLastResponse(chain_responses)}
+ >
+ {this.props.t("Resubmit an article")}
+
+
+ this.goBack()}
+ >
+ {this.props.t("View Submission(s)")}
+
+
+
+
+
+
+
+
{this.props.t('Review Summaries')}
+
+
+
+
{applicationData.review_summary || this.props.t("No available")}
+
+
+
+
+ {applicationData && (
+
+ {this.renderSections()}
+
+ )}
+
+
+ {this.getSubmissionList(
+ chain_responses.filter(
+ (element) => element.id !== parseInt(this.props.match.params.id)
+ )
+ )}
+
+
+ );
+ }
+}
+
+export default withRouter(withTranslation()(ReponseDetails));
\ No newline at end of file
diff --git a/webapp/src/pages/ResponsePage/ResponsePage.css b/webapp/src/pages/ResponsePage/ResponsePage.css
index a6617a2d6..a03998ef3 100644
--- a/webapp/src/pages/ResponsePage/ResponsePage.css
+++ b/webapp/src/pages/ResponsePage/ResponsePage.css
@@ -329,8 +329,6 @@ font-size: 15px;
color: #e8a64a;
}
-
-/* Response Details Section and Sub-Sections */
.response-details {
margin-top: 20px;
width: 100%;
@@ -353,7 +351,6 @@ font-size: 15px;
margin-bottom: 0.75em;
}
-/* Q&A Sections */
.Q-A {
display: flex;
flex-wrap: wrap;
@@ -390,7 +387,6 @@ font-size: 15px;
}
-/* Response Details Type Face */
.response-details h3 {
color: hsl(213deg 16% 49%);
margin: 0;
@@ -405,4 +401,288 @@ font-size: 15px;
.question-answer-block .question-headline {
color: #666;
-}
\ No newline at end of file
+}
+
+.submission-container {
+ text-align: center;
+ padding: 20px;
+ background: white;
+ border-radius: 10px;
+ width: 200px;
+}
+
+.progress-label {
+ display: block;
+ font-size: 14px;
+ color: #666;
+}
+
+.progress-value {
+ font-size: 16px;
+ font-weight: bold;
+}
+
+.upload-box {
+ border: 2px dashed #aaa;
+ padding: 20px;
+ border-radius: 5px;
+ cursor: pointer;
+ margin-bottom: 15px;
+}
+
+
+.file-input {
+ display: none;
+}
+
+.comment-box {
+ width: 100%;
+ height: 60px;
+ padding: 10px;
+ margin-bottom: 15px;
+ border-radius: 5px;
+ border: 1px solid #ccc;
+ color: #212529 !important;
+ font-size: 17px;
+}
+
+.letter {
+ background-color: #ffffff;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ max-width: 800px;
+ width: 90%;
+ margin: 20px auto;
+ padding: 20px 30px;
+ font-family: 'Arial', sans-serif;
+ color: #333;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ max-height: 80vh;
+ overflow-y: auto;
+
+
+ scrollbar-width: thin;
+ scrollbar-color: #aaa #f9f9f9;
+}
+
+.letter::-webkit-scrollbar {
+ width: 6px;
+}
+
+.letter::-webkit-scrollbar-track {
+ background: #f9f9f9;
+}
+
+.letter::-webkit-scrollbar-thumb {
+ background-color: #aaa;
+ border-radius: 3px;
+}
+
+.letter-header {
+ text-align: center;
+ margin-bottom: 20px;
+ border-bottom: 1px solid #e3e3e3;
+ padding-bottom: 15px;
+}
+
+.letter-header h2 {
+ margin: 0;
+ font-size: 26px;
+ font-weight: bold;
+ color: #2c3e50;
+}
+
+.letter-header .date,
+.letter-header .recipient {
+ margin: 5px 0;
+ font-size: 14px;
+ color: #7f8c8d;
+}
+
+.letter-body {
+ margin-top: 20px;
+ line-height: 1.6;
+}
+
+.letter-body .greeting {
+ font-size: 18px;
+ margin-bottom: 15px;
+}
+
+.application-sections,
+.review-sections {
+ margin: 20px 0;
+ padding: 15px;
+ border: 1px solid #e3e3e3;
+ border-radius: 4px;
+ background-color: #f9f9f9;
+}
+
+.application-sections .section,
+.review-sections .section,
+.review-container {
+ margin-bottom: 15px;
+}
+
+.section h3,
+.section h5 {
+ margin: 10px 0;
+ color: #34495e;
+ font-size: 20px;
+}
+
+.review-container {
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ background-color: #fff;
+}
+
+.review-container h4 {
+ margin-bottom: 10px;
+ font-size: 18px;
+ color: #2c3e50;
+}
+
+.letter-footer {
+ text-align: center;
+ margin-top: 30px;
+ border-top: 1px solid #e3e3e3;
+ padding-top: 15px;
+ font-size: 16px;
+ color: #2c3e50;
+}
+
+.comment-box {
+ width: 100%;
+ height: 200px;
+ margin-bottom: 15px;
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ resize: vertical;
+ background-color: #f2f2f2;
+ color: #212529 !important;
+}
+
+.letter {
+ width: 95%;
+ max-width: 1100px;
+ max-height: 80vh;
+ padding: 30px;
+ border-radius: 10px;
+ background: #fff;
+ box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
+ overflow-y: auto;
+ margin: auto;
+ scrollbar-width: thin;
+ scrollbar-color: #bbb transparent;
+ }
+
+ .letter::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ .letter::-webkit-scrollbar-thumb {
+ background: #bbb;
+ border-radius: 4px;
+ }
+
+ .letter::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ .letter-header {
+ text-align: center;
+ margin-bottom: 20px;
+ }
+
+ .letter-header h2 {
+ font-size: 2.2rem;
+ font-weight: bold;
+ color: #333;
+ }
+
+ .letter-header .date {
+ font-size: 1.1rem;
+ color: #666;
+ }
+
+
+ .letter-body {
+ font-size: 1.3rem;
+ line-height: 1.8;
+ text-align: justify;
+ padding-right: 14px;
+ }
+
+
+ .application-sections, .review-sections {
+ background: #f8f8f8;
+ padding: 20px;
+ border-radius: 8px;
+ margin-bottom: 20px;
+ }
+
+ .application-sections h4, .review-sections h4 {
+ font-size: 1.5rem;
+ color: #007bff;
+ margin-bottom: 15px;
+ }
+
+
+ .letter-footer {
+ text-align: left;
+ margin-top: 20px;
+ font-weight: bold;
+ color: #333;
+ }
+
+
+ @media (max-width: 768px) {
+ .letter {
+ width: 98%;
+ max-height: 70vh;
+ }
+
+ .letter-header h2 {
+ font-size: 1.7rem;
+ }
+
+ .letter-body {
+ font-size: 1.1rem;
+ }
+ }
+
+ .application-status {
+ background-color: #f8f9fa;
+ padding: 15px;
+ border-radius: 8px;
+ margin-top: 20px;
+ border: 1px solid #ddd;
+ }
+
+ .application-status h5 {
+ font-size: 18px;
+ font-weight: bold;
+ color: #333;
+ margin-bottom: 10px;
+ }
+
+ .application-status p {
+ font-size: 16px;
+ color: #555;
+ margin-bottom: 5px;
+ }
+
+ .application-status .status {
+ font-size: 18px;
+ font-weight: bold;
+ color: #007bff;
+ }
+
+
+ .empty-comment {
+ border: 1px solid red;
+ }
+
\ No newline at end of file
diff --git a/webapp/src/pages/ResponsePage/ResponsePage.js b/webapp/src/pages/ResponsePage/ResponsePage.js
index a0ab23619..7b834ac08 100644
--- a/webapp/src/pages/ResponsePage/ResponsePage.js
+++ b/webapp/src/pages/ResponsePage/ResponsePage.js
@@ -11,9 +11,24 @@ import { tagsService } from '../../services/tags/tags.service';
import { responsesService } from '../../services/responses/responses.service';
import AnswerValue from "../../components/answerValue";
import { ConfirmModal } from "react-bootstrap4-modal";
+import Modal from 'react-bootstrap4-modal';
+import _ from "lodash";
+
import moment from 'moment'
import { getDownloadURL } from '../../utils/files';
import TagSelectorDialog from '../../components/TagSelectorDialog';
+import Loading from "../../components/Loading";
+
+const answerByQuestionKey = (key, allQuestions, answers) => {
+ let question = allQuestions.find(q => q.key === key);
+ if (question) {
+ let answer = answers.find(a => a.question_id === question.id);
+ if (answer) {
+ return answer.value;
+ }
+ }
+ return null;
+ }
class ResponsePage extends Component {
constructor(props) {
@@ -34,7 +49,12 @@ class ResponsePage extends Component {
tagList: [],
assignableTagTypes: ["RESPONSE"],
reviewResponses: [],
- outcome: {'status':null,'timestamp':null},
+ outcome: {'status':null,'timestamp':null, 'review_summary':null},
+ confirmModalVisible: false,
+ pendingOutcome: "",
+ confirmationMessage: "",
+ review_summary: "",
+ isCommentEmpty: false,
isOutcomeDropdownOpen: false,
isStatusDropdownOpen: false,
}
@@ -143,6 +163,7 @@ class ResponsePage extends Component {
renderCompleteReviews() {
+
if (this.state.reviewResponses.length) {
const reviews = this.state.reviewResponses.map(val => {
@@ -166,13 +187,39 @@ class ResponsePage extends Component {
return
No reviews available
;
}
+
+ renderJournalReviews() {
+ const { reviewResponses, reviewForm } = this.state;
+ const { t } = this.props;
+
+ if (!reviewResponses.length) {
+ return
{t("No reviews available")}
;
+ }
+
+ return reviewResponses.map((val, index) => (
+
+
+ {t("Reviewer ") + (index + 1)}
+
+ {reviewForm.review_sections.map(section => (
+
+
{section.headline}
+ {this.renderReviewResponse(val, section)}
+
+ ))}
+
+ ));
+ }
+
getOutcome() {
- outcomeService.getOutcome(this.props.event.id, this.state.applicationData.user_id).then(response => {
+ outcomeService.getOutcome(this.props.event.id, this.state.applicationData.user_id,this.props.match.params.id).then(response => {
if (response.status === 200) {
+
const newOutcome = {
timestamp: response.outcome.timestamp,
status: response.outcome.status,
+ review_summary: response.outcome.review_summary
};
this.setState(
{
@@ -213,6 +260,60 @@ class ResponsePage extends Component {
});
}
+ handleConfirmation = (outcome, message) => {
+ this.setState({
+ confirmModalVisible: true,
+ pendingOutcome: outcome,
+ confirmationMessage: message,
+ });
+ };
+
+ handleConfirmationOK = (event) => {
+ this.setState({
+ confirmModalVisible: false,
+ });
+ this.submitOutcome(this.state.pendingOutcome,this.state.review_summary);
+
+ };
+
+ handleConfirmationCancel = (event) => {
+ this.setState({
+ confirmModalVisible: false,
+ });
+ };
+
+
+ handleConfirmationClick = (outcome, message) => {
+ const { review_summary } = this.state;
+ if (this.state.event_type==='JOURNAL') {
+
+ if (!review_summary || !review_summary.trim()) {
+ this.setState({ isCommentEmpty: true });
+ alert(this.props.t("The review summary field is required."));
+ return;
+ }
+
+ this.setState({ isCommentEmpty: false });
+ }
+ this.handleConfirmation(outcome, message);
+ };
+
+ renderConfirmationButton(outcome, label, className, message) {
+ return (
+
this.handleConfirmationClick(outcome, message)}
+ >
+ {this.props.t(label)}
+
+ );
+ }
+
+
+
+
outcomeStatus() {
const data = this.state.applicationData;
@@ -222,15 +323,7 @@ class ResponsePage extends Component {
if (data) {
- if (this.state.outcome.status && this.state.outcome.status !== 'REVIEW') {
- if (this.state.outcome.status === 'ACCEPTED') {
- return
{this.state.outcome.status} {this.formatDate(this.state.outcome.timestamp)}
- } else if (this.state.outcome.status === 'REJECTED') {
- return
{this.state.outcome.status} {this.formatDate(this.state.outcome.timestamp)}
- } else {
- return
{this.state.outcome.status} {this.formatDate(this.state.outcome.timestamp)}
- }
- };
+ const name = data.user_title + " " + data.firstname + " " + data.lastname;
if (this.state.event_type === 'JOURNAL') {
return (
@@ -285,8 +378,13 @@ class ResponsePage extends Component {