Merge pull request #622 from carloslancha/issue-609-advanced-search

Add Advanced Search to ClayManagementToolbar | Fixes #609
liferay · Feb 23, 2018 · faf2672 · faf2672
2 parents ecf99fb + db21cdc
commit faf2672
Show file tree

Hide file tree

Showing 9 changed files with 1,185 additions and 1,196 deletions.
diff --git a/packages/clay-dropdown/src/ClayDropdownBase.soy b/packages/clay-dropdown/src/ClayDropdownBase.soy
@@ -69,6 +69,45 @@
 	</div>
 {/template}
 
+/**
+ * Renders a list of items
+ */
+{template .items}
+	{@param items: list<?>}
+	{@param? _handleItemClick: any}
+	{@param? contentRenderer: string}
+	{@param? itemsIconAlignment: string}
+	{@param? spritemap: string}
+
+	{foreach $item in $items}
+		{let $variant kind="text"}
+			{if isNonnull($contentRenderer) and $contentRenderer != ''}
+				{$contentRenderer}
+			{elseif $item.type}
+				{$item.type}
+			{else}
+				item
+			{/if}
+		{/let}
+
+		{delcall ClayDropdownBase.Item variant="$variant"}
+			{param _handleItemClick: $_handleItemClick /}
+			{param active: $item.active /}
+			{param checked: $item.checked /}
+			{param disabled: $item.disabled /}
+			{param href: $item.href /}
+			{param icon: $item.icon /}
+			{param inputName: $item.inputName /}
+			{param inputValue: $item.inputValue /}
+			{param items: $item.items /}
+			{param itemsIconAlignment: $itemsIconAlignment /}
+			{param label: $item.label ? '' + $item.label : '' /}
+			{param separator: $item.separator /}
+			{param spritemap: $spritemap /}
+		{/delcall}
+	{/foreach}
+{/template}
+
 /**
  * Renders a search input
  */
@@ -113,22 +152,22 @@
 	{@param? searchable: bool}
 	{@param? spritemap: string}
 
-	{let $listAttributes kind="attributes"}
-		class="dropdown-menu
-			{if $itemsIconAlignment == 'left'}
-				{sp}dropdown-menu-indicator-start
-			{elseif $itemsIconAlignment == 'right'}
-				{sp}dropdown-menu-indicator-end
-			{/if}
+	{let $dropdownMenu kind="html"}
+		{let $listAttributes kind="attributes"}
+			class="dropdown-menu
+				{if $itemsIconAlignment == 'left'}
+					{sp}dropdown-menu-indicator-start
+				{elseif $itemsIconAlignment == 'right'}
+					{sp}dropdown-menu-indicator-end
+				{/if}
 
-			{if $expanded}
-				{sp}show
-			{/if}
-		"
-		ref="menu"
-	{/let}
+				{if $expanded}
+					{sp}show
+				{/if}
+			"
+			ref="menu"
+		{/let}
 
-	{let $dropdownMenu kind="html"}
 		<div {$listAttributes}>
 			{if $helpText}
 				<div class="alert alert-fluid alert-info" role="alert">
@@ -144,14 +183,13 @@
 			{/if}
 
 			{let $listItemsContent kind="html"}
-				<ul class="list-unstyled">
-					{delcall ClayDropdownBase.Items variant="$contentRenderer"}
-						{param _handleItemClick: $_handleItemClick /}
-						{param items: $items /}
-						{param itemsIconAlignment: $itemsIconAlignment /}
-						{param spritemap: $spritemap /}
-					{/delcall}
-				</ul>
+				{delcall ClayDropdownBase.Content variant="$contentRenderer"}
+					{param _handleItemClick: $_handleItemClick /}
+					{param contentRenderer: $contentRenderer /}
+					{param items: $items /}
+					{param itemsIconAlignment: $itemsIconAlignment /}
+					{param spritemap: $spritemap /}
+				{/delcall}
 			{/let}
 
 			{let $captionContent kind="html"}
@@ -246,6 +284,28 @@
 	</button>
 {/template}
 
+/**
+ * Renders the dropdown menu content
+ */
+{deltemplate ClayDropdownBase.Content}
+	{@param? _handleItemClick: any}
+	{@param? contentRenderer: string}
+	{@param? items: list<?>}
+	{@param? itemsIconAlignment: string}
+	{@param? spritemap: string}
+
+	{if $items}
+		<ul class="list-unstyled">
+			{call .items}
+				{param _handleItemClick: $_handleItemClick /}
+				{param items: $items /}
+				{param itemsIconAlignment: $itemsIconAlignment /}
+				{param spritemap: $spritemap /}
+			{/call}
+		</ul>
+	{/if}
+{/deltemplate}
+
 /**
  * Renders list item
  */
@@ -396,12 +456,12 @@
 	{/if}
 
 	{if $items}
