frontend/marko/page/story/components/add-story-modal/component.js

const moment = require("moment")

const {storyApi} = require("../../../../../rpdata/api/Story")

module.exports = class {
  onCreate() {
    this.state = {
      error: null,
      values: {
        name: "",
        fictionalDate: "",
        category: "Info",
        open: false,
        listed: false,
      },
      tags: [],
      loading: false,
    }

    this.filled = false
  }

  addTag(tag) {
    if (tag.name == "" || tag.kind == "") {
      return
    }

    this.state.tags = this.state.tags.filter(t => t.kind !== tag.kind || t.name !== tag.name).concat([tag])
  }

  removeTag(tag) {
    this.state.tags = this.state.tags.filter(t => t.kind !== tag.kind || t.name !== tag.name)
  }

  change(key, ev) {
    this.state.values[key] = ev.target.value
    this.state.values = Object.assign({}, this.state.values)
  }

  save() {
    const values = this.state.values
    
    let fictionalDate = new Date(values.fictionalDate + " UTC")
    if (values.fictionalDate != "") {
      if (Number.isNaN(fictionalDate)) {
        this.state.error = `Could not parse ${values.fictionalDate} as date`
        return
      }
    } else {
      fictionalDate = null
    }
    
    const input = {name: values.name, category: values.category, open: values.open, listed: values.listed, tags: this.state.tags}
    if (fictionalDate != null) {
      input.fictionalDate = fictionalDate
    }

    this.state.loading = true
    storyApi.add(input).then(data => {
      this.emit("add", data)
      this.emit("close")

      this.state.tags = []
      this.state.values = {name: "", fictionalDate: "", category: "", open: "", listed: ""}

      window.location = `/story/${data.id}/`
    }).catch(errs => {
      console.warn("Failed to edit:", errs)
      this.state.error = "Failed to edit: " + errs[0].message
      this.state.loading = false
    })
  }

  close() {
    this.emit("close")
  }
}