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

(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/FormElement.vue (-196 / +185 lines)
Lines 1-202 Link Here
1
<template>
1
<template>
2
    <template v-if="display">
2
    <label
3
        <label
3
        v-if="attr.label"
4
            v-if="attr.label"
4
        :for="getElementId"
5
            :for="getElementId"
5
        :class="{ required: attr.required }"
6
            :class="{ required: attr.required }"
6
        :style="{ ...attr.style }"
7
            :style="{ ...attr.style }"
7
        >{{ attr.label }}:</label
8
            >{{ attr.label }}:</label
8
    >
9
    <template v-if="attr.type == 'number'">
10
        <InputNumber
11
            :id="getElementId"
12
            v-model="resource[attr.name]"
13
            :placeholder="attr.placeholder || attr.label"
14
            :required="attr.required ? true : false"
15
            :size="attr.size"
16
            :maxlength="attr.maxlength"
17
            :disabled="disabled"
18
            @update:modelValue="checkForInputError()"
19
        />
20
    </template>
21
    <template v-else-if="attr.type == 'text'">
22
        <InputText
23
            :id="getElementId"
24
            v-model="resource[attr.name]"
25
            :placeholder="attr.placeholder || attr.label"
26
            :required="attr.required ? true : false"
27
            :disabled="disabled"
28
            @update:modelValue="checkForInputError()"
29
        />
30
    </template>
31
    <template v-else-if="attr.type == 'textarea'">
32
        <TextArea
33
            :id="getElementId"
34
            v-model="resource[attr.name]"
35
            :rows="attr.textAreaRows"
36
            :cols="attr.textAreaCols"
37
            :placeholder="attr.placeholder || attr.label"
38
            :required="attr.required ? true : false"
39
            :disabled="disabled"
40
            @update:modelValue="checkForInputError()"
41
        />
42
    </template>
43
    <template v-else-if="attr.type == 'checkbox'">
44
        <InputCheckbox
45
            :id="getElementId"
46
            type="checkbox"
47
            v-model="resource[attr.name]"
48
            :changeMethod="
49
                attr.onChange && attr.onChange.bind(this, resource)
50
            "
51
            :disabled="disabled"
52
        />
53
    </template>
54
    <template v-else-if="attr.type == 'radio'">
55
        <template
56
            v-for="(option, index) in attr.options"
57
            :key="`radio-option-${index}`"
9
        >
58
        >
10
        <template v-if="attr.type == 'number'">
59
            <label
11
            <InputNumber
60
                v-if="option.description"
12
                :id="getElementId"
61
                :for="attr.name + '_' + option.value"
13
                v-model="resource[attr.name]"
62
                >{{ option.description }}:
14
                :placeholder="attr.placeholder || attr.label"
15
                :required="attr.required ? true : false"
16
                :size="attr.size"
17
                :maxlength="attr.maxlength"
18
                :disabled="disabled"
19
                @update:modelValue="checkForInputError()"
20
            />
21
        </template>
22
        <template v-else-if="attr.type == 'text'">
23
            <InputText
24
                :id="getElementId"
25
                v-model="resource[attr.name]"
26
                :placeholder="attr.placeholder || attr.label"
27
                :required="attr.required ? true : false"
28
                :disabled="disabled"
29
                @update:modelValue="checkForInputError()"
30
            />
31
        </template>
32
        <template v-else-if="attr.type == 'textarea'">
33
            <TextArea
34
                :id="getElementId"
35
                v-model="resource[attr.name]"
36
                :rows="attr.textAreaRows"
37
                :cols="attr.textAreaCols"
38
                :placeholder="attr.placeholder || attr.label"
39
                :required="attr.required ? true : false"
40
                :disabled="disabled"
41
                @update:modelValue="checkForInputError()"
42
            />
43
        </template>
44
        <template v-else-if="attr.type == 'checkbox'">
45
            <InputCheckbox
46
                :id="getElementId"
47
                type="checkbox"
48
                v-model="resource[attr.name]"
49
                :changeMethod="
50
                    attr.onChange && attr.onChange.bind(this, resource)
51
                "
52
                :disabled="disabled"
53
            />
54
        </template>
55
        <template v-else-if="attr.type == 'radio'">
56
            <template
57
                v-for="(option, index) in attr.options"
58
                :key="`radio-option-${index}`"
59
            >
60
                <label
61
                    v-if="option.description"
62
                    :for="attr.name + '_' + option.value"
63
                    >{{ option.description }}:
64
                    <InputRadio
65
                        :name="attr.name"
66
                        :id="attr.name + '_' + option.value"
67
                        :value="option.value"
68
                        :checked="
69
                            (!Object.keys(resource).includes(attr.name) &&
70
                                attr.default == option.value) ||
71
                            (Object.keys(resource).includes(attr.name) &&
72
                                option.value == resource[attr.name])
73
                        "
74
                        v-model="resource[attr.name]"
75
                        @change="
76
                            attr.onChange && attr.onChange.bind(this, resource)
77
                        "
78
                    />
79
                </label>
80
            </template>
81
        </template>
82
        <template v-else-if="attr.type == 'boolean'">
83
            <label class="radio" :for="getElementId + '_yes'"
84
                >{{ $__("Yes") }}:
85
                <InputRadio
63
                <InputRadio
86
                    type="radio"
87
                    :name="attr.name"
64
                    :name="attr.name"
88
                    :id="attr.name + '_yes'"
65
                    :id="attr.name + '_' + option.value"
89
                    :value="true"
66
                    :value="option.value"
90
                    :checked="resource[attr.name] == true"
67
                    :checked="
68
                        (!Object.keys(resource).includes(attr.name) &&
69
                            attr.default == option.value) ||
70
                        (Object.keys(resource).includes(attr.name) &&
71
                            option.value == resource[attr.name])
72
                    "
91
                    v-model="resource[attr.name]"
73
                    v-model="resource[attr.name]"
74
                    @change="
75
                        attr.onChange && attr.onChange.bind(this, resource)
76
                    "
92
                />
77
                />
93
            </label>
78
            </label>
94
            <label class="radio" :for="getElementId + '_no'"
95
                >{{ $__("No") }}:
96
                <InputRadio
97
                    type="radio"
98
                    :name="attr.name"
99
                    :id="attr.name + '_no'"
100
                    :checked="resource[attr.name] == false"
101
                    :value="false"
102
                    v-model="resource[attr.name]"
103
                />
104
            </label>
105
        </template>
106
        <template v-else-if="attr.type == 'select'">
107
            <v-select
108
                :id="getElementId"
109
                v-model="resource[attr.name]"
110
                :label="attr.selectLabel"
111
                :reduce="av => selectRequiredKey(av)"
112
                :options="selectOptions"
113
                :required="!resource[attr.name] && attr.required"
114
                :disabled="disabled"
115
                :multiple="attr.allowMultipleChoices"
116
                @option:selected="attr.onSelected && attr.onSelected(resource)"
117
            >
118
                <template v-if="attr.required" #search="{ attributes, events }">
119
                    <input
120
                        :required="!resource[attr.name]"
121
                        class="vs__search"
122
                        v-bind="attributes"
123
                        v-on="events"
124
                    />
125
                </template>
126
            </v-select>
127
        </template>
128
        <template v-else-if="attr.type == 'vendor'">
129
            <component
130
                :is="requiredComponent"
131
                :id="getElementId"
132
                v-bind="getComponentProps()"
133
                v-on="getEventHandlers()"
134
                v-model="resource[attr.name]"
135
            ></component>
136
        </template>
79
        </template>
137
        <template v-else-if="attr.type == 'date'">
80
    </template>
138
            <component
81
    <template v-else-if="attr.type == 'boolean'">
139
                :is="requiredComponent"
82
        <label class="radio" :for="getElementId + '_yes'"
140
                :id="getElementId"
83
            >{{ $__("Yes") }}:
141
                v-bind="getComponentProps()"
84
            <InputRadio
142
                v-on="getEventHandlers()"
85
                type="radio"
86
                :name="attr.name"
87
                :id="attr.name + '_yes'"
88
                :value="true"
89
                :checked="resource[attr.name] == true"
143
                v-model="resource[attr.name]"
90
                v-model="resource[attr.name]"
144
            ></component>
91
            />
145
        </template>
92
        </label>
146
        <template v-else-if="attr.type == 'component' && attr.componentPath">
93
        <label class="radio" :for="getElementId + '_no'"
147
            <component
94
            >{{ $__("No") }}:
148
                v-if="isVModelRequired(attr.componentPath)"
95
            <InputRadio
149
                :is="requiredComponent"
96
                type="radio"
150
                v-bind="getComponentProps()"
97
                :name="attr.name"
98
                :id="attr.name + '_no'"
99
                :checked="resource[attr.name] == false"
100
                :value="false"
151
                v-model="resource[attr.name]"
101
                v-model="resource[attr.name]"
152
                v-on="getEventHandlers()"
102
            />
153
            ></component>
103
        </label>
154
            <component
104
    </template>
155
                v-else
105
    <template v-else-if="attr.type == 'select'">
156
                :is="requiredComponent"
106
        <v-select
157
                v-bind="getComponentProps()"
107
            :id="getElementId"
158
                v-on="getEventHandlers()"
108
            v-model="resource[attr.name]"
159
            ></component>
109
            :label="attr.selectLabel"
160
        </template>
110
            :reduce="av => selectRequiredKey(av)"
161
        <template
111
            :options="selectOptions"
162
            v-else-if="attr.type == 'relationshipWidget' && attr.componentProps"
112
            :required="!resource[attr.name] && attr.required"
113
            :disabled="disabled"
114
            :multiple="attr.allowMultipleChoices"
115
            @option:selected="attr.onSelected && attr.onSelected(resource)"
163
        >
116
        >
164
            <component
117
            <template v-if="attr.required" #search="{ attributes, events }">
165
                :is="requiredComponent"
118
                <input
166
                :title="attr.group ? null : attr.label"
119
                    :required="!resource[attr.name]"
167
                :apiClient="attr.apiClient"
120
                    class="vs__search"
168
                :name="attr.name"
121
                    v-bind="attributes"
169
                v-bind="getComponentProps()"
122
                    v-on="events"
170
                v-on="getEventHandlers()"
123
                />
171
            ></component>
124
            </template>
172
        </template>
125
        </v-select>
173
        <template v-else-if="attr.type == 'relationshipSelect'">
126
    </template>
174
            <FormRelationshipSelect
127
    <template v-else-if="attr.type == 'vendor'">
175
                v-bind="attr"
128
        <component
176
                :resource="resource"
129
            :is="requiredComponent"
177
            ></FormRelationshipSelect>
130
            :id="getElementId"
178
        </template>
131
            v-bind="getComponentProps()"
179
        <template v-else-if="attr.type == 'additional_fields'">
132
            v-on="getEventHandlers()"
180
            <AdditionalFieldsEntry
133
            v-model="resource[attr.name]"
181
                :resource="resource"
134
        ></component>
182
                :additional_field_values="resource.extended_attributes"
135
    </template>
183
                :extended_attributes_resource_type="
136
    <template v-else-if="attr.type == 'date'">
184
                    attr.extended_attributes_resource_type
137
        <component
185
                "
138
            :is="requiredComponent"
186
                @additional-fields-changed="additionalFieldsChanged"
139
            :id="getElementId"
187
            ></AdditionalFieldsEntry>
140
            v-bind="getComponentProps()"
188
        </template>
141
            v-on="getEventHandlers()"
189
        <template v-else>
142
            v-model="resource[attr.name]"
190
            <span>{{
143
        ></component>
191
                $__("Programming error: unknown type %s").format(attr.type)
144
    </template>
192
            }}</span>
145
    <template v-else-if="attr.type == 'component' && attr.componentPath">
193
        </template>
146
        <component
194
        <ToolTip v-if="attr.toolTip" :toolTip="attr.toolTip"></ToolTip>
147
            v-if="isVModelRequired(attr.componentPath)"
195
        <span v-if="attr.required" class="required">{{ $__("Required") }}</span>
148
            :is="requiredComponent"
196
        <span style="margin-left: 5px" class="error" v-if="fieldInputError">
149
            v-bind="getComponentProps()"
197
            {{ attr.formErrorMessage }}
150
            v-model="resource[attr.name]"
198
        </span>
151
            v-on="getEventHandlers()"
152
        ></component>
153
        <component
154
            v-else
155
            :is="requiredComponent"
156
            v-bind="getComponentProps()"
157
            v-on="getEventHandlers()"
158
        ></component>
159
    </template>
160
    <template
161
        v-else-if="attr.type == 'relationshipWidget' && attr.componentProps"
162
    >
163
        <component
164
            :is="requiredComponent"
165
            :title="attr.group ? null : attr.label"
166
            :apiClient="attr.apiClient"
167
            :name="attr.name"
168
            v-bind="getComponentProps()"
169
            v-on="getEventHandlers()"
170
        ></component>
199
    </template>
171
    </template>
172
    <template v-else-if="attr.type == 'relationshipSelect'">
173
        <FormRelationshipSelect
174
            v-bind="attr"
175
            :resource="resource"
176
        ></FormRelationshipSelect>
177
    </template>
178
    <template v-else-if="attr.type == 'additional_fields'">
179
        <AdditionalFieldsEntry
180
            :resource="resource"
181
            :additional_field_values="resource.extended_attributes"
182
            :extended_attributes_resource_type="
183
                attr.extended_attributes_resource_type
184
            "
185
            @additional-fields-changed="additionalFieldsChanged"
186
        ></AdditionalFieldsEntry>
187
    </template>
188
    <template v-else>
189
        <span>{{
190
            $__("Programming error: unknown type %s").format(attr.type)
191
        }}</span>
192
    </template>
193
    <ToolTip v-if="attr.toolTip" :toolTip="attr.toolTip"></ToolTip>
194
    <span v-if="attr.required" class="required">{{ $__("Required") }}</span>
195
    <span style="margin-left: 5px" class="error" v-if="fieldInputError">
196
        {{ attr.formErrorMessage }}
197
    </span>
200
</template>
198
</template>
201
199
202
<script>
200
<script>
Lines 277-290 export default { Link Here
277
                return disabledAttr || false;
275
                return disabledAttr || false;
278
            }
276
            }
