|
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> |