Merge pull request #272 from rbt-mm/master-show-hierarchical-view-in-project-list

nscuro · web-flow · commit 58b8940bc123 · 2022-10-18T17:46:59.000+02:00
Show hierarchical view in project list
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -109,6 +109,7 @@
     "property_deleted": "Property deleted",
     "create_project": "Create Project",
     "show_inactive_projects": "Show inactive projects",
+    "hierarchical_view": "Hierarchical view",
     "create_project_property": "Create Project Property",
     "group_name": "Group Name",
     "property_name": "Property Name",
@@ -242,6 +243,7 @@
     "snapshot_notification": "Snapshot Notification",
     "select_project": "Select Project",
     "select_tag": "Select Tag",
+    "parent": "Parent",
     "select": "Select",
     "identity": "Identity",
     "extended": "Extended",
@@ -382,7 +384,8 @@
     "component_device": "Device",
     "component_firmware": "Firmware",
     "component_file": "File",
-    "dates": "Dates"
+    "dates": "Dates",
+    "inactive_active_children": "The project cannot be set to inactive if it has active children"
   },
   "admin": {
     "configuration": "Configuration",
diff --git a/src/views/portfolio/projects/Project.vue b/src/views/portfolio/projects/Project.vue
@@ -125,7 +125,7 @@
         <project-policy-violations :key="this.uuid" :uuid="this.uuid" v-on:total="totalViolations = $event" />
       </b-tab>
     </b-tabs>
-    <project-details-modal :project="cloneDeep(project)" v-on:projectUpdated="syncProjectFields"/>
+    <project-details-modal :project="cloneDeep(project)" :uuid="this.uuid" v-on:projectUpdated="syncProjectFields"/>
     <project-properties-modal :uuid="this.uuid" />
     <project-create-property-modal :uuid="this.uuid" />
     <project-add-version-modal :uuid="this.uuid" />
@@ -244,8 +244,6 @@
     },
     beforeMount() {
       this.uuid = this.$route.params.uuid;
-    },
-    mounted() {
       this.initialize();
     },
     watch:{
diff --git a/src/views/portfolio/projects/ProjectCreateProjectModal.vue b/src/views/portfolio/projects/ProjectCreateProjectModal.vue
@@ -14,6 +14,9 @@
           <b-input-group-form-select id="v-classifier-input" required="true"
                                      v-model="project.classifier" :options="sortAvailableClassifiers"
                                      :label="$t('message.classifier')" :tooltip="$t('message.component_classifier_desc')" />
+          <b-input-group-form-select id="project-parent-input" required="false"
+                                     v-model="selectedParent" :options="availableParents"
+                                     :label="$t('message.parent')" />
           <b-form-group
             id="project-description-form-group"
             :label="this.$t('message.description')"
@@ -111,6 +114,10 @@
         ],
         selectableLicenses: [],
         selectedLicense: '',
+        selectedParent: null,
+        availableParents: [
+          { value: null, text: ''}
+        ],
         project: {},
         tag: '', // The contents of a tag as its being typed into the vue-tag-input
         tags: [], // An array of tags bound to the vue-tag-input
@@ -130,6 +137,7 @@
     },
     beforeMount() {
       this.retrieveLicenses();
+      this.retrieveParents();
     },
     computed: {
       sortAvailableClassifiers: function() {
@@ -149,13 +157,18 @@
       createProject: function() {
         let url = `${this.$api.BASE_URL}/${this.$api.URL_PROJECT}`;
         let tagsNode = [];
+        let parent = {uuid: this.selectedParent};
+        if (this.selectedParent == null){
+          parent = null;
+        }
         this.tags.forEach((tag) => tagsNode.push({name: tag.text}));
         this.axios.put(url, {
           name: this.project.name,
           version: this.project.version,
           group: this.project.group,
           description: this.project.description,
           //license: this.selectedLicense,
+          parent: parent,
           classifier: this.project.classifier,
           purl: this.project.purl,
           cpe: this.project.cpe,
@@ -186,10 +199,31 @@
           this.$toastr.w(this.$t('condition.unsuccessful_action'));
         });
       },
+      retrieveParents: function() {
+        let url = `${this.$api.BASE_URL}/${this.$api.URL_PROJECT}`;
+        this.axios.get(url).then((response) => {
+          for (let i = 0; i < response.data.length; i++) {
+            let project = response.data[i];
+            if (project.version) {
+              this.availableParents.push({value: project.uuid, text: project.name + ' : ' + project.version});
+            } else {
+              this.availableParents.push({value: project.uuid, text: project.name});
+            }
+            if (this.project.parent && this.project.parent.uuid === project.uuid ) {
+              this.selectedParent = project.uuid;
+            }
+          }
+        }).catch((error) => {
+          this.$toastr.w(this.$t('condition.unsuccessful_action'));
+        });
+      },
       resetValues: function () {
         this.project = {};
         this.tag = "";
         this.tags = [];
+        this.selectedParent = null;
+        this.availableParents = [{ value: null, text: ''}]
+        this.retrieveParents();
       }
     }
   }
