sascha
/
Notes
mirror of https://github.com/TriliumNext/Notes
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

converted sort by dialog to new pattern

pull/255/head
zadam 2022-06-14 23:19:41 +07:00
parent 312ffc110a
commit ca44edd48c
6 changed files with 103 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/public/app/dialogs/sort_child_notes.js
Unescape Escape View File

@ -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();
}

4
src/public/app/layouts/desktop_layout.js
Unescape Escape View File

@ -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
Unescape Escape View 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">&times;</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();
}
}

4
src/public/app/widgets/note_tree.js
Unescape Escape View File

@ -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});
}

1
src/views/desktop.ejs
Unescape Escape View File

@ -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') %>

71
src/views/dialogs/sort_child_notes.ejs
Unescape Escape View File

@ -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">&times;</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>