hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Reuse existing addresses when creating an event

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2019-08-22 15:57:44 +02:00
parent ebf5534003
commit 0e0b68445b
22 changed files with 410 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
js/src/components/Event/AddressAutoComplete.vue
View File

@@ -1,53 +1,123 @@
<template>
<b-field label="Find an address">
<b-autocomplete
:data="data"
placeholder="e.g. 10 Rue Jangot"
field="description"
:loading="isFetching"
@typing="getAsyncData"
@select="option => selected = option">
<div>
<b-field label="Find an address">
<b-autocomplete
:data="data"
v-model="queryText"
placeholder="e.g. 10 Rue Jangot"
field="description"
:loading="isFetching"
@typing="getAsyncData"
@select="option => selected = option">
<template slot-scope="{option}">
<b>{{ option.description }}</b>
<p>
<small>{{ option.street }}</small>,&#32;
<small>{{ option.locality }}</small>
</p>
</template>
</b-autocomplete>
</b-field>
<template slot-scope="{option}">
<b>{{ option.description }}</b><br />
<i v-if="option.url != null">Local</i>
<p>
<small>{{ option.street }},&#32; {{ option.postalCode }} {{ option.locality }}</small>
</p>
</template>
<template slot="empty">
<span v-if="queryText.length < 5">Please type at least 5 caracters</span>
<span v-else-if="isFetching">Searching…</span>
<div v-else class="is-enabled">
<span>No results for « {{ queryText }} »</span>
<p class="control" @click="addressModalActive = true">
<button type="button" class="button is-primary">Add</button>
</p>
</div>
</template>
</b-autocomplete>
</b-field>
<b-modal :active.sync="addressModalActive" :width="640" has-modal-card scroll="keep">
<div class="modal-card" style="width: auto">
<header class="modal-card-head">
<p class="modal-card-title">Login</p>
</header>
<section class="modal-card-body">
<form>
<b-field :label="$gettext('Name')">
<b-input aria-required="true" required v-model="selected.description" />
</b-field>
<b-field :label="$gettext('Street')">
<b-input v-model="selected.street" />
</b-field>
<b-field :label="$gettext('Postal Code')">
<b-input v-model="selected.postalCode" />
</b-field>
<b-field :label="$gettext('Locality')">
<b-input v-model="selected.locality" />
</b-field>
<b-field :label="$gettext('Region')">
<b-input v-model="selected.region" />
</b-field>
<b-field :label="$gettext('Country')">
<b-input v-model="selected.country" />
</b-field>
</form>
</section>
<footer class="modal-card-foot">
<button class="button" type="button" @click="resetPopup()">Clear</button>
</footer>
</div>
</b-modal>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { IAddress } from '@/types/address.model';
import { Address, IAddress } from '@/types/address.model';
import { ADDRESS } from '@/graphql/address';
@Component
import { Modal } from 'buefy/dist/components/dialog';
@Component({
components: {
Modal,
},
})
export default class AddressAutoComplete extends Vue {
@Prop({ required: false, default: () => [] }) initialData!: IAddress[];
data: IAddress[] = this.initialData;
selected: IAddress|null = null;
selected: IAddress|null = new Address();
isFetching: boolean = false;
queryText: string = '';
addressModalActive: boolean = false;
async getAsyncData(query) {
if (!query.length) {
if (query.length < 5) {
this.data = [];
return;
}
this.isFetching = true;
const result = await this.$apollo.query({
query: ADDRESS,
fetchPolicy: 'no-cache',
variables: { query },
});
this.data = result.data.searchAddress as IAddress[];
this.isFetching = false;
}
@Watch('selected')
// Watch deep because of subproperties
@Watch('selected', { deep: true })
updateSelected() {
this.$emit('input', this.selected);
}
resetPopup() {
this.selected = new Address();
}
}
</script>
<style lang="scss">
.autocomplete .dropdown-item.is-disabled .is-enabled {
opacity: 1 !important;
cursor: auto;
}
</style>

5
js/src/graphql/address.ts
View File

@@ -5,6 +5,7 @@ export const ADDRESS = gql`
searchAddress(
query: $query
) {
id,
description,
geom,
floor,
@@ -12,7 +13,9 @@ export const ADDRESS = gql`
locality,
postalCode,
region,
country
country,
url,
originId
}
}
`;

18
js/src/types/address.model.ts
View File

@@ -1,11 +1,23 @@
export interface IAddress {
id: number;
id?: number;
description: string;
floor: string;
street: string;
locality: string;
postal_code: string;
postalCode: string;
region: string;
country: string;
geom: string;
geom?: string;
url?: string;
originId?: string;
}
export class Address implements IAddress {
country: string = '';
description: string = '';
floor: string = '';
locality: string = '';
postalCode: string = '';
region: string = '';
street: string = '';
}

1
js/src/views/Event/Create.vue
View File

@@ -119,7 +119,6 @@ export default class CreateEvent extends Vue {
createEvent(e: Event) {
e.preventDefault();
if (this.event.uuid === '') {
console.log('event', this.event);
this.$apollo

2
js/src/views/Event/Event.vue
View File

@@ -75,7 +75,7 @@
<address>
<span class="addressDescription">{{ event.physicalAddress.description }}</span>
<span>{{ event.physicalAddress.floor }} {{ event.physicalAddress.street }}</span>
<span>{{ event.physicalAddress.postal_code }} {{ event.physicalAddress.locality }}</span>
<span>{{ event.physicalAddress.postalCode }} {{ event.physicalAddress.locality }}</span>
<!-- <span>{{ event.physicalAddress.region }} {{ event.physicalAddress.country }}</span>-->
</address>
<span class="map-show-button" @click="showMap = !showMap" v-if="event.physicalAddress && event.physicalAddress.geom">

2
js/src/views/Group/Create.vue
View File

@@ -79,7 +79,7 @@ export default class CreateGroup extends Vue {
country: addressData.country,
locality: addressData.city,
region: addressData.administrative_area_level_1,
postal_code: addressData.postal_code,
postalCode: addressData.postalCode,
street: `${addressData.street_number} ${addressData.route}`,
};
}