Filter updates
This commit is contained in:
parent
5e066093d8
commit
5c32be88c5
7 changed files with 254 additions and 183 deletions
44
src/lib/components/admin/AdminFilters.svelte
Normal file
44
src/lib/components/admin/AdminFilters.svelte
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<script lang="ts">
|
||||
interface Props {
|
||||
left?: any
|
||||
right?: any
|
||||
}
|
||||
|
||||
let { left, right }: Props = $props()
|
||||
</script>
|
||||
|
||||
<div class="admin-filters">
|
||||
<div class="filters-left">
|
||||
{#if left}
|
||||
{@render left()}
|
||||
{/if}
|
||||
</div>
|
||||
<div class="filters-right">
|
||||
{#if right}
|
||||
{@render right()}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.admin-filters {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 $unit-2x 0 $unit;
|
||||
margin-bottom: $unit-2x;
|
||||
}
|
||||
|
||||
.filters-left {
|
||||
display: flex;
|
||||
gap: $unit-2x;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filters-right {
|
||||
display: flex;
|
||||
gap: $unit-2x;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,22 +1,33 @@
|
|||
<script lang="ts">
|
||||
import type { HTMLInputAttributes, HTMLTextareaAttributes } from 'svelte/elements'
|
||||
|
||||
|
||||
// Type helpers for different input elements
|
||||
type InputProps = HTMLInputAttributes & {
|
||||
type?: 'text' | 'email' | 'password' | 'url' | 'search' | 'number' | 'tel' | 'date' | 'time' | 'color'
|
||||
type?:
|
||||
| 'text'
|
||||
| 'email'
|
||||
| 'password'
|
||||
| 'url'
|
||||
| 'search'
|
||||
| 'number'
|
||||
| 'tel'
|
||||
| 'date'
|
||||
| 'time'
|
||||
| 'color'
|
||||
}
|
||||
|
||||
|
||||
type TextareaProps = HTMLTextareaAttributes & {
|
||||
type: 'textarea'
|
||||
rows?: number
|
||||
autoResize?: boolean
|
||||
}
|
||||
|
||||
|
||||
type Props = (InputProps | TextareaProps) & {
|
||||
label?: string
|
||||
error?: string
|
||||
helpText?: string
|
||||
size?: 'small' | 'medium' | 'large'
|
||||
pill?: boolean
|
||||
fullWidth?: boolean
|
||||
required?: boolean
|
||||
class?: string
|
||||
|
|
@ -34,6 +45,7 @@
|
|||
error,
|
||||
helpText,
|
||||
size = 'medium',
|
||||
pill = false,
|
||||
fullWidth = true,
|
||||
required = false,
|
||||
disabled = false,
|
||||
|
|
@ -56,30 +68,30 @@
|
|||
let textareaElement: HTMLTextAreaElement | undefined = $state()
|
||||
let charCount = $derived(String(value).length)
|
||||
let charsRemaining = $derived(maxLength ? maxLength - charCount : 0)
|
||||
|
||||
|
||||
// Color swatch validation and display
|
||||
const isValidHexColor = $derived(() => {
|
||||
if (!colorSwatch || !value) return false
|
||||
const hexRegex = /^#[0-9A-Fa-f]{6}$/
|
||||
return hexRegex.test(String(value))
|
||||
})
|
||||
|
||||
|
||||
// Color picker functionality
|
||||
let colorPickerInput: HTMLInputElement
|
||||
|
||||
|
||||
function handleColorSwatchClick() {
|
||||
if (colorPickerInput) {
|
||||
colorPickerInput.click()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function handleColorPickerChange(event: Event) {
|
||||
const target = event.target as HTMLInputElement
|
||||
if (target.value) {
|
||||
value = target.value.toUpperCase()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Auto-resize textarea
|
||||
$effect(() => {
|
||||
if (type === 'textarea' && textareaElement && isTextarea(restProps) && restProps.autoResize) {
|
||||
|
|
@ -100,7 +112,8 @@
|
|||
if (prefixIcon) classes.push('has-prefix-icon')
|
||||
if (suffixIcon) classes.push('has-suffix-icon')
|
||||
if (colorSwatch) classes.push('has-color-swatch')
|
||||
if (type === 'textarea' && isTextarea(restProps) && restProps.autoResize) classes.push('has-auto-resize')
|
||||
if (type === 'textarea' && isTextarea(restProps) && restProps.autoResize)
|
||||
classes.push('has-auto-resize')
|
||||
if (wrapperClass) classes.push(wrapperClass)
|
||||
if (className) classes.push(className)
|
||||
return classes.join(' ')
|
||||
|
|
@ -109,6 +122,7 @@
|
|||
const inputClasses = $derived(() => {
|
||||
const classes = ['input']
|
||||
classes.push(`input-${size}`)
|
||||
if (pill) classes.push('input-pill')
|
||||
if (inputClass) classes.push(inputClass)
|
||||
return classes.join(' ')
|
||||
})
|
||||
|
|
@ -128,17 +142,17 @@
|
|||
{/if}
|
||||
</label>
|
||||
{/if}
|
||||
|
||||
|
||||
<div class="input-container">
|
||||
{#if prefixIcon}
|
||||
<span class="input-icon prefix-icon">
|
||||
<slot name="prefix" />
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
|
||||
{#if colorSwatch && isValidHexColor}
|
||||
<span
|
||||
class="color-swatch"
|
||||
<span
|
||||
class="color-swatch"
|
||||
style="background-color: {value}"
|
||||
onclick={handleColorSwatchClick}
|
||||
role="button"
|
||||
|
|
@ -146,7 +160,7 @@
|
|||
aria-label="Open color picker"
|
||||
></span>
|
||||
{/if}
|
||||
|
||||
|
||||
{#if type === 'textarea' && isTextarea(restProps)}
|
||||
<textarea
|
||||
bind:this={textareaElement}
|
||||
|
|
@ -173,13 +187,13 @@
|
|||
{...restProps}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
|
||||
{#if suffixIcon}
|
||||
<span class="input-icon suffix-icon">
|
||||
<slot name="suffix" />
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
|
||||
{#if colorSwatch}
|
||||
<input
|
||||
bind:this={colorPickerInput}
|
||||
|
|
@ -192,7 +206,7 @@
|
|||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
{#if (error || helpText || showCharCount) && !disabled}
|
||||
<div class="input-footer">
|
||||
{#if error}
|
||||
|
|
@ -200,9 +214,13 @@
|
|||
{:else if helpText}
|
||||
<span class="input-help">{helpText}</span>
|
||||
{/if}
|
||||
|
||||
|
||||
{#if showCharCount && maxLength}
|
||||
<span class="char-count" class:warning={charsRemaining < maxLength * 0.1} class:error={charsRemaining < 0}>
|
||||
<span
|
||||
class="char-count"
|
||||
class:warning={charsRemaining < maxLength * 0.1}
|
||||
class:error={charsRemaining < 0}
|
||||
>
|
||||
{charsRemaining}
|
||||
</span>
|
||||
{/if}
|
||||
|
|
@ -217,7 +235,7 @@
|
|||
.input-wrapper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
|
||||
&.full-width {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -226,7 +244,7 @@
|
|||
&.has-error {
|
||||
.input {
|
||||
border-color: $red-50;
|
||||
|
||||
|
||||
&:focus {
|
||||
border-color: $red-50;
|
||||
}
|
||||
|
|
@ -293,7 +311,7 @@
|
|||
border-radius: 6px;
|
||||
background-color: white;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
|
||||
&::placeholder {
|
||||
color: $grey-50;
|
||||
}
|
||||
|
|
@ -332,6 +350,31 @@
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
// Shape variants - pill vs rounded
|
||||
.input-pill {
|
||||
&.input-small {
|
||||
border-radius: 20px;
|
||||
}
|
||||
&.input-medium {
|
||||
border-radius: 24px;
|
||||
}
|
||||
&.input-large {
|
||||
border-radius: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.input:not(.input-pill) {
|
||||
&.input-small {
|
||||
border-radius: 6px;
|
||||
}
|
||||
&.input-medium {
|
||||
border-radius: 8px;
|
||||
}
|
||||
&.input-large {
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon adjustments
|
||||
.has-prefix-icon .input {
|
||||
padding-left: calc($unit-2x + 24px);
|
||||
|
|
@ -350,11 +393,11 @@
|
|||
justify-content: center;
|
||||
color: $grey-40;
|
||||
pointer-events: none;
|
||||
|
||||
|
||||
&.prefix-icon {
|
||||
left: $unit-2x;
|
||||
}
|
||||
|
||||
|
||||
&.suffix-icon {
|
||||
right: $unit-2x;
|
||||
}
|
||||
|
|
@ -373,18 +416,18 @@
|
|||
padding-bottom: calc($unit * 1.5);
|
||||
line-height: 1.5;
|
||||
overflow-y: hidden; // Important for auto-resize
|
||||
|
||||
|
||||
&.input-small {
|
||||
min-height: 60px;
|
||||
padding-top: $unit;
|
||||
padding-bottom: $unit;
|
||||
}
|
||||
|
||||
|
||||
&.input-large {
|
||||
min-height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Auto-resizing textarea
|
||||
.has-auto-resize textarea.input {
|
||||
resize: none; // Disable manual resize when auto-resize is enabled
|
||||
|
|
@ -418,11 +461,11 @@
|
|||
color: $grey-50;
|
||||
font-variant-numeric: tabular-nums;
|
||||
margin-left: auto;
|
||||
|
||||
|
||||
&.warning {
|
||||
color: $universe-color;
|
||||
}
|
||||
|
||||
|
||||
&.error {
|
||||
color: $red-50;
|
||||
font-weight: 500;
|
||||
|
|
@ -430,23 +473,23 @@
|
|||
}
|
||||
|
||||
// Special input types
|
||||
input[type="color"].input {
|
||||
input[type='color'].input {
|
||||
padding: $unit;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="number"].input {
|
||||
input[type='number'].input {
|
||||
-moz-appearance: textfield;
|
||||
|
||||
|
||||
&::-webkit-outer-spin-button,
|
||||
&::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
|
|
@ -455,10 +498,10 @@
|
|||
}
|
||||
|
||||
// Search input
|
||||
input[type="search"].input {
|
||||
input[type='search'].input {
|
||||
&::-webkit-search-decoration,
|
||||
&::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@
|
|||
font-size: 13px;
|
||||
min-height: 28px;
|
||||
min-width: 120px;
|
||||
border-radius: 8px;
|
||||
border-radius: $corner-radius;
|
||||
}
|
||||
|
||||
&.select-medium {
|
||||
|
|
@ -144,7 +144,7 @@
|
|||
font-size: 14px;
|
||||
min-height: 36px;
|
||||
min-width: 160px;
|
||||
border-radius: 8px;
|
||||
border-radius: $corner-radius;
|
||||
}
|
||||
|
||||
&.select-large {
|
||||
|
|
@ -152,7 +152,7 @@
|
|||
font-size: 15px;
|
||||
min-height: 44px;
|
||||
min-width: 180px;
|
||||
border-radius: 8px;
|
||||
border-radius: $card-corner-radius;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import { onMount } from 'svelte'
|
||||
import AdminPage from '$lib/components/admin/AdminPage.svelte'
|
||||
import AdminHeader from '$lib/components/admin/AdminHeader.svelte'
|
||||
import AdminFilters from '$lib/components/admin/AdminFilters.svelte'
|
||||
import DataTable from '$lib/components/admin/DataTable.svelte'
|
||||
import Button from '$lib/components/admin/Button.svelte'
|
||||
import Select from '$lib/components/admin/Select.svelte'
|
||||
|
|
@ -145,15 +146,17 @@
|
|||
<div class="error">{error}</div>
|
||||
{:else}
|
||||
<!-- Filters -->
|
||||
<div class="filters">
|
||||
<Select
|
||||
bind:value={photographyFilter}
|
||||
options={filterOptions}
|
||||
size="small"
|
||||
variant="minimal"
|
||||
onchange={handleFilterChange}
|
||||
/>
|
||||
</div>
|
||||
<AdminFilters>
|
||||
{#snippet left()}
|
||||
<Select
|
||||
bind:value={photographyFilter}
|
||||
options={filterOptions}
|
||||
size="small"
|
||||
variant="minimal"
|
||||
onchange={handleFilterChange}
|
||||
/>
|
||||
{/snippet}
|
||||
</AdminFilters>
|
||||
|
||||
<!-- Albums Table -->
|
||||
{#if isLoading}
|
||||
|
|
@ -185,12 +188,6 @@
|
|||
margin-bottom: $unit-4x;
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: $unit-2x;
|
||||
align-items: center;
|
||||
margin-bottom: $unit-4x;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte'
|
||||
import AdminPage from '$lib/components/admin/AdminPage.svelte'
|
||||
import AdminHeader from '$lib/components/admin/AdminHeader.svelte'
|
||||
import AdminFilters from '$lib/components/admin/AdminFilters.svelte'
|
||||
import Input from '$lib/components/admin/Input.svelte'
|
||||
import Select from '$lib/components/admin/Select.svelte'
|
||||
import Button from '$lib/components/admin/Button.svelte'
|
||||
import MediaDetailsModal from '$lib/components/admin/MediaDetailsModal.svelte'
|
||||
import type { Media } from '@prisma/client'
|
||||
|
||||
|
|
@ -19,6 +23,21 @@
|
|||
let searchQuery = $state('')
|
||||
let searchTimeout: ReturnType<typeof setTimeout>
|
||||
|
||||
// Filter options
|
||||
const typeFilterOptions = [
|
||||
{ value: 'all', label: 'All types' },
|
||||
{ value: 'image', label: 'Images' },
|
||||
{ value: 'video', label: 'Videos' },
|
||||
{ value: 'audio', label: 'Audio' },
|
||||
{ value: 'application/pdf', label: 'PDFs' }
|
||||
]
|
||||
|
||||
const photographyFilterOptions = [
|
||||
{ value: 'all', label: 'All media' },
|
||||
{ value: 'true', label: 'Photography only' },
|
||||
{ value: 'false', label: 'Non-photography' }
|
||||
]
|
||||
|
||||
// Modal states
|
||||
let selectedMedia = $state<Media | null>(null)
|
||||
let isDetailsModalOpen = $state(false)
|
||||
|
|
@ -286,47 +305,51 @@
|
|||
</script>
|
||||
|
||||
<AdminPage>
|
||||
<header slot="header">
|
||||
<h1>Media Library</h1>
|
||||
<div class="header-actions">
|
||||
<button
|
||||
<AdminHeader title="Media Library" slot="header">
|
||||
{#snippet actions()}
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="large"
|
||||
onclick={toggleMultiSelectMode}
|
||||
class="btn btn-secondary"
|
||||
class:active={isMultiSelectMode}
|
||||
class={isMultiSelectMode ? 'active' : ''}
|
||||
>
|
||||
{isMultiSelectMode ? '✓' : '☐'}
|
||||
{isMultiSelectMode ? 'Exit Select' : 'Select'}
|
||||
</button>
|
||||
<button
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="large"
|
||||
onclick={() => (viewMode = viewMode === 'grid' ? 'list' : 'grid')}
|
||||
class="btn btn-secondary"
|
||||
>
|
||||
{viewMode === 'grid' ? '📋' : '🖼️'}
|
||||
{viewMode === 'grid' ? 'List' : 'Grid'}
|
||||
</button>
|
||||
<a href="/admin/media/upload" class="btn btn-primary">Upload Media</a>
|
||||
</div>
|
||||
</header>
|
||||
</Button>
|
||||
<Button variant="primary" size="large" href="/admin/media/upload">Upload Media</Button>
|
||||
{/snippet}
|
||||
</AdminHeader>
|
||||
|
||||
{#if error}
|
||||
<div class="error">{error}</div>
|
||||
{:else}
|
||||
<div class="media-controls">
|
||||
<div class="filters">
|
||||
<select bind:value={filterType} onchange={handleFilterChange} class="filter-select">
|
||||
<option value="all">All types</option>
|
||||
<option value="image">Images</option>
|
||||
<option value="video">Videos</option>
|
||||
<option value="audio">Audio</option>
|
||||
<option value="application/pdf">PDFs</option>
|
||||
</select>
|
||||
|
||||
<select bind:value={photographyFilter} onchange={handleFilterChange} class="filter-select">
|
||||
<option value="all">All media</option>
|
||||
<option value="true">Photography only</option>
|
||||
<option value="false">Non-photography</option>
|
||||
</select>
|
||||
|
||||
<!-- Filters -->
|
||||
<AdminFilters>
|
||||
{#snippet left()}
|
||||
<Select
|
||||
bind:value={filterType}
|
||||
options={typeFilterOptions}
|
||||
size="small"
|
||||
variant="minimal"
|
||||
onchange={handleFilterChange}
|
||||
/>
|
||||
<Select
|
||||
bind:value={photographyFilter}
|
||||
options={photographyFilterOptions}
|
||||
size="small"
|
||||
variant="minimal"
|
||||
onchange={handleFilterChange}
|
||||
/>
|
||||
{/snippet}
|
||||
{#snippet right()}
|
||||
<Input
|
||||
type="search"
|
||||
bind:value={searchQuery}
|
||||
|
|
@ -334,8 +357,8 @@
|
|||
placeholder="Search files..."
|
||||
size="small"
|
||||
fullWidth={false}
|
||||
pill={true}
|
||||
prefixIcon
|
||||
wrapperClass="search-input-wrapper"
|
||||
>
|
||||
<svg
|
||||
slot="prefix"
|
||||
|
|
@ -352,8 +375,8 @@
|
|||
/>
|
||||
</svg>
|
||||
</Input>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</AdminFilters>
|
||||
|
||||
{#if isMultiSelectMode && media.length > 0}
|
||||
<div class="bulk-actions">
|
||||
|
|
@ -614,25 +637,6 @@
|
|||
/>
|
||||
|
||||
<style lang="scss">
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
h1 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: $grey-10;
|
||||
}
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: $unit-2x;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: $unit-2x $unit-3x;
|
||||
border-radius: 50px;
|
||||
|
|
@ -668,44 +672,6 @@
|
|||
color: #d33;
|
||||
}
|
||||
|
||||
.media-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: $unit-4x;
|
||||
margin-bottom: $unit-4x;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: $unit-2x;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
padding: $unit $unit-3x;
|
||||
border: 1px solid $grey-80;
|
||||
border-radius: 50px;
|
||||
background: white;
|
||||
font-size: 0.925rem;
|
||||
color: $grey-20;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $grey-40;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
width: 240px;
|
||||
|
||||
:global(.input) {
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: $unit-6x;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import { goto } from '$app/navigation'
|
||||
import AdminPage from '$lib/components/admin/AdminPage.svelte'
|
||||
import AdminHeader from '$lib/components/admin/AdminHeader.svelte'
|
||||
import AdminFilters from '$lib/components/admin/AdminFilters.svelte'
|
||||
import PostDropdown from '$lib/components/admin/PostDropdown.svelte'
|
||||
import LoadingSpinner from '$lib/components/admin/LoadingSpinner.svelte'
|
||||
import Select from '$lib/components/admin/Select.svelte'
|
||||
|
|
@ -239,15 +240,17 @@
|
|||
<div class="error-message">{error}</div>
|
||||
{:else}
|
||||
<!-- Filters -->
|
||||
<div class="filters">
|
||||
<Select
|
||||
bind:value={selectedFilter}
|
||||
options={filterOptions}
|
||||
size="small"
|
||||
variant="minimal"
|
||||
onchange={handleFilterChange}
|
||||
/>
|
||||
</div>
|
||||
<AdminFilters>
|
||||
{#snippet left()}
|
||||
<Select
|
||||
bind:value={selectedFilter}
|
||||
options={filterOptions}
|
||||
size="small"
|
||||
variant="minimal"
|
||||
onchange={handleFilterChange}
|
||||
/>
|
||||
{/snippet}
|
||||
</AdminFilters>
|
||||
|
||||
<!-- Posts List -->
|
||||
{#if isLoading}
|
||||
|
|
@ -364,12 +367,6 @@
|
|||
<style lang="scss">
|
||||
@import '$styles/variables.scss';
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: $unit-2x;
|
||||
align-items: center;
|
||||
margin-bottom: $unit-4x;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import { goto } from '$app/navigation'
|
||||
import AdminPage from '$lib/components/admin/AdminPage.svelte'
|
||||
import AdminHeader from '$lib/components/admin/AdminHeader.svelte'
|
||||
import AdminFilters from '$lib/components/admin/AdminFilters.svelte'
|
||||
import ProjectListItem from '$lib/components/admin/ProjectListItem.svelte'
|
||||
import DeleteConfirmationModal from '$lib/components/admin/DeleteConfirmationModal.svelte'
|
||||
import Button from '$lib/components/admin/Button.svelte'
|
||||
|
|
@ -15,6 +16,7 @@
|
|||
year: number
|
||||
client: string | null
|
||||
status: string
|
||||
projectType: string
|
||||
backgroundColor: string | null
|
||||
highlightColor: string | null
|
||||
createdAt: string
|
||||
|
|
@ -31,15 +33,22 @@
|
|||
let statusCounts = $state<Record<string, number>>({})
|
||||
|
||||
// Filter state
|
||||
let selectedFilter = $state<string>('all')
|
||||
let selectedStatusFilter = $state<string>('all')
|
||||
let selectedTypeFilter = $state<string>('all')
|
||||
|
||||
// Create filter options
|
||||
const filterOptions = $derived([
|
||||
const statusFilterOptions = $derived([
|
||||
{ value: 'all', label: 'All projects' },
|
||||
{ value: 'published', label: 'Published' },
|
||||
{ value: 'draft', label: 'Draft' }
|
||||
])
|
||||
|
||||
const typeFilterOptions = [
|
||||
{ value: 'all', label: 'All types' },
|
||||
{ value: 'work', label: 'Work' },
|
||||
{ value: 'labs', label: 'Labs' }
|
||||
]
|
||||
|
||||
onMount(async () => {
|
||||
await loadProjects()
|
||||
// Close dropdown when clicking outside
|
||||
|
|
@ -167,14 +176,26 @@
|
|||
}
|
||||
|
||||
function applyFilter() {
|
||||
if (selectedFilter === 'all') {
|
||||
filteredProjects = projects
|
||||
} else {
|
||||
filteredProjects = projects.filter((project) => project.status === selectedFilter)
|
||||
let filtered = projects
|
||||
|
||||
// Apply status filter
|
||||
if (selectedStatusFilter !== 'all') {
|
||||
filtered = filtered.filter((project) => project.status === selectedStatusFilter)
|
||||
}
|
||||
|
||||
// Apply type filter based on projectType field
|
||||
if (selectedTypeFilter !== 'all') {
|
||||
filtered = filtered.filter((project) => project.projectType === selectedTypeFilter)
|
||||
}
|
||||
|
||||
filteredProjects = filtered
|
||||
}
|
||||
|
||||
function handleFilterChange() {
|
||||
function handleStatusFilterChange() {
|
||||
applyFilter()
|
||||
}
|
||||
|
||||
function handleTypeFilterChange() {
|
||||
applyFilter()
|
||||
}
|
||||
</script>
|
||||
|
|
@ -190,15 +211,24 @@
|
|||
<div class="error">{error}</div>
|
||||
{:else}
|
||||
<!-- Filters -->
|
||||
<div class="filters">
|
||||
<Select
|
||||
bind:value={selectedFilter}
|
||||
options={filterOptions}
|
||||
size="small"
|
||||
variant="minimal"
|
||||
onchange={handleFilterChange}
|
||||
/>
|
||||
</div>
|
||||
<AdminFilters>
|
||||
{#snippet left()}
|
||||
<Select
|
||||
bind:value={selectedStatusFilter}
|
||||
options={statusFilterOptions}
|
||||
size="small"
|
||||
variant="minimal"
|
||||
onchange={handleStatusFilterChange}
|
||||
/>
|
||||
<Select
|
||||
bind:value={selectedTypeFilter}
|
||||
options={typeFilterOptions}
|
||||
size="small"
|
||||
variant="minimal"
|
||||
onchange={handleTypeFilterChange}
|
||||
/>
|
||||
{/snippet}
|
||||
</AdminFilters>
|
||||
|
||||
<!-- Projects List -->
|
||||
{#if isLoading}
|
||||
|
|
@ -209,10 +239,10 @@
|
|||
{:else if filteredProjects.length === 0}
|
||||
<div class="empty-state">
|
||||
<p>
|
||||
{#if selectedFilter === 'all'}
|
||||
{#if selectedStatusFilter === 'all' && selectedTypeFilter === 'all'}
|
||||
No projects found. Create your first project!
|
||||
{:else}
|
||||
No {selectedFilter} projects found. Try a different filter or create a new project.
|
||||
No projects found matching the current filters. Try adjusting your filters or create a new project.
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -245,12 +275,6 @@
|
|||
|
||||
<style lang="scss">
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: $unit-2x;
|
||||
align-items: center;
|
||||
margin-bottom: $unit-4x;
|
||||
}
|
||||
|
||||
.error {
|
||||
text-align: center;
|
||||
|
|
|
|||
Loading…
Reference in a new issue