mirror of
https://github.com/zadam/trilium.git
synced 2025-06-06 09:58:32 +02:00
converted sort by dialog to new pattern
This commit is contained in:
zadam
parent
312ffc110a
commit
ca44edd48c
@ -1,25 +0,0 @@
|
||||
import server from "../services/server.js";
|
||||
import utils from "../services/utils.js";
|
||||
|
||||
const $dialog = $("#sort-child-notes-dialog");
|
||||
const $form = $("#sort-child-notes-form");
|
||||
|
||||
let parentNoteId = null;
|
||||
|
||||
$form.on('submit', async () => {
|
||||
const sortBy = $form.find("input[name='sort-by']:checked").val();
|
||||
const sortDirection = $form.find("input[name='sort-direction']:checked").val();
|
||||
const foldersFirst = $form.find("input[name='sort-folders-first']").is(":checked");
|
||||
|
||||
await server.put(`notes/${parentNoteId}/sort-children`, {sortBy, sortDirection, foldersFirst});
|
||||
|
||||
utils.closeActiveDialog();
|
||||
});
|
||||
|
||||
export async function showDialog(noteId) {
|
||||
parentNoteId = noteId;
|
||||
|
||||
utils.openDialog($dialog);
|
||||
|
||||
$form.find('input:first').focus();
|
||||
}
|
||||
@ -57,6 +57,7 @@ import HelpDialog from "../widgets/dialogs/help.js";
|
||||
import RecentChangesDialog from "../widgets/dialogs/recent_changes.js";
|
||||
import BackendLogDialog from "../widgets/dialogs/backend_log.js";
|
||||
import BranchPrefixDialog from "../widgets/dialogs/branch_prefix.js";
|
||||
import SortChildNotesDialog from "../widgets/dialogs/sort_child_notes.js";
|
||||
|
||||
export default class DesktopLayout {
|
||||
constructor(customWidgets) {
|
||||
@ -188,6 +189,7 @@ export default class DesktopLayout {
|
||||
.child(new HelpDialog())
|
||||
.child(new RecentChangesDialog())
|
||||
.child(new BackendLogDialog())
|
||||
.child(new BranchPrefixDialog());
|
||||
.child(new BranchPrefixDialog())
|
||||
.child(new SortChildNotesDialog());
|
||||
}
|
||||
}
|
||||
|
||||
100
src/public/app/widgets/dialogs/sort_child_notes.js
Normal file
100
src/public/app/widgets/dialogs/sort_child_notes.js
Normal file
@ -0,0 +1,100 @@
|
||||
import server from "../../services/server.js";
|
||||
import utils from "../../services/utils.js";
|
||||
import BasicWidget from "../basic_widget.js";
|
||||
|
||||
const TPL = `<div class="sort-child-notes-dialog modal mx-auto" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg" style="max-width: 500px" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title mr-auto">Sort children by ...</h5>
|
||||
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0 !important;">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<form class="sort-child-notes-form">
|
||||
<div class="modal-body">
|
||||
<h5>Sorting criteria</h5>
|
||||
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="sort-by" value="title" checked>
|
||||
title
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="sort-by" value="dateCreated">
|
||||
date created
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="sort-by" value="dateModified">
|
||||
date modified
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<h5>Sorting direction</h5>
|
||||
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="sort-direction" value="asc" checked>
|
||||
ascending
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="sort-direction" value="desc">
|
||||
descending
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<h5>Folders</h5>
|
||||
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="checkbox" name="sort-folders-first" value="1">
|
||||
sort folders at the top
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-primary">Sort <kbd>enter</kbd></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
export default class SortChildNotesDialog extends BasicWidget {
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
this.$form = this.$widget.find(".sort-child-notes-form");
|
||||
|
||||
this.$form.on('submit', async () => {
|
||||
const sortBy = this.$form.find("input[name='sort-by']:checked").val();
|
||||
const sortDirection = this.$form.find("input[name='sort-direction']:checked").val();
|
||||
const foldersFirst = this.$form.find("input[name='sort-folders-first']").is(":checked");
|
||||
|
||||
await server.put(`notes/${this.parentNoteId}/sort-children`, {sortBy, sortDirection, foldersFirst});
|
||||
|
||||
utils.closeActiveDialog();
|
||||
});
|
||||
}
|
||||
|
||||
async sortChildNotesEvent({node}) {
|
||||
this.parentNoteId = node.data.noteId;
|
||||
|
||||
utils.openDialog(this.$widget);
|
||||
|
||||
this.$form.find('input:first').focus();
|
||||
}
|
||||
}
|
||||
@ -1424,10 +1424,6 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
|
||||
this.collapseTree(node);
|
||||
}
|
||||
|
||||
sortChildNotesCommand({node}) {
|
||||
import("../dialogs/sort_child_notes.js").then(d => d.showDialog(node.data.noteId));
|
||||
}
|
||||
|
||||
async recentChangesInSubtreeCommand({node}) {
|
||||
this.triggerCommand("showRecentChanges", {ancestorNoteId: node.data.noteId});
|
||||
}
|
||||
|
||||
@ -31,7 +31,6 @@
|
||||
<%- include('dialogs/clone_to.ejs') %>
|
||||
<%- include('dialogs/move_to.ejs') %>
|
||||
<%- include('dialogs/include_note.ejs') %>
|
||||
<%- include('dialogs/sort_child_notes.ejs') %>
|
||||
<%- include('dialogs/delete_notes.ejs') %>
|
||||
<%- include('dialogs/password_not_set.ejs') %>
|
||||
<%- include('dialogs/note_type_chooser.ejs') %>
|
||||
|
||||
@ -1,71 +0,0 @@
|
||||
<div id="sort-child-notes-dialog" class="modal mx-auto" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg" style="max-width: 500px" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title mr-auto">Sort children by ...</h5>
|
||||
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0 !important;">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<form id="sort-child-notes-form">
|
||||
<div class="modal-body">
|
||||
<h5>Sorting criteria</h5>
|
||||
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="sort-by" value="title" id="sort-by-title" checked>
|
||||
<label class="form-check-label" for="sort-by-title">
|
||||
title
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="sort-by" value="dateCreated" id="sort-by-date-created">
|
||||
<label class="form-check-label" for="sort-by-date-created">
|
||||
date created
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="sort-by" value="dateModified" id="sort-by-date-modified">
|
||||
<label class="form-check-label" for="sort-by-date-modified">
|
||||
date modified
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<h5>Sorting direction</h5>
|
||||
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="sort-direction" value="asc" id="sort-direction-asc" checked>
|
||||
<label class="form-check-label" for="sort-direction-asc">
|
||||
ascending
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="sort-direction" value="desc" id="sort-direction-desc">
|
||||
<label class="form-check-label" for="sort-direction-desc">
|
||||
descending
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<h5>Folders</h5>
|
||||
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="sort-folders-first" value="1" id="sort-folders-first">
|
||||
<label class="form-check-label" for="sort-folders-first">
|
||||
sort folders at the top
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-primary">Sort <kbd>enter</kbd></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user