Add item field to form builder [SCI-11685]

app/controllers/repositories_controller.rb

@@ -65,6 +65,8 @@ class RepositoriesController < ApplicationController
 
     results = results.order('LOWER(repository_rows.name) asc').page(params[:page])
 
+    results = results.where.not(id: params[:excluded_ids]) if params[:excluded_ids].present?
+
     render json: {
       paginated: true,
       next_page: results.next_page,

app/javascript/vue/forms/edit_field.vue

@@ -86,6 +86,7 @@ import SingleChoiceField from './edit_fields/single_choice.vue';
 import TextField from './edit_fields/text.vue';
 import MultipleChoiceField from './edit_fields/multiple_choice.vue';
 import ActionField from './edit_fields/action.vue';
+import RepositoryRowsField from './edit_fields/repository_rows.vue';
 
 export default {
   name: 'EditField',
@@ -100,7 +101,8 @@ export default {
     SingleChoiceField,
     TextField,
     MultipleChoiceField,
-    ActionField
+    ActionField,
+    RepositoryRowsField
   },
   data() {
     return {

app/javascript/vue/forms/edit_fields/repository_rows.vue

@@ -0,0 +1,9 @@
+<template>
+  <hr class="my-4 w-full">
+</template>
+
+<script>
+export default {
+  name: 'RepositoryRowsField'
+};
+</script>

app/javascript/vue/forms/field.vue

@@ -47,6 +47,7 @@ import SingleChoiceField from './fields/single_choice.vue';
 import TextField from './fields/text.vue';
 import MultipleChoiceField from './fields/multiple_choice.vue';
 import ActionField from './fields/action.vue';
+import RepositoryRowsField from './fields/repository_rows.vue';
 
 export default {
   name: 'ViewField',
@@ -64,7 +65,8 @@ export default {
     SingleChoiceField,
     TextField,
     MultipleChoiceField,
-    ActionField
+    ActionField,
+    RepositoryRowsField
   },
   data() {
     return {

app/javascript/vue/forms/fields/modals/row_selector.vue

@@ -0,0 +1,65 @@
+<template>
+  <div ref="modal" class="modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <form @submit.prevent="submit">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <i class="sn-icon sn-icon-close"></i>
+            </button>
+            <h4 class="modal-title truncate !block" >
+              {{  i18n.t('forms.show.select_items') }}
+            </h4>
+          </div>
+          <div class="modal-body">
+            <RepositoryRowSelector
+              :multiple="true"
+              @change="selectedRows = $event"
+              @repositoryChange="changeSelectedInventory"
+              :excludeRows="excludeRows"
+            />
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
+            <button type="button" class="btn btn-primary" @click="save"> {{  i18n.t('forms.show.add') }}</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import modalMixin from '../../../shared/modal_mixin.js';
+import RepositoryRowSelector from '../../../shared/repository_row_selector.vue';
+
+export default {
+  name: 'RowSelectorModal',
+  props: {
+    excludeRows: {
+      type: Array,
+      default: () => []
+    }
+  },
+  mixins: [modalMixin],
+  components: {
+    RepositoryRowSelector
+  },
+  data() {
+    return {
+      selectedRepository: null,
+      selectedRows: []
+    };
+  },
+  methods: {
+    changeSelectedInventory(repository) {
+      this.selectedRepository = repository;
+      this.selectedRows = [];
+    },
+    save() {
+      this.$emit('save', this.selectedRows);
+    }
+  }
+};
+</script>

app/javascript/vue/forms/fields/repository_rows.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <button v-if="!disabled" class="btn btn-secondary" @click="rowSelectorOpened = true">
+      {{  i18n.t('forms.show.add_items') }}
+      <i class="sn-icon sn-icon-right"></i>
+    </button>
+    <RowSelectorModal v-if="rowSelectorOpened"
+                      :excludeRows="assignedIds"
+                      @close="rowSelectorOpened = false"
+                      @save="addValue" />
+    <div class="flex items-center gap-2 mt-4 flex-wrap">
+      <template v-for="(row, index) in field.field_value.value" :key="row.id">
+        <div class="flex items-center gap-2">
+          <span v-if="index > 0">|</span>
+          <a
+            class="cursor-pointer text-sn-blue record-info-link"
+            :href="itemCardUrl(row)"
+          >{{ row.name }} (ID{{ row.id }})</a>
+          <i  v-if="!disabled" @click="removeValue(row.id)" class="sn-icon sn-icon-unlink cursor-pointer"></i>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+/* global  */
+
+import fieldMixin from './field_mixin';
+import RowSelectorModal from './modals/row_selector.vue';
+import {
+  repository_repository_row_path,
+
+} from '../../../routes.js';
+
+export default {
+  name: 'RepositoryRowsField',
+  mixins: [fieldMixin],
+  components: {
+    RowSelectorModal
+  },
+  data() {
+    return {
+      rowSelectorOpened: false
+    };
+  },
+  watch: {
+    marked_as_na() {
+      if (this.marked_as_na) {
+        this.value = null;
+      }
+    }
+  },
+  mounted() {
+  },
+  computed: {
+    assignedIds() {
+      return this.field.field_value?.value?.map((row) => row.id) || [];
+    },
+    validValue() {
+      return true;
+    }
+  },
+  methods: {
+    itemCardUrl(row) {
+      return repository_repository_row_path(row.repository_id, row.id);
+    },
+    addValue(rows) {
+      const rowIds = this.assignedIds;
+      rows.forEach((row) => {
+        if (!rowIds.includes(row)) {
+          rowIds.push(row);
+        }
+      });
+      this.rowSelectorOpened = false;
+      this.$emit('save', rowIds.length > 0 ? rowIds : null);
+    },
+    removeValue(id) {
+      const rowIds = this.assignedIds;
+      rowIds.splice(rowIds.indexOf(id), 1);
+      this.$emit('save', rowIds.length > 0 ? rowIds : null);
+    }
+  }
+};
+</script>

app/javascript/vue/forms/show.vue

@@ -158,7 +158,8 @@ export default {
         { name: this.i18n.t('forms.show.blocks.SingleChoiceField'), type: 'SingleChoiceField' },
         { name: this.i18n.t('forms.show.blocks.MultipleChoiceField'), type: 'MultipleChoiceField' },
         { name: this.i18n.t('forms.show.blocks.DatetimeField'), type: 'DatetimeField' },
-        { name: this.i18n.t('forms.show.blocks.ActionField'), type: 'ActionField' }
+        { name: this.i18n.t('forms.show.blocks.ActionField'), type: 'ActionField' },
+        { name: this.i18n.t('forms.show.blocks.RepositoryRowsField'), type: 'RepositoryRowsField' }
       ];
     },
     fieldIcon() {
@@ -168,7 +169,8 @@ export default {
         SingleChoiceField: 'sn-icon-choice-single',
         MultipleChoiceField: 'sn-icon-choice-multiple',
         DatetimeField: 'sn-icon-created',
-        ActionField: 'sn-icon-check'
+        ActionField: 'sn-icon-check',
+        RepositoryRowsField: 'sn-icon-inventory'
       };
     }
   },

app/javascript/vue/shared/repository_row_selector.vue

@@ -6,6 +6,7 @@
         :optionsUrl="repositoriesUrl"
         placeholder="Select inventory"
         :searchable="true"
+        :value="selectedRepository"
         @change="selectedRepository = $event"
       ></SelectDropdown>
     </div>
@@ -15,12 +16,14 @@
         :key="selectedRepository"
         :disabled="!selectedRepository"
         :optionsUrl="rowsUrl"
-        :urlParams="{ repository_id: selectedRepository }"
+        :urlParams="{ repository_id: selectedRepository, excluded_ids: excludeRows }"
+        ajaxMethod="post"
         placeholder="Select item"
         :multiple="multiple"
         :withCheckboxes="multiple"
         :searchable="true"
         :optionRenderer="itemRowOptionRenderer"
+        :value="selectedRow"
         @close="showItemInfo = false"
         @change="selectedRow= $event"
       ></SelectDropdown>
@@ -63,10 +66,32 @@ export default {
     multiple: {
       type: Boolean,
       default: false
+    },
+    preSelectedRepository: {
+      type: Number,
+      default: null
+    },
+    preSelectedRows: {
+      type: [Array],
+      default: null
+    },
+    excludeRows: {
+      type: Array,
+      default: () => []
     }
   },
   created() {
     this.teamId = document.body.dataset.currentTeamId;
+    if (this.preSelectedRepository) {
+      this.selectedRepository = this.preSelectedRepository;
+    }
+    if (this.preSelectedRows) {
+      this.selectedRow = this.preSelectedRows;
+    }
+
+    this.$nextTick(() => {
+      this.loading = false;
+    });
   },
   mounted() {
     document.addEventListener('mouseover', this.loadColumnsInfo);
@@ -76,11 +101,15 @@ export default {
   },
   watch: {
     selectedRepository() {
+      if (this.loading) return;
+
       this.selectedRow = null;
       this.$emit('repositoryChange', this.selectedRepository);
       this.$emit('change', this.selectedRow);
     },
     selectedRow() {
+      if (this.loading) return;
+
       this.$emit('change', this.selectedRow);
     }
   },
@@ -103,7 +132,8 @@ export default {
       teamId: null,
       showItemInfo: false,
       hoveredRow: {},
-      loadingHoveredRow: false
+      loadingHoveredRow: false,
+      loading: true
     };
   },
   methods: {

app/javascript/vue/shared/select_dropdown.vue

@@ -129,7 +129,8 @@ export default {
     clearable: { type: Boolean, default: false },
     tagsView: { type: Boolean, default: false },
     urlParams: { type: Object, default: () => ({}) },
-    e2eValue: { type: String, default: '' }
+    e2eValue: { type: String, default: '' },
+    ajaxMethod: { type: String, default: 'get' }
   },
   directives: {
     'click-outside': vOnClickOutside
@@ -369,7 +370,7 @@ export default {
     fetchOptions() {
       if (this.optionsUrl) {
         const params = { query: this.query, page: this.nextPage, ...this.urlParams };
-        axios.get(this.optionsUrl, { params })
+        axios({ method: this.ajaxMethod, url: this.optionsUrl, data: params })
           .then((response) => {
             if (response.data.paginated) {
               this.fetchedOptions = [...this.fetchedOptions, ...response.data.data];

app/models/form_repository_rows_field_value.rb

@@ -7,6 +7,12 @@ class FormRepositoryRowsFieldValue < FormFieldValue
     # adds new snapshots if not yet present
     self.data ||= []
 
+    # If income data is empty, we need nulify data
+    if repository_row_ids.blank?
+      self.data = nil
+      return
+    end
+
     removed_repository_row_ids = data.pluck('id') - repository_row_ids
     existing_repository_row_ids = data.pluck('id') & repository_row_ids
 

config/locales/en.yml

@@ -1156,6 +1156,9 @@ en:
       no_block: 'Add your first form block'
       field_too_long_error: 'Field is too long (maximum number is %{limit} characters)'
       options_too_many_error: 'Too many options (maximum number is %{limit} options)'
+      add_items: 'Add items'
+      add: 'Add'
+      select_items: 'Select items'
       validations:
         response_validation:
           title: 'Response validation'
@@ -1169,6 +1172,7 @@ en:
         MultipleChoiceField: 'Multiple choice'
         DatetimeField: 'Date & Time'
         ActionField: 'Action'
+        RepositoryRowsField: 'Item'
     response:
       submit: 'Submit form'
       submitted_on: 'Submitted on'
@@ -3587,7 +3591,7 @@ en:
       header:
         printed_from: "Printed from"
         print_info: "on %{datetime} by %{full_name}"
-      forms: 
+      forms:
         single_choice_html: "<em>(Select one)</em>"
         multiple_choice_html: "<em>(Select multiple)</em>"
     protocols_io_import:

config/routes.rb

@@ -209,7 +209,7 @@ Rails.application.routes.draw do
               defaults: { format: 'json' }
           post 'actions_toolbar'
           get :list
-          get :rows_list
+          post :rows_list
         end
         member do
           get :export_empty_repository