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

(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/AdditionalFieldsDisplay.vue (+37 lines)
Line 0 Link Here
1
<template>
2
    <fieldset
3
        v-if="additional_field_values.length"
4
        class="rows"
5
        id="additional_fields"
6
    >
7
        <legend>{{ $__("Additional fields") }}</legend>
8
        <ol>
9
            <li v-for="additional_field_value in additional_field_values">
10
                <label
11
                    :for="`additional_field_` + additional_field_value.field_id"
12
                >
13
                    {{ additional_field_value.field_label }}:
14
                </label>
15
                <span> {{ additional_field_value.value_str }} </span>
16
            </li>
17
        </ol>
18
    </fieldset>
19
</template>
20
21
<script>
22
import { inject } from "vue"
23
import { APIClient } from "../fetch/api-client.js"
24
25
export default {
26
    data() {
27
        return {
28
            fields_to_display: [],
29
        }
30
    },
31
    name: "AdditionalFieldsDisplay",
32
    props: {
33
        tablename: String,
34
        additional_field_values: Array,
35
    },
36
}
37
</script>
(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/AdditionalFieldsEntry.vue (+271 lines)
Line 0 Link Here
1
<template>
2
    <fieldset
3
        v-if="available_fields.length"
4
        class="rows"
5
        id="additional_fields"
6
    >
7
        <legend>{{ $__("Additional fields") }}</legend>
8
        <ol>
9
            <template v-for="available_field in available_fields">
10
                <template
11
                    v-if="
12
                        available_field.authorised_value_category &&
13
                        !available_field.repeatable
14
                    "
15
                >
16
                    <li>
17
                        <label :for="`additional_field_` + available_field.id"
18
                            >{{ available_field.name }}:
19
                        </label>
20
                        <v-select
21
                            :id="`additional_field_` + available_field.id"
22
                            :name="available_field.name"
23
                            v-model="
24
                                current_additional_fields_values[
25
                                    available_field.id
26
                                ]
27
                            "
28
                            :options="
29
                                av_options[
30
                                    available_field.authorised_value_category
31
                                ]
32
                            "
33
                        />
34
                    </li>
35
                </template>
36
                <template
37
                    v-if="
38
                        available_field.authorised_value_category &&
39
                        available_field.repeatable
40
                    "
41
                >
42
                    <li>
43
                        <label :for="`additional_field_` + available_field.id"
44
                            >{{ available_field.name }}:
45
                        </label>
46
                        <v-select
47
                            :id="`additional_field_` + available_field.id"
48
                            :name="available_field.name"
49
                            :multiple="available_field.repeatable"
50
                            v-model="
51
                                current_additional_fields_values[
52
                                    available_field.id
53
                                ]
54
                            "
55
                            :options="
56
                                av_options[
57
                                    available_field.authorised_value_category
58
                                ]
59
                            "
60
                        />
61
                    </li>
62
                </template>
63
64
                <template v-if="!available_field.authorised_value_category">
65
                    <li
66
                        v-for="current in current_additional_fields_values[
67
                            available_field.id
68
                        ]"
69
                    >
70
                        <label :for="`additional_field_` + available_field.id"
71
                            >{{ available_field.name }}:
72
                        </label>
73
                        <input type="text" v-model="current.value" />
74
                        <a
75
                            href="#"
76
                            class="clear_attribute"
77
                            @click="clearField(current, $event)"
78
                        >
79
                            <i class="fa fa-fw fa-trash-can"></i>
80
                            {{ $__("Clear") }}
81
                        </a>
82
                        <template v-if="available_field.repeatable">
83
                            <a
84
                                href="#"
85
                                class="clone_attribute"
86
                                @click="
87
                                    cloneField(available_field, current, $event)
88
                                "
89
                            >
90
                                <i class="fa fa-fw fa-plus"></i>
91
                                {{ $__("New") }}
92
                            </a>
93
                        </template>
94
                    </li>
95
                </template>
96
            </template>
97
        </ol>
98
    </fieldset>
99
</template>
100
101
<script>
102
import { inject } from "vue"
103
import { APIClient } from "../fetch/api-client.js"
104
105
export default {
106
    data() {
107
        return {
108
            available_fields: [],
109
            av_options: [],
110
            current_additional_fields_values: {},
111
        }
112
    },
113
    beforeCreate() {
114
        const client = APIClient.additional_fields
115
        client.additional_fields.getAll(this.tablename).then(
116
            available_fields => {
117
                this.available_fields = available_fields
118
                this.initialized = true
119
            },
120
            error => {}
121
        )
122
    },
123
    watch: {
124
        current_additional_fields_values: {
125
            deep: true,
126
            handler(current_additional_fields_values) {
127
                this.updateParentAdditionalFieldValues(
128
                    current_additional_fields_values
129
                )
130
            },
131
        },
132
        available_fields: function (available_fields) {
133
            if (available_fields) {
134
                const client_av = APIClient.authorised_values
135
                let av_cat_array = available_fields
136
                    .map(field => field.authorised_value_category)
137
                    .filter(field => field)
138
139
                client_av.values
140
                    .getCategoriesWithValues([
141
                        ...new Set(
142
                            av_cat_array.map(av_cat => '"' + av_cat + '"')
143
                        ),
144
                    ]) // unique
145
                    .then(av_categories => {
146
                        av_cat_array.forEach(av_cat => {
147
                            let av_match = av_categories.find(
148
                                element => element.category_name == av_cat
149
                            )
150
                            this.av_options[av_cat] =
151
                                av_match.authorised_values.map(av => ({
152
                                    value: av.value,
153
                                    label: av.description,
154
                                }))
155
                        })
156
157
                        // Iterate on available fields
158
                        available_fields.forEach(available_field => {
159
                            // Initialize current field as empty array
160
                            this.current_additional_fields_values[
161
                                available_field.id
162
                            ] = []
163
164
                            // Grab all existing field values of this field
165
                            let existing_field_values =
166
                                this.additional_field_values.filter(
167
                                    afv =>
168
                                        afv.field_id == available_field.id &&
169
                                        afv.value
170
                                )
171
172
                            // If there are existing field values for this field, add them to current_additional_fields_values
173
                            if (existing_field_values.length) {
174
                                existing_field_values.forEach(
175
                                    existing_field_value => {
176
                                        let label = ""
177
                                        if (
178
                                            available_field.authorised_value_category
179
                                        ) {
180
                                            let av_value = this.av_options[
181
                                                available_field
182
                                                    .authorised_value_category
183
                                            ].filter(
184
                                                av_option =>
185
                                                    av_option.value ==
186
                                                    existing_field_value.value
187
                                            )
188
                                            label = av_value.length
189
                                                ? av_value[0].label
190
                                                : ""
191
                                        }
192
                                        this.current_additional_fields_values[
193
                                            existing_field_value.field_id
194
                                        ].push({
195
                                            value: existing_field_value.value,
196
                                            label: label,
197
                                        })
198
                                    }
199
                                )
200
201
                                // Otherwise add them as empty if not AV field
202
                            } else {
203
                                if (
204
                                    !available_field.authorised_value_category
205
                                ) {
206
                                    this.current_additional_fields_values[
207
                                        available_field.id
208
                                    ] = [
209
                                        {
210
                                            label: "",
211
                                            value: "",
212
                                        },
213
                                    ]
214
                                }
215
                            }
216
                        })
217
                    })
218
            }
219
        },
220
    },
221
    methods: {
222
        clearField: function (current_field, event) {
223
            event.preventDefault()
224
            current_field.value = ""
225
        },
226
        cloneField: function (available_field, current, event) {
227
            event.preventDefault()
228
            this.current_additional_fields_values[available_field.id].push({
229
                value: current.value,
230
                label: available_field.name,
231
            })
232
        },
233
        updateParentAdditionalFieldValues: function (
234
            current_additional_fields_values
235
        ) {
236
            let updatedAdditionalFields = []
237
            Object.keys(current_additional_fields_values).forEach(field_id => {
238
                if (
239
                    !Array.isArray(
240
                        current_additional_fields_values[field_id]
241
                    ) &&
242
                    current_additional_fields_values[field_id]
243
                ) {
244
                    current_additional_fields_values[field_id] = [
245
                        current_additional_fields_values[field_id],
246
                    ]
247
                }
248
                if (current_additional_fields_values[field_id]) {
249
                    let new_extended_attributes =
250
                        current_additional_fields_values[field_id].map(
251
                            value => ({
252
                                field_id: field_id,
253
                                value: value.value,
254
                            })
255
                        )
256
                    updatedAdditionalFields = updatedAdditionalFields.concat(
257
                        new_extended_attributes
258
                    )
259
                }
260
            })
261
262
            this.$emit("additional-fields-changed", updatedAdditionalFields)
263
        },
264
    },
265
    name: "AdditionalFieldsEntry",
266
    props: {
267
        tablename: String,
268
        additional_field_values: Array,
269
    },
270
}
271
</script>
(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/additional-fields-api-client.js (+20 lines)
Line 0 Link Here
1
import HttpClient from "./http-client";
2
3
export class AdditionalFieldsAPIClient extends HttpClient {
4
    constructor() {
5
        super({
6
            baseURL: "/api/v1/additional_fields",
7
        });
8
    }
9
10
    get additional_fields() {
11
        return {
12
            getAll: tablename =>
13
                this.get({
14
                    endpoint: "?tablename=" + tablename,
15
                }),
16
        };
17
    }
18
}
19
20
export default AdditionalFieldsAPIClient;
(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/api-client.js (-1 / +2 lines)
Lines 1-6 Link Here
1
import ERMAPIClient from "./erm-api-client";
1
import ERMAPIClient from "./erm-api-client";
2
import PatronAPIClient from "./patron-api-client";
2
import PatronAPIClient from "./patron-api-client";
3
import AcquisitionAPIClient from "./acquisition-api-client";
3
import AcquisitionAPIClient from "./acquisition-api-client";
4
import AdditionalFieldsAPIClient from "./additional-fields-api-client";
4
import AVAPIClient from "./authorised-values-api-client";
5
import AVAPIClient from "./authorised-values-api-client";
5
import ItemAPIClient from "./item-api-client";
6
import ItemAPIClient from "./item-api-client";
6
import SysprefAPIClient from "./system-preferences-api-client";
7
import SysprefAPIClient from "./system-preferences-api-client";
Lines 10-15 export const APIClient = { Link Here
10
    erm: new ERMAPIClient(),
11
    erm: new ERMAPIClient(),
11
    patron: new PatronAPIClient(),
12
    patron: new PatronAPIClient(),
12
    acquisition: new AcquisitionAPIClient(),
13
    acquisition: new AcquisitionAPIClient(),
14
    additional_fields: new AdditionalFieldsAPIClient(),
13
    authorised_values: new AVAPIClient(),
15
    authorised_values: new AVAPIClient(),
14
    item: new ItemAPIClient(),
16
    item: new ItemAPIClient(),
15
    sysprefs: new SysprefAPIClient(),
17
    sysprefs: new SysprefAPIClient(),
16
- 

Return to bug 35287