Initial commit - CMS Gov Bapenda Garut dengan EditorJS
This commit is contained in:
170
app/Views/admin/news/form.php
Normal file
170
app/Views/admin/news/form.php
Normal file
@@ -0,0 +1,170 @@
|
||||
<?= $this->extend('admin/layout') ?>
|
||||
|
||||
<?= $this->section('content') ?>
|
||||
<div class="space-y-5 sm:space-y-6">
|
||||
<!-- Page Header -->
|
||||
<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white/90">
|
||||
<?= $news ? 'Edit Berita' : 'Tambah Berita' ?>
|
||||
</h2>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
<?= $news ? 'Ubah informasi berita' : 'Tambahkan berita baru' ?>
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
href="<?= base_url('admin/news') ?>"
|
||||
class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]"
|
||||
>
|
||||
<i class="fe fe-arrow-left"></i>
|
||||
Kembali
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Flash Messages sudah ditangani di layout.php -->
|
||||
|
||||
<!-- Form -->
|
||||
<div class="rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div class="p-5 sm:p-6">
|
||||
<form
|
||||
action="<?= $news ? base_url('admin/news/update/' . $news['id']) : base_url('admin/news/store') ?>"
|
||||
method="post"
|
||||
class="space-y-6"
|
||||
>
|
||||
<?= csrf_field() ?>
|
||||
|
||||
<!-- Title -->
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Judul <span class="text-error-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="title"
|
||||
value="<?= old('title', $news['title'] ?? '') ?>"
|
||||
placeholder="Masukkan judul berita"
|
||||
class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
|
||||
required
|
||||
/>
|
||||
<?php if (isset($validation) && $validation->hasError('title')): ?>
|
||||
<p class="mt-1 text-sm text-error-600"><?= esc($validation->getError('title')) ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- Editor.js Container -->
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Konten <span class="text-error-500">*</span>
|
||||
</label>
|
||||
<div id="editorjs" class="min-h-[300px] rounded-lg border border-gray-300 bg-white p-4 dark:border-gray-700 dark:bg-gray-900"></div>
|
||||
|
||||
<!-- Hidden inputs for Editor.js data -->
|
||||
<input type="hidden" name="content" id="content" value="<?= esc($news['content'] ?? '') ?>">
|
||||
<input type="hidden" name="content_json" id="content_json" value="<?= esc($news['content_json'] ?? '') ?>">
|
||||
<input type="hidden" name="content_html" id="content_html" value="<?= esc($news['content_html'] ?? '') ?>">
|
||||
<input type="hidden" name="excerpt" id="excerpt" value="<?= esc($news['excerpt'] ?? '') ?>">
|
||||
|
||||
<?php if (isset($validation) && $validation->hasError('content')): ?>
|
||||
<p class="mt-1 text-sm text-error-600"><?= esc($validation->getError('content')) ?></p>
|
||||
<?php endif; ?>
|
||||
<?php if (isset($validation) && $validation->hasError('content_json')): ?>
|
||||
<p class="mt-1 text-sm text-error-600"><?= esc($validation->getError('content_json')) ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- Status -->
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Status <span class="text-error-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
name="status"
|
||||
class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:focus:border-brand-800"
|
||||
required
|
||||
>
|
||||
<option value="">Pilih Status</option>
|
||||
<option value="draft" <?= old('status', $news['status'] ?? '') === 'draft' ? 'selected' : '' ?>>
|
||||
Draft
|
||||
</option>
|
||||
<option value="published" <?= old('status', $news['status'] ?? '') === 'published' ? 'selected' : '' ?>>
|
||||
Published
|
||||
</option>
|
||||
</select>
|
||||
<?php if (isset($validation) && $validation->hasError('status')): ?>
|
||||
<p class="mt-1 text-sm text-error-600"><?= esc($validation->getError('status')) ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- Form Actions -->
|
||||
<div class="flex items-center gap-3 border-t border-gray-100 pt-6 dark:border-gray-800">
|
||||
<button
|
||||
type="submit"
|
||||
class="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600"
|
||||
>
|
||||
<i class="fe fe-save"></i>
|
||||
<?= $news ? 'Simpan Perubahan' : 'Simpan Berita' ?>
|
||||
</button>
|
||||
<a
|
||||
href="<?= base_url('admin/news') ?>"
|
||||
class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]"
|
||||
>
|
||||
Batal
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Editor.js Bundle (Built by Vite) -->
|
||||
<?php
|
||||
// Get manifest file to load hashed assets
|
||||
$manifestPath = FCPATH . 'assets/editor/.vite/manifest.json';
|
||||
$editorJsPath = base_url('assets/editor/editor.js'); // Fallback
|
||||
|
||||
if (file_exists($manifestPath)) {
|
||||
$manifest = json_decode(file_get_contents($manifestPath), true);
|
||||
if (isset($manifest['resources/js/editor/editor.js'])) {
|
||||
$editorJsPath = base_url('assets/editor/' . $manifest['resources/js/editor/editor.js']['file']);
|
||||
}
|
||||
}
|
||||
?>
|
||||
<script src="<?= $editorJsPath ?>"></script>
|
||||
<script>
|
||||
// CSRF & Endpoints for Editor.js
|
||||
window.csrfTokenName = '<?= csrf_token() ?>';
|
||||
window.csrfTokenValue = '<?= csrf_hash() ?>';
|
||||
window.csrfHeaderName = '<?= csrf_header() ?>';
|
||||
window.uploadEndpoint = '<?= base_url('admin/upload') ?>';
|
||||
window.linkPreviewEndpoint = '<?= base_url('admin/link-preview') ?>';
|
||||
window.newsId = <?= $news ? $news['id'] : 'null' ?>;
|
||||
|
||||
// Fix Editor.js toolbar z-index to stay below header
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.ce-toolbar,
|
||||
.ce-inline-toolbar,
|
||||
.ce-popover,
|
||||
.ce-conversion-toolbar,
|
||||
.ce-settings,
|
||||
.ce-block-settings,
|
||||
.ce-toolbar__plus,
|
||||
.ce-toolbar__settings-btn,
|
||||
.ce-popover__item,
|
||||
.ce-popover__items,
|
||||
.ce-settings__button {
|
||||
z-index: 10 !important;
|
||||
}
|
||||
header,
|
||||
header[class*="sticky"],
|
||||
header[class*="fixed"] {
|
||||
z-index: 99999 !important;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
});
|
||||
</script>
|
||||
|
||||
<?= $this->endSection() ?>
|
||||
|
||||
Reference in New Issue
Block a user