Merge pull request #2 from lukeyouell/develop

Develop

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## 1.0.1 - 2018-11-07
+
+### Added
+- Nav badge count displays number of jobs
+- Tippy.js tooltips for better tooltips (such as quickly viewing the error when hovering over the job status)
+
 ## 1.0.0 - 2018-11-05
 
 ### Added

README.md

@@ -71,7 +71,6 @@ Full queue:
 
 Some things to do, and ideas for potential features:
 
-- CP nav badge
 - Cron documentation
 - Responsive tables
 - Filter results

composer.json

@@ -2,7 +2,7 @@
     "name": "lukeyouell/craft-queue-manager",
     "description": "Job Queue Manager for Craft CMS.",
     "type": "craft-plugin",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "keywords": [
         "craft",
         "cms",

package.json

@@ -14,6 +14,7 @@
     "expose-loader": "^0.7.5",
     "laravel-mix": "^2.1.11",
     "laravel-mix-purgecss": "^2.0.0",
-    "tailwindcss": "^0.6.6"
+    "tailwindcss": "^0.6.6",
+    "tippy.js": "^3.1.1"
   }
 }

src/QueueManager.php

@@ -50,6 +50,7 @@ public function getCpNavItem()
         $ret = parent::getCpNavItem();
 
         $ret['label'] = $this->name;
+        $ret['badgeCount'] = $this->queue->getJobCount();
 
         return $ret;
     }

src/assetbundles/src/styles.scss

@@ -4,6 +4,8 @@
 
 @tailwind utilities;
 
+@import '../../../node_modules/tippy.js/dist/tippy.css';
+
 /* Overrides */
 
 #main-container #main #header {

src/assetbundles/src/vendor.js

@@ -1,3 +1,5 @@
+import tippy from 'tippy.js';
+
 // Display dropdown menu on button click
 $('.qm-dropdown-button').on('click', function() {
   $(this).parent().find('.qm-dropdown-menu').toggle();

src/services/QueueService.php

@@ -54,6 +54,13 @@ public function getJobs($status = null)
         return $info;
     }
 
+    public function getJobCount()
+    {
+        return (new Query())
+            ->from('{{%queue}}')
+            ->count();
+    }
+
     // Private Methods
     // =========================================================================
 

src/templates/_jobs/index.twig

@@ -15,7 +15,7 @@
                     {{ csrfInput() }}
                     <input type="hidden" name="action" value="queue-manager/queue/retry-all">
 
-                    <button class="qm-button" type="submit">Retry all</button>
+                    <button class="qm-button" type="submit" data-tippy="This will retry every job in the queue">Retry all</button>
                   </form>
                 </div>
 
@@ -24,7 +24,7 @@
                     {{ csrfInput() }}
                     <input type="hidden" name="action" value="queue-manager/queue/release-all">
 
-                    <button class="qm-button" type="submit">Cancel all</button>
+                    <button class="qm-button" type="submit" data-tippy="This will cancel every job in the queue">Cancel all</button>
                   </form>
                 </div>
               </div>
@@ -51,7 +51,11 @@
                   </td>
                   <td class="tw-w-px">
                     {% if job.fail %}
-                      <div class="qm-status qm-red">failed</div>
+                      <div class="qm-status qm-red"
+                      {% if job.error %}
+                      data-tippy="{{ job.error }}"
+                      {% endif %}
+                      >failed</div>
                     {% elseif job.timeUpdated is null %}
                       <div class="qm-status qm-orange">pending</div>
                     {% else %}
@@ -64,7 +68,7 @@
                   <td class="tw-w-px">
                     <div class="qm-actions">
                       <div>
-                        <button class="qm-action qm-view-data" data-job-id="{{ job.id }}" title="View">
+                        <button class="qm-action qm-view-data" data-job-id="{{ job.id }}" data-tippy="View job">
                           {% include "queue-manager/_icons/solid/eye.svg" ignore missing %}
                         </button>
                       </div>
@@ -73,7 +77,7 @@
                           {{ csrfInput() }}
                           <input type="hidden" name="action" value="queue-manager/queue/retry">
 
-                          <button class="qm-action" type="submit" name="id" value="{{ job.id }}" title="Try again">
+                          <button class="qm-action" type="submit" name="id" value="{{ job.id }}" data-tippy="Retry job">
                             {% include "queue-manager/_icons/solid/redo-alt.svg" ignore missing %}
                           </button>
                         </form>
@@ -83,7 +87,7 @@
                           {{ csrfInput() }}
                           <input type="hidden" name="action" value="queue-manager/queue/release">
 
-                          <button class="qm-action" type="submit" name="id" value="{{ job.id }}" title="Cancel">
+                          <button class="qm-action" type="submit" name="id" value="{{ job.id }}" data-tippy="Cancel job">
                             {% include "queue-manager/_icons/solid/times-circle.svg" ignore missing %}
                           </button>
                         </form>

webpack.mix.js

@@ -20,5 +20,5 @@ mix.js('src/assetbundles/src/vendor.js', 'src/assetbundles/dist/bundle.js')
     ],
     extractor: TailwindExtractor,
     extensions: ['html', 'twig', 'js', 'css', 'scss'],
-    whitelistPatterns: [],
+    whitelistPatterns: [/tippy-/],
   });