279
        });
277
        });
280
        const display = computed(() => {
281
            const displayAttr = props.display ?? props.attr.display ?? true;
282
            if (typeof displayAttr === "function") {
283
                return displayAttr(props.resource);
284
            } else {
285
                return displayAttr || false;
286
            }
287
        });
288
        const fieldInputError = ref(false);
278
        const fieldInputError = ref(false);
289
        const checkForInputError = () => {
279
        const checkForInputError = () => {
290
            if (props.attr.formErrorHandler) {
280
            if (props.attr.formErrorHandler) {
Lines 303-309 export default { Link Here
303
            requiredComponent,
293
            requiredComponent,
304
            selectOptions,
294
            selectOptions,
305
            disabled,
295
            disabled,
306
            display,
307
            fieldInputError,
296
            fieldInputError,
308
            checkForInputError,
297
            checkForInputError,
309
        };
298
        };
(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/SIP2/SIP2AccountResource.vue (-2 / +1 lines)
Lines 422-429 export default { Link Here
422
                relationshipAPIClient: APIClient.cash.cash_registers,
422
                relationshipAPIClient: APIClient.cash.cash_registers,
423
                relationshipOptionLabelAttr: "name", // attr of the related resource used for display
423
                relationshipOptionLabelAttr: "name", // attr of the related resource used for display
424
                relationshipRequiredKey: "cash_register_id",
424
                relationshipRequiredKey: "cash_register_id",
425
                hideIn: ["List"],
425
                hideIn: () => sysprefs.value.UseCashRegisters !== "0" ? ["List"] : ["Form", "Show", "List"],
426
                display: account => sysprefs.value.UseCashRegisters == 1,
427
                group: "Details",
426
                group: "Details",
428
                toolTip: __(
427
                toolTip: __(
429
                    "Only required if system preference UseCashRegisters is enabled"
428
                    "Only required if system preference UseCashRegisters is enabled"
(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/composables/base-resource.js (-4 / +3 lines)
Lines 1-7 Link Here
1
import { computed, inject, ref } from "vue";
1
import { computed, inject, ref } from "vue";
2
import { useRoute, useRouter } from "vue-router";
2
import { useRoute, useRouter } from "vue-router";
3
import { build_url } from "../composables/datatables";
3
import { build_url } from "../composables/datatables";
4
import { isRef } from "vue";
5
import { storeToRefs } from "pinia";
4
import { storeToRefs } from "pinia";
6
import {
5
import {
7
    $__,
6
    $__,
Lines 419-428 export function useBaseResource(resourceConfig) { Link Here
419
                        relationshipField.relationshipName = ra.name;
418
                        relationshipField.relationshipName = ra.name;
420
                    });
419
                    });
421
                }
420
                }
422
                if (ra.hideIn && !ra.hideIn.includes(component)) {
421
                const shouldFieldBeHidden = ra.hideIn && typeof ra.hideIn === "function" ? ra.hideIn() : ra.hideIn
422
                if (shouldFieldBeHidden && !shouldFieldBeHidden.includes(component)) {
423
                    return [...acc, ra];
423
                    return [...acc, ra];
424
                }
424
                }
425
                if (ra.hideIn && ra.hideIn.includes(component)) {
425
                if (shouldFieldBeHidden && shouldFieldBeHidden.includes(component)) {
426
                    return acc;
426
                    return acc;
427
                }
427
                }
428
                return [...acc, ra];
428
                return [...acc, ra];
429
- 

Return to bug 41214