diff --git a/apps/web/__e2e__/notebooks.test.js b/apps/web/__e2e__/notebooks.test.js index a868c3bd8..1629d7994 100644 --- a/apps/web/__e2e__/notebooks.test.js +++ b/apps/web/__e2e__/notebooks.test.js @@ -166,7 +166,7 @@ test("edit topics individually", async () => { await page.click(Menu.new("menuitem").item("edit").build()); const editedTopicTitle = "Topic " + index + " edit 1"; - await page.fill(getTestId("dialog-edit-topic"), editedTopicTitle); + await page.fill(getTestId("item-dialog-title"), editedTopicTitle); await page.click(getTestId("dialog-yes")); diff --git a/apps/web/src/common/dialogcontroller.js b/apps/web/src/common/dialogcontroller.js index 989a6db6a..c408f12b3 100644 --- a/apps/web/src/common/dialogcontroller.js +++ b/apps/web/src/common/dialogcontroller.js @@ -4,6 +4,7 @@ import { hashNavigate } from "../navigation"; import ThemeProvider from "../components/theme-provider"; import { qclone } from "qclone"; import { store as notebookStore } from "../stores/notebook-store"; +import { store as tagStore } from "../stores/tag-store"; import { store as appStore } from "../stores/app-store"; import { db } from "./db"; import { showToast } from "../utils/toast"; @@ -491,9 +492,8 @@ export function showSignUpDialog() { export function showTopicDialog() { return showDialog((Dialogs, perform) => ( { perform(false); }} @@ -502,6 +502,7 @@ export function showTopicDialog() { const notebookId = notebookStore.get().selectedNotebookId; await db.notebooks.notebook(notebookId).topics.add(topic); notebookStore.setSelectedNotebook(notebookId); + showToast("success", "Topic created!"); perform(true); }} /> @@ -515,17 +516,56 @@ export function showEditTopicDialog(notebookId, topicId) { if (!topic) return; return showDialog((Dialogs, perform) => ( perform(false)} onAction={async (t) => { await db.notebooks .notebook(topic.notebookId) .topics.add({ ...topic, title: t }); notebookStore.setSelectedNotebook(topic.notebookId); - showToast("success", "Topic edited successfully!"); + showToast("success", "Topic edited!"); + perform(true); + }} + /> + )); +} + +export function showCreateTagDialog() { + return showDialog((Dialogs, perform) => ( + { + perform(false); + }} + onAction={async (title) => { + if (!title) return; + await db.tags.add(title); + showToast("success", "Tag created!"); + tagStore.refresh(); + perform(true); + }} + /> + )); +} + +export function showEditTagDialog(tagId) { + const tag = db.tags.tag(tagId); + if (!tag) return; + return showDialog((Dialogs, perform) => ( + perform(false)} + onAction={async (title) => { + if (!title) return; + await db.tags.rename(tagId, title); + showToast("success", "Tag edited!"); + tagStore.refresh(); perform(true); }} /> diff --git a/apps/web/src/common/index.js b/apps/web/src/common/index.js index 49b229130..59a4e2251 100644 --- a/apps/web/src/common/index.js +++ b/apps/web/src/common/index.js @@ -52,9 +52,13 @@ export const CREATE_BUTTON_MAP = { onClick: () => hashNavigate("/notebooks/create"), }, topics: { - title: "Add a topic", + title: "Create a topic", onClick: () => hashNavigate(`/topics/create`), }, + tags: { + title: "Create a tag", + onClick: () => hashNavigate(`/tags/create`), + }, }; export async function introduceFeatures() { diff --git a/apps/web/src/components/dialogs/index.js b/apps/web/src/components/dialogs/index.js index d7f31e42f..8a7d34c06 100644 --- a/apps/web/src/components/dialogs/index.js +++ b/apps/web/src/components/dialogs/index.js @@ -10,7 +10,7 @@ import MoveDialog from "./movenotedialog"; import PasswordDialog from "./passworddialog"; import RecoveryKeyDialog from "./recoverykeydialog"; import SignUpDialog from "./signupdialog"; -import TopicDialog from "./topicdialog"; +import ItemDialog from "./itemdialog"; import SessionExpiredDialog from "./sessionexpireddialog"; import FeatureDialog from "./feature-dialog"; @@ -27,7 +27,7 @@ const Dialogs = { PasswordDialog, RecoveryKeyDialog, SignUpDialog, - TopicDialog, + ItemDialog, SessionExpiredDialog, FeatureDialog, }; diff --git a/apps/web/src/components/dialogs/item-dialog.js b/apps/web/src/components/dialogs/item-dialog.js new file mode 100644 index 000000000..da73c306c --- /dev/null +++ b/apps/web/src/components/dialogs/item-dialog.js @@ -0,0 +1,46 @@ +import React, { useRef } from "react"; +import { Box } from "rebass"; +import { Input } from "@rebass/forms"; +import Dialog from "./dialog"; +import Field from "../field"; + +function ItemDialog(props) { + return ( + + { + e.preventDefault(); + const title = e.target.title.value; + props.onAction(title); + }} + > + + + + ); +} + +export default ItemDialog; diff --git a/apps/web/src/components/dialogs/topicdialog.js b/apps/web/src/components/dialogs/topicdialog.js deleted file mode 100644 index 9a5b7235b..000000000 --- a/apps/web/src/components/dialogs/topicdialog.js +++ /dev/null @@ -1,36 +0,0 @@ -import React, { useRef } from "react"; -import { Box } from "rebass"; -import { Input } from "@rebass/forms"; -import Dialog from "./dialog"; - -function TopicDialog(props) { - const ref = useRef(); - return ( - { - props.onAction(ref.current.value); - }, - }} - onClose={props.onClose} - negativeButton={{ text: "Cancel", onClick: props.onClose }} - > - - - - - ); -} - -export default TopicDialog; diff --git a/apps/web/src/components/navigation-menu/index.js b/apps/web/src/components/navigation-menu/index.js index 2bccf9fb4..0dcd9b262 100644 --- a/apps/web/src/components/navigation-menu/index.js +++ b/apps/web/src/components/navigation-menu/index.js @@ -148,7 +148,7 @@ function NavigationMenu(props) { {pins.map((pin) => ( "Edit", + icon: Icon.Edit, + onClick: ({ tag }) => { + hashNavigate(`/tags/${tag.id}/edit`); + }, + }, { title: ({ tag }) => db.settings.isPinned(tag.id) ? "Remove shortcut" : "Create shortcut", @@ -16,13 +23,13 @@ const menuItems = [ ]; function Tag({ item, index }) { - const { id, title, noteIds } = item; + const { id, title, alias, noteIds } = item; return ( } + title={} footer={ {noteIds.length} notes diff --git a/apps/web/src/navigation/hash-routes.js b/apps/web/src/navigation/hash-routes.js index 33ce76ffc..4a790f646 100644 --- a/apps/web/src/navigation/hash-routes.js +++ b/apps/web/src/navigation/hash-routes.js @@ -2,6 +2,8 @@ import React from "react"; import Vault from "../common/vault"; import { showBuyDialog, + showCreateTagDialog, + showEditTagDialog, showEmailVerificationDialog, } from "../common/dialog-controller"; import { @@ -47,6 +49,12 @@ const hashroutes = { "/notebooks/:notebookId/topics/:topicId/edit": ({ notebookId, topicId }) => { showEditTopicDialog(notebookId, topicId); }, + "/tags/create": () => { + showCreateTagDialog(); + }, + "/tags/:tagId/edit": ({ tagId }) => { + showEditTagDialog(tagId); + }, "/notes/create": () => { closeOpenedDialog(); hashNavigate("/notes/create", { addNonce: true, replace: true });