feat: add product concept subtitle to radars
A Radar gains an optional Concept — a short subtitle naming the product and its typical performances, rendered under the title and wrapping to a balanced second line when long. Old radars default to an empty Concept on load.
This commit is contained in:
@@ -1,22 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useRadars } from '../storage'
|
||||
import { computed } from "vue"
|
||||
import { useRouter } from "vue-router"
|
||||
import { useRadars } from "../storage"
|
||||
|
||||
const router = useRouter()
|
||||
const { radars, createBlank, remove } = useRadars()
|
||||
|
||||
const sorted = computed(() =>
|
||||
[...radars.value].sort((a, b) => b.updatedAt - a.updatedAt),
|
||||
)
|
||||
const sorted = computed(() => [...radars.value].sort((a, b) => b.updatedAt - a.updatedAt))
|
||||
|
||||
function createAndOpen(): void {
|
||||
const radar = createBlank()
|
||||
router.push({ name: 'editor', params: { id: radar.id } })
|
||||
router.push({ name: "editor", params: { id: radar.id } })
|
||||
}
|
||||
|
||||
function open(id: string): void {
|
||||
router.push({ name: 'editor', params: { id } })
|
||||
router.push({ name: "editor", params: { id } })
|
||||
}
|
||||
|
||||
function confirmDelete(id: string, name: string): void {
|
||||
@@ -25,9 +23,9 @@ function confirmDelete(id: string, name: string): void {
|
||||
|
||||
function formatDate(ts: number): string {
|
||||
return new Date(ts).toLocaleDateString(undefined, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -44,15 +42,10 @@ function formatDate(ts: number): string {
|
||||
<button class="btn btn-primary" @click="createAndOpen">+ New radar</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="sorted.length === 0"
|
||||
class="card bg-base-100 border border-base-300 border-dashed"
|
||||
>
|
||||
<div v-if="sorted.length === 0" class="card bg-base-100 border border-base-300 border-dashed">
|
||||
<div class="card-body items-center text-center py-16">
|
||||
<p class="text-base-content/70">No radars yet.</p>
|
||||
<button class="btn btn-primary mt-3" @click="createAndOpen">
|
||||
Create your first radar
|
||||
</button>
|
||||
<button class="btn btn-primary mt-3" @click="createAndOpen">Create your first radar</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -64,15 +57,13 @@ function formatDate(ts: number): string {
|
||||
@click="open(r.id)"
|
||||
>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-lg truncate">{{ r.name || 'Untitled radar' }}</h2>
|
||||
<h2 class="card-title text-lg truncate">{{ r.name || "Untitled radar" }}</h2>
|
||||
<p class="text-sm text-base-content/60">
|
||||
{{ r.criteria.length }} criteria · {{ r.profiles.length }} profile{{
|
||||
r.profiles.length === 1 ? '' : 's'
|
||||
r.profiles.length === 1 ? "" : "s"
|
||||
}}
|
||||
</p>
|
||||
<p class="text-xs text-base-content/40 mt-1">
|
||||
Updated {{ formatDate(r.updatedAt) }}
|
||||
</p>
|
||||
<p class="text-xs text-base-content/40 mt-1">Updated {{ formatDate(r.updatedAt) }}</p>
|
||||
<div class="card-actions justify-end mt-2">
|
||||
<button
|
||||
class="btn btn-ghost btn-xs text-error"
|
||||
|
||||
Reference in New Issue
Block a user