Switch UI components to new design system tokens
Standardizes color values and styling using the new tokens: - Replaces hardcoded colors with semantic variables - Updates background/text/border classes for light/dark mode - Migrates inputs to UInput/USelect/UTextarea components - Removes redundant style declarations
This commit is contained in:
parent
9b45652b83
commit
3fea484585
13 changed files with 788 additions and 785 deletions
|
|
@ -1,12 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="bg-white border-b">
|
||||
<div class="bg-elevated border-b border-default">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="py-6">
|
||||
<h1 class="text-2xl font-bold text-gray-900">Series Management</h1>
|
||||
<p class="text-gray-600">
|
||||
Manage event series and their relationships
|
||||
</p>
|
||||
<h1 class="text-2xl font-bold text-highlighted">Series Management</h1>
|
||||
<p class="text-muted">Manage event series and their relationships</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -15,7 +13,7 @@
|
|||
<!-- Series Overview -->
|
||||
<div class="mb-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<div class="bg-elevated rounded-lg shadow p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="p-3 bg-purple-100 rounded-full">
|
||||
<Icon
|
||||
|
|
@ -24,14 +22,14 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm text-gray-500">Active Series</p>
|
||||
<p class="text-2xl font-semibold text-gray-900">
|
||||
<p class="text-sm text-dimmed">Active Series</p>
|
||||
<p class="text-2xl font-semibold text-highlighted">
|
||||
{{ activeSeries.length }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<div class="bg-elevated rounded-lg shadow p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="p-3 bg-blue-100 rounded-full">
|
||||
<Icon
|
||||
|
|
@ -40,14 +38,14 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm text-gray-500">Total Series Events</p>
|
||||
<p class="text-2xl font-semibold text-gray-900">
|
||||
<p class="text-sm text-dimmed">Total Series Events</p>
|
||||
<p class="text-2xl font-semibold text-highlighted">
|
||||
{{ totalSeriesEvents }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<div class="bg-elevated rounded-lg shadow p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="p-3 bg-green-100 rounded-full">
|
||||
<Icon
|
||||
|
|
@ -56,8 +54,8 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm text-gray-500">Avg Events/Series</p>
|
||||
<p class="text-2xl font-semibold text-gray-900">
|
||||
<p class="text-sm text-dimmed">Avg Events/Series</p>
|
||||
<p class="text-2xl font-semibold text-highlighted">
|
||||
{{
|
||||
activeSeries.length > 0
|
||||
? Math.round(totalSeriesEvents / activeSeries.length)
|
||||
|
|
@ -76,11 +74,11 @@
|
|||
<input
|
||||
v-model="searchQuery"
|
||||
placeholder="Search series..."
|
||||
class="border border-gray-300 rounded-lg px-4 py-2 w-80 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
class="border border-default bg-elevated text-default placeholder-dimmed rounded-lg px-4 py-2 w-80 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
/>
|
||||
<select
|
||||
v-model="statusFilter"
|
||||
class="border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
class="border border-default bg-elevated text-default rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
>
|
||||
<option value="">All Status</option>
|
||||
<option value="active">Active</option>
|
||||
|
|
@ -111,17 +109,17 @@
|
|||
<div
|
||||
class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-500 mx-auto mb-4"
|
||||
></div>
|
||||
<p class="text-gray-600">Loading series...</p>
|
||||
<p class="text-muted">Loading series...</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="filteredSeries.length > 0" class="space-y-6">
|
||||
<div
|
||||
v-for="series in filteredSeries"
|
||||
:key="series.id"
|
||||
class="bg-white rounded-lg shadow overflow-hidden"
|
||||
class="bg-elevated rounded-lg shadow overflow-hidden"
|
||||
>
|
||||
<!-- Series Header -->
|
||||
<div class="px-6 py-4 bg-gray-50 border-b border-gray-200">
|
||||
<div class="px-6 py-4 bg-muted border-b border-default">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<div
|
||||
|
|
@ -133,10 +131,10 @@
|
|||
{{ formatSeriesType(series.type) }}
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900">
|
||||
<h3 class="text-lg font-semibold text-highlighted">
|
||||
{{ series.title }}
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600">{{ series.description }}</p>
|
||||
<p class="text-sm text-muted">{{ series.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
|
|
@ -147,12 +145,12 @@
|
|||
? 'bg-green-100 text-green-700'
|
||||
: series.status === 'upcoming'
|
||||
? 'bg-blue-100 text-blue-700'
|
||||
: 'bg-gray-100 text-gray-700',
|
||||
: 'bg-accented text-default',
|
||||
]"
|
||||
>
|
||||
{{ series.status }}
|
||||
</span>
|
||||
<span class="text-sm text-gray-500">
|
||||
<span class="text-sm text-dimmed">
|
||||
{{ series.eventCount }} events
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -160,11 +158,11 @@
|
|||
</div>
|
||||
|
||||
<!-- Series Events -->
|
||||
<div class="divide-y divide-gray-200">
|
||||
<div class="divide-y divide-default">
|
||||
<div
|
||||
v-for="event in series.events"
|
||||
:key="event.id"
|
||||
class="px-6 py-4 hover:bg-gray-50"
|
||||
class="px-6 py-4 hover:bg-muted"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
|
|
@ -174,10 +172,10 @@
|
|||
{{ event.series?.position || "?" }}
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-gray-900">
|
||||
<h4 class="text-sm font-medium text-highlighted">
|
||||
{{ event.title }}
|
||||
</h4>
|
||||
<p class="text-xs text-gray-500">
|
||||
<p class="text-xs text-dimmed">
|
||||
{{ formatEventDate(event.startDate) }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -194,21 +192,21 @@
|
|||
<div class="flex gap-1">
|
||||
<NuxtLink
|
||||
:to="`/events/${event.slug || event.id}`"
|
||||
class="p-1 text-gray-400 hover:text-gray-600 rounded"
|
||||
class="p-1 text-muted hover:text-default rounded"
|
||||
title="View Event"
|
||||
>
|
||||
<Icon name="heroicons:eye" class="w-4 h-4" />
|
||||
</NuxtLink>
|
||||
<button
|
||||
@click="editEvent(event)"
|
||||
class="p-1 text-gray-400 hover:text-primary rounded"
|
||||
class="p-1 text-muted hover:text-primary rounded"
|
||||
title="Edit Event"
|
||||
>
|
||||
<Icon name="heroicons:pencil-square" class="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
@click="removeFromSeries(event)"
|
||||
class="p-1 text-gray-400 hover:text-red-600 rounded"
|
||||
class="p-1 text-muted hover:text-red-600 rounded"
|
||||
title="Remove from Series"
|
||||
>
|
||||
<Icon name="heroicons:x-mark" class="w-4 h-4" />
|
||||
|
|
@ -220,27 +218,27 @@
|
|||
</div>
|
||||
|
||||
<!-- Series Actions -->
|
||||
<div class="px-6 py-3 bg-gray-50 border-t border-gray-200">
|
||||
<div class="px-6 py-3 bg-muted border-t border-default">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-sm text-gray-500">
|
||||
<div class="text-sm text-dimmed">
|
||||
{{ formatDateRange(series.startDate, series.endDate) }}
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
@click="editSeries(series)"
|
||||
class="text-sm text-primary-600 hover:text-primary-700 font-medium"
|
||||
class="text-sm text-primary hover:text-primary font-medium"
|
||||
>
|
||||
Edit Series
|
||||
</button>
|
||||
<button
|
||||
@click="addEventToSeries(series)"
|
||||
class="text-sm text-primary-600 hover:text-primary-700 font-medium"
|
||||
class="text-sm text-primary hover:text-primary font-medium"
|
||||
>
|
||||
Add Event
|
||||
</button>
|
||||
<button
|
||||
@click="duplicateSeries(series)"
|
||||
class="text-sm text-primary-600 hover:text-primary-700 font-medium"
|
||||
class="text-sm text-primary hover:text-primary font-medium"
|
||||
>
|
||||
Duplicate Series
|
||||
</button>
|
||||
|
|
@ -256,13 +254,13 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="text-center py-12 bg-white rounded-lg shadow">
|
||||
<div v-else class="text-center py-12 bg-elevated rounded-lg shadow">
|
||||
<Icon
|
||||
name="heroicons:squares-2x2"
|
||||
class="w-12 h-12 text-gray-400 mx-auto mb-3"
|
||||
class="w-12 h-12 text-muted mx-auto mb-3"
|
||||
/>
|
||||
<p class="text-gray-600">No event series found</p>
|
||||
<p class="text-sm text-gray-500 mt-2">
|
||||
<p class="text-muted">No event series found</p>
|
||||
<p class="text-sm text-dimmed mt-2">
|
||||
Create events and group them into series to get started
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -274,14 +272,14 @@
|
|||
class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center p-4 z-50"
|
||||
>
|
||||
<div
|
||||
class="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
|
||||
class="bg-elevated rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
|
||||
>
|
||||
<div class="px-6 py-4 border-b border-gray-200">
|
||||
<div class="px-6 py-4 border-b border-default">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-lg font-semibold text-gray-900">Edit Series</h3>
|
||||
<h3 class="text-lg font-semibold text-highlighted">Edit Series</h3>
|
||||
<button
|
||||
@click="cancelEditSeries"
|
||||
class="text-gray-400 hover:text-gray-600"
|
||||
class="text-muted hover:text-default"
|
||||
>
|
||||
<Icon name="heroicons:x-mark" class="w-5 h-5" />
|
||||
</button>
|
||||
|
|
@ -290,62 +288,63 @@
|
|||
|
||||
<div class="p-6 space-y-6">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2"
|
||||
<label class="block text-sm font-medium text-default mb-2"
|
||||
>Series Title</label
|
||||
>
|
||||
<input
|
||||
v-model="editingSeriesData.title"
|
||||
type="text"
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
class="w-full border border-default bg-elevated text-default placeholder-dimmed rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
placeholder="e.g., Co-op Game Dev Workshop Series"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2"
|
||||
<label class="block text-sm font-medium text-default mb-2"
|
||||
>Description</label
|
||||
>
|
||||
<textarea
|
||||
v-model="editingSeriesData.description"
|
||||
rows="3"
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
class="w-full border border-default bg-elevated text-default placeholder-dimmed rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
placeholder="Brief description of this series"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2"
|
||||
<label class="block text-sm font-medium text-default mb-2"
|
||||
>Series Type</label
|
||||
>
|
||||
<select
|
||||
<USelect
|
||||
v-model="editingSeriesData.type"
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
>
|
||||
<option value="workshop_series">Workshop Series</option>
|
||||
<option value="recurring_meetup">Recurring Meetup</option>
|
||||
<option value="multi_day">Multi-Day Event</option>
|
||||
<option value="course">Course</option>
|
||||
</select>
|
||||
:items="[
|
||||
{ label: 'Workshop Series', value: 'workshop_series' },
|
||||
{ label: 'Recurring Meetup', value: 'recurring_meetup' },
|
||||
{ label: 'Multi-Day Event', value: 'multi_day' },
|
||||
{ label: 'Course', value: 'course' },
|
||||
]"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2"
|
||||
<label class="block text-sm font-medium text-default mb-2"
|
||||
>Total Events (optional)</label
|
||||
>
|
||||
<input
|
||||
<UInput
|
||||
v-model.number="editingSeriesData.totalEvents"
|
||||
type="number"
|
||||
min="1"
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
placeholder="Leave empty for ongoing series"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
|
||||
<div class="px-6 py-4 border-t border-default flex justify-end gap-3">
|
||||
<button
|
||||
@click="cancelEditSeries"
|
||||
class="px-4 py-2 text-gray-600 hover:text-gray-700"
|
||||
class="px-4 py-2 text-muted hover:text-default"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
|
@ -365,16 +364,16 @@
|
|||
class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center p-4 z-50"
|
||||
>
|
||||
<div
|
||||
class="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
|
||||
class="bg-elevated rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
|
||||
>
|
||||
<div class="px-6 py-4 border-b border-gray-200">
|
||||
<div class="px-6 py-4 border-b border-default">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-lg font-semibold text-gray-900">
|
||||
<h3 class="text-lg font-semibold text-highlighted">
|
||||
Bulk Series Operations
|
||||
</h3>
|
||||
<button
|
||||
@click="showBulkModal = false"
|
||||
class="text-gray-400 hover:text-gray-600"
|
||||
class="text-muted hover:text-default"
|
||||
>
|
||||
<Icon name="heroicons:x-mark" class="w-5 h-5" />
|
||||
</button>
|
||||
|
|
@ -383,24 +382,24 @@
|
|||
|
||||
<div class="p-6 space-y-6">
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-gray-900 mb-3">
|
||||
<h4 class="text-sm font-medium text-highlighted mb-3">
|
||||
Series Management Tools
|
||||
</h4>
|
||||
<div class="space-y-3">
|
||||
<button
|
||||
@click="reorderAllSeries"
|
||||
class="w-full text-left p-3 border border-gray-200 rounded-lg hover:bg-gray-50"
|
||||
class="w-full text-left p-3 border border-default rounded-lg hover:bg-muted"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<Icon
|
||||
name="heroicons:arrows-up-down"
|
||||
class="w-5 h-5 text-gray-400 mr-3"
|
||||
class="w-5 h-5 text-muted mr-3"
|
||||
/>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-900">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
Auto-Reorder Series
|
||||
</p>
|
||||
<p class="text-xs text-gray-500">
|
||||
<p class="text-xs text-dimmed">
|
||||
Fix position numbers based on event dates
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -409,18 +408,18 @@
|
|||
|
||||
<button
|
||||
@click="validateAllSeries"
|
||||
class="w-full text-left p-3 border border-gray-200 rounded-lg hover:bg-gray-50"
|
||||
class="w-full text-left p-3 border border-default rounded-lg hover:bg-muted"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<Icon
|
||||
name="heroicons:check-circle"
|
||||
class="w-5 h-5 text-gray-400 mr-3"
|
||||
class="w-5 h-5 text-muted mr-3"
|
||||
/>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-900">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
Validate Series Data
|
||||
</p>
|
||||
<p class="text-xs text-gray-500">
|
||||
<p class="text-xs text-dimmed">
|
||||
Check for consistency issues
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -429,18 +428,18 @@
|
|||
|
||||
<button
|
||||
@click="exportSeriesData"
|
||||
class="w-full text-left p-3 border border-gray-200 rounded-lg hover:bg-gray-50"
|
||||
class="w-full text-left p-3 border border-default rounded-lg hover:bg-muted"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<Icon
|
||||
name="heroicons:document-arrow-down"
|
||||
class="w-5 h-5 text-gray-400 mr-3"
|
||||
class="w-5 h-5 text-muted mr-3"
|
||||
/>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-900">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
Export Series Data
|
||||
</p>
|
||||
<p class="text-xs text-gray-500">
|
||||
<p class="text-xs text-dimmed">
|
||||
Download series information as JSON
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -450,10 +449,10 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-6 py-4 border-t border-gray-200 flex justify-end">
|
||||
<div class="px-6 py-4 border-t border-default flex justify-end">
|
||||
<button
|
||||
@click="showBulkModal = false"
|
||||
class="px-4 py-2 text-gray-600 hover:text-gray-700"
|
||||
class="px-4 py-2 text-muted hover:text-default"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue