Frontend - erweiterte Suche

public/routes/files.js

+var tagArray = [];
+const data=[];
+
 const FileRouter = {
     template: `
-<div>
-	<h4>Wichtige Links</h4>
-	<div class="empty-state">
-	<i class="material-icons"> widgets </i><br>
-	Diese Funktion steht noch nicht bereit.
-	</div>
+<div class="content">
+	<h4>Erweiterte Suche</h4>
+	<b-field label="Suche nach">
+		<b-select
+			placeholder="Wähle eine Suchform"
+			v-model="selectedOptions">
+			<option value="freeSearch">Freie Suche</option>
+			<option value="subject">Betreff</option>
+			<option value="tags">Tags</option>
+			<option value="text">Nachrichtentext</option>
+			<option value="user">User</option>
+		</b-select>
+	</b-field>
+
+	<b-field v-if="selectedOptions=='freeSearch'||selectedOptions=='subject'|| selectedOptions=='text' || selectedOptions=='user'">
+        <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>
+
+	<b-button type="is-primary" @click="">SUCHE</b-button>
+
 </div>
 `,
     data: function () {
-		return {};
+		return {
+            selectedOptions: [],
+			selected: [],
+			taglist: data,
+        }
     },
     methods: {
+		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
+			})
+        },
+        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]);
+                            }
+                        }
+                    }).fail(function (e, f, g) {
+                        console.log("err: " + e + f + g);
+                    });
+        }
     },
 };