Task #68 chore: Modify the extension and added new widget

src/components/com_tjdashboard/administrator/views/widget/tmpl/edit.php

@@ -17,6 +17,8 @@
 
 JHtml::_('behavior.formvalidator');
 JHtml::_('behavior.keepalive');
+JHtml::_('formbehavior.chosen', 'select');
+
 $app = JFactory::getApplication();
 $input = $app->input;
 $document = JFactory::getDocument();

src/components/com_tjdashboard/site/assets/css/dashboard.css

@@ -7,4 +7,107 @@
     font-size: 1.4em;
     font-weight: bold;
     line-height: 25px;
-}
+}
+.widget-boxes{
+  .filter-widget{
+    min-height: 100px;
+  }
+  .widget-label {
+    margin-left: -15px !important;
+    font-size: 30px;
+  }
+  .widget-label-title{
+    @extend .widget-label;
+    margin-left: -30px;
+    margin-top: 0 !important;
+  }
+  .panel{
+    width: 100%;
+    height: 100%;
+    border: solid 1px $primary-blue-400;
+    .panel-heading{
+      color: $primary-white-600;
+      background-color: $primary-blue-400;
+      border-color: $primary-blue-400;
+    }
+    .panel-body{
+      min-height: 100px;
+    }
+  }
+}
+.dashboard-filter{
+  .col-sm-12{
+    padding: 0 !important;
+  }
+  .widget-title{
+    display: none;
+  }
+  .panel{
+    border: none;
+    box-shadow: none;
+    .panel-body{
+      padding: 0;
+    }
+    .panel-heading{
+      border: none;
+      background: none;
+    }
+  }
+}
+.dashboard-widget-row-1{
+  .panel-body{
+    min-height: 0 !important;
+  }
+}
+@include respond-above(sm) {
+  .widget-boxes{
+    display: flex;
+    padding: 15px 5px;
+    clear: both;
+    .col-sm-3{
+      padding-left: 0px;
+    }
+    .panel{
+      margin-bottom: 7px;
+    }
+  }
+  .dashboard-widget-row-1{
+    .panel-body{
+      padding-right: 0 !important;
+    }
+  }
+}
+.dashboard-widget-label{
+  padding:0 10px !important;
+  display: inline-block;
+  clear: inherit;
+  .widget-title{
+    display: none;
+  }
+  .panel{
+    border: none;
+    box-shadow: none;
+    .panel-heading{
+      border: none;
+      background: none;
+    }
+  }
+}
+.loader-spin-blue{
+	border:5px solid #22b8f0;
+	border-radius:50%;
+	border-top:5px solid #ccc;
+	width:35px;
+	height:35px;
+	-webkit-animation:spin 2s linear infinite;
+	animation:spin 2s linear infinite;
+	position:absolute;left:50%;top:50%
+}
+@-webkit-keyframes spin{
+	0%{-webkit-transform:rotate(0deg)}
+	100%{-webkit-transform:rotate(360deg)}
+}
+@keyframes spin{
+	0%{transform:rotate(0deg)}
+	100%{transform:rotate(360deg)}
+}

src/components/com_tjdashboard/site/assets/js/tjDashboardService.js

@@ -32,11 +32,11 @@ var TJDashboardService = {
 		return this.postData(root_url + this.api_dashboard_url + id, params);
 	},
 
