165 lines
3.9 KiB
JavaScript
165 lines
3.9 KiB
JavaScript
export default {
|
|
props: ['state', 'update', 'index', 'item'],
|
|
computed: {
|
|
isDirty() {
|
|
return (
|
|
this.state.version &&
|
|
this.state.unsavedInvalidItems.size > 0 &&
|
|
this.state.unsavedItems.has(this.itemId)
|
|
);
|
|
},
|
|
isInvalid() {
|
|
if (this.deleted) {
|
|
return false;
|
|
}
|
|
if (this.libelle) {
|
|
return !this.libelle.trim();
|
|
}
|
|
return true;
|
|
},
|
|
itemId() {
|
|
return this.item.id || this.clientId;
|
|
},
|
|
changeLog() {
|
|
return [this.itemId, !this.isInvalid];
|
|
},
|
|
itemClassName() {
|
|
const classNames = [`draggable-item-${this.index}`];
|
|
if (this.isHeaderSection) {
|
|
classNames.push('type-header-section');
|
|
}
|
|
if (this.isDirty) {
|
|
if (this.isInvalid) {
|
|
classNames.push('invalid');
|
|
} else {
|
|
classNames.push('dirty');
|
|
}
|
|
}
|
|
return classNames.join(' ');
|
|
},
|
|
isDropDown() {
|
|
return [
|
|
'drop_down_list',
|
|
'multiple_drop_down_list',
|
|
'linked_drop_down_list'
|
|
].includes(this.typeChamp);
|
|
},
|
|
isFile() {
|
|
return this.typeChamp === 'piece_justificative';
|
|
},
|
|
isCarte() {
|
|
return this.typeChamp === 'carte';
|
|
},
|
|
isExplication() {
|
|
return this.typeChamp === 'explication';
|
|
},
|
|
isHeaderSection() {
|
|
return this.typeChamp === 'header_section';
|
|
},
|
|
isRepetition() {
|
|
return this.typeChamp === 'repetition';
|
|
},
|
|
options() {
|
|
const options = this.item.options || {};
|
|
for (let key of Object.keys(options)) {
|
|
options[key] = castBoolean(options[key]);
|
|
}
|
|
return options;
|
|
},
|
|
attribute() {
|
|
if (this.state.isAnnotation) {
|
|
return 'types_de_champ_private_attributes';
|
|
} else {
|
|
return 'types_de_champ_attributes';
|
|
}
|
|
},
|
|
typesDeChamp() {
|
|
return this.item.types_de_champ;
|
|
},
|
|
typesDeChampOptions() {
|
|
return this.state.typesDeChampOptions.filter(
|
|
([, typeChamp]) => !EXCLUDE_FROM_REPETITION.includes(typeChamp)
|
|
);
|
|
},
|
|
stateForRepetition() {
|
|
return Object.assign({}, this.state, {
|
|
typesDeChamp: this.typesDeChamp,
|
|
typesDeChampOptions: this.typesDeChampOptions,
|
|
prefix: `${this.state.prefix}[${this.attribute}][${this.index}]`
|
|
});
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
typeChamp: this.item.type_champ,
|
|
libelle: this.item.libelle,
|
|
mandatory: this.item.mandatory,
|
|
description: this.item.description,
|
|
dropDownList: this.item.drop_down_list && this.item.drop_down_list.value,
|
|
deleted: false,
|
|
clientId: `id-${clientIds++}`
|
|
};
|
|
},
|
|
created() {
|
|
for (let path of PATHS_TO_WATCH) {
|
|
this.$watch(path, () => this.update(this.changeLog));
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.isInvalid) {
|
|
this.update(this.changeLog, false);
|
|
}
|
|
},
|
|
methods: {
|
|
removeChamp(item) {
|
|
if (item.id) {
|
|
this.deleted = true;
|
|
} else {
|
|
const index = this.state.typesDeChamp.indexOf(item);
|
|
this.state.typesDeChamp.splice(index, 1);
|
|
this.update([this.itemId, true]);
|
|
}
|
|
},
|
|
nameFor(name) {
|
|
return `${this.state.prefix}[${this.attribute}][${this.index}][${name}]`;
|
|
},
|
|
elementIdFor(name) {
|
|
const prefix = this.state.prefix.replace(/\[/g, '_').replace(/\]/g, '');
|
|
return `${prefix}_${this.attribute}_${this.index}_${name}`;
|
|
},
|
|
addChamp() {
|
|
this.typesDeChamp.push({
|
|
type_champ: 'text',
|
|
drop_down_list: {},
|
|
types_de_champ: [],
|
|
options: {}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
const EXCLUDE_FROM_REPETITION = [
|
|
'carte',
|
|
'dossier_link',
|
|
'repetition',
|
|
'siret'
|
|
];
|
|
|
|
const PATHS_TO_WATCH = [
|
|
'typeChamp',
|
|
'libelle',
|
|
'mandatory',
|
|
'description',
|
|
'dropDownList',
|
|
'options.quartiers_prioritaires',
|
|
'options.cadastres',
|
|
'options.parcelles_agricoles',
|
|
'index',
|
|
'deleted'
|
|
];
|
|
|
|
function castBoolean(value) {
|
|
return value && value != 0;
|
|
}
|
|
|
|
let clientIds = 0;
|