SQL Input über wcfDialog .update

Fabi_995 · Jan 20th 2016

Da von @Sonnenspeer gewünscht...

Bezieht sich alles auf das Thema Form Page

Ich hab jetzt eine wichtige Sache, die auf jeden Fall zum Plugin dazu gehört: Den Status der Bewerbung bearbeiten + Message (Grund) mitschicken.

Das ganze möchte ich, sofern möglich, mit den wcfDialog verwirklichen. Dazu hab ich bereits:

Code: applicationEdit

<a href="#" class="button" id="appNoteItem" title="{lang}wcf.global.button.edit{/lang}">{lang}wcf.global.button.edit{/lang}</a>
<div id="appNote" style="display: none;">
	<div id="appNoteContent" style="margin-top:10px;">
		<form method="post" action="{link controller='Application' id=$app->appID}}{/link}">
			<dl>
				<dt><input type="radio" id="state" name="state" value="Angenommen"></dt>
			</dl>
			<dl>
				<dt><input type="radio" id="state" name="state" value="Abgelehnt"></dt>
			</dl>
			<dl>
				<dd>
		                    <textarea id="conversation" name="conversation" value="{$conversation}" rows=10></textarea>
				</dd>
			</dl>
			<div class="formSubmit">
				<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
				{@SECURITY_TOKEN_INPUT_TAG}
			</div>
		</form>
	</div>
</div>
<script data-relocate="true">
	//<![CDATA[
	$(function() {
		$('#appNoteItem').click(function() {
			$('#appNote').wcfDialog({
				title: '{lang}wcf.application.moderation.from{/lang} {$app->username}'
			});
			return false;
		});
	});
	//]]>
</script>
{literal}
	<script data-relocate="true">
		//<![CDATA[
			$.fn.pixels = function(property) {
				return parseInt(this.css(property).slice(0,-2));
			};
			var $mainMenuHeight = $('#mainMenu').height();
			var $marginTop = $('#logo').pixels('margin-top');
			var $marginBottom = $('#logo').pixels('margin-bottom');
			var $topHeaderGap = $('#logo').height() + $marginTop + $marginBottom;
			var $wrapper = $('#mainMenu');
			var $window = $(window);
			$(function() {
				var $scrollOffset = $window.scrollTop();
				if ($scrollOffset > $topHeaderGap) {
					$wrapper.addClass('fixed');
	        		$('.navigationHeader').css("margin-top","51px");
				}
				else {
					$wrapper.removeClass('fixed');
	        		$('.navigationHeader').css("margin-top","0");
				}
				$(document).scroll(scrollPage).resize(scrollPage);
			});
			function scrollPage() {
				var $scrollOffset = $window.scrollTop();
				if ($scrollOffset > $topHeaderGap) {
					$wrapper.addClass('fixed');
	        		$('.navigationHeader').css("margin-top","51px");
				}
				else {
					$wrapper.removeClass('fixed');
	        		$('.navigationHeader').css("margin-top","0");
				}
			}
		//]]>
	</script>
{/literal}

Display More

Und die dazugehörige Klasse:

PHP: ApplicationEditForm

<?php
namespace wcf\form;
use wcf\data\app\Application;
use wcf\data\app\ApplicationAction;
use wcf\form\AbstractForm;
use wcf\system\WCF;
use wcf\form\MessageForm;
use wcf\system\exception\IllegalLinkException;
/**
 * Shows the application mod add page.
 * 
 * @author    Fabi_995
 * @copyright    2015 fabi-995.de
 * @license    LGPL
 * @package    de.fabi-995.wcf.application
 */
