Add vertical tabs for BOM metadata

Signed-off-by: nscuro <[email protected]>
DependencyTrack · Nov 27, 2023 · 4425c9d · 4425c9d
1 parent bc787b8
commit 4425c9d
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 4 deletions.
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -397,10 +397,12 @@
     "supplier": "Supplier",
     "supplier_name": "Supplier name",
     "component_supplier_name_desc": "The organization that supplied the component",
-    "project_supplier_name_desc": "The organization that supplied the project",
+    "project_supplier_name_desc": "The organization that supplied the component that the project describes",
+    "project_metadata_supplier_name_desc": "The organization that supplied the BOM",
     "manufacturer": "Manufacturer",
     "manufacturer_name": "Manufacturer name",
-    "manufacturer_name_desc": "The organization that manufactured the project",
+    "manufacturer_name_desc": "The organization that manufactured the component that the project describes",
+    "authors": "Authors",
     "endpoints": "Endpoints",
     "data": "Data",
     "url": "URL",

diff --git a/src/views/portfolio/projects/ProjectDetailsModal.vue b/src/views/portfolio/projects/ProjectDetailsModal.vue
@@ -83,7 +83,7 @@
         <b-card>
           <b-input-group-form-input id="project-manufacturer-name-input" input-group-size="mb-3" type="text" v-model="project.manufacturer.name"
                                     required="false" readonly :label="$t('message.manufacturer_name')"
-                                    :tooltip="this.$t('message.manufacturer_name_desc')"/>
+                                    disabled="true" :tooltip="this.$t('message.manufacturer_name_desc')"/>
           <b-form-group id="manufacturerUrlsTable-Fieldset" :label="this.$t('message.urls')" label-for="manufacturerUrlsTable">
             <bootstrap-table
               id="manufacturerUrlsTable"
@@ -109,7 +109,7 @@
         <b-card>
           <b-input-group-form-input id="project-supplier-name-input" input-group-size="mb-3" type="text" v-model="project.supplier.name"
                                     required="false" readonly :label="$t('message.supplier_name')"
-                                    :tooltip="this.$t('message.project_supplier_name_desc')"/>
+                                    disabled="true" :tooltip="this.$t('message.project_supplier_name_desc')"/>
           <b-form-group id="supplierUrlsTable-Fieldset" :label="this.$t('message.urls')" label-for="supplierUrlsTable">
             <bootstrap-table
               id="supplierUrlsTable"
@@ -141,6 +141,52 @@
           </bootstrap-table>
         </b-card>
       </b-tab>
+      <b-tab style="border:0;padding:0"
+             v-if="project.metadata && (project.metadata.authors || project.metadata.supplier)">
+        <template v-slot:title><i class="fa fa-file-text-o"></i> {{ $t('message.bom') }}</template>
+        <b-card>
+          <b-tabs pills card vertical>
+            <b-tab :title="$t('message.authors')" v-if="project.metadata.authors">
+              <b-card>
+                <b-form-group id="authorsTable-Fieldset">
+                  <bootstrap-table
+                      id="authorsTable"
+                      ref="authorsTable"
+                      :columns="contactsTableColumns"
+                      :data="project.metadata.authors"
+                      :options="contactsTableOptions">
+                  </bootstrap-table>
+                </b-form-group>
+              </b-card>
+            </b-tab>
+            <b-tab :title="$t('message.supplier')" v-if="project.metadata.supplier">
+              <b-card>
+                <b-input-group-form-input id="project-metadata-supplier-name-input" input-group-size="mb-3" type="text" v-model="project.metadata.supplier.name"
+                                          required="false" readonly :label="$t('message.supplier_name')"
+                                          disabled="true" :tooltip="this.$t('message.project_metadata_supplier_name_desc')"/>
+                <b-form-group id="supplierUrlsTable-Fieldset" :label="this.$t('message.urls')" label-for="supplierUrlsTable">
+                  <bootstrap-table
+                      id="supplierUrlsTable"
+                      ref="supplierUrlsTable"
+                      :columns="urlsTableColumns"
+                      :data="project.metadata.supplier.urls"
+                      :options="urlsTableOptions">
+                  </bootstrap-table>
+                </b-form-group>
+                <b-form-group id="supplierContactsTable-Fieldset" :label="this.$t('message.contacts')" label-for="contactsTable">
+                  <bootstrap-table
+                      id="supplierContactsTable"
+                      ref="supplierContactsTable"
+                      :columns="contactsTableColumns"
+                      :data="project.metadata.supplier.contacts"
+                      :options="contactsTableOptions">
+                  </bootstrap-table>
+                </b-form-group>
+              </b-card>
+            </b-tab>
+          </b-tabs>
+        </b-card>
+      </b-tab>
     </b-tabs>
     <template v-slot:modal-footer="{ cancel }">
       <b-button size="md" variant="outline-danger" @click="deleteProject()" v-permission="PERMISSIONS.PORTFOLIO_MANAGEMENT">{{ $t('message.delete') }}</b-button>