Skip to content

Commit

Permalink
logresponse modal made in vue
Browse files Browse the repository at this point in the history
modal store prepared to take props

cleared commented out code

close modal in success of ajax call

modal form validation working

removed unused imports

vue store added for component

vue modal added to storybook

npm run format ran

updated storybook mdx

reverted unintended changes

linting ran

using useForm composable which contains updateForm instead of writing one

legacy options removed on vue modal

attempts to put log response button at the bottom reverted

targeting children of just vueModal to get the footer button on the bottom while not affecting other forms

reverted css changes on modal. Submit button will be off the bottom for now

added new vue modal for logging reviewer response

finished callback used when form submitted and API URL built more robustly

changed path again to match new location of vue modal

fixed path to table components

reverted incorrect formatting

vue modal changes pulled in

modal updates pulled in. Modal3 closing on update

modal functions working and closing

changes to Form component reverted

modal wrapper changes reverted

modal store changes pulled in
  • Loading branch information
rob-a-ubiquity authored and MrRob100 committed Nov 15, 2024
1 parent 2b591e8 commit 83dedb9
Show file tree
Hide file tree
Showing 7 changed files with 194 additions and 1 deletion.
3 changes: 2 additions & 1 deletion src/components/Modal/ModalManager.vue
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,9 @@ import {storeToRefs} from 'pinia';
import SideModal from '@/components/Modal/SideModal.vue';
import LegacyAjax from '@/components/Modal/SideModalBodyLegacyAjax.vue';
import PkpDialog from '@/components/Modal/Dialog.vue';
import WorkflowLogResponseModal from '@/managers/ReviewerManager/modals/WorkflowLogResponseModal.vue';
const GlobalModals = {LegacyAjax};
const GlobalModals = {LegacyAjax, WorkflowLogResponseModal};
const modalStore = useModalStore();
const {
Expand Down
11 changes: 11 additions & 0 deletions src/managers/ReviewerManager/modals/WorkflowLogResponseModal.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import {Meta, ArgTypes} from '@storybook/blocks';

import * as WorkflowLogResponseModalStories from './WorkflowLogResponseModal.stories';

<Meta of={WorkflowLogResponseModalStories} />

# Log Response Modal

A vue modal containing a form for and admin to log a response to a review request on behalf of the reviewer.

<ArgTypes/ >
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import WorkflowLogResponseModal from './WorkflowLogResponseModal.vue';
import PkpButton from '@/components/Button/Button.vue';
import {useModal} from '@/composables/useModal';
import {within, userEvent} from '@storybook/test';

export default {
title: 'Pages/Workflow/LogResponse',
component: WorkflowLogResponseModal,
};

export const Base = {
render: (args) => ({
components: {WorkflowLogResponseModal, PkpButton},
setup() {
const {openSideModal} = useModal();

function logResponse() {
openSideModal(WorkflowLogResponseModal, args.modalProps);
}
return {logResponse, ...args};
},
template: '<PkpButton @click="logResponse">Log Response</PkpButton>',
}),
args: {
modalProps: {
description:
'Sodium butyrate improves growth performance of weaned piglets during the first period after weaning',
submissionId: 12,
logResponseForm: {
id: 'logResponseForm',
method: 'POST',
action:
'http://localhost:7003/index.php/publicknowledge/$$$call$$$/grid/users/reviewer/reviewer-grid/add-log?submissionId=12&reviewAssignmentId=17&stageId=3&round=0',
fields: [
{
name: 'acceptReview',
isRequired: true,
description:
'If the reviewer contacts you through email or any other means, you can record their response for them',
component: 'field-options',
label: 'Record the response on behalf of the reviewer',
value: false,
type: 'radio',
options: [
{
value: 1,
label: 'Reviewer has accepted the invitation to review',
},
{
value: 0,
label: 'Reviewer has declined the invitation to review',
},
],
groupId: 'default',
},
],
groups: [{id: 'default', pageId: 'default'}],
pages: [{id: 'default', submitButton: {label: 'Log Response'}}],
primaryLocale: 'en',
visibleLocales: ['en'],
supportedFormLocales: ['en', 'fr_CA'],
},
},
},
play: async ({canvasElement}) => {
// Assigns canvas to the component root element
const canvas = within(canvasElement);
const user = userEvent.setup();

await user.click(canvas.getByText('Log Response'));
},
decorators: [
() => ({
template: '<div style="height: 900px"><story/></div>',
}),
],
};
35 changes: 35 additions & 0 deletions src/managers/ReviewerManager/modals/WorkflowLogResponseModal.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<template>
<SideModalBody>
<template #pre-title>
{{ submissionId }}
</template>
<template #title>
<span>{{ t('editor.review.logResponse.for') }}</span>
</template>
<template #description>
<span>{{ title }}</span>
</template>
<div class="ml-8 mr-8 h-full bg-secondary">
<PkpForm
v-bind="store.form"
@success="store.formSuccess"
@set="store.updateForm"
></PkpForm>
</div>
</SideModalBody>
</template>

<script setup>
import {useWorkflowLogResponseModalStore} from './workflowLogResponseModalStore';
import {defineProps} from 'vue';
import SideModalBody from '@/components/Modal/SideModalBody.vue';
import PkpForm from '@/components/Form/Form.vue';
const props = defineProps({
title: {type: String, required: true},
submissionId: {type: Number, required: true},
logResponseForm: {type: Object, required: true},
});
const store = useWorkflowLogResponseModalStore(props);
</script>
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import {inject} from 'vue';
import {defineComponentStore} from '@/utils/defineComponentStore';
import {useForm} from '@/composables/useForm';

export const useWorkflowLogResponseModalStore = defineComponentStore(
'workflowLogResponseModal',
(props) => {
const closeModal = inject('closeModal');
const {set: updateForm, form} = useForm(props.logResponseForm);

function formSuccess() {
closeModal();
}

return {form, formSuccess, updateForm};
},
);
8 changes: 8 additions & 0 deletions src/managers/ReviewerManager/reviewerManagerStore.js
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,13 @@ export const useReviewerManagerStore = defineComponentStore(
);
}

