support ordering

src/components/MyViewpoints.vue

@@ -31,6 +31,7 @@
         <div class="row q-gutter-md">
           <span :key="vp.uuid" v-for="vp in items" :id="vp.uuid">
             <card
+              :uuid="vp.uuid"
               :title="vp.title"
               :image="vp.icon"
               :url="vp.url"

src/pages/Viewpoints.vue

@@ -60,6 +60,9 @@
         <div class="row q-gutter-md">
           <span :key="vp.uuid" v-for="(vp, i) in collection.vps" :id="vp.uuid">
             <Card
+              :show-ordering="true"
+              @left="left(vp,index)"
+              @right="right(vp,index)"
               type="Viewpoint"
               csstype="ViewpointCollection"
               @cardClicked="viewCard(vp, i)"
@@ -68,11 +71,17 @@
               @showEdit="editCard(vp)"
               :btn-delete="user === vp.owner"
               @deleteCard="remove(vp.uuid)"
+              :btn-order="true"
               >{{ vp.introduction }}
             </Card>
           </span>
         </div>
       </div>
+
+      <div class="row flex-center" v-if="isChanged">
+        <q-btn no-caps color="primary" label="Save changes" @click="saveOrderChange"/>
+      </div>
+
     </section>
   </div>
 </template>
@@ -100,7 +109,8 @@ export default {
       action: 'Add',
       toggleForm: false,
       record: {},
-      index: 1
+      index: 1,
+      isChanged: false
     };
   },
   mounted() {
@@ -130,6 +140,43 @@ export default {
   },
 
   methods: {
+
+    saveOrderChange() {
+
+      console.log("col: ", this.collection)
+
+      API.post("/viewpoints/update-order", { ...this.collection })
+      .then(() => {
+        this.$q.notify({
+          message: 'Order changes saved',
+          position: 'center',
+          color: 'green'
+        })
+      })
+      .catch(e => {
+        alert(e)
+      })
+
+    },
+
+    left(item) {
+      this.isChanged=true
+      let i = this.collection.vps.findIndex(x => x.uuid === item.uuid);
+      //console.log("found index: ", i, " xx: ", index)
+      this.collection.vps.splice(i, 1);
+      this.collection.vps.splice(i - 1, 0, item);
+    },
+
+    right(item) {
+      this.isChanged=true
+      //console.log("right: ", item, index)
+      let i = this.collection.vps.findIndex(x => x.uuid === item.uuid);
+      //console.log("found index: ", i, " xx: ", index)
+      this.collection.vps.splice(i, 1);
+      this.collection.vps.splice(i + 1, 0, item);
+    },
+
+
     remove(item) {
 
       console.log("item :", item)

src/tags/Card.vue

@@ -271,6 +271,15 @@
       <!-- BUTTON BAR --->
       <q-card-actions class="justify-end q-gutter-xs">
         <!-- ICON MENU -->
+        <span v-if="showOrdering">
+          <q-btn icon="fas fa-arrow-left" @click="$emit('left', 'a', index)" round flat dense :color="getColor">
+            <q-tooltip>Move to the xleft</q-tooltip>
+          </q-btn>
+          <q-btn icon="fas fa-arrow-right"@click="$emit('right', 'b', index)" round flat dense :color="getColor">
+            <q-tooltip>Move to the right</q-tooltip>
+          </q-btn>
+        </span>
+
         <q-btn
           round
           flat
@@ -529,6 +538,11 @@ export default {
   name: 'Card',
   mixins: [getColor],
   props: {
+
+    showOrdering: {
+      type: Boolean,
+      default: false,
+    },
     // show a cursor on hover
     hover: {
       type: Boolean,