dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Correct Back Navigation & Use Existing Dialog Pattern! 🔧

Browse Source 
## Issue #1: Back Button Navigation Fixed

**Problem:** Back button navigated too far to Notifications.tsx
**Root Cause:** Wrong route - should go to /staff or /customer page with templates tab

**Solution:**
- Detect if staff or customer event
- Navigate to `/settings/notifications/{staff|customer}?tab=templates`
- Staff.tsx and Customer.tsx read tab query param
- Auto-open templates tab on return

**Files:**
- `routes/Settings/Notifications/EditTemplate.tsx`
- `routes/Settings/Notifications/Staff.tsx`
- `routes/Settings/Notifications/Customer.tsx`

## Issue #2: Dialog Pattern - Use Existing, Dont Reinvent!

**Problem:** Created new DialogBody component, over-engineered
**Root Cause:** Didnt check existing dialog usage in project

**Solution:**
- Reverted dialog.tsx to original
- Use existing pattern from Shipping.tsx:
  ```tsx
  <DialogContent className="max-h-[90vh] overflow-y-auto">
  ```
- Simple, proven, works!

**Files:**
- `components/ui/dialog.tsx` - Reverted to original
- `components/ui/rich-text-editor.tsx` - Use existing pattern

**Lesson Learned:**
Always scan project for existing patterns before creating new ones!

Both issues fixed! ✅
This commit is contained in:
dwindown
2025-11-13 12:20:41 +07:00
parent 14fb7a077d
commit 43a41844e5
7 changed files with 107 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
admin-spa/src/components/ui/rich-text-editor.tsx
View File

@@ -25,7 +25,7 @@ import { Button } from './button';
import { Input } from './input';
import { Label } from './label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogBody } from './dialog';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from './dialog';
import { __ } from '@/lib/i18n';
interface RichTextEditorProps {
@@ -319,7 +319,7 @@ export function RichTextEditor({
{/* Button Dialog */}
<Dialog open={buttonDialogOpen} onOpenChange={setButtonDialogOpen}>
<DialogContent className="sm:max-w-md">
<DialogContent className="sm:max-w-md max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>{__('Insert Button')}</DialogTitle>
<DialogDescription>
@@ -327,55 +327,53 @@ export function RichTextEditor({
</DialogDescription>
</DialogHeader>
<DialogBody>
<div className="space-y-4">
<div className="space-y-2">
<Label htmlFor="btn-text">{__('Button Text')}</Label>
<Input
id="btn-text"
value={buttonText}
onChange={(e) => setButtonText(e.target.value)}
placeholder={__('e.g., View Order')}
/>
</div>
<div className="space-y-2">
<Label htmlFor="btn-href">{__('Button Link')}</Label>
<Input
id="btn-href"
value={buttonHref}
onChange={(e) => setButtonHref(e.target.value)}
placeholder="{order_url}"
/>
{variables.length > 0 && (
<div className="flex flex-wrap gap-1 mt-2">
{variables.filter(v => v.includes('_url')).map((variable) => (
<code
key={variable}
className="text-xs bg-muted px-2 py-1 rounded cursor-pointer hover:bg-muted/80"
onClick={() => setButtonHref(buttonHref + `{${variable}}`)}
>
{`{${variable}}`}
</code>
))}
</div>
)}
</div>
<div className="space-y-2">
<Label htmlFor="btn-style">{__('Button Style')}</Label>
<Select value={buttonStyle} onValueChange={(value: 'solid' | 'outline') => setButtonStyle(value)}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="solid">{__('Solid (Primary)')}</SelectItem>
<SelectItem value="outline">{__('Outline (Secondary)')}</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-4 py-4">
<div className="space-y-2">
<Label htmlFor="btn-text">{__('Button Text')}</Label>
<Input
id="btn-text"
value={buttonText}
onChange={(e) => setButtonText(e.target.value)}
placeholder={__('e.g., View Order')}
/>
</div>
</DialogBody>
<div className="space-y-2">
<Label htmlFor="btn-href">{__('Button Link')}</Label>
<Input
id="btn-href"
value={buttonHref}
onChange={(e) => setButtonHref(e.target.value)}
placeholder="{order_url}"
/>
{variables.length > 0 && (
<div className="flex flex-wrap gap-1 mt-2">
{variables.filter(v => v.includes('_url')).map((variable) => (
<code
key={variable}
className="text-xs bg-muted px-2 py-1 rounded cursor-pointer hover:bg-muted/80"
onClick={() => setButtonHref(buttonHref + `{${variable}}`)}
>
{`{${variable}}`}
</code>
))}
</div>
)}
</div>
<div className="space-y-2">
<Label htmlFor="btn-style">{__('Button Style')}</Label>
<Select value={buttonStyle} onValueChange={(value: 'solid' | 'outline') => setButtonStyle(value)}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="solid">{__('Solid (Primary)')}</SelectItem>
<SelectItem value="outline">{__('Outline (Secondary)')}</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setButtonDialogOpen(false)}>