{# itop-portal-base/portal/src/views/bricks/browse/mode_grid.html.twig #}
{# Browse brick grid mode layout #}
{% extends 'itop-portal-base/portal/src/views/bricks/browse/layout.html.twig' %}

{% block bBrowseMainContent %}
	<div id="brick_content_grid">
		{% block bBrowseGridContent %}
			<ol id="grid-breadcrumb" class="breadcrumb">
				<li><a href="#" data-level-id="L"><span class="fa fa-home"></span></a></li>
			</ol>
			<div class="grid-group" data-level-id="L">
			</div>
		{% endblock %}
	</div>

	<div id="brick_content_empty" class="text-center">
		{% block bBrowseGridEmpty %}
			{{ 'Brick:Portal:Browse:Filter:NoData'|dict_s }}
		{% endblock %}
	</div>
	<div id="brick_grid_overlay">
		{% block bBrowseGridOverlay %}
			<div class="overlay_content">
				{% include 'itop-portal-base/portal/src/views/helpers/loader.html.twig' %}
			</div>
		{% endblock %}
	</div>
{% endblock %}

{% block pPageLiveScripts %}
	{{ parent() }}
	
	<script type="text/javascript">
		var sBrowseMode = '{{ sBrowseMode }}';
		var oLevelsProperties = {{ aLevelsProperties|raw }};
		var oRawDatas = {{ aItems|raw }};
        var sGridEffectName = 'fade';
        var oGridEffectOptions = {};
        var iGridEffectDuration = 200;

        // Show a loader over the grid
		var showGridLoader = function()
		{
			$("#brick_content_grid").hide();
			$('#brick_grid_overlay').show();
		};
		// Hide the loader over the tree
		var hideGridLoader = function()
		{
			$('#brick_grid_overlay').hide();
			$("#brick_content_grid").show();
		}
		// Show the requested level
		var showLevel = function(sLevelAlias, sItemId)
		{
		    // Retrieving level to show
		    var sLevelId = sLevelAlias + ((sItemId !== undefined) ? '::'+sItemId : '' );
		    var oLevelElem = $('#brick_content_grid .grid-group[data-level-id="' + sLevelId + '"]');
		    var bLevelLoaded = (oLevelElem.length > 0);

		    // Hiding current level
            $('#brick_content_grid .grid-group:visible').hide(
                sGridEffectName,
				oGridEffectOptions,
				iGridEffectDuration,
				function(){
                    // Showing level
					if(!bLevelLoaded)
					{
                        showGridLoader();
					    loadChildNodes(sLevelAlias, sItemId);
					}
					else
					{
					    oLevelElem.show(sGridEffectName, oGridEffectOptions, iGridEffectDuration, function(){ buildBreadcrumb(); });
					}
				}
			);
		};
		// Registers the toggle listeners on the tree nodes. Used after every AJAX calls.
		var registerToggleListeners = function()
		{
		    $('#brick_content_grid .grid-drilldown').off('click').on('click', function (oEvent) {
				oEvent.preventDefault();

                showLevel($(this).attr('data-level-alias'), $(this).attr('data-item-id'));
			});

            $('#brick_content_grid .grid-rollup').off('click').on('click', function (oEvent) {
                oEvent.preventDefault();

                var upperlevelId = $(this).attr('data-level-id');
                var upperlevelIdParts = upperlevelId.split('::');

                showLevel(upperlevelIdParts[0], upperlevelIdParts[1]);
            });
		};
		// Registers the filter listeners on the tree.
		var registerFilterListeners = function()
		{
			/*$('#brick_search_field').treeListFilter('#brick_content_grid', iSearchDelay, filterResultsHandler);*/
		};
		// Load current node childnodes throught AJAX
		var loadChildNodes = function(sLevelAlias, sNodeId)
		{
			var sUrl = '{{ app.url_generator.generate('p_browse_brick_mode_tree', {'sBrickId': sBrickId, 'sBrowseMode': sBrowseMode, 'sLevelAlias': '-sLevelAlias-', 'sNodeId': '-sNodeId-'})|raw }}';
			sUrl = sUrl.replace(/-sLevelAlias-/, sLevelAlias).replace(/-sNodeId-/, sNodeId);

            $.ajax(sUrl)
			.done(function(data) {
				// Building child nodes
				for(index in data.data)
				{
					var sublevel = data.data[index];
					var sublevelData = {};
					sublevelData[sublevel.level_alias+"::"+sublevel.id] = sublevel;
					buildGrid(sublevelData, sLevelAlias+"::"+sNodeId, false);
				}
				// Showing sublevel
                $('#brick_content_grid .grid-group[data-level-id="'+sLevelAlias+"::"+sNodeId+'"]').show(sGridEffectName, oGridEffectOptions, iGridEffectDuration, function(){ buildBreadcrumb(); });

				registerToggleListeners();
			})
			.fail(function() {
				alert('{{ 'Error:XHR:Fail'|dict_s }}');
			})
			.always(function(){
                hideGridLoader();
			});
		};
		// Build grid nodes from data under the nodeId
		var buildGrid = function(data, nodeId, isRootLevel)
		{
		    if(nodeId === undefined)
			{
				// We are on the root node
				nodeId = 'L';
			}
			if(isRootLevel === undefined)
			{
				isRootLevel = true;
			}

			// Building node if necessary
			if($('div[data-level-id="'+nodeId+'"]').length === 0)
			{
                $('#brick_content_grid').append( $('<div></div>').addClass('grid-group').attr('data-level-id', nodeId) );
			}

			if(!isRootLevel)
			{
			    // Retrieving upper level id
                var levelIdParts = nodeId.split('::');
                var upperlevelId = $('.grid-item[data-level-alias="'+levelIdParts[0]+'"][data-item-id="'+levelIdParts[1]+'"]').closest('.grid-group').attr('data-level-id');

                // Building back button
                if( $('div[data-level-id="'+nodeId+'"] .grid-group-back').length === 0 ) {
                    var backElem = $('<div></div>').addClass('grid-group-item').addClass('grid-group-back');
                    var aElem = $('<a></a>').addClass('grid-item').addClass('grid-rollup').attr('href', '#').attr('data-level-id', upperlevelId).html('<div class="grid-item-text"><span class="glyphicon glyphicon-arrow-left"></span></div>');

                    backElem.append(aElem);
                    $('div[data-level-id="' + nodeId + '"]').append(backElem);
                }
			}
			else
			{
                $('div[data-level-id="'+nodeId+'"]').html('');
			}
			
			$.each(data, function(i, item){
				var levelId = item.level_alias+'::'+item.id;
				var levelAltId = item.level_alias+'_'+item.id;
				var levelActions = oLevelsProperties[item.level_alias].actions;
				var levelActionsKeys = Object.keys(levelActions);
				var levelPrimaryAction = levelActions[levelActionsKeys[0]];
				var url = '';

                // Building node
                var itemElem  = $('<div></div>').addClass('grid-group-item');
				var aElem   = $('<a></a>').addClass('grid-item').attr('data-item-id', item.id).attr('href', '#').attr('data-level-alias', item.level_alias);
				var iItemFlags = 0;
                // - Adding stub div
				var textElem = $('<div></div>').addClass('grid-item-text');
                // - Adding image
                if( (item.image !== undefined) && (item.image !== '') )
                {
                    iItemFlags += 4;
                    aElem.append( $('<div></div>').addClass('grid-item-image').append( $('<img />').attr('src', item.image) ) );
                }
                // - Adding name
                if( (item.name !== undefined) && (item.name !== '') )
                {
                    iItemFlags += 1;
                    textElem.append( $('<div></div>').addClass('grid-item-name').html(item.name) );
                }
                // - Adding description
                if( (item.description !== undefined) && (item.description !== '') )
                {
                    iItemFlags += 2;
                    textElem.append( $('<div></div>').addClass('grid-item-description').html(item.description) );
				}
                aElem.append( textElem );
				// - Adding CSS class to adjust the layout regarding which properties are available
				aElem.addClass('grid-item-layout-'+iItemFlags);
                // - Appending element
				$('div[data-level-id="'+nodeId+'"]').append(itemElem);
				itemElem.append(aElem);
				
				// Building tooltip for the node
				if( (item.tooltip !== undefined) && (item.tooltip !== '') )
				{
					aElem.attr('title', item.tooltip).attr('data-toggle', 'tooltip').tooltip({html: true, trigger: 'hover', placement: 'top'});
				}
				
				// Building actions for that node
				switch(levelPrimaryAction.type)
				{
					case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_DRILLDOWN') }}':
						aElem.addClass('grid-drilldown');
						break;
					case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_VIEW') }}':
						url = '{{ app.url_generator.generate('p_object_view', {'sObjectClass': '-objectClass-', 'sObjectId': '-objectId-'})|raw }}'.replace(/-objectClass-/, item.class).replace(/-objectId-/, item.id);
                        SetActionUrl(aElem, url);
                        SetActionOpeningTarget(aElem, levelPrimaryAction.opening_target);
                        break;
					case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_EDIT') }}':
						url = '{{ app.url_generator.generate('p_object_edit', {'sObjectClass': '-objectClass-', 'sObjectId': '-objectId-'})|raw }}'.replace(/-objectClass-/, item.class).replace(/-objectId-/, item.id);
                        SetActionUrl(aElem, url);
                        SetActionOpeningTarget(aElem, levelPrimaryAction.opening_target);
                        break;
					case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_CREATE_FROM_THIS') }}':
						url = levelPrimaryAction.url.replace(/-objectClass-/, item.class).replace(/-objectId-/, item.id);
						url = AddParameterToUrl(url, 'ar_token', item.action_rules_token[levelPrimaryAction.type]);
                        SetActionUrl(aElem, url);
                        SetActionOpeningTarget(aElem, levelPrimaryAction.opening_target);
                        break;
					default:
						//console.log('Action "'+levelPrimaryAction.type+'" not implemented for primary action');
						break;
				}
				
				if(levelActionsKeys.length > 1)
				{
					// Retrieving secondary action
					var actionsButtons = {};
					for(j = 1; j < levelActionsKeys.length; j++)
					{
						actionsButtons[levelActionsKeys[j]] = levelActions[levelActionsKeys[j]];
					}
					
					// Preparing secondary actions container
					var actionsElem = $('<div></div>').addClass('grid-group-item-actions');
					itemElem.append(actionsElem);
					// Checking if a menu is necessary
					var bHasSeveralSecondaryActions = (Object.keys(actionsButtons).length > 1);
					// Preparing secondary actions menu
					if(bHasSeveralSecondaryActions)
					{
						var actionsSSTogglerElem = $('<a class="glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target="#item-actions-menu-'+levelAltId+'"></a>');
						var actionsSSMenuElem = $('<div id="item-actions-menu-'+levelAltId+'" class="item-action-wrapper panel panel-default"></div>');
						var actionsSSMenuContainerElem = $('<div class="panel-body"></div>');
						actionsSSMenuElem.append(actionsSSMenuContainerElem);
						actionsElem.append(actionsSSTogglerElem);
						actionsElem.append(actionsSSMenuElem);
					}
					
					// Adding secondary actions
					for(j in actionsButtons)
					{
						var action = actionsButtons[j];
						var actionElem = $('<a></a>');
						var actionIconElem = $('<span></span>').appendTo(actionElem);
						
						switch(action.type)
						{
							case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_VIEW') }}':
								url = '{{ app.url_generator.generate('p_object_view', {'sObjectClass': '-objectClass-', 'sObjectId': '-objectId-'})|raw }}'.replace(/-objectClass-/, item.class).replace(/-objectId-/, item.id);
								break;
							case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_EDIT') }}':
								url = '{{ app.url_generator.generate('p_object_edit', {'sObjectClass': '-objectClass-', 'sObjectId': '-objectId-'})|raw }}'.replace(/-objectClass-/, item.class).replace(/-objectId-/, item.id);
								break;
							case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_CREATE_FROM_THIS') }}':
								url = action.url.replace(/-objectClass-/, item.class).replace(/-objectId-/, item.id);
								url = AddParameterToUrl(url, 'ar_token', item.action_rules_token[action.type]);
								break;
							default:
							    url = '#';
								//console.log('Action "'+action.type+'" not implemented for secondary action');
								break;
						}
                        SetActionUrl(actionElem, url);
                        SetActionOpeningTarget(actionElem, action.opening_target);
						
						// Adding title if present
						if(action.title !== undefined)
						{
							actionElem.attr('title', action.title);
						}
						// Adding icon class if present
						if(action.icon_class !== undefined)
						{
							actionIconElem.addClass(action.icon_class);
						}
						
						if(bHasSeveralSecondaryActions)
						{
							actionElem.append(action.title);
							actionsSSMenuContainerElem.append( $('<p></p>').append(actionElem) );
						}
						else
						{
							actionsElem.append(actionElem);
						}
					}
				}
				
				// Building subnodes if necessary
				if(item.subitems.length !== 0)
				{
                    var subitemsElem;
				    if($('div[data-level-id="'+levelId+'"]').length > 0)
					{
                        subitemsElem = $('div[data-level-id="'+levelId+'"]');
					}
					else
					{
					    subitemsElem = $('<div></div>').addClass('grid-group').attr('data-level-id', levelId);
                        $('div[data-level-id="'+nodeId+'"]').after(subitemsElem);
					}
					buildGrid(item.subitems, levelId, false);
				}				
			});
			
			// Update listeners
			if(isRootLevel)
			{
				registerToggleListeners();
			}
		};
		// Build breadcrumb
		var buildBreadcrumb = function(oCurrentElem)
		{
            var aCurrentLevelParts = [];
            var bLeafLevel = false;

		    // If no current item, it's because we begin to build the breadcrumb, starting from the bottom
			if(oCurrentElem === undefined)
			{
			    bLeafLevel = true;

                // Retrieving current level id
                var sCurrentLevelId = $('#brick_content_grid > .grid-group:visible').attr('data-level-id');
                aCurrentLevelParts = sCurrentLevelId.split('::');

                // Emptying breadcrumb
                $('#grid-breadcrumb > li:not(:first-of-type)').remove();

				// Finding current item
                oCurrentElem = $('#brick_content_grid .grid-item[data-level-alias="'+aCurrentLevelParts[0]+'"][data-item-id="'+aCurrentLevelParts[1]+'"]');
                if(oCurrentElem.length === 0)
				{
				    return false;
				}
			}
			else
			{
			    aCurrentLevelParts = [oCurrentElem.attr('data-level-alias'), oCurrentElem.attr('data-item-id')];
			}

            // Adding level as crumb
			var oCrumb = $('<li></li>');
			var oCrumbLink = (bLeafLevel) ? $('<span></span>') : $('<a></a>');
			oCrumbLink.html( oCurrentElem.find('.grid-item-name').html() );
			oCrumbLink.attr('data-level-id', aCurrentLevelParts.join('::')).attr('href', '#');
			oCrumb.append(oCrumbLink).insertAfter('#grid-breadcrumb > li:first-of-type');
			if(bLeafLevel)
			{
                oCrumb.addClass('active');
            }
			// Adding listener
			$('#grid-breadcrumb > li:not(:last-of-type) > a').off('click').on('click', function(oEvent){
                oEvent.preventDefault();

				var levelId = $(this).attr('data-level-id');
				var levelIdParts = levelId.split('::');

				showLevel(levelIdParts[0], levelIdParts[1]);
            });

			// Finding parent level
			var oParentLevelElem = oCurrentElem.closest('.grid-group');
			if(oParentLevelElem.length > 0)
			{
			    var sParentLevelId = oParentLevelElem.attr('data-level-id');
			    var aParentLevelParts = sParentLevelId.split('::');
			    var oParentElem = $('#brick_content_grid .grid-item[data-level-alias="'+aParentLevelParts[0]+'"][data-item-id="'+aParentLevelParts[1]+'"]');

			    if(oParentElem.length === 1)
				{
				    buildBreadcrumb(oParentElem);
				}
			}
		};
		
		$(document).ready(function(){
			// Auto collapse item actions popup
			$('body').click(function(){
				$('#brick_content_grid .item-action-wrapper.collapse.in').collapse('hide');
			});
			
			// Build the tree (collapsed)
			showGridLoader();
			buildGrid(oRawDatas);
			hideGridLoader();
			registerFilterListeners();
		});
	</script>
{% endblock %}