Merge pull request #415 from nextcloud/enh/invalid_warning
Enh/invalid warning
This commit is contained in:
commit
8779ded0dc
|
@ -46,6 +46,10 @@
|
||||||
required
|
required
|
||||||
@input="onTitleChange">
|
@input="onTitleChange">
|
||||||
<h3 v-else class="question__header-title" v-text="computedText" />
|
<h3 v-else class="question__header-title" v-text="computedText" />
|
||||||
|
<div v-if="!edit && !questionValid"
|
||||||
|
v-tooltip.auto="warningInvalid"
|
||||||
|
class="question__header-warning icon-error-color"
|
||||||
|
tabindex="0" />
|
||||||
<Actions v-if="!readOnly" class="question__header-menu" :force-menu="true">
|
<Actions v-if="!readOnly" class="question__header-menu" :force-menu="true">
|
||||||
<ActionCheckbox :checked="mandatory"
|
<ActionCheckbox :checked="mandatory"
|
||||||
@update:checked="onMandatoryChange">
|
@update:checked="onMandatoryChange">
|
||||||
|
@ -114,6 +118,14 @@ export default {
|
||||||
type: Number,
|
type: Number,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
contentValid: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
warningInvalid: {
|
||||||
|
type: String,
|
||||||
|
default: t('forms', 'This question needs a title!'),
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -127,6 +139,14 @@ export default {
|
||||||
}
|
}
|
||||||
return this.text
|
return this.text
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Question valid, if text not empty and content valid
|
||||||
|
* @returns {Boolean} true if question valid
|
||||||
|
*/
|
||||||
|
questionValid() {
|
||||||
|
return this.text && this.contentValid
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -240,6 +260,10 @@ export default {
|
||||||
border-bottom-color: var(--color-border-dark);
|
border-bottom-color: var(--color-border-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-warning {
|
||||||
|
padding: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
&-menu.action-item {
|
&-menu.action-item {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: var(--header-height);
|
top: var(--header-height);
|
||||||
|
|
|
@ -29,6 +29,7 @@
|
||||||
:read-only="readOnly"
|
:read-only="readOnly"
|
||||||
:max-question-length="maxStringLengths.questionText"
|
:max-question-length="maxStringLengths.questionText"
|
||||||
:title-placeholder="answerType.titlePlaceholder"
|
:title-placeholder="answerType.titlePlaceholder"
|
||||||
|
:warning-invalid="answerType.warningInvalid"
|
||||||
@update:text="onTitleChange"
|
@update:text="onTitleChange"
|
||||||
@update:mandatory="onMandatoryChange"
|
@update:mandatory="onMandatoryChange"
|
||||||
@delete="onDelete">
|
@delete="onDelete">
|
||||||
|
|
|
@ -29,6 +29,8 @@
|
||||||
:read-only="readOnly"
|
:read-only="readOnly"
|
||||||
:max-question-length="maxStringLengths.questionText"
|
:max-question-length="maxStringLengths.questionText"
|
||||||
:title-placeholder="answerType.titlePlaceholder"
|
:title-placeholder="answerType.titlePlaceholder"
|
||||||
|
:warning-invalid="answerType.warningInvalid"
|
||||||
|
:content-valid="contentValid"
|
||||||
:shift-drag-handle="shiftDragHandle"
|
:shift-drag-handle="shiftDragHandle"
|
||||||
@update:text="onTitleChange"
|
@update:text="onTitleChange"
|
||||||
@update:mandatory="onMandatoryChange"
|
@update:mandatory="onMandatoryChange"
|
||||||
|
@ -108,6 +110,10 @@ export default {
|
||||||
mixins: [QuestionMixin],
|
mixins: [QuestionMixin],
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
|
contentValid() {
|
||||||
|
return this.answerType.validate(this)
|
||||||
|
},
|
||||||
|
|
||||||
isLastEmpty() {
|
isLastEmpty() {
|
||||||
const value = this.options[this.options.length - 1]
|
const value = this.options[this.options.length - 1]
|
||||||
return value?.text?.trim().length === 0
|
return value?.text?.trim().length === 0
|
||||||
|
|
|
@ -29,6 +29,7 @@
|
||||||
:read-only="readOnly"
|
:read-only="readOnly"
|
||||||
:max-question-length="maxStringLengths.questionText"
|
:max-question-length="maxStringLengths.questionText"
|
||||||
:title-placeholder="answerType.titlePlaceholder"
|
:title-placeholder="answerType.titlePlaceholder"
|
||||||
|
:warning-invalid="answerType.warningInvalid"
|
||||||
@update:text="onTitleChange"
|
@update:text="onTitleChange"
|
||||||
@update:mandatory="onMandatoryChange"
|
@update:mandatory="onMandatoryChange"
|
||||||
@delete="onDelete">
|
@delete="onDelete">
|
||||||
|
|
|
@ -43,6 +43,7 @@ export default {
|
||||||
* @prop titlePlaceholder The placeholder users see as empty question-title in edit-mode
|
* @prop titlePlaceholder The placeholder users see as empty question-title in edit-mode
|
||||||
* @prop createPlaceholder *optional* The placeholder that is visible in edit-mode, to indicate a submission form-input field
|
* @prop createPlaceholder *optional* The placeholder that is visible in edit-mode, to indicate a submission form-input field
|
||||||
* @prop submitPlaceholder *optional* The placeholder that is visible in submit-mode, to indicate a form input-field
|
* @prop submitPlaceholder *optional* The placeholder that is visible in submit-mode, to indicate a form input-field
|
||||||
|
* @prop warningInvalid The warning users see in edit mode, if the question is invalid.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
multiple_unique: {
|
multiple_unique: {
|
||||||
|
@ -52,6 +53,7 @@ export default {
|
||||||
validate: question => question.options.length > 0,
|
validate: question => question.options.length > 0,
|
||||||
|
|
||||||
titlePlaceholder: t('forms', 'Multiple choice question title'),
|
titlePlaceholder: t('forms', 'Multiple choice question title'),
|
||||||
|
warningInvalid: t('forms', 'This question needs a title and at least one answer!'),
|
||||||
|
|
||||||
// Using the same vue-component as multiple, this specifies that the component renders as multiple_unique.
|
// Using the same vue-component as multiple, this specifies that the component renders as multiple_unique.
|
||||||
unique: true,
|
unique: true,
|
||||||
|
@ -64,6 +66,7 @@ export default {
|
||||||
validate: question => question.options.length > 0,
|
validate: question => question.options.length > 0,
|
||||||
|
|
||||||
titlePlaceholder: t('forms', 'Checkbox question title'),
|
titlePlaceholder: t('forms', 'Checkbox question title'),
|
||||||
|
warningInvalid: t('forms', 'This question needs a title and at least one answer!'),
|
||||||
},
|
},
|
||||||
|
|
||||||
short: {
|
short: {
|
||||||
|
@ -74,6 +77,7 @@ export default {
|
||||||
titlePlaceholder: t('forms', 'Short answer question title'),
|
titlePlaceholder: t('forms', 'Short answer question title'),
|
||||||
createPlaceholder: t('forms', 'People can enter a short answer'),
|
createPlaceholder: t('forms', 'People can enter a short answer'),
|
||||||
submitPlaceholder: t('forms', 'Enter a short answer'),
|
submitPlaceholder: t('forms', 'Enter a short answer'),
|
||||||
|
warningInvalid: t('forms', 'This question needs a title!'),
|
||||||
},
|
},
|
||||||
|
|
||||||
long: {
|
long: {
|
||||||
|
@ -84,6 +88,7 @@ export default {
|
||||||
titlePlaceholder: t('forms', 'Long text question title'),
|
titlePlaceholder: t('forms', 'Long text question title'),
|
||||||
createPlaceholder: t('forms', 'People can enter a long text'),
|
createPlaceholder: t('forms', 'People can enter a long text'),
|
||||||
submitPlaceholder: t('forms', 'Enter a long text'),
|
submitPlaceholder: t('forms', 'Enter a long text'),
|
||||||
|
warningInvalid: t('forms', 'This question needs a title!'),
|
||||||
},
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue