Added simple page transition.

This commit is contained in:
Abdulmhsen B. A. A.
2024-07-22 21:31:46 +03:00
parent 109d133837
commit 2fb9435367
28 changed files with 3807 additions and 3735 deletions

View File

@@ -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>&nbsp;</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>&nbsp;</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>