webapp/src/components/Views/Create.tsx

228 lines
8.8 KiB
TypeScript
Raw Normal View History

2023-03-23 17:15:50 +00:00
import { createSignal, lazy, onMount, Show, Suspense } from 'solid-js'
2023-02-17 09:21:02 +00:00
import { Loading } from '../_shared/Loading'
import { useLocalize } from '../../context/localize'
import { clsx } from 'clsx'
import styles from './Create.module.scss'
2023-03-13 12:26:25 +00:00
import { Title } from '@solidjs/meta'
2023-03-23 17:15:50 +00:00
import { createStore } from 'solid-js/store'
2023-03-26 18:31:34 +00:00
import type { Topic } from '../../graphql/types.gen'
2023-03-23 17:15:50 +00:00
import { apiClient } from '../../utils/apiClient'
import { TopicSelect } from '../Editor/TopicSelect/TopicSelect'
2023-03-26 18:31:34 +00:00
import { router, useRouter } from '../../stores/router'
import { getPagePath } from '@nanostores/router'
import { translit } from '../../utils/ru2en'
2023-02-11 09:32:52 +00:00
2023-03-08 16:35:13 +00:00
const Editor = lazy(() => import('../Editor/Editor'))
2023-02-11 09:32:52 +00:00
2023-03-23 17:15:50 +00:00
type ShoutForm = {
slug: string
title: string
subtitle: string
selectedTopics: Topic[]
mainTopic: Topic
2023-03-23 17:15:50 +00:00
body: string
coverImageUrl: string
}
2022-11-01 19:27:43 +00:00
export const CreateView = () => {
2023-02-17 09:21:02 +00:00
const { t } = useLocalize()
2023-03-23 17:15:50 +00:00
const [topics, setTopics] = createSignal<Topic[]>(null)
2023-03-26 18:31:34 +00:00
const { page } = useRouter()
const [isSlugChanged, setIsSlugChanged] = createSignal(false)
2023-03-23 17:15:50 +00:00
const [form, setForm] = createStore<ShoutForm>({
slug: '',
title: '',
subtitle: '',
selectedTopics: [],
mainTopic: null,
2023-03-23 17:15:50 +00:00
body: '',
coverImageUrl: ''
})
onMount(async () => {
const allTopics = await apiClient.getAllTopics()
setTopics(allTopics)
})
2023-03-27 14:45:07 +00:00
const handleFormSubmit = async (e) => {
2023-03-23 17:15:50 +00:00
e.preventDefault()
2023-03-27 14:45:07 +00:00
const newShout = await apiClient.createArticle({
article: {
slug: form.slug,
title: form.title,
subtitle: form.subtitle,
body: form.body,
topics: form.selectedTopics.map((topic) => topic.slug),
mainTopic: form.selectedTopics[0].slug
}
})
router.open(getPagePath(router, 'article', { slug: newShout.slug }))
2023-03-23 17:15:50 +00:00
}
2023-03-26 18:31:34 +00:00
const handleTitleInputChange = (e) => {
const title = e.currentTarget.value
setForm('title', title)
if (!isSlugChanged()) {
const slug = translit(title).replaceAll(' ', '-')
setForm('slug', slug)
}
}
const handleSlugInputChange = (e) => {
const slug = e.currentTarget.value
if (slug !== form.slug) {
setIsSlugChanged(true)
}
setForm('slug', slug)
}
2022-09-09 11:53:35 +00:00
return (
2023-03-26 18:31:34 +00:00
<div class={styles.container}>
2023-03-13 12:26:25 +00:00
<Title>{t('Write an article')}</Title>
<Suspense fallback={<Loading />}>
2023-03-23 17:15:50 +00:00
<form onSubmit={handleFormSubmit}>
2023-03-13 12:26:25 +00:00
<div class="wide-container">
<div class="shift-content">
<div class="row">
2023-03-26 16:56:49 +00:00
<div class="col-md-20 col-lg-18 col-xl-16">
2023-03-26 18:31:34 +00:00
<div
class={clsx(styles.create, {
[styles.visible]: page().route === 'create'
})}
>
2023-03-13 12:26:25 +00:00
<input
2023-03-26 18:31:34 +00:00
class={styles.titleInput}
2023-03-13 12:26:25 +00:00
type="text"
2023-03-23 17:15:50 +00:00
name="title"
id="title"
2023-03-26 18:31:34 +00:00
placeholder="Заголовок"
2023-03-23 17:15:50 +00:00
value={form.title}
2023-03-26 18:31:34 +00:00
onChange={handleTitleInputChange}
2023-03-13 12:26:25 +00:00
/>
2023-03-23 17:15:50 +00:00
<input
2023-03-26 18:31:34 +00:00
class={styles.subtitleInput}
2023-03-23 17:15:50 +00:00
type="text"
name="subtitle"
id="subtitle"
placeholder="Подзаголовок"
value={form.subtitle}
onChange={(e) => setForm('subtitle', e.currentTarget.value)}
/>
2023-03-26 18:31:34 +00:00
<Editor onChange={(body) => setForm('body', body)} />
2023-03-26 18:31:34 +00:00
<div class={styles.saveBlock}>
{/*<button class={clsx('button button--outline', styles.button)}>Сохранить</button>*/}
<a href={getPagePath(router, 'createSettings')}>Настройки</a>
</div>
</div>
<div
class={clsx(styles.createSettings, {
[styles.visible]: page().route === 'createSettings'
})}
>
<h1>Настройки публикации</h1>
<h4>Slug</h4>
<div class="pretty-form__item">
<input
type="text"
name="slug"
id="slug"
value={form.slug}
onChange={handleSlugInputChange}
/>
<label for="slug">Slug</label>
</div>
{/*<h4>Лид</h4>*/}
{/*<div class="pretty-form__item">*/}
{/* <textarea name="lead" id="lead" placeholder="Лид"></textarea>*/}
{/* <label for="lead">Лид</label>*/}
{/*</div>*/}
{/*<h4>Выбор сообщества</h4>*/}
{/*<p class="description">Сообщества можно перечислить через запятую</p>*/}
{/*<div class="pretty-form__item">*/}
{/* <input*/}
{/* type="text"*/}
{/* name="community"*/}
{/* id="community"*/}
{/* placeholder="Сообщества"*/}
{/* class="nolabel"*/}
{/* />*/}
{/*</div>*/}
<h4>Темы</h4>
{/*<p class="description">*/}
{/* Добавьте несколько тем, чтобы читатель знал, о&nbsp;чем ваш материал, и&nbsp;мог найти*/}
{/* его на&nbsp;страницах интересных ему тем. Темы можно менять местами, первая тема*/}
{/* становится заглавной*/}
{/*</p>*/}
<div class="pretty-form__item">
<Show when={topics()}>
<TopicSelect
topics={topics()}
onChange={(newSelectedTopics) => setForm('selectedTopics', newSelectedTopics)}
selectedTopics={form.selectedTopics}
/>
</Show>
{/*<input type="text" name="topics" id="topics" placeholder="Темы" class="nolabel" />*/}
</div>
{/*<h4>Соавторы</h4>*/}
{/*<p class="description">У каждого соавтора можно добавить роль</p>*/}
{/*<div class="pretty-form__item--with-button">*/}
{/* <div class="pretty-form__item">*/}
{/* <input type="text" name="authors" id="authors" placeholder="Введите имя или e-mail" />*/}
{/* <label for="authors">Введите имя или e-mail</label>*/}
{/* </div>*/}
{/* <button class="button button--submit">Добавить</button>*/}
{/*</div>*/}
{/*<div class="row">*/}
{/* <div class="col-md-6">Михаил Драбкин</div>*/}
{/* <div class="col-md-6">*/}
{/* <input type="text" name="coauthor" id="coauthor1" class="nolabel" />*/}
{/* </div>*/}
{/*</div>*/}
<h4>Карточка материала на&nbsp;главной</h4>
<p class="description">
Выберите заглавное изображение для статьи, тут сразу можно увидеть как карточка будет
выглядеть на&nbsp;главной странице
2023-03-13 12:26:25 +00:00
</p>
2023-03-26 18:31:34 +00:00
<div class={styles.articlePreview} />
<div class={styles.saveBlock}>
<p>
Проверьте ещё раз введённые данные, если всё верно, вы&nbsp;можете сохранить или
опубликовать ваш текст
</p>
{/*<button class={clsx('button button--outline', styles.button)}>Сохранить</button>*/}
<a href={getPagePath(router, 'create')}>Назад</a>
<button type="submit" class={clsx('button button--submit', styles.button)}>
Опубликовать
</button>
</div>
2023-03-13 12:26:25 +00:00
</div>
</div>
</div>
</div>
</div>
2023-03-13 12:26:25 +00:00
</form>
</Suspense>
2023-03-26 18:31:34 +00:00
</div>
2022-09-09 11:53:35 +00:00
)
}
2022-11-01 19:27:43 +00:00
export default CreateView