web: EntryProposal form implementation.

web/src/views/ProposeEvent.vue

@@ -0,0 +1,89 @@
+<template>
+  <img id="header-splash" src="../assets/welcome-wood.jpg" />
+  <div id="event-proposal" :class="[formState]">
+    <header>
+      <h1>Propose an Event</h1>
+      <h2>Hope Family Fellowship</h2>
+    </header>
+    <form @submit.prevent="proposeEvent">
+      <fieldset :disabled="formState !== 'ready' && formState !== 'invalid'">
+        <label>
+          <span>Event Name</span>
+          <input
+            type="text"
+            name="name"
+            placeholder="e.g. Men's Bible Study"
+            v-model="formVal.event.name"
+          />
+        </label>
+        <label>
+          <span>Date and time</span>
+          <input type="date" name="date" v-model="formVal.event.date" />
+        </label>
+        <label>
+          <span>Department</span>
+          <select name="department" v-model="formVal.event.department">
+            <option value="">--- select a department ---</option>
+            <option
+              v-for="opt in departments"
+              :key="opt.value"
+              class="color-{{opt.color}}"
+            >
+              {{ opt.value }}
+            </option>
+          </select>
+        </label>
+        <label>
+          <span>Owner</span>
+          <input type="text" name="owner" v-model="formVal.event.owner" />
+        </label>
+        <label>
+          <span>Location</span>
+          <textarea v-model="formVal.event.location"></textarea>
+        </label>
+        <label>
+          <span>Purpose</span>
+          <textarea v-model="formVal.event.purpose"></textarea>
+        </label>
+        <label>
+          <span>Description</span>
+          <textarea v-model="formVal.event.description"></textarea>
+        </label>
+        <div class="invalid-message" v-if="formState === 'invalid'">
+          All fields are required.
+        </div>
+        <div class="actions">
+          <button type="submit">
+            <span v-if="formState === 'ready' || formState === 'invalid'"
+              >Propose Event</span
+            >
+            <span v-if="formState === 'submitting'">
+              <SpinnerIcon class="spin" />
+              submitting...
+            </span>
+            <span v-if="formState === 'loading'">
+              <HourGlassIcon class="tumble" />
+              Loading...
+            </span>
+            <span v-if="formState === 'success'">
+              <CircleCheckIcon />
+              Event Proposed!
+            </span>
+            <span v-if="formState === 'error'">
+              <CircleCheckIcon />
+              An error occurred.
+            </span>
+          </button>
+        </div>
+      </fieldset>
+    </form>
+  </div>
+  <div class="successes">
+    <div v-for="s in successes" :key="s">{{ s }}</div>
+  </div>
+  <div class="errors">
+    <div v-for="e in errors" :key="e">{{ s }}</div>
+  </div>
+</template>
+<script lang="ts" src="./ProposeEvent.ts"></script>
+<style scoped lang="scss" src="./ProposeEvent.scss"></style>