Skip to content

Commit

Permalink
feat: Submit Submission from Preview Page (#2118)
Browse files Browse the repository at this point in the history
* Refactors status changing template logic to a new component `StatusChangeDropdown`
    * uses data-driven logic for improved reusability
* Simplifies submission acceptance process
    * Accepting for review is no longer necessary; only opening for review
* Adds the `StatusChangeDropdown` component to the preview, view, and review pages
* Adds a check for status changes to draft and initially submitted submissions so that the interface changes accordingly
    * Draft submissions are redirected from the preview page to the view page
    * Initially Submitted submissions are redirected from the view page to the review page
* Bonus: Adds scope attributes to `i18n` tags to prevent warnings about global scope

Closes #2078
  • Loading branch information
gmeben authored May 30, 2024
1 parent 198d069 commit 330f7ae
Show file tree
Hide file tree
Showing 11 changed files with 270 additions and 233 deletions.
27 changes: 14 additions & 13 deletions client/src/components/SubmissionTableActions.vue
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@
data-cy="initially_submit"
class="items-center"
clickable
@click="confirmHandler('submit_for_review', submission.id)"
@click="confirmHandler('submit_for_review', submission)"
>{{ $t("submission.action.submit_for_review") }}</q-item
>
</div>
Expand All @@ -130,7 +130,7 @@
data-cy="accept_for_review"
class="items-center"
clickable
@click="confirmHandler('accept_for_review', submission.id)"
@click="confirmHandler('accept_for_review', submission)"
>{{ $t("submission.action.accept_for_review") }}</q-item
>
<q-item
Expand All @@ -142,7 +142,7 @@
data-cy="accept_as_final"
class="items-center"
clickable
@click="confirmHandler('accept_as_final', submission.id)"
@click="confirmHandler('accept_as_final', submission)"
>{{ $t("submission.action.accept_as_final") }}</q-item
>
<q-item
Expand All @@ -153,7 +153,7 @@
role="menuitem"
class="items-center"
clickable
@click="confirmHandler('request_resubmission', submission.id)"
@click="confirmHandler('request_resubmission', submission)"
>{{ $t("submission.action.request_resubmission") }}</q-item
>
<q-item
Expand All @@ -165,7 +165,7 @@
data-cy="reject"
class="items-center"
clickable
@click="confirmHandler('reject', submission.id)"
@click="confirmHandler('reject', submission)"
>{{ $t("submission.action.reject") }}
</q-item>
<q-item
Expand All @@ -174,7 +174,7 @@
data-cy="archive"
class="items-center"
clickable
@click="confirmHandler('archive', submission.id)"
@click="confirmHandler('archive', submission)"
>{{ $t("submission.action.archive") }}
</q-item>
<q-item
Expand All @@ -186,7 +186,7 @@
data-cy="delete"
class="items-center"
clickable
@click="confirmHandler('delete', submission.id)"
@click="confirmHandler('delete', submission)"
>{{ $t("submission.action.delete") }}
</q-item>
</div>
Expand All @@ -197,7 +197,7 @@
data-cy="open_review"
class="items-center"
clickable
@click="confirmHandler('open', submission.id)"
@click="confirmHandler('open', submission)"
>{{ $t("submission.action.open") }}
</q-item>
<q-item
Expand All @@ -206,7 +206,7 @@
data-cy="close_review"
class="items-center"
clickable
@click="confirmHandler('close', submission.id)"
@click="confirmHandler('close', submission)"
>{{ $t("submission.action.close") }}
</q-item>
</q-menu>
Expand Down Expand Up @@ -289,9 +289,9 @@ function cannotAccessSubmission(submission) {
submission.effective_role == "reviewer"
)
}
async function confirmHandler(action, id) {
async function confirmHandler(action, submission) {
await new Promise((resolve) => {
dirtyDialog(action, id)
dirtyDialog(action, submission)
.onOk(function () {
resolve(true)
})
Expand All @@ -303,12 +303,13 @@ async function confirmHandler(action, id) {
return
}
}
function dirtyDialog(action, id) {
function dirtyDialog(action, submission) {
return dialog({
component: ConfirmStatusChangeDialog,
componentProps: {
action: action,
submissionId: id,
submissionId: submission.id,
currentStatus: submission.status,
},
})
}
Expand Down
73 changes: 73 additions & 0 deletions client/src/components/atoms/StatusChangeDropdown.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<template>
<q-btn-dropdown
v-if="!statusChangingDisabledByRole && !statusChangingDisabledByState"
:label="$t(`submission.toolbar.status_options`)"
flat
menu-anchor="bottom right"
menu-self="top right"
data-cy="status-dropdown"
>
<q-btn-group flat square class="column q-pa-sm" data-cy="decision_options">
<q-btn
v-for="state in nextStates[submissionRef.status]"
:key="state"
v-bind="submissionStateButtons[state].attrs"
:label="$t(`submission.action.${submissionStateButtons[state].action}`)"
@click="
submissionStateButtons[state].action &&
confirmHandler(submissionStateButtons[state].action)
"
></q-btn>
</q-btn-group>
</q-btn-dropdown>
</template>
<script setup>
import ConfirmStatusChangeDialog from "../dialogs/ConfirmStatusChangeDialog.vue"
import { useQuasar } from "quasar"
import {
useStatusChangeControls,
submissionStateButtons,
} from "src/use/guiElements.js"
import { toRef } from "vue"
const { dialog } = useQuasar()
const props = defineProps({
submission: {
type: Object,
default: null,
},
})
const submissionRef = toRef(props, "submission")
const {
statusChangingDisabledByRole,
statusChangingDisabledByState,
nextStates,
} = useStatusChangeControls(submissionRef)
async function confirmHandler(action) {
await new Promise((resolve) => {
dirtyDialog(action)
.onOk(function () {
resolve(true)
})
.onCancel(function () {
resolve(false)
})
})
{
return false
}
}
function dirtyDialog(action) {
return dialog({
component: ConfirmStatusChangeDialog,
componentProps: {
action: action,
submissionId: props.submission.id,
currentStatus: props.submission.status,
},
})
}
</script>
2 changes: 2 additions & 0 deletions client/src/components/atoms/SubmissionPreviewToolbar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
</q-chip>
</div>
</q-toolbar-title>
<status-change-dropdown :submission="submission" />
<q-btn
color="primary"
:to="{
Expand All @@ -40,6 +41,7 @@
</q-header>
</template>
<script setup>
import StatusChangeDropdown from "./StatusChangeDropdown.vue"
const props = defineProps({
submission: {
type: Object,
Expand Down
Loading

0 comments on commit 330f7ae

Please sign in to comment.