From 697d2e90b5ed7a5c7866fcee784d3ff1bd5ecf36 Mon Sep 17 00:00:00 2001
From: Ralf King <rkg@mm-software.com>
Date: Thu, 26 Sep 2024 18:22:12 +0200
Subject: [PATCH] Add UI for isLatest flag

Signed-off-by: Ralf King <rkg@mm-software.com>
---
 src/forms/BInputGroupFormSwitch.vue           | 92 +++++++++++++++++++
 src/i18n/locales/en.json                      |  2 +
 src/views/portfolio/projects/Project.vue      |  3 +
 .../projects/ProjectAddVersionModal.vue       | 35 +++++--
 .../projects/ProjectCreateProjectModal.vue    | 43 +++++----
 .../projects/ProjectDetailsModal.vue          | 67 +++++++-------
 src/views/portfolio/projects/ProjectList.vue  |  9 ++
 7 files changed, 194 insertions(+), 57 deletions(-)
 create mode 100644 src/forms/BInputGroupFormSwitch.vue

diff --git a/src/forms/BInputGroupFormSwitch.vue b/src/forms/BInputGroupFormSwitch.vue
new file mode 100644
index 000000000..440656123
--- /dev/null
+++ b/src/forms/BInputGroupFormSwitch.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <label class="d-block" v-if="showPlaceholderLabel">&nbsp;</label>
+    <b-form-group
+      :id="id"
+      :label="currentLabel"
+      :label-for="`${id}-input`"
+      content-cols="auto"
+    >
+      <b-input-group :class="inputGroupSize">
+        <c-switch
+          :id="`${id}-input`"
+          color="primary"
+          v-model="innerValue"
+          label
+          v-bind="labelIcon"
+          :readonly="readonly"
+          :disabled="disabled"
+          v-b-tooltip.hover
+          :title="tooltip"
+          v-on="inputListeners"
+        />
+      </b-input-group>
+    </b-form-group>
+  </div>
+</template>
+
+<script>
+import common from '../shared/common';
+import {Switch as cSwitch} from "@coreui/vue";
+
+export default {
+  components: {
+    cSwitch,
+  },
+  props: {
+    id: String,
+    label: String, // fallback label if labelOn or labelOff not set
+    labelOn: String, // if set will be used for "on" state
+    labelOff: String, // if set will be used for "off" state
+    value: Boolean,
+    inputGroupSize: String,
+    readonly: Boolean,
+    disabled: Boolean,
+    showPlaceholderLabel: Boolean, // can be used to show an empty label on top, useful to put on same row as other inputs
+    tooltip: String,
+  },
+  data() {
+    return {
+      labelIcon: {
+        dataOn: '\u2713',
+        dataOff: '\u2715',
+      },
+      currentLabel: (this.value ? this.labelOn : this.labelOff) || this.label,
+    };
+  },
+  computed: {
+    innerValue: {
+      get: function () {
+        return common.toBoolean(this.value);
+      },
+      set: function (newValue) {
+        this.currentLabel = (newValue ? this.labelOn : this.labelOff) || this.label;
+        return common.toBoolean(newValue);
+      },
+    },
+    inputListeners: function () {
+      const vm = this;
+      return Object.assign({}, this.$listeners, {
+        change: function (event) {
+          vm.$emit('input', event); // model doesn't update otherwise?
+          vm.$emit('change', event);
+        },
+      });
+    },
+  },
+  methods: {
+  },
+};
+</script>
+<style scoped>
+.switch {
+  margin-right: 0;
+  margin-top: 0.25rem;
+}
+.form-group {
+  flex-direction: row-reverse;
+}
+.form-group >>> label.col-form-label {
+  padding-left: 0 !important;
+}
+</style>
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index e87800cbf..b75158987 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -535,6 +535,7 @@
     "last_bom_import": "Last BOM Import",
     "last_measurement": "Last Measurement",
     "last_seen": "Last Seen At",
+    "latest": "Latest",
     "latest_version": "Latest Version",
     "legal": "Legal",
     "license": "License",
@@ -709,6 +710,7 @@
     "project_delete_title": "Confirm Project Deletion",
     "project_deleted": "Project deleted",
     "project_details": "Project Details",
+    "project_is_latest": "Is latest version",
     "project_metadata_supplier_name_desc": "The organization that supplied the BOM",
     "project_name": "Project Name",
     "project_name_desc": "The name of the project or component as provided by the supplier",
diff --git a/src/views/portfolio/projects/Project.vue b/src/views/portfolio/projects/Project.vue
index cf2ba6a1c..24cbad614 100644
--- a/src/views/portfolio/projects/Project.vue
+++ b/src/views/portfolio/projects/Project.vue
@@ -75,6 +75,9 @@
                 <b-badge v-if="!this.project.active" :variant="'tab-warn'">
                   {{ $t('message.inactive').toUpperCase() }}
                 </b-badge>
+                <b-badge v-if="this.project.isLatest" :variant="'tab-info'">
+                  {{ $t('message.latest_version').toUpperCase() }}
+                </b-badge>
                 <b-col class="d-none d-md-flex">
                   <span
                     class="text-muted font-xs font-italic align-text-top text-truncate"