function reviewerLogResponse({reviewAssignment}) {
_actionFns.reviewerLogResponse(
getActionArgs({reviewAssignment}),
dataUpdateCallback,
);
}

function getItemActions(args) {
return _actionFns.getItemActions(args);
}
Expand Down Expand Up @@ -190,6 +197,7 @@ export const useReviewerManagerStore = defineComponentStore(
reviewerThankReviewer,
reviewerRevertConsider,
reviewerSendReminder,
reviewerLogResponse,
_reviewerManagerActionFns: _actionFns,
};
},
Expand Down
44 changes: 44 additions & 0 deletions src/managers/ReviewerManager/useReviewerManagerActions.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ import {useModal} from '@/composables/useModal';
import {useLocalize} from '@/composables/useLocalize';
import {useSubmission} from '@/composables/useSubmission';
import {useFetch, getCSRFToken} from '@/composables/useFetch';
import WorkflowLogResponseModal from '@/managers/ReviewerManager/modals/WorkflowLogResponseModal.vue';
import {useDashboardPageStore} from '@/pages/dashboard/dashboardPageStore';
import {useApiUrl} from '@/composables/useApiUrl';

export const Actions = {
REVIEWER_ADD_REVIEWER: 'reviewerAddReviewer',
Expand All @@ -22,6 +25,7 @@ export const Actions = {
REVIEWER_THANK_REVIEWER: 'reviewerThankReviewer',
REVIEWER_REVERT_CONSIDER: 'reviewerRevertConsider',
REVIEWER_SEND_REMINDER: 'reviewerSendReminder',
REVIEWER_LOG_RESPONSE: 'reviewerLogResponse',
};

export function useReviewerManagerActions() {
Expand Down Expand Up @@ -186,6 +190,14 @@ export function useReviewerManagerActions() {
icon: 'DefaultDocument',
});

if (!reviewAssignment.dateConfirmed) {
actions.push({
label: t('editor.review.logResponse'),
name: Actions.REVIEWER_LOG_RESPONSE,
icon: 'ReviewAssignments',
});
}

return actions;
}

Expand Down Expand Up @@ -564,6 +576,37 @@ export function useReviewerManagerActions() {
openLegacyModal({title: t('editor.review.reminder')}, finishedCallback);
}

function reviewerLogResponse(
{submission, reviewAssignment, submissionStageId},
finishedCallback,
) {
const {openSideModal} = useModal();

const dashboardStore = useDashboardPageStore();
let form = dashboardStore.componentForms.logResponseForm;
let submissionId = submission.id;

const {getCurrentPublication} = useSubmission();
const currentPublication = getCurrentPublication(submission);
const title = `${localizeSubmission(currentPublication.fullTitle, currentPublication.locale)}`;

const {apiUrl} = useApiUrl(
`reviews/${submissionId}/${reviewAssignment.id}/confirmReview`,
);

form.action = apiUrl;

openSideModal(
WorkflowLogResponseModal,
{
title: title,
submissionId: submissionId,
logResponseForm: dashboardStore.componentForms.logResponseForm,
},
{onClose: finishedCallback},
);
}

return {
getTopActions,
getItemActions,
Expand All @@ -584,5 +627,6 @@ export function useReviewerManagerActions() {
reviewerThankReviewer,
reviewerRevertConsider,
reviewerSendReminder,
reviewerLogResponse,
};
}

0 comments on commit 83dedb9

Please sign in to comment.