mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
Merge pull request #5489 from Ocelot-Social-Community/5472-Disable-Submit-Button-On-Group-Update-Changed-Error
refactor: 🍰 Disable Submit Button On group Update Changed Error
This commit is contained in:
Alexander Friedland
GitHub
commit
138f9a1c6f
@ -11,13 +11,13 @@
|
||||
<template #default="{ errors }">
|
||||
<!-- group Name -->
|
||||
<ds-input
|
||||
:label="$t('group.name')"
|
||||
name="name"
|
||||
:label="$t('group.name')"
|
||||
model="name"
|
||||
autofocus
|
||||
:placeholder="`${$t('group.name')} …`"
|
||||
/>
|
||||
<ds-chip size="base" :color="errors && errors.name && 'danger'">
|
||||
<ds-chip size="base" :color="errors && errors.name ? 'danger' : 'medium'">
|
||||
{{ `${formData.name.length} / ${formSchema.name.min}–${formSchema.name.max}` }}
|
||||
<base-icon v-if="errors && errors.name" name="warning" />
|
||||
</ds-chip>
|
||||
@ -42,6 +42,7 @@
|
||||
<select
|
||||
class="select ds-input appearance--auto"
|
||||
name="groupType"
|
||||
model="groupType"
|
||||
:value="formData.groupType"
|
||||
:disabled="update"
|
||||
@change="changeGroupType($event)"
|
||||
@ -52,7 +53,7 @@
|
||||
</select>
|
||||
<ds-chip
|
||||
size="base"
|
||||
:color="errors && errors.groupType && formData.groupType === '' && 'danger'"
|
||||
:color="errors && errors.groupType && formData.groupType === '' ? 'danger' : 'medium'"
|
||||
>
|
||||
{{ `${formData.groupType === '' ? 0 : 1} / 1` }}
|
||||
<base-icon
|
||||
@ -77,14 +78,14 @@
|
||||
{{ $t('group.description') }}
|
||||
</ds-text>
|
||||
<editor
|
||||
name="description"
|
||||
model="description"
|
||||
:users="null"
|
||||
:value="formData.description"
|
||||
:hashtags="null"
|
||||
model="description"
|
||||
name="description"
|
||||
@input="updateEditorDescription"
|
||||
/>
|
||||
<ds-chip size="base" :color="errors && errors.description && 'danger'">
|
||||
<ds-chip size="base" :color="errors && errors.description ? 'danger' : 'medium'">
|
||||
{{ `${descriptionLength} / ${formSchema.description.min}` }}
|
||||
<base-icon v-if="errors && errors.description" name="warning" />
|
||||
</ds-chip>
|
||||
@ -110,7 +111,9 @@
|
||||
</select>
|
||||
<ds-chip
|
||||
size="base"
|
||||
:color="errors && errors.actionRadius && formData.actionRadius === '' && 'danger'"
|
||||
:color="
|
||||
errors && errors.actionRadius && formData.actionRadius === '' ? 'danger' : 'medium'
|
||||
"
|
||||
>
|
||||
{{ `${formData.actionRadius === '' ? 0 : 1} / 1` }}
|
||||
<base-icon
|
||||
@ -122,7 +125,7 @@
|
||||
<!-- location -->
|
||||
<ds-select
|
||||
id="city"
|
||||
:label="$t('settings.data.labelCity')"
|
||||
:label="$t('settings.data.labelCity') + locationNameLabelAddOnOldName"
|
||||
v-model="formData.locationName"
|
||||
:options="cities"
|
||||
icon="map-marker"
|
||||
@ -132,11 +135,11 @@
|
||||
@input.native="handleCityInput"
|
||||
/>
|
||||
<base-button
|
||||
v-if="formData.locationName !== ''"
|
||||
v-if="formLocationName !== ''"
|
||||
icon="close"
|
||||
ghost
|
||||
size="small"
|
||||
style="position: relative; display: inline-block; right: -93%; top: -45px"
|
||||
style="position: relative; display: inline-block; right: -96%; top: -33px; width: 26px"
|
||||
@click="formData.locationName = ''"
|
||||
></base-button>
|
||||
|
||||
@ -152,7 +155,7 @@
|
||||
<ds-chip
|
||||
v-if="categoriesActive"
|
||||
size="base"
|
||||
:color="errors && errors.categoryIds && 'danger'"
|
||||
:color="errors && errors.categoryIds ? 'danger' : 'medium'"
|
||||
>
|
||||
{{ formData.categoryIds.length }} / 3
|
||||
<base-icon v-if="errors && errors.categoryIds" name="warning" />
|
||||
@ -163,7 +166,7 @@
|
||||
<nuxt-link to="/my-groups">
|
||||
<ds-button>{{ $t('actions.cancel') }}</ds-button>
|
||||
</nuxt-link>
|
||||
<ds-button type="submit" icon="save" primary :disabled="errors" fill>
|
||||
<ds-button type="submit" icon="save" primary :disabled="checkFormError(errors)" fill>
|
||||
{{ update ? $t('group.update') : $t('group.save') }}
|
||||
</ds-button>
|
||||
</ds-space>
|
||||
@ -219,6 +222,12 @@ export default {
|
||||
groupType: groupType || '',
|
||||
about: about || '',
|
||||
description: description || '',
|
||||
// from database 'locationName' comes as "string | null"
|
||||
// 'formData.locationName':
|
||||
// see 'created': tries to set it to a "requestGeoData" object and fills the menu if possible
|
||||
// if user selects one from menu we get a "requestGeoData" object here
|
||||
// "requestGeoData" object: "{ id: String, label: String, value: String }"
|
||||
// otherwise it's a string: empty or none empty
|
||||
locationName: locationName || '',
|
||||
actionRadius: actionRadius || '',
|
||||
categoryIds: categories ? categories.map((category) => category.id) : [],
|
||||
@ -257,12 +266,63 @@ export default {
|
||||
},
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
// set to "requestGeoData" object and fill select menu if possible
|
||||
this.formData.locationName =
|
||||
(await this.requestGeoData(this.formLocationName)) || this.formLocationName
|
||||
},
|
||||
computed: {
|
||||
formLocationName() {
|
||||
const isNestedValue =
|
||||
typeof this.formData.locationName === 'object' &&
|
||||
typeof this.formData.locationName.value === 'string'
|
||||
const isDirectString = typeof this.formData.locationName === 'string'
|
||||
return isNestedValue
|
||||
? this.formData.locationName.value
|
||||
: isDirectString
|
||||
? this.formData.locationName
|
||||
: ''
|
||||
},
|
||||
locationNameLabelAddOnOldName() {
|
||||
return this.formLocationName !== '' ? ' — ' + this.formLocationName : ''
|
||||
},
|
||||
descriptionLength() {
|
||||
return this.$filters.removeHtml(this.formData.description).length
|
||||
},
|
||||
sameLocation() {
|
||||
const dbLocationName = this.group.locationName || ''
|
||||
return dbLocationName === this.formLocationName
|
||||
},
|
||||
sameCategories() {
|
||||
if (this.group.categories.length !== this.formData.categoryIds.length) return false
|
||||
const groupCategories = []
|
||||
this.group.categories.forEach((categories) => {
|
||||
groupCategories.push(categories.id)
|
||||
const some = this.formData.categoryIds.some((item) => item === categories.id)
|
||||
if (!some) return false
|
||||
})
|
||||
|
||||
return true
|
||||
},
|
||||
disableButtonByUpdate() {
|
||||
if (!this.update) return true
|
||||
return (
|
||||
this.group.name === this.formData.name &&
|
||||
this.group.slug === this.formData.slug &&
|
||||
this.group.about === this.formData.about &&
|
||||
this.group.description === this.formData.description &&
|
||||
this.group.actionRadius === this.formData.actionRadius &&
|
||||
this.sameLocation &&
|
||||
this.sameCategories
|
||||
)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
checkFormError(error) {
|
||||
if (!this.update && error && !!error && this.disableButtonByUpdate) return true
|
||||
if (this.update && !error && this.disableButtonByUpdate) return true
|
||||
return false
|
||||
},
|
||||
changeGroupType(event) {
|
||||
this.formData.groupType = event.target.value
|
||||
},
|
||||
@ -273,7 +333,7 @@ export default {
|
||||
this.$refs.groupForm.update('description', value)
|
||||
},
|
||||
submit() {
|
||||
const { name, about, description, groupType, actionRadius, locationName, categoryIds } =
|
||||
const { name, about, description, groupType, actionRadius, /* locationName, */ categoryIds } =
|
||||
this.formData
|
||||
const variables = {
|
||||
name,
|
||||
@ -281,7 +341,7 @@ export default {
|
||||
description,
|
||||
groupType,
|
||||
actionRadius,
|
||||
locationName: locationName.label ? locationName.label : '',
|
||||
locationName: this.formLocationName,
|
||||
categoryIds,
|
||||
}
|
||||
this.update
|
||||
@ -291,9 +351,12 @@ export default {
|
||||
})
|
||||
: this.$emit('createGroup', variables)
|
||||
},
|
||||
handleCityInput(value) {
|
||||
handleCityInput(event) {
|
||||
clearTimeout(timeout)
|
||||
timeout = setTimeout(() => this.requestGeoData(value), 500)
|
||||
timeout = setTimeout(
|
||||
() => this.requestGeoData(event.target ? event.target.value.trim() : ''),
|
||||
500,
|
||||
)
|
||||
},
|
||||
processLocationsResult(places) {
|
||||
if (!places.length) {
|
||||
@ -310,8 +373,7 @@ export default {
|
||||
|
||||
return result
|
||||
},
|
||||
async requestGeoData(e) {
|
||||
const value = e.target ? e.target.value.trim() : ''
|
||||
async requestGeoData(value) {
|
||||
if (value === '') {
|
||||
this.cities = []
|
||||
return
|
||||
@ -322,11 +384,13 @@ export default {
|
||||
const lang = this.$i18n.locale()
|
||||
|
||||
const {
|
||||
data: { queryLocations: res },
|
||||
data: { queryLocations: result },
|
||||
} = await this.$apollo.query({ query: queryLocations(), variables: { place, lang } })
|
||||
|
||||
this.cities = this.processLocationsResult(res)
|
||||
this.cities = this.processLocationsResult(result)
|
||||
this.loadingGeo = false
|
||||
|
||||
return this.cities.find((city) => city.value === value)
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user