class ApplicationEditForm extends MessageForm {
    /**
     * @see	\wcf\page\AbstractPage::$activeMenuItem
     */
    public $activeMenuItem = 'wcf.page.application';
	public $templateName = 'applicationEdit';
	public $appID = 0;
	public $app = null;
	/**
	 * @see	\wcf\page\IPage::readParameters()
	 */
	public function readParameters() {
		AbstractForm::readParameters();
		if (isset($_REQUEST['id'])) $this->appID = intval($_REQUEST['id']);
		$this->app = new Application($this->appID);
		if (!$this->app->appID) {
			throw new IllegalLinkException();
		}
                if (!$this->app->canEdit()) {
                        throw new PermissionDeniedException();
                } 
	}
	/**
	 * @see Form::save()
	 */
	public function save() {
		parent::save();
		// update
                $this->objectAction = new ApplicationAction(array($this->appID), 'update', array('data' => array_merge($this->additionalFields, array(
			'state' => $this->state,
			'conversation' => $this->conversation,
		))));
		$this->objectAction->executeAction();
		$this->saved();
                // show success message
		WCF::getTPL()->assign(array(
			'success' => true
		));
	}
	/**
	 * @see Page::assignVariables()
	 */
	public function assignVariables() {
		parent::assignVariables();
		WCF::getTPL()->assign(array(
			'app' => $this->app,
			'conversation' => $this->conversation,
            'state' => $this->state,
            'action' => 'edit'
		));
	}
}
?>

Display More

Das Template wird in die application.tpl includet.

Das Dialogfeld kommt auch prima (Bis auf das die Sprachvariablen noch fehlen)

Aber ich glaube, ich hab 1. schonmal einen Denkfehler, weil woher weiß das Edit.tpl welche application bearbeitet werden soll und 2. Hab ich irgendwie meine Zweifel ob das überhaupt funktioniert. ~~Mir wäre im normalen WCF solch eine Funktion, sprich DB eingaben über das Dialogfeld, nicht bekannt...~~

Irgendwelche Ratschläge, wie ich das ganze am besten angehen soll?

Quote from Fabi_995

Mir wäre im normalen WCF solch eine Funktion, sprich DB eingaben über das Dialogfeld, nicht bekannt...

Hab das Forum nochmal "untersucht", und doch solch eine art Funktion gefunden, nämlich bspw. das Editieren von Threads.

Und sowas will ich auch, nur bekomme ich es einfach nicht hin. Entweder bekomme ich Fehler das etwas undefiniert sei, obwohl es in der Edit Klasse zu 100% definiert ist, werde beim absenden auf eine nicht verfügbare Seite weitergeleitet, oder es passiert beim Absenden einfach nichts... Ich bin da langsam irgendwie am verzweifeln

Ich brauch ja nur 2 Radio Buttons á Annehmen / Ablehnen und eine kleine Message schreiben, wieso, weshalb, warum.

Sonnenspeer · Jan 20th 2016

Das ist ein wenig komplexer. Wenn du dir in der thread.tpl anschaust, findest du folgende Abschnitte für JS.

Code

var $updateHandler = new WBB.Thread.UpdateHandler.Thread({@$board->boardID});




{* .... *}




{if $thread->canEdit()}
					var $inlineEditor = new WBB.Thread.InlineEditor('.jsThreadInlineEditorContainer');
					$inlineEditor.setUpdateHandler($updateHandler);
					$inlineEditor.setEnvironment('thread', {@$board->boardID});
					$inlineEditor.setPermissions({
						canCloseThread: {@$board->getModeratorPermission('canCloseThread')},
						canDeleteThread: {@$board->getModeratorPermission('canDeleteThread')},
						canDeleteThreadCompletely: {@$board->getModeratorPermission('canDeleteThreadCompletely')},
						canEnableThread: {@$board->getModeratorPermission('canEnableThread')},
						canMoveThread: {@$board->getModeratorPermission('canMoveThread')},
						canPinThread: {@$board->getModeratorPermission('canPinThread')},
						canRestoreThread: {@$board->getModeratorPermission('canRestoreThread')}
					});
				{/if}

Display More

In der JS Klasse WBB.Thread.InlineEditor findet die ganze Logik statt. Schau sie dir mal an und probiere damit rum

