Skip to content

Commit

Permalink
Allow Admin to Update Project Description (#632)
Browse files Browse the repository at this point in the history
allow updating project description

Signed-off-by: Vanessa Fotso <vfotso@mitre.org>
  • Loading branch information
vanessuniq authored Aug 8, 2024
1 parent 509ff27 commit 0d8e583
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 76 deletions.
11 changes: 11 additions & 0 deletions app/javascript/components/project/Project.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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",
Expand All @@ -340,6 +350,7 @@ export default {
NewComponentModal,
DiffViewer,
RevisionHistory,
UpdateProjectDetailsModal,
},
mixins: [DateFormatMixinVue, AlertMixinVue, FormMixinVue, RoleComparisonMixin],
props: {
Expand Down
2 changes: 1 addition & 1 deletion app/javascript/components/projects/Projects.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<ProjectsTable
:projects="projectlist"
:is_vulcan_admin="is_vulcan_admin"
@projectRenamed="refreshProjects"
@projectUpdated="refreshProjects"
/>
</div>
</template>
Expand Down
11 changes: 6 additions & 5 deletions app/javascript/components/projects/ProjectsTable.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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]);
Expand Down
70 changes: 0 additions & 70 deletions app/javascript/components/projects/RenameProjectModal.vue

This file was deleted.

85 changes: 85 additions & 0 deletions app/javascript/components/projects/UpdateProjectDetailsModal.vue
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 0d8e583

Please sign in to comment.