https://altitudescooperantes.fr/tools/bazar/presentation/javascripts/components/PopupEntryField.js

1import EntryField from './EntryField.js'
2
3export default {
4  props: [
5    'entry',
6    'prop',
7    'withlabel',
8    'oneline',
9    'imagewidth',
10    'imageheight',
11    'imagemethod',
12    'imagetoken',
13  ],
14  components: { EntryField },
15  computed: {
16    renderViaEntryField() {
17      switch (this.type) {
18        case 'listedatedeb':
19        case 'liste':
20        case 'listefiche':
21        case 'checkbox':
22        case 'checkboxfiche':
23        case 'radio':
24        case 'radiofiche':
25        case 'listefiches':
26        case 'listefichesliees':
27        case 'tags':
28          return !this.displayOnOneLine || Array.isArray(this.value)
29        default:
30          return false
31      }
32    },
33    displayLabel() {
34      return [0, '0', false, 'false'].indexOf(this.withlabel) == -1
35    },
36    displayOnOneLine() {
37      return [1, '1', true, 'true'].indexOf(this.oneline) > -1
38    },
39    value() {
40      const value = this.entry[this.prop] || ''
41      switch (this.type) {
42        case 'listedatedeb':
43        case 'liste':
44        case 'listefiche':
45        case 'checkbox':
46        case 'checkboxfiche':
47        case 'radio':
48        case 'radiofiche':
49        case 'listefiches':
50        case 'listefichesliees':
51        case 'tags': {
52          const values = value.split(',').map((v) => this.field.options[v])
53          return values.length == 0
54            ? ''
55            : values.length == 1
56              ? values[0]
57              : values
58        }
59        case 'email':
60          return '' // security
61        case 'link':
62          return value
63            ? `<a href="${encodeURI(value)}" class="newtab">${value}</a>`
64            : ''
65        default:
66          return value
67      }
68    },
69    field() {
70      return this.$root.fieldInfo(this.prop)
71    },
72    type() {
73      return this.field.type
74    },
75    label() {
76      return this.field.label || ''
77    },
78  },
79  template: `
80    <div v-if="renderViaEntryField && displayLabel && value" v-bind="$attrs">
81      <div><strong>{{ label }} :</strong></div>
82      <EntryField :entry="entry" :prop="prop" v-bind="$attrs"></EntryField>
83    </div>
84    <EntryField v-else-if="renderViaEntryField" :entry="entry" :prop="prop" v-bind="$attrs"></EntryField>
85    <h3 v-else-if="type == 'titre' && value" v-html="value" v-bind="$attrs"></h3>
86    <img
87      v-else-if="type == 'image' && value" class="popup-visual" 
88      v-bind="$attrs"
89      :src="$root.urlImage(entry,prop,imagewidth,imageheight,imagemethod)"
90      @error="$root.urlImageResizedOnError(entry,prop,imagewidth,imageheight,imagemethod,imagetoken)">
91    </img>
92    <div v-else-if="displayLabel && displayOnOneLine && value" v-bind="$attrs">
93      <strong>{{ label }} :</strong>&nbsp;

94      <span v-html="value"></span>
95    </div>
96    <div v-else-if="displayLabel && value" v-bind="$attrs">
97      <div><strong>{{ label }} :</strong></div>
98      <div v-html="value"></div>
99    </div>
100    <div v-else-if="value" v-html="value" v-bind="$attrs"></div>
101  `,
102}