Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

卒業証書のPDFファイルをアップロードできる機能を追加 #8190

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 39 additions & 38 deletions app/javascript/fileinput.js
Original file line number Diff line number Diff line change
Expand Up @@ -75,52 +75,53 @@ function extractField(elements) {
}
}

document.addEventListener('DOMContentLoaded', () => {
const ref = document.querySelector('#reference_books')
if (ref) {
$(ref).on('cocoon:after-insert', (_, target) => {
const added = extractField(target)
initializeFileInput(added)
})
function initializePdfUploadField() {
Copy link
Contributor

@mousu-a mousu-a Dec 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

提案です!
initializeDiplomaUploadFieldの方がいいかも?

const uploadField = document.getElementById('js-pdf-upload-field')
if (!uploadField) return

const removeButton = document.getElementById('js-remove-pdf-button')
const fileLink = document.getElementById('js-pdf-file-link')
const removeFlag = document.getElementById('js-remove-pdf-flag')
const fileNameDisplay = document.getElementById('js-pdf-name')
Copy link
Contributor

@mousu-a mousu-a Dec 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

提案です!
fileNameDisplay → fileName でも良さそうです🙆

const fileInput = uploadField.querySelector('input[type="file"]')

const updateFileNameDisplay = (name = '') => {
Copy link
Contributor

@mousu-a mousu-a Dec 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

提案です!
updateDisplayedFileName とかではどうでしょうか?

if (name) {
Copy link
Contributor

@mousu-a mousu-a Dec 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

こんな感じで書けそうです🙆

fileNameDisplay.textContent = name
const displayedStatus = name ? 'block' : 'none'
fileNameDisplay.style.display = displayedStatus

Copy link
Contributor Author

@hagiya0121 hagiya0121 Dec 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

指摘された点とfileInputのイベントリスナーのロジックもリファクタリングしました。
97b19ed

fileNameDisplay.textContent = name
fileNameDisplay.style.display = 'block'
} else {
fileNameDisplay.textContent = ''
fileNameDisplay.style.display = 'none'
}
}
initializeFileInput(document)
})

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

今回実装する部分を関数にして↑の DOMContentLoadedに入れてはどうでしょうか?

あと画面の読み込み時に実行していますが、該当する画面でない場合のreturnがなさそうです。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

変更しました
6b5d653

document.addEventListener('DOMContentLoaded', () => {
const removePdfButton = document.getElementById('js-remove-pdf-button')
const pdfUploadField = document.getElementById('js-pdf-upload-field')
const pdfFileLink = document.getElementById('js-pdf-file-link')
const removePdfFlag = document.getElementById('js-remove-pdf-flag')
const pdfFileNameDisplay = document.getElementById('js-pdf-name')

removePdfButton.addEventListener('click', () => {
if (pdfFileLink) pdfFileLink.style.display = 'none'
pdfUploadField.style.display = 'flex'
pdfUploadField.querySelector('input[type="file"]').value = ''
removePdfFlag.value = '1'

if (pdfFileNameDisplay) {
pdfFileNameDisplay.textContent = ''
pdfFileNameDisplay.style.display = 'none'
}
removeButton.addEventListener('click', () => {
if (fileLink) fileLink.style.display = 'none'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ファイルがアップロードされている時のみ削除ボタンが表示されていれば、if文は不要になるかもです

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fileLinkはHTMLが生成されない場合があるのでエラーになるようです。

uploadField.style.display = 'flex'
fileInput.value = ''
removeFlag.value = '1'
updateFileNameDisplay()
})

const fileInput = pdfUploadField.querySelector('input[type="file"]')
fileInput.addEventListener('change', () => {
if (fileInput.files && fileInput.files[0]) {
const fileName = fileInput.files[0].name

if (pdfFileNameDisplay) {
pdfFileNameDisplay.textContent = fileName
pdfFileNameDisplay.style.display = 'block'
}

removePdfFlag.value = '0'
updateFileNameDisplay(fileName)
removeFlag.value = '0'
} else {
if (pdfFileNameDisplay) {
pdfFileNameDisplay.textContent = ''
pdfFileNameDisplay.style.display = 'none'
}
updateFileNameDisplay()
}
})
}

document.addEventListener('DOMContentLoaded', () => {
const ref = document.querySelector('#reference_books')
if (ref) {
$(ref).on('cocoon:after-insert', (_, target) => {
const added = extractField(target)
initializeFileInput(added)
})
}
initializeFileInput(document)
initializePdfUploadField()
})