Implementing add/edit bookmark form with auto-complete

src/digimarks/static/css/digimarks.css

@@ -22,4 +22,12 @@
 .thumbnail img {
     /*width: 72px;*/
     width: 60px;
-}
+}
+
+#bookmarkEditForm fieldset {
+    border: none;
+}
+
+#bookmarkEditForm fieldset input, #bookmarkEditForm textarea, #bookmarkEditForm select, #bookmarkEditForm label {
+    width: 100%;
+}

src/digimarks/static/js/digimarks.js

@@ -17,6 +17,7 @@ document.addEventListener('alpine:init', () => {
         showTags: Alpine.$persist(false).as('showTags'),
         /* Bookmark that is being edited, used to fill the form, etc. */
         bookmarkToEdit: Alpine.$persist(null).as('bookmarkToEdit'),
+        bookmarkToEditError: null,
 
         /* Loading indicator */
         loading: false,
@@ -207,12 +208,42 @@ document.addEventListener('alpine:init', () => {
             /* Open 'add bookmark' page */
             console.log('Start adding bookmark');
             this.bookmarkToEdit = {
-                'url': ''
+                'url': '',
+                'title': '',
+                'note': '',
+                'tags': ''
             }
             // this.show_bookmark_details = true;
             const editFormDialog = document.getElementById("editFormDialog");
             editFormDialog.showModal();
         },
+        async bookmarkURLChanged() {
+            console.log('Bookmark URL changed');
+            // let response = await fetch('/api/v1/' + this.userKey + '/autocomplete_bookmark/');
+            try {
+                const response = await fetch('/api/v1/' + this.userKey + '/autocomplete_bookmark/', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        // Bookmark form data
+                        url: this.bookmarkToEdit.url,
+                        title: this.bookmarkToEdit.title,
+                        note: this.bookmarkToEdit.note,
+                        tags: this.bookmarkToEdit.tags
+                    })
+                });
+                const data = await response.json();
+                // TODO: update form fields if needed (auto-fetched title for example
+                console.log(data);
+                this.bookmarkToEditError = 'lolwut';
+            } catch (error) {
+                // enter your logic for when there is an error (ex. error toast)
+
+                console.log(error)
+            }
+        },
         async saveBookmark() {
             console.log('Saving bookmark');
             // this.show_bookmark_details = false;

src/digimarks/templates/user_index.html

@@ -170,8 +170,32 @@
             </span>
                 </div>
 #}
-                <form method="dialog">
+                <form method="dialog" id="bookmarkEditForm">
-                    <input type="text" name="">
+                    <fieldset class="form-group">
+                        <label for="bookmark_url">URL</label>
+                        <input id="bookmark_url" type="text" name="bookmark_url" placeholder="url"
+                               x-on:change.debounce="$store.digimarks.bookmarkURLChanged()"
+                               x-model="$store.digimarks.bookmarkToEdit.url">
+                    </fieldset>
+                    <fieldset class="form-group">
+                        <label for="bookmark_title">Title</label>
+                        <input id="bookmark_title" type="text" name="bookmark_title"
+                               placeholder="title (leave empty for autofetch)"
+                               x-model="$store.digimarks.bookmarkToEdit.title">
+                    </fieldset>
+                    <fieldset class="form-group">
+                        <label for="bookmark_note">Note</label>
+                        <textarea id="bookmark_note" type="text" name="bookmark_note"
+                                  x-model="$store.digimarks.bookmarkToEdit.note">
+                        </textarea>
+                    </fieldset>
+                    <fieldset class="form-group">
+                        <label for="bookmark_tags">Tags</label>
+                        <input id="bookmark_tags" type="text" name="bookmark_tags"
+                               placeholder="tags, divided bij comma's"
+                               x-model="$store.digimarks.bookmarkToEdit.tags">
+                    </fieldset>
+                    <p x-show="$store.digimarks.bookmarkToEditError" x-data="$store.digimarks.bookmarkToEditError"></p>
                     <p>
                         <label>
                             <input type="checkbox" name="strip" id="strip"/>