View | Details | Raw Unified | Return to bug 37605
Collapse All | Expand All

(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue (-127 / +195 lines)
Lines 1-88 Link Here
1
<template>
1
<template>
2
    <div class="alert alert-info" v-if="message" v-html="message"></div>
2
    <div>
3
    <div class="alert alert-warning" v-if="error" v-html="error"></div>
3
        <!-- Confirmation Modal -->
4
    <div class="alert alert-warning modal" v-if="warning">
4
        <div
5
        <h1 v-html="warning"></h1>
5
            v-if="confirmation"
6
        <button
6
            class="modal show"
7
            id="close_modal"
7
            tabindex="-1"
8
            class="btn btn-default approve"
8
            role="dialog"
9
            @click="removeMessages"
9
            style="display: block"
10
        >
10
        >
11
            <i class="fa fa-fw fa-check"></i>
11
            <div class="modal-dialog modal-dialog-centered" role="document">
12
            {{ $__("Close") }}
12
                <div class="modal-content">
13
        </button>
13
                    <div class="modal-header">
14
    </div>
14
                        <h4
15
    <div class="modal_centered" v-if="confirmation">
15
                            class="modal-title"
16
        <div class="alert alert-warning confirmation">
16
                            v-html="confirmation.title"
17
            <h1 v-html="confirmation.title"></h1>
17
                        ></h4>
18
            <p v-html="confirmation.message"></p>
18
                        <button
19
            <div class="inputs" v-if="confirmation.inputs">
19
                            type="button"
20
                <form ref="confirmationform">
20
                            class="close"
21
                    <div
21
                            aria-label="Close"
22
                        class="row"
22
                            @click="removeConfirmationMessages"
23
                        v-for="input in confirmation.inputs"
23
                        >
24
                        v-bind:key="input.id"
24
                            <span aria-hidden="true">&times;</span>
25
                    >
25
                        </button>
26
                        <div class="col-md-6">
26
                    </div>
27
                            <label
27
                    <div class="modal-body">
28
                                :for="`confirmation_input_${input.id}`"
28
                        <p v-html="confirmation.message"></p>
29
                                v-bind:class="{ required: input.required }"
29
                        <div v-if="confirmation.inputs" class="form-group">
30
                                >{{ input.label }}:</label
30
                            <form ref="confirmationform">
31
                            >
31
                                <div
32
                                    class="form-row"
33
                                    v-for="input in confirmation.inputs"
34
                                    :key="input.id"
35
                                >
36
                                    <div class="col-md-6">
37
                                        <label
38
                                            :for="`confirmation_input_${input.id}`"
39
                                            :class="{
40
                                                required: input.required,
41
                                            }"
42
                                        >
43
                                            {{ input.label }}:
44
                                        </label>
45
                                    </div>
46
                                    <div class="col-md-6">
47
                                        <flat-pickr
48
                                            v-if="input.type == 'Date'"
49
                                            :id="`confirmation_input_${input.id}`"
50
                                            v-model="input.value"
51
                                            :required="input.required"
52
                                            :config="fp_config"
53
                                        />
54
                                        <input
55
                                            v-if="input.type == 'Text'"
56
                                            type="text"
57
                                            :id="`confirmation_input_${input.id}`"
58
                                            v-model="input.value"
59
                                            :required="input.required"
60
                                            class="form-control"
61
                                        />
62
                                    </div>
63
                                </div>
64
                            </form>
32
                        </div>
65
                        </div>
33
                        <div class="col-md-6">
66
                    </div>
34
                            <flat-pickr
67
                    <div class="modal-footer">
35
                                v-if="input.type == 'Date'"
68
                        <button
36
                                :id="`confirmation_input_${input.id}`"
69
                            v-if="accept_callback"
37
                                v-model="input.value"
70
                            id="accept_modal"
38
                                :required="input.required"
71
                            class="btn btn-success"
39
                                :config="fp_config"
72
                            @click="submit"
40
                            />
