47 lines
1.3 KiB
JavaScript
47 lines
1.3 KiB
JavaScript
import {Controller} from '@hotwired/stimulus'
|
|
|
|
export default class extends Controller {
|
|
|
|
static targets = ['fields', 'field', 'addButton', 'index']
|
|
static values = {
|
|
prototype: String,
|
|
maxItems: Number,
|
|
itemsCount: Number,
|
|
}
|
|
|
|
connect() {
|
|
this.itemsCountValue = this.fieldTargets.length
|
|
}
|
|
|
|
addItem() {
|
|
const index = this.fieldTargets.length + 1
|
|
const prototype = JSON.parse(this.prototypeValue)
|
|
const newField = prototype.replace(/__name__/g, index)
|
|
this.fieldsTarget.insertAdjacentHTML('beforeend', newField)
|
|
this.itemsCountValue++
|
|
}
|
|
|
|
removeItem(event) {
|
|
this.fieldTargets.forEach(element => {
|
|
if (element.contains(event.target)) {
|
|
element.remove()
|
|
this.itemsCountValue--
|
|
}
|
|
})
|
|
}
|
|
|
|
itemsCountValueChanged(itemsCount) {
|
|
if (this.hasIndexTarget) {
|
|
this.indexTargets.forEach((target, index) => {
|
|
target.innerText = index + 1
|
|
})
|
|
}
|
|
if (false === this.hasAddButtonTarget || 0 === this.maxItemsValue) {
|
|
return
|
|
}
|
|
const maxItemsReached = itemsCount >= this.maxItemsValue
|
|
this.addButtonTarget.classList.toggle('hidden', maxItemsReached)
|
|
}
|
|
|
|
}
|