Enhance bootcamp with rich text editor, curriculum management, and video toggle
Phase 1: Rich Text Editor with Code Syntax Highlighting - Add TipTap CodeBlock extension with lowlight for syntax highlighting - Support multiple languages (JavaScript, TypeScript, Python, Java, C++, HTML, CSS, JSON) - Add copy-to-clipboard button on code blocks - Add line numbers display with CSS - Replace textarea with RichTextEditor in CurriculumEditor - Add DOMPurify sanitization in Bootcamp display - Add dark theme syntax highlighting styles Phase 2: Admin Curriculum Management Page - Create dedicated ProductCurriculum page at /admin/products/:id/curriculum - Three-column layout: Modules (3) | Lessons (5) | Editor (4) - Full-page UX with drag-and-drop reordering - Add "Manage Curriculum" button for bootcamp products in AdminProducts - Breadcrumb navigation back to products Phase 3: Product-Level Video Source Toggle - Add youtube_url and embed_code columns to bootcamp_lessons table - Add video_source and video_source_config columns to products table - Update ProductCurriculum with separate YouTube URL and Embed Code fields - Create smart VideoPlayer component in Bootcamp.tsx - Support YouTube ↔ Embed switching with smart fallback - Show "Konten tidak tersedia" warning when no video configured - Maintain backward compatibility with existing video_url field 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
dwindown
107
package-lock.json
generated
107
package-lock.json
generated
@@ -38,6 +38,7 @@
|
|||||||
"@radix-ui/react-tooltip": "^1.2.7",
|
"@radix-ui/react-tooltip": "^1.2.7",
|
||||||
"@supabase/supabase-js": "^2.88.0",
|
"@supabase/supabase-js": "^2.88.0",
|
||||||
"@tanstack/react-query": "^5.83.0",
|
"@tanstack/react-query": "^5.83.0",
|
||||||
|
"@tiptap/extension-code-block-lowlight": "^3.14.0",
|
||||||
"@tiptap/extension-image": "^3.13.0",
|
"@tiptap/extension-image": "^3.13.0",
|
||||||
"@tiptap/extension-link": "^3.13.0",
|
"@tiptap/extension-link": "^3.13.0",
|
||||||
"@tiptap/extension-placeholder": "^3.13.0",
|
"@tiptap/extension-placeholder": "^3.13.0",
|
||||||
@@ -52,8 +53,10 @@
|
|||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"cmdk": "^1.1.1",
|
"cmdk": "^1.1.1",
|
||||||
"date-fns": "^3.6.0",
|
"date-fns": "^3.6.0",
|
||||||
|
"dompurify": "^3.3.1",
|
||||||
"embla-carousel-react": "^8.6.0",
|
"embla-carousel-react": "^8.6.0",
|
||||||
"input-otp": "^1.4.2",
|
"input-otp": "^1.4.2",
|
||||||
|
"lowlight": "^3.3.0",
|
||||||
"lucide-react": "^0.462.0",
|
"lucide-react": "^0.462.0",
|
||||||
"next-themes": "^0.3.0",
|
"next-themes": "^0.3.0",
|
||||||
"qrcode.react": "^4.2.0",
|
"qrcode.react": "^4.2.0",
|
||||||
@@ -2959,17 +2962,34 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@tiptap/extension-code-block": {
|
"node_modules/@tiptap/extension-code-block": {
|
||||||
"version": "3.13.0",
|
"version": "3.14.0",
|
||||||
"resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-3.13.0.tgz",
|
"resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-3.14.0.tgz",
|
||||||
"integrity": "sha512-kIwfQ4iqootsWg9e74iYJK54/YMIj6ahUxEltjZRML5z/h4gTDcQt2eTpnEC8yjDjHeUVOR94zH9auCySyk9CQ==",
|
"integrity": "sha512-hRSdIhhm3Q9JBMQdKaifRVFnAa4sG+M7l1QcTKR3VSYVy2/oR0U+aiOifi5OvMRBUwhaR71Ro+cMT9FH9s26Kg==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"funding": {
|
"funding": {
|
||||||
"type": "github",
|
"type": "github",
|
||||||
"url": "https://github.com/sponsors/ueberdosis"
|
"url": "https://github.com/sponsors/ueberdosis"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@tiptap/core": "^3.13.0",
|
"@tiptap/core": "^3.14.0",
|
||||||
"@tiptap/pm": "^3.13.0"
|
"@tiptap/pm": "^3.14.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@tiptap/extension-code-block-lowlight": {
|
||||||
|
"version": "3.14.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@tiptap/extension-code-block-lowlight/-/extension-code-block-lowlight-3.14.0.tgz",
|
||||||
|
"integrity": "sha512-vkiDvPZUadrjAGNzvJYYXl5R+U1XmGALSbm+VlrGCR7iXHgYaMHdkqxHwGZMSqtsF2szPEqcAzLZShlAKl+AkA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"funding": {
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/ueberdosis"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@tiptap/core": "^3.14.0",
|
||||||
|
"@tiptap/extension-code-block": "^3.14.0",
|
||||||
|
"@tiptap/pm": "^3.14.0",
|
||||||
|
"highlight.js": "^11",
|
||||||
|
"lowlight": "^2 || ^3"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@tiptap/extension-document": {
|
"node_modules/@tiptap/extension-document": {
|
||||||
@@ -3471,6 +3491,15 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/hast": {
|
||||||
|
"version": "3.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
|
||||||
|
"integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/unist": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@types/json-schema": {
|
"node_modules/@types/json-schema": {
|
||||||
"version": "7.0.15",
|
"version": "7.0.15",
|
||||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
|
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
|
||||||
@@ -3540,6 +3569,19 @@
|
|||||||
"@types/react": "^18.0.0"
|
"@types/react": "^18.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/trusted-types": {
|
||||||
|
"version": "2.0.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
|
||||||
|
"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"node_modules/@types/unist": {
|
||||||
|
"version": "3.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
|
||||||
|
"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/@types/use-sync-external-store": {
|
"node_modules/@types/use-sync-external-store": {
|
||||||
"version": "0.0.6",
|
"version": "0.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
|
||||||
@@ -4411,12 +4453,34 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/dequal": {
|
||||||
|
"version": "2.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
|
||||||
|
"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/detect-node-es": {
|
"node_modules/detect-node-es": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
|
||||||
"integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
|
"integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/devlop": {
|
||||||
|
"version": "1.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
|
||||||
|
"integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"dequal": "^2.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/wooorm"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/didyoumean": {
|
"node_modules/didyoumean": {
|
||||||
"version": "1.2.2",
|
"version": "1.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
|
||||||
@@ -4439,6 +4503,15 @@
|
|||||||
"csstype": "^3.0.2"
|
"csstype": "^3.0.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/dompurify": {
|
||||||
|
"version": "3.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.1.tgz",
|
||||||
|
"integrity": "sha512-qkdCKzLNtrgPFP1Vo+98FRzJnBRGe4ffyCea9IwHB1fyxPOeNTHpLKYGd4Uk9xvNoH0ZoOjwZxNptyMwqrId1Q==",
|
||||||
|
"license": "(MPL-2.0 OR Apache-2.0)",
|
||||||
|
"optionalDependencies": {
|
||||||
|
"@types/trusted-types": "^2.0.7"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/eastasianwidth": {
|
"node_modules/eastasianwidth": {
|
||||||
"version": "0.2.0",
|
"version": "0.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
|
||||||
@@ -5033,6 +5106,15 @@
|
|||||||
"node": ">= 0.4"
|
"node": ">= 0.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/highlight.js": {
|
||||||
|
"version": "11.11.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
|
||||||
|
"integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
|
||||||
|
"license": "BSD-3-Clause",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/iceberg-js": {
|
"node_modules/iceberg-js": {
|
||||||
"version": "0.8.1",
|
"version": "0.8.1",
|
||||||
"resolved": "https://registry.npmjs.org/iceberg-js/-/iceberg-js-0.8.1.tgz",
|
"resolved": "https://registry.npmjs.org/iceberg-js/-/iceberg-js-0.8.1.tgz",
|
||||||
@@ -5790,6 +5872,21 @@
|
|||||||
"@esbuild/win32-x64": "0.25.0"
|
"@esbuild/win32-x64": "0.25.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/lowlight": {
|
||||||
|
"version": "3.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lowlight/-/lowlight-3.3.0.tgz",
|
||||||
|
"integrity": "sha512-0JNhgFoPvP6U6lE/UdVsSq99tn6DhjjpAj5MxG49ewd2mOBVtwWYIT8ClyABhq198aXXODMU6Ox8DrGy/CpTZQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/hast": "^3.0.0",
|
||||||
|
"devlop": "^1.0.0",
|
||||||
|
"highlight.js": "~11.11.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/wooorm"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/lru-cache": {
|
"node_modules/lru-cache": {
|
||||||
"version": "10.4.3",
|
"version": "10.4.3",
|
||||||
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
|
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
|
||||||
|
|||||||
@@ -41,6 +41,7 @@
|
|||||||
"@radix-ui/react-tooltip": "^1.2.7",
|
"@radix-ui/react-tooltip": "^1.2.7",
|
||||||
"@supabase/supabase-js": "^2.88.0",
|
"@supabase/supabase-js": "^2.88.0",
|
||||||
"@tanstack/react-query": "^5.83.0",
|
"@tanstack/react-query": "^5.83.0",
|
||||||
|
"@tiptap/extension-code-block-lowlight": "^3.14.0",
|
||||||
"@tiptap/extension-image": "^3.13.0",
|
"@tiptap/extension-image": "^3.13.0",
|
||||||
"@tiptap/extension-link": "^3.13.0",
|
"@tiptap/extension-link": "^3.13.0",
|
||||||
"@tiptap/extension-placeholder": "^3.13.0",
|
"@tiptap/extension-placeholder": "^3.13.0",
|
||||||
@@ -55,8 +56,10 @@
|
|||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"cmdk": "^1.1.1",
|
"cmdk": "^1.1.1",
|
||||||
"date-fns": "^3.6.0",
|
"date-fns": "^3.6.0",
|
||||||
|
"dompurify": "^3.3.1",
|
||||||
"embla-carousel-react": "^8.6.0",
|
"embla-carousel-react": "^8.6.0",
|
||||||
"input-otp": "^1.4.2",
|
"input-otp": "^1.4.2",
|
||||||
|
"lowlight": "^3.3.0",
|
||||||
"lucide-react": "^0.462.0",
|
"lucide-react": "^0.462.0",
|
||||||
"next-themes": "^0.3.0",
|
"next-themes": "^0.3.0",
|
||||||
"qrcode.react": "^4.2.0",
|
"qrcode.react": "^4.2.0",
|
||||||
|
|||||||
@@ -37,6 +37,7 @@ import AdminEvents from "./pages/admin/AdminEvents";
|
|||||||
import AdminSettings from "./pages/admin/AdminSettings";
|
import AdminSettings from "./pages/admin/AdminSettings";
|
||||||
import AdminConsulting from "./pages/admin/AdminConsulting";
|
import AdminConsulting from "./pages/admin/AdminConsulting";
|
||||||
import AdminReviews from "./pages/admin/AdminReviews";
|
import AdminReviews from "./pages/admin/AdminReviews";
|
||||||
|
import ProductCurriculum from "./pages/admin/ProductCurriculum";
|
||||||
|
|
||||||
const queryClient = new QueryClient();
|
const queryClient = new QueryClient();
|
||||||
|
|
||||||
@@ -73,6 +74,7 @@ const App = () => (
|
|||||||
{/* Admin routes */}
|
{/* Admin routes */}
|
||||||
<Route path="/admin" element={<AdminDashboard />} />
|
<Route path="/admin" element={<AdminDashboard />} />
|
||||||
<Route path="/admin/products" element={<AdminProducts />} />
|
<Route path="/admin/products" element={<AdminProducts />} />
|
||||||
|
<Route path="/admin/products/:id/curriculum" element={<ProductCurriculum />} />
|
||||||
<Route path="/admin/bootcamp" element={<AdminBootcamp />} />
|
<Route path="/admin/bootcamp" element={<AdminBootcamp />} />
|
||||||
<Route path="/admin/orders" element={<AdminOrders />} />
|
<Route path="/admin/orders" element={<AdminOrders />} />
|
||||||
<Route path="/admin/members" element={<AdminMembers />} />
|
<Route path="/admin/members" element={<AdminMembers />} />
|
||||||
|
|||||||
@@ -4,12 +4,13 @@ import Link from '@tiptap/extension-link';
|
|||||||
import Image from '@tiptap/extension-image';
|
import Image from '@tiptap/extension-image';
|
||||||
import Placeholder from '@tiptap/extension-placeholder';
|
import Placeholder from '@tiptap/extension-placeholder';
|
||||||
import TextAlign from '@tiptap/extension-text-align';
|
import TextAlign from '@tiptap/extension-text-align';
|
||||||
|
import CodeBlock from '@tiptap/extension-code-block';
|
||||||
import { Node } from '@tiptap/core';
|
import { Node } from '@tiptap/core';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import {
|
import {
|
||||||
Bold, Italic, List, ListOrdered, Quote, Link as LinkIcon,
|
Bold, Italic, List, ListOrdered, Quote, Link as LinkIcon,
|
||||||
Image as ImageIcon, Heading1, Heading2, Undo, Redo,
|
Image as ImageIcon, Heading1, Heading2, Undo, Redo,
|
||||||
Maximize2, Minimize2, MousePointer, Square, AlignLeft, AlignCenter, AlignRight, AlignJustify, MoreVertical, Minus
|
Maximize2, Minimize2, MousePointer, Square, AlignLeft, AlignCenter, AlignRight, AlignJustify, MoreVertical, Minus, Code, Copy, Check
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { useCallback, useEffect, useState } from 'react';
|
import { useCallback, useEffect, useState } from 'react';
|
||||||
@@ -18,6 +19,38 @@ import { toast } from '@/hooks/use-toast';
|
|||||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { common, createLowlight } from 'lowlight';
|
||||||
|
|
||||||
|
// Register common languages for syntax highlighting
|
||||||
|
const lowlight = createLowlight(common);
|
||||||
|
|
||||||
|
// Code Block Component with Copy Button
|
||||||
|
const CodeBlockWithCopy = ({ node }: { node: any }) => {
|
||||||
|
const [copied, setCopied] = useState(false);
|
||||||
|
const code = node.textContent;
|
||||||
|
|
||||||
|
const handleCopy = async () => {
|
||||||
|
await navigator.clipboard.writeText(code);
|
||||||
|
setCopied(true);
|
||||||
|
setTimeout(() => setCopied(false), 2000);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative group">
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="ghost"
|
||||||
|
className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity z-10 h-7 px-2"
|
||||||
|
onClick={handleCopy}
|
||||||
|
>
|
||||||
|
{copied ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
|
||||||
|
</Button>
|
||||||
|
<pre className="line-numbers">
|
||||||
|
<code>{code}</code>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
interface RichTextEditorProps {
|
interface RichTextEditorProps {
|
||||||
content: string;
|
content: string;
|
||||||
@@ -249,6 +282,20 @@ export function RichTextEditor({ content, onChange, placeholder = 'Tulis konten.
|
|||||||
levels: [1, 2, 3],
|
levels: [1, 2, 3],
|
||||||
},
|
},
|
||||||
horizontalRule: true,
|
horizontalRule: true,
|
||||||
|
codeBlock: false, // Disable default code block to use custom one
|
||||||
|
}),
|
||||||
|
CodeBlock.configure({
|
||||||
|
lowlight,
|
||||||
|
defaultLanguage: 'text',
|
||||||
|
HTMLAttributes: {
|
||||||
|
class: 'code-block-wrapper',
|
||||||
|
},
|
||||||
|
}).extend({
|
||||||
|
addKeyboardShortcuts() {
|
||||||
|
return {
|
||||||
|
'Mod-Shift-c': () => this.editor.commands.toggleCodeBlock(),
|
||||||
|
};
|
||||||
|
},
|
||||||
}),
|
}),
|
||||||
TextAlign.configure({
|
TextAlign.configure({
|
||||||
types: ['heading', 'paragraph'],
|
types: ['heading', 'paragraph'],
|
||||||
@@ -516,6 +563,16 @@ export function RichTextEditor({ content, onChange, placeholder = 'Tulis konten.
|
|||||||
>
|
>
|
||||||
<Quote className="w-4 h-4" />
|
<Quote className="w-4 h-4" />
|
||||||
</Button>
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
|
||||||
|
className={editor.isActive('codeBlock') ? 'bg-primary text-primary-foreground' : ''}
|
||||||
|
title="Code Block (Ctrl+Shift+C)"
|
||||||
|
>
|
||||||
|
<Code className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/u
|
|||||||
import { toast } from '@/hooks/use-toast';
|
import { toast } from '@/hooks/use-toast';
|
||||||
import { Plus, Pencil, Trash2, ChevronUp, ChevronDown, GripVertical } from 'lucide-react';
|
import { Plus, Pencil, Trash2, ChevronUp, ChevronDown, GripVertical } from 'lucide-react';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
import { RichTextEditor } from '@/components/RichTextEditor';
|
||||||
|
|
||||||
interface Module {
|
interface Module {
|
||||||
id: string;
|
id: string;
|
||||||
@@ -442,14 +443,16 @@ export function CurriculumEditor({ productId }: CurriculumEditorProps) {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Label>Content (HTML)</Label>
|
<Label>Content</Label>
|
||||||
<Textarea
|
<RichTextEditor
|
||||||
value={lessonForm.content}
|
content={lessonForm.content}
|
||||||
onChange={(e) => setLessonForm({ ...lessonForm, content: e.target.value })}
|
onChange={(html) => setLessonForm({ ...lessonForm, content: html })}
|
||||||
placeholder="Lesson content..."
|
placeholder="Write your lesson content here... Use code blocks for syntax highlighting."
|
||||||
rows={6}
|
className="min-h-[400px]"
|
||||||
className="border-2 font-mono text-sm"
|
|
||||||
/>
|
/>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Supports rich text formatting, code blocks with syntax highlighting, images, and more.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Label>Release Date (optional)</Label>
|
<Label>Release Date (optional)</Label>
|
||||||
|
|||||||
156
src/index.css
156
src/index.css
@@ -226,4 +226,160 @@ All colors MUST be HSL.
|
|||||||
.prose pre code {
|
.prose pre code {
|
||||||
@apply bg-transparent p-0;
|
@apply bg-transparent p-0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Code Blocks with Syntax Highlighting */
|
||||||
|
.ProseMirror {
|
||||||
|
/* Code block wrapper */
|
||||||
|
.code-block-wrapper {
|
||||||
|
@apply relative my-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pre element styling */
|
||||||
|
pre {
|
||||||
|
@apply bg-slate-900 text-slate-50 rounded-lg p-4 overflow-x-auto;
|
||||||
|
font-family: 'Space Mono', ui-monospace, monospace;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inline code styling */
|
||||||
|
code:not(pre code) {
|
||||||
|
@apply bg-muted px-1.5 py-0.5 rounded text-sm font-mono text-red-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code inside pre blocks */
|
||||||
|
pre code {
|
||||||
|
@apply bg-transparent p-0 text-slate-50;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Line numbers for code blocks */
|
||||||
|
.ProseMirror pre.line-numbers {
|
||||||
|
counter-reset: line;
|
||||||
|
padding-left: 3.5em;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ProseMirror pre.line-numbers .line {
|
||||||
|
counter-increment: line;
|
||||||
|
padding-left: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ProseMirror pre.line-numbers .line::before {
|
||||||
|
content: counter(line);
|
||||||
|
display: inline-block;
|
||||||
|
width: 2.5em;
|
||||||
|
margin-right: 1em;
|
||||||
|
text-align: right;
|
||||||
|
color: #64748b;
|
||||||
|
position: absolute;
|
||||||
|
left: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Syntax highlighting colors (dark theme) */
|
||||||
|
.hljs {
|
||||||
|
color: #e2e8f0;
|
||||||
|
background: #0f172a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-comment,
|
||||||
|
.hljs-quote {
|
||||||
|
color: #64748b;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-keyword,
|
||||||
|
.hljs-selector-tag,
|
||||||
|
.hljs-literal,
|
||||||
|
.hljs-type {
|
||||||
|
color: #c084fc;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-string,
|
||||||
|
.hljs-title,
|
||||||
|
.hljs-name {
|
||||||
|
color: #86efac;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-number,
|
||||||
|
.hljs-symbol {
|
||||||
|
color: #fcd34d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-attr,
|
||||||
|
.hljs-variable,
|
||||||
|
.hljs-template-variable {
|
||||||
|
color: #38bdf8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-built_in,
|
||||||
|
.hljs-builtin-name {
|
||||||
|
color: #f472b6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-function {
|
||||||
|
color: #60a5fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-class .hljs-title {
|
||||||
|
color: #fbbf24;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-tag {
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-regexp {
|
||||||
|
color: #a78bfa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-link {
|
||||||
|
color: #60a5fa;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-meta,
|
||||||
|
.hljs-selector-attr,
|
||||||
|
.hljs-selector-pseudo {
|
||||||
|
color: #818cf8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-deletion {
|
||||||
|
background: #fecaca;
|
||||||
|
color: #991b1b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-addition {
|
||||||
|
background: #bbf7d0;
|
||||||
|
color: #166534;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-emphasis {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Bootcamp content display styling */
|
||||||
|
.prose pre {
|
||||||
|
@apply bg-slate-900 text-slate-50 rounded-lg p-4 overflow-x-auto my-4;
|
||||||
|
font-family: 'Space Mono', ui-monospace, monospace;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose pre code {
|
||||||
|
@apply bg-transparent p-0 text-slate-50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose code:not(pre code) {
|
||||||
|
@apply bg-red-50 text-red-600 px-1.5 py-0.5 rounded text-sm font-mono;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose img {
|
||||||
|
@apply rounded-lg my-4;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -12,11 +12,13 @@ import { ChevronLeft, ChevronRight, Check, Play, BookOpen, Clock, Menu, Star, Ch
|
|||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
|
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
|
||||||
import { ReviewModal } from '@/components/reviews/ReviewModal';
|
import { ReviewModal } from '@/components/reviews/ReviewModal';
|
||||||
|
import DOMPurify from 'dompurify';
|
||||||
|
|
||||||
interface Product {
|
interface Product {
|
||||||
id: string;
|
id: string;
|
||||||
title: string;
|
title: string;
|
||||||
slug: string;
|
slug: string;
|
||||||
|
video_source?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Module {
|
interface Module {
|
||||||
@@ -31,6 +33,8 @@ interface Lesson {
|
|||||||
title: string;
|
title: string;
|
||||||
content: string | null;
|
content: string | null;
|
||||||
video_url: string | null;
|
video_url: string | null;
|
||||||
|
youtube_url: string | null;
|
||||||
|
embed_code: string | null;
|
||||||
duration_seconds: number | null;
|
duration_seconds: number | null;
|
||||||
position: number;
|
position: number;
|
||||||
release_at: string | null;
|
release_at: string | null;
|
||||||
@@ -76,7 +80,7 @@ export default function Bootcamp() {
|
|||||||
const checkAccessAndFetch = async () => {
|
const checkAccessAndFetch = async () => {
|
||||||
const { data: productData, error: productError } = await supabase
|
const { data: productData, error: productError } = await supabase
|
||||||
.from('products')
|
.from('products')
|
||||||
.select('id, title, slug')
|
.select('id, title, slug, video_source')
|
||||||
.eq('slug', slug)
|
.eq('slug', slug)
|
||||||
.eq('type', 'bootcamp')
|
.eq('type', 'bootcamp')
|
||||||
.maybeSingle();
|
.maybeSingle();
|
||||||
@@ -113,6 +117,8 @@ export default function Bootcamp() {
|
|||||||
title,
|
title,
|
||||||
content,
|
content,
|
||||||
video_url,
|
video_url,
|
||||||
|
youtube_url,
|
||||||
|
embed_code,
|
||||||
duration_seconds,
|
duration_seconds,
|
||||||
position,
|
position,
|
||||||
release_at
|
release_at
|
||||||
@@ -230,12 +236,93 @@ export default function Bootcamp() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const getVideoEmbed = (url: string) => {
|
const getYouTubeEmbedUrl = (url: string): string => {
|
||||||
const youtubeMatch = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([^&\s]+)/);
|
const match = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([^&\s]+)/);
|
||||||
if (youtubeMatch) return `https://www.youtube.com/embed/${youtubeMatch[1]}`;
|
return match ? `https://www.youtube.com/embed/${match[1]}` : url;
|
||||||
const vimeoMatch = url.match(/vimeo\.com\/(\d+)/);
|
};
|
||||||
if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}`;
|
|
||||||
return url;
|
const VideoPlayer = ({ lesson }: { lesson: Lesson }) => {
|
||||||
|
const activeSource = product?.video_source || 'youtube';
|
||||||
|
|
||||||
|
// Get video based on product's active source
|
||||||
|
const getVideoSource = () => {
|
||||||
|
if (activeSource === 'youtube') {
|
||||||
|
if (lesson.youtube_url) {
|
||||||
|
return {
|
||||||
|
type: 'youtube',
|
||||||
|
url: lesson.youtube_url,
|
||||||
|
embedUrl: getYouTubeEmbedUrl(lesson.youtube_url)
|
||||||
|
};
|
||||||
|
} else if (lesson.video_url) {
|
||||||
|
// Fallback to old video_url for backward compatibility
|
||||||
|
return {
|
||||||
|
type: 'youtube',
|
||||||
|
url: lesson.video_url,
|
||||||
|
embedUrl: getYouTubeEmbedUrl(lesson.video_url)
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
// Fallback to embed if YouTube not available
|
||||||
|
return lesson.embed_code ? {
|
||||||
|
type: 'embed',
|
||||||
|
html: lesson.embed_code
|
||||||
|
} : null;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (lesson.embed_code) {
|
||||||
|
return {
|
||||||
|
type: 'embed',
|
||||||
|
html: lesson.embed_code
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
// Fallback to YouTube if embed not available
|
||||||
|
return lesson.youtube_url ? {
|
||||||
|
type: 'youtube',
|
||||||
|
url: lesson.youtube_url,
|
||||||
|
embedUrl: getYouTubeEmbedUrl(lesson.youtube_url)
|
||||||
|
} : lesson.video_url ? {
|
||||||
|
type: 'youtube',
|
||||||
|
url: lesson.video_url,
|
||||||
|
embedUrl: getYouTubeEmbedUrl(lesson.video_url)
|
||||||
|
} : null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const video = getVideoSource();
|
||||||
|
|
||||||
|
// Show warning if no video available
|
||||||
|
if (!video) {
|
||||||
|
return (
|
||||||
|
<Card className="border-2 border-destructive bg-destructive/10 mb-6">
|
||||||
|
<CardContent className="py-12 text-center">
|
||||||
|
<p className="text-destructive font-medium">Konten tidak tersedia</p>
|
||||||
|
<p className="text-sm text-muted-foreground mt-1">Video belum dikonfigurasi untuk pelajaran ini.</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Render based on video type
|
||||||
|
if (video.type === 'embed') {
|
||||||
|
return (
|
||||||
|
<div className="aspect-video bg-muted rounded-none overflow-hidden mb-6 border-2 border-border">
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: video.html }} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// YouTube or other URL-based videos
|
||||||
|
return (
|
||||||
|
<div className="aspect-video bg-muted rounded-none overflow-hidden mb-6 border-2 border-border">
|
||||||
|
<iframe
|
||||||
|
src={video.embedUrl}
|
||||||
|
className="w-full h-full"
|
||||||
|
allowFullScreen
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
|
title={lesson.title}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const completedCount = progress.length;
|
const completedCount = progress.length;
|
||||||
@@ -273,7 +360,7 @@ export default function Bootcamp() {
|
|||||||
>
|
>
|
||||||
{isCompleted ? (
|
{isCompleted ? (
|
||||||
<Check className="w-4 h-4 shrink-0 text-accent" />
|
<Check className="w-4 h-4 shrink-0 text-accent" />
|
||||||
) : lesson.video_url ? (
|
) : lesson.video_url || lesson.youtube_url || lesson.embed_code ? (
|
||||||
<Play className="w-4 h-4 shrink-0" />
|
<Play className="w-4 h-4 shrink-0" />
|
||||||
) : (
|
) : (
|
||||||
<BookOpen className="w-4 h-4 shrink-0" />
|
<BookOpen className="w-4 h-4 shrink-0" />
|
||||||
@@ -382,23 +469,23 @@ export default function Bootcamp() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{selectedLesson.video_url && (
|
<VideoPlayer lesson={selectedLesson} />
|
||||||
<div className="aspect-video bg-muted rounded-none overflow-hidden mb-6 border-2 border-border">
|
|
||||||
<iframe
|
|
||||||
src={getVideoEmbed(selectedLesson.video_url)}
|
|
||||||
className="w-full h-full"
|
|
||||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
||||||
allowFullScreen
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{selectedLesson.content && (
|
{selectedLesson.content && (
|
||||||
<Card className="border-2 border-border mb-6">
|
<Card className="border-2 border-border mb-6">
|
||||||
<CardContent className="pt-6">
|
<CardContent className="pt-6">
|
||||||
<div
|
<div
|
||||||
className="prose max-w-none"
|
className="prose prose-slate max-w-none"
|
||||||
dangerouslySetInnerHTML={{ __html: selectedLesson.content }}
|
dangerouslySetInnerHTML={{
|
||||||
|
__html: DOMPurify.sanitize(selectedLesson.content, {
|
||||||
|
ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 's', 'a', 'ul', 'ol', 'li',
|
||||||
|
'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'code', 'pre',
|
||||||
|
'img', 'div', 'span', 'iframe', 'table', 'thead', 'tbody', 'tr', 'td', 'th'],
|
||||||
|
ALLOWED_ATTR: ['href', 'src', 'alt', 'width', 'height', 'class', 'style',
|
||||||
|
'target', 'rel', 'title', 'id', 'data-*'],
|
||||||
|
ALLOW_DATA_ATTR: true
|
||||||
|
})
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@
|
|||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
import { toast } from '@/hooks/use-toast';
|
import { toast } from '@/hooks/use-toast';
|
||||||
import { Skeleton } from '@/components/ui/skeleton';
|
import { Skeleton } from '@/components/ui/skeleton';
|
||||||
import { Plus, Pencil, Trash2, Search, X } from 'lucide-react';
|
import { Plus, Pencil, Trash2, Search, X, BookOpen } from 'lucide-react';
|
||||||
import { CurriculumEditor } from '@/components/admin/CurriculumEditor';
|
import { CurriculumEditor } from '@/components/admin/CurriculumEditor';
|
||||||
import { RichTextEditor } from '@/components/RichTextEditor';
|
import { RichTextEditor } from '@/components/RichTextEditor';
|
||||||
import { formatIDR } from '@/lib/format';
|
import { formatIDR } from '@/lib/format';
|
||||||
@@ -315,6 +315,17 @@ export default function AdminProducts() {
|
|||||||
</span>
|
</span>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell className="text-right">
|
<TableCell className="text-right">
|
||||||
|
{product.type === 'bootcamp' && (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => navigate(`/admin/products/${product.id}/curriculum`)}
|
||||||
|
className="mr-1"
|
||||||
|
>
|
||||||
|
<BookOpen className="w-4 h-4 mr-1" />
|
||||||
|
Curriculum
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
<Button variant="ghost" size="sm" onClick={() => handleEdit(product)}>
|
<Button variant="ghost" size="sm" onClick={() => handleEdit(product)}>
|
||||||
<Pencil className="w-4 h-4" />
|
<Pencil className="w-4 h-4" />
|
||||||
</Button>
|
</Button>
|
||||||
@@ -349,6 +360,15 @@ export default function AdminProducts() {
|
|||||||
<p className="text-sm text-muted-foreground capitalize">{product.type}</p>
|
<p className="text-sm text-muted-foreground capitalize">{product.type}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex gap-1 shrink-0">
|
<div className="flex gap-1 shrink-0">
|
||||||
|
{product.type === 'bootcamp' && (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => navigate(`/admin/products/${product.id}/curriculum`)}
|
||||||
|
>
|
||||||
|
<BookOpen className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
<Button variant="ghost" size="sm" onClick={() => handleEdit(product)}>
|
<Button variant="ghost" size="sm" onClick={() => handleEdit(product)}>
|
||||||
<Pencil className="w-4 h-4" />
|
<Pencil className="w-4 h-4" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
614
src/pages/admin/ProductCurriculum.tsx
Normal file
614
src/pages/admin/ProductCurriculum.tsx
Normal file
@@ -0,0 +1,614 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { useParams, useNavigate } from 'react-router-dom';
|
||||||
|
import { supabase } from '@/integrations/supabase/client';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { toast } from '@/hooks/use-toast';
|
||||||
|
import { Plus, Pencil, Trash2, ChevronUp, ChevronDown, GripVertical, ArrowLeft, Save, Loader2 } from 'lucide-react';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { RichTextEditor } from '@/components/RichTextEditor';
|
||||||
|
import { AppLayout } from '@/components/AppLayout';
|
||||||
|
|
||||||
|
interface Module {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
position: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Lesson {
|
||||||
|
id: string;
|
||||||
|
module_id: string;
|
||||||
|
title: string;
|
||||||
|
content: string | null;
|
||||||
|
video_url: string | null;
|
||||||
|
youtube_url: string | null;
|
||||||
|
embed_code: string | null;
|
||||||
|
position: number;
|
||||||
|
release_at: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ProductCurriculum() {
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const [product, setProduct] = useState<any>(null);
|
||||||
|
const [modules, setModules] = useState<Module[]>([]);
|
||||||
|
const [lessons, setLessons] = useState<Lesson[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
|
||||||
|
const [selectedModuleId, setSelectedModuleId] = useState<string | null>(null);
|
||||||
|
const [selectedLessonId, setSelectedLessonId] = useState<string | null>(null);
|
||||||
|
const [expandedModules, setExpandedModules] = useState<Set<string>>(new Set());
|
||||||
|
|
||||||
|
// Lesson editing state
|
||||||
|
const [editingLesson, setEditingLesson] = useState<Lesson | null>(null);
|
||||||
|
const [lessonForm, setLessonForm] = useState({
|
||||||
|
module_id: '',
|
||||||
|
title: '',
|
||||||
|
content: '',
|
||||||
|
video_url: '',
|
||||||
|
youtube_url: '',
|
||||||
|
embed_code: '',
|
||||||
|
release_at: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (id) {
|
||||||
|
fetchData();
|
||||||
|
}
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
const fetchData = async () => {
|
||||||
|
if (!id) return;
|
||||||
|
|
||||||
|
const [productRes, modulesRes, lessonsRes] = await Promise.all([
|
||||||
|
supabase.from('products').select('id, title, slug').eq('id', id).single(),
|
||||||
|
supabase.from('bootcamp_modules').select('*').eq('product_id', id).order('position'),
|
||||||
|
supabase.from('bootcamp_lessons').select('*').order('position'),
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (productRes.data) {
|
||||||
|
setProduct(productRes.data);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (modulesRes.data) {
|
||||||
|
setModules(modulesRes.data);
|
||||||
|
setExpandedModules(new Set(modulesRes.data.map(m => m.id)));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (lessonsRes.data) {
|
||||||
|
setLessons(lessonsRes.data);
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getLessonsForModule = (moduleId: string) => {
|
||||||
|
return lessons.filter(l => l.module_id === moduleId).sort((a, b) => a.position - b.position);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSelectedModule = () => {
|
||||||
|
return modules.find(m => m.id === selectedModuleId) || null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSelectedLesson = () => {
|
||||||
|
return lessons.find(l => l.id === selectedLessonId) || null;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Module CRUD
|
||||||
|
const handleAddModule = async () => {
|
||||||
|
if (!id) return;
|
||||||
|
|
||||||
|
const title = prompt('Module title:');
|
||||||
|
if (!title?.trim()) return;
|
||||||
|
|
||||||
|
const maxPosition = modules.length > 0 ? Math.max(...modules.map(m => m.position)) : 0;
|
||||||
|
|
||||||
|
const { error } = await supabase
|
||||||
|
.from('bootcamp_modules')
|
||||||
|
.insert({ product_id: id, title, position: maxPosition + 1 });
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
toast({ title: 'Error', description: 'Failed to create module', variant: 'destructive' });
|
||||||
|
} else {
|
||||||
|
toast({ title: 'Success', description: 'Module created' });
|
||||||
|
fetchData();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEditModule = async (module: Module) => {
|
||||||
|
const title = prompt('Module title:', module.title);
|
||||||
|
if (!title?.trim()) return;
|
||||||
|
|
||||||
|
const { error } = await supabase.from('bootcamp_modules').update({ title }).eq('id', module.id);
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
toast({ title: 'Error', description: 'Failed to update module', variant: 'destructive' });
|
||||||
|
} else {
|
||||||
|
toast({ title: 'Success', description: 'Module updated' });
|
||||||
|
fetchData();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteModule = async (moduleId: string) => {
|
||||||
|
if (!confirm('Delete this module and all its lessons?')) return;
|
||||||
|
|
||||||
|
const { error } = await supabase.from('bootcamp_modules').delete().eq('id', moduleId);
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
toast({ title: 'Error', description: 'Failed to delete module', variant: 'destructive' });
|
||||||
|
} else {
|
||||||
|
toast({ title: 'Success', description: 'Module deleted' });
|
||||||
|
if (selectedModuleId === moduleId) {
|
||||||
|
setSelectedModuleId(null);
|
||||||
|
setSelectedLessonId(null);
|
||||||
|
}
|
||||||
|
fetchData();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const moveModule = async (moduleId: string, direction: 'up' | 'down') => {
|
||||||
|
const index = modules.findIndex(m => m.id === moduleId);
|
||||||
|
if ((direction === 'up' && index === 0) || (direction === 'down' && index === modules.length - 1)) return;
|
||||||
|
|
||||||
|
const swapIndex = direction === 'up' ? index - 1 : index + 1;
|
||||||
|
const currentModule = modules[index];
|
||||||
|
const swapModule = modules[swapIndex];
|
||||||
|
|
||||||
|
await Promise.all([
|
||||||
|
supabase.from('bootcamp_modules').update({ position: swapModule.position }).eq('id', currentModule.id),
|
||||||
|
supabase.from('bootcamp_modules').update({ position: currentModule.position }).eq('id', swapModule.id),
|
||||||
|
]);
|
||||||
|
|
||||||
|
fetchData();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Lesson CRUD
|
||||||
|
const handleAddLesson = (moduleId: string) => {
|
||||||
|
setEditingLesson(null);
|
||||||
|
setLessonForm({
|
||||||
|
module_id: moduleId,
|
||||||
|
title: '',
|
||||||
|
content: '',
|
||||||
|
video_url: '',
|
||||||
|
youtube_url: '',
|
||||||
|
embed_code: '',
|
||||||
|
release_at: '',
|
||||||
|
});
|
||||||
|
setSelectedModuleId(moduleId);
|
||||||
|
setSelectedLessonId('new');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEditLesson = (lesson: Lesson) => {
|
||||||
|
setEditingLesson(lesson);
|
||||||
|
setLessonForm({
|
||||||
|
module_id: lesson.module_id,
|
||||||
|
title: lesson.title,
|
||||||
|
content: lesson.content || '',
|
||||||
|
video_url: lesson.video_url || '',
|
||||||
|
youtube_url: lesson.youtube_url || '',
|
||||||
|
embed_code: lesson.embed_code || '',
|
||||||
|
release_at: lesson.release_at ? lesson.release_at.split('T')[0] : '',
|
||||||
|
});
|
||||||
|
setSelectedModuleId(lesson.module_id);
|
||||||
|
setSelectedLessonId(lesson.id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSaveLesson = async () => {
|
||||||
|
if (!lessonForm.title.trim()) {
|
||||||
|
toast({ title: 'Error', description: 'Lesson title is required', variant: 'destructive' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setSaving(true);
|
||||||
|
|
||||||
|
const lessonData = {
|
||||||
|
module_id: lessonForm.module_id,
|
||||||
|
title: lessonForm.title,
|
||||||
|
content: lessonForm.content || null,
|
||||||
|
video_url: lessonForm.video_url || null,
|
||||||
|
youtube_url: lessonForm.youtube_url || null,
|
||||||
|
embed_code: lessonForm.embed_code || null,
|
||||||
|
release_at: lessonForm.release_at ? new Date(lessonForm.release_at).toISOString() : null,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (editingLesson) {
|
||||||
|
const { error } = await supabase.from('bootcamp_lessons').update(lessonData).eq('id', editingLesson.id);
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
toast({ title: 'Error', description: 'Failed to update lesson', variant: 'destructive' });
|
||||||
|
} else {
|
||||||
|
toast({ title: 'Success', description: 'Lesson updated' });
|
||||||
|
fetchData();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const moduleLessons = getLessonsForModule(lessonForm.module_id);
|
||||||
|
const maxPosition = moduleLessons.length > 0 ? Math.max(...moduleLessons.map(l => l.position)) : 0;
|
||||||
|
|
||||||
|
const { error } = await supabase.from('bootcamp_lessons').insert({ ...lessonData, position: maxPosition + 1 });
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
toast({ title: 'Error', description: 'Failed to create lesson', variant: 'destructive' });
|
||||||
|
} else {
|
||||||
|
toast({ title: 'Success', description: 'Lesson created' });
|
||||||
|
fetchData();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setSaving(false);
|
||||||
|
setSelectedLessonId(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteLesson = async (lessonId: string) => {
|
||||||
|
if (!confirm('Delete this lesson?')) return;
|
||||||
|
|
||||||
|
const { error } = await supabase.from('bootcamp_lessons').delete().eq('id', lessonId);
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
toast({ title: 'Error', description: 'Failed to delete lesson', variant: 'destructive' });
|
||||||
|
} else {
|
||||||
|
toast({ title: 'Success', description: 'Lesson deleted' });
|
||||||
|
if (selectedLessonId === lessonId) {
|
||||||
|
setSelectedLessonId(null);
|
||||||
|
}
|
||||||
|
fetchData();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const moveLesson = async (lessonId: string, direction: 'up' | 'down') => {
|
||||||
|
const lesson = lessons.find(l => l.id === lessonId);
|
||||||
|
if (!lesson) return;
|
||||||
|
|
||||||
|
const moduleLessons = getLessonsForModule(lesson.module_id);
|
||||||
|
const index = moduleLessons.findIndex(l => l.id === lessonId);
|
||||||
|
|
||||||
|
if ((direction === 'up' && index === 0) || (direction === 'down' && index === moduleLessons.length - 1)) return;
|
||||||
|
|
||||||
|
const swapIndex = direction === 'up' ? index - 1 : index + 1;
|
||||||
|
const swapLesson = moduleLessons[swapIndex];
|
||||||
|
|
||||||
|
await Promise.all([
|
||||||
|
supabase.from('bootcamp_lessons').update({ position: swapLesson.position }).eq('id', lesson.id),
|
||||||
|
supabase.from('bootcamp_lessons').update({ position: lesson.position }).eq('id', swapLesson.id),
|
||||||
|
]);
|
||||||
|
|
||||||
|
fetchData();
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleModule = (moduleId: string) => {
|
||||||
|
const newExpanded = new Set(expandedModules);
|
||||||
|
if (newExpanded.has(moduleId)) {
|
||||||
|
newExpanded.delete(moduleId);
|
||||||
|
} else {
|
||||||
|
newExpanded.add(moduleId);
|
||||||
|
}
|
||||||
|
setExpandedModules(newExpanded);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<AppLayout>
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
<div className="text-center text-muted-foreground">Loading...</div>
|
||||||
|
</div>
|
||||||
|
</AppLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AppLayout>
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
{/* Header with breadcrumb */}
|
||||||
|
<div className="flex items-center gap-4 mb-6">
|
||||||
|
<Button variant="ghost" onClick={() => navigate('/admin/products')}>
|
||||||
|
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||||
|
Back to Products
|
||||||
|
</Button>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold">{product?.title}</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Curriculum Management</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-12 gap-6">
|
||||||
|
{/* Left: Modules List (3 columns) */}
|
||||||
|
<div className="col-span-3">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Modules</CardTitle>
|
||||||
|
<Button size="sm" onClick={handleAddModule} className="w-full">
|
||||||
|
<Plus className="w-4 h-4 mr-2" />
|
||||||
|
Add Module
|
||||||
|
</Button>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-2">
|
||||||
|
{modules.map((module, index) => {
|
||||||
|
const moduleLessons = getLessonsForModule(module.id);
|
||||||
|
const isSelected = selectedModuleId === module.id;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={module.id}
|
||||||
|
className={cn(
|
||||||
|
"p-3 border rounded cursor-pointer transition-colors group",
|
||||||
|
isSelected ? "border-primary bg-primary/5" : "hover:bg-gray-50 border-border"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div
|
||||||
|
className="flex items-center gap-2 flex-1 min-w-0"
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedModuleId(module.id);
|
||||||
|
if (expandedModules.has(module.id)) {
|
||||||
|
toggleModule(module.id);
|
||||||
|
} else {
|
||||||
|
const newExpanded = new Set(expandedModules);
|
||||||
|
newExpanded.add(module.id);
|
||||||
|
setExpandedModules(newExpanded);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<GripVertical className="w-4 h-4 text-muted-foreground shrink-0" />
|
||||||
|
<span className="font-medium truncate">{module.title}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-6 w-6 p-0"
|
||||||
|
onClick={() => moveModule(module.id, 'up')}
|
||||||
|
disabled={index === 0}
|
||||||
|
>
|
||||||
|
<ChevronUp className="w-3 h-3" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-6 w-6 p-0"
|
||||||
|
onClick={() => moveModule(module.id, 'down')}
|
||||||
|
disabled={index === modules.length - 1}
|
||||||
|
>
|
||||||
|
<ChevronDown className="w-3 h-3" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-6 w-6 p-0"
|
||||||
|
onClick={() => handleEditModule(module)}
|
||||||
|
>
|
||||||
|
<Pencil className="w-3 h-3" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-6 w-6 p-0"
|
||||||
|
onClick={() => handleDeleteModule(module.id)}
|
||||||
|
>
|
||||||
|
<Trash2 className="w-3 h-3" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-muted-foreground mt-1 pl-6">
|
||||||
|
{moduleLessons.length} lesson{moduleLessons.length !== 1 ? 's' : ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{modules.length === 0 && (
|
||||||
|
<div className="text-center text-sm text-muted-foreground py-4">
|
||||||
|
No modules yet
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Middle: Lessons List (5 columns) */}
|
||||||
|
<div className="col-span-5">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Lessons</CardTitle>
|
||||||
|
{selectedModuleId && (
|
||||||
|
<Button size="sm" onClick={() => handleAddLesson(selectedModuleId)} className="w-full">
|
||||||
|
<Plus className="w-4 h-4 mr-2" />
|
||||||
|
Add Lesson
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{!selectedModuleId ? (
|
||||||
|
<p className="text-muted-foreground text-center py-8 text-sm">
|
||||||
|
Select a module to view lessons
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{getLessonsForModule(selectedModuleId).map((lesson, index) => {
|
||||||
|
const isSelected = selectedLessonId === lesson.id;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={lesson.id}
|
||||||
|
className={cn(
|
||||||
|
"p-3 border rounded cursor-pointer transition-colors group",
|
||||||
|
isSelected ? "border-primary bg-primary/5" : "hover:bg-gray-50 border-border"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div
|
||||||
|
className="flex-1 min-w-0"
|
||||||
|
onClick={() => handleEditLesson(lesson)}
|
||||||
|
>
|
||||||
|
<p className="font-medium text-sm truncate">{lesson.title}</p>
|
||||||
|
<div className="flex items-center gap-2 mt-1">
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{index + 1}. {lesson.video_url || lesson.youtube_url || lesson.embed_code ? '✓ Video' : 'No video'}
|
||||||
|
</span>
|
||||||
|
{lesson.youtube_url && (
|
||||||
|
<span className="text-xs text-blue-600">YouTube</span>
|
||||||
|
)}
|
||||||
|
{lesson.embed_code && (
|
||||||
|
<span className="text-xs text-purple-600">Embed</span>
|
||||||
|
)}
|
||||||
|
{lesson.content && (
|
||||||
|
<span className="text-xs text-muted-foreground">✓ Content</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-6 w-6 p-0"
|
||||||
|
onClick={() => moveLesson(lesson.id, 'up')}
|
||||||
|
disabled={index === 0}
|
||||||
|
>
|
||||||
|
<ChevronUp className="w-3 h-3" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-6 w-6 p-0"
|
||||||
|
onClick={() => moveLesson(lesson.id, 'down')}
|
||||||
|
disabled={index === getLessonsForModule(selectedModuleId).length - 1}
|
||||||
|
>
|
||||||
|
<ChevronDown className="w-3 h-3" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-6 w-6 p-0"
|
||||||
|
onClick={() => handleDeleteLesson(lesson.id)}
|
||||||
|
>
|
||||||
|
<Trash2 className="w-3 h-3" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{getLessonsForModule(selectedModuleId).length === 0 && (
|
||||||
|
<div className="text-center text-sm text-muted-foreground py-4">
|
||||||
|
No lessons yet
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right: Lesson Editor (4 columns) */}
|
||||||
|
<div className="col-span-4">
|
||||||
|
<Card className="sticky top-4">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Lesson Editor</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{!selectedLessonId ? (
|
||||||
|
<p className="text-muted-foreground text-center py-8 text-sm">
|
||||||
|
Select a lesson to edit
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Title *</Label>
|
||||||
|
<Input
|
||||||
|
value={lessonForm.title}
|
||||||
|
onChange={(e) => setLessonForm({ ...lessonForm, title: e.target.value })}
|
||||||
|
placeholder="Lesson title"
|
||||||
|
className="border-2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>YouTube URL (Primary)</Label>
|
||||||
|
<Input
|
||||||
|
value={lessonForm.youtube_url}
|
||||||
|
onChange={(e) => setLessonForm({ ...lessonForm, youtube_url: e.target.value })}
|
||||||
|
placeholder="https://www.youtube.com/watch?v=..."
|
||||||
|
className="border-2"
|
||||||
|
/>
|
||||||
|
{lessonForm.youtube_url && (
|
||||||
|
<p className="text-xs text-green-600">✓ YouTube configured</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Embed Code (Backup)</Label>
|
||||||
|
<textarea
|
||||||
|
value={lessonForm.embed_code}
|
||||||
|
onChange={(e) => setLessonForm({ ...lessonForm, embed_code: e.target.value })}
|
||||||
|
placeholder="<iframe>...</iframe>"
|
||||||
|
rows={4}
|
||||||
|
className="w-full px-3 py-2 border-2 border-border rounded-md font-mono text-sm"
|
||||||
|
/>
|
||||||
|
{lessonForm.embed_code && (
|
||||||
|
<p className="text-xs text-green-600">✓ Embed code configured</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-3 bg-muted rounded-md">
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
💡 <strong>Tip:</strong> Configure both YouTube URL and embed code for redundancy. Use product settings to toggle between sources.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Content</Label>
|
||||||
|
<RichTextEditor
|
||||||
|
content={lessonForm.content}
|
||||||
|
onChange={(html) => setLessonForm({ ...lessonForm, content: html })}
|
||||||
|
placeholder="Write your lesson content here... Use code blocks for syntax highlighting."
|
||||||
|
className="min-h-[300px]"
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Supports rich text formatting, code blocks with syntax highlighting, images, and more.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Release Date (optional)</Label>
|
||||||
|
<Input
|
||||||
|
type="date"
|
||||||
|
value={lessonForm.release_at}
|
||||||
|
onChange={(e) => setLessonForm({ ...lessonForm, release_at: e.target.value })}
|
||||||
|
className="border-2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button onClick={handleSaveLesson} disabled={saving} className="flex-1">
|
||||||
|
{saving ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||||
|
Saving...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Save className="w-4 h-4 mr-2" />
|
||||||
|
Save Lesson
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setSelectedLessonId(null)}
|
||||||
|
disabled={saving}
|
||||||
|
className="border-2"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AppLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
41
supabase/migrations/20241230_video_source_columns.sql
Normal file
41
supabase/migrations/20241230_video_source_columns.sql
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
-- ============================================
|
||||||
|
-- Add Video Source Columns for YouTube/Embed Toggle
|
||||||
|
-- ============================================
|
||||||
|
-- This migration adds support for dual video sources (YouTube and Embed)
|
||||||
|
-- at the product level, allowing quick switching between sources
|
||||||
|
|
||||||
|
-- Add video source columns to bootcamp_lessons table
|
||||||
|
ALTER TABLE bootcamp_lessons
|
||||||
|
ADD COLUMN IF NOT EXISTS youtube_url TEXT,
|
||||||
|
ADD COLUMN IF NOT EXISTS embed_code TEXT;
|
||||||
|
|
||||||
|
-- Migrate existing video_url to youtube_url
|
||||||
|
UPDATE bootcamp_lessons
|
||||||
|
SET youtube_url = video_url
|
||||||
|
WHERE video_url IS NOT NULL
|
||||||
|
AND youtube_url IS NULL;
|
||||||
|
|
||||||
|
-- Note: Keep old video_url column for backward compatibility
|
||||||
|
-- Can drop after verification if desired
|
||||||
|
|
||||||
|
-- Add video_source column to products table
|
||||||
|
ALTER TABLE products
|
||||||
|
ADD COLUMN IF NOT EXISTS video_source TEXT DEFAULT 'youtube',
|
||||||
|
ADD COLUMN IF NOT EXISTS video_source_config JSONB DEFAULT '{}';
|
||||||
|
|
||||||
|
-- Add constraint to ensure valid sources
|
||||||
|
ALTER TABLE products
|
||||||
|
DROP CONSTRAINT IF EXISTS products_video_source_check;
|
||||||
|
|
||||||
|
ALTER TABLE products
|
||||||
|
ADD CONSTRAINT products_video_source_check
|
||||||
|
CHECK (video_source IN ('youtube', 'embed'));
|
||||||
|
|
||||||
|
-- Create index for faster queries
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_products_video_source ON products(video_source);
|
||||||
|
|
||||||
|
-- Add comments for documentation
|
||||||
|
COMMENT ON COLUMN products.video_source IS 'Active video source for bootcamp lessons: youtube or embed';
|
||||||
|
COMMENT ON COLUMN products.video_source_config IS 'Configuration metadata for video source settings';
|
||||||
|
COMMENT ON COLUMN bootcamp_lessons.youtube_url IS 'YouTube video URL for the lesson';
|
||||||
|
COMMENT ON COLUMN bootcamp_lessons.embed_code IS 'Custom embed code (Adilo, Vimeo, iframe) for the lesson';
|
||||||
Reference in New Issue
Block a user