[3.x] Store and render using position on multi selects fields (#2204)

* #2167: Keep in mind order of multiselect.

* cleanup.

* Remove node-forge and update dependencies

* Update default compiled assets

---------

Co-authored-by: Quentin Renard <[email protected]>

frontend/js/components/VSelect.vue

@@ -167,7 +167,16 @@
             if (this.taggable) {
               this.value = value
             } else {
-              this.value = this.options.filter(o => value.includes(o.value))
+              this.value = []
+              for (const v in value) {
+                const matches = this.options.filter(o => {
+                  return o.value === value[v]
+                })
+
+                if (matches[0]) {
+                  this.value.push(matches[0])
+                }
+              }
             }
           } else {
             this.value = this.options.find(o => {

package.json

@@ -14,23 +14,23 @@
     "docs": "rm -rf docs/_build/* && ./vendor/bin/testbench twill:staticdocs:serve"
   },
   "dependencies": {
-    "@alpinejs/mask": "^3.13.3",
-    "@tiptap/extension-hard-break": "^2.1.16",
-    "@tiptap/extension-horizontal-rule": "^2.1.16",
-    "@tiptap/extension-link": "^2.1.16",
-    "@tiptap/extension-placeholder": "^2.1.16",
-    "@tiptap/extension-table": "^2.1.16",
-    "@tiptap/extension-table-cell": "^2.1.16",
-    "@tiptap/extension-table-header": "^2.1.16",
-    "@tiptap/extension-table-row": "^2.1.16",
-    "@tiptap/extension-text-align": "^2.1.16",
-    "@tiptap/extension-underline": "^2.1.16",
-    "@tiptap/pm": "^2.1.16",
-    "@tiptap/starter-kit": "^2.1.16",
-    "@tiptap/vue-2": "^2.1.16",
-    "alpinejs": "^3.13.3",
+    "@alpinejs/mask": "^3.13.5",
+    "@tiptap/extension-hard-break": "^2.2.1",
+    "@tiptap/extension-horizontal-rule": "^2.2.1",
+    "@tiptap/extension-link": "^2.2.1",
+    "@tiptap/extension-placeholder": "^2.2.1",
+    "@tiptap/extension-table": "^2.2.1",
+    "@tiptap/extension-table-cell": "^2.2.1",
+    "@tiptap/extension-table-header": "^2.2.1",
+    "@tiptap/extension-table-row": "^2.2.1",
+    "@tiptap/extension-text-align": "^2.2.1",
+    "@tiptap/extension-underline": "^2.2.1",
+    "@tiptap/pm": "^2.2.1",
+    "@tiptap/starter-kit": "^2.2.1",
+    "@tiptap/vue-2": "^2.2.1",
+    "alpinejs": "^3.13.5",
     "axios": "^0.27.2",
-    "core-js": "^3.35.0",
+    "core-js": "^3.35.1",
     "cropperjs": "^1.6.1",
     "date-fns": "1.30.1",
     "fine-uploader": "^5.16.2",
@@ -41,16 +41,16 @@
     "smartcrop": "^2.0.5",
     "tinycolor2": "1.6.0",
     "truncate-utf8-bytes": "1.0.2",
-    "vue": "^2.7.14",
+    "vue": "^2.7.16",
     "vue-select": "^3.20.2",
     "vue-timeago": "^5.1.3",
     "vuedraggable": "2.24.3",
     "vuetrend": "^0.3.4",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@area17/a17-tailwind-plugins": "^3.10.0",
-    "@babel/eslint-parser": "^7.23.3",
+    "@area17/a17-tailwind-plugins": "^3.12.0",
+    "@babel/eslint-parser": "^7.23.10",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
     "@vue/cli-plugin-babel": "~5.0.8",
@@ -64,10 +64,9 @@
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-promise": "4.3.1",
     "eslint-plugin-standard": "4.1.0",
-    "eslint-plugin-vue": "^9.20.1",
-    "node-forge": "^1.3.1",
+    "eslint-plugin-vue": "^9.21.1",
     "prettier": "1.19.1",
-    "sass": "^1.69.7",
+    "sass": "^1.70.0",
     "sass-loader": "^8.0.2",
     "svg-spritemap-webpack-plugin": "^4.5.0",
     "tailwindcss": "^3.4.1",

src/Repositories/ModuleRepository.php

@@ -633,7 +633,46 @@ public function updateOneToMany(
 
     public function updateMultiSelect(TwillModelContract $object, array $fields, string $relationship): void
     {
-        $object->$relationship()->sync($fields[$relationship] ?? []);
+        // get the current list of items
+        $items = $fields[$relationship];
+
+        if (blank($items)) {
+            // let's just delete all the items
+            $object->$relationship()->sync([]);
+
+            return;
+        }
+
+        $newItems = [];
+
+        $position = 1;
+
+        foreach ($items as $key => $item) {
+            if (is_numeric($item)) {
+                // if it's not an array of pivot fields already, set the position
+                $newItems[$item] = ['position' => $position];
+            } else {
+                if (is_array($item)) {
+                    // if it's an array of pivot fields and no position is set, set the position
+                    if (!isset($item['position'])) {
+                        $item['position'] = $position;
+                    }
+                }
+
+                // go with whatever we have from the request
+                $newItems[$key] = $item;
+            }
+
+            $position++;
+        }
+
+        try {
+            $object->$relationship()->sync($newItems);
+        } catch (\Throwable $e) {
+            // If an error occurs, maybe because the pivot table doesn't have the 'position' column,
+            // we will just keep the old implementation
+            $object->$relationship()->sync($fields[$relationship]);
+        }
     }
 
     public function addRelationFilterScope(