73
                        >
41
                            <input
74
                            <i class="fa fa-fw fa-check"></i>
42
                                v-if="input.type == 'Text'"
75
                            <span v-html="confirmation.accept_label"></span>
43
                                :id="`confirmation_input_${input.id}`"
76
                        </button>
44
                                v-model="input.value"
77
                        <button
45
                                :required="input.required"
78
                            id="close_modal"
46
                            />
79
                            class="btn btn-danger"
80
                            @click="removeConfirmationMessages"
81
                        >
82
                            <i class="fa fa-fw fa-remove"></i>
83
                            <span v-html="confirmation.cancel_label"></span>
84
                        </button>
85
                    </div>
86
                </div>
87
            </div>
88
        </div>
89
90
        <!-- Submitting Modal -->
91
        <div
92
            v-if="is_submitting"
93
            class="modal show"
94
            tabindex="-1"
95
            role="dialog"
96
            style="display: block"
97
        >
98
            <div class="modal-dialog modal-dialog-centered" role="document">
99
                <div class="modal-content">
100
                    <div class="modal-header">
101
                        <h4
102
                            class="modal-title"
103
                            v-html="confirmation.title"
104
                        ></h4>
105
                        <button
106
                            type="button"
107
                            class="close"
108
                            aria-label="Close"
109
                            @click="removeConfirmationMessages"
110
                        >
111
                            <span aria-hidden="true">&times;</span>
112
                        </button>
113
                    </div>
114
                    <div class="modal-body text-center">
115
                        <div class="spinner-border text-primary" role="status">
116
                            <span class="sr-only">{{
117
                                $__("Submitting...")
118
                            }}</span>
47
                        </div>
119
                        </div>
48
                    </div>
120
                    </div>
49
                </form>
121
                    <div class="modal-footer">
122
                        <button
123
                            v-if="accept_callback"
124
                            id="accept_modal"
125
                            class="btn btn-success"
126
                            @click="submit"
127
                        >
128
                            <i class="fa fa-fw fa-check"></i>
129
                            <span v-html="confirmation.accept_label"></span>
130
                        </button>
131
                        <button
132
                            id="close_modal"
133
                            class="btn btn-danger"
134
                            @click="removeConfirmationMessages"
135
                        >
136
                            <i class="fa fa-fw fa-remove"></i>
137
                            <span v-html="confirmation.cancel_label"></span>
138
                        </button>
139
                    </div>
140
                </div>
50
            </div>
141
            </div>
51
            <button
52
                v-if="accept_callback"
53
                id="accept_modal"
54
                class="btn btn-default approve"
55
                @click="submit"
56
            >
57
                <i class="fa fa-fw fa-check"></i>
58
                <span v-html="confirmation.accept_label"></span>
59
            </button>
60
            <button
61
                id="close_modal"
62
                class="btn btn-default deny"
63
                @click="removeConfirmationMessages"
64
            >
65
                <i class="fa fa-fw fa-remove"></i>
66
                <span v-html="confirmation.cancel_label"></span>
67
            </button>
68
        </div>
142
        </div>
69
    </div>
70
    <!-- Must be styled differently -->
71
143
72
    <div class="modal_centered" v-if="is_submitting">
144
        <!-- Loading Modal -->
73
        <div class="spinner alert alert-warning">
145
        <div
74
            {{ $__("Submitting...") }}
146
            v-if="is_loading"
147
            class="modal show"
148
            tabindex="-1"
149
            role="dialog"
150
            style="display: block"
151
        >
152
            <div class="modal-dialog modal-dialog-centered" role="document">
153
                <div class="modal-content">
154
                    <div class="modal-header">
155
                        <h4
156
                            class="modal-title"
157
                            v-html="confirmation.title"
158
                        ></h4>
159
                        <button
160
                            type="button"
161
                            class="close"
162
                            aria-label="Close"
163
                            @click="removeConfirmationMessages"
164
                        >
165
                            <span aria-hidden="true">&times;</span>
166
                        </button>
167
                    </div>
168
                    <div class="modal-body text-center">
169
                        <div class="spinner-border text-info" role="status">
170
                            <span class="sr-only">{{ $__("Loading...") }}</span>
171
                        </div>
172
                    </div>
173
                    <div class="modal-footer">
174
                        <button
175
                            v-if="accept_callback"
176
                            id="accept_modal"
177
                            class="btn btn-success"
178
                            @click="submit"
179
                        >
180
                            <i class="fa fa-fw fa-check"></i>
181
                            <span v-html="confirmation.accept_label"></span>
182
                        </button>
183
                        <button
184
                            id="close_modal"
185
                            class="btn btn-danger"
186
                            @click="removeConfirmationMessages"
187
                        >
188
                            <i class="fa fa-fw fa-remove"></i>
189
                            <span v-html="confirmation.cancel_label"></span>
190
                        </button>
191
                    </div>
192
                </div>
193
            </div>
75
        </div>
194
        </div>
76
    </div>
195
    </div>
77
    <div class="modal_centered" v-if="is_loading">
78
        <div class="spinner alert alert-info">{{ $__("Loading...") }}</div>
79
    </div>
80
</template>
196
</template>
81
197
82
<script>
198
<script>
83
import { inject } from "vue"
199
import { inject } from "vue"
84
import { storeToRefs } from "pinia"
200
import { storeToRefs } from "pinia"
85
import flatPickr from "vue-flatpickr-component"
201
import flatPickr from "vue-flatpickr-component"
202
86
export default {
203
export default {
87
    data() {
204
    data() {
88
        return {
205
        return {
Lines 90-96 export default { Link Here
90
        }
207
        }
91
    },
208
    },
92
    methods: {
209
    methods: {
93
        submit: function (e) {
210
        submit() {
94
            if (
211
            if (
95
                this.confirmation.inputs &&
212
                this.confirmation.inputs &&
96
                this.confirmation.inputs.filter(
213
                this.confirmation.inputs.filter(
Lines 136-200 export default { Link Here
136
</script>
253
</script>
137
254
138
<style scoped>
255
<style scoped>
139
.modal {
256
.modal.show {
140
    position: fixed;
257
    display: block !important;
141
    z-index: 9998;
258
    background-color: rgba(0, 0, 0, 0.5);
142
    display: table;
143
    transition: opacity 0.3s ease;
144
    margin: auto;
145
    padding: 20px 30px;
146
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
147
    transition: all 0.3s ease;
148
}
149
#close_modal {
150
    cursor: pointer;
151
}
152
153
.modal_centered {
154
    position: fixed;
155
    z-index: 9998;
156
    display: table;
157
    transition: opacity 0.3s ease;
158
    left: 0px;
159
    top: 0px;
160
    width: 100%;
161
    height: 100%;
162
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
163
}
164
.spinner {
165
    position: absolute;
166
    top: 50%;
167
    left: 40%;
168
    width: 10%;
169
}
170
171
.confirmation {
172
    position: absolute;
173
    top: 25%;
174
    left: 40%;
175
176
    width: 50%;
177
    min-height: 10%;
178
    margin: auto;
179
    align-items: center;
180
    justify-content: center;
181
}
182
.confirmation .inputs {
183
    margin-top: 0.4em;
184
}
185
.confirmation .inputs input,
186
:deep(.flatpickr-input) {
187
    width: auto;
188
    margin: 0px;
189
    float: left;
190
}
259
}
191
260
192
:deep(.flatpickr-input) {
261
.spinner-border {
193
    padding-left: 20px;
262
    width: 3rem;
263
    height: 3rem;
194
}
264
}
195
265
196
.confirmation .inputs label {
266
.modal-footer .btn {
197
    padding: 0.4em;
267
    margin-right: 0.5rem;
198
    float: right;
199
}
268
}
200
</style>
269
</style>
201
- 

Return to bug 37605