diff --git a/src/views/portfolio/projects/ProjectDetailsModal.vue b/src/views/portfolio/projects/ProjectDetailsModal.vue
@@ -17,6 +17,9 @@
                                      v-model="project.classifier" :options="availableClassifiers"
                                      :label="$t('message.classifier')" :tooltip="$t('message.component_classifier_desc')"
                                      :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)" />
+          <b-input-group-form-select id="project-parent-input" required="false"
+                                     v-model="selectedParent" :options="availableParents"
+                                     :label="$t('message.parent')" :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)" />
           <b-form-group
             id="project-description-form-group"
             :label="this.$t('message.description')"
@@ -33,7 +36,9 @@
                             style="max-width:none; background-color:transparent;"
                             :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)" />
           </b-form-group>
-          <c-switch id="input-5" class="mx-1" color="primary" v-model="project.active" label :disabled="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)" v-bind="labelIcon" /> {{$t('message.active')}}
+          <c-switch id="input-5" class="mx-1" color="primary" v-model="project.active" label
+                    :disabled="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT) || (project.active && this.hasActiveChild(project))" v-bind="labelIcon"
+                    v-b-tooltip.hover :title="$t('message.inactive_active_children')"/> {{$t('message.active')}}
           <p></p>
           <b-input-group-form-input id="project-uuid" input-group-size="mb-3" type="text" v-model="project.uuid"
                                     lazy="false" required="false" feedback="false" autofocus="false" disabled="true"
@@ -99,7 +104,8 @@
       cSwitch
     },
     props: {
-      project: Object
+      project: Object,
+      uuid: String
     },
     data() {
       return {
@@ -115,6 +121,10 @@
           { value: 'FIRMWARE', text: this.$i18n.t('message.component_firmware') },
           { value: 'FILE', text: this.$i18n.t('message.component_file') }
         ],
+        selectedParent: null,
+        availableParents: [
+          { value: null, text: ''}
+        ],
         tag: '', // The contents of a tag as its being typed into the vue-tag-input
         tags: [], // An array of tags bound to the vue-tag-input
         addOnKeys: [9, 13, 32, ':', ';', ','], // Separators used when typing tags into the vue-tag-input
@@ -128,6 +138,9 @@
       this.readOnlyProjectName = this.project.name;
       this.readOnlyProjectVersion = this.project.version;
     },
+    mounted() {
+      this.retrieveParents();
+    },
     methods: {
       initializeTags: function() {
         this.tags = (this.project.tags || []).map(tag => ({ text: tag.name }));
@@ -151,6 +164,7 @@
           version: this.project.version,
           description: this.project.description,
           classifier: this.project.classifier,
+          parent: {uuid: this.selectedParent},
           cpe: this.project.cpe,
           purl: this.project.purl,
           swidTagId: this.project.swidTagId,
@@ -174,6 +188,39 @@
         }).catch((error) => {
           this.$toastr.w(this.$t('condition.unsuccessful_action'));
         });
+      },
+      retrieveParents: function() {
+        let url = `${this.$api.BASE_URL}/${this.$api.URL_PROJECT}/withoutDescendantsOf/${this.$props.uuid}`;
+        this.axios.get(url).then((response) => {
+          for (let i = 0; i < response.data.length; i++) {
+            let project = response.data[i];
+            if (project.uuid !== this.project.uuid){
+              if (project.version){
+                this.availableParents.push({value: project.uuid, text: project.name + ' : ' + project.version});
+              } else {
+                this.availableParents.push({value: project.uuid, text: project.name});
+              }
+            }
+            if (this.project.parent && this.project.parent.uuid === project.uuid  ) {
+              this.selectedParent = project.uuid;
+            }
+          }
+        }).catch((error) => {
+          this.$toastr.w(this.$t('condition.unsuccessful_action'));
+        });
+      },
+      hasActiveChild: function (project) {
+        let bool = false;
+        if (project.children){
+          for (const child of project.children){
+            if (child.active || bool){
+              return true;
+            } else {
+              bool = this.hasActiveChild(child);
+            }
+          }
+        }
+        return bool;
       }
     }
   }
diff --git a/src/views/portfolio/projects/ProjectList.vue b/src/views/portfolio/projects/ProjectList.vue
