diff --git a/dashboard/src/components/skills/selfReport/RejectSkillModal.vue b/dashboard/src/components/skills/selfReport/RejectSkillModal.vue index 48dcb0359b..79ffe3945b 100644 --- a/dashboard/src/components/skills/selfReport/RejectSkillModal.vue +++ b/dashboard/src/components/skills/selfReport/RejectSkillModal.vue @@ -19,19 +19,29 @@ import {object, string} from "yup"; import { useAppConfig } from '@/common-components/stores/UseAppConfig.js' import SkillsInputFormDialog from "@/components/utils/inputForm/SkillsInputFormDialog.vue"; import SelfReportService from '@/components/skills/selfReport/SelfReportService'; +import { computed } from 'vue'; -const emit = defineEmits(['do-reject']); +const emit = defineEmits(['do-approve', 'do-reject', 'done']); const model = defineModel(); const appConfig = useAppConfig() const route = useRoute(); const props = defineProps({ + requestType: { + type: String, + required: true, + validator: (value) => ['Approve', 'Reject'].includes(value) + }, selectedItems: { type: Array, required: true, } }) +const isApprove = computed(() => props.requestType === 'Approve') +const isReject = computed(() => props.requestType === 'Reject') +const modalTitle = computed(() => isApprove.value ? 'Approve Skills' : 'Reject Skills') + const initialData = { approvalRequiredMsg: '' } @@ -42,11 +52,17 @@ const schema = object({ .max(appConfig.maxSelfReportRejectionMessageLength) .label('Rejection Message') }) -const rejectSkills = (values) => { +const rejectOrApproveSkills = (values) => { const ids = props.selectedItems.map((item) => item.id); - return SelfReportService.reject(route.params.projectId, ids, values.approvalRequiredMsg).then(() => { - emit('do-reject', ids); - }); + if (isReject.value) { + return SelfReportService.reject(route.params.projectId, ids, values.approvalRequiredMsg).then(() => { + emit('do-reject', ids); + }); + } else { + return SelfReportService.approve(route.params.projectId, ids, values.approvalRequiredMsg).then(() => { + emit('do-approve', ids); + }); + } } const done = () => { @@ -61,23 +77,23 @@ const done = () => { :enable-return-focus="true" :initial-values="initialData" :style="{ width: '40rem !important' }" - :ok-button-icon="'fas fa-arrow-alt-circle-right'" - ok-button-label="Reject" + ok-button-icon="fas fa-arrow-alt-circle-right" + :ok-button-label="isApprove ? 'Approve' : 'Reject'" :validation-schema="schema" - :save-data-function="rejectSkills" + :save-data-function="rejectOrApproveSkills" @on-cancel="done" - header="Reject Skills"> -
+ :header="modalTitle"> +
-

This will reject user's request(s) to get points. Users will be notified and you can provide an optional message below.

+

This will {{ isReject ? 'reject' : 'approve' }} user's request(s) to get points. Users will be notified and you can provide an optional message below.

- diff --git a/dashboard/src/components/skills/selfReport/SelfReportApproval.vue b/dashboard/src/components/skills/selfReport/SelfReportApproval.vue index b835832120..4f9797e54f 100644 --- a/dashboard/src/components/skills/selfReport/SelfReportApproval.vue +++ b/dashboard/src/components/skills/selfReport/SelfReportApproval.vue @@ -48,7 +48,8 @@ const expandedRows = ref({}); const totalRows = ref(null); const emailSubscribed = ref(true); const isEmailEnabled = computed(() => appInfo.emailEnabled) -const showRejectModal = ref(false); +const showApproveOrRejectModal = ref(false); +const requestType = ref('Reject'); onMounted(() => { loadApprovals(); @@ -88,31 +89,38 @@ const loadApprovals = () => { }); }; -const approve = () => { +const showApproveModal = () => { + requestType.value = 'Approve'; + showApproveOrRejectModal.value = true; +} + +const doApprove = (idsToApprove) => { loading.value = true; - const idsToApprove = selectedItems.value.map((item) => item.id); - SelfReportService.approve(route.params.projectId, idsToApprove) - .then(() => { - loadApprovals().then(() => { - setTimeout(() => announcer.polite(`approved ${idsToApprove.length} skill approval request${idsToApprove.length > 1 ? 's' : ''}`), 0); - }); - emit('approval-action', 'approved'); - selectedItems.value = []; - }); + loadApprovals().then(() => { + setTimeout(() => announcer.polite(`approved ${idsToApprove.length} skill approval request${idsToApprove.length > 1 ? 's' : ''}`), 0); + emit('approval-action', 'approved'); + selectedItems.value = []; + }); + closeModal(); }; -const doReject = (rejectedIds) => { +const doReject = (idsToReject) => { loading.value = true; loadApprovals().then(() => { - setTimeout(() => announcer.polite(`rejected ${rejectedIds.length} skill approval request${rejectedIds.length > 1 ? 's' : ''}`), 0); + setTimeout(() => announcer.polite(`rejected ${idsToReject.length} skill approval request${idsToReject.length > 1 ? 's' : ''}`), 0); emit('approval-action', 'rejected'); selectedItems.value = []; }); closeModal(); }; +const showRejectModal = () => { + requestType.value = 'Reject'; + showApproveOrRejectModal.value = true; +} + const closeModal = () => { - showRejectModal.value = false; + showApproveOrRejectModal.value = false; } const checkEmailSubscriptionStatus = () => { @@ -170,8 +178,8 @@ const toggleRow = (row) => {
- - + +
@@ -222,7 +230,7 @@ const toggleRow = (row) => { - + @@ -230,7 +238,7 @@ const toggleRow = (row) => { {{ slotProps.data.userIdForDisplay }} - + @@ -264,7 +272,7 @@ const toggleRow = (row) => { - +