Implement Kanban as Vue component

cconard96 · Nov 7, 2023 · defac18 · defac18
1 parent bb3b475
commit defac18
Show file tree

Hide file tree

Showing 23 changed files with 3,017 additions and 3,009 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -72,13 +72,35 @@
     },
     "overrides": [
         {
-            "files": ["js/modules/**", "js/src/**"],
+            "files": ["js/modules/**"],
             "parserOptions": {
                 "sourceType": "module"
             }
         },
         {
-            "files": [".stylelintrc.js", ".webpack.config.js", ".vue.webpack.config.js"],
+            "files": ["js/src/**"],
+            "extends": ["plugin:vue/essential", "eslint:recommended"],
+            "plugins": ["vue"],
+            "parser": "vue-eslint-parser",
+            "parserOptions": {
+                "sourceType": "module"
+            },
+            "rules": {
+                "vue/script-indent": ["error", 4, {
+                    "baseIndent": 1,
+                    "switchCase": 1
+                }],
+                "vue/html-indent": ["error", 4, {
+                    "baseIndent": 1,
+                    "switchCase": 1
+                }],
+                "vue/multi-word-component-names": "off",
+                // do not use regular indent rule. Handled by the vue rules instead
+                "indent": "off"
+            }
+        },
+        {
+            "files": [".stylelintrc.js", ".webpack.config.js"],
             "env": {
                 "node": true
             }

diff --git a/.vue.webpack.config.js b/.vue.webpack.config.js
@@ -20,13 +20,18 @@ const config = {
             {
                 // Vue SFC
                 test: /\.vue$/,
-                loader: 'vue-loader'
+                use: ['vue-loader']
             },
             {
                 // Build styles
                 test: /\.css$/,
                 use: ['style-loader', 'css-loader']
             },
+            {
+                // Build styles
+                test: /\.scss$/,
+                use: ['style-loader', 'css-loader', 'sass-loader'],
+            },
         ]
     },
     plugins: [

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -104,6 +104,8 @@ The present file will list all changes made to the project; according to the
 - `showSystemInformations` method for `$CFG_GLPI['systeminformations_types']` types renamed to `getSystemInformation` and should return an array with a label and content.
 - `DisplayPreference` config form POST handling moved to `ajax/displaypreference.php` script. The front file is for displaying the tabs only.
 - `Document::send()` signature changed. The `$context` parameter has been removed.
+- `title` property of Kanban items must be text only. HTML no longer supported.
+- `kanban:filter` JS event now includes the columns in the event data. Filtering must set the `_filtered_out` property of cards to hide them instead of changing the elements in the DOM.
 
 #### Deprecated
 - Usage of `GLPI_USE_CSRF_CHECK` constant.

diff --git a/ajax/kanban.php b/ajax/kanban.php
@@ -139,19 +139,16 @@
 } else if (($_POST['action'] ?? null) === 'add_item') {
     $checkParams(['inputs']);
     $item = new $itemtype();
-    $inputs = [];
-    parse_str($_POST['inputs'], $inputs);
 
-    $result = $item->add($inputs);
+    $result = $item->add($_POST['inputs']);
     if (!$result) {
         http_response_code(400);
         return;
     }
 } else if (($_POST['action'] ?? null) === 'bulk_add_item') {
     $checkParams(['inputs']);
     $item = new $itemtype();
-    $inputs = [];
-    parse_str($_POST['inputs'], $inputs);
+    $inputs = $_POST['inputs'];
 
     $bulk_item_list = preg_split('/\r\n|[\r\n]/', $inputs['bulk_item_list']);
     if (!empty($bulk_item_list)) {
@@ -202,8 +199,11 @@
 } else if ($_REQUEST['action'] === 'get_switcher_dropdown') {
     $values = $itemtype::getAllForKanban();
     Dropdown::showFromArray('kanban-board-switcher', $values, [
-        'value'  => $_REQUEST['items_id'] ?? ''
+        'value' => $_REQUEST['items_id'] ?? ''
     ]);
+} else if ($_REQUEST['action'] === 'get_kanbans') {
+    header("Content-Type: application/json; charset=UTF-8", true);
+    echo json_encode($itemtype::getAllForKanban(true, (int) ($_REQUEST['items_id'] ?? -1)));
 } else if ($_REQUEST['action'] === 'get_url') {
     $checkParams(['items_id']);
     if ($_REQUEST['items_id'] == -1) {
@@ -223,13 +223,20 @@
     }
     $params = $_POST['params'] ?? [];
     $column_item = new $column_itemtype();
-    $column_id = $column_item->add([
+    $column_item->add([
         'name'   => $_POST['column_name']
     ] + $params);
-    header("Content-Type: application/json; charset=UTF-8", true);
-    $column = $itemtype::getKanbanColumns($_POST['items_id'], $column_field, [$column_id]);
-    echo json_encode($column);
 } else if (($_POST['action'] ?? null) === 'save_column_state') {
+    if (!isset($_POST['state'])) {
+        // Do nothing with the state unless it isn't saved yet. Could be that no columns are shown or an error occured.
+        // If the state is supposed to be cleared, it should come through as a clear_column_state request.
+        if (Item_Kanban::hasStateForItem($_POST['itemtype'], $_POST['items_id'])) {
+            http_response_code(304);
+            return;
+        }
+        Item_Kanban::saveStateForItem($_POST['itemtype'], $_POST['items_id'], []);
+        return;
+    }
     $checkParams(['items_id', 'state']);
     Item_Kanban::saveStateForItem($_POST['itemtype'], $_POST['items_id'], $_POST['state']);
 } else if ($_REQUEST['action'] === 'load_column_state') {
@@ -262,6 +269,11 @@
     $maybe_deleted = $item->maybeDeleted() && !($_REQUEST['force'] ?? false);
     if (($maybe_deleted && $item->canDeleteItem()) || (!$maybe_deleted && $item->canPurgeItem())) {
         $item->delete(['id' => $_POST['items_id']], !$maybe_deleted);
+        // Check if the item was deleted or purged
+        header("Content-Type: application/json; charset=UTF-8", true);
+        echo json_encode([
+            'purged' => $item->getFromDB($_POST['items_id']) === false,
+        ]);
     } else {
         http_response_code(403);
         return;
@@ -290,9 +302,9 @@
 } else if (($_REQUEST['action'] ?? null) === 'load_item_panel') {
     if (isset($itemtype, $item)) {
         TemplateRenderer::getInstance()->display('components/kanban/item_panels/default_panel.html.twig', [
-            'itemtype'     => $itemtype,
-            'item_fields'  => $item->fields,
-            'team'         => Toolbox::hasTrait($item, Teamwork::class) ? $item->getTeam() : []
+            'itemtype' => $itemtype,
+            'item_fields' => $item->fields,
+            'team' => Toolbox::hasTrait($item, Teamwork::class) ? $item->getTeam() : []
         ]);
     } else {
         http_response_code(400);

diff --git a/css/includes/_includes.scss b/css/includes/_includes.scss
@@ -48,7 +48,6 @@ $is-dark: false !default;
 @import "components/floating-buttons";
 @import "components/fuzzy";
 @import "components/global-menu";
-@import "components/kanban";
 @import "components/log_viewer";
 @import "components/browser_tree";
 @import "components/mini-tabs";

diff --git a/inc/define.php b/inc/define.php
@@ -569,13 +569,13 @@
     'helpdesk'  => [
         'dashboard' => ['dashboard'],
         'planning'  => ['clipboard', 'fullcalendar', 'tinymce', 'planning'],
-        'ticket'    => ['rateit', 'tinymce', 'kanban', 'dashboard'],
-        'problem'   => ['tinymce', 'kanban'],
-        'change'    => ['tinymce', 'kanban', 'rateit'],
+        'ticket'    => ['rateit', 'tinymce', 'dashboard'],
+        'problem'   => ['tinymce', 'sortable'],
+        'change'    => ['tinymce', 'sortable', 'rateit'],
         'stat'      => ['charts', 'rateit']
     ],
     'tools'     => [
-        'project'                 => ['kanban', 'tinymce'],
+        'project'                 => ['sortable', 'tinymce'],
         'knowbaseitem'            => ['tinymce'],
         'knowbaseitemtranslation' => ['tinymce'],
         'reminder'                => ['tinymce'],

diff --git a/js/glpi_dialog.js b/js/glpi_dialog.js
@@ -374,7 +374,7 @@ const glpi_toast = (title, message, css_class, options = {}) => {
  * @param {string} caption       Caption for the toast
  * @param {ToastOptions} options Toast options
  */
-const glpi_toast_success = (message, caption, options = {}) => {
+const glpi_toast_success = (message, caption = undefined, options = {}) => {
     glpi_toast(caption || __('Success'), message, 'bg-success text-white border-0', options);
 };
 
@@ -385,7 +385,7 @@ const glpi_toast_success = (message, caption, options = {}) => {
  * @param {string} caption       Caption for the toast
  * @param {ToastOptions} options Toast options
  */
-const glpi_toast_info = function(message, caption, options = {}) {
+const glpi_toast_info = function(message, caption = undefined, options = {}) {
     glpi_toast(caption || _n("Information", "Informations", 1), message, 'bg-info text-white border-0', options);
 };
 
@@ -396,7 +396,7 @@ const glpi_toast_info = function(message, caption, options = {}) {
  * @param {string} caption       Caption for the toast
  * @param {ToastOptions} options Toast options
  */
-const glpi_toast_warning = (message, caption, options = {}) => {
+const glpi_toast_warning = (message, caption = undefined, options = {}) => {
     glpi_toast(caption || __('Warning'), message, 'bg-warning text-white border-0', options);
 };
 
@@ -407,7 +407,7 @@ const glpi_toast_warning = (message, caption, options = {}) => {
  * @param {string} caption       Caption for the toast
  * @param {ToastOptions} options Toast options
  */
-const glpi_toast_error = (message, caption, options = {}) => {
+const glpi_toast_error = (message, caption = undefined, options = {}) => {
     glpi_toast(caption || _n('Error', 'Errors', 1), message, 'bg-danger text-white border-0', options);
 };