From 2eff7a68c3cc6b740cfce6cca3f2ccc20d17e058 Mon Sep 17 00:00:00 2001
From: Jet Li <jetli@freeleaps.com>
Date: Wed, 31 Jul 2024 22:59:27 -0700
Subject: [PATCH] Allowing updating issue on frontend

---
 .../user/workspace/projectIssue/Issue.vue     | 142 ++++++------------
 1 file changed, 47 insertions(+), 95 deletions(-)

diff --git a/frontend/src/pages/user/workspace/projectIssue/Issue.vue b/frontend/src/pages/user/workspace/projectIssue/Issue.vue
index a7bc3e1..b6e4f52 100644
--- a/frontend/src/pages/user/workspace/projectIssue/Issue.vue
+++ b/frontend/src/pages/user/workspace/projectIssue/Issue.vue
@@ -4,14 +4,8 @@
       <div class="accordion" id="workspace-project-accordion">
         <div v-if="project.id" class="accordion-item">
           <h2 class="accordion-header">
-            <button
-              class="accordion-button collapsed"
-              type="button"
-              data-bs-toggle="collapse"
-              data-bs-target="#collapse-project-issue"
-              aria-expanded="false"
-              aria-controls="collapse-project-issue"
-            >
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+              data-bs-target="#collapse-project-issue" aria-expanded="false" aria-controls="collapse-project-issue">
               <div class="project-issue-bar-container dashed-container">
                 <div class="project-issue-open-issues">
                   <label class="project-item-label">{{ $t('Summary') }}</label>
@@ -38,41 +32,25 @@
               </div>
             </button>
           </h2>
-          <div
-            id="collapse-project-issue"
-            class="accordion-collapse collapse"
-            data-bs-parent="#collapse-project-issue"
-          >
+          <div id="collapse-project-issue" class="accordion-collapse collapse" data-bs-parent="#collapse-project-issue">
             <div class="project-invite-collaborator-containter">
-              <button
-                class="accordion-button collapsed"
-                type="button"
-                ref="issueAddBtn"
-                data-bs-toggle="collapse"
-                data-bs-target="#collapse-project-new-issue"
-                aria-expanded="false"
-                aria-controls="collapse-project-issue"
-              >
+              <button class="accordion-button collapsed" type="button" ref="issueAddBtn" data-bs-toggle="collapse"
+                data-bs-target="#collapse-project-new-issue" aria-expanded="false"
+                aria-controls="collapse-project-issue">
                 <div class="project-invite-collaborator">+ {{ $t('Add Issue') }}</div>
               </button>
-              <div
-                id="collapse-project-new-issue"
-                class="accordion-collapse collapse"
-                data-bs-parent="#collapse-project-new-issue"
-              >
+              <div id="collapse-project-new-issue" class="accordion-collapse collapse"
+                data-bs-parent="#collapse-project-new-issue">
                 <div class="project-issue-description-container">
                   <div class="project-issue-description">
                     <label class="project-item-label">{{ $t('New issue description') }}</label>
-                    <button
-                      class="project-issue-description-btn"
-                      @click="
-                        postNewIssue(
-                          project.request.product_id,
-                          project.project_id,
-                          newIssueDescriptions
-                        )
-                      "
-                    >
+                    <button class="project-issue-description-btn" @click="
+                      postNewIssue(
+                        project.request.product_id,
+                        project.project_id,
+                        newIssueDescriptions
+                      )
+                      ">
                       {{ $t('Submit') }}
                     </button>
                   </div>
@@ -81,22 +59,13 @@
               </div>
             </div>
             <div>
-              <div
-                class="project-issue-container"
-                v-for="(issue, issue_index) in project.project.issue.open_issues"
-                :key="issue_index"
-                :id="'project-issue-' + issue_index"
-              >
+              <div class="project-issue-container" v-for="(issue, issue_index) in project.project.issue.open_issues"
+                :key="issue_index" :id="'project-issue-' + issue_index">
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button
-                      class="accordion-button collapsed"
-                      type="button"
-                      data-bs-toggle="collapse"
-                      :data-bs-target="'#collapse-project-issue-details' + issue_index"
-                      aria-expanded="false"
-                      aria-controls="collapse-project-issue-details"
-                    >
+                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                      :data-bs-target="'#collapse-project-issue-details' + issue_index" aria-expanded="false"
+                      aria-controls="collapse-project-issue-details">
                       <div class="project-issue-header dashed-container">
                         <div class="project-issue-title">
                           <label class="project-item-label">{{ $t('Issue title') }}</label>
@@ -117,57 +86,39 @@
                       </div>
                     </button>
                   </h2>
