diff --git a/changelog/entries/unreleased/feature/2267_select_multiple_relationships_row_select_modal_link_row.json b/changelog/entries/unreleased/feature/2267_select_multiple_relationships_row_select_modal_link_row.json
new file mode 100644
index 000000000..4b2131ae6
--- /dev/null
+++ b/changelog/entries/unreleased/feature/2267_select_multiple_relationships_row_select_modal_link_row.json
@@ -0,0 +1,7 @@
+{
+ "type": "feature",
+ "message": "Allow selecting multiple relationships in the row select modal of the link row field.",
+ "issue_number": 2267,
+ "bullet_points": [],
+ "created_at": "2024-07-17"
+}
diff --git a/web-frontend/modules/core/assets/scss/components/views/grid/simple_grid.scss b/web-frontend/modules/core/assets/scss/components/views/grid/simple_grid.scss
index ee8b67e6f..d8b036138 100644
--- a/web-frontend/modules/core/assets/scss/components/views/grid/simple_grid.scss
+++ b/web-frontend/modules/core/assets/scss/components/views/grid/simple_grid.scss
@@ -72,6 +72,20 @@
&.simple-grid__cell--single {
width: 100%;
}
+
+ &.simple-grid__cell--with-checkbox {
+ width: 64px;
+ padding-right: 22px;
+ }
+}
+
+.simple-grid__cell-checkbox {
+ @include absolute(0, 0, 0, 0);
+
+ display: flex;
+ vertical-align: center;
+ justify-content: center;
+ background-color: inherit;
}
.simple-grid__row--hover {
@@ -83,7 +97,7 @@
}
}
-.simple-grid__row--selected {
+.simple-grid__row--disabled {
cursor: initial;
.simple-grid__cell,
@@ -92,6 +106,13 @@
}
}
+.simple-grid__row--checked {
+ .simple-grid__cell,
+ .grid-view__cell {
+ background-color: $color-primary-100;
+ }
+}
+
.simple-grid__add-row {
display: block;
line-height: 33px;
diff --git a/web-frontend/modules/database/components/row/RowEditFieldLinkRow.vue b/web-frontend/modules/database/components/row/RowEditFieldLinkRow.vue
index 1e52fcc98..aeab61ae3 100644
--- a/web-frontend/modules/database/components/row/RowEditFieldLinkRow.vue
+++ b/web-frontend/modules/database/components/row/RowEditFieldLinkRow.vue
@@ -39,7 +39,9 @@
:table-id="field.link_row_table_id"
:view-id="field.link_row_limit_selection_view_id"
:value="value"
+ :multiple="true"
@selected="addValue(value, $event)"
+ @unselected="removeValue({}, value, $event.row.id)"
></SelectRowModal>
<ForeignRowEditModal
v-if="!readOnly || isInForeignRowEditModal"
diff --git a/web-frontend/modules/database/components/row/SelectRowContent.vue b/web-frontend/modules/database/components/row/SelectRowContent.vue
index 21ee9000c..2ce33cfad 100644
--- a/web-frontend/modules/database/components/row/SelectRowContent.vue
+++ b/web-frontend/modules/database/components/row/SelectRowContent.vue
@@ -28,6 +28,7 @@
:with-footer="true"
:show-hovered-row="true"
:selected-rows="selectedRows"
+ :multiple="multiple"
:show-row-id="true"
@add-row="$refs.rowCreateModal.show()"
@row-click="select($event)"
@@ -99,6 +100,11 @@ export default {
required: false,
default: '',
},
+ multiple: {
+ type: Boolean,
+ required: false,
+ default: false,
+ },
},
data() {
return {
@@ -296,11 +302,14 @@ export default {
* Called when the user selects a row.
*/
select(row) {
- if (this.selectedRows.includes(row.id)) {
+ const exists = this.selectedRows.includes(row.id)
+
+ // In multiple mode it's also possible to unselect.
+ if (!this.multiple && exists) {
return
}
- this.$emit('selected', {
+ this.$emit(exists ? 'unselected' : 'selected', {
row,
primary: this.primary,
fields: this.fields,
diff --git a/web-frontend/modules/database/components/row/SelectRowModal.vue b/web-frontend/modules/database/components/row/SelectRowModal.vue
index fa8e48a50..5633331c4 100644
--- a/web-frontend/modules/database/components/row/SelectRowModal.vue
+++ b/web-frontend/modules/database/components/row/SelectRowModal.vue
@@ -10,7 +10,9 @@
:table-id="tableId"
:view-id="viewId"
:value="value"
+ :multiple="multiple"
@selected="selected"
+ @unselected="unselected"
@hide="hide"
></SelectRowContent>
</Modal>
@@ -40,15 +42,26 @@ export default {
required: false,
default: () => [],
},
+ multiple: {
+ type: Boolean,
+ required: false,
+ default: false,
+ },
},
methods: {
/**
* Hide the modal when a row has been selected.
*/
selected(...args) {
- this.hide()
+ if (!this.multiple) {
+ this.hide()
+ }
this.$emit('selected', ...args)
},
+ unselected(...args) {
+ console.log('unselected')
+ this.$emit('unselected', ...args)
+ },
},
}
</script>
diff --git a/web-frontend/modules/database/components/view/grid/SimpleGrid.vue b/web-frontend/modules/database/components/view/grid/SimpleGrid.vue
index 9bebe80b3..7ae0d4279 100644
--- a/web-frontend/modules/database/components/view/grid/SimpleGrid.vue
+++ b/web-frontend/modules/database/components/view/grid/SimpleGrid.vue
@@ -38,7 +38,10 @@
:class="{
'simple-grid__row--hover':
showHoveredRow && currentHoveredRow === row.id,
- 'simple-grid__row--selected': selectedRows.includes(row.id),
+ 'simple-grid__row--disabled':
+ !multiple && selectedRows.includes(row.id),
+ 'simple-grid__row--checked':
+ multiple && selectedRows.includes(row.id),
}"
@click="$emit('row-click', row)"
@mouseover="currentHoveredRow = row.id"
@@ -49,6 +52,15 @@
class="simple-grid__cell simple-grid__cell--first"
>
{{ row.id }}
+ <div
+ v-if="multiple"
+ v-show="
+ currentHoveredRow === row.id || selectedRows.includes(row.id)
+ "
+ class="simple-grid__cell-checkbox"
+ >
+ <Checkbox :checked="selectedRows.includes(row.id)"></Checkbox>
+ </div>
</div>
<div
v-for="field in fixedFields"
@@ -61,7 +73,9 @@
<div
v-if="canAddRow"
class="simple-grid__row"
- :class="{ 'simple-grid__row--hover': showHoveredRow && addRowHover }"
+ :class="{
+ 'simple-grid__row--hover': showHoveredRow && addRowHover,
+ }"
@mouseover="addRowHover = true"
@mouseleave="addRowHover = false"
@click="$emit('add-row')"
@@ -106,7 +120,10 @@
:class="{
'simple-grid__row--hover':
showHoveredRow && currentHoveredRow === row.id,
- 'simple-grid__row--selected': selectedRows.includes(row.id),
+ 'simple-grid__row--disabled':
+ !multiple && selectedRows.includes(row.id),
+ 'simple-grid__row--checked':
+ multiple && selectedRows.includes(row.id),
}"
@click="$emit('row-click', row)"
@mouseover="currentHoveredRow = row.id"
@@ -195,6 +212,11 @@ export default {
required: false,
default: false,
},
+ multiple: {
+ type: Boolean,
+ required: false,
+ default: false,
+ },
},
data() {
return { addRowHover: false, currentHoveredRow: null }
diff --git a/web-frontend/modules/database/components/view/grid/fields/GridViewFieldLinkRow.vue b/web-frontend/modules/database/components/view/grid/fields/GridViewFieldLinkRow.vue
index 5e7a4a6d6..ed53cfcdb 100644
--- a/web-frontend/modules/database/components/view/grid/fields/GridViewFieldLinkRow.vue
+++ b/web-frontend/modules/database/components/view/grid/fields/GridViewFieldLinkRow.vue
@@ -46,7 +46,9 @@
:table-id="field.link_row_table_id"
:view-id="field.link_row_limit_selection_view_id"
:value="value"
+ :multiple="true"
@selected="addValue(value, $event)"
+ @unselected="removeValue({}, value, $event.row.id)"
@hidden="hideModal"
></SelectRowModal>
<ForeignRowEditModal