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

(-)a/.gitignore (+1 lines)
Lines 13-18 koha-tmpl/opac-tmpl/bootstrap/css/print.css Link Here
13
koha-tmpl/opac-tmpl/bootstrap/css/print-rtl.css
13
koha-tmpl/opac-tmpl/bootstrap/css/print-rtl.css
14
koha-tmpl/opac-tmpl/bootstrap/css/sco.css
14
koha-tmpl/opac-tmpl/bootstrap/css/sco.css
15
koha-tmpl/opac-tmpl/bootstrap/css/sco-rtl.css
15
koha-tmpl/opac-tmpl/bootstrap/css/sco-rtl.css
16
koha-tmpl/opac-tmpl/bootstrap/js/vue/dist/
16
17
17
koha-tmpl/intranet-tmpl/prog/css/maps/
18
koha-tmpl/intranet-tmpl/prog/css/maps/
18
koha-tmpl/intranet-tmpl/prog/css/bookings.css
19
koha-tmpl/intranet-tmpl/prog/css/bookings.css
(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/PatronSelfRenewal/PatronSelfRenewal.vue (+167 lines)
Line 0 Link Here
1
<template>
2
    <div
3
        id="patronSelfRenewal"
4
        class="modal modal-full"
5
        tabindex="-1"
6
        role="dialog"
7
        aria-labelledby="patronSelfRenewal"
8
        aria-hidden="true"
9
    >
10
        <div class="modal-dialog modal-xl">
11
            <div v-if="initialized" class="modal-content">
12
                <div class="modal-header">
13
                    <h1 class="modal-title">
14
                        {{ $__("Patron self-renewal") }}
15
                    </h1>
16
                    <button
17
                        type="button"
18
                        class="btn-close"
19
                        data-bs-dismiss="modal"
20
                        aria-label="Close"
21
                    ></button>
22
                </div>
23
                <div class="modal-body">
24
                    <VerificationChecks
25
                        v-if="activeStep === 'verification'"
26
                        :renewalSettings="renewalSettings"
27
                        @verification-successful="onVerificationSuccess"
28
                    />
29
                    <VerificationChecks
30
                        v-if="activeStep === 'confirmation'"
31
                        :informationMessage="
32
                            $__('Are you sure you want to renew your account?')
33
                        "
34
                        :renewalSettings="renewalSettings"
35
                        @verification-successful="submitRenewal"
36
                    />
37
                    <div v-if="activeStep === 'detailsCheck'">
38
                        <legend>
39
                            {{ $__("Confirm your account details") }}
40
                        </legend>
41
                        <div class="detail_confirmation">
42
                            <span>{{
43
                                $__(
44
                                    "You need to confirm your personal details to proceed with your account renewal."
45
                                )
46
                            }}</span>
47
                            <button
48
                                class="btn btn-default"
49
                                @click="proceedToDetailsVerification()"
50
                            >
51
                                {{ $__("Continue") }}
52
                            </button>
53
                        </div>
54
                    </div>
55
                </div>
56
                <div class="modal-footer">
57
                    <button
58
                        type="button"
59
                        class="btn btn-default cancel"
60
                        data-bs-dismiss="modal"
61
                    >
62
                        {{ $__("Close") }}
63
                    </button>
64
                </div>
65
            </div>
66
        </div>
67
    </div>
68
</template>
69
70
<script>
71
import { onBeforeMount, ref } from "vue";
72
import { APIClient } from "../../../fetch/api-client.js";
73
import VerificationChecks from "./VerificationChecks.vue";
74
import { $__ } from "@koha-vue/i18n";
75
76
export default {
77
    components: { VerificationChecks },
78
    props: {
79
        patron: String,
80
    },
81
    setup(props) {
82
        const initialized = ref(false);
83
        const activeStep = ref(null);
84
        const renewalSettings = ref({
85
            defaultErrorMessage: $__(
86
                "You are not able to self-renew with the provided information. Please visit your library to proceed with your renewal."
87
            ),
88
        });
89
90
        onBeforeMount(() => {
91
            const client = APIClient.patron;
92
            client.self_renewal.start(props.patron).then(
93
                response => {
94
                    renewalSettings.value = {
95
                        ...renewalSettings.value,
96
                        ...response.self_renewal_settings,
97
                    };
98
                    activeStep.value = response.self_renewal_settings
99
                        .self_renewal_information_message
100
                        ? "verification"
101
                        : response.self_renewal_settings.opac_patron_details ===
102
                            "1"
103
                          ? "detailsCheck"
104
                          : "confirmation";
105
                    initialized.value = true;
106
                },
107
                error => {}
108
            );
109
        });
110
111
        const proceedToDetailsVerification = () => {
112
            window.location.href =
113
                "/cgi-bin/koha/opac-memberentry.pl?self_renewal=1";
114
        };
115
116
        const onVerificationSuccess = () => {
117
            if (renewalSettings.value.opac_patron_details === "1") {
118
                activeStep.value = "detailsCheck";
119
            } else {
120
                activeStep.value = "confirmation";
121
            }
122
        };
123
124
        const submitRenewal = () => {
125
            const client = APIClient.patron;
126
            client.self_renewal.submit(props.patron, {}).then(
127
                response => {
128
                    let newLocation =
129
                        "/cgi-bin/koha/opac-user.pl?self_renewal_success=" +
130
                        response.expiry_date;
131
                    if (response.confirmation_sent) {
132
                        newLocation += "&confirmation_sent=1";
133
                    }
134
                    document.location = newLocation;
135
                },
136
                error => {
137
                    document.location =
138
                        "/cgi-bin/koha/opac-user.pl?self_renewal_success=0";
139
                }
140
            );
141
        };
142
143
        return {
144
            initialized,
145
            activeStep,
146
            renewalSettings,
147
            onVerificationSuccess,
148
            proceedToDetailsVerification,
149
            submitRenewal,
150
        };
151
    },
152
};
153
</script>
154
155
<style scoped>
156
.detail_confirmation {
157
    display: flex;
158
    flex-direction: column;
159
    gap: 1em;
160
}
161
.detail_confirmation button {
162
    display: flex;
163
    flex-direction: column;
164
    gap: 1em;
165
    width: 7em;
166
}
167
</style>
(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/PatronSelfRenewal/VerificationChecks.vue (+73 lines)
Line 0 Link Here
1
<template>
2
    <fieldset class="rows" v-if="!verificationFailure">
3
        <span class="verification_question">{{ verificationCheck }}</span>
4
        <div class="verification_actions">
5
            <button class="btn btn-success" @click="verificationPassed()">
6
                {{ $__("Yes") }}
7
            </button>
8
            <button class="btn btn-default" @click="verificationFailed()">
9
                {{ $__("No") }}
10
            </button>
11
        </div>
12
    </fieldset>
13
    <span class="error" v-else>{{ errorMessage }}</span>
14
</template>
15
16
<script>
17
import { computed, ref } from "vue";
18
import { $__ } from "@koha-vue/i18n";
19
20
export default {
21
    props: {
22
        renewalSettings: Object,
23
        informationMessage: String,
24
    },
25
    emits: ["verification-successful"],
26
    setup(props, { emit }) {
27
        const verificationFailure = ref(false);
28
        const verificationCheck = ref(
29
            props.informationMessage ||
30
                props.renewalSettings.self_renewal_information_message
31
        );
32
33
        const verificationPassed = () => {
34
            emit("verification-successful");
35
        };
36
        const verificationFailed = () => {
37
            verificationFailure.value = true;
38
        };
39
40
        const errorMessage = computed(() => {
41
            const { self_renewal_failure_message, defaultErrorMessage } =
42
                props.renewalSettings;
43
            return self_renewal_failure_message || defaultErrorMessage;
44
        });
45
46
        return {
47
            verificationCheck,
48
            verificationPassed,
49
            verificationFailed,
50
            verificationFailure,
51
            errorMessage,
52
        };
53
    },
54
};
55
</script>
56
57
<style scoped>
58
.rows {
59
    display: flex;
60
    flex-direction: column;
61
}
62
.verification_actions {
63
    display: flex;
64
    gap: 1em;
65
}
66
.verification_actions button {
67
    width: 5em;
68
}
69
.verification_question {
70
    margin-bottom: 2em;
71
    font-size: 100%;
72
}
73
</style>
(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts (+13 lines)
Lines 72-77 export const componentRegistry: Map<string, WebComponentDynamicImport> = Link Here
72
                },
72
                },
73
            },
