Merge pull request #881 from upb-uc4/feature/cancel_operation

Cancel own pending operation
upb-uc4 · Mar 8, 2021 · 9f3458a · 9f3458a
2 parents f684b40 + 565542a
commit 9f3458a
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 25 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+# [0.19.2](https://github.com/upb-uc4/ui-web/compare/v0.19.1...v0.19.2) (2021-03-XX)+
+- Add option to cancel own pending operations [#881](https://github.com/upb-uc4/ui-web/pull/881)
+
 # [0.19.1](https://github.com/upb-uc4/ui-web/compare/v0.19.0...v0.19.1) (2021-03-03)
 ## Feature
 - Add exams API [#864](https://github.com/upb-uc4/ui-web/pull/864)

diff --git a/src/components/common/dashboard/OperationComponent.vue b/src/components/common/dashboard/OperationComponent.vue
@@ -78,27 +78,41 @@
                         </div>
                     </div>
                 </div>
-                <div v-if="actionRequired && isPending" class="w-full md:w-1/3 flex justify-end items-baseline">
-                    <button
-                        :id="'op_approve_' + shownOpId"
-                        :disabled="sentApprove"
-                        :class="{ invisible: sentReject }"
-                        class="w-8 h-8 btn-base btn-icon-green text-xs"
-                        title="Approve"
-                        @click.stop="approve"
-                    >
-                        <i class="fas fa-check"></i>
-                    </button>
-                    <button
-                        :id="'op_startRejection_' + shownOpId"
-                        :disabled="sentReject || provideReason"
-                        :class="{ invisible: sentApprove }"
-                        class="ml-2 w-8 h-8 btn-base btn-icon-red-filled text-xs"
-                        title="Reject"
-                        @click.stop="toggleReasonMenu"
-                    >
-                        <i class="fas fa-times"></i>
-                    </button>
+                <div v-if="isPending" class="w-full md:w-1/3 flex justify-end items-baseline">
+                    <div v-if="actionRequired">
+                        <button
+                            :id="'op_approve_' + shownOpId"
+                            :disabled="sentApprove"
+                            :class="{ invisible: sentReject }"
+                            class="w-8 h-8 btn-base btn-icon-green text-xs"
+                            title="Approve"
+                            @click.stop="approve"
+                        >
+                            <i class="fas fa-check"></i>
+                        </button>
+                        <button
+                            :id="'op_startRejection_' + shownOpId"
+                            :disabled="sentReject || provideReason"
+                            :class="{ invisible: sentApprove }"
+                            class="ml-2 w-8 h-8 btn-base btn-icon-red-filled text-xs"
+                            title="Reject"
+                            @click.stop="toggleReasonMenu"
+                        >
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                    <div v-else-if="isMyOperation">
+                        <button
+                            :id="'op_cancel_' + shownOpId"
+                            :disabled="sentReject"
+                            :class="{ invisible: sentApprove }"
+                            class="ml-2 w-8 h-8 btn-base btn-icon-red-filled text-xs"
+                            title="Abort this operation"
+                            @click.stop="reject(true)"
+                        >
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
                 </div>
             </div>
             <div v-if="showDetails" class="flex flex-col w-full mt-4 dark:text-gray-400">
@@ -137,7 +151,7 @@
                             :title="finalReason == '' ? 'Please provide a reason' : 'Reject'"
                             :disabled="finalReason == ''"
                             class="btn btn-remove text-sm h-12"
-                            @click.stop="reject"
+                            @click.stop="reject()"
                         >
                             Reject
                         </button>
@@ -310,11 +324,14 @@
                 provideReason.value = !provideReason.value;
             }
 
-            async function reject() {
-                if (await executeTransaction(new RejectOperationTransaction(operation.value, finalReason.value))) {
+            async function reject(isCancellation?: boolean) {
+                const reason = isCancellation ? "Operation aborted by initiator." : finalReason.value;
+                if (await executeTransaction(new RejectOperationTransaction(operation.value, reason))) {
                     store.commit(MutationTypes.ADD_OPERATION_REJECTION, operation.value.operationId);
                     sentReject.value = true;
-                    provideReason.value = !provideReason.value;
+                    if (!isCancellation) {
+                        provideReason.value = !provideReason.value;
+                    }
                     toggleDetails();
                 }
             }