-	getWidget: function(id) {
+	getWidget: function(id, extraParams=null) {
 		var params = {};
 		params.method = 'GET';
-		/** global: root_url */
-		return this.postData(root_url + this.api_widget_url + id, params);
+		/** global: root_url ; extraParams: to send extra parameters in URLs*/
+		return this.postData(root_url + this.api_widget_url + id, params, extraParams);
 	},
 
 	getRenderers: function(selectedDataPlugin) {
@@ -52,6 +52,6 @@ var TJDashboardService = {
 		var params = {};
 		formData.pluginName = selectedDataPlugin;
 		/** global: root_url */
-		return this.postData(root_url + this.get_widget_params, params, formData);		
+		return this.postData(root_url + this.get_widget_params, params, formData);
 	}
 }

src/components/com_tjdashboard/site/assets/js/tjDashboardUI.js

@@ -14,6 +14,7 @@ var TJDashboardUI = {
 	var promise = TJDashboardService.getDashboard(id);
 
 	promise.done(function(response) {
+
 			if(!response.data.dashboard_id)
 			{
 				return false;
@@ -29,42 +30,86 @@ var TJDashboardUI = {
 			var i = 0;
 			var j = 1;
 
-			jQuery('<div class="row dashboard-widget-row-'+j+'">').appendTo('.tjdashboard');
+			jQuery('<div class="widget-boxes row dashboard-filter dashboard-widget-row-'+j+'">').appendTo('.tjdashboard');
 			jQuery.each (response.data.widget_data, function(index, value)
 			{
 				var colorClass = "panel-default";
 				var icon = "";
+				var filterClass  = "";
+				var groupHeadClass  = "";
+				var titleLink  = "";
 
 				if(value.params)
 				{
 					try
 					{
-							value.params = JSON.parse(value.params);
-
-							if(value.params.color){
-								colorClass=value.params.color;
-							}
-
-							if(value.params.icon){
-								icon = value.params.icon;
-							}
-					  }
-					  catch(e)
-					  {
-							value.params = {};
-					  }
+						value.params = JSON.parse(value.params);
+
+						if(value.params.color){
+							colorClass=value.params.color;
+						}
+
+						if(value.params.icon){
+							icon = value.params.icon;
+						}
+
+						if(value.params.filter!=undefined && (value.params.filter == true))
+						{
+							filterClass = " filter-widget";
+						}
+
+						if(value.params.grouping!=undefined && (value.params.grouping == true))
+						{
+							groupHeadClass = " dashboard-widget-label";
+						}
+
+						if(value.params.titlelink!=undefined && (value.params.titlelink !== ''))
+						{
+							titleLink = value.params.titlelink;
+						}
+					}
+					catch(e)
+					{
+						value.params = {};
+					}
+				}
+
+				if (parseInt(value.size) === 12 && j > 1)
+				{
+					j++;
+					jQuery('</div><div class="widget-boxes row '+groupHeadClass+' dashboard-widget-row-'+j+'">').appendTo('.tjdashboard');
+					divSpan = 0;
 				}
 
-				jQuery('<div class="col-xs-' +value.size+'"><div class="widget-data panel '+colorClass+'"><div class="widget-title panel-heading"><span class="'+ icon + '" aria-hidden="true"></span> <b>'+value.title+'</b><span id="view-all-'+value.dashboard_widget_id+'" class="pull-right"></span></div><div data-dashboard-widget-id="'+value.dashboard_widget_id+'" id="dashboard-widget-'+value.dashboard_widget_id+'" class=""></div></div></div>').appendTo('.dashboard-widget-row-'+j);
+				var widgetPanel = '<div class="col-sm-' +value.size+'"><div class="widget-data panel '+colorClass+'"><div class="widget-title panel-heading"><span class="fs-20 pr-5 '+ icon + '" aria-hidden="true"></span>';
+
+				if (jQuery.trim(titleLink) !='')
+				{
+					widgetPanel += '<a class="text-white title-link-'+value.dashboard_widget_id+'" href="'+ Joomla.getOptions('system.paths').base + '/' + titleLink + '">';
+				}
+
+				widgetPanel += '<span class="ml-10 fs-18 font-600">' + value.title + '</span>';
+
+				if (jQuery.trim(titleLink) !='')
+				{
+					widgetPanel += '</a>';
+				}
+
+				widgetPanel += '<span id="view-all-'+value.dashboard_widget_id+'" class="pull-right"></span></div><div data-dashboard-widget-id="'+value.dashboard_widget_id+'" id="dashboard-widget-'+value.dashboard_widget_id+'" class="'+filterClass+'"></div></div></div>';
+
+				jQuery(widgetPanel).appendTo('.dashboard-widget-row-'+j);
+
+				// To display loader
+				jQuery('#dashboard-widget-'+value.dashboard_widget_id).html('<span class="loader-spin-blue"></span>');
 
 				TJDashboardUI.initWidget(value);
 				i++;
 				divSpan = parseInt(divSpan) + parseInt(value.size);
 
-				if (divSpan === 12 && response.data.widget_data.length !== i)
+				if (divSpan >= 12 && response.data.widget_data.length !== i)
 				{
 					j++;
-					jQuery('</div><div class="row dashboard-widget-row-'+j+'">').appendTo('.tjdashboard');
+					jQuery('</div><div class="widget-boxes row dashboard-widget-row-'+j+'">').appendTo('.tjdashboard');
 					divSpan = 0;
 				}
 
@@ -78,10 +123,10 @@ var TJDashboardUI = {
 		});
 	},
 
-	initWidget : function(widgetData){
+	initWidget : function(widgetData, extraParams = null){
 		/** global: TJDashboardService */
 
-		var promise = TJDashboardService.getWidget(widgetData.dashboard_widget_id);
+		var promise = TJDashboardService.getWidget(widgetData.dashboard_widget_id, extraParams);
 		promise.done(function(response) {
 
 			if(!response.data.dashboard_widget_id)
@@ -114,7 +159,7 @@ var TJDashboardUI = {
 			var linkArrayCount = 0;
 			var renderData = JSON.parse(sourceData['data']);
 			var showLinks ='';
-			
+
 			if (renderData.links)
 			{
 				linkArrayCount = renderData.links.length;
@@ -153,7 +198,7 @@ var TJDashboardUI = {
 	_addJsFiles: function(jsObj,method,sourceData,libraryClassName){
 		jQuery.each(jsObj,function(index,value){
 			jQuery.getScript(value, function() {
-			   window[libraryClassName].renderData(method,sourceData);
+				window[libraryClassName].renderData(method,sourceData);
 			});
 		});
 	},
@@ -190,7 +235,7 @@ var TJDashboardUI = {
 			});
 			jQuery('#jform_renderer_plugin').val(defaultValue);
 		});
-		
+
 		var promiseParams = TJDashboardService.getWidgetParams(selectedDataPlugin);
 		promiseParams.done(function(response) {
 			jQuery('#jform_params').val(response.data);
@@ -201,6 +246,27 @@ var TJDashboardUI = {
 		var defaultValue = jQuery('#jform_size').val();
 		jQuery('#jform_size').replaceWith('<select id="jform_size" name="jform[size]" class="inputbox required" required="required" aria-required="true"><option value="">Select Size</option><option value="12">' + Joomla.JText._("COM_TJDASHBOARD_WIDGET_FORM_FULL_WIDTH") + '</option><option value="6">' + Joomla.JText._("COM_TJDASHBOARD_WIDGET_FORM_HALF_WIDTH") + '</option><option value="4">' + Joomla.JText._("COM_TJDASHBOARD_WIDGET_FORM_ONE_THIRD_WIDTH") + '</option><option value="3">' + Joomla.JText._("COM_TJDASHBOARD_WIDGET_FORM_ONE_FOURTH_WIDTH") +'</option></select>');
 		jQuery('#jform_size').val(defaultValue);
-	}
+	},
 
+	widgetListener: function(){
+		var widgetData = {'dashboard_widget_id':0,'params':''};
+		var formData = jQuery(".widget-filters").serialize();
+		var widgetIds = [];
+		var id = '';
+		jQuery(".filter-widget").each(function() {
+			id = jQuery(this).data('dashboard-widget-id');
+			if (jQuery.inArray(id, widgetIds) == -1)
+			{
+				jQuery('#dashboard-widget-'+id).html('<span class="loader-spin-blue"></span>');
+
+				widgetIds.push(id);
+				widgetData.dashboard_widget_id = id;
+				TJDashboardUI.initWidget(widgetData, formData);
+			}
+		});
+	}
 }
+
+jQuery(document).on("change", ".widget-filters", function () {
+	TJDashboardUI.widgetListener();
+});