Commit 902a56a9 authored by StreatCodes's avatar StreatCodes
Browse files

Improve tag input

parent 9dfba9c0
......@@ -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"
......
......@@ -40,6 +40,7 @@ function CreateDashboardModal({hide}) {
//TODO validate SERVER SIDE titleToSlug(title).length > 0
const newDashboard = {
title: title,
tags: [],
background: null,
elements: []
}
......
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
......@@ -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;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment