Spiegel von
https://github.com/paviliondev/discourse-custom-wizard.git
synchronisiert 2024-11-09 20:02: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">
|
<div class="wizard-header large">
|
||||||
<label>{{i18n "admin.wizard.submissions.title" name=wizard.name}}</label>
|
<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">
|
<a class="btn btn-default download-link" href={{downloadUrl}} target="_blank" rel="noopener noreferrer">
|
||||||
{{d-icon "download"}}
|
{{d-icon "download"}}
|
||||||
<span class="d-button-label">
|
<span class="d-button-label">
|
||||||
|
@ -18,16 +26,18 @@
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
{{#each fields as |f|}}
|
{{#each fields as |field|}}
|
||||||
<th>{{f}}</th>
|
{{#if field.enabled}}
|
||||||
|
<th>{{field.label}}</th>
|
||||||
|
{{/if}}
|
||||||
{{/each}}
|
{{/each}}
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{{#each submissions as |s|}}
|
{{#each displaySubmissions as |submission|}}
|
||||||
<tr>
|
<tr>
|
||||||
{{#each-in s as |k v|}}
|
{{#each-in submission as |field value|}}
|
||||||
<td>{{v}}</td>
|
<td>{{submission-field fieldName=field value=value}}</td>
|
||||||
{{/each-in}}
|
{{/each-in}}
|
||||||
</tr>
|
</tr>
|
||||||
{{/each}}
|
{{/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 {
|
table td {
|
||||||
min-width: 150px;
|
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 {
|
.admin-wizards-logs {
|
||||||
|
@ -203,6 +248,11 @@
|
||||||
&.underline {
|
&.underline {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-wizard-buttons {
|
.admin-wizard-buttons {
|
||||||
|
@ -715,3 +765,4 @@
|
||||||
width: 80px;
|
width: 80px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -367,6 +367,12 @@ en:
|
||||||
nav_label: "Submissions"
|
nav_label: "Submissions"
|
||||||
title: "{{name}} Submissions"
|
title: "{{name}} Submissions"
|
||||||
download: "Download"
|
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:
|
api:
|
||||||
label: "API"
|
label: "API"
|
||||||
|
|
|
@ -33,6 +33,13 @@ if respond_to?(:register_svg_icon)
|
||||||
register_svg_icon "chevron-right"
|
register_svg_icon "chevron-right"
|
||||||
register_svg_icon "chevron-left"
|
register_svg_icon "chevron-left"
|
||||||
register_svg_icon "save"
|
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
|
end
|
||||||
|
|
||||||
class ::Sprockets::DirectiveProcessor
|
class ::Sprockets::DirectiveProcessor
|
||||||
|
|
Laden …
In neuem Issue referenzieren