From 0d8e5833aa4d0d2af350671f63d3537c34cf1795 Mon Sep 17 00:00:00 2001
From: Vanessa Fotso <46642178+vanessuniq@users.noreply.github.com>
Date: Thu, 8 Aug 2024 09:21:45 -0400
Subject: [PATCH] Allow Admin to Update Project Description (#632)

allow updating project description

Signed-off-by: Vanessa Fotso <vfotso@mitre.org>
---
 app/javascript/components/project/Project.vue | 11 +++
 .../components/projects/Projects.vue          |  2 +-
 .../components/projects/ProjectsTable.vue     | 11 +--
 .../projects/RenameProjectModal.vue           | 70 ---------------
 .../projects/UpdateProjectDetailsModal.vue    | 85 +++++++++++++++++++
 5 files changed, 103 insertions(+), 76 deletions(-)
 delete mode 100644 app/javascript/components/projects/RenameProjectModal.vue
 create mode 100644 app/javascript/components/projects/UpdateProjectDetailsModal.vue

diff --git a/app/javascript/components/project/Project.vue b/app/javascript/components/project/Project.vue
index 5b6390bb..01b0a07c 100644
--- a/app/javascript/components/project/Project.vue
+++ b/app/javascript/components/project/Project.vue
@@ -215,6 +215,10 @@
               <i v-if="!showDetails" class="mdi mdi-menu-up superVerticalAlign collapsableArrow" />
             </div>
             <b-collapse id="collapse-details" v-model="showDetails">
+              <p class="ml-2 mb-0 mt-2"><strong>Name: </strong>{{ project.name }}</p>
+              <p v-if="project.description" class="ml-2 mb-0 mt-2">
+                <strong>Description: </strong>{{ project.description }}
+              </p>
               <p class="ml-2 mb-0 mt-2">
                 <strong>Applicable - Configurable: </strong> {{ project.details.ac }} ({{
                   ((project.details.ac / project.details.total) * 100).toFixed(2)
@@ -256,6 +260,11 @@
                 }}%)
               </p>
               <p class="ml-2 mb-0 mt-2"><strong>Total: </strong> {{ project.details.total }}</p>
+              <UpdateProjectDetailsModal
+                v-if="role_gte_to(effective_permissions, 'admin')"
+                :project="project"
+                @projectUpdated="refreshProject"
+              />
             </b-collapse>
           </b-col>
         </b-row>
@@ -328,6 +337,7 @@ import AddComponentModal from "../components/AddComponentModal.vue";
 import NewComponentModal from "../components/NewComponentModal.vue";
 import DiffViewer from "./DiffViewer.vue";
 import RevisionHistory from "./RevisionHistory.vue";
+import UpdateProjectDetailsModal from "../projects/UpdateProjectDetailsModal.vue";
 
 export default {
   name: "Project",
@@ -340,6 +350,7 @@ export default {
     NewComponentModal,
     DiffViewer,
     RevisionHistory,
+    UpdateProjectDetailsModal,
   },
   mixins: [DateFormatMixinVue, AlertMixinVue, FormMixinVue, RoleComparisonMixin],
   props: {
diff --git a/app/javascript/components/projects/Projects.vue b/app/javascript/components/projects/Projects.vue
index 10262d02..2eb983cd 100644
--- a/app/javascript/components/projects/Projects.vue
+++ b/app/javascript/components/projects/Projects.vue
@@ -4,7 +4,7 @@
     <ProjectsTable
       :projects="projectlist"
       :is_vulcan_admin="is_vulcan_admin"
-      @projectRenamed="refreshProjects"
+      @projectUpdated="refreshProjects"
     />
   </div>
 </template>
diff --git a/app/javascript/components/projects/ProjectsTable.vue b/app/javascript/components/projects/ProjectsTable.vue
index 922bfebc..95742c70 100644
--- a/app/javascript/components/projects/ProjectsTable.vue
+++ b/app/javascript/components/projects/ProjectsTable.vue
@@ -89,11 +89,12 @@
       </template>
 
       <template #cell(actions)="data">
-        <RenameProjectModal
+        <UpdateProjectDetailsModal
           v-if="is_vulcan_admin || data.item.admin"
           :project="data.item"
+          :is_project_table="true"
           class="floatright"
-          @projectRenamed="refreshProjects"
+          @projectUpdated="refreshProjects"
         />
         <span v-if="!data.item.is_member && !data.item.access_request_id">
           <b-button
@@ -146,11 +147,11 @@
 
 <script>
 import DateFormatMixinVue from "../../mixins/DateFormatMixin.vue";
-import RenameProjectModal from "./RenameProjectModal.vue";
+import UpdateProjectDetailsModal from "./UpdateProjectDetailsModal.vue";
 
 export default {
   name: "ProjectsTable",
-  components: { RenameProjectModal },
+  components: { UpdateProjectDetailsModal },
   mixins: [DateFormatMixinVue],
   props: {
     projects: {
@@ -298,7 +299,7 @@ export default {
       }
     },
     refreshProjects: function () {
-      this.$emit("projectRenamed");
+      this.$emit("projectUpdated");
     },
     toggleTruncate: function (id) {
       this.$set(this.truncated, id, !this.truncated[id]);
diff --git a/app/javascript/components/projects/RenameProjectModal.vue b/app/javascript/components/projects/RenameProjectModal.vue
deleted file mode 100644
index 3dfb0dd2..00000000
--- a/app/javascript/components/projects/RenameProjectModal.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-  <span>
-    <b-button class="px-2 m-2" variant="primary" @click="showModal()">
-      <i class="mdi mdi-wrench" aria-hidden="true" />
-      Rename
-    </b-button>
-    <b-modal
-      ref="renameProjectModal"
-      title="Rename"
-      size="lg"
-      ok-title="Rename"
-      @show="resetModal()"
-      @ok="renameProject()"
-    >
-      <b-form @submit="renameProject()">
-        <!-- Name the component -->
-        <b-form-group label="Name">
-          <b-form-input v-model="name" placeholder="Project Name" required autocomplete="off" />
-        </b-form-group>
-
-        <!-- Allow the enter button to submit the form -->
-        <b-btn type="submit" class="d-none" @click.prevent="renameProject()" />
-      </b-form>
-    </b-modal>
-  </span>
-</template>
-
-<script>
-import axios from "axios";
-import FormMixinVue from "../../mixins/FormMixin.vue";
-import AlertMixinVue from "../../mixins/AlertMixin.vue";
-
-export default {
-  name: "RenameProjectModal",
-  mixins: [AlertMixinVue, FormMixinVue],
-  props: {
-    project: {
-      type: Object,
-      required: true,
-    },
-  },
-  data: function () {
-    return {
-      name: this.project.name,
-    };
-  },
-  methods: {
-    resetModal: function () {
-      this.name = this.project.name;
-    },
-    showModal: function () {
-      this.$refs["renameProjectModal"].show();
-    },
-    renameProject: function () {
-      this.$refs["renameProjectModal"].hide();
-      let payload = { project: { name: this["name"] } };
-      axios
-        .put(`/projects/${this.project.id}`, payload)
-        .then(this.renameProjectSuccess)
-        .catch(this.alertOrNotifyResponse);
-    },
-    renameProjectSuccess: function (response) {
-      this.alertOrNotifyResponse(response);
-      this.$emit("projectRenamed");
-    },
-  },
-};
-</script>
-
-<style scoped></style>
diff --git a/app/javascript/components/projects/UpdateProjectDetailsModal.vue b/app/javascript/components/projects/UpdateProjectDetailsModal.vue
new file mode 100644
index 00000000..5db8d5d2
--- /dev/null
+++ b/app/javascript/components/projects/UpdateProjectDetailsModal.vue
@@ -0,0 +1,85 @@
+<template>
+  <span>
+    <b-button
+      class="px-2 m-2"
+      :variant="is_project_table ? 'primary' : 'success'"
+      @click="showModal()"
+    >
+      <i v-if="is_project_table" class="mdi mdi-wrench" aria-hidden="true" />
+      {{ is_project_table ? "Update" : "Update Details" }}
+    </b-button>
+    <b-modal
+      ref="updateProjectDetailsModal"
+      title="Update Project Details"
+      size="lg"
+      ok-title="Update Project Details"
+      @show="resetModal()"
+      @ok="updateProjectDetails()"
+    >
+      <b-form @submit="updateProjectDetails()">
+        <!-- Name of the project -->
+        <b-form-group label="Name">
+          <b-form-input v-model="name" placeholder="Project Name" required autocomplete="off" />
+        </b-form-group>
+        <!-- Description -->
+        <b-form-group label="Description">
+          <b-form-textarea v-model="description" placeholder="" rows="3" />
+        </b-form-group>
+
+        <!-- Allow the enter button to submit the form -->
+        <b-btn type="submit" class="d-none" @click.prevent="updateProjectDetails()" />
+      </b-form>
+    </b-modal>
+  </span>
+</template>
+
+<script>
+import axios from "axios";
+import FormMixinVue from "../../mixins/FormMixin.vue";
+import AlertMixinVue from "../../mixins/AlertMixin.vue";
+
+export default {
+  name: "UpdateProjectDetailsModal",
+  mixins: [AlertMixinVue, FormMixinVue],
+  props: {
+    project: {
+      type: Object,
+      required: true,
+    },
+    is_project_table: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data: function () {
+    return {
+      name: this.project.name,
+      description: this.project.description,
+    };
+  },
+  methods: {
+    resetModal: function () {
+      this.name = this.project.name;
+      this.description = this.project.description;
+    },
+    showModal: function () {
+      this.$refs["updateProjectDetailsModal"].show();
+    },
+    updateProjectDetails: function () {
+      this.$refs["updateProjectDetailsModal"].hide();
+      let payload = { project: { name: this["name"], description: this["description"] } };
+      axios
+        .put(`/projects/${this.project.id}`, payload)
+        .then(this.editProjectSuccess)
+        .catch(this.alertOrNotifyResponse);
+    },
+    editProjectSuccess: function (response) {
+      this.alertOrNotifyResponse(response);
+      this.$emit("projectUpdated");
+    },
+  },
+};
+</script>
+
+<style scoped></style>