add project tags.

svelte-ui/src/components/ParentEntry.svelte

@@ -92,6 +92,7 @@ import TimeProgress from "./TimeProgress.svelte";
         <TimeProgress startTime={entry.startTime || entry.createdTime} endTime={entry.endTime} />
       {/if}
     {/if}
+    <slot name="above-description"></slot>
     {#if (full)}
       <Markdown source={entry.description} />
     {/if}

svelte-ui/src/components/ProjectEntry.svelte

@@ -12,6 +12,7 @@ import stuffLogClient from "../clients/stufflog";
   import ParentEntry from "./ParentEntry.svelte";
   import ProgressNumbers from "./ProgressNumbers.svelte";
   import StatusColor from "./StatusColor.svelte";
+  import TagList from "./TagList.svelte";
   import TaskList from "./TaskList.svelte";
 
   export let project: ProjectResult = null;
@@ -113,6 +114,9 @@ import stuffLogClient from "../clients/stufflog";
     <div slot="post-seprator">
       <ProgressNumbers project={project} />
     </div>
+    <div slot="above-description">
+      <TagList tags={project.tags} />
+    </div>
     {#if showAllOptions}
       <OptionRow>
         <Option open={mdAddTask}>Add Task</Option>

svelte-ui/src/components/QLListItem.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-  import type { ProjectResult } from "../models/project";
+  import App from "../App.svelte";
+import type { ProjectResult } from "../models/project";
   import selectionStore from "../stores/selection";
   import DaysLeft from "./DaysLeft.svelte";
   import Icon from "./Icon.svelte";
   import ProjectIcon from "./ProjectIcon.svelte";
   import ProjectProgress from "./ProjectProgress.svelte";
   import StatusColor from "./StatusColor.svelte";
+import Tag from "./Tag.svelte";
   import TimeProgress from "./TimeProgress.svelte";
 
   export let project: ProjectResult;
@@ -30,6 +32,9 @@
     </div>
     <div class="header">
       <div class="name">
+        {#if project.tags.length > 0}
+          <Tag small value={project.tags[0]} />
+        {/if}
         <div class="content">{project.name}</div>
         {#if project.endTime}
           <div class="times">

svelte-ui/src/components/Tag.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  export let value = "";
+  export let small = false;
+
+  let style = "";
+
+  $: {
+    let hash = 0;
+    for (let i = 0; i < value.length; i++) {
+        hash = value.charCodeAt(i) + ((hash << 5) - hash);
+        hash = hash & hash;
+    }
+
+    console.log(value, hash);
+    
+    style = `color: hsl(${(hash << 4) % 360}, ${40 + (hash % 8)}%, ${50+(hash % 4)}%)`
+  }
+</script>
+
+<div style={style} class="tag" class:small>{value}</div>
+
+<style>
+  div.tag {
+    padding: 0.25em 0.75ch;
+    margin: 0.25em 0.5ch;
+    font-size: 0.75em;
+    border: 1px solid;
+  }
+
+  div.tag.small {
+    padding: 0em 0.5ch;
+  }
+</style>

svelte-ui/src/components/TagList.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import Tag from "./Tag.svelte";
+
+  export let tags: string[] = [];
+</script>
+
+<div class="tag-list">
+  {#each tags as tag (tag)}
+    <Tag value={tag} />
+  {/each}
+</div>
+
+<style>
+  div.tag-list {
+    display: flex;
+    margin-top: 0.15em;
+  }
+</style>

svelte-ui/src/forms/ProjectForm.svelte

@@ -27,6 +27,7 @@
     tasks: [],
     favorite: false,
     subtractAmount: 0,
+    tags: [],
   }
   let verb = "Add";
   if (md.name === "project.edit" || md.name === "project.delete") {
@@ -46,6 +47,7 @@
   let subtractAmount = project.subtractAmount;
   let error = null;
   let loading = false;
+  let tags = project.tags.join(", ");
 
   function onSubmit() {
     loading = true;
@@ -60,6 +62,7 @@
         endTime: ( endTime == "" ) ? null : new Date(endTime),
         statusTag: statusTag !== "" ? statusTag : null,
         subtractAmount: Math.min(subtractAmount, 0),
+        tags: tags.length > 0 ? tags.split(",").map(t => t.trim()) : [],
 
         name, description, icon, favorite,
       }).then(() => {
@@ -89,6 +92,7 @@
         statusTag: statusTag || null,
         clearStatusTag: statusTag === "",
         subtractAmount: subtractAmount,
+        setTags: tags.length > 0 ? tags.split(",").map(t => t.trim()) : [],
 
         name, description, icon, favorite,
       }).then(() => {
@@ -128,6 +132,8 @@
     {/if}
     <label for="statusTag">Status</label>
     <StatusTagSelect disabled={deletion} isProject bind:value={statusTag} />
+    <label for="tags">Tags (Comma Separated)</label>
+    <input disabled={deletion} name="tags" type="text" bind:value={tags} />
 
     <Checkbox disabled={deletion} bind:checked={favorite} label="Mark as favorite." />
 

svelte-ui/src/models/project.ts

@@ -10,6 +10,7 @@ export default interface Project {
   createdTime: string
   favorite: boolean
   subtractAmount: number
+  tags: string[]
   startTime?: string
   endTime?: string
   statusTag?: string
@@ -36,6 +37,7 @@ export interface ProjectInput {
   endTime?: string | Date
   statusTag?: string
   favorite?: boolean
+  tags?: string[]
 }
 
 export interface ProjectUpdate {
@@ -51,4 +53,5 @@ export interface ProjectUpdate {
   clearStatusTag?: boolean
   subtractAmount?: number
   favorite?: boolean
+  setTags?: string[]
 }