1
0
Fork 0

UX: Display submission fields unique to each type

Dieser Commit ist enthalten in:
Keegan George 2021-08-30 16:23:33 -07:00
Ursprung 466229af0b
Commit d74d3d25be
6 geänderte Dateien mit 307 neuen und 5 gelöschten Zeilen

Datei anzeigen

@ -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}`;
}
},
});

Datei anzeigen

@ -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}}

Datei anzeigen

@ -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}}

Datei anzeigen

@ -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;
}

Datei anzeigen

@ -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"

Datei anzeigen

@ -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