Added simple page transition.
This commit is contained in:
@@ -1,66 +1,69 @@
|
||||
<template>
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12 is-clearfix is-unselectable">
|
||||
<span class="title is-4">
|
||||
<span class="icon"><i class="fas fa-server"></i> </span>
|
||||
<NuxtLink to="/backends" v-text="'Backends'"/>
|
||||
-
|
||||
<NuxtLink :to="'/backend/' + id" v-text="id"/>
|
||||
: Delete
|
||||
</span>
|
||||
<div>
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12 is-clearfix is-unselectable">
|
||||
<span class="title is-4">
|
||||
<span class="icon"><i class="fas fa-server"></i> </span>
|
||||
<NuxtLink to="/backends" v-text="'Backends'"/>
|
||||
-
|
||||
<NuxtLink :to="'/backend/' + id" v-text="id"/>
|
||||
: Delete
|
||||
</span>
|
||||
|
||||
<div class="is-pulled-right">
|
||||
<div class="field is-grouped"></div>
|
||||
<div class="is-pulled-right">
|
||||
<div class="field is-grouped"></div>
|
||||
</div>
|
||||
|
||||
<div class="is-hidden-mobile">
|
||||
<span class="subtitle">Delete backend configuration and records.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="is-hidden-mobile">
|
||||
<span class="subtitle">Delete backend configuration and records.</span>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="isDeleting">
|
||||
<div class="column is-12">
|
||||
<Message message_class="has-background-warning-90 has-text-dark" title="Deleting..."
|
||||
icon="fas fa-spin fa-exclamation-triangle"
|
||||
message="Delete operation is in progress. Please wait..."/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="isLoading">
|
||||
<div class="column is-12">
|
||||
<Message message_class="has-background-info-90 has-text-dark" title="Loading"
|
||||
icon="fas fa-spinner fa-spin" message="Loading data. Please wait..."/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="column is-12" v-if="error">
|
||||
<Message message_class="is-background-warning-80 has-text-dark" title="Error" icon="fas fa-exclamation-circle"
|
||||
:use-close="true" @close="navigateTo('/backends')"
|
||||
:message="`${error.error.code}: ${error.error.message}`"/>
|
||||
</div>
|
||||
<div class="column is-12" v-else>
|
||||
<Message message_class="is-background-warning-80 has-text-dark" title="Confirmation is required"
|
||||
icon="fas fa-exclamation-triangle">
|
||||
<p>Are you sure you want to delete the backend <code>{{ type }}: {{ id }}</code> configuration and all its
|
||||
records?</p>
|
||||
|
||||
<template v-if="isDeleting">
|
||||
<div class="column is-12">
|
||||
<Message message_class="has-background-warning-90 has-text-dark" title="Deleting..."
|
||||
icon="fas fa-spin fa-exclamation-triangle" message="Delete operation is in progress. Please wait..."/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="isLoading">
|
||||
<div class="column is-12">
|
||||
<Message message_class="has-background-info-90 has-text-dark" title="Loading"
|
||||
icon="fas fa-spinner fa-spin" message="Loading data. Please wait..."/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="column is-12" v-if="error">
|
||||
<Message message_class="is-background-warning-80 has-text-dark" title="Error" icon="fas fa-exclamation-circle"
|
||||
:use-close="true" @close="navigateTo('/backends')"
|
||||
:message="`${error.error.code}: ${error.error.message}`"/>
|
||||
</div>
|
||||
<div class="column is-12" v-else>
|
||||
<Message message_class="is-background-warning-80 has-text-dark" title="Confirmation is required"
|
||||
icon="fas fa-exclamation-triangle">
|
||||
<p>Are you sure you want to delete the backend <code>{{ type }}: {{ id }}</code> configuration and all its
|
||||
records?</p>
|
||||
<h5 class="has-text-dark">This operation will do the following</h5>
|
||||
|
||||
<h5 class="has-text-dark">This operation will do the following</h5>
|
||||
<ul>
|
||||
<li>Remove records metadata that references the given backend.</li>
|
||||
<li>Run data integrity check to remove no longer used records.</li>
|
||||
<li>Update <code>servers.yaml</code> file and remove backend configuration.</li>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<li>Remove records metadata that references the given backend.</li>
|
||||
<li>Run data integrity check to remove no longer used records.</li>
|
||||
<li>Update <code>servers.yaml</code> file and remove backend configuration.</li>
|
||||
</ul>
|
||||
<p>There is no undo operation. This action is irreversible.</p>
|
||||
</Message>
|
||||
|
||||
<p>There is no undo operation. This action is irreversible.</p>
|
||||
</Message>
|
||||
|
||||
<Confirm @confirmed="deleteBackend()"
|
||||
title="Delete backend"
|
||||
title-icon="fa-trash"
|
||||
warning="Depending on your hardware speed, the delete operation might take long time. do not interrupt the
|
||||
<Confirm @confirmed="deleteBackend()"
|
||||
title="Delete backend"
|
||||
title-icon="fa-trash"
|
||||
warning="Depending on your hardware speed, the delete operation might take long time. do not interrupt the
|
||||
process, or close the browser tab. You will be redirected to the backends page automatically once the
|
||||
process is complete. Otherwise, you might end up with a corrupted database."/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user