#50 pronouns cards - sorting

components/ListInput.vue

@@ -1,9 +1,14 @@
 <template>
-    <ul class="list-unstyled">
-        <li v-for="(v, i) in value" ref="items">
+    <draggable tag="ul" v-model="iVal" handle=".handle" ghostClass="ghost" @end="$emit('input', iVal)" class="list-unstyled" :group="group">
+        <li v-for="(v, i) in iVal" ref="items">
             <div class="input-group mb-1">
-                <slot v-bind:val="value[i]" v-bind:update="curry(update)(i)">
-                    <input v-model="value[i]" type="text" class="form-control" required/>
+                <div class="input-group-prepend">
+                    <button class="btn btn-light border handle" type="button">
+                        <Icon v="bars"/>
+                    </button>
+                </div>
+                <slot v-bind:val="iVal[i]" v-bind:update="curry(update)(i)">
+                    <input v-model="iVal[i]" type="text" class="form-control" required/>
                 </slot>
                 <div class="input-group-append">
                     <button class="btn btn-outline-danger" type="button" @click.prevent="remove(i)">
@@ -13,27 +18,38 @@
             </div>
         </li>
 
-        <li>
+        <li slot="footer">
             <button class="btn btn-outline-success btn-block" type="button" @click.prevent="add">
                 <Icon v="plus"/>
             </button>
         </li>
-    </ul>
+    </draggable>
 </template>
 
 <script>
     import { curry } from "../src/helpers";
+    import draggable from 'vuedraggable'
 
     export default {
+        components: {
+            draggable,
+        },
         props: {
             value: {},
             prototype: { 'default': '' },
+            group: {},
         },
         data() {
             return {
+                iVal: this.value,
                 curry: curry,
             }
         },
+        watch: {
+            value() {
+                this.iVal = this.value;
+            }
+        },
         methods: {
             remove(i) {
                 const v = [...this.value];
@@ -54,3 +70,10 @@
         },
     }
 </script>
+
+<style lang="scss" scoped>
+    .ghost {
+        opacity: 0.5;
+        background: #c8ebfb;
+    }
+</style>

components/OpinionListInput.vue

@@ -1,5 +1,5 @@
 <template>
-    <ListInput v-model="v" :prototype="{key: '', value: 0}" v-slot="s">
+    <ListInput v-model="v" :prototype="{key: '', value: 0}" v-slot="s" :group="group">
         <div class="input-group-prepend">
             <button type="button" :class="['btn', parseInt(s.val.value) === 1 ? 'btn-primary' : 'btn-outline-secondary']"
                     @click="s.update({key: s.val.key, value: 1})">
@@ -20,7 +20,10 @@
 
 <script>
     export default {
-        props: { value: {} },
+        props: {
+            value: {},
+            group: {},
+        },
         data() { return { v: this.value } },
         watch: { v() { this.$emit('input', this.v); } }
     }

package.json

@@ -27,7 +27,8 @@
     "sqlite3": "^5.0.0",
     "suml-loader": "^0.1.1",
     "ulid": "^2.3.0",
-    "vue-matomo": "^3.13.5-0"
+    "vue-matomo": "^3.13.5-0",
+    "vuedraggable": "^2.24.3"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-pro": "git+ssh://git@gitlab.com:Avris/FontAwesomePro.git",

routes/profileEditor.vue

@@ -72,7 +72,7 @@
                     <h4 class="h5">
                         <T>profile.column</T> {{i + 1}}
                     </h4>
-                    <OpinionListInput v-model="words[i]"/>
+                    <OpinionListInput v-model="words[i]" group="words"/>
                 </template>
             </div>
 

yarn.lock

@@ -7863,6 +7863,11 @@ sort-keys@^2.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
+sortablejs@1.10.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.10.2.tgz#6e40364d913f98b85a14f6678f92b5c1221f5290"
+  integrity sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==
+
 source-list-map@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
@@ -8787,6 +8792,13 @@ vue@^2.6.12:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
   integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==
 
+vuedraggable@^2.24.3:
+  version "2.24.3"
+  resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-2.24.3.tgz#43c93849b746a24ce503e123d5b259c701ba0d19"
+  integrity sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==
+  dependencies:
+    sortablejs "1.10.2"
+
 vuex@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.5.1.tgz#f1b8dcea649bc25254cf4f4358081dbf5da18b3d"