<commit_before>import {Dictionary} from '../utils/dict'
import {Component, AbstractComponent, renderComponent} from './component'

class AddNewInput extends AbstractComponent {
	constructor (
		protected dict: Dictionary, 
		protected onAdd?:(key:string)=>any
	) { 
		super(); 
	}
	public render():JQuery {
		let keyInput = $('<input placeholder="japanese">');
		let valueInput = $('<input placeholder="english">');
		let button = $('<button>Add</button>').click((event) => {
			this.dict.set(keyInput.val(), valueInput.val());
			if (this.onAdd) {
				this.onAdd(keyInput.val());
			}
		});
		return $('<div class="pa-assistant-add-dictionary-item-container"></div>')
			.append(keyInput)
			.append(valueInput)
			.append(button)
	}
}

class DictionaryEntryEditor extends AbstractComponent {
	constructor(protected dict: Dictionary, protected key: string) { super(); }
	protected get value():string {
		return this.dict.get(this.key);
	}
	protected update(value: string):void {
		this.dict.set(this.key, value);
	}
	protected deleteEntry() {
		this.dict.set(this.key, undefined);
		this.self.remove();
	}
	private self = $('<div class="dictionary-config-container">');
	public render():JQuery {
		let keyLabel = $(`<label>${this.key}</label>`);
		let valueInput = $(`<input data-dict-key="${this.key}" value="${this.value}" />`);
		let updateButton = $('<button>Update</button>').click(event => this.update(valueInput.val()));
		let deleteButton = $('<button>Delete</button>').click(event => this.deleteEntry());
		return this.self
			.append(keyLabel)
			.append(valueInput)
			.append(updateButton)
			.append(deleteButton)
	}
}
export class DictionaryEditor extends AbstractComponent {
	protected self = $('<div class="pa-assistant-dictionary-config-editor"></div>');

	protected visible: boolean = false;

	constructor(protected dict: Dictionary) { super(); }

	public get children():Component[] {
		let addNewInput = new AddNewInput(this.dict, (key) => this.self.append(renderComponent(new DictionaryEntryEditor(this.dict, key))));
		let kvEditors = this.dict.keys.map(key => new DictionaryEntryEditor(this.dict, key));
		let components: Component[] = [addNewInput];
		return components.concat(kvEditors);
	}

	public render():JQuery {
		return this.self;
	}
}<commit_msg>Adding a new translation resets the input boxes<commit_after>import {Dictionary} from '../utils/dict'
import {Component, AbstractComponent, renderComponent} from './component'

class AddNewInput extends AbstractComponent {
	constructor (
		protected dict: Dictionary, 
		protected onAdd?:(key:string)=>any
	) { 
		super(); 
	}
	public render():JQuery {
		let keyInput = $('<input placeholder="japanese">');
		let valueInput = $('<input placeholder="english">');
		let button = $('<button>Add</button>').click((event) => {
			this.dict.set(keyInput.val(), valueInput.val());
			if (this.onAdd) {
				this.onAdd(keyInput.val());
			}

			keyInput.val('');
			valueInput.val('');
		});
		return $('<div class="pa-assistant-add-dictionary-item-container"></div>')
			.append(keyInput)
			.append(valueInput)
			.append(button)
	}
}

class DictionaryEntryEditor extends AbstractComponent {
	constructor(protected dict: Dictionary, protected key: string) { super(); }
	protected get value():string {
		return this.dict.get(this.key);
	}
	protected update(value: string):void {
		this.dict.set(this.key, value);
	}
	protected deleteEntry() {
		this.dict.set(this.key, undefined);
		this.self.remove();
	}
	private self = $('<div class="dictionary-config-container">');
	public render():JQuery {
		let keyLabel = $(`<label>${this.key}</label>`);
		let valueInput = $(`<input data-dict-key="${this.key}" value="${this.value}" />`);
		let updateButton = $('<button>Update</button>').click(event => this.update(valueInput.val()));
		let deleteButton = $('<button>Delete</button>').click(event => this.deleteEntry());
		return this.self
			.append(keyLabel)
			.append(valueInput)
			.append(updateButton)
			.append(deleteButton)
	}
}
export class DictionaryEditor extends AbstractComponent {
	protected self = $('<div class="pa-assistant-dictionary-config-editor"></div>');

	protected visible: boolean = false;

	constructor(protected dict: Dictionary) { super(); }

	public get children():Component[] {
		let addNewInput = new AddNewInput(this.dict, (key) => this.self.append(renderComponent(new DictionaryEntryEditor(this.dict, key))));
		let kvEditors = this.dict.keys.map(key => new DictionaryEntryEditor(this.dict, key));
		let components: Component[] = [addNewInput];
		return components.concat(kvEditors);
	}

	public render():JQuery {
		return this.self;
	}
}
{'fraction_non_alphanumeric': 0.17381927970670694, 'fraction_numerical': 0.0, 'mean_word_length': 5.0627450980392155, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2187156', 'n_tokens_mistral': 1529, 'n_tokens_neox': 1413, 'n_words': 295}