I have a Vue.js project and I have Customers List with First Name- Last Name- Address-City-State/Province-Email like this >>> See project image here...
With Blue Button --Kayit Ol-- I fill the form and make a registiration. See picture>> Register Form
When I click the Yellow Button --Ayarlar-- I need to see the all cities in the Draggble List and when I sort in the Draggble and click the Green Button --Şehre Göre Sırala-- , the Customer List below should be sorted same as Draggble List. I used Vue.Draggble package (https://github.com/SortableJS/Vue.Draggable) but I cannot take firebase data properly and sort them.
SignUp.vue
// Musteriler
var clientRef = db.ref('musteriler/');
var newClient = clientRef.push();
//Cities
var citiesRef=db.ref('cities/');
var newCity = citiesRef.push();
export default {
data() {
return {
form: {
firstName: '',
lastName: '',
address: '',
city:'',
province:'',
email: '',
},
selectedCities:['Ankara', 'Adana',],
cities : ['','Adana', 'Adıyaman', 'Afyon', 'Ağrı', 'Amasya', 'Ankara', 'Antalya', 'Artvin',
'Aydın', 'Balıkesir', 'Bilecik', 'Bingöl', 'Bitlis', 'Bolu', 'Burdur', 'Bursa', 'Çanakkale',
'Çankırı', 'Çorum', 'Denizli', 'Diyarbakır', 'Edirne', 'Elazığ', 'Erzincan', 'Erzurum', 'Eskişehir',
'Gaziantep', 'Giresun', 'Gümüşhane', 'Hakkari', 'Hatay', 'Isparta', 'Mersin', 'İstanbul', 'İzmir',
'Kars', 'Kastamonu', 'Kayseri', 'Kırklareli', 'Kırşehir', 'Kocaeli', 'Konya', 'Kütahya', 'Malatya',
'Manisa', 'Kahramanmaraş', 'Mardin', 'Muğla', 'Muş', 'Nevşehir', 'Niğde', 'Ordu', 'Rize', 'Sakarya',
'Samsun', 'Siirt', 'Sinop', 'Sivas', 'Tekirdağ', 'Tokat', 'Trabzon', 'Tunceli', 'Şanlıurfa', 'Uşak',
'Van', 'Yozgat', 'Zonguldak', 'Aksaray', 'Bayburt', 'Karaman', 'Kırıkkale', 'Batman', 'Şırnak',
'Bartın', 'Ardahan', 'Iğdır', 'Yalova', 'Karabük', 'Kilis', 'Osmaniye', 'Düzce'],
show: true
}
},
methods: {
onSubmit(evt) {
evt.preventDefault();
newClient.set(this.form);
this.selectedCities.push(...this.selectedCities, this.form.city);
console.log(this.selectedCities);
newCity.set(this.selectedCities);
alert(JSON.stringify(this.form))
},
onReset(evt) {
evt.preventDefault()
// Reset our form values
this.form.firstName = ''
this.form.lastName = ''
this.form.address = ''
this.form.city = ''
this.form.province = ''
this.form.email = ''
// Trick to reset/clear native browser form validation state
this.show = false
this.$nextTick(() => {
this.show = true
})
}
}
}
</script>
Settings.Vue
<template>
<div class="col s12 drag">
<div class="col s12">
<p>Şehirleri sürükleyerek listeyi istediğiniz şekilde sıralandırabilirsiniz.</p>
</div>
<div class="col s12 mx-auto">
<draggable v-model="cities" class="draggable-container" @ended="onEnd" ghost-class='ghost'>
<transition-group type="transition" name="flip-list">
<div class="sortable mx-auto" v-for="item in cities" :key="item">
<strong>{{item}}</strong>
</div>
</transition-group>
</draggable>
<button class="btn btn-success mb-3" @click="onSort">Şehre Göre Sırala</button>
</div>
</div>
</template>
<script>
import {db} from '../firebase/db';
import draggable from 'vuedraggable'
var cityRef=db.ref('cities')
console.log(cityRef);
export default {
components: {
draggable,
},
firebase:{
cities: cityRef,
},
data() {
return {
}
},
methods: {
onEnd(evt) {
evt.preventDefault();
console.log(evt);
},
onSort() {
this.cities = this.cities.sort((a, b) => a.order - b.order);
}
}
}
</script>
Firebase Data
See Firebase RealTime Database musteriler Picture >>> musteriler.json
See Firebase RealTime Database cities Picture >>> cities.json
So how should I arrange the Database and how can I sort Customer List by Vue.Draggble properly ?
Thanks.