Allow Admin to Update Project Description

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: {

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>

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]);

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>