IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

2119-Fix consistent form input validation

Browse Source
This commit is contained in:
ogerly 2019-11-07 09:12:13 +01:00
parent f64b71e746
commit b76354d95d
1 changed files with 53 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
webapp/components/ContributionForm/ContributionForm.vue
View File

@ -21,7 +21,26 @@
name="title"
autofocus
/>
<small class="smallTag">{{ form.title.length }}/{{ formSchema.title.max }}</small>
<ds-text align="right">
<ds-chip v-if="form.title.length < formSchema.title.min" class="checkicon" size="base">
{{ form.title.length }}/{{ formSchema.title.max }}
<ds-icon name="check"></ds-icon>
</ds-chip>
<ds-chip
v-else-if="form.title.length < formSchema.title.max"
class="checkicon"
size="base"
color="primary"
>
{{ form.title.length }}/{{ formSchema.title.max }}
<ds-icon name="check"></ds-icon>
</ds-chip>
<ds-chip v-else class="checkicon" size="base" color="danger">
{{ form.title.length }}/{{ formSchema.title.max }}
<ds-icon name="check"></ds-icon>
</ds-chip>
</ds-text>
<floatClear />
<client-only>
<hc-editor
:users="users"
@ -29,7 +48,16 @@
:hashtags="hashtags"
@input="updateEditorContent"
/>
<small class="smallTag">{{ form.contentLength }}</small>
<ds-text align="right">
<small class="smallTag">{{ form.contentLength }}</small>
<ds-button
v-if="form.contentLength < formSchema.content.min"
class="checkicon"
icon="check"
size="small"
></ds-button>
<ds-button v-else class="checkicon" icon="check" size="small" primary></ds-button>
</ds-text>
</client-only>
<ds-space margin-bottom="small" />
<hc-categories-select
@ -37,6 +65,21 @@
@updateCategories="updateCategories"
:existingCategoryIds="form.categoryIds"
/>
<ds-text align="right">
<ds-button
v-if="form.categoryIds !== 0"
class="checkicon checkicon_cat "
icon="check"
size="small"
></ds-button>
<ds-button
v-else
class="checkicon checkicon_cat"
icon="check"
primary
size="small"
></ds-button>
</ds-text>
<ds-flex class="contribution-form-footer">
<ds-flex-item :width="{ base: '10%', sm: '10%', md: '10%', lg: '15%' }" />
<ds-flex-item :width="{ base: '80%', sm: '30%', md: '30%', lg: '20%' }">
@ -113,7 +156,7 @@ export default {
},
formSchema: {
title: { required: true, min: 3, max: 100 },
content: [{ required: true }],
content: { required: true, min: 3 },
},
id: null,
loading: false,
@ -204,9 +247,7 @@ export default {
this.manageContent(value)
},
manageContent(content) {
// filter HTML out of content value
const str = content.replace(/<\/?[^>]+(>|$)/gm, '')
// Set counter length of text
let str = content.replace(/<\/?[^>]+(>|$)/gm, '')
this.form.contentLength = str.length
this.validatePost()
},
@ -288,4 +329,10 @@ export default {
padding-right: 0;
}
}
.checkicon {
top: -18px;
}
.checkicon_cat {
top: -38px;
}
</style>