pxlr-cms 1.0.0

package/templates/clean/pxlr-cms/packages/admin/src/app/content/new/page.tsx

@@ -0,0 +1,424 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '@/lib/api';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { toast } from '@/components/ui/use-toast';
+import { RichTextEditor } from '@/components/editor/rich-text-editor';
+import { MediaPicker } from '@/components/editor/media-picker';
+import { useI18n } from '@/lib/i18n/context';
+import { 
+  ArrowLeft, 
+  Loader2, 
+  Save, 
+  ImageIcon,
+  X,
+  FileText
+} from 'lucide-react';
+import Link from 'next/link';
+
+interface Schema {
+  id: string;
+  name: string;
+  title: string;
+  definition: {
+    fields: Array<{
+      name: string;
+      type: string;
+      title?: string;
+      required?: boolean;
+      description?: string;
+    }>;
+  };
+}
+
+function getPublicUrl(url: string): string {
+  if (!url) return '';
+  return url
+    .replace('http://minio:9000', 'http://localhost:9010')
+    .replace('http://localhost:9000', 'http://localhost:9010');
+}
+
+export default function NewContentPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const queryClient = useQueryClient();
+  const { locale } = useI18n();
+  
+  const preselectedSchema = searchParams.get('schema');
+  const [selectedSchema, setSelectedSchema] = useState<string>(preselectedSchema || '');
+  const [formData, setFormData] = useState<Record<string, any>>({});
+  const [mediaPickerField, setMediaPickerField] = useState<string | null>(null);
+
+  const { data: schemasData, isLoading: schemasLoading } = useQuery({
+    queryKey: ['schemas'],
+    queryFn: () => api.get('/schemas'),
+  });
+
+  const schemas: Schema[] = schemasData?.schemas || [];
+  const currentSchema = schemas.find(s => s.name === selectedSchema);
+
+  const createMutation = useMutation({
+    mutationFn: (data: any) => api.post('/content', data),
+    onSuccess: (response) => {
+      queryClient.invalidateQueries({ queryKey: ['documents'] });
+      toast({ title: locale === 'ru' ? 'Документ создан' : 'Document created' });
+      router.push(`/content/${response.document.id}`);
+    },
+    onError: (error: any) => {
+      toast({ title: locale === 'ru' ? 'Ошибка' : 'Error', description: error.message, variant: 'destructive' });
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedSchema) {
+      toast({ title: locale === 'ru' ? 'Выберите тип контента' : 'Select content type', variant: 'destructive' });
+      return;
+    }
+    createMutation.mutate({
+      schemaName: selectedSchema,
+      data: formData,
+    });
+  };
+
+  const renderField = (field: Schema['definition']['fields'][0]) => {
+    const value = formData[field.name] ?? '';
+
+    switch (field.type) {
+      case 'string':
+        return (
+          <Input
+            value={value}
+            onChange={(e) => setFormData({ ...formData, [field.name]: e.target.value })}
+            placeholder={field.title || field.name}
+            className="text-base"
+          />
+        );
+
+      case 'slug':
+        return (
+          <div className="flex gap-2">
+            <Input
+              value={value}
+              onChange={(e) => setFormData({ 
+                ...formData, 
+                [field.name]: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/-+/g, '-') 
+              })}
+              placeholder="url-slug"
+              className="font-mono text-sm"
+            />
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                const title = formData.title || formData.name || '';
+                const slug = title.toLowerCase()
+                  .replace(/[а-яё]/g, (c: string) => {
+                    const map: Record<string, string> = {
+                      'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd', 'е': 'e', 'ё': 'yo',
+                      'ж': 'zh', 'з': 'z', 'и': 'i', 'й': 'y', 'к': 'k', 'л': 'l', 'м': 'm',
+                      'н': 'n', 'о': 'o', 'п': 'p', 'р': 'r', 'с': 's', 'т': 't', 'у': 'u',
+                      'ф': 'f', 'х': 'h', 'ц': 'ts', 'ч': 'ch', 'ш': 'sh', 'щ': 'sch', 'ъ': '',
+                      'ы': 'y', 'ь': '', 'э': 'e', 'ю': 'yu', 'я': 'ya'
+                    };
+                    return map[c] || c;
+                  })
+                  .replace(/[^a-z0-9]+/g, '-')
+                  .replace(/-+/g, '-')
+                  .replace(/^-|-$/g, '');
+                setFormData({ ...formData, [field.name]: slug });
+              }}
+            >
+              {locale === 'ru' ? 'Сгенерировать' : 'Generate'}
+            </Button>
+          </div>
+        );
+
+      case 'text':
+        return (
+          <textarea
+            className="flex min-h-[120px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring resize-y"
+            value={value}
+            onChange={(e) => setFormData({ ...formData, [field.name]: e.target.value })}
+            placeholder={field.title || field.name}
+          />
+        );
+
+      case 'number':
+        return (
+          <Input
+            type="number"
+            value={value}
+            onChange={(e) => setFormData({ ...formData, [field.name]: parseFloat(e.target.value) || 0 })}
+            className="text-base"
+          />
+        );
+
+      case 'boolean':
+        return (
+          <label className="flex items-center gap-3 cursor-pointer">
+            <div className={`relative w-11 h-6 rounded-full transition-colors ${value ? 'bg-green-500' : 'bg-gray-300'}`}>
+              <div className={`absolute top-0.5 w-5 h-5 rounded-full bg-white shadow transition-transform ${value ? 'translate-x-5' : 'translate-x-0.5'}`} />
+              <input
+                type="checkbox"
+                checked={value || false}
+                onChange={(e) => setFormData({ ...formData, [field.name]: e.target.checked })}
+                className="sr-only"
+              />
+            </div>
+            <span className="text-sm text-muted-foreground">
+              {value ? (locale === 'ru' ? 'Да' : 'Yes') : (locale === 'ru' ? 'Нет' : 'No')}
+            </span>
+          </label>
+        );
+
+      case 'date':
+        return (
+          <Input
+            type="date"
+            value={value ? value.split('T')[0] : ''}
+            onChange={(e) => setFormData({ ...formData, [field.name]: e.target.value })}
+            className="text-base"
+          />
+        );
+
+      case 'datetime':
+        return (
+          <Input
+            type="datetime-local"
+            value={value ? value.slice(0, 16) : ''}
+            onChange={(e) => setFormData({ ...formData, [field.name]: new Date(e.target.value).toISOString() })}
+            className="text-base"
+          />
+        );
+
+      case 'richText':
+        return (
+          <RichTextEditor
+            value={value}
+            onChange={(content) => setFormData({ ...formData, [field.name]: content })}
+            placeholder={locale === 'ru' ? 'Начните писать...' : 'Start writing...'}
+            onImageUpload={() => setMediaPickerField(field.name)}
+          />
+        );
+
+      case 'image':
+        const imageValue = typeof value === 'object' ? value : (value ? { url: value } : null);
+        return (
+          <div className="space-y-3">
+            {imageValue?.url ? (
+              <div className="relative inline-block">
+                <img
+                  src={getPublicUrl(imageValue.url)}
+                  alt={imageValue.alt || ''}
+                  className="max-h-48 rounded-lg border"
+                />
+                <button
+                  type="button"
+                  onClick={() => setFormData({ ...formData, [field.name]: null })}
+                  className="absolute -top-2 -right-2 p-1 bg-red-500 text-white rounded-full hover:bg-red-600"
+                >
+                  <X className="h-4 w-4" />
+                </button>
+              </div>
+            ) : (
+              <button
+                type="button"
+                onClick={() => setMediaPickerField(field.name)}
+                className="flex flex-col items-center justify-center w-full h-40 border-2 border-dashed rounded-lg hover:border-primary hover:bg-muted/50 transition-colors"
+              >
+                <ImageIcon className="h-10 w-10 text-muted-foreground mb-2" />
+                <span className="text-sm text-muted-foreground">
+                  {locale === 'ru' ? 'Нажмите для выбора изображения' : 'Click to select image'}
+                </span>
+              </button>
+            )}
+          </div>
+        );
+
+      case 'url':
+      case 'email':
+        return (
+          <Input
+            type={field.type === 'email' ? 'email' : 'url'}
+            value={value}
+            onChange={(e) => setFormData({ ...formData, [field.name]: e.target.value })}
+            placeholder={field.type === 'email' ? 'email@example.com' : 'https://'}
+            className="text-base"
+          />
+        );
+
+      default:
+        return (
+          <Input
+            value={typeof value === 'object' ? JSON.stringify(value) : value}
+            onChange={(e) => setFormData({ ...formData, [field.name]: e.target.value })}
+            placeholder={field.title || field.name}
+            className="text-base"
+          />
+        );
+    }
+  };
+
+  if (schemasLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      {/* Header */}
+      <div className="flex items-center gap-4 mb-6">
+        <Link href="/content">
+          <Button variant="ghost" size="icon">
+            <ArrowLeft className="h-5 w-5" />
+          </Button>
+        </Link>
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">
+            {locale === 'ru' ? 'Новый документ' : 'New Document'}
+          </h1>
+          {currentSchema && (
+            <p className="text-sm text-muted-foreground mt-1">
+              {currentSchema.title}
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* Schema selector */}
+      {!selectedSchema && schemas.length > 0 && (
+        <div className="rounded-lg border bg-card p-6 mb-6">
+          <h2 className="font-semibold mb-4">
+            {locale === 'ru' ? 'Выберите тип контента' : 'Select Content Type'}
+          </h2>
+          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+            {schemas.map((schema) => (
+              <button
+                key={schema.id}
+                onClick={() => setSelectedSchema(schema.name)}
+                className="flex items-center gap-3 p-4 rounded-lg border hover:border-primary hover:bg-muted/50 transition-colors text-left"
+              >
+                <div className="p-2 rounded-lg bg-primary/10">
+                  <FileText className="h-5 w-5 text-primary" />
+                </div>
+                <div>
+                  <div className="font-medium">{schema.title}</div>
+                  <div className="text-xs text-muted-foreground">
+                    {schema.definition?.fields?.length || 0} {locale === 'ru' ? 'полей' : 'fields'}
+                  </div>
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {schemas.length === 0 && (
+        <div className="rounded-lg border border-dashed p-12 text-center">
+          <FileText className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
+          <h2 className="text-lg font-semibold mb-2">
+            {locale === 'ru' ? 'Нет схем контента' : 'No Content Schemas'}
+          </h2>
+          <p className="text-muted-foreground mb-4">
+            {locale === 'ru' 
+              ? 'Сначала создайте схему контента' 
+              : 'Create a content schema first'}
+          </p>
+          <Link href="/schemas">
+            <Button>{locale === 'ru' ? 'Перейти к схемам' : 'Go to Schemas'}</Button>
+          </Link>
+        </div>
+      )}
+
+      {/* Form */}
+      {selectedSchema && currentSchema && (
+        <form onSubmit={handleSubmit}>
+          <div className="grid grid-cols-3 gap-6">
+            {/* Main content */}
+            <div className="col-span-2 space-y-6">
+              {currentSchema.definition?.fields?.map((field) => (
+                <div key={field.name} className="rounded-lg border bg-card p-5">
+                  <Label className="text-sm font-medium mb-3 block">
+                    {field.title || field.name}
+                    {field.required && <span className="text-red-500 ml-1">*</span>}
+                  </Label>
+                  {field.description && (
+                    <p className="text-xs text-muted-foreground mb-3">{field.description}</p>
+                  )}
+                  {renderField(field)}
+                </div>
+              ))}
+            </div>
+
+            {/* Sidebar */}
+            <div className="space-y-4">
+              <div className="rounded-lg border bg-card p-4 space-y-3">
+                <h3 className="font-medium text-sm">{locale === 'ru' ? 'Действия' : 'Actions'}</h3>
+                <div className="space-y-2">
+                  <Button type="submit" className="w-full" disabled={createMutation.isPending}>
+                    {createMutation.isPending ? (
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    ) : (
+                      <Save className="mr-2 h-4 w-4" />
+                    )}
+                    {locale === 'ru' ? 'Создать' : 'Create'}
+                  </Button>
+                  <Link href="/content" className="block">
+                    <Button type="button" variant="outline" className="w-full">
+                      {locale === 'ru' ? 'Отмена' : 'Cancel'}
+                    </Button>
+                  </Link>
+                </div>
+              </div>
+
+              <div className="rounded-lg border bg-card p-4">
+                <h3 className="font-medium text-sm mb-2">{locale === 'ru' ? 'Тип контента' : 'Content Type'}</h3>
+                <p className="text-sm text-muted-foreground">{currentSchema.title}</p>
+                <Button
+                  type="button"
+                  variant="link"
+                  size="sm"
+                  className="px-0 h-auto"
+                  onClick={() => {
+                    setSelectedSchema('');
+                    setFormData({});
+                  }}
+                >
+                  {locale === 'ru' ? 'Изменить' : 'Change'}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </form>
+      )}
+
+      {/* Media Picker */}
+      <MediaPicker
+        isOpen={!!mediaPickerField}
+        onClose={() => setMediaPickerField(null)}
+        onSelect={(url, file) => {
+          if (mediaPickerField) {
+            const field = currentSchema?.definition?.fields?.find(f => f.name === mediaPickerField);
+            if (field?.type === 'image') {
+              setFormData({ 
+                ...formData, 
+                [mediaPickerField]: { url, alt: file.original_filename } 
+              });
+            }
+          }
+          setMediaPickerField(null);
+        }}
+      />
+    </div>
+  );
+}

package/templates/clean/pxlr-cms/packages/admin/src/app/content/page.tsx

@@ -0,0 +1,191 @@
+'use client';
+
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '@/lib/api';
+import { formatDate } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { toast } from '@/components/ui/use-toast';
+import { Plus, FileText, Trash2, Edit, Loader2, Search } from 'lucide-react';
+import Link from 'next/link';
+
+interface Document {
+  id: string;
+  schema_name: string;
+  schema_title: string;
+  data: Record<string, any>;
+  status: string;
+  locale: string;
+  created_at: string;
+  updated_at: string;
+  created_by_name: string;
+}
+
+export default function ContentPage() {
+  const queryClient = useQueryClient();
+  const [search, setSearch] = useState('');
+  const [selectedSchema, setSelectedSchema] = useState<string>('');
+
+  const { data: schemasData } = useQuery({
+    queryKey: ['schemas'],
+    queryFn: () => api.get('/schemas'),
+  });
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['documents', selectedSchema, search],
+    queryFn: () =>
+      api.get(
+        `/content?${selectedSchema ? `schemaName=${selectedSchema}&` : ''}${search ? `search=${search}&` : ''}limit=50`
+      ),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => api.delete(`/content/${id}`),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['documents'] });
+      toast({ title: 'Document deleted successfully' });
+    },
+    onError: (error: any) => {
+      toast({ title: 'Error', description: error.message, variant: 'destructive' });
+    },
+  });
+
+  const schemas = schemasData?.schemas || [];
+  const documents: Document[] = data?.documents || [];
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">Content</h1>
+          <p className="text-muted-foreground">
+            Manage your content documents
+          </p>
+        </div>
+        {schemas.length > 0 && (
+          <Link href="/content/new">
+            <Button>
+              <Plus className="mr-2 h-4 w-4" />
+              New Document
+            </Button>
+          </Link>
+        )}
+      </div>
+
+      <div className="flex gap-4">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder="Search documents..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-10"
+          />
+        </div>
+        <select
+          value={selectedSchema}
+          onChange={(e) => setSelectedSchema(e.target.value)}
+          className="rounded-md border bg-background px-3 py-2 text-sm"
+        >
+          <option value="">All types</option>
+          {schemas.map((schema: any) => (
+            <option key={schema.name} value={schema.name}>
+              {schema.title}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {schemas.length === 0 ? (
+        <div className="flex flex-col items-center justify-center rounded-lg border border-dashed py-12">
+          <FileText className="h-12 w-12 text-muted-foreground" />
+          <h3 className="mt-4 text-lg font-semibold">No schemas defined</h3>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Create a content schema first before adding documents
+          </p>
+          <Link href="/schemas">
+            <Button className="mt-4">Go to Schemas</Button>
+          </Link>
+        </div>
+      ) : isLoading ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      ) : documents.length === 0 ? (
+        <div className="flex flex-col items-center justify-center rounded-lg border border-dashed py-12">
+          <FileText className="h-12 w-12 text-muted-foreground" />
+          <h3 className="mt-4 text-lg font-semibold">No documents yet</h3>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Create your first document to get started
+          </p>
+        </div>
+      ) : (
+        <div className="rounded-lg border">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b bg-muted/50">
+                <th className="px-4 py-3 text-left text-sm font-medium">Title</th>
+                <th className="px-4 py-3 text-left text-sm font-medium">Type</th>
+                <th className="px-4 py-3 text-left text-sm font-medium">Status</th>
+                <th className="px-4 py-3 text-left text-sm font-medium">Updated</th>
+                <th className="px-4 py-3 text-right text-sm font-medium">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {documents.map((doc) => (
+                <tr key={doc.id} className="border-b">
+                  <td className="px-4 py-3">
+                    <div>
+                      <p className="font-medium">
+                        {doc.data?.title || 'Untitled'}
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        {doc.id.slice(0, 8)}...
+                      </p>
+                    </div>
+                  </td>
+                  <td className="px-4 py-3 text-sm">
+                    {doc.schema_title || doc.schema_name}
+                  </td>
+                  <td className="px-4 py-3">
+                    <span
+                      className={`inline-flex rounded-full px-2 py-1 text-xs font-medium ${
+                        doc.status === 'published'
+                          ? 'bg-green-100 text-green-700'
+                          : doc.status === 'draft'
+                          ? 'bg-yellow-100 text-yellow-700'
+                          : 'bg-gray-100 text-gray-700'
+                      }`}
+                    >
+                      {doc.status}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3 text-sm text-muted-foreground">
+                    {formatDate(doc.updated_at)}
+                  </td>
+                  <td className="px-4 py-3">
+                    <div className="flex justify-end gap-1">
+                      <Link href={`/content/${doc.id}`}>
+                        <Button variant="ghost" size="icon">
+                          <Edit className="h-4 w-4" />
+                        </Button>
+                      </Link>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => deleteMutation.mutate(doc.id)}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}