Jquery edit javascript

This commit is contained in:
Romain Neutron
2012-01-20 15:25:07 +01:00
parent d38103d410
commit 22559b0474
3 changed files with 333 additions and 112 deletions

View File

@@ -1,13 +1,21 @@
(function( window ) {
var recordFieldValue = function(meta_id, value, VocabularyId) {
var recordFieldValue = function(meta_id, value) {
if(typeof VocabularyId === 'undefined')
{
VocabularyId = null;
}
this.datas = {meta_id:meta_id, value:value};
this.datas = {
meta_id:meta_id,
value:value,
VocabularyId:VocabularyId
};
var $this = this;
}
};
recordFieldValue.prototype = {
getValue : function() {
@@ -16,6 +24,9 @@
getMetaId : function() {
return this.datas.meta_id;
},
getVocabularyId : function() {
return this.datas.VocabularyId;
},
setValue : function(value) {
this.datas.value = value;
return this;
@@ -27,13 +38,18 @@
}
};
var recordField = function(name, meta_struct_id, options, arrayValues) {
var databoxField = function(name, meta_struct_id, options) {
var defaults = {
name : name,
multi : false,
required : false,
dirty : false
readonly : false,
maxLength : null,
minLength : null,
type : 'string',
separator : null,
vocabularyControl : null,
vocabularyRestricted : false
},
options = (typeof options == 'object') ? options : {};
@@ -42,8 +58,48 @@
throw 'meta_struct_id should be a number';
}
this.name = name;
this.meta_struct_id = meta_struct_id;
this.options = jQuery.extend(defaults, options);
};
databoxField.prototype = {
getMetaStructId : function() {
return this.meta_struct_id;
},
getName : function() {
return this.name;
},
isMulti : function() {
return this.options.multi;
},
isRequired : function() {
return this.options.required;
},
isReadonly : function() {
return this.options.readonly;
},
getMaxLength : function() {
return this.options.maxLength;
},
getMinLength : function() {
return this.options.minLength;
},
getType : function() {
return this.options.type;
},
getSeparator : function() {
return this.options.separator;
}
};
var recordField = function(databoxField, arrayValues) {
this.databoxField = databoxField;
this.options = {
dirty : false
};
this.datas = new Array();
if(typeof arrayValues === 'object')
@@ -85,34 +141,45 @@
}
recordField.prototype = {
getName : function() {
return this.options.name;
return this.databoxField.getName();
},
isMulti : function() {
return this.options.multi;
return this.databoxField.isMulti();
},
isRequired : function() {
return this.options.required;
return this.databoxField.isRequired();
},
isDirty : function() {
return this.options.dirty;
},
addValue : function(value, merge) {
addValue : function(value, merge, VocabularyId) {
if(typeof VocabularyId === 'undefined')
VocabularyId = null;
merge = !!merge;
if(this.databoxField.isReadonly())
{
if(window.console)
console.error('Unable to set a value to a readonly field');
return;
}
if(window.console)
{
console.log('adding value ',value,' ; merge is ',merge);
console.log('adding value ',value,' vocId : ', VocabularyId , ' ; merge is ',merge);
}
if(this.isMulti())
{
if(!this.hasValue(value))
if(!this.hasValue(value, VocabularyId))
{
if(window.console)
{
console.log('adding new multi value ',value);
}
this.datas.push(new recordFieldValue(null, value));
this.datas.push(new recordFieldValue(null, value, VocabularyId));
this.options.dirty = true;
}
}
@@ -125,11 +192,13 @@
console.log('Merging value ',value);
}
this.datas[0].setValue(this.datas[0].getValue() + ' ' + value);
this.datas[0].setVocabularyId(VocabularyId);
this.options.dirty = true;
}
else
{
if(!this.hasValue(value))
if(!this.hasValue(value, VocabularyId))
{
if(this.datas.length === 0)
{
@@ -137,7 +206,7 @@
{
console.log('Adding new value ',value);
}
this.datas.push(new recordFieldValue(null, value));
this.datas.push(new recordFieldValue(null, value, VocabularyId));
}
else
{
@@ -146,6 +215,7 @@
console.log('Updating value ',value);
}
this.datas[0].setValue(value);
this.datas[0].setVocabularyId(VocabularyId);
}
this.options.dirty = true;
}
@@ -154,7 +224,7 @@
return this;
},
hasValue : function(value) {
hasValue : function(value, VocabularyId) {
if(typeof value === 'undefined')
{
@@ -162,15 +232,32 @@
console.error('Trying to check the presence of an undefined value');
}
if(typeof VocabularyId === 'undefined')
VocabularyId = null;
for(d in this.datas)
{
if(this.datas[d].getValue() == value)
if(this.datas[d].getVocabularyId() !== null && VocabularyId !== null)
{
if(this.datas[d].getVocabularyId() === VocabularyId)
return true;
}
else if(this.datas[d].getValue() == value)
{
return true;
}
}
return false;
},
removeValue : function(value) {
if(this.databoxField.isReadonly())
{
if(window.console)
console.error('Unable to set a value to a readonly field');
return;
}
for(d in this.datas)
{
if(this.datas[d].getValue() == value)
@@ -193,6 +280,13 @@
},
empty : function() {
if(this.databoxField.isReadonly())
{
if(window.console)
console.error('Unable to set a value to a readonly field');
return;
}
for(d in this.datas)
{
this.datas[d].remove();
@@ -213,7 +307,9 @@
getValues : function() {
if(!this.isMulti())
{
throw 'This field is not multi, I can not give you multiple values';
}
if(this.isEmpty())
return new Array();
@@ -240,21 +336,40 @@
arrayValues.push(values[v].getValue());
}
return arrayValues.join(' ; ');
return arrayValues.join(' ' + this.databoxField.getSeparator() + ' ');
},
replaceValue : function(search, replace) {
if(this.databoxField.isReadonly())
{
if(window.console)
console.error('Unable to set a value to a readonly field');
return;
}
console.log('Search / Replace');
for(d in this.datas)
{
if(this.datas[d].getVocabularyId() !== null)
{
console.log('value has vocabId, continue;');
continue;
}
var value = this.datas[d].getValue();
var replacedValue = value.replace(search, replace);
if(value === replacedValue)
{
console.log('value', value, ' has not change, continue;');
continue;
}
this.removeValue(value);
if(!this.hasValue(replacedValue))
{
console.log('adding value ', replacedValue);
this.addValue(replacedValue);
}
@@ -271,6 +386,7 @@
window.p4 = window.p4 || {};
window.p4.databoxField = databoxField;
window.p4.recordFieldValue = recordFieldValue;
window.p4.recordField = recordField;

View File

@@ -11,20 +11,29 @@
test("Selection instanciation", function() {
var field = new p4.recordField('Champ', 25);
var DBField = new p4.databoxField('Champ', 25)
var field = new p4.recordField(DBField);
equal( field.isMulti(), false, "Field is not multi" );
equal( field.isRequired(), false, "Field is not required" );
equal( field.isEmpty(), true, "Field is empty" );
var fieldMulti = new p4.recordField('Champ', 25, {multi:true});
var DBFieldMulti = new p4.databoxField('Champ', 25, {multi:true})
var fieldMulti = new p4.recordField(DBFieldMulti);
equal( fieldMulti.isMulti(), true, "Field is multi" );
equal( fieldMulti.isRequired(), false, "Field is not required" );
var fieldRequired = new p4.recordField('Champ', 25, {required:true});
var DBFieldRequired = new p4.databoxField('Champ', 25, {required:true})
var fieldRequired = new p4.recordField(DBFieldRequired);
equal( fieldRequired.isMulti(), false, "Field is not multi" );
equal( fieldRequired.isRequired(), true, "Field is required" );
var fieldMultiRequired = new p4.recordField('Champ', 25, {required:true, multi:true});
var DBFieldRequiredMulti = new p4.databoxField('Champ', 25, {required:true, multi:true})
var fieldMultiRequired = new p4.recordField(DBFieldRequiredMulti);
equal( fieldMultiRequired.isMulti(), true, "Field is not multi" );
equal( fieldMultiRequired.isRequired(), true, "Field is required" );
@@ -42,7 +51,7 @@
new p4.recordFieldValue(1, 'valeur')
];
var field = new p4.recordField('Champ', 25, {}, arrayValues);
var field = new p4.recordField(DBField, arrayValues);
equal( field.isEmpty(), false, "Field is not empty" );
field.empty();

View File

@@ -215,6 +215,39 @@ function editField(evt, meta_struct_id)
var name = p4.edit.T_fields[meta_struct_id].name + (p4.edit.T_fields[meta_struct_id].required ? '<span style="font-weight:bold;font-size:16px;"> * </span>' : '');
$("#idFieldNameEdit", p4.edit.editBox).html(name) ;
if(window.console)
{
console.log(p4.edit.T_fields[meta_struct_id].vocabularyControl, p4.edit.T_fields[meta_struct_id].vocabularyRestricted);
var vocabType = p4.edit.T_fields[meta_struct_id].vocabularyControl;
$('#idEditZTextArea, #EditTextMultiValued').autocomplete({
minLength: 2,
source: function( request, response ) {
console.log(request, response);
$.ajax({
url: '/prod/records/edit/vocabulary/' + vocabType + '/',
dataType: "json",
data: {
sbas_id: p4.edit.sbas_id,
query: request.term
},
success: function( data ) {
response( data.results );
}
});
},
select: function( event, ui ) {
edit_addmval(ui.item.label, ui.item.id);
return false;
}
});
}
if(p4.edit.T_fields[meta_struct_id].explain ||
p4.edit.T_fields[meta_struct_id].maxLength > 0)
{
@@ -319,7 +352,7 @@ function editField(evt, meta_struct_id)
'n':0,
'f':new Array()
}; // n:nbr d'occurences DISTINCTES du mot ; f:flag presence mot dans r
p4.edit.T_mval.push(word);
p4.edit.T_mval.push(values[v]);
}
if(!a['%' + word].f[r])
@@ -330,23 +363,46 @@ function editField(evt, meta_struct_id)
n++;
}
p4.edit.T_mval.sort(SortCompareStrings);
p4.edit.T_mval.sort(SortCompareMetas);
var t = "";
for(var i in p4.edit.T_mval) // pour lire le tableau 'a' dans l'ordre trie par 'p4.edit.T_mval'
{
v = p4.edit.T_mval[i];
if(i>0 && p4.edit.T_mval[i-1]==p4.edit.T_mval[i])
var value = p4.edit.T_mval[i];
var word = value.getValue();
var extra = value.getVocabularyId() ? '(V) ' : '';
if(i>0)
{
if(value.getVocabularyId() !== null && p4.edit.T_mval[i-1].getVocabularyId() == value.getVocabularyId())
{
continue;
}
if(value.getVocabularyId() === null && p4.edit.T_mval[i-1].getVocabularyId() === null)
{
if(p4.edit.T_mval[i-1].getValue() == value.getValue())
{
continue; // on n'accepte pas les doublons
if(a['%'+v].n == n)
}
}
}
if(a['%'+word].n == n)
{
// le mot etait present dans tous les records selectionnes
t += "<div multi=\"0\" onclick=\"edit_clkmval(this, "+i+")\">" + v + "</div>";
t += "<div multi=\"0\" onclick=\"edit_clkmval(this, "+i+")\">"
+ extra
+ '<span class="value" vocabId="' + value.getVocabularyId() + '">'
+ word
+ "</span>"
+"</div>";
}
else
{
// le mot n'etait pas present dans tous les records
t += "<div multi=\"1\" class=\"hetero\" onclick=\"edit_clkmval(this, "+i+")\">" + v + "</div>";
t += "<div multi=\"1\" class=\"hetero\" onclick=\"edit_clkmval(this, "+i+")\">"
+ extra
+ '<span class="value" vocabId="' + value.getVocabularyId() + '">' + word + "</span></div>";
}
}
$('#ZTextMultiValued_values', p4.edit.editBox).html(t);
@@ -375,8 +431,10 @@ function editField(evt, meta_struct_id)
// ---------------------------------------------------------------------------
function edit_clkmval(mvaldiv, ival)
{
$('#EditTextMultiValued', p4.edit.editBox).val(p4.edit.T_mval[ival]);
$('#EditTextMultiValued').trigger('keyup.maxLength');
$(mvaldiv).parent().find('.hilighted').removeClass('hilighted');
$(mvaldiv).addClass('hilighted');
// $('#EditTextMultiValued', p4.edit.editBox).val(p4.edit.T_mval[ival].getValue());
// $('#EditTextMultiValued').trigger('keyup.maxLength');
reveal_mval(); // on highlight la liste sur la valeur saisie
}
@@ -387,12 +445,12 @@ function edit_clkmval(mvaldiv, ival)
// ---------------------------------------------------------------------------
function reveal_mval()
{
var button_del = false;
var button_add = true;
var textZone = document.getElementById('EditTextMultiValued');
var v = textZone.value;
// var button_del = false;
// var button_add = true;
var textZone = $('#EditTextMultiValued');
var v = textZone.val();
var vu = v.toUpperCase();
// var vu = v.toUpperCase();
if(p4.edit.T_fields[p4.edit.curField].tbranch)
{
@@ -400,34 +458,29 @@ function reveal_mval()
ETHSeeker.search(v);
}
var l = v.length;
$("#ZTextMultiValued_values > div").each(
function(i)
{
with($(this))
{
var k = html();
var k = k.replace(new RegExp("</?I>", "gi"), "");
var x = k.substr(0,l);
var k2 = k;
if(x.toUpperCase() == vu)
k2 = "<I>" + x + "</I>" + k.substr(l);
html(k2);
if(k == v)
{
button_del = true; // on peut supprimer un mot meme s'il n'est pas dans tous les records
addClass("hilighted");
if(attr("multi")=="0")
button_add = false; // pas la peine d'ajouter un mot s'il est deja dans tous les records
}
else
{
removeClass("hilighted");
}
}
}
);
// var l = v.length;
// $("#ZTextMultiValued_values span.value").each(function(i) {
// var k = $(this).html().replace(new RegExp("</?I>", "gi"), "");
//// console.log(k);
//// var x = k.substr(0,l);
////
//// if(x.toUpperCase() == vu)
//// k2 = "<I>" + x + "</I>" + k.substr(l);
//// $(this).html(k2);
//
// if(k == v)
// {
//// button_del = true; // on peut supprimer un mot meme s'il n'est pas dans tous les records
// $(this).parent().addClass("hilighted");
//// if($(this).parent().attr("multi")=="0")
//// button_add = false; // pas la peine d'ajouter un mot s'il est deja dans tous les records
// }
// else
// {
// $(this).parent().removeClass("hilighted");
// }
// }
// );
if(v != "")
{
@@ -458,13 +511,13 @@ function reveal_mval()
$(".editDiaButtons", p4.edit.editBox).hide();
}
var talt;
talt = $.sprintf(language.editAddMulti,v);
$("#EditButAddMultiValued", p4.edit.editBox).css("visibility", button_add ? "visible" : "hidden").attr('alt', talt).attr('Title', talt);
talt = $.sprintf(language.editDelMulti,v);
$("#EditButDelMultiValued", p4.edit.editBox).css("visibility", button_del ? "visible" : "hidden").attr('alt', talt).attr('Title', talt);
// var talt;
// talt = $.sprintf(language.editAddMulti,v);
// $("#EditButAddMultiValued", p4.edit.editBox).css("visibility", button_add ? "visible" : "hidden").attr('alt', talt).attr('Title', talt);
// talt = $.sprintf(language.editDelMulti,v);
// $("#EditButDelMultiValued", p4.edit.editBox).css("visibility", button_del ? "visible" : "hidden").attr('alt', talt).attr('Title', talt);
textZone.focus();
textZone.trigger('focus');
return(true);
}
@@ -480,7 +533,7 @@ function edit_diabutton(irec, act)
if(act=='add')
{
p4.edit.T_records[irec].fields[meta_struct_id].addValue(v);
p4.edit.T_records[irec].fields[meta_struct_id].addValue(v, false, null);
}
p4.edit.T_mval = []; // tab des mots, pour trier
@@ -514,23 +567,43 @@ function edit_diabutton(irec, act)
n++;
}
p4.edit.T_mval.sort(SortCompareStrings);
p4.edit.T_mval.sort(SortCompareMetas);
var t = "";
for(var i in p4.edit.T_mval) // pour lire le tableau 'a' dans l'ordre trie par 'p4.edit.T_mval'
{
v = p4.edit.T_mval[i];
if(i>0 && p4.edit.T_mval[i-1]==p4.edit.T_mval[i])
var value = p4.edit.T_mval[i];
var word = value.getValue();
var extra = value.getVocabularyId() ? '(V) ' : '';
if(i>0)
{
if(value.getVocabularyId() !== null && p4.edit.T_mval[i-1].getVocabularyId() == value.getVocabularyId())
{
continue;
}
if(value.getVocabularyId() === null && p4.edit.T_mval[i-1].getVocabularyId() === null)
{
if(p4.edit.T_mval[i-1].getValue() == value.getValue())
{
continue; // on n'accepte pas les doublons
if(a['%'+v].n == n)
}
}
}
if(a['%'+word].n == n)
{
// le mot etait present dans tous les records selectionnes
t += "<div multi=\"0\" onclick=\"edit_clkmval(this, "+i+")\">" + v + "</div>";
t += "<div multi=\"0\" onclick=\"edit_clkmval(this, "+i+")\">"
+ extra
+ '<span class="value" vocabId="' + value.getVocabularyId() + '">' + word + "</span></div>";
}
else
{
// le mot n'etait pas present dans tous les records
t += "<div multi=\"1\" class=\"hetero\" onclick=\"edit_clkmval(this, "+i+")\">" + v + "</div>";
t += "<div multi=\"1\" class=\"hetero\" onclick=\"edit_clkmval(this, "+i+")\">"
+ extra
+ '<span class="value" vocabId="' + value.getVocabularyId() + '">' + word + "</span></div>";
}
}
$("#ZTextMultiValued_values", p4.edit.editBox).html(t);
@@ -543,17 +616,17 @@ function edit_diabutton(irec, act)
// ---------------------------------------------------------------------------
// on a clique sur le bouton 'ajouter' un mot dans le multi-val
// ---------------------------------------------------------------------------
function edit_addmval()
function edit_addmval(value, VocabularyId)
{
var meta_struct_id = p4.edit.curField; // le champ en cours d'editing
var v = $('#EditTextMultiValued', p4.edit.editBox).val();
// on ajoute le mot dans tous les records selectionnes
for(var r=0; r<p4.edit.T_records.length; r++)
{
if(!p4.edit.T_records[r]._selected)
continue;
p4.edit.T_records[r].fields[meta_struct_id].addValue(v);
p4.edit.T_records[r].fields[meta_struct_id].addValue(value, false, VocabularyId);
}
updateEditSelectedRecords(null);
@@ -616,11 +689,11 @@ function edit_validField(evt, action)
if(action == "ok" || action == "ask_ok")
{
p4.edit.T_records[i].fields[p4.edit.curField].addValue(t);
p4.edit.T_records[i].fields[p4.edit.curField].addValue(t, false, null);
}
else if(action == "fusion" || action == "ask_fusion")
{
p4.edit.T_records[i].fields[p4.edit.curField].addValue(t, true);
p4.edit.T_records[i].fields[p4.edit.curField].addValue(t, true, null);
}
if(p4.edit.T_records[i].fields[p4.edit.curField].isMulti())
@@ -920,7 +993,7 @@ function updateEditSelectedRecords(evt)
{
$("#EditTextMultiValued", p4.edit.editBox).val(label);
$('#EditTextMultiValued').trigger('keyup.maxLength');
edit_addmval();
edit_addmval($('#EditTextMultiValued', p4.edit.editBox).val(), null);
}
else
{
@@ -1030,14 +1103,14 @@ function updateEditSelectedRecords(evt)
editField(evt, p4.edit.curField);
}
function SortCompareStrings(a, b)
function SortCompareMetas(a, b)
{
if(typeof(a) != 'object')
return(-1);
if(typeof(b) != 'object')
return(1);
var na = a.toUpperCase();
var nb = b.toUpperCase();
var na = a.getValue().toUpperCase();
var nb = b.getValue().toUpperCase();
if(na == nb)
return(0);
return(na < nb ? -1 : 1);
@@ -1336,7 +1409,7 @@ function edit_dblclickThesaurus(event) // ondblclick dans le thesaurus
{
$("#EditTextMultiValued", p4.edit.editBox).val(w);
$('#EditTextMultiValued').trigger('keyup.maxLength');
edit_addmval();
edit_addmval($('#EditTextMultiValued', p4.edit.editBox).val(), null);
}
else
{
@@ -1647,7 +1720,7 @@ function preset_load(preset_id)
{
for(val in p4.edit.T_fields[i].preset)
{
p4.edit.T_records[r].fields[""+i].addValue(p4.edit.T_fields[i].preset[val]);
p4.edit.T_records[r].fields[""+i].addValue(p4.edit.T_fields[i].preset[val], false, null);
}
}
}
@@ -1850,18 +1923,42 @@ function startThisEditing(sbas_id,what,regbasprid,ssel)
p4.edit.regbasprid = regbasprid;
p4.edit.ssel = ssel;
// var records = [];
for(r in p4.edit.T_records)
{
var fields = {};
for(f in p4.edit.T_records[r].fields)
{
var values = [];
var meta_struct_id = p4.edit.T_records[r].fields[f].meta_struct_id;
var name = p4.edit.T_fields[meta_struct_id].name;
var multi = p4.edit.T_fields[meta_struct_id].multi;
var required = p4.edit.T_fields[meta_struct_id].required;
var readonly = p4.edit.T_fields[meta_struct_id].readonly;
var maxLength = p4.edit.T_fields[meta_struct_id].maxLength;
var minLength = p4.edit.T_fields[meta_struct_id].minLength;
var type = p4.edit.T_fields[meta_struct_id].type;
var separator = p4.edit.T_fields[meta_struct_id].separator;
var vocabularyControl = p4.edit.T_fields[meta_struct_id].vocabularyControl;
var vocabularyRestricted = p4.edit.T_fields[meta_struct_id].vocabularyRestricted;
var fieldOptions = {
multi:multi,
required:required,
readonly:readonly,
maxLength:maxLength,
minLength:minLength,
type:type,
separator:separator,
vocabularyControl:vocabularyControl,
vocabularyRestricted:vocabularyRestricted
};
var databoxField = new p4.databoxField(name, meta_struct_id, fieldOptions);
var values = [];
for(v in p4.edit.T_records[r].fields[f].values)
{
var meta_id = p4.edit.T_records[r].fields[f].values[v].meta_id;
@@ -1870,14 +1967,11 @@ function startThisEditing(sbas_id,what,regbasprid,ssel)
values.push(new p4.recordFieldValue(meta_id, value));
}
var name = p4.edit.T_fields[meta_struct_id].name;
var multi = p4.edit.T_fields[meta_struct_id].multi;
var required = p4.edit.T_fields[meta_struct_id].required;
fields[f] = new p4.recordField(name, meta_struct_id, {multi:multi, required:required}, values);
fields[f] = new p4.recordField(databoxField, values);
}
p4.edit.T_records[r].fields = fields;
p4.edit.fields = fields;
}
@@ -2133,7 +2227,9 @@ function startThisEditing(sbas_id,what,regbasprid,ssel)
check_required();
$('#TH_Opresets button.adder').button().bind('click', function(){preset_copy();});
$('#TH_Opresets button.adder').button().bind('click', function(){
preset_copy();
});
try{
$('#divS .edit_field:first').trigger('mousedown');