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

(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/AdditionalFieldsDisplay.vue (-21 / +76 lines)
Lines 1-24 Link Here
1
<template>
1
<template>
2
    <fieldset
2
    <template v-if="additional_field_values.length">
3
        v-if="additional_field_values.length"
3
        <li class="additional-fields-header">
4
        class="rows"
4
            <label></label>
5
        id="additional_fields"
5
            <h3>{{ $__("Additional fields") }}</h3>
6
    >
6
        </li>
7
        <legend>{{ $__("Additional fields") }}</legend>
7
        <li
8
        <ol>
8
            v-for="additional_field_value in additional_field_values"
9
            <li
9
            v-bind:key="additional_field_value.id"
10
                v-for="additional_field_value in additional_field_values"
10
        >
11
                v-bind:key="additional_field_value.id"
11
            <label :for="`additional_field_` + additional_field_value.field_id">
12
            >
12
                {{ additional_field_value.field_label }}:
13
                <label
13
            </label>
14
                    :for="`additional_field_` + additional_field_value.field_id"
14
            <template v-if="isMultipleValues(additional_field_value.value_str)">
15
                >
15
                <div class="additional-field-values">
16
                    {{ additional_field_value.field_label }}:
16
                    <div
17
                </label>
17
                        v-for="(value, index) in splitValues(
18
                <span> {{ additional_field_value.value_str }} </span>
18
                            additional_field_value.value_str
19
            </li>
19
                        )"
20
        </ol>
20
                        :key="index"
21
    </fieldset>
21
                        class="value-item"
22
                    >
23
                        {{ value }}
24
                    </div>
25
                </div>
26
            </template>
27
            <span v-else> {{ additional_field_value.value_str }} </span>
28
        </li>
29
    </template>
22
</template>
30
</template>
23
31
24
<script>
32
<script>
Lines 27-34 export default { Link Here
27
    setup() {
35
    setup() {
28
        const fields_to_display = ref([]);
36
        const fields_to_display = ref([]);
29
37
38
        const isMultipleValues = value_str => {
39
            return value_str && value_str.includes(",");
40
        };
41
42
        const splitValues = value_str => {
43
            if (!value_str) return [];
44
            return value_str
45
                .split(",")
46
                .map(v => v.trim())
47
                .filter(v => v);
48
        };
49
30
        return {
50
        return {
31
            fields_to_display,
51
            fields_to_display,
52
            isMultipleValues,
53
            splitValues,
32
        };
54
        };
33
    },
55
    },
34
    name: "AdditionalFieldsDisplay",
56
    name: "AdditionalFieldsDisplay",
Lines 38-40 export default { Link Here
38
    },
60
    },
39
};
61
};
40
</script>
62
</script>
41
- 
63
64
<style scoped>
65
/* Header for additional fields section */
66
.additional-fields-header {
67
    border-top: 1px solid #ddd;
68
    margin-top: 1em;
69
    padding-top: 1em;
70
}
71
72
.additional-fields-header h3 {
73
    margin: 0;
74
    font-size: 110%;
75
    font-weight: bold;
76
    color: #696969;
77
}
78
79
.additional-fields-header label {
80
    /* Empty label for alignment with other fields */
81
    width: 10rem;
82
}
83
84
/* Multiple values display aligned with single values */
85
.additional-field-values {
86
    display: inline-block;
87
    margin: 0;
88
    padding: 0;
89
}
90
91
.value-item {
92
    margin: 0;
93
    padding: 0;
94
    line-height: 1.5;
95
}
96
</style>

Return to bug 41151