dashboard : avancées type

plugin/dashboard/DashboardWidget.class.php

@@ -23,6 +23,7 @@ class DashboardWidget extends Entity{
 	public $description;
 	public $label;
 	public $content;
+	public $uid;
 
 
 	public const MODEL_NEW = 'new';
@@ -93,6 +94,7 @@ class DashboardWidget extends Entity{
 		$clock->content = '<div class="text-center m-auto">13:37</div>';
 		$clock->width = 3;
 		$clock->height = 3;
+		$clock->uid = 'clock';
 		$models['clock'] = $clock;
 
 
@@ -101,13 +103,15 @@ class DashboardWidget extends Entity{
 		$newModel->headerBackground = 'rgb(0, 123, 255)';
 		$newModel->description = 'Type de widget non défini';
 		$newModel->label = 'Nouveau widget';
-		$newModel->content = '<div class="text-center m-auto">Cliquez sur l\'icone <i class="fas fa-ellipsis-v text-muted mx-1"></i> en haut à droite pour configurer votre widget</div>';
+		$newModel->content = '<small class="text-center m-auto text-muted">Veuillez configurer votre widget</small>';
 		$newModel->width = 3;
 		$newModel->height = 2;
+		$newModel->uid = self::MODEL_NEW;
 		$models[self::MODEL_NEW] = $newModel;
 
 		foreach($models as $model){
 			if(!isset($model->model)) continue;
+			if(empty($model->label)) $model->label = 'Sans titre';
 			$models[$model->model] = $model;
 		}
 		if(!isset($slug)) return $models;

plugin/dashboard/action.php

@@ -124,3 +124,21 @@ Action::register('dashboard_widget_configure',function(&$response){
 		break;
 	}
 });
+
+
+Action::register('dashboard_widget_select_model',function(&$response){
+	global $_;
+	User::check_access('dashboard','edit');
+	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');
+	if(empty($_['model'])) throw new Exception('Widget model introuvable');
+
+	$widget->model  = $_['model'];
+	$widget->save();
+});
+

plugin/dashboard/css/component.css

@@ -227,4 +227,39 @@
     margin: 5px;
     background: #ebebeb;
     list-style-type: none;
+}
+
+.widget-types li h3{
+	font-size: 20px;
+	text-transform: uppercase;
+    color: #213066;
+}
+
+.dashboard-modal .widget-types li {
+	cursor: pointer;
+	position: relative;
+	transition: background 0.2s ease-in-out;
+	opacity: 0.8;
+}
+
+.dashboard-modal .widget-types li.active {
+	background:  #007bff!important;
+	color: #ffffff;
+	opacity: 1;
+}
+
+.widget-types li.active li h3,.widget-types li.active .widget-type-info{
+	color:  #97c9ff;
+}
+
+.widget-type-info{
+	color: #cecece;
+	position: absolute;
+	top: 5px;
+	right: 5px;
+	cursor: pointer;
+}
+
+.dashboard-modal .modal-lg{
+    max-width: 1200px;
 }

plugin/dashboard/css/main.css

@@ -11,6 +11,3 @@ html.module-index,
 	background-color: #efefef;
 }
 
-.dashboard-modal .modal-lg{
-    max-width: 1200px;
-}

plugin/dashboard/dashboard.plugin.php

@@ -118,10 +118,11 @@ function dashboard_application_bottom(){
 						</div>
 						<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-id="{{id}}" class="shadow-sm bg-white hidden">
+							    <li data-model="{{model}}" class="shadow-sm bg-white hidden">
 							        <h3><i class="{{icon}}"></i> {{label}}</h3>
 							        <p>{{description}}</p>
-							        <a>+ D'infos</a>
+							        <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>

plugin/dashboard/js/component.js

@@ -6,6 +6,7 @@ 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'),
@@ -106,7 +107,17 @@ function init_components_dashboard(input){
 		        id : id,
 		        menu : menu
 		    },function(response){
-
+		    	$('#widget-types li').click(function(){
+		    		$('#widget-types li').removeClass('active');
+		    		$(this).addClass('active');
+		    		$.action({
+				        action : data.onSelectModel,
+				        id : id,
+				        model : $(this).attr('data-model')
+				    },function(response){
+
+				    });
+		    	});
 		    });
 		}