From 9eda6eff59cea2470b11374a7b760d38890c7810 Mon Sep 17 00:00:00 2001
From: nscuro <nscuro@protonmail.com>
Date: Wed, 8 Nov 2023 15:08:03 +0100
Subject: [PATCH 1/4] Add support for project and component suppliers

Signed-off-by: nscuro <nscuro@protonmail.com>
---
 src/i18n/locales/en.json                      |  4 +
 .../projects/ComponentDetailsModal.vue        | 99 +++++++++++++++++++
 .../projects/ProjectDetailsModal.vue          | 99 +++++++++++++++++++
 3 files changed, 202 insertions(+)

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 0c208edde..53526d860 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -394,6 +394,10 @@
     "service_details": "Service Details",
     "provider": "Provider",
     "provider_name": "Provider name",
+    "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 that the BOM describes",
     "endpoints": "Endpoints",
     "data": "Data",
     "url": "URL",
diff --git a/src/views/portfolio/projects/ComponentDetailsModal.vue b/src/views/portfolio/projects/ComponentDetailsModal.vue
index 0f001160d..bad34887b 100644
--- a/src/views/portfolio/projects/ComponentDetailsModal.vue
+++ b/src/views/portfolio/projects/ComponentDetailsModal.vue
@@ -104,6 +104,32 @@
                                     :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)" />
         </b-card>
       </b-tab>
+      <b-tab class="body-bg-color" style="border:0;padding:0" v-if="component.supplier">
+        <template v-slot:title><i class="fa fa-building-o"></i> {{ $t('message.supplier') }}</template>
+        <b-card>
+          <b-input-group-form-input id="component-supplier-name-input" input-group-size="mb-3" type="text" v-model="component.supplier.name"
+                                    required="false" readonly :label="$t('message.supplier_name')"
+                                    :tooltip="this.$t('message.component_supplier_name_desc')"/>
+          <b-form-group id="supplierUrlsTable-Fieldset" :label="this.$t('message.urls')" label-for="supplierUrlsTable">
+            <bootstrap-table
+              id="supplierUrlsTable"
+              ref="supplierUrlsTable"
+              :columns="supplierUrlsTableColumns"
+              :data="component.supplier.urls"
+              :options="supplierUrlsTableOptions">
+            </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="supplierContactsTableColumns"
+              :data="component.supplier.contacts"
+              :options="supplierContactsTableOptions">
+            </bootstrap-table>
+          </b-form-group>
+        </b-card>
+      </b-tab>
       <b-tab>
         <template v-slot:title><i class="fa fa-external-link"></i> {{ $t('message.external_references') }}</template>
         <b-card>
@@ -167,6 +193,78 @@
         ],
         selectableLicenses: [],
         selectedLicense: '',