-		{delcall ClayDropdownBase.Items}
+		{call .items}
 			{param _handleItemClick: $_handleItemClick /}
 			{param items: $items /}
 			{param itemsIconAlignment: $itemsIconAlignment /}
 			{param spritemap: $spritemap /}
-		{/delcall}
+		{/call}
 	{/if}
 
 	{if $separator}
@@ -485,57 +545,18 @@
 	<li aria-label="{$label}" role="radiogroup">
 		{if $items}
 			<ul class="list-unstyled">
-				{delcall ClayDropdownBase.Items}
+				{call .items}
 					{param _handleItemClick: $_handleItemClick /}
 					{param contentRenderer: 'radio' /}
 					{param items: $items /}
 					{param itemsIconAlignment: $itemsIconAlignment /}
 					{param spritemap: $spritemap /}
-				{/delcall}
+				{/call}
 			</ul>
 		{/if}
 	</li>
 
 	{if $separator}
 		<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
 	{/if}
-{/deltemplate}
-
-/**
- * Renders a list of items
- */
-{deltemplate ClayDropdownBase.Items}
-	{@param items: list<?>}
-	{@param? _handleItemClick: any}
-	{@param? contentRenderer: string}
-	{@param? itemsIconAlignment: string}
-	{@param? spritemap: string}
-
-	{foreach $item in $items}
-		{let $variant kind="text"}
-			{if isNonnull($contentRenderer) and $contentRenderer != ''}
-				{$contentRenderer}
-			{elseif $item.type}
-				{$item.type}
-			{else}
-				item
-			{/if}
-		{/let}
-
-		{delcall ClayDropdownBase.Item variant="$variant"}
-			{param _handleItemClick: $_handleItemClick /}
-			{param active: $item.active /}
-			{param checked: $item.checked /}
-			{param disabled: $item.disabled /}
-			{param href: $item.href /}
-			{param icon: $item.icon /}
-			{param inputName: $item.inputName /}
-			{param inputValue: $item.inputValue /}
-			{param items: $item.items /}
-			{param itemsIconAlignment: $itemsIconAlignment /}
-			{param label: $item.label ? '' + $item.label : '' /}
-			{param separator: $item.separator /}
-			{param spritemap: $spritemap /}
-		{/delcall}
-	{/foreach}
 {/deltemplate}
diff --git a/packages/clay-management-toolbar/demos/a11y.html b/packages/clay-management-toolbar/demos/a11y.html
@@ -52,6 +52,13 @@ <h4>With Only Search</h4>
 		</div>
 	</div>
 
+	<div class="row row-spacing">
+		<div class="col">
+			<h4>With Advanced Search</h4>
+			<div id="advanced-search-block"></div>
+		</div>
+	</div>
+
 	<div class="row row-spacing">
 		<div class="col">
 			<h4>Without Search</h4>
@@ -187,6 +194,15 @@ <h4>With search results bar with active state</h4>
 		},
 		'#only-search-block');
 
+		//With Advanced Search
+		new metal.ClayManagementToolbar({
+			searchFormName: 'mySearchName',
+			searchInputName: 'mySearchInputName',
+			showAdvancedSearch: true,
+			spritemap: spritemap,
+		},
+		'#advanced-search-block');
+
 		//Without Search
 		new metal.ClayManagementToolbar({
 			creationMenu: '#creationPageURL',

diff --git a/packages/clay-management-toolbar/demos/index.html b/packages/clay-management-toolbar/demos/index.html
@@ -52,6 +52,13 @@ <h4>With Only Search</h4>
 		</div>
 	</div>
 
+	<div class="row row-spacing">
+		<div class="col">
+			<h4>With Advanced Search</h4>
+			<div id="advanced-search-block"></div>
+		</div>
+	</div>
+
 	<div class="row row-spacing">
 		<div class="col">
 			<h4>Without Search</h4>
@@ -260,6 +267,15 @@ <h4>With search results bar with active state</h4>
 		},
 		'#only-search-block');
 
+		//With Advanced Search
+		new metal.ClayManagementToolbar({
+			searchFormName: 'mySearchName',
+			searchInputName: 'mySearchInputName',
+			showAdvancedSearch: true,
+			spritemap: spritemap,
+		},
+		'#advanced-search-block');
+
 		//Without Search
 		new metal.ClayManagementToolbar({
 			creationMenu: '#creationPageURL',

diff --git a/packages/clay-management-toolbar/src/ClayManagementToolbar.js b/packages/clay-management-toolbar/src/ClayManagementToolbar.js
@@ -312,6 +312,15 @@ ClayManagementToolbar.STATE = {
 	 */
 	selectedItems: Config.number(),
 
+	/**
+	 * Flag to indicate if advanced search should be shown or not.
+	 * @instance
+	 * @memberof ClayManagementToolbar
+	 * @type {?bool}
+	 * @default false
+	 */
+	showAdvancedSearch: Config.bool().value(false),
+
 	/**
 	 * Flag to indicate if the Info button should be shown or not.
 	 * @instance