diff --git a/src/views/portfolio/projects/ProjectAddVersionModal.vue b/src/views/portfolio/projects/ProjectAddVersionModal.vue
index b332e1151..7c6d089c0 100644
--- a/src/views/portfolio/projects/ProjectAddVersionModal.vue
+++ b/src/views/portfolio/projects/ProjectAddVersionModal.vue
@@ -7,15 +7,26 @@
     no-stacking
     :title="$t('message.add_version')"
   >
-    <b-form-group
-      id="fieldset-1"
-      :label="this.$t('message.version')"
-      label-for="input-1"
-      label-class="required"
-    >
-      <b-form-input id="input-1" v-model="version" class="required" trim />
-    </b-form-group>
-
+    <b-row align-v="stretch">
+      <b-col>
+        <b-form-group
+          id="fieldset-1"
+          :label="this.$t('message.version')"
+          label-for="input-1"
+          label-class="required"
+        >
+          <b-form-input id="input-1" v-model="version" class="required" trim />
+        </b-form-group>
+      </b-col>
+      <b-col cols="auto">
+        <b-input-group-form-switch
+          id="project-details-islatest"
+          :label="$t('message.project_is_latest')"
+          v-model="makeCloneLatest"
+          :show-placeholder-label="true"
+        />
+      </b-col>
+    </b-row>
     <b-form-checkbox
       id="checkbox-1"
       v-model="includeTags"
@@ -105,8 +116,11 @@
 </template>
 
 <script>
+import BInputGroupFormSwitch from "@/forms/BInputGroupFormSwitch.vue";
+
 export default {
   name: 'ProjectAddVersionModal',
+  components: {BInputGroupFormSwitch},
   props: {
     uuid: String,
   },
@@ -120,6 +134,7 @@ export default {
       includeAuditHistory: true,
       includeACL: true,
       includePolicyViolations: true,
+      makeCloneLatest: false,
     };
   },
   methods: {
@@ -136,6 +151,7 @@ export default {
           includeAuditHistory: this.includeAuditHistory,
           includeACL: this.includeACL,
           includePolicyViolations: this.includePolicyViolations,
+          makeCloneLatest: this.makeCloneLatest,
         })
         .then((response) => {
           this.$root.$emit('bv::hide::modal', 'projectAddVersionModal');
@@ -154,6 +170,7 @@ export default {
       this.includeAuditHistory = true;
       this.includeACL = true;
       this.includePolicyViolations = true;
+      this.makeCloneLatest = false;
     },
   },
 };
diff --git a/src/views/portfolio/projects/ProjectCreateProjectModal.vue b/src/views/portfolio/projects/ProjectCreateProjectModal.vue
index 23951c4d5..5594a03a6 100644
--- a/src/views/portfolio/projects/ProjectCreateProjectModal.vue
+++ b/src/views/portfolio/projects/ProjectCreateProjectModal.vue
@@ -26,18 +26,30 @@
             :tooltip="this.$t('message.project_name_desc')"
             :feedback-text="$t('message.required_project_name')"
           />
-          <b-input-group-form-input
-            id="project-version-input"
-            input-group-size="mb-3"
-            type="text"
-            v-model="project.version"
-            lazy="true"
-            required="false"
-            feedback="false"
-            autofocus="false"
-            :label="$t('message.version')"
-            :tooltip="this.$t('message.component_version_desc')"
-          />
+          <b-row align-v="stretch">
+            <b-col>
+              <b-input-group-form-input
+                id="project-version-input"
+                input-group-size="mb-3"
+                type="text"
+                v-model="project.version"
+                lazy="true"
+                required="false"
+                feedback="false"
+                autofocus="false"
+                :label="$t('message.version')"
+                :tooltip="this.$t('message.component_version_desc')"
+              />
+            </b-col>
+            <b-col cols="auto">
+              <b-input-group-form-switch
+                id="project-create-islatest"
+                :label="$t('message.project_is_latest')"
+                v-model="project.isLatest"
+                :show-placeholder-label="true"
+              />
+            </b-col>
+          </b-row>
           <b-input-group-form-select
             id="v-classifier-input"
             required="true"
@@ -201,11 +213,13 @@ import VueTagsInput from '@johmun/vue-tags-input';
 import { Switch as cSwitch } from '@coreui/vue';
 import permissionsMixin from '../../../mixins/permissionsMixin';
 import Multiselect from 'vue-multiselect';
