search definition refactoring

src/public/app/widgets/search_definition.js

@@ -200,28 +200,6 @@ export default class SearchDefinitionWidget extends TabAwareWidget {
             this.refresh();
         });
 
-        this.$widget.on('click', '[data-search-option-del]', async event => {
-            async function deleteAttr(note, attrName) {
-                for (const attr of note.getOwnedAttributes()) {
-                    if (attr.name === attrName) {
-                        await server.remove(`notes/${note.noteId}/attributes/${attr.attributeId}`);
-                    }
-                }
-            }
-
-            const searchOption = $(event.target).attr('data-search-option-del');
-
-            await deleteAttr(this.note, searchOption);
-
-            if (searchOption === 'orderBy') {
-                await deleteAttr(this.note, 'orderDirection');
-            }
-
-            await ws.waitForMaxKnownEntityChangeId();
-
-            this.refresh();
-        });
-
         this.$widget.on('click', '[data-action-conf-del]', async event => {
             const attributeId = $(event.target).closest('[data-attribute-id]').attr('data-attribute-id');
 
@@ -248,6 +226,10 @@ export default class SearchDefinitionWidget extends TabAwareWidget {
         this.triggerEvent('searchRefreshed', {tabId: this.tabContext.tabId});
     }
 
+    async refreshSearchDefinitionCommand() {
+        await this.refresh();
+    }
+
     async refreshWithNote(note) {
         this.$component.show();
 

src/public/app/widgets/search_options/abstract_search_option.js

@@ -24,7 +24,7 @@ export default class AbstractSearchOption extends Component {
         try {
             const $rendered = this.doRender();
 
-            $rendered.attr('data-attribute-id', this.attribute.attributeId);
+            $rendered.find('.search-option-del').on('click', () => this.deleteOption())
 
             return $rendered;
         }
@@ -36,4 +36,20 @@ export default class AbstractSearchOption extends Component {
 
     // to be overriden
     doRender() {}
+
+    async deleteOption() {
+        await this.deleteAttribute(this.constructor.attributeType, this.constructor.optionName);
+
+        await ws.waitForMaxKnownEntityChangeId();
+
+        await this.triggerCommand('refreshSearchDefinition');
+    }
+
+    async deleteAttribute(type, name) {
+        for (const attr of this.note.getOwnedAttributes()) {
+            if (attr.type === type && attr.name === name) {
+                await server.remove(`notes/${this.note.noteId}/attributes/${attr.attributeId}`);
+            }
+        }
+    }
 }

src/public/app/widgets/search_options/ancestor.js

@@ -3,29 +3,15 @@ import noteAutocompleteService from "../../services/note_autocomplete.js";
 
 const TPL = `
 <tr>
-    <td>Search string:</td>
+    <td title="Matched notes must be within subtree of given note.">
+        Ancestor: </td>
     <td>
-        <input type="text" class="form-control search-string">
+        <div class="input-group">
+            <input class="ancestor form-control" placeholder="search for note by its name">
+        </div>
     </td>
     <td>
-        <div class="dropdown">
+        <span class="bx bx-x icon-action search-option-del"></span>
-          <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            ?
-          </button>
-          <div class="dropdown-menu dropdown-menu-right p-4" style="width: 500px;">
-            <strong>Search tips</strong> - also see <button class="btn btn-sm" type="button" data-help-page="Search">complete help on search</button>
-            <p>
-            <ul>
-                <li>Just enter any text for full text search</li>
-                <li><code>#abc</code> - returns notes with label abc</li>
-                <li><code>#year = 2019</code> - matches notes with label <code>year</code> having value <code>2019</code></li>
-                <li><code>#rock #pop</code> - matches notes which have both <code>rock</code> and <code>pop</code> labels</li>
-                <li><code>#rock or #pop</code> - only one of the labels must be present</li>
-                <li><code>#year &lt;= 2000</code> - numerical comparison (also &gt;, &gt;=, &lt;).</li>
-                <li><code>note.dateCreated >= MONTH-1</code> - notes created in the last month</li>
-            </ul>
-            </p>
-        </div>
     </td>
 </tr>`;
 

src/public/app/widgets/search_options/fast_search.js

@@ -8,7 +8,7 @@ const TPL = `
         Fast search
     </td>
     <td>
-        <span class="bx bx-x icon-action" data-search-option-del="fastSearch"></span>
+        <span class="bx bx-x icon-action search-option-del"></span>
     </td>
 </tr>`;
 

src/public/app/widgets/search_options/include_archived_notes.js

@@ -8,7 +8,7 @@ const TPL = `
         Include archived notes
     </td>
     <td>
-        <span class="bx bx-x icon-action" data-search-option-del="includeArchivedNotes"></span>
+        <span class="bx bx-x icon-action search-option-del"></span>
     </td>
 </tr>`;
 

src/public/app/widgets/search_options/order_by.js

@@ -24,7 +24,7 @@ const TPL = `
         </select>
     </td>
     <td>
-        <span class="bx bx-x icon-action" data-search-option-del="orderBy"></span>
+        <span class="bx bx-x icon-action search-option-del"></span>
     </td>
 </tr>`;
 
@@ -58,4 +58,10 @@ export default class OrderBy extends AbstractSearchOption {
 
         return $option;
     }
+
+    async deleteOption() {
+        await this.deleteAttribute('label', 'orderDirection');
+
+        await super.deleteOption();
+    }
 }

src/public/app/widgets/search_options/search_string.js

@@ -28,6 +28,8 @@ const TPL = `
             </ul>
             </p>
         </div>
+        
+        <span class="bx bx-x icon-action search-option-del"></span>
     </td>
 </tr>`;