Show loading spinners while adding/deleting stuff

pull/147/head
Candid Dauth 2021-04-04 23:07:12 +02:00
rodzic 94a1d6069c
commit 450df6fbc0
8 zmienionych plików z 38 dodań i 15 usunięć

Wyświetl plik

@ -29,7 +29,7 @@ export default class LineInfo extends Vue {
@Prop({ type: IdType, required: true }) lineId!: ID;
isSaving = false;
isDeleting = false;
showElevationPlot = false;
isMoving = false;
@ -43,13 +43,13 @@ export default class LineInfo extends Vue {
if (!this.line || !await this.$bvModal.msgBoxConfirm(`Do you really want to remove the line “${this.line.name}”?`))
return;
this.isSaving = true;
this.isDeleting = true;
try {
await this.client.deleteLine({ id: this.lineId });
} catch (err) {
showErrorToast(this, "fm-line-info-delete", "Error deleting line", err);
} finally {
this.isSaving = false;
this.isDeleting = false;
}
}

Wyświetl plik

@ -46,11 +46,14 @@
>Export as GPX route</b-dropdown-item>
</b-dropdown>
<b-button v-if="!client.readonly" size="sm" v-b-modal.fm-line-info-edit :disabled="isSaving || mapContext.interaction">Edit data</b-button>
<b-button v-if="!client.readonly" size="sm" v-b-modal.fm-line-info-edit :disabled="isDeleting || mapContext.interaction">Edit data</b-button>
<b-button v-if="!client.readonly && line.mode != 'track'" size="sm" @click="moveLine()" :disabled="isSaving || mapContext.interaction">Edit waypoints</b-button>
<b-button v-if="!client.readonly && line.mode != 'track'" size="sm" @click="moveLine()" :disabled="isDeleting || mapContext.interaction">Edit waypoints</b-button>
<b-button v-if="!client.readonly" size="sm" @click="deleteLine()" :disabled="isSaving || mapContext.interaction">Remove</b-button>
<b-button v-if="!client.readonly" size="sm" @click="deleteLine()" :disabled="isDeleting || mapContext.interaction">
<b-spinner small v-if="isDeleting"></b-spinner>
Remove
</b-button>
</b-button-toolbar>
<RouteForm v-if="isMoving" active ref="routeForm" :route-id="`l${line.id}`" :show-toolbar="false"></RouteForm>

Wyświetl plik

@ -26,7 +26,7 @@ export default class MarkerInfo extends Vue {
@Prop({ type: IdType, required: true }) markerId!: ID;
isSaving = false;
isDeleting = false;
get marker(): Marker<StringMap> | undefined {
return this.client.markers[this.markerId];
@ -46,13 +46,13 @@ export default class MarkerInfo extends Vue {
if (!this.marker || !await this.$bvModal.msgBoxConfirm(`Do you really want to remove the marker “${this.marker.name}”?`))
return;
this.isSaving = true;
this.isDeleting = true;
try {
await this.client.deleteMarker({ id: this.markerId });
} catch (err) {
showErrorToast(this, "fm-marker-info-delete", "Error deleting marker", err);
} finally {
this.isSaving = false;
this.isDeleting = false;
}
}

Wyświetl plik

@ -24,9 +24,12 @@
<b-dropdown-item href="javascript:" @click="useAsTo()">Route destination</b-dropdown-item>
</b-dropdown>
<b-button v-if="!client.readonly" size="sm" v-b-modal.fm-marker-info-edit :disabled="isSaving || mapContext.interaction">Edit data</b-button>
<b-button v-if="!client.readonly" size="sm" @click="move()" :disabled="isSaving || mapContext.interaction">Move</b-button>
<b-button v-if="!client.readonly" size="sm" @click="deleteMarker()" :disabled="isSaving || mapContext.interaction">Remove</b-button>
<b-button v-if="!client.readonly" size="sm" v-b-modal.fm-marker-info-edit :disabled="isDeleting || mapContext.interaction">Edit data</b-button>
<b-button v-if="!client.readonly" size="sm" @click="move()" :disabled="isDeleting || mapContext.interaction">Move</b-button>
<b-button v-if="!client.readonly" size="sm" @click="deleteMarker()" :disabled="isDeleting || mapContext.interaction">
<b-spinner small v-if="isDeleting"></b-spinner>
Remove
</b-button>
</b-button-toolbar>
<EditMarker id="fm-marker-info-edit" :markerId="markerId"></EditMarker>

Wyświetl plik

@ -24,6 +24,7 @@ export default class SearchResultInfo extends Vue {
@Prop({ type: Object, required: true }) result!: SearchResult | FileResult;
@Prop({ type: Boolean, default: false }) showBackButton!: boolean;
@Prop({ type: Boolean, default: false }) isAdding!: boolean;
renderOsmTag = renderOsmTag;

Wyświetl plik

@ -25,10 +25,17 @@
<b-button-toolbar>
<b-button v-b-tooltip.hover="'Zoom to search result'" @click="zoomToResult()" size="sm"><Icon icon="zoom-in" alt="Zoom to search result"></Icon></b-button>
<b-dropdown v-if="!client.readonly && types.length > 1" text="Add to map" size="sm">
<b-dropdown v-if="!client.readonly && types.length > 1" :disabled="isAdding" size="sm">
<template #button-content>
<b-spinner small v-if="isAdding"></b-spinner>
Add to map
</template>
<b-dropdown-item v-for="type in types" href="javascript:" @click="$emit('add-to-map', type)">{{type.name}}</b-dropdown-item>
</b-dropdown>
<b-button v-if="!client.readonly && types.length == 1" @click="$emit('add-to-map', types[0])" size="sm">Add to map</b-button>
<b-button v-if="!client.readonly && types.length == 1" @click="$emit('add-to-map', types[0])" size="sm" :disabled="isAdding">
<b-spinner small v-if="isAdding"></b-spinner>
Add to map
</b-button>
<b-dropdown v-if="isMarker && context.search" text="Use as" size="sm">
<b-dropdown-item href="javascript:" @click="$emit('use-as-from')">Route start</b-dropdown-item>

Wyświetl plik

@ -39,6 +39,7 @@ export default class SearchResults extends Vue {
@Prop({ type: Object, default: () => ({}) }) customTypes!: FileResultObject["types"];
activeTab = 0;
isAdding = false;
get isNarrow(): boolean {
return context.isNarrow;
@ -166,6 +167,7 @@ export default class SearchResults extends Vue {
async _addToMap(data: Array<{ result: SearchResult | FileResult; type: Type }>): Promise<boolean> {
this.$bvToast.hide("fm-search-result-info-add-error");
this.isAdding = true;
try {
const selection: SelectedItem[] = [];
@ -223,6 +225,8 @@ export default class SearchResults extends Vue {
} catch (err) {
showErrorToast(this, "fm-search-result-info-add-error", "Error adding to map", err);
return false;
} finally {
this.isAdding = false;
}
}

Wyświetl plik

@ -38,7 +38,11 @@
<b-button-toolbar v-if="client.padData && !client.readonly && searchResults && searchResults.length > 0">
<b-button @click="toggleSelectAll" :pressed="isAllSelected">Select all</b-button>
<b-dropdown v-if="client.padData && !client.readonly" :disabled="activeSearchResults.length == 0" :text="`Add selected item${activeSearchResults.length == 1 ? '' : 's'} to map`">
<b-dropdown v-if="client.padData && !client.readonly" :disabled="activeSearchResults.length == 0 || isAdding">
<template #button-content>
<b-spinner small v-if="isAdding"></b-spinner>
Add selected item{{activeSearchResults.length == 1 ? '' : 's'}} to map
</template>
<template v-if="activeMarkerSearchResults.length > 0 && markerTypes.length ">
<b-dropdown-item v-for="type in markerTypes" href="javascript:" @click="addToMap(activeMarkerSearchResults, type)">Marker items as {{type.name}}</b-dropdown-item>
</template>
@ -58,6 +62,7 @@
v-if="openResult"
:result="openResult"
show-back-button
:is-adding="isAdding"
@back="closeResult()"
@add-to-map="addToMap([openResult], $event)"
@use-as-from="useAsFrom(openResult)"