Membuat database menu desa: Berita & Pengummuman
This commit is contained in:
85
src/app/admin/(dashboard)/desa/berita/_com/BeritaEditor.tsx
Normal file
85
src/app/admin/(dashboard)/desa/berita/_com/BeritaEditor.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
'use client'
|
||||
import { RichTextEditor, Link } from '@mantine/tiptap';
|
||||
import { useEditor } from '@tiptap/react';
|
||||
import Highlight from '@tiptap/extension-highlight';
|
||||
import StarterKit from '@tiptap/starter-kit';
|
||||
import Underline from '@tiptap/extension-underline';
|
||||
import TextAlign from '@tiptap/extension-text-align';
|
||||
import Superscript from '@tiptap/extension-superscript';
|
||||
import SubScript from '@tiptap/extension-subscript';
|
||||
import { Button, Stack } from '@mantine/core';
|
||||
|
||||
const content =
|
||||
'<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup><sup /></sup> and <sub><sub /></sub> tags)</li><li>Ordered and bullet lists</li><li>Text align </li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';
|
||||
|
||||
export function BeritaEditor({ onSubmit }: { onSubmit: (val: string) => void }) {
|
||||
const editor = useEditor({
|
||||
extensions: [
|
||||
StarterKit,
|
||||
Underline,
|
||||
Link,
|
||||
Superscript,
|
||||
SubScript,
|
||||
Highlight,
|
||||
TextAlign.configure({ types: ['heading', 'paragraph'] }),
|
||||
],
|
||||
content,
|
||||
});
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<RichTextEditor editor={editor}>
|
||||
<RichTextEditor.Toolbar sticky stickyOffset={60}>
|
||||
<RichTextEditor.ControlsGroup>
|
||||
<RichTextEditor.Bold />
|
||||
<RichTextEditor.Italic />
|
||||
<RichTextEditor.Underline />
|
||||
<RichTextEditor.Strikethrough />
|
||||
<RichTextEditor.ClearFormatting />
|
||||
<RichTextEditor.Highlight />
|
||||
<RichTextEditor.Code />
|
||||
</RichTextEditor.ControlsGroup>
|
||||
|
||||
<RichTextEditor.ControlsGroup>
|
||||
<RichTextEditor.H1 />
|
||||
<RichTextEditor.H2 />
|
||||
<RichTextEditor.H3 />
|
||||
<RichTextEditor.H4 />
|
||||
</RichTextEditor.ControlsGroup>
|
||||
|
||||
<RichTextEditor.ControlsGroup>
|
||||
<RichTextEditor.Blockquote />
|
||||
<RichTextEditor.Hr />
|
||||
<RichTextEditor.BulletList />
|
||||
<RichTextEditor.OrderedList />
|
||||
<RichTextEditor.Subscript />
|
||||
<RichTextEditor.Superscript />
|
||||
</RichTextEditor.ControlsGroup>
|
||||
|
||||
<RichTextEditor.ControlsGroup>
|
||||
<RichTextEditor.Link />
|
||||
<RichTextEditor.Unlink />
|
||||
</RichTextEditor.ControlsGroup>
|
||||
|
||||
<RichTextEditor.ControlsGroup>
|
||||
<RichTextEditor.AlignLeft />
|
||||
<RichTextEditor.AlignCenter />
|
||||
<RichTextEditor.AlignJustify />
|
||||
<RichTextEditor.AlignRight />
|
||||
</RichTextEditor.ControlsGroup>
|
||||
|
||||
<RichTextEditor.ControlsGroup>
|
||||
<RichTextEditor.Undo />
|
||||
<RichTextEditor.Redo />
|
||||
</RichTextEditor.ControlsGroup>
|
||||
</RichTextEditor.Toolbar>
|
||||
|
||||
<RichTextEditor.Content />
|
||||
</RichTextEditor>
|
||||
<Button onClick={() => {
|
||||
if (!editor) return
|
||||
onSubmit(editor?.getHTML())
|
||||
}}>Submit</Button>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +1,88 @@
|
||||
import React from 'react';
|
||||
'use client'
|
||||
import { Center, Group, Select, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { Prisma } from '@prisma/client';
|
||||
import { IconImageInPicture } from '@tabler/icons-react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import stateDashboardBerita from '../../_state/berita';
|
||||
import { BeritaEditor } from './_com/BeritaEditor';
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<div>
|
||||
Berita
|
||||
</div>
|
||||
<Stack>
|
||||
<SimpleGrid cols={2}>
|
||||
<BeritaList />
|
||||
<BeritaCreate />
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
function BeritaList() {
|
||||
const beritaState = useProxy(stateDashboardBerita)
|
||||
useShallowEffect(() => {
|
||||
beritaState.berita.findMany.load()
|
||||
}, [])
|
||||
|
||||
if (!beritaState.berita.findMany.data) return <Stack>
|
||||
{Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
|
||||
</Stack>
|
||||
return <Stack>
|
||||
<Text>News List</Text>
|
||||
{beritaState.berita.findMany.data?.map((item) => (
|
||||
<Text key={item.id}>{item.judul}</Text>
|
||||
))}
|
||||
</Stack>
|
||||
}
|
||||
|
||||
function BeritaCreate() {
|
||||
const beritaState = useProxy(stateDashboardBerita)
|
||||
return <Stack gap={"md"}>
|
||||
<Text>Create Some News</Text>
|
||||
<SelectCategory onChange={(val) => {
|
||||
beritaState.berita.create.form.katagoryBeritaId = val.id
|
||||
}} />
|
||||
<TextInput onChange={(val) => {
|
||||
beritaState.berita.create.form.judul = val.target.value
|
||||
}} label={"Judul"} placeholder='masukkan judul' />
|
||||
<TextInput onChange={(val) => {
|
||||
beritaState.berita.create.form.deskripsi = val.target.value
|
||||
}} label={"Deskripsi"} placeholder='masukkan deskripsi' />
|
||||
<Center w={200} h={200} bg={"gray"}>
|
||||
<IconImageInPicture />
|
||||
</Center>
|
||||
<BeritaEditor onSubmit={(val) => {
|
||||
|
||||
beritaState.berita.create.form.content = val
|
||||
beritaState.berita.create.create()
|
||||
}} />
|
||||
</Stack>
|
||||
}
|
||||
|
||||
function SelectCategory({ onChange }: {
|
||||
onChange: (value: Prisma.KatagoryBeritaGetPayload<{
|
||||
select: {
|
||||
name: true,
|
||||
id: true
|
||||
}
|
||||
}>) => void
|
||||
}) {
|
||||
const beritaState = useProxy(stateDashboardBerita)
|
||||
useShallowEffect(() => {
|
||||
beritaState.category.findMany.load()
|
||||
}, [])
|
||||
|
||||
if (!beritaState.category.findMany.data) return <Skeleton h={40} />
|
||||
return <Group>
|
||||
<Select placeholder='pilih katagori' label={"select katagori"} data={beritaState.category.findMany.data.map((item) => ({
|
||||
value: item.id,
|
||||
label: item.name
|
||||
}))} onChange={(v) => {
|
||||
const data = beritaState.category.findMany.data?.find((item) => item.id === v)
|
||||
if (!data) return
|
||||
onChange(data)
|
||||
}} />
|
||||
</Group>
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
||||
@@ -1,11 +1,89 @@
|
||||
'use client'
|
||||
import { Group, Select, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import stateDesaPengumuman from '../../_state/pengumuman';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { Prisma } from '@prisma/client';
|
||||
import { BeritaEditor } from '../berita/_com/BeritaEditor';
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<div>
|
||||
Pengumuman
|
||||
</div>
|
||||
<Stack>
|
||||
<SimpleGrid cols={{
|
||||
base: 1, md: 2
|
||||
}}>
|
||||
<PengumumanList />
|
||||
<PengumumanCreate />
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
function PengumumanList() {
|
||||
const pengumumanState = useProxy(stateDesaPengumuman)
|
||||
useShallowEffect(() => {
|
||||
pengumumanState.pengumuman.findMany.load()
|
||||
}, [])
|
||||
|
||||
if (!pengumumanState.pengumuman.findMany.data) return <Stack>
|
||||
{Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
|
||||
</Stack>
|
||||
return <Stack>
|
||||
<Text>Announcement List</Text>
|
||||
{pengumumanState.pengumuman.findMany.data?.map((item) => (
|
||||
<Text key={item.id}>{item.judul}</Text>
|
||||
))}
|
||||
</Stack>;
|
||||
}
|
||||
|
||||
function PengumumanCreate() {
|
||||
const pengumumanState = useProxy(stateDesaPengumuman)
|
||||
|
||||
|
||||
return <Stack gap={"md"}>
|
||||
<Text>Create Some Announcement</Text>
|
||||
<SelectCategory onChange={(val) => {
|
||||
pengumumanState.pengumuman.create.form.categoryPengumumanId = val.id
|
||||
}} />
|
||||
<TextInput onChange={(val) => {
|
||||
pengumumanState.pengumuman.create.form.judul = val.target.value
|
||||
}} label={"Judul"} placeholder='masukkan judul' />
|
||||
<TextInput onChange={(val) => {
|
||||
pengumumanState.pengumuman.create.form.deskripsi = val.target.value
|
||||
}} label={"Deskripsi"} placeholder='masukkan deskripsi' />
|
||||
<BeritaEditor onSubmit={(val) => {
|
||||
pengumumanState.pengumuman.create.form.content = val
|
||||
pengumumanState.pengumuman.create.create()
|
||||
}} />
|
||||
</Stack>
|
||||
}
|
||||
|
||||
function SelectCategory({ onChange }: {
|
||||
onChange: (value: Prisma.CategoryPengumumanGetPayload<{
|
||||
select: {
|
||||
name: true,
|
||||
id: true
|
||||
}
|
||||
}>) => void
|
||||
}) {
|
||||
const pengumumanState = useProxy(stateDesaPengumuman)
|
||||
useShallowEffect(() => {
|
||||
pengumumanState.category.findMany.load()
|
||||
}, [])
|
||||
|
||||
if (!pengumumanState.category.findMany.data) return <Skeleton h={40} />
|
||||
return <Group>
|
||||
{/* {JSON.stringify(pengumumanState.category.findMany.data)} */}
|
||||
<Select placeholder='pilih kategori' label={"select katagori"} data={pengumumanState.category.findMany.data.map((item) => ({
|
||||
value: item.id,
|
||||
label: item.name
|
||||
}))} onChange={(v) => {
|
||||
const data = pengumumanState.category.findMany.data?.find((item) => item.id === v)
|
||||
if (!data) return
|
||||
onChange(data)
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
}
|
||||
export default Page;
|
||||
|
||||
Reference in New Issue
Block a user