From d74d3d25beecae7011b9c102726f8d074cb8f66c Mon Sep 17 00:00:00 2001 From: Keegan George Date: Mon, 30 Aug 2021 16:23:33 -0700 Subject: [PATCH] UX: Display submission fields unique to each type --- .../components/submission-field.js.es6 | 114 ++++++++++++++++++ .../admin-wizards-submissions-show.hbs | 20 ++- .../templates/components/submission-field.hbs | 114 ++++++++++++++++++ assets/stylesheets/common/wizard-admin.scss | 51 ++++++++ config/locales/client.en.yml | 6 + plugin.rb | 7 ++ 6 files changed, 307 insertions(+), 5 deletions(-) create mode 100644 assets/javascripts/discourse/components/submission-field.js.es6 create mode 100644 assets/javascripts/discourse/templates/components/submission-field.hbs diff --git a/assets/javascripts/discourse/components/submission-field.js.es6 b/assets/javascripts/discourse/components/submission-field.js.es6 new file mode 100644 index 00000000..f76376a5 --- /dev/null +++ b/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}`; + } + }, +}); diff --git a/assets/javascripts/discourse/templates/admin-wizards-submissions-show.hbs b/assets/javascripts/discourse/templates/admin-wizards-submissions-show.hbs index 9e8e10c8..2f0689b1 100644 --- a/assets/javascripts/discourse/templates/admin-wizards-submissions-show.hbs +++ b/assets/javascripts/discourse/templates/admin-wizards-submissions-show.hbs @@ -2,6 +2,14 @@
+
+ {{d-button + icon="sliders-h" + label="admin.wizard.submissions.edit_columns" + action=(action "showEditColumnsModal") + class="btn-default open-edit-columns-btn download-link"}} +
+ {{d-icon "download"}} @@ -18,16 +26,18 @@ - {{#each fields as |f|}} - + {{#each fields as |field|}} + {{#if field.enabled}} + + {{/if}} {{/each}} - {{#each submissions as |s|}} + {{#each displaySubmissions as |submission|}} - {{#each-in s as |k v|}} - + {{#each-in submission as |field value|}} + {{/each-in}} {{/each}} diff --git a/assets/javascripts/discourse/templates/components/submission-field.hbs b/assets/javascripts/discourse/templates/components/submission-field.hbs new file mode 100644 index 00000000..52cde1dd --- /dev/null +++ b/assets/javascripts/discourse/templates/components/submission-field.hbs @@ -0,0 +1,114 @@ +{{#if isText}} + {{value.value}} +{{/if}} + +{{#if isTextArea}} +
+

{{value.value}}

+ {{toggleText}} +
+{{/if}} + +{{#if isComposer}} +
+

{{value.value}}

+ {{toggleText}} +
+{{/if}} + +{{#if isComposerPreview}} + {{d-icon "comment-alt" }} {{i18n "admin.wizard.submissions.composer_preview"}}: {{value.value}} +{{/if}} + +{{#if isTextOnly}} + {{value.value}} +{{/if}} + +{{#if isDate}} + + {{d-icon "calendar"}}{{value.value}} + +{{/if}} + +{{#if isTime}} + + {{d-icon "clock"}}{{value.value}} + +{{/if}} + +{{#if isDateTime}} + + {{d-icon "calendar"}}{{format-date value.value format="medium"}} + +{{/if}} + +{{#if isNumber}} + {{value.value}} +{{/if}} + +{{#if isCheckbox}} + {{#if checkboxValue}} + + {{d-icon "check"}}{{value.value}} + + {{else}} + + {{d-icon "times"}}{{value.value}} + + {{/if}} +{{/if}} + +{{#if isUrl}} + + {{ d-icon "link" }} + + {{value.value}} + + +{{/if}} + +{{#if isUpload}} + + {{file.original_filename}} + +{{/if}} + +{{#if isDropdown}} + + {{ d-icon "check-square" }} + {{ value.value }} + +{{/if}} + +{{#if isTag}} + {{#each value.value as |tag|}} + {{discourse-tag tag}} + {{/each}} +{{/if}} + +{{#if isCategory}} + {{i18n "admin.wizard.submissions.category_id"}}: {{value.value}} +{{/if}} + +{{#if isGroup}} + {{i18n "admin.wizard.submissions.group_id"}}: {{ value.value }} +{{/if}} + + +{{#if isUserSelector}} + {{#each submittedUsers as |user|}} + {{ d-icon "user" }} + {{user.username}} + {{/each}} +{{/if}} + +{{#if isUser}} + {{#link-to "user" value}}{{avatar value imageSize="tiny"}}{{/link-to}} + {{value.username}} +{{/if}} + +{{#if isSubmittedAt}} + + {{d-icon "clock"}}{{format-date value format="tiny"}} + +{{/if}} diff --git a/assets/stylesheets/common/wizard-admin.scss b/assets/stylesheets/common/wizard-admin.scss index 66cc6b43..66c8d2f7 100644 --- a/assets/stylesheets/common/wizard-admin.scss +++ b/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; } + diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index ce253455..8501e2a2 100644 --- a/config/locales/client.en.yml +++ b/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" diff --git a/plugin.rb b/plugin.rb index 449d0237..993fe0d5 100644 --- a/plugin.rb +++ b/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
{{f}}{{field.label}}
{{v}}{{submission-field fieldName=field value=value}}