Resolve "Ordering fields per grid view"

web-frontend/modules/database/components/view/grid/GridViewSection.vue

@@ -9,6 +9,10 @@
         :include-row-details="includeRowDetails"
         :include-add-field="includeAddField"
         @refresh="$emit('refresh', $event)"
+        @dragging="
+          canOrderFields &&
+            $refs.fieldDragging.start($event.field, $event.event)
+        "
       ></GridViewHead>
       <div ref="body" class="grid-view__body">
         <div class="grid-view__body-inner">
@@ -34,6 +38,13 @@
         <slot name="foot"></slot>
       </div>
     </div>
+    <GridViewFieldDragging
+      ref="fieldDragging"
+      :view="view"
+      :fields="visibleFields"
+      :container-width="width"
+      @scroll="$emit('scroll', $event)"
+    ></GridViewFieldDragging>
   </div>
 </template>
 
@@ -42,7 +53,9 @@ import GridViewHead from '@baserow/modules/database/components/view/grid/GridVie
 import GridViewPlaceholder from '@baserow/modules/database/components/view/grid/GridViewPlaceholder'
 import GridViewRows from '@baserow/modules/database/components/view/grid/GridViewRows'
 import GridViewRowAdd from '@baserow/modules/database/components/view/grid/GridViewRowAdd'
+import GridViewFieldDragging from '@baserow/modules/database/components/view/grid/GridViewFieldDragging'
 import gridViewHelpers from '@baserow/modules/database/mixins/gridViewHelpers'
+import { GridViewType } from '@baserow/modules/database/viewTypes'
 
 export default {
   name: 'GridViewSection',
@@ -51,6 +64,7 @@ export default {
     GridViewPlaceholder,
     GridViewRows,
     GridViewRowAdd,
+    GridViewFieldDragging,
   },
   mixins: [gridViewHelpers],
   props: {
@@ -81,16 +95,49 @@ export default {
       required: false,
       default: () => false,
     },
+    canOrderFields: {
+      type: Boolean,
+      required: false,
+      default: () => false,
+    },
   },
   computed: {
+    /**
+     * Returns only the visible fields in the correct order.
+     */
     visibleFields() {
-      return this.fields.filter((field) => {
-        const exists = Object.prototype.hasOwnProperty.call(
-          this.fieldOptions,
-          field.id
-        )
-        return !exists || (exists && !this.fieldOptions[field.id].hidden)
-      })
+      return this.fields
+        .filter((field) => {
+          const exists = Object.prototype.hasOwnProperty.call(
+            this.fieldOptions,
+            field.id
+          )
+          return !exists || (exists && !this.fieldOptions[field.id].hidden)
+        })
+        .sort((a, b) => {
+          const orderA = this.fieldOptions[a.id]
+            ? this.fieldOptions[a.id].order
+            : GridViewType.getMaxPossibleOrderValue()
+          const orderB = this.fieldOptions[b.id]
+            ? this.fieldOptions[b.id].order
+            : GridViewType.getMaxPossibleOrderValue()
+
+          // First by order.
+          if (orderA > orderB) {
+            return 1
+          } else if (orderA < orderB) {
+            return -1
+          }
+
+          // Then by id.
+          if (a.id < b.id) {
+            return -1
+          } else if (a.id > b.id) {
+            return 1
+          } else {
+            return 0
+          }
+        })
     },
     /**
      * Calculates the total width of the whole section based on the fields and the