added connect object widget

SE/se-lib/OBJ.php

@@ -8,6 +8,8 @@
 # Instance table:
   `{tbl_name}__INSTANCE_CLOSURE`: `PRIMARY_KEY`, `INSTANCE`(przodek), `PARENT_INSTANCE`(przodek), `PARENT_DEPTH`(głębokość)
 
+TODO: closure tree http://dirtsimple.org/2010/11/simplest-way-to-do-tree-based-queries.html
+
 ## sql - fetch rows with instance:
 ```sql
   select t.*

SE/se-lib/Route/Storage.php

@@ -159,7 +159,30 @@ class Route_Storage extends RouteBase {
 	<?php
 		$mainTable = OBJ::getMainTableName($json);
 		$sqlFields = OBJ::getTableFields($json);
-		$this->showTableWidet($mainTable, $sqlFields);
+		$this->showTableWidget($mainTable, $sqlFields);
+
+		$tableOne = array();
+		$tableOne['caption'] = 'Instancje';
+		$tableOne['rows'] = array();
+		$parentList = OBJ::getParentList($json);
+		$tableOne['rows'][] = array('__primary_key' => $objectName, 'name' => $objectName);
+		$linksParentList = array(); foreach ($parentList as $parentName) {
+			// $parentLink = '<a href="index.php?_route=Storage&_task=coreObjectStruct&object=' . str_replace('/', '-', $parentName) . '">' . $parentName . '</a>';
+			// array_unshift($linksParentList, $parentLink);
+			$tableOne['rows'][] = array('__primary_key' => $parentName, 'name' => $parentName);
+		}
+
+		$tableTwo = array();
+		$tableTwo['caption'] = 'Rekordy w tabeli głównej';
+		$mainTable = OBJ::getMainTableName($json);
+		$sqlFields = OBJ::getTableFields($json);
+		$tableTwo['rows'] = $this->getTableRows($mainTable, $sqlFields);
+		foreach ($tableTwo['rows'] as $idx => $row) {
+			// $tableTwo['rows'][] = array('__primary_key' => $objectName, 'name' => $objectName);
+			$tableTwo['rows'][$idx]['__primary_key'] = $row['ID'];
+		}
+		echo '<hr>';
+		$this->showConnectTableWidget($tableOne, $tableTwo, $connectFunction);
 	?>
 </div>
 <script>
@@ -182,7 +205,125 @@ jQuery(document).on('p5UIBtnAjax:Storage:checkObjectInstallAjax:ajaxLoaded', fun
 		UI::dol();
 	}
 
-	public function showTableWidet($tblName, $fields) {
+	public function showConnectTableWidget($tableOne, $tableTwo, $conectionType) {
+		// TODO: add __js_on_click to $tableOne and $tableTwo
+		// TODO: add p5BtnAjax to table filters button
+		// TODO: add p5BtnAjax to conn button
+		$jsEventNamespace = 'ConnectTableWidget' . time();
+		$stateLogId = "{$jsEventNamespace}-state-log";
+		$stateSelectedTotalId = "{$jsEventNamespace}-state-selected";
+		$stateClearSelectedBtnId = "{$jsEventNamespace}-state-clear-selected-btn";
+		foreach ($tableOne['rows'] as $idx => $r) {
+			$tableOne['rows'][$idx]['__js_on_click'] = "return p5UI__Clickable(this, '{$jsEventNamespace}:tableOne', { primary_key: '{$r['__primary_key']}' });";
+		}
+		foreach ($tableTwo['rows'] as $idx => $r) {
+			$tableTwo['rows'][$idx]['__js_on_click'] = "return p5UI__Clickable(this, '{$jsEventNamespace}:tableTwo', { primary_key: '{$r['__primary_key']}' });";
+		}
+		$tableOne['hidden_cols'] = $tableTwo['hidden_cols'] = array('__primary_key', '__js_on_click', '__html_id');
+		$tableTwo['__html_id'] = "{$jsEventNamespace}-table-two";
+?>
+		<?php UI::table($tableOne); ?>
+		<div class="btn-group">
+			<button class="btn btn-default" title="Wybierz rekordy wg instancji"><i class="glyphicon glyphicon-question-sign"></i></button>
+			<button class="btn btn-default">Przypisani</button>
+			<button class="btn btn-default">Nieprzypisani</button>
+		</div>
+		<div class="btn-group">
+			<span style="padding-left:30px;">Zaznaczono
+				<span id="<?php echo $stateSelectedTotalId; ?>">0</span>
+				<button id="<?php echo $stateClearSelectedBtnId; ?>"
+								onClick="return p5UI__Clickable(this, '<?php echo $jsEventNamespace; ?>:clearSelection', {});"
+								class="btn btn-link"
+								style="display:none"><i class="glyphicon glyphicon-remove" style="color:red"></i></button>
+			</span>
+		</div>
+		<?php UI::table($tableTwo); ?>
+		<pre id="<?php echo "{$stateLogId}"; ?>"></pre>
+<script>
+(function(){
+
+	var state = {
+		selectedTableOne: null,
+		selectedTableTwo: []
+	};
+	var props = {
+		jsEventNamespace: '<?php echo $jsEventNamespace; ?>',
+		tableTwoId: '#<?php echo $tableTwo['__html_id']; ?>',
+		stateSelectedTotalId: '#<?php echo $stateSelectedTotalId; ?>',
+		stateClearSelectedBtnId: '#<?php echo $stateClearSelectedBtnId; ?>',
+		stateLogId: '#<?php echo $stateLogId; ?>'
+	}
+
+	function render() {
+		jQuery(props.stateSelectedTotalId).text(state.selectedTableTwo.length);
+		if (state.selectedTableTwo.length > 0) {
+			jQuery(props.stateClearSelectedBtnId).show();
+		} else {
+			jQuery(props.stateClearSelectedBtnId).hide();
+		}
+		jQuery(props.stateLogId).text(JSON.stringify(state));
+	}
+	function action__selectTableOneRow(pk) {
+		state.selectedTableOne = pk;
+		render();
+	}
+	function action__unselectTableOneRow() {
+		state.selectedTableOne = null;
+		render();
+	}
+	function action__selectTableTwoRow(pk) {
+		var idx = state.selectedTableTwo.indexOf(pk);
+		if (-1 === idx) state.selectedTableTwo.push(pk);
+		else console.log("Error selectedTableTwo - should be not set");
+		render();
+	}
+	function action__unselectTableTwoRow(pk) {
+		var idx = state.selectedTableTwo.indexOf(pk);
+		if (-1 === idx) state.selectedTableTwo.push(pk);
+		else state.selectedTableTwo.splice(idx, 1);
+		render();
+	}
+	function action__clearSelection() {
+		state.selectedTableTwo = [];
+		jQuery(props.tableTwoId).find('tbody').children('.info').removeClass('info');
+		render();
+	}
+
+	jQuery(document).on(props.jsEventNamespace + ':tableOne:click', function(e, n, payload) {
+		var n$ = jQuery(n);
+		console.log('event '+props.jsEventNamespace+':tableOne:click', n, payload);
+		jQuery.notify('tableOne row clicked [' + payload.props.primary_key + ']', 'info');
+		if (n$.hasClass('info')) {
+			n$.removeClass('info');
+			action__unselectTableOneRow();
+		} else {
+			n$.parent().children('.info').removeClass('info');
+			n$.addClass('info');
+			action__selectTableOneRow(payload.props.primary_key);
+		}
+	});
+	jQuery(document).on(props.jsEventNamespace + ':tableTwo:click', function(e, n, payload) {
+		var n$ = jQuery(n);
+		console.log('event '+props.jsEventNamespace+':tableTwo:click', n, payload);
+		jQuery.notify('tableTwo row clicked [' + payload.props.primary_key + ']', 'info');
+		if (n$.hasClass('info')) {
+			n$.removeClass('info');
+			action__unselectTableTwoRow(payload.props.primary_key);
+		} else {
+			n$.addClass('info');
+			action__selectTableTwoRow(payload.props.primary_key);
+		}
+	});
+	jQuery(document).on(props.jsEventNamespace + ':clearSelection:click', function(e, n, payload) {
+		action__clearSelection();
+	});
+
+})();
+</script>
+<?php
+	}
+
+	public function getTableRows($tblName, $fields) {
 		$sqlFields = array();
 		foreach ($fields as $fldName) {
 			$sqlFields[] = "t.`{$fldName}`";
@@ -194,6 +335,11 @@ jQuery(document).on('p5UIBtnAjax:Storage:checkObjectInstallAjax:ajaxLoaded', fun
 			where 1=1
 			limit 10
 		");
+		return $rows;
+	}
+
+	public function showTableWidget($tblName, $fields) {
+		$rows = $this->getTableRows($tblName, $fields);
 		UI::table(array('caption' => "table({$tblName})", 'rows' => $rows));
 	}
 

SE/se-lib/tmpl/_layout_gora.php

@@ -74,6 +74,17 @@
 		</script>
 	<?php endif; ?>
 <script>
+function p5UI__Clickable(n, eventNamespace, props) {
+	var dbg = <?php echo (DBG::isActive())? 1 : 0; ?>;
+	var eventNamespace = eventNamespace || 'p5UI__Clickable';
+	var $n = jQuery(n);
+	var state = {
+		baseCssClassNames: n.className,
+		props: props
+	};
+	jQuery(document).trigger(eventNamespace+':click', [n, state]);
+}
+
 function p5UI__ButtonAjax(n, eventNamespace, props) {
 	var dbg = <?php echo (DBG::isActive())? 1 : 0; ?>;
 	var eventNamespace = eventNamespace || 'p5UI__ButtonAjax';