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.index = this.itemsCountValue = this.fieldTargets.length
|
|
}
|
|
|
|
addItem() {
|
|
let prototype = JSON.parse(this.prototypeValue)
|
|
const newField = prototype.replace(/__name__/g, this.index)
|
|
this.fieldsTarget.insertAdjacentHTML('beforeend', newField)
|
|
this.index++
|
|
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)
|
|
}
|
|
|
|
}
|