update code #96

Merged
dev merged 2 commits from dev-luannv24-fixbug into dev 2025-08-27 10:33:37 +09:00
7 changed files with 16 additions and 11 deletions
Showing only changes of commit 3702c59f20 - Show all commits

View File

@ -33,7 +33,6 @@ import Form from '~/components/common/form/Form';
import mixinGlobal from '@/mixin/global.js';
import { NewCustomRenderer } from '~/plugins/gridUtility';
import { NewCustomEditor } from '~/plugins/gridUtility';
import { CustomEditorCheckbox } from '~/plugins/gridUtility';
export default {
mixins: [mixinGlobal],
components: {
@ -103,7 +102,7 @@ export default {
this.gridInit();
},
gridInit() {
const gridHeight = this.$refs.gridParent.offsetHeight - 31;
const gridHeight = this.$refs.gridParent.offsetHeight;
const myOptions = {
columnOptions: {
@ -310,7 +309,7 @@ export default {
type: NewCustomRenderer,
},
editor: {
type: CustomEditorCheckbox,
type: NewCustomEditor,
},
formatter(data) {
return data.row.addInfoDataKind;

View File

@ -327,6 +327,10 @@ export class NewCustomEditor {
} else {
el.checked = false;
}
divEl.style.position = 'relative';
divEl.style.top = rowKey === 0 ? '1px' : '3px';
el.addEventListener('change', (ev) => {
// console.log('props: %o', ev);
if (ev.target.checked) {
@ -402,158 +406,3 @@ export class NewCustomEditor {
this.el.select();
}
}
export class CustomEditorCheckbox {
constructor(props) {
const { grid, rowKey, columnInfo } = props;
this.grid = grid;
this.rowKey = rowKey;
this.columnInfo = columnInfo;
const origin = grid?.dataManager?.getOriginData?.() || grid?.dataManager?.originData || [];
this.gridOriginData = origin;
const wrap = document.createElement('div');
wrap.className = 'tui-grid-cell-content';
wrap.style.height = '100%';
wrap.style.display = 'flex';
wrap.style.justifyContent = 'center';
const input = document.createElement('input');
const rowRaw = props.grid.store.data.rawData[props.rowKey] || {};
const isFG = rowRaw.addInfoDataKind == 'FG';
const isNUM = props.formattedValue === 'NUM';
if (isFG) {
input.type = 'checkbox';
input.checked = String(props.value) === '1';
input.value = input.checked ? '1' : '0';
wrap.style.position = 'relative';
wrap.style.top = rowKey === 0 ? '1px' : '3px';
input.addEventListener('change', (ev) => {
const checked = ev.target.checked;
ev.target.value = checked ? '1' : '0';
if (!checked) {
const rowOrigin = this.gridOriginData[this.rowKey];
const originValRaw = rowOrigin ? rowOrigin[this.columnInfo.name] : null;
const originVal = normalizeVal(originValRaw);
if (originVal !== '1') {
ev.target.value = originVal ?? '0';
}
}
this._updateRowChangeState(ev.target.value);
});
} else {
// Text input
input.type = 'text';
input.autocomplete = 'off';
input.spellcheck = false;
if (isNUM) {
const filterToDigits = (el) => {
const before = el.value;
const after = before.replace(/[^0-9]/g, '');
if (before !== after) el.value = after;
};
input.addEventListener('input', () => filterToDigits(input));
input.addEventListener('blur', () => filterToDigits(input));
input.addEventListener('drop', (e) => {
e.preventDefault();
const text = (e.dataTransfer.getData('text') || '').replace(/[^0-9]/g, '');
const { selectionStart, selectionEnd } = input;
const val = input.value;
input.value = val.slice(0, selectionStart) + text + val.slice(selectionEnd);
this._updateRowChangeState(input.value);
});
input.addEventListener('paste', (e) => {
e.preventDefault();
const text = (e.clipboardData.getData('text') || '').replace(/[^0-9]/g, '');
const { selectionStart, selectionEnd } = input;
const val = input.value;
input.value = val.slice(0, selectionStart) + text + val.slice(selectionEnd);
this._updateRowChangeState(input.value);
});
}
wrap.style.justifyContent = 'flex-start';
input.style.width = '100%';
input.style.boxSizing = 'border-box';
}
wrap.appendChild(input);
this.divEl = wrap;
this.el = input;
this.render(props);
function normalizeVal(v) {
if (v === true) return '1';
if (v === false) return '0';
if (v == null) return null;
const s = String(v).trim();
if (s === '1' || s === '0') return s;
return s;
}
this._normalizeVal = normalizeVal;
}
getElement() {
return this.divEl;
}
getValue() {
if (this.el.type === 'checkbox') {
return this.el.checked ? '1' : '0';
}
return this.el.value;
}
render(props) {
if (this.el.type === 'checkbox') {
const isOne = String(props.value) === '1';
this.el.checked = isOne;
this.el.value = isOne ? '1' : '0';
} else {
this.el.value = props.value != null ? String(props.value) : '';
}
}
mounted() {
if (this.el.type !== 'checkbox') {
try { this.el.select(); } catch {}
}
}
_updateRowChangeState(changedRaw) {
const changed = this._normalizeVal(changedRaw);
const rowOrigin = this.gridOriginData[this.rowKey];
const originRaw = rowOrigin ? rowOrigin[this.columnInfo.name] : null;
const origin = this._normalizeVal(originRaw);
if (origin === changed || (origin == null && (changed === '' || changed == null))) {
this.grid.removeRowClassName(this.rowKey, 'row-insert');
this.grid.setValue(this.rowKey, 'rowStat', null);
} else {
this.grid.setValue(this.rowKey, 'rowStat', 'U');
this.grid.addRowClassName(this.rowKey, 'row-insert');
}
}
}