Dashboard : ui configure

plugin/dashboard/DashboardWidget.class.php

@@ -60,8 +60,8 @@ class DashboardWidget extends Entity{
 		$model = array(
 			'icon' => 'far fa-user',
 			'headerBackground' => 'rgb(0, 123, 255)',
-			'label' => 'Hello monde',
-			'content' => '<p>Wazup ?</p>',
+			'label' => 'Nouveau widget',
+			'content' => '<p class="text-center p-5">Cliquez sur l\'icone <i class="fas fa-ellipsis-v text-muted"></i> en haut à droite pour configurer votre widget</p>',
 			'width' => 3,
 			'height' => 2
 		);

plugin/dashboard/action.php

@@ -108,4 +108,19 @@
 		DashboardWidget::deleteById($widget->id);
 	});
 
+
+	Action::register('dashboard_widget_configure',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('Id non spécifié');
+
+		$widget = DashboardWidget::getById($_['id'],1);
+		if(!$widget) throw new Exception('Widget introuvable');
+		
+		$response['widget'] = $widget->toArray();
+	});
+
 ?>

plugin/dashboard/css/main.css

@@ -22,10 +22,11 @@ html.module-index,
 	transition: background 0.15s linear;
 	cursor: pointer;
 	position: relative;
-	border-radius: 10px;
+	
 }
 .dashboard-placeholder:hover{
 	background-color: #e6e6e6;
+	border-radius: 10px;
 }
 
 .dashboard-placeholder .placeholder-add{
@@ -44,4 +45,16 @@ html.module-index,
 }
 .dashboard-placeholder:hover .placeholder-add{
 	opacity: 1;
+}
+
+.dashboard-configure-menu li.active i.text-muted{
+	color: #ffffff!important;
+}
+
+.dashboard-configure-menu li{
+	cursor: pointer;
+	transition: background 0.2s ease-in-out;
+}
+.dashboard-configure-menu li:hover{
+	background: #f3f3f3;
 }

plugin/dashboard/dashboard.plugin.php

@@ -91,6 +91,39 @@ function dashboard_application_bottom(){
         	<div class="dashboard-widget-resize"><i class="fas fa-chevron-right"></i></div>
     	</div>
  </template>
+
+
+	<!-- Modal -->
+	<div class="modal fade" id="dashboardModal" tabindex="-1" role="dialog"aria-hidden="true">
+	  <div class="modal-dialog modal-lg" role="document">
+	    <div class="modal-content">
+	      <div class="modal-header">
+	        <h5 class="modal-title" id="exampleModalLabel">Configuration</h5>
+	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+	          <span aria-hidden="true">&times;</span>
+	        </button>
+	      </div>
+	      <div class="modal-body p-0">
+	      	<div class="row">
+	      		<div class="col-md-4">
+		      		<ul class="list-group rounded-0 dashboard-configure-menu" id="dashboard-configure-menu">
+					  <li class="list-group-item border-top-0 active"><i class="far fa-window-maximize text-muted"></i> Type</li>
+					  <li class="list-group-item"><i class="fas fa-list-ul text-muted"></i> Propriétés</li>
+					  <li class="list-group-item border-bottom-0"><i class="fas fa-palette text-muted"></i> Style</li>
+					</ul>
+				</div>
+				<div class="col-md-8">
+
+				</div>
+			</div>
+	      </div>
+	      <div class="modal-footer">
+	        <button type="button" class="btn btn-primary">Enregistrer</button>
+	      </div>
+	    </div>
+	  </div>
+	</div>
+
    <?php
 }
 

plugin/dashboard/js/component.js

@@ -7,6 +7,7 @@ function init_components_dashboard(input){
 		onMove : 'dashboard_widget_move',
 		onRemove : 'dashboard_widget_delete',
 		onResize : 'dashboard_widget_resize',
+		onConfigure : 'dashboard_widget_configure',
 		onAdd : 'dashboard_widget_add'
 	},{
 		column : input.attr('data-column'),
@@ -96,6 +97,13 @@ function init_components_dashboard(input){
 			action : data.onRemove,
 			widget : widget
 		});
+	}).on('configure',function(id){
+		$.action({
+			action : data.onConfigure,
+			id : id
+		},function(response){
+			
+		});
 	});
 
 

plugin/dashboard/js/dashboard.js

@@ -112,10 +112,12 @@ class Dashboard {
   			label : 'Sans titre',
   			content : "Aucun contenu"
   		},widgets[k]);
-	  
 
+
+  		widgetOptions.options.push({icon : 'fas fa-ellipsis-v', class:'widget-option-configure' , label : 'Configurer' , click : function(element){ object.configureWidget($(element).closest('.dashboard-widget').attr('data-id')); }});
   		widgetOptions.options.push({icon : 'fa fa-times', class:'widget-option-delete' , label : 'Supprimer' , click : function(element){ object.deleteWidget($(element).closest('.dashboard-widget').attr('data-id')); }});
 
+
 	  	var widgetElement = $(object.widgetTemplate);
 	  	widgetOptions.element = widgetElement;
 	  	object.widgets[widgetOptions.id] = widgetOptions;
@@ -163,6 +165,11 @@ class Dashboard {
   	this.widgets[id].element.remove();
   }
 
+  configureWidget(id){
+  	$('#dashboardModal').modal('show');
+  	this.trigger('configure',id);
+  }
+
   widgetToArray(widget){
   	if(!widget) return {};
   	return {