Style fixes and implement datetime inputs

src/pages/AdminCommonPage/AdminCommonPage.scss

@@ -7,6 +7,11 @@
   align-items: flex-start;
   flex: 1;
 
+  > div[class$='page'] {
+    margin: 0 1rem;
+    width: 100%;
+  }
+
   label {
     margin-bottom: 0.5rem;
   }
@@ -29,6 +34,7 @@
   }
 
   .error {
+    margin-bottom: 0.5rem;
     border: 1px solid $orange2;
     padding: 8px 16px;
     color: $orange2;

src/pages/AdminEventPage/AdminEventPage.scss

@@ -1,9 +1,6 @@
 @import "../../assets/scss/globals";
 
 .admin-event-page {
-  margin: 0 1rem;
-  width: 100%;
-
   table {
     border-collapse: collapse;
   }

src/pages/AdminFeedPage/AdminFeedPage.scss

@@ -1,9 +1,6 @@
 @import "../../assets/scss/globals";
 
 .admin-feed-page {
-  margin: 0 1rem;
-  width: 100%;
-
   table {
     border-collapse: collapse;
   }

src/pages/AdminFrontPage/AdminFrontPage.scss

@@ -1,6 +1,4 @@
 .admin-front-page {
-  margin: 0 1rem;
-
   a {
     text-decoration: underline;
     display: block;

src/pages/AdminLoginPage/AdminLoginPage.tsx

@@ -107,8 +107,9 @@ class AdminLoginPage extends React.Component<AdminLoginPageProps, AdminLoginPage
         <Helmet>
           <link rel="canonical" href="https://sik.ayy.fi/admin/login" />
         </Helmet>
+        <h1>Log in to SIK Admin</h1>
         { next && next !== DEFAULT_REDIRECT && (
-          <div>You have to log in first.</div>
+          <div className="error">You have to log in first.</div>
         ) }
         <form className="admin-login-form" onSubmit={this.handleSubmit}>
           <label>Username

src/pages/EventCreatePage/EventCreatePage.scss

@@ -16,8 +16,18 @@
   }
 
   input[type="text"],
-  option {
-    min-width: 12rem;
+  textarea {
+    max-width: 20rem;
+    width: 100%;
+    padding: 0.5rem 0.5rem;
+    border: none;
+    overflow: visible;
+    box-sizing: border-box;
+  }
+
+  select {
+    max-width: 20rem;
+    width: 100%;
   }
 
   legend {
@@ -33,4 +43,22 @@
     outline: none;
     cursor: pointer;
   }
+
+  .checkbox {
+    label {
+      display: flex;
+
+      input {
+        margin-right: 0.5rem;
+      }
+    }
+  }
+
+  .datetime-widget {
+    display: flex;
+    flex-flow: row nowrap;
+    width: 100%;
+    max-width: 20rem;
+    justify-content: space-between;
+  }
 }

src/pages/EventCreatePage/EventCreatePage.tsx

@@ -6,6 +6,29 @@ import Form from "react-jsonschema-form";
 import { Tag, getTags } from "../../models/Tag";
 import { createEvent } from "../../models/Event";
 
+const DateTimeWidget = ({ value, onChange, required }) => {
+  const [date, rest] = value.split("T");
+  const time = rest.slice(0, 5);
+  return (
+    <div className="datetime-widget">
+      <input
+        type="date"
+        onChange={(event) => onChange(`${event.target.value}T${time}`)}
+        required={required}
+        value={date} />
+      <input
+        type="time"
+        onChange={(event) => onChange(`${date}T${event.target.value}:00`)}
+        required={required}
+        value={time} />
+    </div>
+  );
+};
+
+const widgets = {
+  datetime: DateTimeWidget,
+};
+
 export interface EventCreatePageProps {
   history: {
     push: (to: string) => void;
@@ -14,6 +37,7 @@ export interface EventCreatePageProps {
 export interface EventCreatePageState {
   tags: Tag[];
   error?: string;
+  formData: any;
 }
 
 class EventCreatePage extends React.Component<EventCreatePageProps, EventCreatePageState> {
@@ -21,6 +45,7 @@ class EventCreatePage extends React.Component<EventCreatePageProps, EventCreateP
     super(props);
     this.state = {
       tags: [],
+      formData: {},
     };
 
     this.fetchTags();
@@ -49,6 +74,8 @@ class EventCreatePage extends React.Component<EventCreatePageProps, EventCreateP
 
     try {
       const payload = data.formData;
+      payload.signup_id = [];
+      payload.tag_id = payload.tags;
       await createEvent(payload);
       history.push("/admin/events");
     } catch (err) {
@@ -63,12 +90,27 @@ class EventCreatePage extends React.Component<EventCreatePageProps, EventCreateP
     console.log(data);
   }
 
-  render() {
-    const { tags, error } = this.state;
+  onChange = (data) => {
+    console.log("changed, data:");
+    console.log(data);
+    this.setState({
+      formData: data.formData,
+    });
+  }
+
+  buildSchema = () => {
+    const { tags, error, formData } = this.state;
+
+    const date = new Date();
+    const currentDatetime = date.toISOString();
+    const tomorrowDate = new Date();
+    tomorrowDate.setDate(tomorrowDate.getDate() + 1);
+    const tomorrowDatetime = tomorrowDate.toISOString();
+
     const schema = {
       title: "New Event",
       type: "object",
-      required: ["title"],
+      required: ["title", "location", "description", "content"],
       properties: {
         title: {
           type: "string",
@@ -88,10 +130,59 @@ class EventCreatePage extends React.Component<EventCreatePageProps, EventCreateP
             enum: tags.map(t => t.id),
             enumNames: tags.map(t => t.name),
           },
-          uniqueItems: true
+          uniqueItems: true,
+          default: [],
         },
+        description: {
+          type: "string",
+          title: "Description",
+          default: "",
+        },
+        content: {
+          type: "string",
+          title: "Content",
+          default: "",
+        },
+        start_time: {
+          type: "string",
+          title: "Start time",
+          default: currentDatetime,
+        },
+        end_time: {
+          type: "string",
+          title: "End time",
+          default: tomorrowDatetime,
+        },
+        visible: {
+          type: "boolean",
+          title: "Visible",
+          default: true,
+        }
       }
     };
+    return schema;
+  }
+
+  buildUISchema = () => {
+    const uiSchema = {
+      content: {
+        "ui:widget": "textarea",
+      },
+      start_time: {
+        "ui:widget": "datetime",
+      },
+      end_time: {
+        "ui:widget": "datetime",
+      },
+    };
+    return uiSchema;
+  }
+
+  render() {
+    const { error, formData } = this.state;
+    const schema = this.buildSchema();
+    const uiSchema = this.buildUISchema();
+
     return (
       <div className="event-create-page">
         <Helmet>
@@ -99,8 +190,11 @@ class EventCreatePage extends React.Component<EventCreatePageProps, EventCreateP
         </Helmet>
         <h1>Create Event</h1>
         <Form schema={schema}
+              uiSchema={uiSchema}
+              formData={formData}
               idPrefix="rjsf"
-              onChange={() => console.log("changed")}
+              widgets={widgets}
+              onChange={this.onChange}
               onSubmit={this.onSubmit}
               onError={this.onError} />
         { error && <div className="error">{error}</div> }