demarches-normaliennes/app/javascript/new_design/administrateur/DraggableItem.js
2019-02-05 16:48:26 +01:00

163 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',
types_de_champ: []
});
}
}
};
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;