diff --git a/main.ts b/main.ts index c1841c8..dc65b92 100644 --- a/main.ts +++ b/main.ts @@ -28,8 +28,8 @@ export default class CsvPlugin extends Plugin { } //// csvdisplay.ts - openCsvInputModal = async (app: App, headers: Header, fileName: string) => { - createCsvInputModal_(app, headers, fileName); + openCsvInputModal = async (app: App, headers: Header, fileName: string, defaultValues: {[key: string] : string} = {} ) => { + createCsvInputModal_(app, headers, fileName, defaultValues); } createCsvTableView = (csvTable: CSVTable): HTMLElement => { return createCsvTableView_(csvTable); diff --git a/src/csvCreator.ts b/src/csvCreator.ts index 7881ffd..28c1893 100644 --- a/src/csvCreator.ts +++ b/src/csvCreator.ts @@ -13,7 +13,7 @@ export const createCsvFile_ = (app: App, filename: string, columnData: Header) : csvContent = csvContent.slice(0, -1) + '\n'; // .csv.meta 내용 생성 - const metaContent = JSON.stringify(columnData); + const metaContent = JSON.stringify(columnData, null, 2); // 파일 저장 const vault = app.vault; @@ -45,6 +45,7 @@ export default class CsvCreateModal extends Modal { // column 추가 addColumn() { let inputWarpper = this.columnsWrapper.createEl('tr'); + let columnTd = inputWarpper.createEl('td'); let columnInput = columnTd.createEl('input'); columnInput.classList.add('colname-input'); @@ -63,17 +64,28 @@ export default class CsvCreateModal extends Modal { let defaultTd = inputWarpper.createEl('td'); let defaultInput = defaultTd.createEl('input'); - defaultInput.classList.add('coldefault'); + defaultInput.classList.add('coldefault-input'); defaultInput.id = 'coldefault'; defaultInput.placeholder = 'default value'; // select type일 때만 options 추가 - let optionsTd = inputWarpper.createEl('td'); - let optionsInput = optionsTd.createEl('input'); - optionsInput.classList.add('coloptions-wrapper'); + let optionsInput = defaultTd.createEl('input'); + optionsInput.classList.add('coloptions-input'); + optionsInput.style.display = 'none'; optionsInput.id = 'coloptions'; optionsInput.placeholder = 'options (separated by comma)'; // type가 select일 때만 css로 쿼리해서 보이게 할 것. + + typeTd.addEventListener('change', () => { + if(typeSelect.value === 'select') { + optionsInput.style.display = 'block'; + defaultInput.style.display = 'none'; + } + else { + optionsInput.style.display = 'none'; + defaultInput.style.display = 'block'; + } + }); } createCsvFile() { @@ -173,14 +185,23 @@ export default class CsvCreateModal extends Modal { // column making table let columnsTable = contentEl.createEl('table'); columnsTable.classList.add('columns-table'); + + let colgroup = columnsTable.createEl('colgroup'); + let nameCol = colgroup.createEl('col'); + nameCol.style.width = '25%'; + let typeCol = colgroup.createEl('col'); + typeCol.style.width = '25%'; + let defaultCol = colgroup.createEl('col'); + defaultCol.style.width = '50%'; + let tHead = columnsTable.createEl('thead'); let tHeadRow = tHead.createEl('tr'); tHeadRow.classList.add('columns-table-header'); tHeadRow.createEl('th', {text: 'Column Name'}); tHeadRow.createEl('th', {text: 'Type'}); + tHeadRow.createEl('th', {text: 'Default Value'}); - columnsTable.createEl('hr'); this.columnsWrapper = columnsTable.createEl('tbody'); this.columnsWrapper.classList.add('columns-wrapper'); diff --git a/src/csvFilemanager.ts b/src/csvFilemanager.ts index 38542c4..0702426 100644 --- a/src/csvFilemanager.ts +++ b/src/csvFilemanager.ts @@ -24,7 +24,7 @@ export const readCSV_ = async (app: App, fileName: string): Promise { - const form = generateForm(fileName, headers); +export const createCsvInputModal_ = async (app: App, headers: Header, fileName: string, defaultValues: {[key: string]: string}) => { + const form = generateForm(fileName, headers, defaultValues); const modal = new Modal(app); modal.contentEl.empty(); @@ -37,7 +37,7 @@ export const createCsvInputModal_ = async (app: App, headers: Header, fileName: }); } -const generateForm = (fileName: string, headers: Header): HTMLFormElement => { +const generateForm = (fileName: string, headers: Header, defaultValues: {[key: string]: string}): HTMLFormElement => { const form = document.createElement("form"); form.id = "csv-input-form"; @@ -58,7 +58,7 @@ const generateForm = (fileName: string, headers: Header): HTMLFormElement => { // 폼 요소 생성 // 입력 필드 생성 및 추가 for(const [key, value] of Object.entries(headers)) { - const field = createHeaderInputField(key, value); + const field = createHeaderInputField(key, value, defaultValues[key] || ""); form.appendChild(field); }; @@ -77,7 +77,7 @@ const generateForm = (fileName: string, headers: Header): HTMLFormElement => { return form; } -const createHeaderInputField = (key: string, headerContent: HeaderContent): HTMLDivElement => { +const createHeaderInputField = (key: string, headerContent: HeaderContent, defaultValue: string): HTMLDivElement => { // 입력 필드 래퍼 생성 const formGroup = document.createElement("div"); formGroup.className = "form-group"; @@ -88,17 +88,21 @@ const createHeaderInputField = (key: string, headerContent: HeaderContent): HTML label.htmlFor = key; label.textContent = key; + formGroup.appendChild(label); + // 입력 필드 생성 // select일 때와 아닐 때로 나눠야 함. - const input = document.createElement("input"); + + if(headerContent.type === "select") { + const input = document.createElement("select"); input.className = "input-value"; - input.type = "select"; input.id = key; input.name = key; - input.placeholder = headerContent.default.toString(); + if(!(headerContent.options === undefined)) { + // console.log(headerContent.options); for(const option of headerContent.options) { const optionElement = document.createElement("option"); optionElement.value = option; @@ -106,18 +110,23 @@ const createHeaderInputField = (key: string, headerContent: HeaderContent): HTML input.appendChild(optionElement); } } + input.value = defaultValue; + + formGroup.appendChild(input); } else { + const input = document.createElement("input"); input.className = "input-value"; input.type = "text"; input.id = key; input.name = key; input.placeholder = headerContent.default.toString(); + input.value = defaultValue; + + formGroup.appendChild(input); } // 요소 추가 - formGroup.appendChild(label); - formGroup.appendChild(input); return formGroup; } diff --git a/src/styles/csvCreator.css b/src/styles/csvCreator.css index 938b390..8d72be2 100644 --- a/src/styles/csvCreator.css +++ b/src/styles/csvCreator.css @@ -51,6 +51,7 @@ hr { .columns-table-header { gap: 1rem; align-items: center; + border-bottom: 1px solid #777; } .colname-input { @@ -73,3 +74,22 @@ hr { color: var(--text-normal); } +.coldefault-input { + padding: 2px; + width: 100%; height: 30px; + border: 1px solid #ccc; + border-radius: 0.25rem; + font-size: 1rem; + font-family: var(--font-monospace); + color: var(--text-normal); +} + +.coloptions-input { + padding: 2px; + width: 100%; height: 30px; + border: 1px solid #ccc; + border-radius: 0.25rem; + font-size: 1rem; + font-family: var(--font-monospace); + color: var(--text-normal); +} \ No newline at end of file