-                  <div
-                    :id="'collapse-project-issue-details' + issue_index"
-                    class="accordion-collapse collapse"
-                    :data-bs-parent="'#collapse-project-issue-details' + issue_index"
-                  >
+                  <div :id="'collapse-project-issue-details' + issue_index" class="accordion-collapse collapse"
+                    :data-bs-parent="'#collapse-project-issue-details' + issue_index">
                     <div class="project-issue-description-container">
-                      <div v-if="!updatingIssue || updatingIssue.issue_id !== issue.id" class="project-issue-description">
+                      <div v-if="!updatingIssue || updatingIssue.issue_id !== issue.id"
+                        class="project-issue-description">
                         <label class="project-item-label">{{ $t('Issue description') }}</label>
-                        <button
-                          :hidden="!showIssueActionButton(project.project, issue, 'Edit')"
-                          class="project-issue-description-btn"
-                          @click="editIssue(issue)"
-                        >
+                        <button :hidden="!showIssueActionButton(project.project, issue, 'Edit')"
+                          class="project-issue-description-btn" @click="editIssue(issue)">
                           {{ $t('Edit') }}
                         </button>
-                        <button
-                          :hidden="!showIssueActionButton(project.project, issue, 'Resolve')"
-                          class="project-issue-description-btn"
-                          @click="setProjectIssueStatus(issue.id, 1)"
-                        >
+                        <button :hidden="!showIssueActionButton(project.project, issue, 'Resolve')"
+                          class="project-issue-description-btn" @click="setProjectIssueStatus(issue.id, 1)">
                           {{ $t('Resolve') }}
                         </button>
-                        <button
-                          :hidden="!showIssueActionButton(project.project, issue, 'Confirm')"
-                          class="project-issue-description-btn"
-                          @click="setProjectIssueStatus(issue.id, 2)"
-                        >
+                        <button :hidden="!showIssueActionButton(project.project, issue, 'Confirm')"
+                          class="project-issue-description-btn" @click="setProjectIssueStatus(issue.id, 2)">
                           {{ $t('Confirm') }}
                         </button>
-                        <button
-                          :hidden="!showIssueActionButton(project.project, issue, 'Reopen')"
-                          class="project-issue-description-btn"
-                          @click="setProjectIssueStatus(issue.id, 0)"
-                        >
+                        <button :hidden="!showIssueActionButton(project.project, issue, 'Reopen')"
+                          class="project-issue-description-btn" @click="setProjectIssueStatus(issue.id, 0)">
                           {{ $t('Reopen') }}
                         </button>
                       </div>
-                      <p v-if="!updatingIssue || updatingIssue.issue_id !== issue.id" class="project-item-text">{{ issue.description }}</p>
-                      <div v-if="updatingIssue && updatingIssue.issue_id === issue.id" class="project-issue-description-container">
+                      <p v-if="!updatingIssue || updatingIssue.issue_id !== issue.id" class="project-item-text">{{
+                        issue.description }}</p>
+                      <div v-if="updatingIssue && updatingIssue.issue_id === issue.id"
+                        class="project-issue-description-container">
                         <div class="project-issue-description">
                           <label class="project-item-label">{{ $t('Issue title') }}</label>
-                          <button
-                            class="project-issue-description-btn"
-                            @click="updateIssueCancel"
-                          >
+                          <button class="project-issue-description-btn" @click="updateIssueCancel">
                             {{ $t('Cancel') }}
                           </button>
-                          <button
-                            class="project-issue-description-btn"
-                            @click="updateIssue"
-                          >
+                          <button class="project-issue-description-btn" @click="updateIssue">
                             {{ $t('Update') }}
                           </button>
                         </div>
@@ -180,15 +131,12 @@
                           <div class="upload-contianer">
                             <label class="btn btn-link">
                               <span v-if="!updatingIssue.issue_attachment">{{ $t('Upload attachment') }}</span>
-                              <span v-if="updatingIssue.issue_attachment">{{ updatingIssue.issue_attachment.name }}</span>
+                              <span v-if="updatingIssue.issue_attachment">{{ updatingIssue.issue_attachment.name
+                                }}</span>
                               <input type="file" hidden @change="handleFileUpload" />
                             </label>
-                            <svg-icon
-                              v-if="updatingIssue.issue_attachment"
-                              icon="delete"
-                              class-name="delete-icon"
-                              @click.stop="clearFile"
-                            />
+                            <svg-icon v-if="updatingIssue.issue_attachment" icon="delete" class-name="delete-icon"
+                              @click.stop="clearFile" />
                           </div>
                         </div>
                       </div>
@@ -280,11 +228,15 @@ export default {
     },
     editIssue(issue) {
       console.log('edit issue', issue)
+      var attachment = null
+      if (issue.attachment != null) {
+        attachment = issue.attachment
+      }
       this.updatingIssue = {
         issue_id: issue.id,
         issue_title: issue.title,
         issue_description: issue.description,
-        issue_attachment: issue.attachment
+        issue_attachment: attachment
       }
     },
     updateIssue() {