add automatic sync for new item name

Signed-off-by: Jimmy Tanagra <jcode@tanagra.id.au>
pull/3060/head
Jimmy Tanagra 2025-02-08 11:09:55 +10:00
parent be075aab07
commit d983f6a67f
2 changed files with 11 additions and 3 deletions

View File

@ -9,7 +9,7 @@
<f7-link slot="inner" icon-f7="hammer_fill" style="margin-top: 4px; margin-left: 4px; margin-bottom: auto" tooltip="Fix ID" v-if="createMode && nameErrorMessage && !nameErrorMessage.includes('exists') && item.name.trim()" @click="$oh.utils.normalizeInput('#input')" />
</f7-list-input>
<f7-list-input label="Label" type="text" placeholder="Item label for display purposes" :value="item.label"
@input="item.name = $event.target.value" :disabled="!editable" :clear-button="editable" />
@input="updateLabel" :disabled="!editable" :clear-button="editable" />
</f7-list-group>
<f7-list-group v-if="!hideType" v-show="itemType">
<!-- Type -->
@ -268,6 +268,14 @@ export default {
if (groupIndex >= 0) {
this.item.groupNames.splice(groupIndex, 1)
}
},
updateLabel (event) {
if (this.createMode && (!this.item.name || this.item.name === this.$oh.utils.normalizeLabel(this.item.label))) {
const inputElement = document.getElementById('input')
inputElement.value = this.$oh.utils.normalizeLabel(event.target.value)
inputElement.dispatchEvent(new Event('input'))
}
this.item.label = event.target.value
}
},
mounted () {

View File

@ -3,10 +3,10 @@ import diacritic from 'diacritic'
export default {
normalizeLabel: (label) => {
return diacritic.clean(label.normalize('NFKD')).replace(/\s+/g, '_').replace(/[^0-9a-z_]/gi, '').replace(/^([0-9])/, '_$1')
return diacritic.clean(label.normalize('NFKD')).trim().replace(/\s+/g, '_').replace(/[^0-9a-z_]/gi, '').replace(/^([0-9])/, '_$1')
},
normalizeLabelForThingId: (label) => {
return diacritic.clean(label.normalize('NFKD')).replace(/\s+/g, '-').replace(/[^0-9a-z_-]/gi, '').replace(/^-+/, '')
return diacritic.clean(label.normalize('NFKD')).trim().replace(/\s+/g, '-').replace(/[^0-9a-z_-]/gi, '').replace(/^-+/, '')
},
normalizeInput (id) {
const inputElement = document.querySelector(id)