AppGini Community Forums

A place where AppGini users can exchange ideas and help each other.
https://forums.appgini.com:443/phpbb/

[function] Group fields in block

https://forums.appgini.com:443/phpbb/viewtopic.php?f=7&t=2176

Page 1 of 1

[function] Group fields in block

Posted: 2016-08-07 11:23
by DevGiu
Based on the code of _mktabbed from Grimblefritz I created a function to group fields on blocks.

Function is

Code: Select all

function kogroups_html($table, &$groups, $after = '') {
	ob_start(); ?>
		<?php
			foreach ($groups as $group => $groupinfo) {
				$style = (isset($groupinfo['style']) ? $groupinfo['style'] : 'horizontal');
				echo "<div id='{$group}-holder' class=\"panel panel-default form-group form-{$style}\">";
				if (!empty($groupinfo['name'])) {
					echo "<div class='panel-heading'>{$groupinfo[name]}</div>";
				}

				echo "<div id='{$group}' class=\"panel-body\">";
				echo "</div>";
				echo "</div>";
			}
		?>
	<script>
		$j(function(){
		<?php
			foreach ($groups as $group => $groupinfo) {
				if (isset($groupinfo['position_after'])){
					echo "\$j('#{$groupinfo['position_after']}').parents('.form-group').after(\$j('#{$group}-holder'));\n";
				} else {
					echo "\$j('fieldset').prepend(\$j('#{$group}-holder'));\n";
				}

				foreach ($groupinfo['fields'] as $groupfield) {
					echo "\$j('#{$groupfield}').parents('.form-group').appendTo('#{$group}');\n";
			 	}
			}
		?>
		})
	</script>
	<?php
	$html = ob_get_contents();
	ob_end_clean();
	return $html;

}
How it works?
Create a php file, called for example mylib.php inside your hooks folder.
In your __global.php do require('mylib.php');
Now, in your table hooks file, inside your table_dv hook you can do:

Code: Select all

//put the fields you want in a group into an array
		$firstgroup_fields = array(
			'referencia',
			'contador',
			'estado_documento',
			'totalDocumento'
		);

		$secondgroup_fields = array(
			'fechaDocumento',
			'entidad_id',
			'serie_id',
			'direccionEntidad_id'
		);


		/* 
		You have to build an assoc array. First dimension is the id of the group. Second dimension is the params.
		In params you can use:
			['name'] = Specify the header of the group. If you don't specify, block will not have header named.
  			['fields'] = array with the fields you want inside this group
			['style'] = If not specified block will be form-horizontal. You can use 'inline' here. I'm working on a way to specifiy number of fields. Not yet.
  			['position_after']  = If provided, your block will be rendred after the field you specify here. If not provided,  block will be positioned at start
		*/
		$groups['firstgroup']['name'] = '';
		$groups['firstgroup']['fields'] = $firstgroup_fields;
		$groups['firstgroup']['style'] = 'inline';

		$groups['secondgroup']['name'] = 'Another group';
		$groups['secondgroup']['fields'] = $secondgroup_fields;
		$groups['secondgroup']['position_after'] = 'firstgroup';

		$groups['otro']['name'] = 'Another one';
		$groups['otro']['fields'] = array('comercial_id');
		$groups['otro']['position_after'] = 'condicionDePago_id';

		// Attach the function to HTML as always, being first param the table, and second the array with group/s
		$html .= kogroups_html('cab_fac_s', $groups);

Re: [function] Group fields in block

Posted: 2016-08-07 11:24
by DevGiu
Showing the final result:
Selección_038.png
Selección_038.png (34.38 KiB) Viewed 10092 times

Re: [function] Group fields in block

Posted: 2016-08-07 12:14
by grimblefritz
Looks like a good approach if you want a vertical layout, but with some visual separation. Nice work.

Next, why not make the block headings active? So when clicked they expand/collapse the block - and allow the initial state to be specified in your array.

Code is never "done" :)

Re: [function] Group fields in block

Posted: 2016-08-07 12:20
by DevGiu
And is not done :) its a first "release" just working. I would like to add the possibility to specify how much fields wants in each row and blocks me below other.

I will take into consideration about collapsing blocks. Could be interesting

Re: [function] Group fields in block

Posted: 2016-08-07 13:31
by grimblefritz
I can see blocks with an initial state of collapsed as being very useful in a mobile application. Large numbers of tabs on a smartphone can be cumbersome. Vertical blocks would be better.

And you know I have to ask...

What about tabs inside blocks, or blocks inside tabs?

:lol:

Re: [function] Group fields in block

Posted: 2016-08-07 14:57
by DevGiu
I can't edit my own post? :(

Ok

TODO
- When style set to inline, a way to specify number of columns we want in the block

Changelog version 0.2:
- You can set behaviour of collapsable blocks

Code: Select all

$groups['groupname']['collapse'] = 0; // 0 = not collapsable; 1= Collapsable an open default; 2=Collapsable and closed default
- If block is collapsable shows a glyph representing the state.
- You can specfy another element of the DOM by his ID preceding with a #, to be moved to the block. In this sample, moving the Tabs from _mktabbed lib :D

