Resolve "Allow selecting multiple rows via the row select modal"

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"
+}

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;

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"

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,

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>

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 }

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