Add item field to form builder [SCI-11685]

This commit is contained in:
Anton 2025-03-26 14:07:44 +01:00
parent da942edb75
commit 2afd249e8c
12 changed files with 218 additions and 10 deletions

View file

@ -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,

View file

@ -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 {

View file

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

View file

@ -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 {

View file

@ -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>

View file

@ -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>

View file

@ -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'
};
}
},

View file

@ -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: {

View file

@ -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];

View file

@ -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

View file

@ -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:

View file

@ -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