Spiegel von
https://github.com/paviliondev/discourse-custom-wizard.git
synchronisiert 2024-11-09 11:52:54 +01:00
UX: Display submission fields unique to each type
Dieser Commit ist enthalten in:
Ursprung
466229af0b
Commit
d74d3d25be
6 geänderte Dateien mit 307 neuen und 5 gelöschten Zeilen
114
assets/javascripts/discourse/components/submission-field.js.es6
Normale Datei
114
assets/javascripts/discourse/components/submission-field.js.es6
Normale Datei
|
@ -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}`;
|
||||
}
|
||||
},
|
||||
});
|
|
@ -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}}
|
||||
|
|
114
assets/javascripts/discourse/templates/components/submission-field.hbs
Normale Datei
114
assets/javascripts/discourse/templates/components/submission-field.hbs
Normale Datei
|
@ -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}}
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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
|
||||
|
|
Laden …
In neuem Issue referenzieren