TransactionList.vue 5.97 KB
Newer Older
1
2
<template>
    <div class="transaction-list">
janis.streib's avatar
janis.streib committed
3
4
5
        <b-button-toolbar justify>
            <b-button-group class="mx-auto">
                <b-button-group v-b-tooltip title="Rückgängig machen">
6
                    <b-button :disabled="!canUndo" @click="undo">
janis.streib's avatar
janis.streib committed
7
8
9
10
                        <font-awesome-icon icon="undo"></font-awesome-icon>
                    </b-button>
                </b-button-group>
                <b-button-group v-b-tooltip title="Wiederherstellen">
11
                    <b-button :disabled="!canRedo" @click="redo">
janis.streib's avatar
janis.streib committed
12
13
14
15
16
17
                        <font-awesome-icon icon="redo"></font-awesome-icon>
                    </b-button>
                </b-button-group>
            </b-button-group>
        </b-button-toolbar>
        <hr/>
gj4210's avatar
gj4210 committed
18
        <div v-if="$store.state.ta_list === null || $store.state.ta_list.length === 0"
janis.streib's avatar
janis.streib committed
19
20
             class="font-italic text-center mt-3">
            Keine Aktionen geplant
gj4210's avatar
gj4210 committed
21
22
        </div>
        <Draggable v-else v-model="$store.state.ta_list" @start="drag=true" @end="drag=false">
23
24
25
            <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>
                <b-row no-gutters>
26
                    <b-col cols="1" class="mb-0">
27
28
29
30
31
32
                        <b-badge :variant="function2variant(element.object_function)" class="element-number">
                            {{index + 1}}
                        </b-badge>
                    </b-col>
                    <b-col>
                        <b-card-body>
33
34
35
36
                            <b-row>
                                <b-col>
                                    {{function2text(element.object_function)}} in {{element.object_fq_name}}
                                </b-col>
37
                                <b-col cols="3" class="mb-0">
janis.streib's avatar
janis.streib committed
38
                                    <b-button :disabled="should_edit" block variant="outline-primary"
39
                                              :id="'button-edit-action-' + index"
janis.streib's avatar
janis.streib committed
40
                                              @click="editElement(element)">
41
42
                                        <font-awesome-icon :icon="['far', 'edit']"/>
                                    </b-button>
43
                                    <b-tooltip placement="left" :target="'button-edit-action-' + index"
gj4210's avatar
gj4210 committed
44
                                               triggers="hover" variant="primary" container="sidebar">
45
46
                                        Aktion bearbeiten
                                    </b-tooltip>
47
48
                                    <b-button block variant="outline-danger"
                                              :id="'button-delete-action-' + index"
49
                                              @click="$store.commit('removeTransactionElement', element)">
50
51
52
                                        <font-awesome-icon :icon="['far', 'trash-alt']"/>
                                    </b-button>
                                    <b-tooltip placement="left" :target="'button-delete-action-' + index"
gj4210's avatar
gj4210 committed
53
                                               triggers="hover" variant="danger" container="sidebar">
54
55
                                        Aktion löschen
                                    </b-tooltip>
56
57
                                </b-col>
                            </b-row>
58
59
60
61
62
                        </b-card-body>
                    </b-col>
                </b-row>
            </b-card>
        </Draggable>
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
        <hr/>
        <div>
            <b-button-toolbar justify>
                <b-button-group class="mx-auto">
                    <b-button variant="outline-danger">
                        <font-awesome-icon :icon="['far', 'trash-alt']"></font-awesome-icon>
                        Liste löschen
                    </b-button>
                    <b-button variant="outline-primary">Testen</b-button>
                    <b-button variant="outline-success">
                        <font-awesome-icon :icon="['far', 'paper-plane']"></font-awesome-icon>
                        Anwenden
                    </b-button>
                </b-button-group>
            </b-button-toolbar>
        </div>
janis.streib's avatar
janis.streib committed
79
80
81
82
83
84
85
86
        <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"
                  @ready="modalReady()"
        ></DBEditor>
87
88
89
90
91
    </div>
</template>

<script>
    import Draggable from 'vuedraggable';
janis.streib's avatar
janis.streib committed
92
    import DBEditor from "./DBEditor";
93
    import TransactionUtil from '@/util/transactionutil';
janis.streib's avatar
janis.streib committed
94
    import Vue from 'vue'
95
96
97

    export default {
        name: "TransactionList",
janis.streib's avatar
janis.streib committed
98
        components: {Draggable, DBEditor},
99
100
        methods: {
            function2variant: TransactionUtil.function2variant,
janis.streib's avatar
janis.streib committed
101
102
            function2text: TransactionUtil.function2text,
            editElement(element) {
janis.streib's avatar
janis.streib committed
103
                this.should_edit = this.edit_elem != element
janis.streib's avatar
janis.streib committed
104
                this.edit_elem = element
gj4210's avatar
gj4210 committed
105
                if (!this.should_edit) {
janis.streib's avatar
janis.streib committed
106
107
                    this.$bvModal.show('ta-edit')
                }
janis.streib's avatar
janis.streib committed
108
109
            },
            modalReady() {
gj4210's avatar
gj4210 committed
110
                if (this.should_edit && this.edit_elem != null) {
janis.streib's avatar
janis.streib committed
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
                    this.should_edit = false
                    let self = this
                    Vue.nextTick(function () {
                        self.$bvModal.show('ta-edit')
                    })
                }
            }
        },
        data() {
            return {
                edit_elem: {
                    object_fq_name: null,
                    object_function: 'dummy',
                    uuid: 'dummy',
                    parameters: {new: {}, old: {}}
                },
                should_edit: false
            }
129
130
131
132
133
134
135
136
137
138
        }
    }
</script>

<style scoped>
    .element-number {
        height: 100%;
        border-radius: 0;
        font-size: 100%;
    }
janis.streib's avatar
janis.streib committed
139
</style>