QoL - Edited AddContainer(), AddOptionsToDropdownFromDataset() ; Added AddLabel(), AddFieldsGroup()

This commit is contained in:
NoahBoos 2025-03-11 22:16:13 +01:00
parent 46f3e1886e
commit 4b27291c79
2 changed files with 35 additions and 12 deletions

View file

@ -12,7 +12,7 @@ import {
AddSubtitle,
AddParagraph,
AddDropdown,
AddInputsToDropdownFromDataset,
AddOptionsToDropdownFromDataset,
AddInput,
AddButton
} from "./utils";
@ -64,17 +64,19 @@ export class AddNoteModal extends Modal {
// Adding subtitle.
AddSubtitle(contentEl, "Deck & Model")
// Adding the deck & model selectors container.
const dropdownContainer = AddContainer(contentEl);
const dropdownContainer = AddContainer(contentEl, [
"ankiIntegrationModal__dropdownContainer--flex"
]);
// Adding the deck selector.
const deckSelector = AddDropdown(dropdownContainer, "Choose a deck");
// Adding deck selector's options.
const deckKeys = Object.keys(ankiData["decksData"]);
AddInputsToDropdownFromDataset(deckSelector, deckKeys, "name", "name", ankiData["decksData"]);
AddOptionsToDropdownFromDataset(deckSelector, deckKeys, "name", "name", ankiData["decksData"]);
// Adding the model selector.
const modelSelector = AddDropdown(dropdownContainer, "Choose a model");
// Adding model selector's options.
const modelKeys = Object.keys(ankiData["modelsData"]);
AddInputsToDropdownFromDataset(modelSelector, modelKeys, "name", "name", ankiData["modelsData"]);
AddOptionsToDropdownFromDataset(modelSelector, modelKeys, "name", "name", ankiData["modelsData"]);
// Adding subtitle.
AddSubtitle(contentEl, "Fields");
// Adding the input fields container.

View file

@ -14,9 +14,7 @@ export function GetModelByName(plugin: AnkiIntegration, name: string) {
// Adding a container to a given HTMLElement.
export function AddContainer(parent: HTMLElement, classes: string[] = []) {
// Pushing into classes[] all mandatory classes.
classes.push(
"ankiIntegrationModal__dropdownContainer--flex"
);
classes.push();
// Creating the div HTMLDivElement.
let createdEl: HTMLDivElement;
createdEl = parent.createEl("div", {
@ -99,15 +97,31 @@ export function AddDropdown(parent: HTMLElement, defaultString: string, classes:
return createdEl;
}
// Adding all the inputs of a saved dataset to a given DropdownComponent.
export function AddInputsToDropdownFromDataset(parent: DropdownComponent, keys: string[], valueKey: string, placeholderKey:string, where: Object) {
// Adding all the options of a saved dataset to a given DropdownComponent.
export function AddOptionsToDropdownFromDataset(parent: DropdownComponent, keys: string[], valueKey: string, placeholderKey:string, where: Object) {
for (const key of keys) {
const inputValue = where[key][valueKey];
const inputPlaceholder = where[key][placeholderKey];
parent.addOption(inputValue, inputPlaceholder)
const optionValue = where[key][valueKey];
const optionPlaceholder = where[key][placeholderKey];
parent.addOption(optionValue, optionPlaceholder)
}
}
// Adding a label to a given HTMLElement.
export function AddLabel(parent: HTMLElement, text: string, classes: string[] = []) {
// Pushing into classes[] all mandatory classes.
classes.push();
// Creating the label HTMLLabelElement.
let createdEl: HTMLLabelElement;
createdEl = parent.createEl("label", {
text: text,
cls: [
classes.join(" ")
]
});
// Returning the input.
return createdEl;
}
// Adding an input to a given HTMLElement.
export function AddInput(parent: HTMLElement, type: string, placeholder: string = "", classes: string[] = []) {
// Pushing into classes[] all mandatory classes.
@ -131,6 +145,13 @@ export function AddInput(parent: HTMLElement, type: string, placeholder: string
return createdEl;
}
export function AddFieldGroups(parent: HTMLElement, keys: string[]) {
for (const key of keys) {
AddLabel(parent, key);
AddInput(parent, "text", key);
}
}
// Adding a button to a given HTMLElement.
export function AddButton(parent: HTMLElement, text: string, type: string, classes: string[] = []) {
// Pushing into classes[] all mandatory classes.