By yanniboi: Allow reordering and configuring of tabs.

contacts.module

@@ -28,7 +28,10 @@ use Drupal\Core\Session\AccountInterface;
 function contacts_theme() {
   return [
     'contacts_dash_tabs' => [
-      'variables' => ['tabs' => []],
+      'variables' => [
+        'tabs' => [],
+        'manage_mode' => NULL,
+      ],
       'template' => 'contacts-dash-tabs',
     ],
     'contacts_dash_summary' => [
@@ -130,7 +133,40 @@ function template_preprocess_contacts_dash_tabs(array &$variables) {
     ],
   ];
 
-  foreach ($variables['tabs'] as &$tab) {
+  foreach ($variables['tabs'] as $tab_id => &$tab) {
+    if ($variables['manage_mode']) {
+      // Add ui icons for manage mode.
+      $tab['ui'] = [
+        'drag' => [
+          '#type' => 'open_iconic',
+          '#size' => '15',
+          '#icon' => 'move',
+          '#color' => 'transparent',
+          '#fill' => '#000',
+          '#attributes' => [
+            'class' => ['contacts-ui-icon', 'icon-left', 'drag-handle'],
+          ],
+        ],
+        'edit' => [
+          '#type' => 'open_iconic',
+          '#size' => '15',
+          '#icon' => 'cog',
+          '#color' => 'transparent',
+          '#fill' => '#5bc0de',
+          '#attributes' => [
+            'class' => ['use-ajax', 'contacts-ui-icon', 'icon-left'],
+            'data-ajax-url' => Url::fromRoute('contacts.tab.off_canvas_form',
+              [
+                'tab' => $tab_id,
+              ]
+            )->toString(),
+            'data-dialog-type' => 'dialog',
+            'data-dialog-renderer' => 'off_canvas',
+          ],
+        ],
+
+      ];
+    }
     $tab['attributes'] = !empty($tab['attributes']) ? new Attribute($tab['attributes']) : new Attribute();
     $tab['link_attributes'] = !empty($tab['link_attributes']) ? new Attribute($tab['link_attributes']) : new Attribute();
   }

contacts.routing.yml

@@ -43,6 +43,13 @@ contacts.ajax.update_blocks:
   requirements:
     _permission: 'manage contacts dashboard'
 
+contacts.ajax.update_tabs:
+  path: '/admin/contacts/ajax/update-tabs'
+  defaults:
+    _controller: '\Drupal\contacts\Controller\DashboardController::ajaxUpdateTabs'
+  requirements:
+    _permission: 'manage contacts dashboard'
+
 contacts.block.off_canvas_form:
   path: '/admin/contacts/ajax/manage-off-canvas/{tab}/{block_name}'
   defaults:
@@ -54,3 +61,15 @@ contacts.block.off_canvas_form:
         type: entity:contact_tab
   requirements:
     _permission: 'administer blocks'
+
+contacts.tab.off_canvas_form:
+  path: '/admin/contacts/ajax/manage-off-canvas-tab/{tab}'
+  defaults:
+    _controller: '\Drupal\contacts\Controller\DashboardController::offCanvasTab'
+    _title: 'Edit tab'
+  options:
+    parameters:
+      tab:
+        type: entity:contact_tab
+  requirements:
+    _permission: 'administer blocks'

js/dashboard.manage.js

@@ -54,11 +54,11 @@
       }
     });
 
-    var url = $(context).find('[data-contacts-manage-update-url]').data('contacts-manage-update-url'),
-      postData = {
-        regions: regions,
-        tab: tab
-      };
+    var url = $(context).find('[data-contacts-manage-update-url]').data('contacts-manage-update-url');
+    var postData = {
+      regions: regions,
+      tab: tab
+    };
 
     $.ajax({
       type: 'POST',
@@ -69,6 +69,37 @@
     });
   }
 
+  /**
+   * Update the Dashboard tabs after re-ordering.
+   *
+   * @param context
+   *   The context of the tabs.
+   */
+  function updateDashboardTabs(context) {
+    var $dragArea = $(context).find('.contacts-ajax-tabs');
+
+    if ($dragArea.length === 0) {
+      return;
+    }
+
+    var tabs = $dragArea.sortable("toArray", {attribute: 'data-contacts-drag-tab-id'});
+
+    console.log(tabs);
+
+    var url = '/admin/contacts/ajax/update-tabs';
+    var postData = {
+      tabs: tabs
+    };
+
+    $.ajax({
+      type: 'POST',
+      url: url,
+      data: postData
+    }).done(function (data) {
+      console.log(data);
+    });
+  }
+
   /**
    * Find all dashboard blocks and set manage ajax links.
    */
@@ -123,7 +154,7 @@
   /**
    * Add sorting of dashboard blocks in manage mode.
    */
-  Drupal.behaviors.contactsDashboardManageDrag = {
+  Drupal.behaviors.contactsDashboardManageDragBlocks = {
     attach: function attach(context) {
 
       var $dragAreas = $(context).find('.drag-area');
@@ -151,6 +182,34 @@
     }
   };
 
+  /**
+   * Add sorting of dashboard tabs in manage mode.
+   */
+  Drupal.behaviors.contactsDashboardManageDragTabs = {
+    attach: function attach(context) {
+
+      var $dragAreas = $(context).find('.contacts-ajax-tabs');
+
+      if ($dragAreas.length === 0) {
+        return;
+      }
+
+      $dragAreas.each(function () {
+        $(this).sortable({
+
+          placeholder: "nav-item nav-link tab-area-placeholder",
+          handle: '.drag-handle',
+          update: function update(event, ui) {
+            var itemRegion = ui.item.closest('.contacts-ajax-tabs');
+            if (event.target === itemRegion[0]) {
+              updateDashboardTabs(context);
+            }
+          }
+        });
+      });
+    }
+  };
+
   $(document).on('drupalManageLinkAdded', function (event, data) {
     Drupal.ajax.bindAjaxLinks(data.$el[0]);
   });

src/Controller/AjaxHelperTrait.php

@@ -0,0 +1,39 @@
+<?php
+
+namespace Drupal\contacts\Controller;
+
+use Drupal\Core\EventSubscriber\MainContentViewSubscriber;
+
+/**
+ * Provides a helper to determine if the current request is via AJAX.
+ *
+ * @todo Replace with core version once merged https://www.drupal.org/node/2896535.
+ */
+trait AjaxHelperTrait {
+
+  /**
+   * Determines if the current request is via AJAX.
+   *
+   * @return bool
+   *   TRUE if the current request is via AJAX, FALSE otherwise.
+   */
+  protected function isAjax() {
+    return in_array($this->getRequestWrapperFormat(), [
+      'drupal_ajax',
+      'drupal_dialog',
+      'drupal_dialog.off_canvas',
+      'drupal_modal',
+    ]);
+  }
+
+  /**
+   * Gets the wrapper format of the current request.
+   *
+   * @string
+   *   The wrapper format.
+   */
+  protected function getRequestWrapperFormat() {
+    return \Drupal::request()->get(MainContentViewSubscriber::WRAPPER_FORMAT);
+  }
+
+}