73
            },
74
        ],
74
        ],
75
        [
76
            "patron-self-renewal",
77
            {
78
                importFn: async () => {
79
                    const module = await import(
80
                        /* webpackChunkName: "patron-self-renewal" */
81
                        "../components/Islands/PatronSelfRenewal/PatronSelfRenewal.vue"
82
                    );
83
                    return module.default;
84
                },
85
                config: {},
86
            },
87
        ],
75
    ]);
88
    ]);
76
89
77
/**
90
/**
(-)a/rspack.config.js (-29 / +39 lines)
Lines 3-10 const { VueLoaderPlugin } = require("vue-loader"); Link Here
3
const path = require("path");
3
const path = require("path");
4
const rspack = require("@rspack/core");
4
const rspack = require("@rspack/core");
5
5
6
module.exports = [
6
const islandsExport = application => {
7
    {
7
    const vueDir =
8
        application === "intranet"
9
            ? "intranet-tmpl/prog"
10
            : "opac-tmpl/bootstrap";
11
12
    return {
8
        resolve: {
13
        resolve: {
9
            alias: {
14
            alias: {
10
                "@fetch": path.resolve(
15
                "@fetch": path.resolve(
Lines 15-42 module.exports = [ Link Here
15
                    __dirname,
20
                    __dirname,
16
                    "koha-tmpl/intranet-tmpl/prog/js/vue"
21
                    "koha-tmpl/intranet-tmpl/prog/js/vue"
17
                ),
22
                ),
18
                "@cypress": path.resolve(__dirname, "t/cypress"),
19
            },
23
            },
20
        },
24
        },
25
        experiments: {
26
            outputModule: true,
27
        },
21
        entry: {
28
        entry: {
22
            erm: "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/erm.ts",
23
            preservation:
24
                "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/preservation.ts",
25
            "admin/record_sources":
26
                "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/admin/record_sources.ts",
27
            acquisitions:
28
                "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/acquisitions.ts",
29
            islands: "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts",
29
            islands: "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts",
30
            sip2: "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/sip2.ts",
31
        },
30
        },
32
        output: {
31
        output: {
33
            filename: "[name].js",
32
            filename: "[name].esm.js",
34
            path: path.resolve(
33
            path: path.resolve(__dirname, `koha-tmpl/${vueDir}/js/vue/dist/`),
35
                __dirname,
34
            chunkFilename: "[name].[contenthash].esm.js",
36
                "koha-tmpl/intranet-tmpl/prog/js/vue/dist/"
37
            ),
38
            chunkFilename: "[name].[contenthash].js",
39
            globalObject: "window",
35
            globalObject: "window",
36
            library: {
37
                type: "module",
38
            },
40
        },
39
        },
41
        module: {
40
        module: {
42
            rules: [
41
            rules: [
Lines 46-52 module.exports = [ Link Here
46
                    options: {
45
                    options: {
47
                        experimentalInlineMatchResource: true,
46
                        experimentalInlineMatchResource: true,
48
                    },
47
                    },
49
                    //exclude: [path.resolve(__dirname, "t/cypress/")],
48
                    exclude: [path.resolve(__dirname, "t/cypress/")],
50
                },
49
                },
51
                {
50
                {
52
                    test: /\.ts$/,
51
                    test: /\.ts$/,
Lines 88-94 module.exports = [ Link Here
88
            "datatables.net-buttons/js/buttons.print": "DataTable",
87
            "datatables.net-buttons/js/buttons.print": "DataTable",
89
            "datatables.net-buttons/js/buttons.colVis": "DataTable",
88
            "datatables.net-buttons/js/buttons.colVis": "DataTable",
90
        },
89
        },
91
    },
90
    };
91
};
92
93
module.exports = [
92
    {
94
    {
93
        resolve: {
95
        resolve: {
94
            alias: {
96
            alias: {
Lines 96-120 module.exports = [ Link Here
96
                    __dirname,
98
                    __dirname,
97
                    "koha-tmpl/intranet-tmpl/prog/js/fetch"
99
                    "koha-tmpl/intranet-tmpl/prog/js/fetch"
98
                ),
100
                ),
101
                "@koha-vue": path.resolve(
102
                    __dirname,
103
                    "koha-tmpl/intranet-tmpl/prog/js/vue"
104
                ),
105
                "@cypress": path.resolve(__dirname, "t/cypress"),
99
            },
106
            },
100
        },
107
        },
101
        experiments: {
102
            outputModule: true,
103
        },
104
        entry: {
108
        entry: {
109
            erm: "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/erm.ts",
110
            preservation:
111
                "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/preservation.ts",
112
            "admin/record_sources":
113
                "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/admin/record_sources.ts",
114
            acquisitions:
115
                "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/acquisitions.ts",
105
            islands: "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts",
116
            islands: "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts",
117
            sip2: "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/sip2.ts",
106
        },
118
        },
107
        output: {
119
        output: {
108
            filename: "[name].esm.js",
120
            filename: "[name].js",
109
            path: path.resolve(
121
            path: path.resolve(
110
                __dirname,
122
                __dirname,
111
                "koha-tmpl/intranet-tmpl/prog/js/vue/dist/"
123
                "koha-tmpl/intranet-tmpl/prog/js/vue/dist/"
112
            ),
124
            ),
113
            chunkFilename: "[name].[contenthash].esm.js",
125
            chunkFilename: "[name].[contenthash].js",
114
            globalObject: "window",
126
            globalObject: "window",
115
            library: {
116
                type: "module",
117
            },
118
        },
127
        },
119
        module: {
128
        module: {
120
            rules: [
129
            rules: [
Lines 124-130 module.exports = [ Link Here
124
                    options: {
133
                    options: {
125
                        experimentalInlineMatchResource: true,
134
                        experimentalInlineMatchResource: true,
126
                    },
135
                    },
127
                    exclude: [path.resolve(__dirname, "t/cypress/")],
136
                    //exclude: [path.resolve(__dirname, "t/cypress/")],
128
                },
137
                },
129
                {
138
                {
130
                    test: /\.ts$/,
139
                    test: /\.ts$/,
Lines 167-172 module.exports = [ Link Here
167
            "datatables.net-buttons/js/buttons.colVis": "DataTable",
176
            "datatables.net-buttons/js/buttons.colVis": "DataTable",
168
        },
177
        },
169
    },
178
    },
179
    islandsExport("intranet"),
180
    islandsExport("opac"),
170
    {
181
    {
171
        entry: {
182
        entry: {
172
            "api-client.cjs":
183
            "api-client.cjs":
173
- 

Return to bug 26355