padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: extract and consolidate common UI patterns across market module

Browse source 
## Component Extraction
  - Create MarketSearchBar component with dual-mode support (enhanced/simple)
    - Enhanced mode: suggestions, keyboard shortcuts, category filters
    - Simple mode: basic search functionality
    - Dynamic imports for performance optimization
  - Extract LoadingErrorState component for consistent loading/error handling
    - Configurable compact/full modes with custom messages
    - Built-in retry functionality
    - Standardized spinner and error displays
  - Consolidate CartButton component (already extracted in previous commit)

  ## UI Standardization
  - Replace inline category badges in StallView with CategoryFilterBar component
  - Add missing state management for category filtering (filterMode, setFilterMode)
  - Ensure consistent filtering UI between MarketPage and StallView
  - Standardize loading states across MarketPage, ProductGrid, and MerchantStore

  ## Code Organization
  - MarketPage: Uses enhanced MarketSearchBar with full feature set
  - StallView: Uses simple MarketSearchBar for cleaner stall-specific search
  - Both views now share CategoryFilterBar, CartButton, and ProductGrid
  - LoadingErrorState provides unified loading/error UX patterns

  ## Technical Improvements
  - Eliminate code duplication following DRY principles
  - Improve maintainability with single source of truth for UI patterns
  - Optimize performance with conditional feature loading
  - Enhance accessibility with consistent keyboard shortcuts and ARIA labels
  - Ensure mobile-responsive designs with unified behavior

  BREAKING CHANGE: MarketFuzzySearch component replaced by MarketSearchBar
This commit is contained in:
padreug 2025-09-27 09:45:33 +02:00
parent 8821f604be
commit c8860dc937
6 changed files with 586 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/modules/market/components/MerchantStore.vue
View file

@ -1,28 +1,16 @@
<template>
<div class="space-y-6">
<!-- Loading State -->
<div v-if="isLoadingMerchant" class="flex flex-col items-center justify-center py-12">
<div class="w-16 h-16 mx-auto mb-4 bg-muted/50 rounded-full flex items-center justify-center">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
</div>
<h3 class="text-lg font-medium text-foreground mb-2">Checking Merchant Status</h3>
<p class="text-muted-foreground">Loading your merchant profile...</p>
</div>
<!-- Error State -->
<div v-else-if="merchantCheckError" class="flex flex-col items-center justify-center py-12">
<div class="w-16 h-16 mx-auto mb-4 bg-red-500/10 rounded-full flex items-center justify-center">
<AlertCircle class="w-8 h-8 text-red-500" />
</div>
<h3 class="text-lg font-medium text-foreground mb-2">Error Loading Merchant Status</h3>
<p class="text-muted-foreground mb-4">{{ merchantCheckError }}</p>
<Button @click="checkMerchantProfile" variant="outline">
Try Again
</Button>
</div>
<LoadingErrorState
:is-loading="isLoadingMerchant"
loading-message="Loading your merchant profile..."
:has-error="!!merchantCheckError"
error-title="Error Loading Merchant Status"
:error-message="merchantCheckError || ''"
@retry="checkMerchantProfile"
:full-height="false"
>
<!-- No Merchant Profile Empty State -->
<div v-else-if="!userHasMerchantProfile" class="flex flex-col items-center justify-center py-12">
<div v-if="!userHasMerchantProfile" class="flex flex-col items-center justify-center py-12">
<div class="w-24 h-24 bg-muted rounded-full flex items-center justify-center mb-6">
<User class="w-12 h-12 text-muted-foreground" />
</div>
@ -325,6 +313,9 @@
@created="onProductCreated"
@updated="onProductUpdated"
/>
</LoadingErrorState>
</div>
</template>
<script setup lang="ts">
@ -333,6 +324,7 @@ import { useRouter } from 'vue-router'
import { useMarketStore } from '@/modules/market/stores/market'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import LoadingErrorState from './LoadingErrorState.vue'
import {
Package,
Store,