Natürlich musst du für deine Zwecke eine eigene Ableitung von WCF.InlineEditor schreiben, aber eben halt mit dem Verständis, wie es in der Thread Klasse gemacht wird. Ebenfalls müsste der UpdateHandler einen bestimmten Wert in dieser Beziehung haben. Genau kann ich dir das aber nicht sagen.

eagle011281 · Jan 20th 2016

Wie im anderen Thema geschrieben ist das nicht mal eben in 2 min gemacht und bedarf an sich schon Kenntnisse in Javascript, ich habe dir hier mal ein Code ausschnitt wie er etwa aussehen könnte. Eine Ableitung vom WCF.InlineEditor brauchst du dafür nicht so komplex willst du das glaube ich garnicht haben wenn ich dich richtig verstehe.

Code für dein Template von dem aus es Moderiert werden soll.

Code

<script data-relocate="true" type="text/javascript">
    //<![CDATA[
    $(function() {
        new PLUGIN.Application.Moderation();
    });
    //]]>
</script>

Javascript Code

JavaScript

PLUGIN.Application.Moderation = Class.extend({
	/**
	 * dialog overlay
	 * @var	jQuery
	 */
	_dialog: null,
	/**
	 * action proxy
	 * @var	WCF.Action.Proxy
	 */
	_proxy: null,
	/**
	 * Initializes the PLUGIN.Application.Moderation class.
	 */
	init: function() {
		// bind event listener
		$('.DEINECSSKLASSE').click($.proxy(this.prepare, this));
		this._dialog = $('<div />').hide().appendTo(document.body);
		this._proxy = new WCF.Action.Proxy();
	},
	/**
	 * Prepares 'save application edit' action.
	 */
	prepare: function() {
		this._proxy.setOption('data', {
			actionName: 'prepareApplicationEdit',
			className: 'PLUGINPFAD\\data\\application\\ApplicationAction',
			objectIDs: [ $('.DEINECSSKLASSE').data('applicationID') ]
		});
		this._proxy.setOption('success', $.proxy(this._success, this));
		this._proxy.sendRequest();
	},
	/**
	 * Handles successful AJAX calls.
	 * 
	 * @param	object		data
	 * @param	string		textStatus
	 * @param	jQuery		jqXHR
	 */
	_success: function(data, textStatus, jqXHR) {
		this._dialog.data('objectIDs', data.objectIDs).html(data.returnValues.template);
		this._dialog.wcfDialog({
			title: WCF.Language.get('plugin.application.edit')
		});
		// listen for submit event
		var $button = this._dialog.find('.formSubmit > input[type=submit]').click($.proxy(this._send, this));
		$(document).keydown(function(event) {
			if (event.which === $.ui.keyCode.ENTER) {
				$button.trigger('click');
			}
		}); 
	},
	/**
	 * Handles successful AJAX calls.
	 * 
	 * @param	object		data
	 * @param	string		textStatus
	 * @param	jQuery		jqXHR
	 */
	_successSend: function(data, textStatus, jqXHR) {
		// show success message
		$notification = new WCF.System.Notification(WCF.Language.get('wcf.global.success'), 'success');
		$notification.show();
		// close dialog
		this._dialog.wcfDialog('close');
	},
	/**
	 * Handles 'send recommend' action.
	 * 
	 * @param	object		event
	 */
	_send: function(event) {
		// VALUE aus dem Template das gespeichert werden soll
		var $applicationStatus = this._dialog.find('#applicationStatus').prop('value');
		this._proxy.setOption('data', {
			actionName: 'saveApplicationEdit',
			className: 'PLUGINPFAD\\data\\application\\ApplicationAction',
			objectIDs: this._dialog.data('objectIDs'),
			parameters: {
				applicationStatus: $applicationStatus
			}
		});
		this._proxy.setOption('success', $.proxy(this._successSend, this));
		this._proxy.sendRequest();
	}
});

Display More

PHP Code in deiner ApplicationAction.class.php

