UX: Display submission fields unique to each type

assets/javascripts/discourse/components/submission-field.js.es6

@@ -0,0 +1,114 @@
+import { action } from "@ember/object";
+import Component from "@ember/component";
+import { equal } from "@ember/object/computed";
+import discourseComputed from "discourse-common/utils/decorators";
+import I18n from "I18n";
+
+
+export default Component.extend({
+  isText: equal("value.type", "text"),
+  isComposer: equal("value.type", "composer"),
+  isDate: equal("value.type", "date"),
+  isTime: equal("value.type", "time"),
+  isDateTime: equal("value.type", "date_time"),
+  isNumber: equal("value.type", "number"),
+  isCheckbox: equal("value.type", "checkbox"),
+  isUrl: equal("value.type", "url"),
+  isUpload: equal("value.type", "upload"),
+  isDropdown: equal("value.type", "dropdown"),
+  isTag: equal("value.type", "tag"),
+  isCategory: equal("value.type", "category"),
+  isGroup: equal("value.type", "group"),
+  isUser: equal("fieldName", "username"),
+  isUserSelector: equal("value.type", "user_selector"),
+  isSubmittedAt: equal("fieldName", "submitted_at"),
+  isTextArea: equal("value.type", "textarea"),
+  isComposerPreview: equal("value.type", "composer_preview"),
+  textState: "text-collapsed",
+  toggleText: I18n.t('admin.wizard.submissions.expand_text'),
+
+  @discourseComputed("value")
+  checkboxValue(value) {
+    const isCheckbox = this.get("isCheckbox");
+    if (isCheckbox) {
+      if (value.value.includes("true")) {
+        return true;
+      } else if (value.value.includes("false")) {
+        return false;
+      }
+    }
+  },
+
+  @action
+  expandText() {
+    const state = this.get("textState");
+
+    if (state === "text-collapsed") {
+      this.set("textState", "text-expanded");
+      this.set("toggleText", I18n.t('admin.wizard.submissions.collapse_text'));
+    } else if (state === "text-expanded") {
+      this.set("textState", "text-collapsed");
+      this.set("toggleText", I18n.t('admin.wizard.submissions.expand_text'));
+    }
+  },
+
+  @discourseComputed('value')
+  file(value) {
+    const isUpload = this.get("isUpload");
+    if (isUpload) {
+      return value.value;
+    }
+  },
+
+  @discourseComputed('value')
+  submittedUsers(value) {
+    const isUserSelector = this.get("isUserSelector");
+    const users = [];
+    
+    if (isUserSelector) {
+      const userData = value.value;
+      const usernames = [];
+
+      if (userData.indexOf(',')) { 
+        usernames.push(...userData.split(','));
+
+        usernames.forEach(u => {
+          const user = {
+            username: u,
+            url: `/u/${u}`
+          }
+          users.push(user);
+        })
+      }
+    }
+    return users;
+  },
+
+  @discourseComputed('value')
+  userProfileUrl(value) {
+    const isUser = this.get("isUser");
+    const isUserSelector = this.get("isUserSelector");
+
+    if (isUser) {
+      return `/u/${value.username}`;
+    }
+  },
+
+  @discourseComputed('value')
+  categoryUrl(value) {
+    const isCategory = this.get('isCategory');
+
+    if (isCategory) {
+      return `/c/${value.value}`;
+    }
+  },
+
+  @discourseComputed('value')
+  groupUrl(value) {
+    const isGroup = this.get('isGroup');
+
+    if (isGroup) {
+      return `/g/${value.value}`;
+    }
+  },
+});

assets/javascripts/discourse/templates/admin-wizards-submissions-show.hbs

@@ -2,6 +2,14 @@
   <div class="wizard-header large">
     <label>{{i18n "admin.wizard.submissions.title" name=wizard.name}}</label>
 
+    <div class="controls">
+      {{d-button
+        icon="sliders-h"  
+        label="admin.wizard.submissions.edit_columns" 
+        action=(action "showEditColumnsModal")
+        class="btn-default open-edit-columns-btn download-link"}}
+    </div>
+
     <a class="btn btn-default download-link" href={{downloadUrl}} target="_blank" rel="noopener noreferrer">
       {{d-icon "download"}}
       <span class="d-button-label">
@@ -18,16 +26,18 @@
         <table>
           <thead>
             <tr>