+import BInputGroupFormSwitch from "@/forms/BInputGroupFormSwitch.vue";
 
 export default {
   name: 'ProjectCreateProjectModal',
   mixins: [permissionsMixin],
   components: {
+    BInputGroupFormSwitch,
     BInputGroupFormInput,
     BInputGroupFormSelect,
     VueTagsInput,
@@ -248,10 +262,6 @@ export default {
       tagsAutoCompleteItems: [],
       tagsAutoCompleteDebounce: null,
       addOnKeys: [9, 13, 32, ':', ';', ','], // Separators used when typing tags into the vue-tag-input
-      labelIcon: {
-        dataOn: '\u2713',
-        dataOff: '\u2715',
-      },
       isLoading: false,
     };
   },
@@ -310,6 +320,7 @@ export default {
           copyright: this.project.copyright,
           tags: tagsNode,
           active: true,
+          isLatest: this.project.isLatest,
         })
         .then((response) => {
           this.$emit('refreshTable');
diff --git a/src/views/portfolio/projects/ProjectDetailsModal.vue b/src/views/portfolio/projects/ProjectDetailsModal.vue
index 200e80c26..0934d877d 100644
--- a/src/views/portfolio/projects/ProjectDetailsModal.vue
+++ b/src/views/portfolio/projects/ProjectDetailsModal.vue
@@ -29,20 +29,33 @@
             v-on:change="syncReadOnlyNameField"
             :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
           />
-          <b-input-group-form-input
-            id="project-version-input"
-            input-group-size="mb-3"
-            type="text"
-            v-model="project.version"
-            lazy="true"
-            required="false"
-            feedback="false"
-            autofocus="false"
-            v-on:change="syncReadOnlyVersionField"
-            :label="$t('message.version')"
-            :tooltip="this.$t('message.component_version_desc')"
-            :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
-          />
+          <b-row align-v="stretch">
+            <b-col>
+              <b-input-group-form-input
+                id="project-version-input"
+                input-group-size="mb-3"
+                type="text"
+                v-model="project.version"
+                lazy="true"
+                required="false"
+                feedback="false"
+                autofocus="false"
+                v-on:change="syncReadOnlyVersionField"
+                :label="$t('message.version')"
+                :tooltip="this.$t('message.component_version_desc')"
+                :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+              />
+            </b-col>
+            <b-col cols="auto">
+              <b-input-group-form-switch
+                id="project-details-islatest"
+                :label="$t('message.project_is_latest')"
+                v-model="project.isLatest"
+                :show-placeholder-label="true"
+                :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+              />
+            </b-col>
+          </b-row>
           <b-input-group-form-select
             id="v-classifier-input"
             required="true"
@@ -101,22 +114,17 @@
               :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
             />
           </b-form-group>
-          <c-switch
-            id="input-5"
-            class="mx-1"
-            color="primary"
+          <b-input-group-form-switch
+            id="project-details-active"
+            :label-on="$t('message.active')"
+            :label-off="$t('message.inactive')"
             v-model="project.active"
-            label
+            :tooltip="$t('message.inactive_active_children')"
             :disabled="
               this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT) ||
               (project.active && this.hasActiveChild(project))
             "
-            v-bind="labelIcon"
-            v-b-tooltip.hover
-            :title="$t('message.inactive_active_children')"
-            @change="syncActiveLabel"
           />
-          {{ projectActiveLabel }}
           <p></p>
           <b-input-group-form-input
             id="project-uuid"
@@ -452,11 +460,13 @@ import permissionsMixin from '../../../mixins/permissionsMixin';
 import common from '../../../shared/common';
 import Multiselect from 'vue-multiselect';
 import xssFilters from 'xss-filters';
+import BInputGroupFormSwitch from "@/forms/BInputGroupFormSwitch.vue";
 
 export default {
   name: 'ProjectDetailsModal',
   mixins: [permissionsMixin],
   components: {
+    BInputGroupFormSwitch,
     BInputGroupFormInput,
     BInputGroupFormSelect,
     VueTagsInput,
@@ -471,9 +481,6 @@ export default {
     return {
       readOnlyProjectName: '',
       readOnlyProjectVersion: '',
-      projectActiveLabel: this.project.active
-        ? this.$i18n.t('message.active')
-        : this.$i18n.t('message.inactive'),
       availableClassifiers: [
         {
           value: 'APPLICATION',
@@ -664,11 +671,6 @@ export default {
     syncReadOnlyVersionField: function (value) {
       this.readOnlyProjectVersion = value;
     },
-    syncActiveLabel: function (value) {
-      this.projectActiveLabel = value
-        ? this.$t('message.active')
-        : this.$t('message.inactive');
-    },
     updateProject: function () {
       let url = `${this.$api.BASE_URL}/${this.$api.URL_PROJECT}`;
       let tagsNode = [];
@@ -694,6 +696,7 @@ export default {
           swidTagId: this.project.swidTagId,
           tags: tagsNode,
           active: this.project.active,
+          isLatest: this.project.isLatest,
           externalReferences: this.project.externalReferences,
         })
         .then((response) => {
diff --git a/src/views/portfolio/projects/ProjectList.vue b/src/views/portfolio/projects/ProjectList.vue
index 51a0d0428..60fa04135 100644
--- a/src/views/portfolio/projects/ProjectList.vue
+++ b/src/views/portfolio/projects/ProjectList.vue
@@ -282,6 +282,15 @@ export default {
             return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
           },
         },
+        {
+          title: this.$t('message.latest'),
+          field: 'isLatest',
+          formatter(value, row, index) {
+            return value === true ? '<i class="fa fa-check-square-o" />' : '';
+          },
+          align: 'center',
+          sortable: true,
+        },
         {
           title: this.$t('message.classifier'),
           field: 'classifier',