Many changes. See further for more details.
- Notification API - New Modal API - Vault JSON import and export - Improved Page Cache - Adding Context Menu API - Adding Vault Deletion - Fixing Sync Issues - Implementing Share Target API - Implementing Share To API
This commit is contained in:
Fabian
@ -1,5 +1,5 @@
|
||||
import { h, Component } from "preact"
|
||||
import Notes, { IVault, ViewNote, MessageType } from "../../../notes";
|
||||
import Notes, { IVault, ViewNote } from "../../../notes";
|
||||
import Trash from "feather-icons/dist/icons/trash-2.svg"
|
||||
import X from "feather-icons/dist/icons/x.svg"
|
||||
import Save from "feather-icons/dist/icons/save.svg"
|
||||
@ -7,9 +7,11 @@ import Save from "feather-icons/dist/icons/save.svg"
|
||||
import Navigation from "../../../navigation";
|
||||
import { YesNoModal } from "../../modals/YesNoModal";
|
||||
import LoadingModal from "../../modals/LoadingModal";
|
||||
import Notifications, { MessageType } from "../../../notifications";
|
||||
import Modal from "../../modals/Modal";
|
||||
|
||||
const minRows = 3;
|
||||
export default class EntryComponent extends Component<{ vault: Promise<IVault>, id: string | undefined }, { loading: boolean, title: string, changed: boolean, modal: JSX.Element | undefined }> {
|
||||
export default class EntryComponent extends Component<{ vault: Promise<IVault>, id: string | undefined, note: string | undefined }, { title: string, changed: boolean }> {
|
||||
old_text: string;
|
||||
text: string = "";
|
||||
vault: IVault;
|
||||
@ -20,29 +22,39 @@ export default class EntryComponent extends Component<{ vault: Promise<IVault>,
|
||||
|
||||
skip_save: boolean = false;
|
||||
|
||||
loading?: LoadingModal;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { changed: false, title: "", modal: undefined, loading: true };
|
||||
this.state = { changed: false, title: "" };
|
||||
}
|
||||
|
||||
private toVault() {
|
||||
history.back()
|
||||
// Navigation.setPage("/vault", { id: this.vault.id }, { entry: "false" }, true);
|
||||
// history.back()
|
||||
Navigation.setPage("/vault", { id: this.vault.id }, { entry: "false" }, true);
|
||||
}
|
||||
|
||||
async componentWillMount() {
|
||||
try {
|
||||
this.skip_save = false;
|
||||
this.setState({ loading: true })
|
||||
this.loading = new LoadingModal();
|
||||
this.loading.show();
|
||||
|
||||
this.vault = await this.props.vault;
|
||||
let note: ViewNote;
|
||||
let changed = false;
|
||||
if (this.props.id)
|
||||
note = await this.vault.getNote(this.props.id)
|
||||
else
|
||||
else {
|
||||
note = this.vault.newNote();
|
||||
if (this.props.note) {
|
||||
note.__value = this.props.note;
|
||||
changed = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (!note) {
|
||||
Notes.messageObservableServer.send({ message: "Note not found!", type: MessageType.ERROR });
|
||||
Notifications.sendNotification("Note not found!", MessageType.ERROR);
|
||||
// this.toVault()
|
||||
} else {
|
||||
this.note = note;
|
||||
@ -52,10 +64,12 @@ export default class EntryComponent extends Component<{ vault: Promise<IVault>,
|
||||
this.rows = rows;
|
||||
}
|
||||
let [title] = this.text.split("\n", 1);
|
||||
this.setState({ loading: false, title })
|
||||
this.setState({ title, changed })
|
||||
if (this.loading)
|
||||
this.loading.close();
|
||||
}
|
||||
} catch (err) {
|
||||
Notes.sendErrorMessage(err);
|
||||
Notifications.sendError(err);
|
||||
}
|
||||
}
|
||||
|
||||
@ -67,7 +81,7 @@ export default class EntryComponent extends Component<{ vault: Promise<IVault>,
|
||||
this.setState({ changed: false })
|
||||
}
|
||||
} catch (err) {
|
||||
Notes.sendErrorMessage(err);
|
||||
Notifications.sendError(err);
|
||||
}
|
||||
}
|
||||
|
||||
@ -110,30 +124,28 @@ export default class EntryComponent extends Component<{ vault: Promise<IVault>,
|
||||
}
|
||||
}
|
||||
|
||||
exitHandler() {
|
||||
async exitHandler() {
|
||||
if (this.state.changed) {
|
||||
let modal = <YesNoModal title="Really want to quit?" onResult={res => {
|
||||
if (res === true) {
|
||||
this.skip_save = true;
|
||||
this.toVault();
|
||||
}
|
||||
this.setState({ modal: undefined });
|
||||
}} />
|
||||
this.setState({ modal })
|
||||
let modal = new YesNoModal("Really want to quit?");
|
||||
let res = await modal.getResult();
|
||||
modal.close();
|
||||
if (res === true) {
|
||||
this.skip_save = true;
|
||||
this.toVault();
|
||||
}
|
||||
} else
|
||||
this.toVault()
|
||||
}
|
||||
|
||||
textAreaKeyPress(evt: KeyboardEvent) {
|
||||
console.log(evt);
|
||||
if ((evt.keyCode === 83 || evt.keyCode === 13) && evt.ctrlKey) {
|
||||
event.preventDefault()
|
||||
evt.preventDefault()
|
||||
this.save();
|
||||
return false;
|
||||
}
|
||||
else if (evt.keyCode === 27) {
|
||||
event.preventDefault();
|
||||
// this.skip_save = true;
|
||||
// this.toVault()
|
||||
evt.preventDefault();
|
||||
this.exitHandler();
|
||||
return false;
|
||||
}
|
||||
@ -141,8 +153,6 @@ export default class EntryComponent extends Component<{ vault: Promise<IVault>,
|
||||
}
|
||||
|
||||
render() {
|
||||
let loading_modal = this.state.loading ? <LoadingModal /> : undefined;
|
||||
|
||||
const save_handler = async () => {
|
||||
await this.save()
|
||||
Navigation.setPage("/vault", { id: this.vault.id }, { entry: "false" }, true);
|
||||
@ -155,8 +165,6 @@ export default class EntryComponent extends Component<{ vault: Promise<IVault>,
|
||||
}
|
||||
|
||||
return <div>
|
||||
{loading_modal}
|
||||
{this.state.modal}
|
||||
<header>
|
||||
<div>
|
||||
<a class="button header_icon_button" onClick={() => this.exitHandler()}><X height={undefined} width={undefined} /></a>
|
||||
|
||||
@ -1,19 +1,142 @@
|
||||
import { h, Component } from "preact"
|
||||
import { IVault, BaseNote } from "../../../notes";
|
||||
import Notes, { IVault, BaseNote } from "../../../notes";
|
||||
import AddButton from "../../AddButton";
|
||||
import Navigation from "../../../navigation";
|
||||
import ArrowLeft from "feather-icons/dist/icons/arrow-left.svg"
|
||||
import MoreVertival from "feather-icons/dist/icons/more-vertical.svg"
|
||||
import ContextMenu from "../../modals/context";
|
||||
import Notifications from "../../../notifications";
|
||||
|
||||
export default class EntryList extends Component<{ vault: Promise<IVault> }, { entries: BaseNote[] }> {
|
||||
export default class EntryList extends Component<{ vault: Promise<IVault> }, { notes: BaseNote[], context: JSX.Element | undefined }> {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = { entries: [] }
|
||||
this.state = { notes: [], context: undefined }
|
||||
this.onDragOver = this.onDragOver.bind(this);
|
||||
this.onDrop = this.onDrop.bind(this);
|
||||
this.reloadNotes = this.reloadNotes.bind(this);
|
||||
}
|
||||
vault: IVault;
|
||||
|
||||
reloadNotes() {
|
||||
return new Promise(yes => this.vault.getAllNotes().then(entries => this.setState({ notes: entries }, yes)));
|
||||
}
|
||||
|
||||
async componentWillMount() {
|
||||
this.vault = await this.props.vault;
|
||||
this.vault.getAllNotes().then(entries => this.setState({ entries }))
|
||||
this.reloadNotes();
|
||||
document.body.addEventListener("dragover", this.onDragOver);
|
||||
document.body.addEventListener("drop", this.onDrop);
|
||||
Notes.syncObservable.subscribe(this.reloadNotes);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.body.removeEventListener("dragover", this.onDragOver);
|
||||
document.body.removeEventListener("drop", this.onDrop);
|
||||
Notes.syncObservable.unsubscribe(this.reloadNotes);
|
||||
}
|
||||
|
||||
onDragOver(evt: DragEvent) {
|
||||
evt.preventDefault();
|
||||
}
|
||||
|
||||
onContext(evt: MouseEvent, note: BaseNote) {
|
||||
evt.preventDefault();
|
||||
const shareNote = async () => {
|
||||
let nav = window.navigator as any;
|
||||
if (nav.share !== undefined) {
|
||||
let vnote = await this.vault.getNote(note._id);
|
||||
nav.share({ title: vnote.preview.split("\n")[0], text: vnote.__value })
|
||||
.then(() => console.log('Successful share'))
|
||||
.catch(error => {
|
||||
console.error('Error sharing:', error)
|
||||
Notifications.sendError(error)
|
||||
});
|
||||
} else {
|
||||
Notifications.sendError("Sharing not possible on this device")
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
let share;
|
||||
if ((window.navigator as any).share) {
|
||||
share = <button onClick={() => shareNote()}>
|
||||
share
|
||||
</button>
|
||||
let context = <ContextMenu event={evt} >
|
||||
{share}
|
||||
</ContextMenu>
|
||||
|
||||
this.setState({ context });
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
async onDrop(evt: DragEvent) {
|
||||
evt.preventDefault();
|
||||
if (evt.dataTransfer.items) {
|
||||
for (let i = 0; i < evt.dataTransfer.items.length; i++) {
|
||||
let item = evt.dataTransfer.items[i];
|
||||
|
||||
if (item.kind === "file") {
|
||||
let file = item.getAsFile();
|
||||
if (file.type !== "application/json") {
|
||||
Notifications.sendError("Invalid File Type!!!")
|
||||
} else {
|
||||
try {
|
||||
let data = await new Promise<string>((yes, no) => {
|
||||
let fr = new FileReader()
|
||||
fr.onload = (ev) => {
|
||||
yes((ev.target as any).result);
|
||||
}
|
||||
fr.onerror = no;
|
||||
fr.readAsText(file);
|
||||
})
|
||||
let parsed = JSON.parse(data);
|
||||
let c = new Error("Could not parse!");
|
||||
let notes: { content: string, time: Date }[] = null;
|
||||
if (Array.isArray(parsed)) { // Could be from SecureNotes 1
|
||||
notes = parsed.map(elm => {
|
||||
if (typeof elm.message !== "string" || typeof elm.time !== "string") {
|
||||
throw c;
|
||||
}
|
||||
|
||||
return {
|
||||
content: elm.message,
|
||||
time: new Date(elm.time)
|
||||
}
|
||||
})
|
||||
} else if (parsed.version) { // Could be from SecureNotes 2
|
||||
if (parsed.version === 1) { //Could be from SecureNotes 2 version 1
|
||||
notes = (parsed.notes as any[]).map(elm => {
|
||||
if (typeof elm.content !== "string" || typeof elm.time !== "string") {
|
||||
throw c;
|
||||
}
|
||||
return {
|
||||
content: elm.content,
|
||||
time: new Date(elm.time)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
throw c;
|
||||
}
|
||||
} else
|
||||
throw c;
|
||||
|
||||
await Promise.all(notes.map(n => {
|
||||
let note = this.vault.newNote();
|
||||
note.__value = n.content;
|
||||
return this.vault.saveNote(note, n.time);
|
||||
}));
|
||||
await this.reloadNotes();
|
||||
Notifications.sendSuccess(`Imported ${notes.length} notes!`);
|
||||
} catch (err) {
|
||||
Notifications.sendError("Cannot read File!")
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -21,10 +144,10 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { e
|
||||
Navigation.setPage("/vault", { id: this.vault.id }, { id, entry: "true" })
|
||||
}
|
||||
|
||||
let elms = this.state.entries.map(entry => {
|
||||
let [first, second] = entry.preview.split("\n", 2);
|
||||
return <div class="vault_vault" onClick={() => {
|
||||
open_entry(entry._id)
|
||||
let elms = this.state.notes.map(note => {
|
||||
let [first, second] = note.preview.split("\n", 2);
|
||||
return <div class="vault_vault" onContextMenu={evt => this.onContext(evt, note)} onClick={() => {
|
||||
open_entry(note._id)
|
||||
}}>
|
||||
<span>{first}</span><br />
|
||||
<span>{second}</span>
|
||||
@ -32,12 +155,14 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { e
|
||||
})
|
||||
|
||||
return <div>
|
||||
{this.state.context}
|
||||
<header>
|
||||
<div>
|
||||
<a class="button header_icon_button" onClick={() => history.back()}><ArrowLeft height={undefined} width={undefined} /></a>
|
||||
</div>
|
||||
<h1 style="display:inline" class="button header_title" onClick={() => Navigation.setPage("/")}>{this.vault ? this.vault.name : ""}</h1>
|
||||
<a class="button header_icon_button"><MoreVertival height={undefined} width={undefined} /></a>
|
||||
<span></span>
|
||||
{/* <a class="button header_icon_button"><MoreVertival height={undefined} width={undefined} /></a> */}
|
||||
</header>
|
||||
<AddButton onClick={() => open_entry(null)} />
|
||||
<div class="container">
|
||||
|
||||
@ -9,7 +9,7 @@ import "./vault.scss"
|
||||
|
||||
export interface VaultProps {
|
||||
state: { id: string };
|
||||
hidden: { entry: string, id: string };
|
||||
hidden: { entry: string, id: string, note: string };
|
||||
}
|
||||
|
||||
export default class VaultPage extends Page<VaultProps, { entries: BaseNote[] }> {
|
||||
@ -29,7 +29,7 @@ export default class VaultPage extends Page<VaultProps, { entries: BaseNote[] }>
|
||||
|
||||
render() {
|
||||
if (this.props.hidden && this.props.hidden.entry === "true") {
|
||||
return <EntryComponent vault={this.vault} id={this.props.hidden.id} />
|
||||
return <EntryComponent vault={this.vault} id={this.props.hidden.id} note={this.props.hidden.note} />
|
||||
} else {
|
||||
return <EntryList vault={this.vault} />
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
|
||||
.vault_vault {
|
||||
padding: 0.5rem;
|
||||
border-bottom: solid 1px var(--fore-color);
|
||||
border-bottom: solid 1px var(--card-border-color);
|
||||
}
|
||||
|
||||
.vault_vault:hover {
|
||||
|
||||
Reference in New Issue
Block a user