-              {{#each fields as |f|}}
-                <th>{{f}}</th>
+              {{#each fields as |field|}}
+                {{#if field.enabled}}
+                  <th>{{field.label}}</th>
+                {{/if}}
               {{/each}}
             </tr>
           </thead>
           <tbody>
-            {{#each submissions as |s|}}
+            {{#each displaySubmissions as |submission|}}
               <tr>
-                {{#each-in s as |k v|}}
-                  <td>{{v}}</td>
+                {{#each-in submission as |field value|}}
+                    <td>{{submission-field fieldName=field value=value}}</td>
                 {{/each-in}}
               </tr>
             {{/each}}

assets/javascripts/discourse/templates/components/submission-field.hbs

@@ -0,0 +1,114 @@
+{{#if isText}}
+  {{value.value}}
+{{/if}}
+
+{{#if isTextArea}}
+  <div class="submission-long-text">
+    <p class="submission-long-text-content {{textState}}">{{value.value}}</p>
+    <a href {{action "expandText"}}>{{toggleText}}</a>
+  </div>
+{{/if}}
+
+{{#if isComposer}}
+  <div class="submission-long-text">
+    <p class="submission-composer-text submission-long-text-content {{textState}}">{{value.value}}</p>
+    <a href {{action "expandText"}}>{{toggleText}}</a>
+  </div>
+{{/if}}
+
+{{#if isComposerPreview}}
+  {{d-icon "comment-alt" }} <span class="submission-composer-text">{{i18n "admin.wizard.submissions.composer_preview"}}: {{value.value}}</span>
+{{/if}}
+
+{{#if isTextOnly}}
+  {{value.value}}
+{{/if}}
+
+{{#if isDate}}
+  <span class="submission-icon-item">
+    {{d-icon "calendar"}}{{value.value}}
+  </span>
+{{/if}}
+
+{{#if isTime}}
+  <span class="submission-icon-item">
+    {{d-icon "clock"}}{{value.value}}
+  </span>
+{{/if}}
+
+{{#if isDateTime}}
+  <span class="submission-icon-item" title={{value.value}}>
+    {{d-icon "calendar"}}{{format-date value.value format="medium"}}
+  </span>
+{{/if}}
+
+{{#if isNumber}}
+  {{value.value}}
+{{/if}}
+
+{{#if isCheckbox}}
+  {{#if checkboxValue}}
+  <span class="submission-icon-item submission-checkbox-true">
+    {{d-icon  "check"}}{{value.value}}
+  </span>
+  {{else}}
+  <span class="submission-icon-item submission-checkbox-false">
+    {{d-icon  "times"}}{{value.value}}
+  </span>
+  {{/if}}
+{{/if}}
+
+{{#if isUrl}}
+  <span class="submission-icon-item submission-url">
+    {{ d-icon "link" }}
+    <a target="_blank" href={{value.value}}>
+      {{value.value}}
+    </a>
+  </span>
+{{/if}}
+
+{{#if isUpload}}
+  <a target="_blank" class="attachment" href={{file.url}} download>
+    {{file.original_filename}}
+  </a>
+{{/if}}
+
+{{#if isDropdown}}
+  <span class="submission-icon-item">
+    {{ d-icon "check-square" }}
+    {{ value.value }}
+  </span>
+{{/if}}
+
+{{#if isTag}}
+  {{#each value.value as |tag|}}
+    {{discourse-tag tag}}
+  {{/each}}
+{{/if}}
+
+{{#if isCategory}}
+  <strong>{{i18n "admin.wizard.submissions.category_id"}}: </strong><a target="_blank" href={{categoryUrl}} title={{value.value}}>{{value.value}}</a>
+{{/if}}
+
+{{#if isGroup}}
+  <strong>{{i18n "admin.wizard.submissions.group_id"}}: </strong> {{ value.value }}
+{{/if}}
+
+
+{{#if isUserSelector}}
+  {{#each submittedUsers as |user|}}
+    {{ d-icon "user" }}
+    <a target="_blank" href={{user.url}} title={{user.username}}>{{user.username}}</a>
+  {{/each}}
+{{/if}}
+
+{{#if isUser}}
+  {{#link-to "user" value}}{{avatar value imageSize="tiny"}}{{/link-to}}
+  <a target="_blank" href={{userProfileUrl}} title={{value.name}}>{{value.username}}</a>
+{{/if}}
+
+{{#if isSubmittedAt}}
+  <span class="submission-date" title={{value.value}}>
+    {{d-icon "clock"}}{{format-date value format="tiny"}}
+  </span>
+{{/if}}

assets/stylesheets/common/wizard-admin.scss

@@ -71,6 +71,51 @@
   table td {
     min-width: 150px;
   }
+
+  table thead th {
+    text-transform: capitalize;
+  }
+
+  .submission-icon-item {
+    display: flex;
+    align-items: center;
+    svg {
+      margin-right: 5px;
+    }
+  }
+
+  .submission-checkbox-true {
+    text-transform: capitalize;
+    color: var(--success);
+  }
+
+  .submission-checkbox-false {
+    text-transform: capitalize;
+    color: var(--danger);
+  }
+
+  .submission-long-text {
+    &-content {
+      white-space: nowrap;
+      word-wrap: break-word;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 250px;
+      margin-bottom: 0;
+
+      &.text-expanded {
+        white-space: normal;
+      }
+    }
+
+    a {
+      font-size: var(--font-down-1);
+    }
+  }
+
+  .submission-composer-text {
+    font-family: monospace;
+  }
 }
 
 .admin-wizards-logs {
@@ -203,6 +248,11 @@
   &.underline {
     text-decoration: underline;
   }
+
+  .controls {
+    margin-left: auto;
+    margin-right: 0.5rem;
+  }
 }
 
 .admin-wizard-buttons {
@@ -715,3 +765,4 @@
   width: 80px;
   vertical-align: middle;
 }
+

config/locales/client.en.yml

@@ -367,6 +367,12 @@ en:
           nav_label: "Submissions"
           title: "{{name}} Submissions"
           download: "Download"
+          edit_columns: "Edit Columns"
+          expand_text: "Read More"
+          collapse_text: "Show Less"
+          group_id: "Group ID"
+          category_id: "Category ID"
+          composer_preview: "Composer Preview"
 
         api:
           label: "API"

plugin.rb

@@ -33,6 +33,13 @@ if respond_to?(:register_svg_icon)
   register_svg_icon "chevron-right"
   register_svg_icon "chevron-left"
   register_svg_icon "save"
+  register_svg_icon "sliders-h"
+  register_svg_icon "calendar"
+  register_svg_icon "check"
+  register_svg_icon "times"
+  register_svg_icon "clock"
+  register_svg_icon "link"
+  register_svg_icon "comment-alt"
 end
 
 class ::Sprockets::DirectiveProcessor