mirror of
https://github.com/zadam/trilium.git
synced 2025-10-30 18:05:55 +01:00
converted sort by dialog to new pattern
This commit is contained in:
zadam
@@ -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 RecentChangesDialog from "../widgets/dialogs/recent_changes.js";
|
||||||
import BackendLogDialog from "../widgets/dialogs/backend_log.js";
|
import BackendLogDialog from "../widgets/dialogs/backend_log.js";
|
||||||
import BranchPrefixDialog from "../widgets/dialogs/branch_prefix.js";
|
import BranchPrefixDialog from "../widgets/dialogs/branch_prefix.js";
|
||||||
|
import SortChildNotesDialog from "../widgets/dialogs/sort_child_notes.js";
|
||||||
|
|
||||||
export default class DesktopLayout {
|
export default class DesktopLayout {
|
||||||
constructor(customWidgets) {
|
constructor(customWidgets) {
|
||||||
@@ -188,6 +189,7 @@ export default class DesktopLayout {
|
|||||||
.child(new HelpDialog())
|
.child(new HelpDialog())
|
||||||
.child(new RecentChangesDialog())
|
.child(new RecentChangesDialog())
|
||||||
.child(new BackendLogDialog())
|
.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);
|
this.collapseTree(node);
|
||||||
}
|
}
|
||||||
|
|
||||||
sortChildNotesCommand({node}) {
|
|
||||||
import("../dialogs/sort_child_notes.js").then(d => d.showDialog(node.data.noteId));
|
|
||||||
}
|
|
||||||
|
|
||||||
async recentChangesInSubtreeCommand({node}) {
|
async recentChangesInSubtreeCommand({node}) {
|
||||||
this.triggerCommand("showRecentChanges", {ancestorNoteId: node.data.noteId});
|
this.triggerCommand("showRecentChanges", {ancestorNoteId: node.data.noteId});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -31,7 +31,6 @@
|
|||||||
<%- include('dialogs/clone_to.ejs') %>
|
<%- include('dialogs/clone_to.ejs') %>
|
||||||
<%- include('dialogs/move_to.ejs') %>
|
<%- include('dialogs/move_to.ejs') %>
|
||||||
<%- include('dialogs/include_note.ejs') %>
|
<%- include('dialogs/include_note.ejs') %>
|
||||||
<%- include('dialogs/sort_child_notes.ejs') %>
|
|
||||||
<%- include('dialogs/delete_notes.ejs') %>
|
<%- include('dialogs/delete_notes.ejs') %>
|
||||||
<%- include('dialogs/password_not_set.ejs') %>
|
<%- include('dialogs/password_not_set.ejs') %>
|
||||||
<%- include('dialogs/note_type_chooser.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>
|
|
||||||
Reference in New Issue
Block a user