Issue #4: Beispiel für Studiensuch-/auswahldialog

closes #4

examples/uf-einzelempfehlung/studien-dialog.js

@@ -0,0 +1,202 @@
+const availableStore = new Ext.data.ArrayStore({
+    fields: [
+        {name: 'kategorieName'},
+        {name: 'version'},
+        {name: 'code'},
+        {name: 'type'},
+        {name: 'studiennummer'},
+        {name: 'shortDesc'},
+        {name: 'description'}
+    ]
+});
+
+let pluginRequestsDisabled = false;
+
+const findButtonFieldFormInformation = function(context) {
+    const findElemId = function(elem) {
+        if (elem.tagName === 'BODY') {
+            return undefined;
+        }
+
+        if (elem.tagName === 'TABLE') {
+            return elem.id;
+        }
+
+        return findElemId(elem.parentElement);
+    }
+
+    const formInfo = function(formItem, blockIndex = undefined) {
+        if (formItem.xtype === 'buttonField') {
+            return formInfo(formItem.ownerCt, formItem.blockIndex);
+        }
+
+        if (formItem.xtype === 'panel' || formItem.xtype === 'sectionField') {
+            return formInfo(formItem.ownerCt, blockIndex);
+        }
+
+        if (formItem.xtype === 'subformField') {
+            return {
+                isSubform: true,
+                formName: formItem.formName,
+                subformFieldName: formItem.subformName,
+                blockIndex: blockIndex
+            };
+        }
+
+        if (formItem.xtype === 'form') {
+            return {
+                isSubform: false,
+            };
+        }
+
+        console.warn('No information found!');
+        return undefined;
+    }
+
+    if (context.genericEditForm && document.activeElement.tagName === 'BUTTON') {
+        let elemId = findElemId(document.activeElement);
+        if (elemId) {
+            let formItem = context.genericEditForm.down('#'+elemId);
+            if (formItem) {
+                return formInfo(formItem);
+            }
+        }
+    }
+
+    return undefined;
+}
+
+const request = function (query) {
+    if (pluginRequestsDisabled) return;
+    executePluginMethod(
+        'EinzelempfehlungAnalyzer',
+        'getStudien',
+        {q: query},
+        function (response) {
+            if (response.status.code < 0) {
+                onFailure();
+                return;
+            }
+            onSuccess(response.result);
+        },
+        false
+    );
+};
+
+const itemMapping = function (item) {
+    return [item.kategorieName, item.version, item.code, item.type, item.studiennummer, item.shortDesc, item.description];
+}
+
+const onFailure = function() {
+    pluginRequestsDisabled = true;
+    Ext.MessageBox.show({
+        title: 'Hinweis',
+        msg: 'Plugin "DNPM" nicht verfügbar.',
+        buttons: Ext.MessageBox.OKCANCEL
+    });
+};
+
+const onSuccess = function(d) {
+    available = d;
+    const extData = available.map(itemMapping);
+    availableStore.loadData(extData);
+}
+
+const save = (selectedItemIndex) => {
+    this.getFieldByEntriesArray('studie', blockIndex).setValue(available[selectedItemIndex].shortDesc);
+    this.getFieldByEntriesArray('studienct', blockIndex).setValue(available[selectedItemIndex].studiennummer);
+}
+
+const showDialog = function (blockIndex) {
+    let selectedItemIndex = -1;
+    let queryString = '';
+
+    const gridColumns = [
+        {header: 'Kategorie', width: 80, sortable: false, dataIndex: 'kategorieName'},
+        {header: 'Version', width: 80, sortable: false, dataIndex: 'version'},
+        {header: 'Typ', width: 120, sortable: false, dataIndex: 'type'},
+        {header: 'Studiennummer', width: 120, sortable: true, dataIndex: 'studiennummer'},
+        {header: 'Name', width: 320, sortable: true, dataIndex: 'shortDesc'},
+        {header: 'Beschreibung', width: 400, sortable: false, dataIndex: 'description'}
+    ];
+
+
+    const query = new Ext.form.field.Text({
+        name: 'query',
+        fieldLabel: 'Suche',
+        padding: 8,
+        listeners: {
+            change: (f) => {
+                queryString = f.value;
+                request(f.value);
+            }
+        }
+    });
+
+    const availableGrid = new Ext.grid.GridPanel({
+        title: 'Verfügbare Studien',
+        store: availableStore,
+        loadMask: true,
+        border: true,
+        columns: gridColumns,
+        flex: 1,
+        overflowY: 'scroll',
+        listeners: {
+            itemclick: (dv, record, item, index) => {
+                selectedItemIndex = index;
+            },
+            itemdblclick: (dv, record, item, index) => {
+                save(selectedItemIndex);
+                let win = Ext.WindowManager.getActive();
+                if (win) {
+                    win.close();
+                }
+            }
+        }
+    });
+
+    const layout = Ext.create('Ext.Panel', {
+        flex: 1,
+        layout: {
+            type: 'vbox',
+            align: 'stretch'
+        },
+        items: [query, availableGrid]
+    });
+
+    Ext.create('Ext.window.Window', {
+        title: 'Studienauswahl',
+        height: 600,
+        width: 1080,
+        layout: 'fit',
+        items: [layout],
+        buttons: [{
+            id: 'btnAdd',
+            text: 'Studie auswählen',
+            handler: () => {
+                save(selectedItemIndex);
+                let win = Ext.WindowManager.getActive();
+                if (win) {
+                    win.close();
+                }
+            }
+        }, {
+            text: 'Abbrechen',
+            cls: 'onko-btn-cta',
+            handler: () => {
+                let win = Ext.WindowManager.getActive();
+                if (win) {
+                    win.close();
+                }
+            }
+        }]
+    }).show();
+
+    request();
+};
+
+let buttonFieldFormInformation = findButtonFieldFormInformation(this);
+if (buttonFieldFormInformation && buttonFieldFormInformation.blockIndex) {
+    blockIndex = buttonFieldFormInformation.blockIndex;
+    showDialog(blockIndex);
+}