Adjust bulk record edit style and behaviour

client/web/compose/src/components/PageBlocks/RecordListBase.vue

@@ -112,8 +112,8 @@
         </div>
 
         <div
-          v-if="options.selectable && selected.length"
-          class="d-flex align-items-center mt-1"
+          class="d-none flex-wrap align-items-center mt-1"
+          :class="{ 'd-flex': options.selectable && selected.length }"
         >
           <div
             class="d-flex align-items-baseline my-auto pt-1 text-nowrap h-100"
@@ -128,9 +128,9 @@
             </b-button>
           </div>
 
-          <div class="d-flex align-items-center ml-auto mr-2">
+          <div class="d-flex align-items-center ml-auto">
             <automation-buttons
-              class="d-inline m-0"
+              class="d-inline m-0 mr-2"
               :buttons="options.selectionButtons"
               :module="recordListModule"
               :extra-event-args="{ selected, filter }"
@@ -139,18 +139,17 @@
             />
 
             <bulk-edit-modal
-              v-if="options.bulkRecordEditEnabled && canUpdateSelectedRecords"
+              v-show="options.bulkRecordEditEnabled && canUpdateSelectedRecords"
               :module="recordListModule"
               :namespace="namespace"
               :selected-records="selected"
-              class="ml-1"
+              @save="onBulkUpdate()"
             />
 
             <template v-if="canDeleteSelectedRecords && !areAllRowsDeleted">
               <c-input-confirm
                 v-if="!inlineEditing"
                 :tooltip="$t('recordList.tooltip.deleteSelected')"
-                class="mr-1"
                 @confirmed="handleDeleteSelectedRecords()"
               />
               <b-button
@@ -172,7 +171,6 @@
               <c-input-confirm
                 v-if="!inlineEditing"
                 :tooltip="$t('recordList.tooltip.undeleteSelected')"
-                class="ml-2"
                 @confirmed="handleRestoreSelectedRecords()"
               >
                 <font-awesome-icon
@@ -1596,7 +1594,7 @@ export default {
       ].some(v => v)
     },
 
-    onBulkUpdateSuccessful () {
+    onBulkUpdate () {
       this.refresh(true)
     },
   },

client/web/compose/src/components/Public/Record/BulkEdit/index.vue

@@ -14,36 +14,30 @@
 
     <b-modal
       :visible="showModal"
-      size="md"
       :title="$t('recordList.bulkRecord.title')"
       body-class="p-0"
-      centered
-      scrollable
       footer-class="d-flex justify-content-between align-items-center"
+      centered
       @hide="onModalHide"
     >
       <b-card class="pt-0">
-        <div
+        <field-editor
           v-for="(field, index) in fields"
           :key="index"
-          class="mb-4"
-        >
-          <field-editor
-            :namespace="namespace"
-            :module="module"
-            :field="field"
-            :errors="fieldErrors(field.name)"
-            :record="record"
-            class="field-editor mb-0"
-          />
-        </div>
+          :namespace="namespace"
+          :module="module"
+          :field="field"
+          :errors="fieldErrors(field.name)"
+          :record="record"
+        />
 
         <hr
           v-if="fields.length"
-          class="mb-4"
+          class="my-4"
         >
 
         <vue-select
+          v-model="selectedField"
           :placeholder="$t('recordList.bulkRecord.searchFields')"
           :get-option-label="getFieldLabel"
           :options="moduleFields"
@@ -76,7 +70,7 @@
           <b-button
             variant="primary"
             :disabled="!fields.length || processing"
-            @click="handleBulkUpdateSelectedRecords()"
+            @click="handleBulkUpdateSelectedRecords(selectedRecords)"
           >
             {{ $t('general.label.save') }}
           </b-button>
@@ -129,6 +123,7 @@ export default {
   data () {
     return {
       showModal: false,
+      selectedField: undefined,
       fields: [],
     }
   },
@@ -143,7 +138,7 @@ export default {
         ...[...this.module.fields].sort((a, b) =>
           (a.label || a.name).localeCompare(b.label || b.name),
         ),
-        ...this.module.systemFields().filter(sf => sf.name === 'ownedBy'),
+        ...this.module.systemFields().filter(({ name }) => name === 'ownedBy'),
       ].filter((field) => this.isFieldEditable(field))
     },
   },
@@ -157,10 +152,6 @@ export default {
       this.showModal = false
     },
 
-    onClose () {
-      this.showModal = false
-    },
-
     getFieldLabel ({ kind, label, name }) {
       return label || name || kind
     },
@@ -169,6 +160,7 @@ export default {
       if (!field) return
 
       this.fields.push(field)
+      this.selectedField = null
     },
 
     onReset () {
@@ -200,3 +192,9 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.position-initial {
+  position: initial;
+}
+</style>

client/web/compose/src/mixins/record.js

@@ -262,15 +262,26 @@ export default {
         })
     }, 500),
 
-    handleBulkUpdateSelectedRecords: throttle(function () {
-      const { moduleID, namespaceID } = this.module
-      const values = this.record.values.toJSON()
-      const records = this.selectedRecords
+    handleBulkUpdateSelectedRecords: throttle(function (records) {
       this.processing = true
 
+      const { moduleID, namespaceID } = this.module
+
+      const values = []
+      this.fields.forEach(({ name, isMulti }) => {
+        const value = this.record.values[name] || this.record[name]
+
+        if (!isMulti) {
+          values.push({ name, value: value ? value.toString() : value })
+        } else {
+          value.forEach(v => {
+            values.push({ name, value: v ? v.toString() : v })
+          })
+        }
+      })
+
       return this
-        .dispatchUiEvent('beforeFormSubmit')
-        .then(() => this.$ComposeAPI.recordPatch({ moduleID, namespaceID, records, values }))
+        .$ComposeAPI.recordPatch({ moduleID, namespaceID, records, values })
         .catch(err => {
           const { details = undefined } = err
           if (!!details && Array.isArray(details) && details.length > 0) {
@@ -294,8 +305,8 @@ export default {
             this.toastWarning(this.$t('notification:record.validationWarnings'))
           } else {
             this.toastSuccess(this.$t('notification:record.bulkRecordUpdateSuccess'))
-            this.onReset()
             this.onModalHide()
+            this.$emit('save')
           }
         })
         .catch(this.toastErrorHandler(this.$t('notification:record.deleteBulkRecordUpdateFailed')))