First alpha

src/components/routes/vault/Entry.tsx

@@ -0,0 +1,180 @@
+import { h, Component } from "preact"
+import Notes, { IVault, ViewNote, MessageType } 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"
+
+import Navigation from "../../../navigation";
+import { YesNoModal } from "../../modals/YesNoModal";
+import LoadingModal from "../../modals/LoadingModal";
+
+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 }> {
+   old_text: string;
+   text: string = "";
+   vault: IVault;
+   lineHeight: number = 24;
+   note: ViewNote;
+
+   rows: number = minRows;
+
+   skip_save: boolean = false;
+
+   constructor(props) {
+      super(props);
+      this.state = { changed: false, title: "", modal: undefined, loading: true };
+   }
+
+   private toVault() {
+      history.back()
+      // Navigation.setPage("/vault", { id: this.vault.id }, { entry: "false" }, true);
+   }
+
+   async componentWillMount() {
+      try {
+         this.skip_save = false;
+         this.setState({ loading: true })
+         this.vault = await this.props.vault;
+         let note: ViewNote;
+         if (this.props.id)
+            note = await this.vault.getNote(this.props.id)
+         else
+            note = this.vault.newNote();
+
+         if (!note) {
+            Notes.messageObservableServer.send({ message: "Note not found!", type: MessageType.ERROR });
+            // this.toVault()
+         } else {
+            this.note = note;
+            this.text = note.__value;
+            let rows = this.getRows(this.text);
+            if (rows !== this.rows) {
+               this.rows = rows;
+            }
+            let [title] = this.text.split("\n", 1);
+            this.setState({ loading: false, title })
+         }
+      } catch (err) {
+         Notes.sendErrorMessage(err);
+      }
+   }
+
+   private async save() {
+      try {
+         if (this.state.changed) {
+            this.note.__value = this.text;
+            await this.vault.saveNote(this.note);
+            this.setState({ changed: false })
+         }
+      } catch (err) {
+         Notes.sendErrorMessage(err);
+      }
+   }
+
+   // async onKeypress(event) {
+   //    event = event || window.event;
+   //    
+   // }
+
+   componentWillUnmount() {
+      if (!this.skip_save)
+         this.save()
+   }
+
+   strToNr(value: string) {
+      let match = value.match(/\d/g)
+      return Number(match.join(""))
+   }
+
+   getRows(value: string) {
+      const lines = (value.match(/\r?\n/g) || '').length + 1
+      return Math.max(lines + 1, minRows);
+   }
+
+   textAreaChange(evt: KeyboardEvent) {
+      if (evt.keyCode === 17 || evt.keyCode === 27) return; //No character, so not relevant for this function
+      let target = (evt.target as HTMLTextAreaElement)
+      let value = target.value;
+
+      this.text = value;
+      if (!this.state.changed && this.textAreaKeyPress(evt)) this.setState({ changed: true })
+
+      let [title] = value.split("\n", 1);
+      if (title !== this.state.title)
+         this.setState({ title });
+
+      let rows = this.getRows(value);
+      if (rows !== this.rows) {
+         target.rows = rows;
+         this.rows = rows;
+      }
+   }
+
+   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 })
+      } else
+         this.toVault()
+   }
+
+   textAreaKeyPress(evt: KeyboardEvent) {
+      if ((evt.keyCode === 83 || evt.keyCode === 13) && evt.ctrlKey) {
+         event.preventDefault()
+         this.save();
+         return false;
+      }
+      else if (evt.keyCode === 27) {
+         event.preventDefault();
+         // this.skip_save = true;
+         // this.toVault()
+         this.exitHandler();
+         return false;
+      }
+      return true;
+   }
+
+   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);
+         this.toVault()
+      }
+
+      const delete_handler = async () => {
+         await this.vault.deleteNote(this.props.id);
+         this.toVault()
+      }
+
+      return <div>
+         {loading_modal}
+         {this.state.modal}
+         <header>
+            <div>
+               <a class="button header_icon_button" onClick={() => this.exitHandler()}><X height={undefined} width={undefined} /></a>
+               {this.state.changed ? <a class="button header_icon_button" onClick={() => save_handler()}><Save height={undefined} width={undefined} /></a> : undefined}
+            </div>
+            <h1 style="display:inline" class="button header_title">{this.state.title}</h1>
+            <a class="button header_icon_button" onClick={() => delete_handler()}><Trash height={undefined} width={undefined} /></a>
+         </header>
+         <div class="container">
+            <div class="row">
+               <div class="col-sm-12 col-md-8 col-lg-6 col-md-offset-2 col-lg-offset-3">
+                  <textarea autofocus value={this.text} rows={this.rows} class="doc" style="width:100%;" onKeyDown={evt => this.textAreaKeyPress(evt)} onKeyUp={evt => this.textAreaChange(evt)} ref={elm => {
+                     if (elm)
+                        setTimeout(() => elm.focus(), 0)
+                  }} />
+               </div>
+            </div>
+         </div>
+      </div>
+   }
+}