Hallo zusammen,
für ein Formular habe ich bisher das ItemListFormField verwendet, um darin E-Mail-Adressen angeben zu können. Nach dem Absenden werden die Werte darin alle darauf kontrolliert, dass es richtige E-Mail-Adressen sind.
Jetzt habe ich in meiner Software allerdings noch einzelne Verteiler, die einfach nur aus mehreren E-Mail-Adressen bestehen. Jetzt möchte ich, dass man in dem ItemListFormField auch diese Verteiler eingeben kann. Dazu wären einerseits die Suggestions hilfreich (wie z.B. bei UserFormField), andererseits aber auch das explizite Speichern der objectID für die Verteiler. Die E-Mail-Adressen selber können (und sollen) einfach die objectID 0 (Standard im ItemListFormField) behalten, damit diese von den Verteilern unterschieden werden können. Dann dürfte ich am Ende also eine ItemList bestehend aus E-Mail-Adressen mit der objectID 0 haben und Verteilernamen mit deren entsprechenden objectID.
Meine Idee dazu war jetzt das ItemListFormField zu erweitern um meine Anforderungen hinzuzufügen. Das ist soweit auch denke ich recht einfach machbar. Durch Angabe des javaScriptDataHandlerModule und des templateName sollte ich weiter meine eigene Implementierung auch im Frontend einspielen. Gesagt, getan: Mein Template sieht wie folgt aus und gleicht dem Original des ItemListFormField, bis auf das Modul im require-Teil:
<input type="text" id="{@$field->getPrefixedId()}" name="{@$field->getPrefixedId()}" class="long"{if $field->isAutofocused()} autofocus{/if}{if $field->isImmutable()} disabled{/if}>
<script data-relocate="true">
require(['acp/Newsletter/SimpleMail/Ui/ItemList/MailingList'], function(UiItemListMailingList) {
UiItemListMailingList.init(
'{@$field->getPrefixedId()}',
[{if $field->getValue() !== null && !$field->getValue()|empty}{implode from=$field->getValue() item=item}'{@$item|encodeJS}'{/implode}{/if}],
{
maxItems: {if $field->allowsMultiple()}{@$field->getMaximumMultiples()}{else}1{/if},
submitFieldName: '{@$field->getPrefixedId()}[]'
}
);
});
</script>Das Modul MailingList sieht bei mir jetzt aktuell wie folgt aus:
define(['WoltLabSuite/Core/Ui/ItemList', 'EventKey'], function(UiItemList, EventKey) {
"use strict";
if (!COMPILER_TARGET_DEFAULT) {
var Fake = function() {};
Fake.prototype = {
init: function() {},
getValues: function() {}
};
return Fake;
}
/**
* @exports WoltLabSuite/Core/Ui/ItemList/MailingList
*/
return {
/**
* Initializes mailing list suggestion support for an element.
*
* @param {string} elementId input element id
* @param {object} options option list
*/
init: function(elementId, options) {
UiItemList.init(elementId, [], {
ajax: {
className: 'newsletter\\data\\mailingList\\MailingListAction'
},
callbackChange: (typeof options.callbackChange === 'function' ? options.callbackChange : null),
callbackSyncShadow: this._syncShadow.bind(this),
callbackSetupValues: (typeof options.callbackSetupValues === 'function' ? options.callbackSetupValues : null),
excludedSearchValues: (Array.isArray(options.excludedSearchValues) ? options.excludedSearchValues : []),
isCSV: true,
maxItems: ~~options.maxItems || -1,
restricted: false
});
},
/**
* @see WoltLabSuite/Core/Ui/ItemList::getValues()
*/
getValues: function(elementId) {
return UiItemList.getValues(elementId);
},
_syncShadow: function(data) {
var values = this.getValues(data.element.id);
var mailingLists = [];
values.forEach(function(value) {
mailingLists.push(value.value);
});
data.shadow.value = mailingLists.join(',');
return values;
}
};
});Auch hier habe ich mich stark an der bereits vorhandenen Implementierung der UserFormField orientiert, ebenfalls beim Handler-Module:
define(['Core', 'WoltLabSuite/Core/Form/Builder/Field/Field', 'WoltLabSuite/Core/Ui/ItemList'], function(Core, FormBuilderField, UiItemList) {
"use strict";
/**
* @constructor
*/
function FormBuilderFieldMailingList(fieldId) {
this.init(fieldId);
}
Core.inherit(FormBuilderFieldMailingList, FormBuilderField, {
_getData: function() {
var values = UiItemList.getValues(this._fieldId);
var recipients = [];
for (var i = 0, length = values.length; i < length; i++) {
if (values[i].objectId) {
recipients.push(values[i].value);
}
}
var data = {};
data[this._fieldId] = recipients.join(',');
return data;
}
});
return FormBuilderFieldMailingList;
});Jetzt stellt sich mir erstmal die Frage, wie ich es jetzt mache, dass bei Mail-Adressen die objectID 0 eingetragen wird und bei über die Suggestions angeklickten Verteiler die entsprechende objectID des Verteilers genutzt wird.
Neben diesem Problem stoße ich noch auf folgendes andere Problem: Beim Absenden des Formulars wird der Inhalt meines MailingListFormField gelöscht und danach kommt der Fehler, dass ich das Feld ausfüllen muss. Die Daten werden also nicht "on Submit" ans Formular angehängt wie bei der ItemList selber, vermute ich. Muss ich da auch noch etwas ändern?
Hoffe darauf, dass mir da jemand helfen kann.
Gruß
ilou