Work on event create/edit page

src/components/SectionDividerWidget/SectionDividerWidget.scss

@@ -0,0 +1,8 @@
+.section-divider-widget {
+  display: flex;
+  margin-top: 12px;
+
+  > span.icon {
+    margin-top: 4px;
+  }
+}

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 <Icon name={IconType.FinlandFlag} />
+  }
+  if (label === "English") {
+    return <Icon name={IconType.GBFlag} />
+  }
+  console.error(`No icon found for label: ${label}`);
+  return null;
+}
+
+class SectionDividerWidget extends React.Component<SectionDividerWidgetProps, SectionDividerWidgetState> {
+  render() {
+    const { label } = this.props;
+
+    return (
+      <h3 className="section-divider-widget">
+        {label}&nbsp;{getIconByLabel(label)}
+      </h3>
+    );
+  }
+}
+
+export default SectionDividerWidget;

src/components/SectionDividerWidget/index.ts

@@ -0,0 +1,2 @@
+import SectionDividerWidget from "./SectionDividerWidget";
+export default SectionDividerWidget;

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[];

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;
 }

src/pages/EventCreatePage/EventCreatePage.scss

@@ -26,7 +26,7 @@
   input[type="text"],
   textarea,
   select {
-    width: 100%;
+    width: 100% !important;
   }
 
   legend {

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<EventCreatePageProps, EventCreateP
   fetchInitialFormData = async (id) => {
     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<EventCreatePageProps, EventCreateP
       payload.tag_id = payload.tags;
       if (payload.id === undefined) {
         const resp = await createEvent(payload);
+        resp.tags = resp.tag_id as any;
         this.setState({
           formData: resp,
           statusMessage: "Event created successfully",
         });
       } else {
         const resp = await updateEvent(payload);
+        resp.tags = resp.tag_id as any;
         this.setState({
           formData: resp,
           statusMessage: "Event updated successfully.",
@@ -120,7 +127,9 @@ class EventCreatePage extends React.Component<EventCreatePageProps, EventCreateP
   }
 
   buildSchema = () => {
-    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<EventCreatePageProps, EventCreateP
     const tomorrowDatetime = tomorrowDate.toISOString();
 
     const schema = {
-      title: formData.id ? formData.title : "New Event",
+      title: formData.id ? formData.title_fi : "New Event",
       type: "object",
-      required: ["title", "location", "description", "content"],
+      required: ["title_fi", "title_en", "location", "description_fi", "description_en", "content_fi", "content_en"],
       properties: {
-        title: {
-          type: "string",
-          title: "Title",
-          default: ""
-        },
-        location: {
-          type: "string",
-          title: "Location",
-          default: "",
-        },
         tags: {
           type: "array",
           title: "Event tags",
           items: {
             type: "number",
             enum: tags.map(t => 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<EventCreatePageProps, EventCreateP
           title: "End time",
           default: tomorrowDatetime,
         },
-        visible: {
-          type: "boolean",
-          title: "Visible",
-          default: true,
-        }
+        finnish_section_divider: {
+          title: "Finnish",
+          type: "string",
+        },
+        title_fi: {
+          type: "string",
+          title: "Title",
+          default: ""
+        },
+        description_fi: {
+          type: "string",
+          title: "Description",
+          default: "",
+        },
+        content_fi: {
+          type: "string",
+          title: "Content",
+          default: "",
+        },
+        english_section_divider: {
+          title: "English",
+          type: "string",
+        },
+        title_en: {
+          type: "string",
+          title: "Title",
+          default: ""
+        },
+        description_en: {
+          type: "string",
+          title: "Description",
+          default: "",
+        },
+        content_en: {
+          type: "string",
+          title: "Content",
+          default: "",
+        },
       }
     };
     return schema;
@@ -186,7 +218,10 @@ class EventCreatePage extends React.Component<EventCreatePageProps, EventCreateP
 
   buildUISchema = () => {
     const uiSchema = {
-      content: {
+      content_fi: {
+        "ui:widget": "textarea",
+      },
+      content_en: {
         "ui:widget": "textarea",
       },
       start_time: {
@@ -195,17 +230,30 @@ class EventCreatePage extends React.Component<EventCreatePageProps, EventCreateP
       end_time: {
         "ui:widget": "datetime",
       },
+      finnish_section_divider: {
+        "ui:widget": "section_divider",
+        "ui:options": {
+          label: false
+        },
+      },
+      english_section_divider: {
+        "ui:widget": "section_divider",
+        "ui:options": {
+          label: false
+        },
+      },
     };
     return uiSchema;
   }
 
   render() {
-    const { error, formData, statusMessage } = this.state;
+    const { error, statusMessage } = this.state;
+    const formData = this.state.formData as Event;
     const schema = this.buildSchema();
     const uiSchema = this.buildUISchema();
 
     const title = formData.id
-      ? `Edit Event "${formData.title}"`
+      ? `Edit Event "${formData.title_fi}"`
       : "Create Event";
 
     return (