Merge pull request #2 from merefield/refine_mobile_view

IMPROVE: add workflow topic title link, restrict workflow list to desktop

Author: merefield

assets/javascripts/discourse/components/workflow-name-link.gjs

@@ -19,7 +19,11 @@ export default class WorkflowButtonsComponent extends Component {
 
   <template>
     <div class="workflow-action-button">
-      <DButton class="btn-transparent" @action={{this.showVisualisationModal}}>
+      <DButton
+        class="btn-transparent"
+        @action={{this.showVisualisationModal}}
+        @icon={{@icon}}
+      >
         {{@label}}
       </DButton>
     </div>

assets/javascripts/discourse/connectors/topic-list-after-title/workflow-link.gjs

@@ -0,0 +1,27 @@
+/* eslint-disable ember/no-empty-glimmer-component-classes */
+
+import Component from "@glimmer/component";
+import { i18n } from "discourse-i18n";
+import WorkflowNameLink from "../../components/workflow-name-link";
+
+export default class WorkflowLink extends Component {
+  get label() {
+    return i18n("discourse_workflow.workflow_link", {
+      workflow_name: this.args.outletArgs.topic.workflow_name,
+      workflow_step_name: this.args.outletArgs.topic.workflow_step_name,
+    });
+  }
+
+  <template>
+    {{#if @outletArgs.topic.workflow_name}}
+      <span class="workflow-after-title">
+        <WorkflowNameLink
+          @topic_id={{@outletArgs.topic.id}}
+          @workflow_name={{@outletArgs.topic.workflow_name}}
+          @label={{this.label}}
+          @icon="right-left"
+        />
+      </span>
+    {{/if}}
+  </template>
+}

assets/javascripts/discourse/initializers/init-workflow.gjs

@@ -75,6 +75,7 @@ export default {
 
   initialize(container) {
     const router = container.lookup("service:router");
+    const mobileView = container.lookup("service:site").mobileView;
 
     withPluginApi("1.39.0", (api) => {
       api.addAdminPluginConfigurationNav("discourse-workflow", [
@@ -89,47 +90,56 @@ export default {
         href: "/workflow",
       });
 
-      api.registerValueTransformer(
-        "topic-list-columns",
-        ({ value: columns }) => {
-          if (WORKFLOW_LIST_ROUTES.includes(router.currentRouteName)) {
-            columns.add("workflow-name", {
-              header: workflowNameHeader,
-              item: workflowNameCell,
-              after: "activity",
-            });
-          }
-          return columns;
+      api.registerValueTransformer("topic-list-item-class", ({ value }) => {
+        if (WORKFLOW_LIST_ROUTES.includes(router.currentRouteName)) {
+          value.push("workflow-list");
         }
-      );
-
-      api.registerValueTransformer(
-        "topic-list-columns",
-        ({ value: columns }) => {
-          if (WORKFLOW_LIST_ROUTES.includes(router.currentRouteName)) {
-            columns.add("workflow-step-position", {
-              header: workflowStepPositionHeader,
-              item: workflowStepPositionCell,
-              after: "workflow-name",
-            });
+        return value;
+      });
+
+      if (!mobileView) {
+        api.registerValueTransformer(
+          "topic-list-columns",
+          ({ value: columns }) => {
+            if (WORKFLOW_LIST_ROUTES.includes(router.currentRouteName)) {
+              columns.add("workflow-name", {
+                header: workflowNameHeader,
+                item: workflowNameCell,
+                after: "activity",
+              });
+            }
+            return columns;
           }
-          return columns;
-        }
-      );
-
-      api.registerValueTransformer(
-        "topic-list-columns",
-        ({ value: columns }) => {
-          if (WORKFLOW_LIST_ROUTES.includes(router.currentRouteName)) {
-            columns.add("workflow-step-name", {
-              header: workflowStepNameHeader,
-              item: workflowStepNameCell,
-              after: "workflow-step-position",
-            });
+        );
+
+        api.registerValueTransformer(
+          "topic-list-columns",
+          ({ value: columns }) => {
+            if (WORKFLOW_LIST_ROUTES.includes(router.currentRouteName)) {
+              columns.add("workflow-step-position", {
+                header: workflowStepPositionHeader,
+                item: workflowStepPositionCell,
+                after: "workflow-name",
+              });
+            }
+            return columns;
           }
-          return columns;
-        }
-      );
+        );
+
+        api.registerValueTransformer(
+          "topic-list-columns",
+          ({ value: columns }) => {
+            if (WORKFLOW_LIST_ROUTES.includes(router.currentRouteName)) {
+              columns.add("workflow-step-name", {
+                header: workflowStepNameHeader,
+                item: workflowStepNameCell,
+                after: "workflow-step-position",
+              });
+            }
+            return columns;
+          }
+        );
+      }
 
       api.addPostSmallActionIcon("workflow_transition", "right-left");
     });

assets/stylesheets/common/workflow_common.scss

@@ -1,3 +1,17 @@
+.topic-list {
+  .workflow-after-title .workflow-action-button {
+    font-size: 0.8em;
+    button {
+      padding-left: 0px;
+    }
+  }
+
+  td.workflow-step-position .workflow-action-button {
+    justify-content: center;
+    display: flex;
+  }
+}
+
 body.workflow-topic {
   &:not(.staff) {
     .edit-category__wrapper {

assets/stylesheets/desktop/workflow_desktop.scss

@@ -1,3 +1,7 @@
+.workflow-list .workflow-after-title .workflow-action-button {
+  display: none;
+}
+
 .workflow-visualisation-modal {
   max-height: 800px;
   width: 100%;

config/locales/client.en.yml

@@ -31,6 +31,7 @@ en:
         title: "Workflow"
         help: "topics involved in a workflow"
     discourse_workflow:
+      workflow_link: "%{workflow_name}: %{workflow_step_name}"
       topic_banner:
         title: "Discourse Workflow"
         step_title: "Step:"

plugin.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 # name: discourse-workflow
 # about: A topic-based workflow engine for Discourse
-# version: 0.0.6
+# version: 0.0.7
 # authors: Robert Barrow
 # contact_emails: robert@pavilion.tech
 # url: https://github.com/merefield/discourse-workflow