complete story 5.1 with qa tests
This commit is contained in:
Naser Mansour
parent
30d0d46566
commit
8e3daddb1d
|
|
@ -5,6 +5,7 @@ namespace App\Models;
|
|||
use App\Enums\PostStatus;
|
||||
use Illuminate\Database\Eloquent\Factories\HasFactory;
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
use Illuminate\Support\Str;
|
||||
|
||||
class Post extends Model
|
||||
{
|
||||
|
|
@ -62,4 +63,12 @@ class Post extends Model
|
|||
|
||||
return $this->body[$locale] ?? $this->body['ar'] ?? '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the excerpt by stripping HTML and limiting to 150 characters.
|
||||
*/
|
||||
public function getExcerpt(?string $locale = null): string
|
||||
{
|
||||
return Str::limit(strip_tags($this->getBody($locale)), 150);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,106 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Ok, glad you are here
|
||||
* first we get a config instance, and set the settings
|
||||
* $config = HTMLPurifier_Config::createDefault();
|
||||
* $config->set('Core.Encoding', $this->config->get('purifier.encoding'));
|
||||
* $config->set('Cache.SerializerPath', $this->config->get('purifier.cachePath'));
|
||||
* if ( ! $this->config->get('purifier.finalize')) {
|
||||
* $config->autoFinalize = false;
|
||||
* }
|
||||
* $config->loadArray($this->getConfig());
|
||||
*
|
||||
* You must NOT delete the default settings
|
||||
* anything in settings should be compacted with params that needed to instance HTMLPurifier_Config.
|
||||
*
|
||||
* @link http://htmlpurifier.org/live/configdoc/plain.html
|
||||
*/
|
||||
|
||||
return [
|
||||
'encoding' => 'UTF-8',
|
||||
'finalize' => true,
|
||||
'ignoreNonStrings' => false,
|
||||
'cachePath' => storage_path('app/purifier'),
|
||||
'cacheFileMode' => 0755,
|
||||
'settings' => [
|
||||
'default' => [
|
||||
'HTML.Doctype' => 'HTML 4.01 Transitional',
|
||||
'HTML.Allowed' => 'h2,h3,p,br,b,strong,i,em,u,ul,ol,li,a[href|title],blockquote',
|
||||
'AutoFormat.AutoParagraph' => true,
|
||||
'AutoFormat.RemoveEmpty' => true,
|
||||
],
|
||||
'test' => [
|
||||
'Attr.EnableID' => 'true',
|
||||
],
|
||||
'youtube' => [
|
||||
'HTML.SafeIframe' => 'true',
|
||||
'URI.SafeIframeRegexp' => '%^(http://|https://|//)(www.youtube.com/embed/|player.vimeo.com/video/)%',
|
||||
],
|
||||
'custom_definition' => [
|
||||
'id' => 'html5-definitions',
|
||||
'rev' => 1,
|
||||
'debug' => false,
|
||||
'elements' => [
|
||||
// http://developers.whatwg.org/sections.html
|
||||
['section', 'Block', 'Flow', 'Common'],
|
||||
['nav', 'Block', 'Flow', 'Common'],
|
||||
['article', 'Block', 'Flow', 'Common'],
|
||||
['aside', 'Block', 'Flow', 'Common'],
|
||||
['header', 'Block', 'Flow', 'Common'],
|
||||
['footer', 'Block', 'Flow', 'Common'],
|
||||
|
||||
// Content model actually excludes several tags, not modelled here
|
||||
['address', 'Block', 'Flow', 'Common'],
|
||||
['hgroup', 'Block', 'Required: h1 | h2 | h3 | h4 | h5 | h6', 'Common'],
|
||||
|
||||
// http://developers.whatwg.org/grouping-content.html
|
||||
['figure', 'Block', 'Optional: (figcaption, Flow) | (Flow, figcaption) | Flow', 'Common'],
|
||||
['figcaption', 'Inline', 'Flow', 'Common'],
|
||||
|
||||
// http://developers.whatwg.org/the-video-element.html#the-video-element
|
||||
['video', 'Block', 'Optional: (source, Flow) | (Flow, source) | Flow', 'Common', [
|
||||
'src' => 'URI',
|
||||
'type' => 'Text',
|
||||
'width' => 'Length',
|
||||
'height' => 'Length',
|
||||
'poster' => 'URI',
|
||||
'preload' => 'Enum#auto,metadata,none',
|
||||
'controls' => 'Bool',
|
||||
]],
|
||||
['source', 'Block', 'Flow', 'Common', [
|
||||
'src' => 'URI',
|
||||
'type' => 'Text',
|
||||
]],
|
||||
|
||||
// http://developers.whatwg.org/text-level-semantics.html
|
||||
['s', 'Inline', 'Inline', 'Common'],
|
||||
['var', 'Inline', 'Inline', 'Common'],
|
||||
['sub', 'Inline', 'Inline', 'Common'],
|
||||
['sup', 'Inline', 'Inline', 'Common'],
|
||||
['mark', 'Inline', 'Inline', 'Common'],
|
||||
['wbr', 'Inline', 'Empty', 'Core'],
|
||||
|
||||
// http://developers.whatwg.org/edits.html
|
||||
['ins', 'Block', 'Flow', 'Common', ['cite' => 'URI', 'datetime' => 'CDATA']],
|
||||
['del', 'Block', 'Flow', 'Common', ['cite' => 'URI', 'datetime' => 'CDATA']],
|
||||
],
|
||||
'attributes' => [
|
||||
['iframe', 'allowfullscreen', 'Bool'],
|
||||
['table', 'height', 'Text'],
|
||||
['td', 'border', 'Text'],
|
||||
['th', 'border', 'Text'],
|
||||
['tr', 'width', 'Text'],
|
||||
['tr', 'height', 'Text'],
|
||||
['tr', 'border', 'Text'],
|
||||
],
|
||||
],
|
||||
'custom_attributes' => [
|
||||
['a', 'target', 'Enum#_blank,_self,_target,_top'],
|
||||
],
|
||||
'custom_elements' => [
|
||||
['u', 'Inline', 'Inline', 'Common'],
|
||||
],
|
||||
],
|
||||
|
||||
];
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
schema: 1
|
||||
story: "5.1"
|
||||
story_title: "Post Creation & Editing"
|
||||
gate: PASS
|
||||
status_reason: "All acceptance criteria met with comprehensive test coverage (30 tests), proper XSS protection via HTML Purifier, and complete bilingual support."
|
||||
reviewer: "Quinn (Test Architect)"
|
||||
updated: "2025-12-27T00:00:00Z"
|
||||
|
||||
waiver: { active: false }
|
||||
|
||||
top_issues: []
|
||||
|
||||
quality_score: 100
|
||||
expires: "2026-01-10T00:00:00Z"
|
||||
|
||||
evidence:
|
||||
tests_reviewed: 30
|
||||
risks_identified: 0
|
||||
trace:
|
||||
ac_covered: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
|
||||
ac_gaps: []
|
||||
|
||||
nfr_validation:
|
||||
security:
|
||||
status: PASS
|
||||
notes: "HTML Purifier with strict whitelist, admin middleware authorization, audit logging with IP tracking"
|
||||
performance:
|
||||
status: PASS
|
||||
notes: "Auto-save only for drafts, pagination with configurable per-page, debounced search (300ms)"
|
||||
reliability:
|
||||
status: PASS
|
||||
notes: "Comprehensive error handling, validation on all inputs, proper Livewire state management"
|
||||
maintainability:
|
||||
status: PASS
|
||||
notes: "Clean Volt component structure, proper separation of concerns, complete bilingual translations"
|
||||
|
||||
recommendations:
|
||||
immediate: []
|
||||
future:
|
||||
- action: "Consider adding delete functionality for posts"
|
||||
refs: ["resources/views/livewire/admin/posts/index.blade.php"]
|
||||
- action: "Consider extracting Trix editor setup to reusable Blade component"
|
||||
refs: ["resources/views/livewire/admin/posts/create.blade.php", "resources/views/livewire/admin/posts/edit.blade.php"]
|
||||
|
|
@ -19,33 +19,33 @@ So that **I can publish professional legal content for website visitors**.
|
|||
## Acceptance Criteria
|
||||
|
||||
### Post Creation Form
|
||||
- [ ] Title (required, bilingual: Arabic and English)
|
||||
- [ ] Body content (required, bilingual)
|
||||
- [ ] Status (draft/published)
|
||||
- [x] Title (required, bilingual: Arabic and English)
|
||||
- [x] Body content (required, bilingual)
|
||||
- [x] Status (draft/published)
|
||||
|
||||
### Rich Text Editor
|
||||
- [ ] Bold, italic, underline
|
||||
- [ ] Headings (H2, H3)
|
||||
- [ ] Bullet and numbered lists
|
||||
- [ ] Links
|
||||
- [ ] Blockquotes
|
||||
- [x] Bold, italic, underline
|
||||
- [x] Headings (H2, H3)
|
||||
- [x] Bullet and numbered lists
|
||||
- [x] Links
|
||||
- [x] Blockquotes
|
||||
|
||||
### Saving Features
|
||||
- [ ] Save as draft functionality
|
||||
- [ ] Preview post before publishing
|
||||
- [ ] Edit published posts
|
||||
- [ ] Auto-save draft periodically (every 60 seconds)
|
||||
- [ ] Immediate publishing (no scheduling)
|
||||
- [x] Save as draft functionality
|
||||
- [x] Preview post before publishing
|
||||
- [x] Edit published posts
|
||||
- [x] Auto-save draft periodically (every 60 seconds)
|
||||
- [x] Immediate publishing (no scheduling)
|
||||
|
||||
### Timestamps
|
||||
- [ ] created_at recorded on creation
|
||||
- [ ] updated_at updated on edit
|
||||
- [x] created_at recorded on creation
|
||||
- [x] updated_at updated on edit
|
||||
|
||||
### Quality Requirements
|
||||
- [ ] HTML sanitization for XSS prevention
|
||||
- [ ] Bilingual form labels
|
||||
- [ ] Audit log for create/edit
|
||||
- [ ] Tests for CRUD operations
|
||||
- [x] HTML sanitization for XSS prevention
|
||||
- [x] Bilingual form labels
|
||||
- [x] Audit log for create/edit
|
||||
- [x] Tests for CRUD operations
|
||||
|
||||
## Technical Notes
|
||||
|
||||
|
|
@ -309,17 +309,17 @@ Include Trix editor assets in your layout or component:
|
|||
|
||||
## Definition of Done
|
||||
|
||||
- [ ] Can create post with bilingual content
|
||||
- [ ] Rich text editor works
|
||||
- [ ] Can save as draft
|
||||
- [ ] Can publish directly
|
||||
- [ ] Can edit existing posts
|
||||
- [ ] Auto-save works for drafts
|
||||
- [ ] Preview modal displays sanitized content
|
||||
- [ ] HTML properly sanitized
|
||||
- [ ] Audit log created
|
||||
- [ ] Tests pass
|
||||
- [ ] Code formatted with Pint
|
||||
- [x] Can create post with bilingual content
|
||||
- [x] Rich text editor works
|
||||
- [x] Can save as draft
|
||||
- [x] Can publish directly
|
||||
- [x] Can edit existing posts
|
||||
- [x] Auto-save works for drafts
|
||||
- [x] Preview modal displays sanitized content
|
||||
- [x] HTML properly sanitized
|
||||
- [x] Audit log created
|
||||
- [x] Tests pass
|
||||
- [x] Code formatted with Pint
|
||||
|
||||
## Test Scenarios
|
||||
|
||||
|
|
@ -481,3 +481,148 @@ test('preview modal can be opened and closed', function () {
|
|||
|
||||
**Complexity:** Medium
|
||||
**Estimated Effort:** 4-5 hours
|
||||
|
||||
---
|
||||
|
||||
## Dev Agent Record
|
||||
|
||||
### Status
|
||||
**Ready for Review**
|
||||
|
||||
### Agent Model Used
|
||||
Claude Opus 4.5 (claude-opus-4-5-20251101)
|
||||
|
||||
### File List
|
||||
|
||||
**New Files:**
|
||||
- `config/purifier.php` - HTML Purifier configuration for XSS prevention
|
||||
- `resources/views/livewire/admin/posts/index.blade.php` - Posts listing Volt component
|
||||
- `resources/views/livewire/admin/posts/create.blade.php` - Post creation Volt component with Trix editor
|
||||
- `resources/views/livewire/admin/posts/edit.blade.php` - Post editing Volt component with Trix editor
|
||||
- `lang/en/posts.php` - English translations for posts module
|
||||
- `lang/ar/posts.php` - Arabic translations for posts module
|
||||
- `tests/Feature/Admin/PostManagementTest.php` - Feature tests for post CRUD operations (30 tests)
|
||||
|
||||
**Modified Files:**
|
||||
- `app/Models/Post.php` - Added `getExcerpt()` method
|
||||
- `routes/web.php` - Added admin posts routes
|
||||
- `lang/en/common.php` - Added 'close' translation
|
||||
- `lang/ar/common.php` - Added 'close' translation
|
||||
- `lang/en/enums.php` - Added post_status translations
|
||||
- `lang/ar/enums.php` - Added post_status translations
|
||||
|
||||
### Change Log
|
||||
1. Published and configured `mews/purifier` for HTML sanitization with allowed tags: h2, h3, p, br, b, strong, i, em, u, ul, ol, li, a[href|title], blockquote
|
||||
2. Added `getExcerpt()` method to Post model for generating text excerpts
|
||||
3. Created admin posts index page with filtering by status and search functionality
|
||||
4. Created admin posts create page with Trix rich text editor, preview modal, and save draft/publish actions
|
||||
5. Created admin posts edit page with auto-save (60s) for drafts, preview modal, and publish/unpublish actions
|
||||
6. Added admin posts routes under `/admin/posts` prefix
|
||||
7. Added bilingual translations (ar/en) for all post-related UI strings
|
||||
8. Implemented audit logging via AdminLog for create/update actions
|
||||
9. Wrote comprehensive feature tests covering CRUD, validation, authorization, and HTML sanitization
|
||||
|
||||
### Completion Notes
|
||||
- Post model already existed with JSON columns for bilingual title/body (different from story's suggested schema with separate columns - existing implementation is better)
|
||||
- PostFactory and PostStatus enum already existed
|
||||
- Used Trix editor (as suggested in story) via CDN with file upload toolbar hidden
|
||||
- Auto-save only triggers for draft posts to prevent accidental changes to published content
|
||||
- All 671 tests pass (30 new tests added for this story)
|
||||
|
||||
---
|
||||
|
||||
## QA Results
|
||||
|
||||
### Review Date: 2025-12-27
|
||||
|
||||
### Reviewed By: Quinn (Test Architect)
|
||||
|
||||
### Code Quality Assessment
|
||||
|
||||
**Overall Grade: Excellent**
|
||||
|
||||
The implementation demonstrates high quality across all dimensions. The code follows established patterns in the codebase, uses appropriate architectural decisions (JSON columns for bilingual content instead of separate columns), and includes comprehensive test coverage with 30 passing tests.
|
||||
|
||||
**Key Strengths:**
|
||||
1. **Architecture**: JSON columns for bilingual content is cleaner than separate `_ar`/`_en` columns
|
||||
2. **Security**: HTML sanitization via `mews/purifier` is properly configured with appropriate allowed tags
|
||||
3. **Testing**: Comprehensive 30-test suite covering CRUD, authorization, validation, and model behavior
|
||||
4. **UX**: Auto-save for drafts (60s interval), preview modal, and proper status management
|
||||
5. **Bilingual Support**: Complete translations in both English and Arabic for all UI strings
|
||||
|
||||
### Refactoring Performed
|
||||
|
||||
None required - code quality is excellent as-is.
|
||||
|
||||
### Compliance Check
|
||||
|
||||
- Coding Standards: ✓ Code follows Laravel/Livewire conventions, uses Volt class-based pattern
|
||||
- Project Structure: ✓ Files placed correctly in standard locations
|
||||
- Testing Strategy: ✓ Feature tests using Pest and `Volt::test()` pattern
|
||||
- All ACs Met: ✓ All 20 acceptance criteria items checked in story file
|
||||
|
||||
### Improvements Checklist
|
||||
|
||||
No mandatory improvements required. Optional considerations for future:
|
||||
|
||||
- [ ] Consider adding delete functionality (not in current AC scope)
|
||||
- [ ] Consider adding image upload capability for blog posts (not in current AC scope)
|
||||
- [ ] Consider extracting common Trix editor setup to a reusable Blade component (minor DRY improvement)
|
||||
|
||||
### Requirements Traceability
|
||||
|
||||
| Acceptance Criteria | Test Coverage | Status |
|
||||
|---------------------|---------------|--------|
|
||||
| AC1: Title (bilingual) | `admin can create post with valid bilingual content`, `post has bilingual title accessor` | ✓ |
|
||||
| AC2: Body content (bilingual) | `admin can create post with valid bilingual content`, `post has bilingual body accessor` | ✓ |
|
||||
| AC3: Status (draft/published) | `save draft preserves draft status`, `publish changes status to published`, `posts list shows status badges` | ✓ |
|
||||
| AC4-9: Rich Text Editor (bold, italic, headings, lists, links, blockquotes) | `HTML sanitization removes script tags but keeps allowed formatting` | ✓ |
|
||||
| AC10: Save as draft | `save draft preserves draft status` | ✓ |
|
||||
| AC11: Preview post | `preview modal can be opened and closed` | ✓ |
|
||||
| AC12: Edit published posts | `edit existing post updates content` | ✓ |
|
||||
| AC13: Auto-save (60s) | `auto-save only fires for draft posts`, `auto-save updates draft posts` | ✓ |
|
||||
| AC14: Immediate publishing | `publish changes status to published` | ✓ |
|
||||
| AC15-16: Timestamps | Verified in model via `$timestamps = true` | ✓ |
|
||||
| AC17: HTML sanitization | `HTML sanitization removes script tags but keeps allowed formatting` | ✓ |
|
||||
| AC18: Bilingual form labels | Verified in `lang/en/posts.php`, `lang/ar/posts.php` | ✓ |
|
||||
| AC19: Audit log | `admin log created on post create`, `admin log created on post update` | ✓ |
|
||||
| AC20: Tests for CRUD | 30 comprehensive tests covering all operations | ✓ |
|
||||
|
||||
### Security Review
|
||||
|
||||
**Status: PASS**
|
||||
|
||||
1. **XSS Prevention**: HTML Purifier configured with strict whitelist (`h2,h3,p,br,b,strong,i,em,u,ul,ol,li,a[href|title],blockquote`)
|
||||
2. **Authorization**: Admin middleware protects all post management routes
|
||||
3. **CSRF**: Livewire handles CSRF protection automatically
|
||||
4. **Input Validation**: Server-side validation rules for all fields
|
||||
5. **Audit Logging**: All create/update actions logged with IP address
|
||||
|
||||
**Security Tests Verified:**
|
||||
- `non-admin cannot access posts index`
|
||||
- `non-admin cannot access post creation`
|
||||
- `non-admin cannot access post edit`
|
||||
- `guest cannot access posts index`
|
||||
|
||||
### Performance Considerations
|
||||
|
||||
**Status: PASS**
|
||||
|
||||
1. **Auto-save optimization**: Only fires for draft posts, preventing unnecessary database writes
|
||||
2. **Pagination**: Index page uses Laravel pagination with configurable per-page count
|
||||
3. **Debounced search**: 300ms debounce on search input prevents excessive queries
|
||||
4. **No N+1**: No eager loading needed as post data is self-contained
|
||||
|
||||
### Files Modified During Review
|
||||
|
||||
None - no modifications required.
|
||||
|
||||
### Gate Status
|
||||
|
||||
Gate: **PASS** → `docs/qa/gates/5.1-post-creation-editing.yml`
|
||||
|
||||
### Recommended Status
|
||||
|
||||
**✓ Ready for Done**
|
||||
|
||||
All acceptance criteria met, comprehensive test coverage (30 tests), proper security measures in place, and code quality is excellent. Story owner may proceed with marking as Done.
|
||||
|
|
|
|||
|
|
@ -17,4 +17,5 @@ return [
|
|||
'clear' => 'مسح',
|
||||
'unknown' => 'غير معروف',
|
||||
'currency' => 'شيكل',
|
||||
'close' => 'إغلاق',
|
||||
];
|
||||
|
|
|
|||
|
|
@ -22,4 +22,8 @@ return [
|
|||
'active' => 'نشط',
|
||||
'archived' => 'مؤرشف',
|
||||
],
|
||||
'post_status' => [
|
||||
'draft' => 'مسودة',
|
||||
'published' => 'منشور',
|
||||
],
|
||||
];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
<?php
|
||||
|
||||
return [
|
||||
// Index page
|
||||
'posts' => 'المقالات',
|
||||
'posts_description' => 'إدارة المقالات والمحتوى القانوني.',
|
||||
'create_post' => 'إنشاء مقال',
|
||||
'no_posts' => 'لا توجد مقالات.',
|
||||
'search_placeholder' => 'البحث في المقالات...',
|
||||
'last_updated' => 'آخر تحديث',
|
||||
'created' => 'تاريخ الإنشاء',
|
||||
|
||||
// Create/Edit page
|
||||
'edit_post' => 'تعديل المقال',
|
||||
'back_to_posts' => 'العودة للمقالات',
|
||||
'arabic_content' => 'المحتوى العربي',
|
||||
'english_content' => 'المحتوى الإنجليزي',
|
||||
'title' => 'العنوان',
|
||||
'body' => 'المحتوى',
|
||||
'arabic' => 'عربي',
|
||||
'english' => 'إنجليزي',
|
||||
'preview' => 'معاينة',
|
||||
'save_draft' => 'حفظ كمسودة',
|
||||
'publish' => 'نشر',
|
||||
'unpublish' => 'إلغاء النشر',
|
||||
'save_changes' => 'حفظ التغييرات',
|
||||
'auto_save_enabled' => 'الحفظ التلقائي مفعل',
|
||||
|
||||
// Messages
|
||||
'post_saved' => 'تم حفظ المقال بنجاح.',
|
||||
'post_deleted' => 'تم حذف المقال بنجاح.',
|
||||
|
||||
// Validation
|
||||
'title_ar_required' => 'العنوان العربي مطلوب.',
|
||||
'title_en_required' => 'العنوان الإنجليزي مطلوب.',
|
||||
'body_ar_required' => 'المحتوى العربي مطلوب.',
|
||||
'body_en_required' => 'المحتوى الإنجليزي مطلوب.',
|
||||
];
|
||||
|
|
@ -17,4 +17,5 @@ return [
|
|||
'clear' => 'Clear',
|
||||
'unknown' => 'Unknown',
|
||||
'currency' => 'ILS',
|
||||
'close' => 'Close',
|
||||
];
|
||||
|
|
|
|||
|
|
@ -22,4 +22,8 @@ return [
|
|||
'active' => 'Active',
|
||||
'archived' => 'Archived',
|
||||
],
|
||||
'post_status' => [
|
||||
'draft' => 'Draft',
|
||||
'published' => 'Published',
|
||||
],
|
||||
];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
<?php
|
||||
|
||||
return [
|
||||
// Index page
|
||||
'posts' => 'Posts',
|
||||
'posts_description' => 'Manage blog posts and legal content.',
|
||||
'create_post' => 'Create Post',
|
||||
'no_posts' => 'No posts found.',
|
||||
'search_placeholder' => 'Search posts...',
|
||||
'last_updated' => 'Last Updated',
|
||||
'created' => 'Created',
|
||||
|
||||
// Create/Edit page
|
||||
'edit_post' => 'Edit Post',
|
||||
'back_to_posts' => 'Back to Posts',
|
||||
'arabic_content' => 'Arabic Content',
|
||||
'english_content' => 'English Content',
|
||||
'title' => 'Title',
|
||||
'body' => 'Body',
|
||||
'arabic' => 'Arabic',
|
||||
'english' => 'English',
|
||||
'preview' => 'Preview',
|
||||
'save_draft' => 'Save Draft',
|
||||
'publish' => 'Publish',
|
||||
'unpublish' => 'Unpublish',
|
||||
'save_changes' => 'Save Changes',
|
||||
'auto_save_enabled' => 'Auto-save enabled',
|
||||
|
||||
// Messages
|
||||
'post_saved' => 'Post saved successfully.',
|
||||
'post_deleted' => 'Post deleted successfully.',
|
||||
|
||||
// Validation
|
||||
'title_ar_required' => 'Arabic title is required.',
|
||||
'title_en_required' => 'English title is required.',
|
||||
'body_ar_required' => 'Arabic body content is required.',
|
||||
'body_en_required' => 'English body content is required.',
|
||||
];
|
||||
|
|
@ -0,0 +1,251 @@
|
|||
<?php
|
||||
|
||||
use App\Enums\PostStatus;
|
||||
use App\Models\AdminLog;
|
||||
use App\Models\Post;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new class extends Component
|
||||
{
|
||||
public ?Post $post = null;
|
||||
|
||||
public string $title_ar = '';
|
||||
public string $title_en = '';
|
||||
public string $body_ar = '';
|
||||
public string $body_en = '';
|
||||
public string $status = 'draft';
|
||||
|
||||
public bool $showPreview = false;
|
||||
|
||||
public function rules(): array
|
||||
{
|
||||
return [
|
||||
'title_ar' => ['required', 'string', 'max:255'],
|
||||
'title_en' => ['required', 'string', 'max:255'],
|
||||
'body_ar' => ['required', 'string'],
|
||||
'body_en' => ['required', 'string'],
|
||||
'status' => ['required', 'in:draft,published'],
|
||||
];
|
||||
}
|
||||
|
||||
public function messages(): array
|
||||
{
|
||||
return [
|
||||
'title_ar.required' => __('posts.title_ar_required'),
|
||||
'title_en.required' => __('posts.title_en_required'),
|
||||
'body_ar.required' => __('posts.body_ar_required'),
|
||||
'body_en.required' => __('posts.body_en_required'),
|
||||
];
|
||||
}
|
||||
|
||||
public function save(): void
|
||||
{
|
||||
$validated = $this->validate();
|
||||
|
||||
$postData = [
|
||||
'title' => [
|
||||
'ar' => $validated['title_ar'],
|
||||
'en' => $validated['title_en'],
|
||||
],
|
||||
'body' => [
|
||||
'ar' => clean($validated['body_ar']),
|
||||
'en' => clean($validated['body_en']),
|
||||
],
|
||||
'status' => $validated['status'],
|
||||
'published_at' => $validated['status'] === 'published' ? now() : null,
|
||||
];
|
||||
|
||||
if ($this->post) {
|
||||
$oldValues = $this->post->toArray();
|
||||
$this->post->update($postData);
|
||||
$action = 'update';
|
||||
$newValues = $this->post->fresh()->toArray();
|
||||
} else {
|
||||
$this->post = Post::create($postData);
|
||||
$action = 'create';
|
||||
$oldValues = null;
|
||||
$newValues = $this->post->toArray();
|
||||
}
|
||||
|
||||
AdminLog::create([
|
||||
'admin_id' => auth()->id(),
|
||||
'action' => $action,
|
||||
'target_type' => 'post',
|
||||
'target_id' => $this->post->id,
|
||||
'old_values' => $oldValues,
|
||||
'new_values' => $newValues,
|
||||
'ip_address' => request()->ip(),
|
||||
'created_at' => now(),
|
||||
]);
|
||||
|
||||
session()->flash('success', __('posts.post_saved'));
|
||||
|
||||
$this->redirect(route('admin.posts.edit', $this->post), navigate: true);
|
||||
}
|
||||
|
||||
public function saveDraft(): void
|
||||
{
|
||||
$this->status = 'draft';
|
||||
$this->save();
|
||||
}
|
||||
|
||||
public function publish(): void
|
||||
{
|
||||
$this->status = 'published';
|
||||
$this->save();
|
||||
}
|
||||
|
||||
public function autoSave(): void
|
||||
{
|
||||
if ($this->post && $this->status === 'draft') {
|
||||
$this->post->update([
|
||||
'title' => [
|
||||
'ar' => $this->title_ar,
|
||||
'en' => $this->title_en,
|
||||
],
|
||||
'body' => [
|
||||
'ar' => clean($this->body_ar),
|
||||
'en' => clean($this->body_en),
|
||||
],
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
public function preview(): void
|
||||
{
|
||||
$this->showPreview = true;
|
||||
}
|
||||
|
||||
public function closePreview(): void
|
||||
{
|
||||
$this->showPreview = false;
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div wire:poll.60s="autoSave">
|
||||
<div class="mb-6">
|
||||
<flux:button variant="ghost" :href="route('admin.posts.index')" wire:navigate icon="arrow-left">
|
||||
{{ __('posts.back_to_posts') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<flux:heading size="xl">{{ __('posts.create_post') }}</flux:heading>
|
||||
</div>
|
||||
|
||||
@if(session('success'))
|
||||
<flux:callout variant="success" class="mb-6">
|
||||
{{ session('success') }}
|
||||
</flux:callout>
|
||||
@endif
|
||||
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
|
||||
<form wire:submit="save" class="space-y-6">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<!-- Arabic Fields -->
|
||||
<div class="space-y-4">
|
||||
<flux:heading size="sm">{{ __('posts.arabic_content') }}</flux:heading>
|
||||
|
||||
<flux:field>
|
||||
<flux:label>{{ __('posts.title') }} ({{ __('posts.arabic') }}) *</flux:label>
|
||||
<flux:input wire:model="title_ar" dir="rtl" required />
|
||||
<flux:error name="title_ar" />
|
||||
</flux:field>
|
||||
|
||||
<flux:field>
|
||||
<flux:label>{{ __('posts.body') }} ({{ __('posts.arabic') }}) *</flux:label>
|
||||
<div wire:ignore>
|
||||
<input id="body_ar" type="hidden" wire:model="body_ar">
|
||||
<trix-editor
|
||||
input="body_ar"
|
||||
dir="rtl"
|
||||
class="trix-content prose prose-sm max-w-none bg-white dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-700 min-h-[200px]"
|
||||
x-data
|
||||
x-on:trix-change="$wire.set('body_ar', $event.target.value)"
|
||||
></trix-editor>
|
||||
</div>
|
||||
<flux:error name="body_ar" />
|
||||
</flux:field>
|
||||
</div>
|
||||
|
||||
<!-- English Fields -->
|
||||
<div class="space-y-4">
|
||||
<flux:heading size="sm">{{ __('posts.english_content') }}</flux:heading>
|
||||
|
||||
<flux:field>
|
||||
<flux:label>{{ __('posts.title') }} ({{ __('posts.english') }}) *</flux:label>
|
||||
<flux:input wire:model="title_en" required />
|
||||
<flux:error name="title_en" />
|
||||
</flux:field>
|
||||
|
||||
<flux:field>
|
||||
<flux:label>{{ __('posts.body') }} ({{ __('posts.english') }}) *</flux:label>
|
||||
<div wire:ignore>
|
||||
<input id="body_en" type="hidden" wire:model="body_en">
|
||||
<trix-editor
|
||||
input="body_en"
|
||||
class="trix-content prose prose-sm max-w-none bg-white dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-700 min-h-[200px]"
|
||||
x-data
|
||||
x-on:trix-change="$wire.set('body_en', $event.target.value)"
|
||||
></trix-editor>
|
||||
</div>
|
||||
<flux:error name="body_en" />
|
||||
</flux:field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end gap-4 border-t border-zinc-200 pt-6 dark:border-zinc-700">
|
||||
<flux:button variant="ghost" :href="route('admin.posts.index')" wire:navigate>
|
||||
{{ __('common.cancel') }}
|
||||
</flux:button>
|
||||
<flux:button type="button" wire:click="preview">
|
||||
{{ __('posts.preview') }}
|
||||
</flux:button>
|
||||
<flux:button type="button" wire:click="saveDraft">
|
||||
{{ __('posts.save_draft') }}
|
||||
</flux:button>
|
||||
<flux:button variant="primary" type="button" wire:click="publish">
|
||||
{{ __('posts.publish') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{{-- Preview Modal --}}
|
||||
<flux:modal wire:model="showPreview" class="max-w-4xl">
|
||||
<div class="p-6">
|
||||
<flux:heading size="lg" class="mb-4">{{ __('posts.preview') }}</flux:heading>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="border-b border-zinc-200 dark:border-zinc-700 pb-4">
|
||||
<h3 class="font-semibold text-lg mb-2 text-zinc-600 dark:text-zinc-400">{{ __('posts.arabic_content') }}</h3>
|
||||
<h2 class="text-xl font-bold text-zinc-900 dark:text-zinc-100" dir="rtl">{{ $title_ar }}</h2>
|
||||
<div class="prose prose-sm dark:prose-invert mt-2 max-w-none" dir="rtl">{!! clean($body_ar) !!}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg mb-2 text-zinc-600 dark:text-zinc-400">{{ __('posts.english_content') }}</h3>
|
||||
<h2 class="text-xl font-bold text-zinc-900 dark:text-zinc-100">{{ $title_en }}</h2>
|
||||
<div class="prose prose-sm dark:prose-invert mt-2 max-w-none">{!! clean($body_en) !!}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex justify-end">
|
||||
<flux:button wire:click="closePreview">{{ __('common.close') }}</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
</flux:modal>
|
||||
</div>
|
||||
|
||||
@push('styles')
|
||||
<link rel="stylesheet" href="https://unpkg.com/trix@2.0.0/dist/trix.css">
|
||||
<style>
|
||||
trix-toolbar [data-trix-button-group="file-tools"] {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
<script src="https://unpkg.com/trix@2.0.0/dist/trix.umd.min.js"></script>
|
||||
@endpush
|
||||
|
|
@ -0,0 +1,271 @@
|
|||
<?php
|
||||
|
||||
use App\Enums\PostStatus;
|
||||
use App\Models\AdminLog;
|
||||
use App\Models\Post;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new class extends Component
|
||||
{
|
||||
public Post $post;
|
||||
|
||||
public string $title_ar = '';
|
||||
public string $title_en = '';
|
||||
public string $body_ar = '';
|
||||
public string $body_en = '';
|
||||
public string $status = 'draft';
|
||||
|
||||
public bool $showPreview = false;
|
||||
|
||||
public function mount(Post $post): void
|
||||
{
|
||||
$this->post = $post;
|
||||
$this->title_ar = $post->title['ar'] ?? '';
|
||||
$this->title_en = $post->title['en'] ?? '';
|
||||
$this->body_ar = $post->body['ar'] ?? '';
|
||||
$this->body_en = $post->body['en'] ?? '';
|
||||
$this->status = $post->status->value;
|
||||
}
|
||||
|
||||
public function rules(): array
|
||||
{
|
||||
return [
|
||||
'title_ar' => ['required', 'string', 'max:255'],
|
||||
'title_en' => ['required', 'string', 'max:255'],
|
||||
'body_ar' => ['required', 'string'],
|
||||
'body_en' => ['required', 'string'],
|
||||
'status' => ['required', 'in:draft,published'],
|
||||
];
|
||||
}
|
||||
|
||||
public function messages(): array
|
||||
{
|
||||
return [
|
||||
'title_ar.required' => __('posts.title_ar_required'),
|
||||
'title_en.required' => __('posts.title_en_required'),
|
||||
'body_ar.required' => __('posts.body_ar_required'),
|
||||
'body_en.required' => __('posts.body_en_required'),
|
||||
];
|
||||
}
|
||||
|
||||
public function save(): void
|
||||
{
|
||||
$validated = $this->validate();
|
||||
|
||||
$oldValues = $this->post->toArray();
|
||||
|
||||
$this->post->update([
|
||||
'title' => [
|
||||
'ar' => $validated['title_ar'],
|
||||
'en' => $validated['title_en'],
|
||||
],
|
||||
'body' => [
|
||||
'ar' => clean($validated['body_ar']),
|
||||
'en' => clean($validated['body_en']),
|
||||
],
|
||||
'status' => $validated['status'],
|
||||
'published_at' => $validated['status'] === 'published' && ! $this->post->published_at
|
||||
? now()
|
||||
: $this->post->published_at,
|
||||
]);
|
||||
|
||||
AdminLog::create([
|
||||
'admin_id' => auth()->id(),
|
||||
'action' => 'update',
|
||||
'target_type' => 'post',
|
||||
'target_id' => $this->post->id,
|
||||
'old_values' => $oldValues,
|
||||
'new_values' => $this->post->fresh()->toArray(),
|
||||
'ip_address' => request()->ip(),
|
||||
'created_at' => now(),
|
||||
]);
|
||||
|
||||
session()->flash('success', __('posts.post_saved'));
|
||||
}
|
||||
|
||||
public function saveDraft(): void
|
||||
{
|
||||
$this->status = 'draft';
|
||||
$this->save();
|
||||
}
|
||||
|
||||
public function publish(): void
|
||||
{
|
||||
$this->status = 'published';
|
||||
$this->save();
|
||||
}
|
||||
|
||||
public function autoSave(): void
|
||||
{
|
||||
if ($this->status === 'draft') {
|
||||
$this->post->update([
|
||||
'title' => [
|
||||
'ar' => $this->title_ar,
|
||||
'en' => $this->title_en,
|
||||
],
|
||||
'body' => [
|
||||
'ar' => clean($this->body_ar),
|
||||
'en' => clean($this->body_en),
|
||||
],
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
public function preview(): void
|
||||
{
|
||||
$this->showPreview = true;
|
||||
}
|
||||
|
||||
public function closePreview(): void
|
||||
{
|
||||
$this->showPreview = false;
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div wire:poll.60s="autoSave">
|
||||
<div class="mb-6">
|
||||
<flux:button variant="ghost" :href="route('admin.posts.index')" wire:navigate icon="arrow-left">
|
||||
{{ __('posts.back_to_posts') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
|
||||
<div>
|
||||
<flux:heading size="xl">{{ __('posts.edit_post') }}</flux:heading>
|
||||
<p class="text-sm text-zinc-500 dark:text-zinc-400 mt-1">
|
||||
{{ __('posts.last_updated') }}: {{ $post->updated_at->diffForHumans() }}
|
||||
@if($status === 'draft')
|
||||
<span class="text-amber-600 dark:text-amber-400">({{ __('posts.auto_save_enabled') }})</span>
|
||||
@endif
|
||||
</p>
|
||||
</div>
|
||||
<flux:badge :color="$status === 'published' ? 'green' : 'amber'">
|
||||
{{ __('enums.post_status.' . $status) }}
|
||||
</flux:badge>
|
||||
</div>
|
||||
|
||||
@if(session('success'))
|
||||
<flux:callout variant="success" class="mb-6">
|
||||
{{ session('success') }}
|
||||
</flux:callout>
|
||||
@endif
|
||||
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
|
||||
<form wire:submit="save" class="space-y-6">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<!-- Arabic Fields -->
|
||||
<div class="space-y-4">
|
||||
<flux:heading size="sm">{{ __('posts.arabic_content') }}</flux:heading>
|
||||
|
||||
<flux:field>
|
||||
<flux:label>{{ __('posts.title') }} ({{ __('posts.arabic') }}) *</flux:label>
|
||||
<flux:input wire:model="title_ar" dir="rtl" required />
|
||||
<flux:error name="title_ar" />
|
||||
</flux:field>
|
||||
|
||||
<flux:field>
|
||||
<flux:label>{{ __('posts.body') }} ({{ __('posts.arabic') }}) *</flux:label>
|
||||
<div wire:ignore>
|
||||
<input id="body_ar" type="hidden" wire:model="body_ar" value="{{ $body_ar }}">
|
||||
<trix-editor
|
||||
input="body_ar"
|
||||
dir="rtl"
|
||||
class="trix-content prose prose-sm max-w-none bg-white dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-700 min-h-[200px]"
|
||||
x-data
|
||||
x-on:trix-change="$wire.set('body_ar', $event.target.value)"
|
||||
></trix-editor>
|
||||
</div>
|
||||
<flux:error name="body_ar" />
|
||||
</flux:field>
|
||||
</div>
|
||||
|
||||
<!-- English Fields -->
|
||||
<div class="space-y-4">
|
||||
<flux:heading size="sm">{{ __('posts.english_content') }}</flux:heading>
|
||||
|
||||
<flux:field>
|
||||
<flux:label>{{ __('posts.title') }} ({{ __('posts.english') }}) *</flux:label>
|
||||
<flux:input wire:model="title_en" required />
|
||||
<flux:error name="title_en" />
|
||||
</flux:field>
|
||||
|
||||
<flux:field>
|
||||
<flux:label>{{ __('posts.body') }} ({{ __('posts.english') }}) *</flux:label>
|
||||
<div wire:ignore>
|
||||
<input id="body_en" type="hidden" wire:model="body_en" value="{{ $body_en }}">
|
||||
<trix-editor
|
||||
input="body_en"
|
||||
class="trix-content prose prose-sm max-w-none bg-white dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-700 min-h-[200px]"
|
||||
x-data
|
||||
x-on:trix-change="$wire.set('body_en', $event.target.value)"
|
||||
></trix-editor>
|
||||
</div>
|
||||
<flux:error name="body_en" />
|
||||
</flux:field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end gap-4 border-t border-zinc-200 pt-6 dark:border-zinc-700">
|
||||
<flux:button variant="ghost" :href="route('admin.posts.index')" wire:navigate>
|
||||
{{ __('common.cancel') }}
|
||||
</flux:button>
|
||||
<flux:button type="button" wire:click="preview">
|
||||
{{ __('posts.preview') }}
|
||||
</flux:button>
|
||||
@if($status === 'published')
|
||||
<flux:button type="button" wire:click="saveDraft">
|
||||
{{ __('posts.unpublish') }}
|
||||
</flux:button>
|
||||
<flux:button variant="primary" type="button" wire:click="publish">
|
||||
{{ __('posts.save_changes') }}
|
||||
</flux:button>
|
||||
@else
|
||||
<flux:button type="button" wire:click="saveDraft">
|
||||
{{ __('posts.save_draft') }}
|
||||
</flux:button>
|
||||
<flux:button variant="primary" type="button" wire:click="publish">
|
||||
{{ __('posts.publish') }}
|
||||
</flux:button>
|
||||
@endif
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{{-- Preview Modal --}}
|
||||
<flux:modal wire:model="showPreview" class="max-w-4xl">
|
||||
<div class="p-6">
|
||||
<flux:heading size="lg" class="mb-4">{{ __('posts.preview') }}</flux:heading>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="border-b border-zinc-200 dark:border-zinc-700 pb-4">
|
||||
<h3 class="font-semibold text-lg mb-2 text-zinc-600 dark:text-zinc-400">{{ __('posts.arabic_content') }}</h3>
|
||||
<h2 class="text-xl font-bold text-zinc-900 dark:text-zinc-100" dir="rtl">{{ $title_ar }}</h2>
|
||||
<div class="prose prose-sm dark:prose-invert mt-2 max-w-none" dir="rtl">{!! clean($body_ar) !!}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg mb-2 text-zinc-600 dark:text-zinc-400">{{ __('posts.english_content') }}</h3>
|
||||
<h2 class="text-xl font-bold text-zinc-900 dark:text-zinc-100">{{ $title_en }}</h2>
|
||||
<div class="prose prose-sm dark:prose-invert mt-2 max-w-none">{!! clean($body_en) !!}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex justify-end">
|
||||
<flux:button wire:click="closePreview">{{ __('common.close') }}</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
</flux:modal>
|
||||
</div>
|
||||
|
||||
@push('styles')
|
||||
<link rel="stylesheet" href="https://unpkg.com/trix@2.0.0/dist/trix.css">
|
||||
<style>
|
||||
trix-toolbar [data-trix-button-group="file-tools"] {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
<script src="https://unpkg.com/trix@2.0.0/dist/trix.umd.min.js"></script>
|
||||
@endpush
|
||||
|
|
@ -0,0 +1,219 @@
|
|||
<?php
|
||||
|
||||
use App\Enums\PostStatus;
|
||||
use App\Models\Post;
|
||||
use Livewire\Volt\Component;
|
||||
use Livewire\WithPagination;
|
||||
|
||||
new class extends Component
|
||||
{
|
||||
use WithPagination;
|
||||
|
||||
public string $search = '';
|
||||
public string $statusFilter = '';
|
||||
public string $sortBy = 'updated_at';
|
||||
public string $sortDir = 'desc';
|
||||
public int $perPage = 15;
|
||||
|
||||
public function updatedSearch(): void
|
||||
{
|
||||
$this->resetPage();
|
||||
}
|
||||
|
||||
public function updatedStatusFilter(): void
|
||||
{
|
||||
$this->resetPage();
|
||||
}
|
||||
|
||||
public function updatedPerPage(): void
|
||||
{
|
||||
$this->resetPage();
|
||||
}
|
||||
|
||||
public function sort(string $column): void
|
||||
{
|
||||
if ($this->sortBy === $column) {
|
||||
$this->sortDir = $this->sortDir === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
$this->sortBy = $column;
|
||||
$this->sortDir = 'asc';
|
||||
}
|
||||
}
|
||||
|
||||
public function clearFilters(): void
|
||||
{
|
||||
$this->search = '';
|
||||
$this->statusFilter = '';
|
||||
$this->resetPage();
|
||||
}
|
||||
|
||||
public function with(): array
|
||||
{
|
||||
$locale = app()->getLocale();
|
||||
|
||||
return [
|
||||
'posts' => Post::query()
|
||||
->when($this->search, fn ($q) => $q->where(function ($q) use ($locale) {
|
||||
$q->whereRaw("JSON_EXTRACT(title, '$.\"{$locale}\"') LIKE ?", ["%{$this->search}%"])
|
||||
->orWhereRaw("JSON_EXTRACT(title, '$.\"ar\"') LIKE ?", ["%{$this->search}%"])
|
||||
->orWhereRaw("JSON_EXTRACT(title, '$.\"en\"') LIKE ?", ["%{$this->search}%"]);
|
||||
}))
|
||||
->when($this->statusFilter, fn ($q) => $q->where('status', $this->statusFilter))
|
||||
->orderBy($this->sortBy, $this->sortDir)
|
||||
->paginate($this->perPage),
|
||||
'statuses' => PostStatus::cases(),
|
||||
];
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
|
||||
<div>
|
||||
<flux:heading size="xl">{{ __('posts.posts') }}</flux:heading>
|
||||
<p class="text-sm text-zinc-500 dark:text-zinc-400 mt-1">{{ __('posts.posts_description') }}</p>
|
||||
</div>
|
||||
<flux:button href="{{ route('admin.posts.create') }}" variant="primary" icon="plus" wire:navigate>
|
||||
{{ __('posts.create_post') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
|
||||
@if(session('success'))
|
||||
<flux:callout variant="success" class="mb-6">
|
||||
{{ session('success') }}
|
||||
</flux:callout>
|
||||
@endif
|
||||
|
||||
@if(session('error'))
|
||||
<flux:callout variant="danger" class="mb-6">
|
||||
{{ session('error') }}
|
||||
</flux:callout>
|
||||
@endif
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="bg-white dark:bg-zinc-800 rounded-lg p-4 border border-zinc-200 dark:border-zinc-700 mb-6">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<flux:field>
|
||||
<flux:input
|
||||
wire:model.live.debounce.300ms="search"
|
||||
placeholder="{{ __('posts.search_placeholder') }}"
|
||||
icon="magnifying-glass"
|
||||
/>
|
||||
</flux:field>
|
||||
|
||||
<flux:field>
|
||||
<flux:select wire:model.live="statusFilter">
|
||||
<option value="">{{ __('admin.all_statuses') }}</option>
|
||||
@foreach($statuses as $status)
|
||||
<option value="{{ $status->value }}">{{ __('enums.post_status.' . $status->value) }}</option>
|
||||
@endforeach
|
||||
</flux:select>
|
||||
</flux:field>
|
||||
|
||||
<flux:field>
|
||||
<flux:select wire:model.live="perPage">
|
||||
<option value="15">15 {{ __('admin.per_page') }}</option>
|
||||
<option value="25">25 {{ __('admin.per_page') }}</option>
|
||||
<option value="50">50 {{ __('admin.per_page') }}</option>
|
||||
</flux:select>
|
||||
</flux:field>
|
||||
|
||||
@if($search || $statusFilter)
|
||||
<div class="flex items-end">
|
||||
<flux:button wire:click="clearFilters" variant="ghost">
|
||||
{{ __('common.clear') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sort Headers -->
|
||||
<div class="hidden lg:flex bg-zinc-100 dark:bg-zinc-700 rounded-t-lg px-4 py-2 text-sm font-medium text-zinc-600 dark:text-zinc-300 gap-4 mb-0">
|
||||
<button wire:click="sort('title')" class="flex items-center gap-1 flex-1 hover:text-zinc-900 dark:hover:text-white">
|
||||
{{ __('posts.title') }}
|
||||
@if($sortBy === 'title')
|
||||
<flux:icon name="{{ $sortDir === 'asc' ? 'chevron-up' : 'chevron-down' }}" class="w-4 h-4" />
|
||||
@endif
|
||||
</button>
|
||||
<span class="w-24">{{ __('admin.current_status') }}</span>
|
||||
<button wire:click="sort('updated_at')" class="flex items-center gap-1 w-32 hover:text-zinc-900 dark:hover:text-white">
|
||||
{{ __('posts.last_updated') }}
|
||||
@if($sortBy === 'updated_at')
|
||||
<flux:icon name="{{ $sortDir === 'asc' ? 'chevron-up' : 'chevron-down' }}" class="w-4 h-4" />
|
||||
@endif
|
||||
</button>
|
||||
<button wire:click="sort('created_at')" class="flex items-center gap-1 w-32 hover:text-zinc-900 dark:hover:text-white">
|
||||
{{ __('posts.created') }}
|
||||
@if($sortBy === 'created_at')
|
||||
<flux:icon name="{{ $sortDir === 'asc' ? 'chevron-up' : 'chevron-down' }}" class="w-4 h-4" />
|
||||
@endif
|
||||
</button>
|
||||
<span class="w-32">{{ __('common.actions') }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Posts List -->
|
||||
<div class="space-y-0">
|
||||
@forelse($posts as $post)
|
||||
<div wire:key="post-{{ $post->id }}" class="bg-white dark:bg-zinc-800 p-4 border border-zinc-200 dark:border-zinc-700 {{ $loop->first ? 'rounded-t-lg lg:rounded-t-none' : '' }} {{ $loop->last ? 'rounded-b-lg' : '' }} {{ !$loop->first ? 'border-t-0' : '' }}">
|
||||
<div class="flex flex-col lg:flex-row lg:items-center gap-4">
|
||||
<!-- Title -->
|
||||
<div class="flex-1">
|
||||
<a href="{{ route('admin.posts.edit', $post) }}" class="font-semibold text-zinc-900 dark:text-zinc-100 hover:text-blue-600 dark:hover:text-blue-400" wire:navigate>
|
||||
{{ $post->getTitle() }}
|
||||
</a>
|
||||
<div class="text-sm text-zinc-500 dark:text-zinc-400 mt-1 line-clamp-2">
|
||||
{{ $post->getExcerpt() }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Badge -->
|
||||
<div class="lg:w-24">
|
||||
<flux:badge :color="$post->status === \App\Enums\PostStatus::Published ? 'green' : 'amber'" size="sm">
|
||||
{{ __('enums.post_status.' . $post->status->value) }}
|
||||
</flux:badge>
|
||||
</div>
|
||||
|
||||
<!-- Last Updated -->
|
||||
<div class="lg:w-32">
|
||||
<div class="text-sm text-zinc-900 dark:text-zinc-100">
|
||||
{{ $post->updated_at->diffForHumans() }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Created -->
|
||||
<div class="lg:w-32">
|
||||
<div class="text-sm text-zinc-500 dark:text-zinc-400">
|
||||
{{ $post->created_at->format('Y-m-d') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="lg:w-32 flex gap-2">
|
||||
<flux:button
|
||||
href="{{ route('admin.posts.edit', $post) }}"
|
||||
variant="filled"
|
||||
size="sm"
|
||||
wire:navigate
|
||||
>
|
||||
{{ __('common.edit') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="text-center py-12 text-zinc-500 dark:text-zinc-400 bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
|
||||
<flux:icon name="document-text" class="w-12 h-12 mx-auto mb-4" />
|
||||
<p>{{ __('posts.no_posts') }}</p>
|
||||
<div class="mt-4">
|
||||
<flux:button href="{{ route('admin.posts.create') }}" variant="primary" icon="plus" wire:navigate>
|
||||
{{ __('posts.create_post') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
{{ $posts->links() }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -91,6 +91,13 @@ Route::middleware(['auth', 'active'])->group(function () {
|
|||
Volt::route('/working-hours', 'admin.settings.working-hours')->name('working-hours');
|
||||
Volt::route('/blocked-times', 'admin.settings.blocked-times')->name('blocked-times');
|
||||
});
|
||||
|
||||
// Posts Management
|
||||
Route::prefix('posts')->name('admin.posts.')->group(function () {
|
||||
Volt::route('/', 'admin.posts.index')->name('index');
|
||||
Volt::route('/create', 'admin.posts.create')->name('create');
|
||||
Volt::route('/{post}/edit', 'admin.posts.edit')->name('edit');
|
||||
});
|
||||
});
|
||||
|
||||
// Client routes
|
||||
|
|
|
|||
|
|
@ -0,0 +1,363 @@
|
|||
<?php
|
||||
|
||||
use App\Enums\PostStatus;
|
||||
use App\Models\AdminLog;
|
||||
use App\Models\Post;
|
||||
use App\Models\User;
|
||||
use Livewire\Volt\Volt;
|
||||
|
||||
beforeEach(function () {
|
||||
$this->admin = User::factory()->admin()->create();
|
||||
});
|
||||
|
||||
// ===========================================
|
||||
// Index Page Tests
|
||||
// ===========================================
|
||||
|
||||
test('admin can view posts index', function () {
|
||||
$this->actingAs($this->admin)
|
||||
->get(route('admin.posts.index'))
|
||||
->assertOk();
|
||||
});
|
||||
|
||||
test('admin can see list of posts', function () {
|
||||
$post = Post::factory()->create([
|
||||
'title' => ['ar' => 'عنوان عربي', 'en' => 'English Title'],
|
||||
]);
|
||||
|
||||
$this->actingAs($this->admin);
|
||||
|
||||
app()->setLocale('en');
|
||||
|
||||
// Check the post appears in the view
|
||||
$this->get(route('admin.posts.index'))
|
||||
->assertOk()
|
||||
->assertSee('English Title');
|
||||
});
|
||||
|
||||
test('posts list shows status badges', function () {
|
||||
Post::factory()->draft()->create();
|
||||
Post::factory()->published()->create();
|
||||
|
||||
$this->actingAs($this->admin);
|
||||
|
||||
$component = Volt::test('admin.posts.index');
|
||||
|
||||
expect($component->viewData('posts')->total())->toBe(2);
|
||||
});
|
||||
|
||||
test('admin can filter posts by status', function () {
|
||||
Post::factory()->draft()->create();
|
||||
Post::factory()->published()->create();
|
||||
|
||||
$this->actingAs($this->admin);
|
||||
|
||||
$component = Volt::test('admin.posts.index')
|
||||
->set('statusFilter', 'draft');
|
||||
|
||||
expect($component->viewData('posts')->total())->toBe(1);
|
||||
expect($component->viewData('posts')->first()->status)->toBe(PostStatus::Draft);
|
||||
});
|
||||
|
||||
test('admin can search posts by title', function () {
|
||||
Post::factory()->create(['title' => ['ar' => 'عنوان أول', 'en' => 'First Post']]);
|
||||
Post::factory()->create(['title' => ['ar' => 'عنوان ثاني', 'en' => 'Second Post']]);
|
||||
|
||||
$this->actingAs($this->admin);
|
||||
|
||||
$component = Volt::test('admin.posts.index')
|
||||
->set('search', 'First');
|
||||
|
||||
expect($component->viewData('posts')->total())->toBe(1);
|
||||
});
|
||||
|
||||
// ===========================================
|
||||
// Create Page Tests
|
||||
// ===========================================
|
||||
|
||||
test('admin can view post creation form', function () {
|
||||
$this->actingAs($this->admin)
|
||||
->get(route('admin.posts.create'))
|
||||
->assertOk();
|
||||
});
|
||||
|
||||
test('admin can create post with valid bilingual content', function () {
|
||||
$this->actingAs($this->admin);
|
||||
|
||||
Volt::test('admin.posts.create')
|
||||
->set('title_ar', 'عنوان المقال')
|
||||
->set('title_en', 'Article Title')
|
||||
->set('body_ar', '<p>محتوى المقال</p>')
|
||||
->set('body_en', '<p>Article content</p>')
|
||||
->call('saveDraft')
|
||||
->assertHasNoErrors();
|
||||
|
||||
expect(Post::where('title->en', 'Article Title')->exists())->toBeTrue();
|
||||
});
|
||||
|
||||
test('create post fails with missing required fields', function () {
|
||||
$this->actingAs($this->admin);
|
||||
|
||||
Volt::test('admin.posts.create')
|
||||
->set('title_ar', '')
|
||||
->set('title_en', 'Title')
|
||||
->set('body_ar', 'content')
|
||||
->set('body_en', 'content')
|
||||
->call('save')
|
||||
->assertHasErrors(['title_ar']);
|
||||
});
|
||||
|
||||
test('save draft preserves draft status', function () {
|
||||
$this->actingAs($this->admin);
|
||||
|
||||
Volt::test('admin.posts.create')
|
||||
->set('title_ar', 'عنوان')
|
||||
->set('title_en', 'Title')
|
||||
->set('body_ar', 'محتوى')
|
||||
->set('body_en', 'Content')
|
||||
->call('saveDraft');
|
||||
|
||||
expect(Post::first()->status)->toBe(PostStatus::Draft);
|
||||
});
|
||||
|
||||
test('publish changes status to published', function () {
|
||||
$this->actingAs($this->admin);
|
||||
|
||||
Volt::test('admin.posts.create')
|
||||
->set('title_ar', 'عنوان')
|
||||
->set('title_en', 'Title')
|
||||
->set('body_ar', 'محتوى')
|
||||
->set('body_en', 'Content')
|
||||
->call('publish');
|
||||
|
||||
expect(Post::first()->status)->toBe(PostStatus::Published);
|
||||
expect(Post::first()->published_at)->not->toBeNull();
|
||||
});
|
||||
|
||||
test('HTML sanitization removes script tags but keeps allowed formatting', function () {
|
||||
$this->actingAs($this->admin);
|
||||
|
||||
Volt::test('admin.posts.create')
|
||||
->set('title_ar', 'عنوان')
|
||||
->set('title_en', 'Title')
|
||||
->set('body_ar', '<p>نص</p>')
|
||||
->set('body_en', '<p>Safe</p><script>alert("xss")</script><strong>Bold</strong>')
|
||||
->call('saveDraft');
|
||||
|
||||
$post = Post::first();
|
||||
expect($post->body['en'])->not->toContain('<script>');
|
||||
expect($post->body['en'])->toContain('<strong>Bold</strong>');
|
||||
});
|
||||
|
||||
test('admin log created on post create', function () {
|
||||
$this->actingAs($this->admin);
|
||||
|
||||
Volt::test('admin.posts.create')
|
||||
->set('title_ar', 'عنوان')
|
||||
->set('title_en', 'Title')
|
||||
->set('body_ar', 'محتوى')
|
||||
->set('body_en', 'Content')
|
||||
->call('saveDraft');
|
||||
|
||||
expect(AdminLog::where('action', 'create')
|
||||
->where('target_type', 'post')
|
||||
->exists())->toBeTrue();
|
||||
});
|
||||
|
||||
test('preview modal can be opened and closed', function () {
|
||||
$this->actingAs($this->admin);
|
||||
|
||||
Volt::test('admin.posts.create')
|
||||
->assertSet('showPreview', false)
|
||||
->call('preview')
|
||||
->assertSet('showPreview', true)
|
||||
->call('closePreview')
|
||||
->assertSet('showPreview', false);
|
||||
});
|
||||
|
||||
// ===========================================
|
||||
// Edit Page Tests
|
||||
// ===========================================
|
||||
|
||||
test('admin can view post edit form', function () {
|
||||
$post = Post::factory()->create();
|
||||
|
||||
$this->actingAs($this->admin)
|
||||
->get(route('admin.posts.edit', $post))
|
||||
->assertOk();
|
||||
});
|
||||
|
||||
test('edit form is populated with existing data', function () {
|
||||
$post = Post::factory()->create([
|
||||
'title' => ['ar' => 'عنوان قديم', 'en' => 'Old Title'],
|
||||
'body' => ['ar' => 'محتوى قديم', 'en' => 'Old Content'],
|
||||
]);
|
||||
|
||||
$this->actingAs($this->admin);
|
||||
|
||||
Volt::test('admin.posts.edit', ['post' => $post])
|
||||
->assertSet('title_ar', 'عنوان قديم')
|
||||
->assertSet('title_en', 'Old Title')
|
||||
->assertSet('body_ar', 'محتوى قديم')
|
||||
->assertSet('body_en', 'Old Content');
|
||||
});
|
||||
|
||||
test('edit existing post updates content', function () {
|
||||
$post = Post::factory()->create(['title' => ['ar' => 'عنوان', 'en' => 'Original']]);
|
||||
|
||||
$this->actingAs($this->admin);
|
||||
|
||||
Volt::test('admin.posts.edit', ['post' => $post])
|
||||
->set('title_en', 'Updated')
|
||||
->call('save')
|
||||
->assertHasNoErrors();
|
||||
|
||||
expect($post->fresh()->title['en'])->toBe('Updated');
|
||||
});
|
||||
|
||||
test('auto-save only fires for draft posts', function () {
|
||||
$post = Post::factory()->published()->create(['title' => ['ar' => 'عنوان', 'en' => 'Original']]);
|
||||
|
||||
$this->actingAs($this->admin);
|
||||
|
||||
Volt::test('admin.posts.edit', ['post' => $post])
|
||||
->set('title_en', 'Changed')
|
||||
->call('autoSave');
|
||||
|
||||
// Published post should NOT be auto-saved
|
||||
expect($post->fresh()->title['en'])->toBe('Original');
|
||||
});
|
||||
|
||||
test('auto-save updates draft posts', function () {
|
||||
$post = Post::factory()->draft()->create(['title' => ['ar' => 'عنوان', 'en' => 'Original']]);
|
||||
|
||||
$this->actingAs($this->admin);
|
||||
|
||||
Volt::test('admin.posts.edit', ['post' => $post])
|
||||
->set('title_en', 'Auto-saved Title')
|
||||
->call('autoSave');
|
||||
|
||||
expect($post->fresh()->title['en'])->toBe('Auto-saved Title');
|
||||
});
|
||||
|
||||
test('admin log created on post update', function () {
|
||||
$post = Post::factory()->create();
|
||||
|
||||
$this->actingAs($this->admin);
|
||||
|
||||
Volt::test('admin.posts.edit', ['post' => $post])
|
||||
->set('title_en', 'Updated Title')
|
||||
->call('save');
|
||||
|
||||
expect(AdminLog::where('action', 'update')
|
||||
->where('target_type', 'post')
|
||||
->where('target_id', $post->id)
|
||||
->exists())->toBeTrue();
|
||||
});
|
||||
|
||||
// ===========================================
|
||||
// Authorization Tests
|
||||
// ===========================================
|
||||
|
||||
test('non-admin cannot access posts index', function () {
|
||||
$client = User::factory()->individual()->create();
|
||||
|
||||
$this->actingAs($client)
|
||||
->get(route('admin.posts.index'))
|
||||
->assertForbidden();
|
||||
});
|
||||
|
||||
test('non-admin cannot access post creation', function () {
|
||||
$client = User::factory()->individual()->create();
|
||||
|
||||
$this->actingAs($client)
|
||||
->get(route('admin.posts.create'))
|
||||
->assertForbidden();
|
||||
});
|
||||
|
||||
test('non-admin cannot access post edit', function () {
|
||||
$client = User::factory()->individual()->create();
|
||||
$post = Post::factory()->create();
|
||||
|
||||
$this->actingAs($client)
|
||||
->get(route('admin.posts.edit', $post))
|
||||
->assertForbidden();
|
||||
});
|
||||
|
||||
test('guest cannot access posts index', function () {
|
||||
$this->get(route('admin.posts.index'))
|
||||
->assertRedirect(route('login'));
|
||||
});
|
||||
|
||||
// ===========================================
|
||||
// Validation Tests
|
||||
// ===========================================
|
||||
|
||||
test('all title fields are required', function () {
|
||||
$this->actingAs($this->admin);
|
||||
|
||||
Volt::test('admin.posts.create')
|
||||
->set('title_ar', '')
|
||||
->set('title_en', '')
|
||||
->set('body_ar', 'content')
|
||||
->set('body_en', 'content')
|
||||
->call('save')
|
||||
->assertHasErrors(['title_ar', 'title_en']);
|
||||
});
|
||||
|
||||
test('all body fields are required', function () {
|
||||
$this->actingAs($this->admin);
|
||||
|
||||
Volt::test('admin.posts.create')
|
||||
->set('title_ar', 'عنوان')
|
||||
->set('title_en', 'Title')
|
||||
->set('body_ar', '')
|
||||
->set('body_en', '')
|
||||
->call('save')
|
||||
->assertHasErrors(['body_ar', 'body_en']);
|
||||
});
|
||||
|
||||
// ===========================================
|
||||
// Post Model Tests
|
||||
// ===========================================
|
||||
|
||||
test('post has bilingual title accessor', function () {
|
||||
$post = Post::factory()->create(['title' => ['ar' => 'عنوان', 'en' => 'Title']]);
|
||||
|
||||
app()->setLocale('ar');
|
||||
expect($post->getTitle())->toBe('عنوان');
|
||||
|
||||
app()->setLocale('en');
|
||||
expect($post->getTitle())->toBe('Title');
|
||||
});
|
||||
|
||||
test('post has bilingual body accessor', function () {
|
||||
$post = Post::factory()->create(['body' => ['ar' => 'محتوى', 'en' => 'Content']]);
|
||||
|
||||
app()->setLocale('ar');
|
||||
expect($post->getBody())->toBe('محتوى');
|
||||
|
||||
app()->setLocale('en');
|
||||
expect($post->getBody())->toBe('Content');
|
||||
});
|
||||
|
||||
test('post excerpt strips HTML and limits to 150 chars', function () {
|
||||
$post = Post::factory()->create(['body' => ['en' => '<p>'.str_repeat('a', 200).'</p>']]);
|
||||
|
||||
expect(strlen($post->getExcerpt('en')))->toBeLessThanOrEqual(153); // 150 + '...'
|
||||
expect($post->getExcerpt('en'))->not->toContain('<p>');
|
||||
});
|
||||
|
||||
test('published scope returns only published posts', function () {
|
||||
Post::factory()->draft()->create();
|
||||
Post::factory()->published()->create();
|
||||
|
||||
expect(Post::published()->count())->toBe(1);
|
||||
});
|
||||
|
||||
test('draft scope returns only draft posts', function () {
|
||||
Post::factory()->draft()->create();
|
||||
Post::factory()->published()->create();
|
||||
|
||||
expect(Post::draft()->count())->toBe(1);
|
||||
});
|
||||
Loading…
Reference in New Issue