Skip to content
GitLab
Commit dc87c17d authored by gj4210's avatar gj4210 👁
Browse files

UPD: Dismissable Transaction Results & Overlay when busy

parent d7abbf66
Pipeline #92709 passed with stages
in 7 minutes and 41 seconds
Hide whitespace changes
Inline Side-by-side
frontend/src/components/TransactionList.vue
View file @ dc87c17d
<template>
<div class="transaction-list invisible-scrollbar p-3">
<b-button-toolbar justify>
<b-button-group class="mx-auto shadow">
<b-button-group v-b-tooltip.hover title="Rückgängig machen">
<b-button :disabled="!canUndo" @click="undo">
<font-awesome-icon icon="undo"></font-awesome-icon>
</b-button>
</b-button-group>
<b-button-group v-b-tooltip.hover title="Wiederherstellen">
<b-button :disabled="!canRedo" @click="redo">
<font-awesome-icon icon="redo"></font-awesome-icon>
</b-button>
</b-button-group>
</b-button-group>
</b-button-toolbar>
<hr/>
<div v-if="$store.state.ta_list === null || $store.state.ta_list.length === 0"
class="font-italic text-center mt-3">
Keine Aktionen geplant
</div>
<Draggable v-else v-model="$store.state.ta_list" @start="drag=true" @end="drag=false" handle=".handle">
<b-card v-for="(element, index) in $store.state.ta_list" :key="element.id"
:border-variant="function2variant(element.object_function)" class="mb-3 shadow" no-body>
<div class="element-number handle" :class="`badge badge-${function2variant(element.object_function)}`">
{{index + 1}}
<!-- TODO: Mouse feedback on click -->
<div class="move-icons">
<font-awesome-icon class="move-icon"
:icon="['fas','caret-up']"
@click="$store.state.ta_list.move(index, index - 1)"/>
<font-awesome-icon class="move-icon"
:icon="['fas','caret-down']"
@click="$store.state.ta_list.move(index, index + 1)"/>
</div>
</div>
<b-card-body class="element-content">
{{function2text(element.object_function)}} in {{element.object_fq_name}}
<ul>
<li v-for="field in element.preview_fields" v-bind:key="field">
{{element.func_descr[field].descriptionObjTypeScope}}: <code>{{element.parameters.new[field]}}</code>
</li>
</ul>
<div class="error-warning"
v-if="$store.state.transaction_result && $store.state.transaction_result.type === 'error' && $store.state.transaction_result.uuid === element.uuid">
<font-awesome-icon :icon="['fas','exclamation-triangle']"/>
{{$store.state.transaction_result.error.error.description}}
</div>
<b-button-group class="d-flex">
<b-button :disabled="should_edit" variant="outline-primary"
:id="'button-edit-action-' + index"
@click="editElement(element)">
<font-awesome-icon :icon="['far', 'edit']"/>
<b-overlay spinner-variant="primary" :show="$store.state.executing_transaction">
<div class="transaction-list invisible-scrollbar p-3">
<b-button-toolbar justify>
<b-button-group class="mx-auto shadow">
<b-button-group v-b-tooltip.hover title="Rückgängig machen">
<b-button :disabled="!canUndo" @click="undo">
<font-awesome-icon icon="undo"></font-awesome-icon>
</b-button>
<b-tooltip placement="bottom" :target="'button-edit-action-' + index"
triggers="hover" variant="primary" container="sidebar">
Aktion bearbeiten
</b-tooltip>
<b-button :disabled="should_edit" variant="outline-danger"
:id="'button-delete-action-' + index"
@click="$store.commit('removeTransactionElement', element)">
<font-awesome-icon :icon="['far', 'trash-alt']"/>
</b-button-group>
<b-button-group v-b-tooltip.hover title="Wiederherstellen">
<b-button :disabled="!canRedo" @click="redo">
<font-awesome-icon icon="redo"></font-awesome-icon>
</b-button>
<b-tooltip placement="bottom" :target="'button-delete-action-' + index"
triggers="hover" variant="danger" container="sidebar">
Aktion löschen
</b-tooltip>
</b-button-group>
</b-card-body>
</b-card>
</Draggable>
<hr/>
<b-button-group class="d-flex mb-3 shadow">
<b-button :disabled="$store.state.ta_list == null || $store.state.ta_list.length === 0"
@click="$store.commit('emptyTransactionList')" variant="outline-danger">
<font-awesome-icon :icon="['far', 'trash-alt']"></font-awesome-icon>
Liste löschen
</b-button>
<b-button :disabled="$store.state.ta_list == null || $store.state.ta_list.length === 0"
variant="primary" @click="$store.commit('testTransaction')">Testen
</b-button>
<b-button :disabled="$store.state.ta_list == null || $store.state.ta_list.length === 0"
variant="success" @click="$store.commit('executeTransaction')">
<font-awesome-icon :icon="['far', 'paper-plane']"></font-awesome-icon>
Anwenden
</b-button>
</b-button-group>
<template v-if="$store.state.transaction_result && $store.state.transaction_result.type === 'error'">
</b-button-group>
</b-button-toolbar>
<hr/>
<div v-if="$store.state.ta_list === null || $store.state.ta_list.length === 0"
class="font-italic text-center mt-3">
Keine Aktionen geplant
</div>
<Draggable v-else v-model="$store.state.ta_list" @start="drag=true" @end="drag=false" handle=".handle">
<b-card v-for="(element, index) in $store.state.ta_list" :key="element.id"
:border-variant="function2variant(element.object_function)" class="mb-3 shadow" no-body>
<div class="element-number handle"
:class="`badge badge-${function2variant(element.object_function)}`">
{{index + 1}}
<!-- TODO: Mouse feedback on click -->
<div class="move-icons">
<font-awesome-icon class="move-icon"
:icon="['fas','caret-up']"
@click="$store.state.ta_list.move(index, index - 1)"/>
<font-awesome-icon class="move-icon"
:icon="['fas','caret-down']"
@click="$store.state.ta_list.move(index, index + 1)"/>
</div>
</div>
<b-card-body class="element-content">
{{function2text(element.object_function)}} in {{element.object_fq_name}}
<ul>
<li v-for="field in element.preview_fields" v-bind:key="field">
{{element.func_descr[field].descriptionObjTypeScope}}: <code>{{element.parameters.new[field]}}</code>
</li>
</ul>
<div class="error-warning"
v-if="$store.state.transaction_result && $store.state.transaction_result.type === 'error' && $store.state.transaction_result.uuid === element.uuid">
<font-awesome-icon :icon="['fas','exclamation-triangle']"/>
{{$store.state.transaction_result.error.error.description}}
</div>
<b-button-group class="d-flex">
<b-button :disabled="should_edit || $store.state.executing_transaction"
variant="outline-primary"
:id="'button-edit-action-' + index"
@click="editElement(element)">
<font-awesome-icon :icon="['far', 'edit']"/>
</b-button>
<b-tooltip placement="bottom" :target="'button-edit-action-' + index"
triggers="hover" variant="primary" container="sidebar">
Aktion bearbeiten
</b-tooltip>
<b-button :disabled="should_edit || $store.state.executing_transaction"
variant="outline-danger"
:id="'button-delete-action-' + index"
@click="$store.commit('removeTransactionElement', element)">
<font-awesome-icon :icon="['far', 'trash-alt']"/>
</b-button>
<b-tooltip placement="bottom" :target="'button-delete-action-' + index"
triggers="hover" variant="danger" container="sidebar">
Aktion löschen
</b-tooltip>
</b-button-group>
</b-card-body>
</b-card>
</Draggable>
<hr/>
<p class="text-center text-danger">
<font-awesome-icon :icon="['fas','exclamation-triangle']"/>
Weitere Fehlerinformationen:
</p>
<CopyField variant="danger" :text="JSON.stringify($store.state.transaction_result.error, null, 1)"
multiline/>
</template>
<DBEditor modal_id="ta-edit"
:object_fq_name="edit_elem.object_fq_name"
:object_function="edit_elem.object_function"
:old_uuid="edit_elem.uuid"
:presets="edit_elem.parameters.new"
:old_data="edit_elem.parameters.old"
:non_optionals="edit_elem.non_optionals"
:non_optionals_order="edit_elem.non_optionals_order"
:input_reducer="edit_elem.input_reducer"
:preview_fields="edit_elem.preview_fields"
@ready="modalReady()"
></DBEditor>
</div>
<b-button-group class="d-flex mb-3 shadow">
<b-button
:disabled="$store.state.ta_list == null || $store.state.ta_list.length === 0 || $store.state.executing_transaction"
@click="$store.commit('emptyTransactionList')" variant="outline-danger">
<font-awesome-icon :icon="['far', 'trash-alt']"/>
Liste löschen
</b-button>
<b-button
:disabled="$store.state.ta_list == null || $store.state.ta_list.length === 0 || $store.state.executing_transaction"
variant="primary" @click="$store.commit('testTransaction')">
<font-awesome-icon :icon="['fas', 'vial']"/>
Testen
</b-button>
<b-button
:disabled="$store.state.ta_list == null || $store.state.ta_list.length === 0 || $store.state.executing_transaction"
variant="success" @click="$store.commit('executeTransaction')">
<font-awesome-icon :icon="['far', 'paper-plane']"/>
Anwenden
</b-button>
</b-button-group>
<template v-if="$store.state.transaction_result">
<hr/>
<b-button-close @click="$store.commit('removeTransactionResult')"/>
<template v-if="$store.state.transaction_result.type === 'error'">
<p class="text-center text-danger">
<font-awesome-icon :icon="['fas','exclamation-triangle']"/>
Weitere Fehlerinformationen:
</p>
<CopyField variant="danger" :text="JSON.stringify($store.state.transaction_result.error, null, 1)"
multiline/>
</template>
<template v-if="$store.state.transaction_result.type === 'success'">
<p class="text-center text-success">
<font-awesome-icon :icon="['fas','check-circle']"/>
Transaktion erfolgreich angewendet.
</p>
</template>
<template v-if="$store.state.transaction_result.type === 'test-success'">
<p class="text-center text-primary">
<font-awesome-icon :icon="['fas','vial']"/>
Transaktion erfolgreich getestet.
</p>
</template>
</template>
<DBEditor modal_id="ta-edit"
:object_fq_name="edit_elem.object_fq_name"
:object_function="edit_elem.object_function"
:old_uuid="edit_elem.uuid"
:presets="edit_elem.parameters.new"
:old_data="edit_elem.parameters.old"
:non_optionals="edit_elem.non_optionals"
:non_optionals_order="edit_elem.non_optionals_order"
:input_reducer="edit_elem.input_reducer"
:preview_fields="edit_elem.preview_fields"
@ready="modalReady()"
></DBEditor>
</div>
</b-overlay>
</template>
<script>
......
frontend/src/icons.js
View file @ dc87c17d
......@@ -24,10 +24,12 @@ import {
faUndo,
faRedo,
faCaretUp,
faCaretDown
faCaretDown,
faVial,
faCheckCircle
} from '@fortawesome/free-solid-svg-icons'
import {faUser, faEdit, faTrashAlt, faCheckSquare, faLifeRing, faPaperPlane} from '@fortawesome/free-regular-svg-icons'
library.add(faExclamationTriangle, faFilter, faInfoCircle, faBars, faArrowRight, faSort, faSortUp, faSortDown, faCode, faBug)
library.add(faCircleNotch, faPlus, faChevronUp, faChevronDown, faCopy, faTasks, faUndo, faRedo)
library.add(faCircleNotch, faPlus, faChevronUp, faChevronDown, faCopy, faTasks, faUndo, faRedo, faVial, faCheckCircle)
library.add(faUser, faEdit, faTrashAlt, faCheckSquare, faLifeRing, faPaperPlane, faCaretUp, faCaretDown)
frontend/src/main.js
View file @ dc87c17d
......@@ -56,6 +56,7 @@ const store = new Vuex.Store({
undone: JSON.parse(window.localStorage.getItem('undone')) || [],
undo_redo_new_mutaion: JSON.parse(window.localStorage.getItem('undo_redo_new_mutation')) || true,
transaction_result: JSON.parse(window.localStorage.getItem('transaction_result')) || null,
executing_transaction: JSON.parse(window.localStorage.getItem('executing_transaction')) || false,
show_sidebar: JSON.parse(window.localStorage.getItem('show_sidebar')) || false,
},
mutations: {
......@@ -115,6 +116,8 @@ const store = new Vuex.Store({
state.undone = []
state.done = []
state.transaction_result = null
state.executing_transaction = false
state.show_sidebar = false
window.localStorage.removeItem('done')
window.localStorage.removeItem('undone')
window.localStorage.removeItem('undo_redo_new_mutation')
......@@ -122,6 +125,7 @@ const store = new Vuex.Store({
window.localStorage.removeItem('token')
window.localStorage.removeItem('ta_list')
window.localStorage.removeItem('transaction_result')
window.localStorage.removeItem('executing_transaction')
window.localStorage.removeItem('show_sidebar')
state.netdb_axios_config = {
headers: {
......@@ -131,9 +135,6 @@ const store = new Vuex.Store({
}
},
removeTransactionElement(state, payload) {
state.transaction_result = null
window.localStorage.removeItem('transaction_result')
for (let i = 0; i < state.ta_list.length; i++) {
if (state.ta_list[i].uuid === payload.uuid) {
state.ta_list.splice(i, 1)
......@@ -143,9 +144,6 @@ const store = new Vuex.Store({
window.localStorage.setItem('ta_list', JSON.stringify(state.ta_list))
},
addTransactionElement(state, payload) {
state.transaction_result = null
window.localStorage.removeItem('transaction_result')
if (state.ta_list == null) {
state.ta_list = []
}
......@@ -163,24 +161,19 @@ const store = new Vuex.Store({
window.localStorage.setItem('ta_list', JSON.stringify(state.ta_list))
},
emptyTransactionList(state) {
state.transaction_result = null
window.localStorage.removeItem('transaction_result')
state.ta_list = []
window.localStorage.setItem('ta_list', JSON.stringify(state.ta_list))
},
async testTransaction(state) {
state.transaction_result = null
window.localStorage.removeItem('transaction_result')
this.commit('setTransactionBusy', true)
let api_list = APIUtil.buildAPITaFromTaObjectArray(state.ta_list)
try {
let res = await WAPITransactionSerice.executeDry(state.netdb_axios_config, api_list)
window.console.debug(res)
state.transaction_result = {
'type': 'success'
'type': 'test-success'
}
window.localStorage.setItem('transaction_result', JSON.stringify(state.transaction_result))
} catch (e) {
window.console.debug(e.response)
state.transaction_result = {
......@@ -188,12 +181,13 @@ const store = new Vuex.Store({
'error': e.response.data.exception,
'uuid': state.ta_list[APIUtil.getAPIErrorIndexFromDBException(e.response.data.exception)].uuid
}
} finally {
this.commit('setTransactionBusy', false)
window.localStorage.setItem('transaction_result', JSON.stringify(state.transaction_result))
}
},
async executeTransaction(state) {
state.transaction_result = null
window.localStorage.removeItem('transaction_result')
this.commit('setTransactionBusy', true)
let api_list = APIUtil.buildAPITaFromTaObjectArray(state.ta_list)
try {
......@@ -210,7 +204,6 @@ const store = new Vuex.Store({
state.transaction_result = {
'type': 'success'
}
window.localStorage.setItem('transaction_result', JSON.stringify(state.transaction_result))
} catch (e) {
window.console.debug(e.response)
state.transaction_result = {
......@@ -218,19 +211,29 @@ const store = new Vuex.Store({
'error': e.response.data.exception,
'uuid': state.ta_list[APIUtil.getAPIErrorIndexFromDBException(e.response.data.exception)].uuid
}
} finally {
this.commit('setTransactionBusy', false)
window.localStorage.setItem('transaction_result', JSON.stringify(state.transaction_result))
}
},
showSidebar(state, show) {
state.show_sidebar = show
window.localStorage.setItem('show_sidebar', show)
},
setTransactionBusy(state, busy) {
state.executing_transaction = busy
window.localStorage.setItem('executing_transaction', busy)
},
removeTransactionResult(state) {
state.transaction_result = null
window.localStorage.removeItem('transaction_result')
}
},
plugins: [
sharedMutations(
{
predicate:
['pushUndoRedoUndone', 'popUndoRedoUndone', 'clearUndoRedoUndone', 'setUndoRedoNewMutation', 'clearUndoRedoDone', 'popUndoRedoDone', 'emptyState', 'login', 'logout', 'addTransactionElement', 'removeTransactionElement', 'emptyTransactionList', 'removeTransactionResult']
['pushUndoRedoUndone', 'popUndoRedoUndone', 'clearUndoRedoUndone', 'setUndoRedoNewMutation', 'clearUndoRedoDone', 'popUndoRedoDone', 'emptyState', 'login', 'logout', 'addTransactionElement', 'removeTransactionElement', 'emptyTransactionList', 'removeTransactionResult', 'setTransactionBusy']
}
)
],
......
frontend/src/mixins/vuex-undo-redo.js
View file @ dc87c17d
......@@ -10,10 +10,10 @@ export default {
Vue.mixin({
computed: {
canRedo() {
return this.$store.state.undone.length !== 0
return this.$store.state.undone.length !== 0 && !this.$store.state.executing_transaction
},
canUndo() {
return this.$store.state.done.length !== 0
return this.$store.state.done.length !== 0 && !this.$store.state.executing_transaction
}
},
methods: {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Imprint