dashbaord : type + style(wip)

plugin/dashboard/action.php

@@ -21,7 +21,16 @@ Action::register('dashboard_widget_search',function(&$response){
 	foreach($widgets as $widget){
 		$response['widgets'][] = $widget->toData();
 	}
+});
+
+Action::register('dashboard_widget_by_id',function(&$response){
+	global $_;
+	User::check_access('dashboard','read');
+	require_once(__DIR__.SLASH.'DashboardWidget.class.php');
+	require_once(__DIR__.SLASH.'Dashboard.class.php');
 
+	if(empty($_['id']))  throw new Exception('Id non spécifiée');
+	$response['item'] = DashboardWidget::getById($_['id'])->toArray();
 });
 
 Action::register('dashboard_widget_add',function(&$response){
@@ -98,35 +107,18 @@ Action::register('dashboard_widget_delete',function(&$response){
 });
 
 
-Action::register('dashboard_widget_configure',function(&$response){
+
+Action::register('dashboard_model_search',function(&$response){
 	global $_;
-	User::check_access('dashboard','edit');
+	User::check_access('dashboard','read');
 	require_once(__DIR__.SLASH.'DashboardWidget.class.php');
 	require_once(__DIR__.SLASH.'Dashboard.class.php');
-
-	if(empty($_['id'])) throw new Exception('Aucun identifiant renseigné');
-
-	$widget = DashboardWidget::getById($_['id'],1);
-	if(!$widget) throw new Exception('Widget introuvable');
-
-	switch($_['menu']){
-		case 'type':
-			$response['rows'] = DashboardWidget::model();
-			unset($response['rows'][DashboardWidget::MODEL_NEW]);
-		break;
-
-		case 'properties':
-		//@TODO
-		break;
-
-		case 'style':
-		//@TODO
-		break;
-	}
+	$response['rows'] = DashboardWidget::model();
+	unset($response['rows'][DashboardWidget::MODEL_NEW]);
 });
 
 
-Action::register('dashboard_widget_select_model',function(&$response){
+Action::register('dashboard_widget_configure',function(&$response){
 	global $_;
 	User::check_access('dashboard','edit');
 	require_once(__DIR__.SLASH.'DashboardWidget.class.php');
@@ -136,9 +128,9 @@ Action::register('dashboard_widget_select_model',function(&$response){
 
 	$widget = DashboardWidget::getById($_['id'],1);
 	if(!$widget) throw new Exception('Widget introuvable');
-	if(empty($_['model'])) throw new Exception('Widget model introuvable');
 
-	$widget->model  = $_['model'];
+	$widget->fromArray($_);
 	$widget->save();
 });
 
+

plugin/dashboard/css/component.css

@@ -216,14 +216,14 @@
     color: var(--white);
     background-color: var(--primary);
 }
-.dashboard-modal .widget-types{
+.dashboard-modal .widget-models{
     padding: 0;
     margin: 0;
     display: grid;
     grid-template-columns: auto auto auto;
     list-style-type: none;
 }
-.dashboard-modal .widget-types li{
+.dashboard-modal .widget-models li{
     border-radius: 2px;
     padding: 5px;
     margin: 5px;
@@ -237,24 +237,24 @@
     color: #213066;
 }
 
-.dashboard-modal .widget-types li {
+.dashboard-modal .widget-models li {
 	cursor: pointer;
 	position: relative;
 	transition: background 0.2s ease-in-out;
 	opacity: 0.8;
 }
 
-.dashboard-modal .widget-types li.active {
+.dashboard-modal .widget-models li.active {
 	background:  #007bff!important;
 	color: #ffffff;
 	opacity: 1;
 }
 
-.widget-types li.active li h3,.widget-types li.active .widget-type-info{
+.widget-types li.active li h3,.widget-models li.active .widget-model-info{
 	color:  #97c9ff;
 }
 
-.widget-type-info{
+.widget-model-info{
 	color: #cecece;
 	position: absolute;
 	top: 5px;

plugin/dashboard/dashboard.plugin.php

@@ -99,9 +99,9 @@ function dashboard_application_bottom(){
 					<div class="row h-100">
 						<div class="col-md-3 border-right px-0 overflow-auto h-100 dashboard-configure-menu" id="dashboard-configure-menu">
 							<ul class="nav nav-tabs flex-column dashboard-configure-menu rounded-0 border-0" id="dashboard-configure-menu" role="tablist" aria-orientation="vertical">
-								<li data-menu='type' class="nav-item border-bottom">
-									<a class="nav-link border-0 rounded-0 active" id="type-tab" data-toggle="tab" href="#type" role="tab" aria-controls="type" aria-selected="true">
-										<i class="far fa-window-maximize mr-1"></i>Type
+								<li data-menu='model' class="nav-item border-bottom">
+									<a class="nav-link border-0 rounded-0 active" id="model-tab" data-toggle="tab" href="#model" role="tab" aria-controls="model" aria-selected="true">
+										<i class="far fa-window-maximize mr-1"></i>Modèle
 									</a>
 								</li>
 								<li data-menu='properties' class="nav-item border-bottom">
@@ -116,21 +116,49 @@ function dashboard_application_bottom(){
 								</li>
 							</ul>
 						</div>
+						<template id="configure-model">
+								<ul id="widget-models" class="widget-models bg-light">
+								    <li data-model="{{model}}" class="shadow-sm bg-white hidden">
+								        <h3><i class="{{icon}}"></i> {{label}}</h3>
+								        <p>{{description}}</p>
+								        <i onclick="e.stopPropagation();$(this).next().toggleClass('hidden')" title="plus d'information sur le widget" class="fas fa-info-circle widget-model-info"></i>
+								        <div class="hidden text-muted">{{description}}</div>
+								    </li>
+								</ul>
+						</template>
+						<template id="configure-style">
+							<table class="table" id="configure-style-table">
+								<tbody>
+									<tr>
+										<th colspan="2" class="align-middle">En-tête</th>
+									</tr>
+									<tr>
+										<td><input type="text" data-type="color" id="widget-header-icon"></td>
+										<td class="align-middle">Icône</td>
+									</tr>
+									<tr>
+										<td><input type="text" data-type="color" id="widget-header-background"></td>
+										<td class="align-middle">Couleur de fond</td>
+									</tr>
+									<tr>
+										<th colspan="2" class="align-middle">Corps</th>
+									</tr>
+									<tr>
+										<td><input type="text" data-type="color" id="widget-body-background"></td>
+										<td class="align-middle">Couleur de fond</td>
+									</tr>
+
+								</tbody>
+							</table>
+						</template>
 						<div class="col-md-9 px-0 overflow-auto h-100 dashboard-configure-content" id="dashboard-configure-content">
-							<ul id="widget-types" class="widget-types bg-light">
-							    <li data-model="{{model}}" class="shadow-sm bg-white hidden">
-							        <h3><i class="{{icon}}"></i> {{label}}</h3>
-							        <p>{{description}}</p>
-							        <i onclick="e.stopPropagation();$(this).next().toggleClass('hidden')" title="plus d'information sur le widget" class="fas fa-info-circle widget-type-info"></i>
-							        <div class="hidden text-muted">{{description}}</div>
-							    </li>
-							</ul>
+							
 						</div>
 					</div>
 				</div>
 			</div>
 			<div class="modal-footer">
-				<button type="button" class="btn btn-primary">Enregistrer</button>
+				<button type="button" class="btn">Fermer</button>
 			</div>
 		</div>
 	</div>

plugin/dashboard/js/component.js

@@ -6,7 +6,6 @@ function init_components_dashboard(input){
 		onRemove: 'dashboard_widget_delete',
 		onResize: 'dashboard_widget_resize',
 		onConfigure: 'dashboard_widget_configure',
-		onSelectModel: 'dashboard_widget_select_model',
 		onAdd: 'dashboard_widget_add'
 	},{
 		column: input.attr('data-column'),
@@ -60,7 +59,6 @@ function init_components_dashboard(input){
 		content : '<p>Wazup 2 ?</p>'
 	}]);*/
 
-
 	component.on('placeholder-click',function(placeholder){
 		$.action({
 			action : data.onAdd,
@@ -71,9 +69,7 @@ function init_components_dashboard(input){
 		},function(widget){
 			component.addWidgets([widget]);
 		});
-	});
-
-	component.on('move',function(widget){
+	}).on('move',function(widget){
 		console.log('Widget has moved', widget);
 
 		$.action({
@@ -99,43 +95,71 @@ function init_components_dashboard(input){
 		});
 
 	}).on('configure',function(id){
-
-
-		var selectMenu = function(id,menu){
-			$('#widget-types').fill({
-		        action : data.onConfigure,
-		        id : id,
-		        menu : menu
-		    },function(response){
-
-		    	switch(menu){
-		    		case 'type':
-		    		
-		    		$('#widget-types li').click(function(){
-			    		$('#widget-types li').removeClass('active');
-			    		$(this).addClass('active');
-			    		$.action({
-					        action : data.onSelectModel,
-					        id : id,
-					        model : $(this).attr('data-model')
+		
+		$.action({
+		        action : 'dashboard_widget_by_id',
+		        id : id
+		},function(response){
+			var widget = response.item;
+			$('#dashboard-configure-menu li').off().click(function(){
+					
+			    var li = $(this);
+			    var menu = li.attr('data-menu');
+			    li.addClass('active').parent().find('>li').removeClass('active');
+			 	
+			 	switch(menu){
+			 		case "model":
+
+			 			$('#dashboard-configure-content').html($('#configure-model').html());
+
+			 			init_components('#dashboard-configure-content');
+			 			var modelList = $('#widget-models');
+			 			modelList.fill({
+					        action : 'dashboard_model_search',
 					    },function(response){
-
+					    	$('li',modelList).removeClass('active');
+					    	$('li[data-model="'+widget.model+'"]',modelList).addClass('active');
+					    	$('li',modelList).click(function(){
+					    		$('#widget-models li').removeClass('active');
+					    		$(this).addClass('active');
+					    		$.action({
+							        action : data.onConfigure,
+							        id : widget.id,
+							        model : $(this).attr('data-model')
+							    },function(response){
+							    });
+					    	});
 					    });
-			    	});
-		    		break;
-		    	}
-		    });
-		}
-
-		selectMenu(id,"type");
+			 		break;
+			 		case "style":
+			 			$('#dashboard-configure-content').html($('#configure-style').html());
+			 			$.action({
+			 				 action : 'dashboard_widget_by_id',
+			 				 id : widget.id
+			 			},function(response){
+			 				$('#configure-style-table').fromJson(response.item).change(function(){
+			 					var data = {}
+			 					data.action =  data.onConfigure;
+			 					data.id = widget.id;
+			 					var form = $('#configure-style-table').toJson();
+			 					data.headerBackground = form['widget-header-background'];
+			 					data.bodyBackground = form['widget-body-background'];
+			 					data.headerIcon = form['widget-header-icon'];
+
+			 					$.action(data);
+			 			});
+
+			 			});
+			 			init_components('#dashboard-configure-content');
+			 		break;
+			 	}
+			   
+			});
+		
+			$('#dashboard-configure-menu li[data-menu="model"]').click();
+		});
 
-		$('#dashboard-configure-menu li').click(function(){
-		    var li = $(this);
-		    var menu = li.attr('data-menu');
-		    li.parent().find('>li').removeClass('active');
-		    li.addClass('active');
+		
 
-		    selectMenu(id,menu);
-		});
 	});
 }

plugin/dashboard/js/dashboard.js

@@ -261,8 +261,10 @@ class Dashboard {
 	}
 
 	configureWidget(id){
+		
 		var object = this;
-		$('#dashboard-modal').on('shown.bs.modal', function () {
+		$('#dashboard-modal').off('shown.bs.modal').on('shown.bs.modal', function () {
+			
 			object.trigger('configure', id);
 		}).modal('show');
 	}