extended search

public/index.html

@@ -100,14 +100,7 @@
                 <a class="logo-img" href="index.html"><img src="img/app_icon.png" width=45px height=45px></a>
                 <form class="om-searchbar" @submit.prevent="search()">
                     <b-field>
-						<b-autocomplete
+                        <b-autocomplete rounded v-model="searchtext" @keydown.native.enter="search" :data="filteredDataArray" placeholder="suche..." icon="magnify" @select="option => selected = option">
-							rounded
-							v-model="searchtext"
-                            @keydown.native.enter="search"
-							:data="filteredDataArray"
-							placeholder="suche..."
-							icon="magnify"
-							@select="option => selected = option">
                         </b-autocomplete>
 
                         <!--<b-input
@@ -128,7 +121,7 @@
 							@typing="getFilteredTags"
 							@input="saveTagsToArray">
 						</b-taginput>-->
-						<button @click="clear">x</button>
+                        <b-button type="is-light" @click="clear">X</b-button>
                     </b-field>
                 </form>
             </div>
@@ -187,12 +180,14 @@
     </div>
 -->
     <script>
+        var isSearchActive = false;
         var tagArray = ["lorem"];
         const dat = [
             'th',
             'efi',
             'wichtig',
         ];
+
     </script>
 
     <!-- const routes = [
@@ -214,7 +209,7 @@
             data: function() {
                 return {
                     searchtext: "",
-					isSearchActiv: false,
+                    //isSearchActiv: false,
                     selected: [],
                     taglist: dat,
                 };
@@ -230,42 +225,7 @@
                 }
             },
             methods: {
-                search: function() {
+
-					this.isSearchActiv = true;
-                    console.log("Searchtext: " +this.searchtext.replace(/#/g,''));
-                    $.ajax({
-                        url: "api/msg/search/" + this.searchtext.replace(/#/g, ''),
-                        method: "GET"
-                    }).done(jd => {
-                        // NICHT SO wg. Vue: _messagelist = jd;
-                        _messagelist.splice(0, _messagelist.length);
-                        _messagelist.push.apply(_messagelist, jd);
-                        //console.log("jd: "+jd);
-                        for (var e in jd) {
-                                if (!_messages[jd[e]]) {
-                                    get_insert_message(jd[e]);
-                                }
-                        }
-                    }).fail(function(e, f, g) {
-                        console.log("searching: err: " + e + f + g);
-                    })
-                },
-                list_messages: function () {
-            $.ajax({url: "api/msg/ids", method: "GET"})
-             .done(jd => {
-                // NICHT SO wg. Vue: _messagelist = jd;
-                _messagelist.splice(0, _messagelist.length);
-                _messagelist.push.apply(_messagelist, jd);
-                //console.log("jd: "+jd);
-                for (var e in jd) {
-                        if (!_messages[jd[e]]) {
-                            get_insert_message(jd[e]);
-                        }
-                }
-            }).fail(function (e, f, g) {
-                console.log("list_msg: err: " + e + f + g);
-            });
-        },
                 getFilteredTags(text) {
                     this.taglist = dat.filter((option) => {
                         return option
@@ -279,8 +239,17 @@
                     tagArray = this.selected;
                     console.info(tagArray);
                 },
+                search: function() {
+                  searching(this.searchtext);
+                },
+                list_messages: function() {
+                  messages();
+                },
                 list_tags: function() {
-                    $.ajax({url: "api/tag/ids",method: "GET"})
+                    $.ajax({
+                            url: "api/tag/ids",
+                            method: "GET"
+                        })
                         .done(jd => {
                             // NICHT SO wg. Vue: _messagelist = jd;
                             _taglist.splice(0, _taglist.length);
@@ -299,7 +268,7 @@
                 clear: function() {
                     console.log("clear");
 
-					this.isSearchActiv = false;
+                    isSearchActiv = false;
                     this.searchtext = "";
                     this.list_messages();
                 },
@@ -310,8 +279,12 @@
                 this.list_tags();
             },
         });
+
         function get_insert_tag(id) {
-					$.ajax({ url: "api/tag/"+id, method: "GET" }).done(function (tag) {
+            $.ajax({
+                url: "api/tag/" + id,
+                method: "GET"
+            }).done(function(tag) {
                 dat.push("#" + tag.name);
                 console.log("it worked!");
             }).fail(function(e, f, g) {
@@ -319,7 +292,45 @@
             })
         }
 
-
+        function searching(searchtext) {
+            isSearchActiv = true;
+            console.log("Searchtext: " + searchtext.replace(/#/g, ''));
+            $.ajax({
+                url: "api/msg/search/" + searchtext.replace(/#/g, ''),
+                method: "GET"
+            }).done(jd => {
+                // NICHT SO wg. Vue: _messagelist = jd;
+                _messagelist.splice(0, _messagelist.length);
+                _messagelist.push.apply(_messagelist, jd);
+                //console.log("jd: "+jd);
+                for (var e in jd) {
+                    if (!_messages[jd[e]]) {
+                        get_insert_message(jd[e]);
+                    }
+                }
+            }).fail(function(e, f, g) {
+                console.log("searching: err: " + e + f + g);
+            })
+        }
+        function messages() {
+            $.ajax({
+                    url: "api/msg/ids",
+                    method: "GET"
+                })
+                .done(jd => {
+                    // NICHT SO wg. Vue: _messagelist = jd;
+                    _messagelist.splice(0, _messagelist.length);
+                    _messagelist.push.apply(_messagelist, jd);
+                    //console.log("jd: "+jd);
+                    for (var e in jd) {
+                        if (!_messages[jd[e]]) {
+                            get_insert_message(jd[e]);
+                        }
+                    }
+                }).fail(function(e, f, g) {
+                    console.log("list_msg: err: " + e + f + g);
+                });
+        }
 
         const search_data = [];
         /*

public/routes/files.js

@@ -1,5 +1,4 @@
 var tagArray = [];
-const data=[];
 
 const FileRouter = {
     template: `
@@ -21,62 +20,52 @@ const FileRouter = {
         <b-input id="freeSe"></b-input>
     </b-field>
 
-	<b-field v-if="selectedOptions=='tags'"">
+	<b-field v-if="selectedOptions=='tags'">
-		<b-taginput
+        <b-autocomplete rounded v-model="searchtext"
-            id="tag"
+        :data="filteredDataArray"
-			v-model="selected"
+        placeholder="suche..." icon="magnify"
-			:data=taglist
+        @select="option => selected = option">
-			autocomplete
+        </b-autocomplete>
-			allow-new:false
-			icon="label"
-			placeholder="#"
-			@typing="getFilteredTags"
-            @input="saveTagsToArray">
-		</b-taginput>
 	</b-field>
 
-	<b-button type="is-primary" @click="">SUCHE</b-button>
+	<b-button type="is-primary" @click="search">SUCHE</b-button>
 
+<div id="om-msg-cards">
+    <MsgCard
+        v-for="id in messagelist.slice().reverse()"
+        :key="id"
+        :msg="messages[id] || {}"
+    ></MsgCard>
+</div>
 </div>
 `,
     data: function () {
         return {
+            searchtext: "",
             selectedOptions: [],
             selected: [],
             taglist: data,
+            messagelist: _messagelist,
+            messages: _messages,
+        }
+    },
+    computed: {
+        filteredDataArray() {
+            return this.taglist.filter((option) => {
+                return option
+                    .toString()
+                    .toLowerCase()
+                    .indexOf(this.searchtext.toLowerCase()) >= 0
+            })
         }
     },
     methods: {
+        list_messages: function () {
+            messages();
+        },
         saveTagsToArray: function () {
             tagArray = this.selected;
             console.info(tagArray);
-        },
-		createMsg: function () {
-			var _subject = $("#subject").val();
-			var _message = $("#message").val();
-			var _tag = tagArray;
-			var _user = $("#user").val();
-			//console.log("Message Created: " + _tag + " " + _message + " " + _user);
-			$.ajax({
-				url: "api/msg",
-				data: {
-					subject: _subject,
-					message: _message,
-					user: _user,
-					tag: _tag
-				},
-				method: "POST"
-			}).done(have_result).fail(have_error);
-
-			function have_result(res) {
-				//console.log(res);
-                router.push('/home')
-			}
-
-			function have_error(err) {
-				console.log("error: " + err.responseText);
-				console.log(err);
-			}
         },
         getFilteredTags(text) {
             this.taglist = data.filter((option) => {
@@ -85,9 +74,13 @@ const FileRouter = {
                     .toLowerCase()
                     .indexOf(text.toLowerCase()) >= 0
             })
+            this.search();
         },
         list_tags: function () {
-                $.ajax({url: "api/tag/ids",method: "GET"})
+            $.ajax({
+                    url: "api/tag/ids",
+                    method: "GET"
+                })
                 .done(jd => {
                     // NICHT SO wg. Vue: _messagelist = jd;
                     _taglist.splice(0, _taglist.length);
@@ -101,6 +94,21 @@ const FileRouter = {
                 }).fail(function (e, f, g) {
                     console.log("err: " + e + f + g);
                 });
-        }
+        },
+        saveTagsToArray: function () {
+            tagArray = this.selected;
+            console.info(tagArray);
+        },
+        search: function () {
+            searching(this.searchtext);
+        },
+        list_messages: function () {
+            messages();
+        },
+    },
+    mounted: function () {
+        //this.search();
+        this.list_tags();
+        //this.list_messages();
     },
 };

public/routes/home.js

@@ -24,6 +24,9 @@ const HomeRouter = {
             });
         },*/
         list_messages: function() {
+            messages();
+        }
+        /*list_messages: function () {
             $.ajax({url: "api/msg/ids", method: "GET"})
              .done(jd => {
                 // NICHT SO wg. Vue: _messagelist = jd;
@@ -35,7 +38,7 @@ const HomeRouter = {
                             get_insert_message(jd[e]);
                         }
                 }
-                /*if(!($".om-searchbar" = "")){
+                if(!($".om-searchbar" = "")){
                     for (var e in jd) {
                         if (!_messages[jd[e]]) {
                             get_insert_message(jd[e]);
@@ -47,11 +50,11 @@ const HomeRouter = {
                             get_search_message(jd[e]);
                         }
                     }
-                }*/
+                }
             }).fail(function (e, f, g) {
                 console.log("list_msg: err: " + e + f + g);
             });
-        }
+        }*/
     },
 
     mounted: function () {

public/routes/msgCard.js

@@ -5,8 +5,8 @@ Vue.component('MsgCard', {
                 <img src="favicon.ico" width=20px height=20px>
                 </h6>
                 {{ msg.message }}<br><br>
-                <!--<a v-for="tag in msg.tag" href="#">#{{ tag }} </a>-->
+                <a v-for="tag in msg.tag" @click="filterForTag(tag)">#{{ tag }} </a>
-				<b-button class="tags" type="is-text" v-for="tag in msg.tag>#{{ tag }} </b-button>
+				<!--<b-button class="tags" type="is-text" v-for="tag in msg.tag">#{{ tag }} </b-button>-->
 				</p>
                 <div class="om-card-footer"> <div class="om-user-line">
                 <i class="material-icons">account_circle</i>
@@ -26,5 +26,9 @@ Vue.component('MsgCard', {
         myFilter: function() {
             this.isActive = !this.isActive;
         },
+        filterForTag: function(tag) {
+            console.log("link: " +tag);
+            searching(tag);
+        },
     }
 });

server/dbs.js

@@ -57,7 +57,9 @@ const dbs = {
              * Get a particular message
              */
             get: function(req, res) {
-                model.Messages.find({$text: {$search: req.params.phrase}})
+                model.Messages.find(
+                    {$text: {$search: req.params.phrase}})
+                    .sort({tag:1, user:1, message:1, subject:1})
                 .exec().then(results => {
                     //selects id from message:
                     var parsed = [];