import EditableInput from './EditableInput';
class LayoutGridModel {
constructor(items) {
this.items = items;
}
}
class LayoutGridView {
constructor(model, controller) {
this.model = model;
this.controller = controller;
}
render() {
this.renderApiLayout();
}
renderApiLayout() {
const requestContainer = this.targetContent.find('.request_layout');
requestContainer.empty();
const headerHtml = `
| # |
ID |
Parent |
항목명(영문) |
항목설명 |
깊이 |
아이템 유형 |
반복 횟수 |
반복 참조 필드 |
데이터 길이 |
값 |
비고 |
`;
const footerHtml = `
`;
const fieldsHtml = this.model.items ? this.model.items.map((item, index) => {
return this.renderApiLayoutItem(item, index);
}).join('') : '';
requestContainer.append(headerHtml + fieldsHtml + footerHtml);
requestContainer.find('.editable').each((index, editableElement) => {
const editableInput = new EditableInput({
name: editableElement.dataset.name,
value: editableElement.dataset.value,
style : {width : '120px'}
});
editableInput.init(editableElement, async (value) => {
_.set(this.model, editableElement.dataset.name, value);
await this.controller.additionalCallback(this.model);
});
});
let totalLength = 0;
this.model.items.forEach(item => {
totalLength += parseInt(item.loutItemLength);
});
this.setupListeners();
}
getFieldValue(element) {
if ($(element).is('select') || $(element).is('input[type="text"]') || $(element).is('input[type="number"]')) {
return $(element).val();
}
if ($(element).is('input[type="checkbox"]')) {
return $(element).is(':checked');
}
}
recalculateSerno() {
// Reassign loutItemSerno sequentially based on the current order
this.model.items.forEach((item, index) => {
item.loutItemSerno = index + 1; // Assuming you want to start numbering from 1
});
}
async handleUIUpdate(event) {
if (event) {
event.preventDefault();
const element = event.currentTarget;
const fieldName = $(element).attr('name');
const newValue = this.getFieldValue(element);
if (fieldName !== '') {
_.set(this.model, fieldName, newValue);
await this.controller.additionalCallback(this.model);
}
}
let totalLength = 0;
this.model.items.forEach(item => {
totalLength += parseInt(item.loutItemLength);
});
}
getLastId (){
let lastId = 0;
this.model.items.forEach(item => {
if (item.id > lastId) {
lastId = item.id;
}
});
return lastId + 1;
}
setupListeners() {
const table = this.targetContent.find('.layout_table');
table.on('change', 'select.field, input.field', this.handleUIUpdate.bind(this));
table.on('click', '.add-layout-item', async(event) => {
let item = {
'id' : this.getLastId(),
'parent': 0,
'level': 1,
'loutName': '',
'loutItemName': '',
'loutItemDesc': '',
'loutItemDepth': 1,
'loutItemType': 'Field',
'loutItemOccCnt': '',
'loutItemOccRef': '',
'loutItemDataType': 'String',
'loutItemLength': 1,
'loutItemDecimal': 0,
'loutItemDefault': '',
'loutItemMaskYn': 'N',
'loutItemMaskOffset': 0,
'loutItemMaskLength': 0,
'parentLoutItemIndex': 0,
'expanded': true,
'isLeaf': true,
'LOUTITEMPATH': '',
'value': '',
'loutItemSerno': 0
};
this.model.items.push(item);
this.recalculateSerno();
this.renderApiLayout();
await this.controller.additionalCallback(this.model);
});
table.on('click', '.move-up', async (event) => {
const index = $(event.currentTarget).data('index');
if (index > 0) {
const temp = this.model.items[index];
this.model.items[index] = this.model.items[index - 1];
this.model.items[index - 1] = temp;
this.recalculateSerno();
this.renderApiLayout();
await this.controller.additionalCallback(this.model);
}
});
table.on('click', '.move-down', async (event) => {
const index = $(event.currentTarget).data('index');
if (index < this.model.items.length - 1) {
const temp = this.model.items[index];
this.model.items[index] = this.model.items[index + 1];
this.model.items[index + 1] = temp;
this.recalculateSerno();
this.renderApiLayout();
await this.controller.additionalCallback(this.model);
}
});
table.on('click', '.delete', async (event) => {
const index = $(event.currentTarget).data('index');
this.model.items.splice(index, 1);
this.recalculateSerno();
this.renderApiLayout();
await this.controller.additionalCallback(this.model);
});
}
renderApiLayoutItem(item, index) {
if (item.value === null) {
item.value = '';
}
return `
|
${item.loutItemSerno}
|
|
|
|
|
|
|
|
|
|
${ item.loutItemType ==='Field'? ``:''}
|
|
`;
}
}
class LayoutGridController {
constructor(model) {
this.model = model;
this.view = new LayoutGridView(this.model, this);
}
init(targetContent, callback) {
this.additionalCallback = callback;
this.view.targetContent = targetContent;
this.view.render();
}
}
class LayoutGrid {
constructor(layout) {
this.model = new LayoutGridModel(layout.layoutItems);
this.controller = new LayoutGridController(this.model);
}
init(targetContent, callback) {
this.controller.init(targetContent, callback);
}
}
export default LayoutGrid;