Improve tag input

frontend/src/editor.jsx

@@ -3,7 +3,7 @@ import { route } from 'preact-router';
 import { useEffect, useReducer } from 'preact/hooks';
 
 import * as meerkat from './meerkat'
-import { routeParam, removeParam } from './util';
+import { routeParam, removeParam, TagEditor } from './util';
 import { CheckCard, CheckCardOptions } from './elements/card';
 import { CheckSVG, CheckSVGOptions } from './elements/svg';
 import { CheckImage, CheckImageOptions } from './elements/image';
@@ -270,7 +270,7 @@ function SidePanelSettings({dashboardDispatch, dashboard}) {
 	const updateTags = tags => {
 		dashboardDispatch({
 			type: 'setTags',
-			tags: tags.split(',').map(v => v.trim())
+			tags: tags.map(v => v.toLowerCase().trim())
 		});
 	}
 
@@ -279,9 +279,7 @@ function SidePanelSettings({dashboardDispatch, dashboard}) {
 		<input type="text" id="title" placeholder="Network Overview" value={dashboard.title}
 			onInput={e => dashboardDispatch({type: 'setTitle', title: e.currentTarget.value})} />
 
-		<label for="tags">Tags</label>
-		<input id="tags" type="text" placeholder="Cool Tags" value={dashboard.tags.join(',')}
-			onInput={e => updateTags(e.currentTarget.value)} />
+		<TagEditor tags={dashboard.tags} updateTags={tags => updateTags(tags)} />
 	
 		<label for="background-image">Background Image</label>
 		<input id="background-image" type="file" placeholder="Upload a background image"

frontend/src/home.jsx

@@ -40,6 +40,7 @@ function CreateDashboardModal({hide}) {
 			//TODO validate SERVER SIDE titleToSlug(title).length > 0
 			const newDashboard = {
 				title: title,
+				tags: [],
 				background: null,
 				elements: []
 			}

frontend/src/util.jsx

-import { h } from 'preact';
+import { h, Fragment, createRef } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
 import { route } from 'preact-router';
 
@@ -97,4 +97,34 @@ export function IcingaCheckList({checkId, updateCheckId}) {
 	return <select value={checkId} onInput={e => updateCheckId(e.currentTarget.value)}>
 		{options}
 	</select>
+}
+
+export function TagEditor({tags, updateTags}) {
+	const inputRef = createRef();
+	const addTag = e => {
+		e.preventDefault();
+		updateTags(tags.concat(e.currentTarget['add-tag'].value));
+		inputRef.current.value = '';
+	}
+
+	const removeTag = index => {
+		tags.splice(index, 1);
+		updateTags(tags);
+	}
+
+	const tagElements = tags.map((tag, i) => {
+		return <div class="pill tag">
+			<span>{tag}</span>
+			<span class="close" onClick={e => removeTag(i)}>x</span>
+		</div>
+	})
+
+	return <Fragment>
+		<form onSubmit={addTag}>
+			<label for="add-tag">Tags <span class="subtle tiny">Enter to submit</span></label>
+			{tagElements}
+			<input type="text" id="add-tag" name="add-tag" ref={inputRef} placeholder="Enter a new tag"
+				pattern="[a-z\d\-_]+" title="only lower case letters, numbers, '-' and '_' are allowed"/>
+		</form>
+	</Fragment>
 }
\ No newline at end of file

frontend/style.css

@@ -494,6 +494,22 @@ div.side-bar-footer {
 	border-top: solid 1px #aaa;
 }
 
+div.pill {
+	border-radius: 20px;
+	padding: 0 10px;
+	background-color: var(--color-orange);
+	color: white;
+	display: inline-flex;
+	align-items: center;
+	margin: 0 5px 5px 0;
+	font-size: 16px;
+}
+
+div.tag .close {
+	padding: 4px;
+	cursor: pointer;
+}
+
 /* DASHBOARD ELEMENTS */
 .check {
 	cursor: move;