+        supplierUrlsTableColumns: [
+          {
+            title: this.$t('message.urls'),
+            sortable: false,
+            formatter(value, row, index) {
+              return xssFilters.inHTMLData(common.valueWithDefault(row, ""));
+            }
+          }
+        ],
+        supplierUrlsTableOptions: {
+          search: false,
+          showHeader: false,
+          showColumns: false,
+          showRefresh: false,
+          pagination: true,
+          silentSort: false,
+          sidePagination: 'client',
+          queryParamsType: 'pageSize',
+          pageList: '[5, 10, 25]',
+          pageSize: 5,
+          icons: {
+            refresh: 'fa-refresh'
+          },
+          responseHandler: function (res, xhr) {
+            res.total = xhr.getResponseHeader("X-Total-Count");
+            return res;
+          }
+        },
+        supplierContactsTableColumns: [
+          {
+            title: this.$t('message.name'),
+            field: "name",
+            sortable: false,
+            formatter(value, row, index) {
+              return xssFilters.inHTMLData(common.valueWithDefault(value, ""));
+            }
+          },
+          {
+            title: this.$t('message.email'),
+            field: "email",
+            sortable: false,
+            formatter(value, row, index) {
+              return xssFilters.inHTMLData(common.valueWithDefault(value, ""));
+            }
+          },
+          {
+            title: this.$t('message.phone'),
+            field: "phone",
+            sortable: false,
+            formatter(value, row, index) {
+              return xssFilters.inHTMLData(common.valueWithDefault(value, ""));
+            }
+          }
+        ],
+        supplierContactsTableOptions: {
+          search: false,
+          showColumns: false,
+          showRefresh: false,
+          pagination: true,
+          silentSort: false,
+          sidePagination: 'client',
+          queryParamsType: 'pageSize',
+          pageList: '[5, 10, 25]',
+          pageSize: 5,
+          icons: {
+            refresh: 'fa-refresh'
+          },
+          responseHandler: function (res, xhr) {
+            res.total = xhr.getResponseHeader("X-Total-Count");
+            return res;
+          }
+        },
         referencesTableColumns: [
           {
             title: this.$t('message.url'),
@@ -218,6 +316,7 @@
         let url = `${this.$api.BASE_URL}/${this.$api.URL_COMPONENT}`;
         this.axios.post(url, {
           uuid: this.component.uuid,
+          supplier: this.component.supplier,
           name: this.component.name,
           version: this.component.version,
           group: this.component.group,
diff --git a/src/views/portfolio/projects/ProjectDetailsModal.vue b/src/views/portfolio/projects/ProjectDetailsModal.vue
index 0ac486b1c..021e7ee2f 100644
--- a/src/views/portfolio/projects/ProjectDetailsModal.vue
+++ b/src/views/portfolio/projects/ProjectDetailsModal.vue
@@ -78,6 +78,32 @@
                                     :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)" />
         </b-card>
       </b-tab>
+      <b-tab class="body-bg-color" style="border:0;padding:0" v-if="project.supplier">
+        <template v-slot:title><i class="fa fa-building-o"></i> {{ $t('message.supplier') }}</template>
+        <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')"/>
+          <b-form-group id="supplierUrlsTable-Fieldset" :label="this.$t('message.urls')" label-for="supplierUrlsTable">
+            <bootstrap-table
+              id="supplierUrlsTable"
+              ref="supplierUrlsTable"
+              :columns="supplierUrlsTableColumns"
+              :data="project.supplier.urls"
+              :options="supplierUrlsTableOptions">
+            </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="supplierContactsTableColumns"
+              :data="project.supplier.contacts"
+              :options="supplierContactsTableOptions">
+            </bootstrap-table>
+          </b-form-group>
+        </b-card>
+      </b-tab>
       <b-tab>
         <template v-slot:title><i class="fa fa-external-link"></i> {{ $t('message.external_references') }}</template>
         <b-card>
@@ -149,6 +175,78 @@
           dataOff: '\u2715'
         },
         isLoading: false,
+        supplierUrlsTableColumns: [
+          {
+            title: this.$t('message.urls'),
+            sortable: false,
+            formatter(value, row, index) {
+              return xssFilters.inHTMLData(common.valueWithDefault(row, ""));
+            }
+          }
+        ],
+        supplierUrlsTableOptions: {
+          search: false,
+          showHeader: false,
+          showColumns: false,
+          showRefresh: false,
+          pagination: true,
+          silentSort: false,
+          sidePagination: 'client',
+          queryParamsType: 'pageSize',
+          pageList: '[5, 10, 25]',
+          pageSize: 5,
+          icons: {
+            refresh: 'fa-refresh'
+          },
+          responseHandler: function (res, xhr) {
+            res.total = xhr.getResponseHeader("X-Total-Count");
+            return res;
+          }
+        },
+        supplierContactsTableColumns: [
+          {
+            title: this.$t('message.name'),
+            field: "name",
+            sortable: false,
+            formatter(value, row, index) {
+              return xssFilters.inHTMLData(common.valueWithDefault(value, ""));
+            }
+          },
+          {
+            title: this.$t('message.email'),
+            field: "email",
+            sortable: false,
+            formatter(value, row, index) {
+              return xssFilters.inHTMLData(common.valueWithDefault(value, ""));
+            }
+          },
+          {
+            title: this.$t('message.phone'),
+            field: "phone",
+            sortable: false,
+            formatter(value, row, index) {
+              return xssFilters.inHTMLData(common.valueWithDefault(value, ""));
+            }
+          }
+        ],
+        supplierContactsTableOptions: {
+          search: false,
+          showColumns: false,
+          showRefresh: false,
+          pagination: true,
+          silentSort: false,
+          sidePagination: 'client',
+          queryParamsType: 'pageSize',
+          pageList: '[5, 10, 25]',
+          pageSize: 5,
+          icons: {
+            refresh: 'fa-refresh'
+          },
+          responseHandler: function (res, xhr) {
+            res.total = xhr.getResponseHeader("X-Total-Count");
+            return res;
+          }
+        },
         referencesTableColumns: [
           {
             title: this.$t('message.url'),
@@ -225,6 +323,7 @@
           uuid: this.project.uuid,
           author: this.project.author,
           publisher: this.project.publisher,
+          supplier: this.project.supplier,
           group: this.project.group,
           name: this.project.name,
           version: this.project.version,

From f227f7f9d13eb022256061d57e1c9686595fdd99 Mon Sep 17 00:00:00 2001
From: nscuro <nscuro@protonmail.com>
Date: Mon, 27 Nov 2023 21:16:32 +0100
Subject: [PATCH 2/4] Add manufacturer tab to project details modal

Signed-off-by: nscuro <nscuro@protonmail.com>
---
 src/i18n/locales/en.json                      |  5 ++-
 .../projects/ProjectDetailsModal.vue          | 42 +++++++++++++++----
 2 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 53526d860..8c74c0866 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -397,7 +397,10 @@
     "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 that the BOM describes",
+    "project_supplier_name_desc": "The organization that supplied the project",
+    "manufacturer": "Manufacturer",
+    "manufacturer_name": "Manufacturer name",
+    "manufacturer_name_desc": "The organization that manufactured the project",
     "endpoints": "Endpoints",
     "data": "Data",
     "url": "URL",
diff --git a/src/views/portfolio/projects/ProjectDetailsModal.vue b/src/views/portfolio/projects/ProjectDetailsModal.vue
index 021e7ee2f..4747b9f16 100644
--- a/src/views/portfolio/projects/ProjectDetailsModal.vue
+++ b/src/views/portfolio/projects/ProjectDetailsModal.vue
@@ -78,6 +78,32 @@
                                     :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)" />
         </b-card>
       </b-tab>
+      <b-tab class="body-bg-color" style="border:0;padding:0" v-if="project.metadata && project.metadata.manufacturer">
+        <template v-slot:title><i class="fa fa-industry"></i> {{ $t('message.manufacturer') }}</template>
+        <b-card>
+          <b-input-group-form-input id="project-manufacturer-name-input" input-group-size="mb-3" type="text" v-model="project.metadata.manufacturer.name"
+                                    required="false" readonly :label="$t('message.manufacturer_name')"
+                                    :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"
+              ref="manufacturerUrlsTable"
+              :columns="urlsTableColumns"
+              :data="project.metadata.manufacturer.urls"
+              :options="urlsTableOptions">
+            </bootstrap-table>
+          </b-form-group>
+          <b-form-group id="manufacturerContactsTable-Fieldset" :label="this.$t('message.contacts')" label-for="contactsTable">
+            <bootstrap-table
+              id="manufacturerContactsTable"
+              ref="manufacturerContactsTable"
+              :columns="contactsTableColumns"
+              :data="project.metadata.manufacturer.contacts"
+              :options="contactsTableOptions">
+            </bootstrap-table>
+          </b-form-group>
+        </b-card>
+      </b-tab>
       <b-tab class="body-bg-color" style="border:0;padding:0" v-if="project.supplier">
         <template v-slot:title><i class="fa fa-building-o"></i> {{ $t('message.supplier') }}</template>
         <b-card>
@@ -88,18 +114,18 @@
             <bootstrap-table
               id="supplierUrlsTable"
               ref="supplierUrlsTable"
-              :columns="supplierUrlsTableColumns"
+              :columns="urlsTableColumns"
               :data="project.supplier.urls"
-              :options="supplierUrlsTableOptions">
+              :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="supplierContactsTableColumns"
+              :columns="contactsTableColumns"
               :data="project.supplier.contacts"
-              :options="supplierContactsTableOptions">
+              :options="contactsTableOptions">
             </bootstrap-table>
           </b-form-group>
         </b-card>
@@ -175,7 +201,7 @@
           dataOff: '\u2715'
         },
         isLoading: false,
-        supplierUrlsTableColumns: [
+        urlsTableColumns: [
           {
             title: this.$t('message.urls'),
             sortable: false,
@@ -184,7 +210,7 @@
             }
           }
         ],
-        supplierUrlsTableOptions: {
+        urlsTableOptions: {
           search: false,
           showHeader: false,
           showColumns: false,
@@ -203,7 +229,7 @@
             return res;
           }
         },
-        supplierContactsTableColumns: [
+        contactsTableColumns: [
           {
             title: this.$t('message.name'),
             field: "name",
@@ -229,7 +255,7 @@
             }
           }
         ],
-        supplierContactsTableOptions: {
+        contactsTableOptions: {
           search: false,
           showColumns: false,
           showRefresh: false,

From bc787b846ef39247db01aac6ed71bb3699316f9e Mon Sep 17 00:00:00 2001
From: nscuro <nscuro@protonmail.com>
Date: Mon, 27 Nov 2023 21:48:04 +0100
Subject: [PATCH 3/4] `project.metadata.manufacturer` -> `project.manufacturer`

Signed-off-by: nscuro <nscuro@protonmail.com>
---
 src/views/portfolio/projects/ProjectDetailsModal.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/portfolio/projects/ProjectDetailsModal.vue b/src/views/portfolio/projects/ProjectDetailsModal.vue
index 4747b9f16..6c0d92194 100644
--- a/src/views/portfolio/projects/ProjectDetailsModal.vue
+++ b/src/views/portfolio/projects/ProjectDetailsModal.vue
@@ -78,10 +78,10 @@
                                     :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)" />
         </b-card>
       </b-tab>
-      <b-tab class="body-bg-color" style="border:0;padding:0" v-if="project.metadata && project.metadata.manufacturer">
+      <b-tab class="body-bg-color" style="border:0;padding:0" v-if="project.manufacturer">
         <template v-slot:title><i class="fa fa-industry"></i> {{ $t('message.manufacturer') }}</template>
         <b-card>
-          <b-input-group-form-input id="project-manufacturer-name-input" input-group-size="mb-3" type="text" v-model="project.metadata.manufacturer.name"
+          <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')"/>
           <b-form-group id="manufacturerUrlsTable-Fieldset" :label="this.$t('message.urls')" label-for="manufacturerUrlsTable">
@@ -89,7 +89,7 @@
               id="manufacturerUrlsTable"
               ref="manufacturerUrlsTable"
               :columns="urlsTableColumns"
-              :data="project.metadata.manufacturer.urls"
+              :data="project.manufacturer.urls"
               :options="urlsTableOptions">
             </bootstrap-table>
           </b-form-group>
@@ -98,7 +98,7 @@
               id="manufacturerContactsTable"
               ref="manufacturerContactsTable"
               :columns="contactsTableColumns"
-              :data="project.metadata.manufacturer.contacts"
+              :data="project.manufacturer.contacts"
               :options="contactsTableOptions">
             </bootstrap-table>
           </b-form-group>

From 4425c9d793a920e51317e60019ea22ed9f75c4a4 Mon Sep 17 00:00:00 2001
From: nscuro <nscuro@protonmail.com>
Date: Mon, 27 Nov 2023 22:27:46 +0100
Subject: [PATCH 4/4] Add vertical tabs for BOM metadata

Signed-off-by: nscuro <nscuro@protonmail.com>
---
 src/i18n/locales/en.json                      |  6 ++-
 .../projects/ProjectDetailsModal.vue          | 50 ++++++++++++++++++-
 2 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 8c74c0866..44ef19822 100644
--- 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
index 6c0d92194..0989f6142 100644
--- 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>