PHP

/**
 * Validates the 'prepare application edit' function.
 */
public function validatePrepareApplicationEdit() {
    $application = $this->getSingleObject();
    if (!$application->canEdit()) {
        throw new PermissionDeniedException();
    }
}

/**
 * Prepares application edit.
 *
 * @return    array
 */
public function prepareApplicationEdit() {
    return array(
        'template' => WCF::getTPL()->fetch('applicationModeration', 'APPLICATION')
    );
}







/**
 * Validates the 'save application edit' function.
 */
public function validatesSveApplicationEdit() {
    if (empty($this->parameters['applicationStatus'])) {
        throw new UserInputException('applicationStatus');
    }
}







/**
 * save application edit.
 */
public function saveApplicationEdit() {
    // deine funktion
}

Display More

Bedenke bitte das sind nur Schnipsel diese musst du halt auf deine bedürfnisse anpassen. Mehr kann ich dir da auch nicht helfen alles andere sprengt den rahmen des ganzens.

Fabi_995 · Jan 21st 2016

Ihr seid echt lieb

JS Ist nicht so meine stärke, aber nach mehrmaligen Durchlesen erklärt sich der Code fast von selbst. Ich hab den JS teil in den /wcf/js ordner geschoben und in meinem Template rufe ich diesen mit

Code

<script data-relocate="true" src="{$__wcf->getPath()}js/WCF.Application.js?v={@LAST_UPDATE_TIME}"></script>

auf. Angepasst hab ich den, so wie ich meinte, auch. Doch wenn ich meine Seite aufrufe hab ich in der Entwicklerkonsole Uncaught ReferenceError: PLUGIN is not defined stehen.

Muss ich das PLUGIN durch das ersetzen, wie ich mein gesamtes Plugin genannt hab?

Sonnenspeer · Jan 21st 2016

Das solltest du mit dem Namen der Endanwendung ersetzen. In deinem Fall wohl WCF. Und eventuell sonstige einzigartige Bezeichner, falls WCF.Application schon benutzt wird.

**Joshua Rüsweg** · Jan 21st 2016

Und solltest das Namespace erzeugen..

Fabi_995 · Jan 21st 2016

Ok, kapiert

mit

Quote from web-produktion

objectIDs: [ $('.DEINECSSKLASSE').data('applicationID') ]

Ist da mein Button oder das Popup Fenster gemeint? Bekomme Der Parameter „objectIDs“ fehlt oder ist ungültig. Als fehler

eagle011281 · Jan 21st 2016

die klasse deine buttons und an dem muss noch data-application-id="APPID" stehen.

Fabi_995 · Jan 21st 2016

Zumindest hab ich jetzt keine Fehler mehr.

Der Teil

JavaScript

// listen for submit event
                var $button = this._dialog.find('#formSubmit > input type="submit"').click($.proxy(this._send, this));
                $(document).keydown(function(event) {
                        if (event.which === $.ui.keyCode.ENTER) {
                                $button.trigger('click');
                        }
                });

Lauscht, ob der Submit button gedrückt wurde, richtig? Ich kann jedoch auf den Submit Button drücken wie ich will, es kommt nix zurück...

Das <form gedöns>, welches ich im Templatecode (im startpost) hab, brauch ich denke ich nicht mehr. Und das, was ich in der Edit Form klasse hab, kann gelöscht werden bis auf den Teil, in dem es gespeichert wird, also

PHP

/**
	 * @see Form::save()
	 */
	public function save() {
		parent::save();
		// update
                $this->objectAction = new ApplicationAction(array($this->appID), 'update', array('data' => array_merge($this->additionalFields, array(
			'state' => $this->state,
			'message' => $this->message,
		))));
		$this->objectAction->executeAction();
		$this->saved();




                // show success message
		WCF::getTPL()->assign(array(
			'success' => true
		));
	}

Display More

SQL Input über wcfDialog .update

Participate now!

Share