Replaced alert with bootstrap-modal

babybuddy/static_src/js/tags_editor.js

@@ -50,6 +50,30 @@
         constructor(widget) {
             this.prototype = widget.querySelector('.prototype-tag');
             this.listeners = [];
+
+            this.modalElement = widget.querySelector('.tag-editor-error-modal');
+            this.modalBodyNode = this.modalElement.querySelector('.modal-body');
+
+            // Clean whitespace text nodes between spans
+            for (const n of this.modalBodyNode.childNodes) {
+                if (n.nodeType === Node.TEXT_NODE) {
+                    this.modalBodyNode.removeChild(n);
+                }
+            }
+        }
+
+        showModal(msg) {
+            const selectedMessage = this.modalBodyNode.querySelector(`span[data-message='${msg}']`);
+            if (!selectedMessage) {
+                selectedMessage = this.modalBodyNode.childNodes[0];
+            }
+
+            for (const n of this.modalBodyNode.childNodes) {
+                n.classList.add('d-none');
+            }
+            selectedMessage.classList.remove('d-none');
+
+            jQuery(this.modalElement).modal('show');
         }
 
         addTagListUpdatedListener(c) {
@@ -130,16 +154,12 @@
             const uriTagName = encodeURIComponent(tagName);
 
             const fail = (msg) => {
-                msg = msg || "Error creating tag";
-
                 this.addTagInput.select();
-
-                // TODO: Replace with modal
-                alert(msg);
+                this.taggingBase.showModal(msg || "error-creating-tag");
             };
 
             if (!tagName) {
-                fail('Not a valid tag name');
+                fail('invalid-tag-name');
                 return;
             }
 
@@ -164,10 +184,10 @@
                             (text) => {
                                 const tagJson = JSON.parse(text);
                                 addTag(tagJson.name, tagJson.color);
-                            }, fail
+                            }, () => fail("tag-creation-failed")
                         );
                     }
-                }, fail
+                }, () => fail("tag-checking-failed")
             );
         }
     };

babybuddy/static_src/scss/global.scss

@@ -52,3 +52,8 @@
 .icon-2x {
     font-size: 1.65em;
 }
+
+// All modals
+.modal-content {
+    color: theme-color('dark');
+}

core/templates/core/widget_tag_editor.html

@@ -35,4 +35,27 @@
         name="tags"
         value="{% for t in widget.value %}"{{ t.name }}"{% if not forloop.last %},{% endif %}{% endfor %}"
     >
+
+    <div class="modal fade tag-editor-error-modal">
+        <div class="modal-dialog modal-sm" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title">Error</h4>
+                    <button type="button" class="close" data-dismiss="modal">&times;</button>
+                </div>
+            
+                <div class="modal-body">
+                    <span data-message="generic">An error ocurred</span>
+                    <span data-message="error-creating-tag">Error creating tag.</span>
+                    <span data-message="invalid-tag-name">Invalid tag name.</span>
+                    <span data-message="tag-creation-failed">Failed to create tag.</span>
+                    <span data-message="tag-checking-failed">Failed to obtain tag data.</span>
+                </div>
+                
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>