-
Notifications
You must be signed in to change notification settings - Fork 47
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
1 parent
2b591e8
commit 83dedb9
Showing
7 changed files
with
194 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
src/managers/ReviewerManager/modals/WorkflowLogResponseModal.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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/ > |
77 changes: 77 additions & 0 deletions
77
src/managers/ReviewerManager/modals/WorkflowLogResponseModal.stories.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
35
src/managers/ReviewerManager/modals/WorkflowLogResponseModal.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
17 changes: 17 additions & 0 deletions
17
src/managers/ReviewerManager/modals/workflowLogResponseModalStore.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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}; | ||
}, | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters