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

(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue (-72 / +78 lines)
Lines 1-70 Link Here
1
<template>
1
<template>
2
    <div class="alert alert-info" v-if="message" v-html="message"></div>
2
    <div class="alert alert-info" v-if="message" v-html="message"></div>
3
    <div class="alert alert-warning" v-if="error" v-html="error"></div>
3
    <div class="alert alert-warning" v-if="error" v-html="error"></div>
4
    <div class="alert alert-warning modal" v-if="warning">
4
    <div class="modal" role="dialog" v-if="warning">
5
        <h1 v-html="warning"></h1>
5
        <div class="modal-dialog">
6
        <button
6
            <div class="modal-content modal-lg">
7
            id="close_modal"
7
                <div class="modal-body alert-warning">
8
            class="btn btn-default approve"
8
                    <h1 v-html="warning"></h1>
9
            @click="removeMessages"
9
                    <button
10
        >
10
                        id="close_modal"
11
            <i class="fa fa-fw fa-check"></i>
11
                        class="btn btn-default deny cancel"
12
            {{ $__("Close") }}
12
                        type="button"
13
        </button>
13
                        data-bs-dismiss="modal"
14
    </div>
14
                        @click="removeMessages"
15
    <div class="modal_centered" v-if="confirmation">
16
        <div class="alert alert-warning confirmation">
17
            <h1 v-html="confirmation.title"></h1>
18
            <p v-html="confirmation.message"></p>
19
            <div class="inputs" v-if="confirmation.inputs">
20
                <form ref="confirmationform">
21
                    <div
22
                        class="row"
23
                        v-for="input in confirmation.inputs"
24
                        v-bind:key="input.id"
25
                    >
15
                    >
26
                        <div class="col-md-6">
16
                        <i class="fa fa-fw fa-check"></i>
27
                            <label
17
                        {{ $__("Close") }}
28
                                :for="`confirmation_input_${input.id}`"
18
                    </button>
29
                                v-bind:class="{ required: input.required }"
19
                </div>
30
                                >{{ input.label }}:</label
20
            </div>
21
        </div>
22
    </div>
23
    <div class="confirmation modal" role="dialog" v-if="confirmation">
24
        <div class="modal-dialog">
25
            <div class="modal-content modal-lg">
26
                <div class="modal-header alert-warning">
27
                    <h1 v-html="confirmation.title"></h1>
28
                </div>
29
                <div class="modal-body">
30
                    <p v-html="confirmation.message"></p>
31
                    <div class="inputs" v-if="confirmation.inputs">
32
                        <form ref="confirmationform">
33
                            <div
34
                                class="row"
35
                                v-for="input in confirmation.inputs"
36
                                v-bind:key="input.id"
31
                            >
37
                            >
32
                        </div>
38
                                <div class="col-md-6">
33
                        <div class="col-md-6">
39
                                    <label
34
                            <flat-pickr
40
                                        :for="`confirmation_input_${input.id}`"
35
                                v-if="input.type == 'Date'"
41
                                        v-bind:class="{
36
                                :id="`confirmation_input_${input.id}`"
42
                                            required: input.required,
37
                                v-model="input.value"
43
                                        }"
38
                                :required="input.required"
44
                                        >{{ input.label }}:</label
39
                                :config="fp_config"
45
                                    >
40
                            />
46
                                </div>
41
                            <input
47
                                <div class="col-md-6">
42
                                v-if="input.type == 'Text'"
48
                                    <flat-pickr
43
                                :id="`confirmation_input_${input.id}`"
49
                                        v-if="input.type == 'Date'"
44
                                v-model="input.value"
50
                                        :id="`confirmation_input_${input.id}`"
45
                                :required="input.required"
51
                                        v-model="input.value"
46
                            />
52
                                        :required="input.required"
47
                        </div>
53
                                        :config="fp_config"
54
                                    />
55
                                    <input
56
                                        v-if="input.type == 'Text'"
57
                                        :id="`confirmation_input_${input.id}`"
58
                                        v-model="input.value"
59
                                        :required="input.required"
60
                                    />
61
                                </div>
62
                            </div>
63
                        </form>
48
                    </div>
64
                    </div>
49
                </form>
65
                    <button
66
                        v-if="accept_callback"
67
                        id="accept_modal"
68
                        class="btn btn-default approve"
69
                        @click="submit"
70
                    >
71
                        <i class="fa fa-fw fa-check"></i>
72
                        <span v-html="confirmation.accept_label"></span>
73
                    </button>
74
                    <button
75
                        id="close_modal"
76
                        class="btn btn-default deny cancel"
77
                        type="button"
78
                        data-bs-dismiss="modal"
79
                        @click="removeConfirmationMessages"
80
                    >
81
                        <i class="fa fa-fw fa-remove"></i>
82
                        <span v-html="confirmation.cancel_label"></span>
83
                    </button>
84
                </div>
50
            </div>
85
            </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>
86
        </div>
69
    </div>
87
    </div>
70
    <!-- Must be styled differently -->
88
    <!-- Must be styled differently -->
Lines 168-184 export default { Link Here
168
    width: 10%;
186
    width: 10%;
169
}
187
}
170
188
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 {
189
.confirmation .inputs {
183
    margin-top: 0.4em;
190
    margin-top: 0.4em;
184
}
191
}
185
- 

Return to bug 37812