mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
remove location related stuff
This commit is contained in:
parent
9042089d5e
commit
f3bf82fdab
@ -6,7 +6,6 @@ export default gql(`
|
||||
id
|
||||
name
|
||||
avatar
|
||||
about
|
||||
createdAt
|
||||
badges {
|
||||
id
|
||||
|
||||
@ -1,210 +1,5 @@
|
||||
<template>
|
||||
<ds-card space="small">
|
||||
<ds-input
|
||||
id="name"
|
||||
v-model="form.name"
|
||||
icon="user"
|
||||
label="Dein Name"
|
||||
placeholder="Dein Name"
|
||||
/>
|
||||
<!-- eslint-disable vue/use-v-on-exact -->
|
||||
<ds-select
|
||||
id="city"
|
||||
v-model="city"
|
||||
:options="cities"
|
||||
icon="map-marker"
|
||||
label="Deine Stadt"
|
||||
placeholder="Deine Stadt"
|
||||
@input="handleCitySelection"
|
||||
@input.native="handleCityInput"
|
||||
/>
|
||||
<!-- eslint-enable vue/use-v-on-exact -->
|
||||
<ds-input
|
||||
id="bio"
|
||||
v-model="form.about"
|
||||
type="textarea"
|
||||
rows="3"
|
||||
label="Erzähl doch ein wenig (in zwei Sätzen) über dich"
|
||||
placeholder="Über mich"
|
||||
/>
|
||||
<template slot="footer">
|
||||
<ds-button
|
||||
style="float: right;"
|
||||
icon="check"
|
||||
primary
|
||||
@click.prevent="submit"
|
||||
>
|
||||
Speichern
|
||||
</ds-button>
|
||||
</template>
|
||||
<ds-card>
|
||||
<p>My Data...</p>
|
||||
</ds-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gql from 'graphql-tag'
|
||||
|
||||
import { mapGetters } from 'vuex'
|
||||
import { CancelToken } from 'axios'
|
||||
import find from 'lodash/find'
|
||||
|
||||
let timeout
|
||||
const mapboxToken =
|
||||
'pk.eyJ1IjoiaHVtYW4tY29ubmVjdGlvbiIsImEiOiJjajl0cnBubGoweTVlM3VwZ2lzNTNud3ZtIn0.KZ8KK9l70omjXbEkkbHGsQ'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
axiosSource: null,
|
||||
cities: [],
|
||||
city: null,
|
||||
form: {
|
||||
name: null,
|
||||
locationId: null,
|
||||
about: null
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
user: 'auth/user'
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
user: {
|
||||
immediate: true,
|
||||
handler: function(user) {
|
||||
this.form = {
|
||||
name: user.name,
|
||||
locationId: user.locationId,
|
||||
about: user.about
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
console.log('SUBMIT', { ...this.form })
|
||||
this.$apollo
|
||||
.mutate({
|
||||
mutation: gql`
|
||||
mutation(
|
||||
$id: ID!
|
||||
$name: String
|
||||
$locationId: String
|
||||
$about: String
|
||||
) {
|
||||
UpdateUser(
|
||||
id: $id
|
||||
name: $name
|
||||
locationId: $locationId
|
||||
about: $about
|
||||
) {
|
||||
id
|
||||
name
|
||||
locationId
|
||||
about
|
||||
}
|
||||
}
|
||||
`,
|
||||
// Parameters
|
||||
variables: {
|
||||
id: this.user.id,
|
||||
name: this.form.name,
|
||||
locationId: this.form.locationId,
|
||||
about: this.form.about
|
||||
},
|
||||
// Update the cache with the result
|
||||
// The query will be updated with the optimistic response
|
||||
// and then with the real result of the mutation
|
||||
update: (store, { data: { UpdateUser } }) => {
|
||||
// this.$store.dispatch('auth/refresh', UpdateUser)
|
||||
// Read the data from our cache for this query.
|
||||
// const data = store.readQuery({ query: TAGS_QUERY })
|
||||
// Add our tag from the mutation to the end
|
||||
// data.tags.push(addTag)
|
||||
// Write our data back to the cache.
|
||||
// store.writeQuery({ query: TAGS_QUERY, data })
|
||||
}
|
||||
// Optimistic UI
|
||||
// Will be treated as a 'fake' result as soon as the request is made
|
||||
// so that the UI can react quickly and the user be happy
|
||||
/* optimisticResponse: {
|
||||
__typename: 'Mutation',
|
||||
addTag: {
|
||||
__typename: 'Tag',
|
||||
id: -1,
|
||||
label: newTag
|
||||
}
|
||||
} */
|
||||
})
|
||||
.then(data => {
|
||||
console.log(data)
|
||||
this.$toast.success('Updated user')
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err)
|
||||
this.$toast.error(err.message)
|
||||
})
|
||||
},
|
||||
handleCityInput(value) {
|
||||
clearTimeout(timeout)
|
||||
timeout = setTimeout(() => this.requestGeoData(value), 500)
|
||||
},
|
||||
handleCitySelection(value) {
|
||||
console.log('SET CURRENT VALUE', value)
|
||||
const item = find(this.cities, { value: value })
|
||||
console.log('ID:', item.id)
|
||||
this.form.locationId = item.id
|
||||
},
|
||||
handleCityEnter() {
|
||||
console.log('SET CURRENT VALUE')
|
||||
},
|
||||
processCityResults(res) {
|
||||
if (
|
||||
!res ||
|
||||
!res.data ||
|
||||
!res.data.features ||
|
||||
!res.data.features.length
|
||||
) {
|
||||
return []
|
||||
}
|
||||
let output = []
|
||||
res.data.features.forEach(item => {
|
||||
output.push({
|
||||
label: item.place_name,
|
||||
value: item.place_name,
|
||||
id: item.id
|
||||
})
|
||||
})
|
||||
|
||||
return output
|
||||
},
|
||||
requestGeoData(e) {
|
||||
if (this.axiosSource) {
|
||||
// cancel last request
|
||||
this.axiosSource.cancel()
|
||||
}
|
||||
|
||||
const value = e.target ? e.target.value.trim() : ''
|
||||
if (value === '' || value.length < 3) {
|
||||
this.cities = []
|
||||
return
|
||||
}
|
||||
|
||||
this.axiosSource = CancelToken.source()
|
||||
|
||||
this.$axios
|
||||
.get(
|
||||
`https://api.mapbox.com/geocoding/v5/mapbox.places/${value}.json?access_token=${mapboxToken}&types=region,postcode,district,place,country&language=de`,
|
||||
{
|
||||
cancelToken: this.axiosSource.token
|
||||
}
|
||||
)
|
||||
.then(res => {
|
||||
this.cities = this.processCityResults(res)
|
||||
})
|
||||
console.log('TRY TO GET DATA FOR ', value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user