Newer
Older
<table
class="ui very basic table"
aria-describedby="Table des données du signalement"
>
<tr v-if="featureType">
<strong> Type de signalement </strong>
<FeatureTypeLink :feature-type="featureType" />
v-for="(field, index) in featureData"
<strong :class="{ required: field.is_mandatory }">
{{ field.label }}
</strong>
<strong class="ui form">
<span

Timothee P
committed
v-if="fastEditionMode && canEditFeature && extra_forms.length > 0"
>
<FeatureExtraForm
:field="getExtraForm(field)"
/>
</span>
v-else-if="field.field_type === 'boolean'"
:class="[
'icon',
field.value ? 'olive check' : 'grey times',
]"
aria-hidden="true"
/>
<span v-else-if="field.field_type === 'multi_choices_list'">
{{ field.value.join(', ') }}
</span>
{{ field.value && field.value.label ? field.value.label : field.value }}
<td>{{ currentFeature.properties.display_creator }}</td>
v-if="currentFeature.properties.status"

Timothee P
committed
v-if="fastEditionMode && canEditFeature && form"
:status="form.status.value"
class="inline"
/>
<span v-else>
<td v-if="currentFeature.properties.created_on">
{{ currentFeature.properties.created_on | formatDate }}
<td v-if="currentFeature.properties.updated_on">
{{ currentFeature.properties.updated_on | formatDate }}
</td>
</tr>
</tbody>
</table>
<h3>Liaison entre signalements</h3>
<table
class="ui very basic table"
aria-describedby="Table des signalements lié à ce signalement"
>
<tbody>
<tr
v-for="(link, index) in linked_features"
:key="link.feature_to.title + index"
>
<th
v-if="link.feature_to.feature_type_slug"
scope="row"
>
</th>
<td
v-if="link.feature_to.feature_type_slug"
>

Timothee P
committed
<a
class="pointer"
@click="toFeature(link)"
>{{ link.feature_to.title }} </a>
({{ link.feature_to.display_creator }} -
{{ link.feature_to.created_on }})
</td>
</tr>
<tr v-if="linked_features.length === 0">
<td>
<em>
Aucune liaison associée au signalement.
</em>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import { mapState } from 'vuex';
import FeatureTypeLink from '@/components/FeatureType/FeatureTypeLink';
import FeatureEditStatusField from '@/components/Feature/FeatureEditStatusField';
import FeatureExtraForm from '@/components/Feature/Edit/FeatureExtraForm';
import { statusChoices, formatStringDate } from '@/utils';

Timothee P
committed
filters: {
formatDate(value) {
return formatStringDate(value);
},
},
components: {
FeatureEditStatusField,
},

Timothee P
committed
props: {
featureType: {
type: Object,
default: () => {},
},
fastEditionMode: {
type: Boolean,
default: false,

Timothee P
committed
},
canEditFeature: {
type: Boolean,
default: false,
},

Timothee P
committed
},
computed: {
...mapState('feature', [
'currentFeature',
'linked_features',
switch (this.currentFeature.properties.status.value || this.currentFeature.properties.status) {
case 'archived':
return 'grey archive';
case 'pending':
return 'teal hourglass outline';
case 'published':
return 'olive check';
case 'draft':
return 'orange pencil alternate';
default:
return '';
}
},
statusLabel() {
if (this.currentFeature.properties.status.label) {
return this.currentFeature.properties.status.label;
}
const status = statusChoices.find(
(el) => el.value === this.currentFeature.properties.status
);
return status ? status.name : '';
},
featureData() {
if (this.currentFeature.properties && this.featureType) {
return this.featureType.customfield_set.map((xtraForm) => {
return {
...xtraForm,
value: this.currentFeature.properties[xtraForm.label]
};
});
}
return [];
}

Timothee P
committed
toFeature(link) {
this.$emit('tofeature', {
name: 'details-signalement',
params: {
slug_type_signal: link.feature_to.feature_type_slug,
slug_signal: link.feature_to.feature_id,
},
});
},
getExtraForm(field) {
return this.extra_forms.find(exF => exF.label === field.label);
<style lang="less" scoped>
td {
strong.required:after {
margin: -0.2em 0em 0em 0.2em;
content: '*';
color: #ee2e24;
}
}