extended search

public/routes/files.js

@@ -1,5 +1,4 @@
 var tagArray = [];
-const data=[];
 
 const FileRouter = {
     template: `
@@ -21,86 +20,95 @@ const FileRouter = {
         <b-input id="freeSe"></b-input>
     </b-field>
 
-	<b-field v-if="selectedOptions=='tags'"">
-		<b-taginput
-            id="tag"
-			v-model="selected"
-			:data=taglist
-			autocomplete
-			allow-new:false
-			icon="label"
-			placeholder="#"
-			@typing="getFilteredTags"
-            @input="saveTagsToArray">
-		</b-taginput>
+	<b-field v-if="selectedOptions=='tags'">
+        <b-autocomplete rounded v-model="searchtext"
+        :data="filteredDataArray"
+        placeholder="suche..." icon="magnify"
+        @select="option => selected = option">
+        </b-autocomplete>
 	</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 {
+        return {
+            searchtext: "",
             selectedOptions: [],
-			selected: [],
-			taglist: data,
+            selected: [],
+            taglist: data,
+            messagelist: _messagelist,
+            messages: _messages,
+        }
+    },
+    computed: {
+        filteredDataArray() {
+            return this.taglist.filter((option) => {
+                return option
+                    .toString()
+                    .toLowerCase()
+                    .indexOf(this.searchtext.toLowerCase()) >= 0
+            })
         }
     },
     methods: {
-		saveTagsToArray: function() {
-              tagArray = this.selected;
+        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) => {
-				return option
-					.toString()
-					.toLowerCase()
-					.indexOf(text.toLowerCase()) >= 0
-			})
+        getFilteredTags(text) {
+            this.taglist = data.filter((option) => {
+                return option
+                    .toString()
+                    .toLowerCase()
+                    .indexOf(text.toLowerCase()) >= 0
+            })
+            this.search();
         },
         list_tags: function () {
-                $.ajax({url: "api/tag/ids",method: "GET"})
-                    .done(jd => {
-                        // NICHT SO wg. Vue: _messagelist = jd;
-                        _taglist.splice(0, _taglist.length);
-                        _taglist.push.apply(_taglist, jd);
-                        console.log("tag: jd: " + jd);
-                        for (var e in jd) {
-                            if (!_tags[jd[e]]) {
-                                get_insert_tag(jd[e]);
-                            }
+            $.ajax({
+                    url: "api/tag/ids",
+                    method: "GET"
+                })
+                .done(jd => {
+                    // NICHT SO wg. Vue: _messagelist = jd;
+                    _taglist.splice(0, _taglist.length);
+                    _taglist.push.apply(_taglist, jd);
+                    console.log("tag: jd: " + jd);
+                    for (var e in jd) {
+                        if (!_tags[jd[e]]) {
+                            get_insert_tag(jd[e]);
                         }
-                    }).fail(function (e, f, g) {
-                        console.log("err: " + e + f + g);
-                    });
-        }
+                    }
+                }).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

@@ -23,7 +23,10 @@ const HomeRouter = {
                 tags: "foo"
             });
         },*/
-        list_messages: function () {
+        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>-->
-				<b-button class="tags" type="is-text" v-for="tag in msg.tag>#{{ tag }} </b-button>
+                <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>-->
 				</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);
+        },
     }
 });