51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
|
import {} from '@hotwired/stimulus';
|
||
|
|
import { show, hide } from '~/shared/utils';
|
||
|
|
import { ApplicationController } from './application_controller';
|
||
|
|
|
||
|
|
type AttachementDestroyedEvent = CustomEvent<{ target_id: string }>;
|
||
|
|
|
||
|
|
export class AttachmentMultipleController extends ApplicationController {
|
||
|
|
static targets = ['buttonAdd', 'empty'];
|
||
|
|
|
||
|
|
declare readonly emptyTarget: HTMLDivElement;
|
||
|
|
declare readonly buttonAddTarget: HTMLButtonElement;
|
||
|
|
|
||
|
|
connect() {
|
||
|
|
this.onGlobal('attachment:destroyed', (event: AttachementDestroyedEvent) =>
|
||
|
|
this.onAttachmentDestroy(event)
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
add(event: Event) {
|
||
|
|
event.preventDefault();
|
||
|
|
|
||
|
|
hide(this.buttonAddTarget);
|
||
|
|
|
||
|
|
show(this.emptyTarget);
|
||
|
|
|
||
|
|
const inputFile = this.emptyTarget.querySelector(
|
||
|
|
'input[type=file]'
|
||
|
|
) as HTMLInputElement;
|
||
|
|
|
||
|
|
inputFile.click();
|
||
|
|
}
|
||
|
|
|
||
|
|
onAttachmentDestroy(event: AttachementDestroyedEvent) {
|
||
|
|
const { detail } = event;
|
||
|
|
|
||
|
|
const attachmentWrapper = document.getElementById(detail.target_id);
|
||
|
|
|
||
|
|
// Remove this attachment row when there is at least another attachment.
|
||
|
|
if (attachmentWrapper && this.attachmentsCount() > 1) {
|
||
|
|
attachmentWrapper.parentNode?.removeChild(attachmentWrapper);
|
||
|
|
} else {
|
||
|
|
hide(this.buttonAddTarget);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
attachmentsCount() {
|
||
|
|
// Don't count the hidden "empty" attachment
|
||
|
|
return this.element.querySelectorAll('.attachment-input').length - 1;
|
||
|
|
}
|
||
|
|
}
|