gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-07 23:18:59 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

refactor(collections/board): use same title editor for new columns

Browse Source
This commit is contained in:
Elian Doran 2025-09-12 17:05:17 +03:00
parent ede4b99bcd
commit 0d275b3259
No known key found for this signature in database
2 changed files with 39 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
apps/client/src/widgets/collections/board/api.ts
View File

@ -43,6 +43,27 @@ export default class BoardApi {
await attributes.setLabel(noteId, this.statusAttribute, newColumn);
}
async addNewColumn(columnName: string) {
if (!columnName.trim()) {
return;
}
if (!this.viewConfig) {
this.viewConfig = {};
}
if (!this.viewConfig.columns) {
this.viewConfig.columns = [];
}
// Add the new column to persisted data if it doesn't exist
const existingColumn = this.viewConfig.columns.find(col => col.value === columnName);
if (!existingColumn) {
this.viewConfig.columns.push({ value: columnName });
this.saveConfig(this.viewConfig);
}
}
async removeColumn(column: string) {
// Remove the value from the notes.
const noteIds = this.byColumn?.get(column)?.map(item => item.note.noteId) || [];

69
apps/client/src/widgets/collections/board/index.tsx
View File

@ -189,46 +189,20 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
<div className="column-drop-placeholder show" />
)}
<AddNewColumn viewConfig={viewConfig} saveConfig={saveConfig} />
<AddNewColumn api={api} />
</div>
</BoardViewContext.Provider>
</div>
)
}
function AddNewColumn({ viewConfig, saveConfig }: { viewConfig?: BoardViewData, saveConfig: (data: BoardViewData) => void }) {
function AddNewColumn({ api }: { api: BoardApi }) {
const [ isCreatingNewColumn, setIsCreatingNewColumn ] = useState(false);
const columnNameRef = useRef<HTMLInputElement>(null);
const addColumnCallback = useCallback(() => {
setIsCreatingNewColumn(true);
}, []);
const finishEdit = useCallback((save: boolean) => {
const columnName = columnNameRef.current?.value;
if (!columnName || !save) {
setIsCreatingNewColumn(false);
return;
}
// Add the new column to persisted data if it doesn't exist
if (!viewConfig) {
viewConfig = {};
}
if (!viewConfig.columns) {
viewConfig.columns = [];
}
const existingColumn = viewConfig.columns.find(col => col.value === columnName);
if (!existingColumn) {
viewConfig.columns.push({ value: columnName });
saveConfig(viewConfig);
}
setIsCreatingNewColumn(false);
}, [ viewConfig, saveConfig ]);
return (
<div className={`board-add-column ${isCreatingNewColumn ? "editing" : ""}`} onClick={addColumnCallback}>
{!isCreatingNewColumn
@ -236,33 +210,25 @@ function AddNewColumn({ viewConfig, saveConfig }: { viewConfig?: BoardViewData,
<Icon icon="bx bx-plus" />{" "}
{t("board_view.add-column")}
</>
: <>
<FormTextBox
inputRef={columnNameRef}
type="text"
: (
<TitleEditor
placeholder={t("board_view.add-column-placeholder")}
onBlur={() => finishEdit(true)}
onKeyDown={(e: KeyboardEvent) => {
if (e.key === "Enter") {
e.preventDefault();
finishEdit(true);
} else if (e.key === "Escape") {
e.preventDefault();
finishEdit(false);
}
}}
save={(columnName) => api.addNewColumn(columnName)}
dismiss={() => setIsCreatingNewColumn(false)}
isNewItem
/>
</>}
)}
</div>
)
}
export function TitleEditor({ currentValue, save, dismiss, multiline, isNewItem }: {
currentValue: string,
save: (newValue: string) => void,
dismiss: () => void,
multiline?: boolean,
isNewItem?: boolean
export function TitleEditor({ currentValue, placeholder, save, dismiss, multiline, isNewItem }: {
currentValue?: string;
placeholder?: string;
save: (newValue: string) => void;
dismiss: () => void;
multiline?: boolean;
isNewItem?: boolean;
}) {
const inputRef = useRef<any>(null);
@ -276,7 +242,8 @@ export function TitleEditor({ currentValue, save, dismiss, multiline, isNewItem
return (
<Element
inputRef={inputRef}
currentValue={currentValue}
currentValue={currentValue ?? ""}
placeholder={placeholder}
rows={multiline ? 4 : undefined}
onKeyDown={(e) => {
if (e.key === "Enter") {
@ -298,5 +265,5 @@ export function TitleEditor({ currentValue, save, dismiss, multiline, isNewItem
dismiss();
}}
/>
)
);
}