Code: Select all

$secondgroup_fields = array(
			'fechaDocumento',
			'entidad_id',
			'serie_id',
			'direccionEntidad_id',
			'#form-tabs'
		);
version 0.2 code

Code: Select all

function kogroups_html($table, &$groups, $after = '') {
	ob_start(); ?>
		<?php
			foreach ($groups as $group => $groupinfo) {
				$style = (isset($groupinfo['style']) ? $groupinfo['style'] : 'horizontal');
				echo "<div id='{$group}-holder' class=\"panel panel-default form-group form-{$style}\">";
				if (!empty($groupinfo['name'])) {

					$collapseicon = '';
					$collapse_default_open_class = '';
					$collapse_data_toggle = ($groupinfo['collapse']==0 ? '' : "data-toggle='collapse'");

					if (isset($groupinfo['collapse']) && $groupinfo['collapse'] == 1){
						$collapseicon = "<span class='{$group}-collapse-icon glyphicon glyphicon-chevron-up'></span>";
						$collapse_default_open_class = 'collapse in';
					} else if (isset($groupinfo['collapse']) && $groupinfo['collapse'] == 2) {
						$collapseicon = "<span class='{$group}-collapse-icon glyphicon glyphicon-chevron-down'></span>";
						$collapse_default_open_class = 'collapse';
					}

					if (isset($groupinfo['collapse']) && $groupinfo['collapse'] > 0){
						$paneltitle = "<a {$collapse_data_toggle} href='#{$group}'>{$groupinfo[name]}</a>";
					} else {
						$paneltitle = "{$groupinfo[name]}";
					}

					echo "<div class='panel-heading'>{$collapseicon}{$paneltitle}</div>";
				}

				echo "<div id='{$group}' class='panel-body {$collapse_default_open_class}'>";
				echo "</div>";
				echo "</div>";
			}
		?>
	<script>
		$j(function(){
		<?php
			foreach ($groups as $group => $groupinfo) {
				if (!empty($groupinfo['name'])) {
					echo "\$j('#{$group}').on('shown.bs.collapse', function() {
	   						 \$j('.{$group}-collapse-icon').addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
	  						});\n";

					echo "\$j('#{$group}').on('hidden.bs.collapse', function() {
   							 \$j('.{$group}-collapse-icon').addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');
  							});\n";
				}
				if (isset($groupinfo['position_after'])){
					echo "\$j('#{$groupinfo['position_after']}').parents('.form-group').after(\$j('#{$group}-holder'));\n";
				} else {
					echo "\$j('fieldset').prepend(\$j('#{$group}-holder'));\n";
				}

				foreach ($groupinfo['fields'] as $groupfield) {
					if ($groupfield[0] != '#') {
						echo "\$j('#{$groupfield}').parents('.form-group').appendTo('#{$group}');\n";
					} else {
						echo "\$j('{$groupfield}').appendTo('#{$group}');\n";
					}

			 	}
			}
		?>
		})
	</script>
	<?php
	$html = ob_get_contents();
	ob_end_clean();
	return $html;

}

Re: [function] Group fields in block

Posted: 2016-08-07 15:14
by grimblefritz
This example might help with the number of columns and also handle small displays. (From one of the Udemy examples.) You'll need to sort out how to work it into your code.


width controls number of columns. For example, 48% would give 2, 33% gives 3, 24% gives 4, etc.

margin-bottom opens up vertical space between fields.

vertical-align makes fields group across columns, so you get 1 field per column per row.

@media applies the style only to displays >= 768px

Code: Select all

<script>
	$j(function(){
		$j('fieldset.form-horizontal').removeClass('form-horizontal').addClass('form-inline');
	})
</script>

<style>
	@media (min-width: 768px){
		.form-inline .form-group{
			width: 48%;
			margin-bottom: 0.75em;
			vertical-align: top;
		}
	}
</style>

Re: [function] Group fields in block

Posted: 2016-08-07 15:26
by DevGiu
Some comment about this function? Works as you wish?

Yes, this is the approach probably I will follow, but it did me strange things with 4 columns when I tried it. For this reason I need more testing.

Re: [function] Group fields in block

Posted: 2016-08-07 16:39
by DevGiu
This is the problem I totally don't understand.
Following this pattern it looks this way. Why is not using extra space? (red box)
Selección_035.png
Selección_035.png (31.37 KiB) Viewed 10048 times

Re: [function] Group fields in block

Posted: 2016-08-07 16:41
by DevGiu
v0.3 changelog:
- Bugs

v0.3 code

Code: Select all

