diff --git a/src/components/SectionDividerWidget/SectionDividerWidget.scss b/src/components/SectionDividerWidget/SectionDividerWidget.scss new file mode 100644 index 0000000..ec018ab --- /dev/null +++ b/src/components/SectionDividerWidget/SectionDividerWidget.scss @@ -0,0 +1,8 @@ +.section-divider-widget { + display: flex; + margin-top: 12px; + + > span.icon { + margin-top: 4px; + } +} diff --git a/src/components/SectionDividerWidget/SectionDividerWidget.tsx b/src/components/SectionDividerWidget/SectionDividerWidget.tsx new file mode 100644 index 0000000..2780b45 --- /dev/null +++ b/src/components/SectionDividerWidget/SectionDividerWidget.tsx @@ -0,0 +1,34 @@ +import * as React from "react"; +import "./SectionDividerWidget.scss"; +import Icon from "../Icon"; +import { IconType } from "../Icon/Icon"; + +export interface SectionDividerWidgetProps { + label: string; +} +export interface SectionDividerWidgetState { } + +const getIconByLabel = (label: string) => { + if (label === "Finnish") { + return + } + if (label === "English") { + return + } + console.error(`No icon found for label: ${label}`); + return null; +} + +class SectionDividerWidget extends React.Component { + render() { + const { label } = this.props; + + return ( +

+ {label} {getIconByLabel(label)} +

+ ); + } +} + +export default SectionDividerWidget; diff --git a/src/components/SectionDividerWidget/index.ts b/src/components/SectionDividerWidget/index.ts new file mode 100644 index 0000000..27d7f9c --- /dev/null +++ b/src/components/SectionDividerWidget/index.ts @@ -0,0 +1,2 @@ +import SectionDividerWidget from "./SectionDividerWidget"; +export default SectionDividerWidget; diff --git a/src/models/Event.ts b/src/models/Event.ts index 30244f8..63579e2 100644 --- a/src/models/Event.ts +++ b/src/models/Event.ts @@ -16,7 +16,7 @@ export interface Event { start_time: string; end_time: string; tags: Tag[]; - tag_id: number[]; + tag_id?: number[]; visible: boolean; signup_id: number[]; signupForm: SignupForm[]; diff --git a/src/models/Tag.ts b/src/models/Tag.ts index 8eb36f3..c5159f5 100644 --- a/src/models/Tag.ts +++ b/src/models/Tag.ts @@ -4,7 +4,8 @@ const url = `${process.env.API_URL}/tags/`; export interface Tag { id: number; - name: string; + name_fi: string; + name_en: string; slug: string; icon: string; } diff --git a/src/pages/EventCreatePage/EventCreatePage.scss b/src/pages/EventCreatePage/EventCreatePage.scss index 1b9d366..6766a0c 100644 --- a/src/pages/EventCreatePage/EventCreatePage.scss +++ b/src/pages/EventCreatePage/EventCreatePage.scss @@ -26,7 +26,7 @@ input[type="text"], textarea, select { - width: 100%; + width: 100% !important; } legend { diff --git a/src/pages/EventCreatePage/EventCreatePage.tsx b/src/pages/EventCreatePage/EventCreatePage.tsx index 08a577a..5a714a2 100644 --- a/src/pages/EventCreatePage/EventCreatePage.tsx +++ b/src/pages/EventCreatePage/EventCreatePage.tsx @@ -4,11 +4,15 @@ import "./EventCreatePage.scss"; import { isAuthenticated } from "../../auth"; import Form from "react-jsonschema-form"; import { Tag, getTags } from "../../models/Tag"; -import { createEvent, getEvent, updateEvent } from "../../models/Event"; +import { createEvent, getEvent, updateEvent, Event } from "../../models/Event"; import DatetimeWidget from "../../components/DatetimeWidget"; +import SectionDividerWidget from "../../components/SectionDividerWidget"; +import Icon from "../../components/Icon"; +import { IconType } from "../../components/Icon/Icon"; const widgets = { datetime: DatetimeWidget, + section_divider: SectionDividerWidget, }; export interface EventCreatePageProps { @@ -47,6 +51,7 @@ class EventCreatePage extends React.Component { try { const data = await getEvent(id); + data.tags = data.tag_id as any; this.setState({ formData: data, }); @@ -84,12 +89,14 @@ class EventCreatePage extends React.Component { - const { tags, error, formData } = this.state; + const { tags, error } = this.state; + + const formData = this.state.formData as Event; const date = new Date(); const currentDatetime = date.toISOString(); @@ -129,39 +138,29 @@ class EventCreatePage extends React.Component t.id), - enumNames: tags.map(t => t.name), + enumNames: tags.map(t => t.name_fi), }, uniqueItems: true, default: [], }, - description: { - type: "string", - title: "Description", - default: "", + visible: { + type: "boolean", + title: "Visible", + default: true, }, - content: { + location: { type: "string", - title: "Content", + title: "Location", default: "", }, start_time: { @@ -174,11 +173,44 @@ class EventCreatePage extends React.Component { const uiSchema = { - content: { + content_fi: { + "ui:widget": "textarea", + }, + content_en: { "ui:widget": "textarea", }, start_time: { @@ -195,17 +230,30 @@ class EventCreatePage extends React.Component