Add hightlight style for unused tags in editor

This commit is contained in:
Annika Backstrom 2019-12-17 10:41:24 -05:00
parent bc48e231ee
commit 4c79a7859a
3 changed files with 9 additions and 4 deletions

View File

@ -124,7 +124,7 @@ app.get('/', function(req, res, next) {
}); });
app.get('/api/tags', function(req, res, next) { app.get('/api/tags', function(req, res, next) {
db.all("SELECT DISTINCT tag FROM tags", (err, rows) => { db.all("SELECT tags.tag, count(library.tag) tag_count FROM (SELECT DISTINCT tag FROM tags) tags LEFT JOIN library ON tags.tag = library.tag GROUP BY tags.tag", (err, rows) => {
res.send(rows); res.send(rows);
}); });
}); });

View File

@ -27,3 +27,8 @@ footer {
padding: 1ex; padding: 1ex;
border: 1px solid hsl(0, 0%, 88.2%); border: 1px solid hsl(0, 0%, 88.2%);
} }
option.unused {
font-style: italic;
color: red;
}

View File

@ -57,8 +57,8 @@
<template v-if="editing"> <template v-if="editing">
<form method="patch" :action="patch_url"> <form method="patch" :action="patch_url">
<select v-model="track.tag" :disabled="saving"> <select v-model="track.tag" :disabled="saving">
<option v-for="tag in tags"> <option :class="{unused: tag.tag_count == 0}" v-for="tag in tags">
{{ tag }} {{ tag.tag }}
</option> </option>
</select> </select>
<input type="text" v-model="track.label" :disabled="saving"> <input type="text" v-model="track.label" :disabled="saving">
@ -100,7 +100,7 @@
return response.json(); return response.json();
}) })
.then(response => { .then(response => {
appData.tags = response.map(tag => tag.tag); appData.tags = response;
}) })
.catch(error => { .catch(error => {
console.error(error); console.error(error);