function kogroups_html($table, &$groups, $after = '') {
	ob_start(); ?>
		<?php
			foreach ($groups as $group => $groupinfo) {
				$style = (isset($groupinfo['style']) ? $groupinfo['style'] : 'horizontal');
				$blockcolumns = (isset($groupinfo['style']['columns']) ? $groupinfo['style']['columns'] : 1);

				echo "<div id='{$group}-holder' class=\"panel panel-default\">";
				if (!empty($groupinfo['name'])) {

					$collapseicon = '';
					$collapse_default_open_class = '';
					$collapse_data_toggle = ($groupinfo['collapse']==0 ? '' : "data-toggle='collapse'");

					if (isset($groupinfo['collapse']) && $groupinfo['collapse'] == 1){
						$collapseicon = "<span class='{$group}-collapse-icon glyphicon glyphicon-chevron-up'></span>";
						$collapse_default_open_class = 'collapse in';
					} else if (isset($groupinfo['collapse']) && $groupinfo['collapse'] == 2) {
						$collapseicon = "<span class='{$group}-collapse-icon glyphicon glyphicon-chevron-down'></span>";
						$collapse_default_open_class = 'collapse';
					}

					if (isset($groupinfo['collapse']) && $groupinfo['collapse'] > 0){
						$paneltitle = "<a {$collapse_data_toggle} href='#{$group}-content'>{$groupinfo[name]}</a>";
					} else {
						$paneltitle = "{$groupinfo[name]}";
					}

					echo "<div class='panel-heading'>{$collapseicon}{$paneltitle}</div>";
				}

				echo "<div id='{$group}-content' class='panel-body {$collapse_default_open_class}'>";
				echo "<fieldset id='{$group}' class='form-horizontal'></div>";
				echo "</div>";
				echo "</div>";
			}
		?>
	<script>
		$j(function(){
		<?php
			foreach ($groups as $group => $groupinfo) {
				if ($style != 'horizontal') {

				}
				if (!empty($groupinfo['name'])) {
					echo "\$j('#{$group}-content').on('shown.bs.collapse', function() {
	   						 \$j('.{$group}-collapse-icon').addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
	  						});\n";

					echo "\$j('#{$group}-content').on('hidden.bs.collapse', function() {
   							 \$j('.{$group}-collapse-icon').addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');
  							});\n";
				}
				if (isset($groupinfo['position_after'])){
					if ($groupinfo['position_after'][0] != '#') {
						echo "\$j('#{$groupinfo['position_after']}').parents('.form-group').after(\$j('#{$group}-holder'));\n";
					} else {
						echo "\$j('{$groupinfo['position_after']}-holder').after(\$j('#{$group}-holder'));\n";
					}

				} else {
					echo "\$j('fieldset:first').prepend(\$j('#{$group}-holder'));\n";
				}

				foreach ($groupinfo['fields'] as $groupfield) {
					if ($groupfield[0] != '#') {
						echo "\$j('#{$groupfield}').parents('.form-group').appendTo('#{$group}');\n";
					} else {
						echo "\$j('{$groupfield}').appendTo('#{$group}');\n";
					}

			 	}
			}
		?>
		})
	</script>
	<?php
	$html = ob_get_contents();
	ob_end_clean();
	return $html;

}

Re: [function] Group fields in block

Posted: 2016-09-26 08:19
by DevGiu
Now, library can "inject" groups inside tabs.

Code: Select all

$groups['mygroup']['insidetab'] = 'mytab';
screenshot_002.png
screenshot_002.png (23.65 KiB) Viewed 9923 times
I modified grimblefritz tabs lib, to understand "aliases", and you can "inject" a group of tabs inside a block by his alias this way.

Code: Select all

// Creation of tab
$html .= mktabbed_html('cab_fac_s', $tabs, 'mytabalias');
$html .= mktabbed_html('cab_fac_s', $tabs2, 'mytabalias2');
.
.
.
.
$arrayoffieldsforgroup = array(
			'baseImponible1',
			'cuotaImpuesto1',
			'cuotaRecargo1',
			'baseImponible2',
			'cuotaImpuesto2',
			'cuotaRecargo2',
			'baseImponible3',
			'cuotaImpuesto3',
			'cuotaRecargo3',
			'baseImponible4',
			'cuotaImpuesto4',
			'cuotaRecargo4',
			'##mytabalias2', // this is a group of tabs
		);

$groups['totales']['name'] = '';
$groups['totales']['rows']['fields'] = array($arrayoffieldsforgroup);
$groups['totales']['rows']['columns'] = array(4);
$groups['totales']['insidetab'] = 'mytabalias';


$html .= kogroups_html('cab_fac_s', $groups);

Re: [function] Group fields in block

Posted: 2016-09-26 12:22
by grimblefritz
Very interesting. I would not have considered combining the two, but I see it could be a useful effect.

Maybe we should consider combining the libraries into one?

Re: [function] Group fields in block

Posted: 2016-09-26 15:50
by DevGiu
grimblefritz wrote:Very interesting. I would not have considered combining the two, but I see it could be a useful effect.

Maybe we should consider combining the libraries into one?
I think so, I just need some time to translate comments to english and clean a little of garbage :D

Add me to skype if you want.
All times are UTC
Page 1 of 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/