support ordering

parent ec7412ba
......@@ -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"
......
......@@ -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)
......
......@@ -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,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment