Release catalyst

ui/src/views/TicketNew.vue

@@ -0,0 +1,170 @@
+<template>
+  <v-main>
+    <v-container>
+      <v-card color="cards">
+        <v-card-title>New {{ $route.params.type | capitalize }}</v-card-title>
+        <v-card-text>
+          <v-form class="create clearfix">
+            <v-text-field label="Title" v-model="name"></v-text-field>
+
+            <v-select
+                label="Playbooks"
+                :items="playbooks"
+                item-text="name"
+                return-object
+                multiple
+                v-model="selectedPlaybooks"
+            ></v-select>
+
+            <v-select
+              label="Template"
+              :items="templates"
+              item-text="name"
+              return-object
+              v-model="selectedTemplate"
+            ></v-select>
+
+            <v-subheader class="pl-0 mt-4" style="height: 20px">Details</v-subheader>
+            <div v-if="selectedTemplate !== undefined" class="details">
+              <v-lazy>
+                <v-jsf
+                  v-model="details"
+                  :options="{ fieldProps: { 'hide-details': true } }"
+                  :schema="selectedSchema"
+                />
+              </v-lazy>
+            </div>
+
+            <v-btn color="green" @click="createTicket" outlined>
+              Create
+            </v-btn>
+          </v-form>
+        </v-card-text>
+      </v-card>
+    </v-container>
+  </v-main>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+
+import {
+  PlaybookTemplateForm,
+  PlaybookTemplateResponse,
+  TicketForm,
+  TicketTemplateResponse,
+  TicketType
+} from "../client";
+import { API } from "@/services/api";
+
+interface State {
+  selectedTemplate?: TicketTemplateResponse;
+  templates: Array<TicketTemplateResponse>;
+
+  selectedPlaybooks: Array<PlaybookTemplateResponse>;
+  playbooks: Array<PlaybookTemplateResponse>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  details: any;
+  name: string;
+  ticketType?: TicketType;
+}
+
+export default Vue.extend({
+  name: "TicketNew",
+  // components: { VJsf },
+  data: (): State => ({
+    selectedTemplate: undefined,
+    templates: [],
+    selectedPlaybooks: [],
+    playbooks: [],
+    name: "",
+    details: {},
+    ticketType: undefined,
+  }),
+  computed: {
+    selectedSchema() {
+      if (
+        this.selectedTemplate === undefined ||
+        this.selectedTemplate.schema === undefined
+      ) {
+        return {};
+      }
+      return JSON.parse(this.selectedTemplate.schema);
+    }
+  },
+  methods: {
+    createTicket: function() {
+      if (
+        this.selectedTemplate === undefined ||
+        this.selectedTemplate?.schema === undefined
+      ) {
+        this.$store.dispatch("alertError", { name: "No template selected" });
+        return;
+      }
+
+      let ticket: TicketForm = {
+        type: this.$route.params.type,
+        name: this.name,
+        details: this.details,
+        schema: this.selectedTemplate?.schema,
+        status: "open",
+        owner: this.$store.state.user.id,
+        playbooks: this.selectedPlaybooks as Array<PlaybookTemplateForm>,
+      };
+
+      API.createTicket(ticket).then(response => {
+        if (response.data.id === undefined) {
+          return;
+        }
+        this.$router.push({
+          name: "Ticket",
+          params: {
+            id: response.data.id.toString(),
+            type: response.data.type,
+          }
+        });
+      });
+    }
+  },
+  mounted() {
+    API.getTicketType(this.$route.params.type).then((response) => {
+      this.ticketType = response.data;
+
+      API.listTemplates().then(response => {
+        this.templates = response.data;
+        this.lodash.forEach(this.templates, (template) => {
+          if (this.ticketType && template.id == this.ticketType.default_template) {
+            this.selectedTemplate = template;
+          }
+        });
+      });
+
+      API.listPlaybooks().then(response => {
+        this.playbooks = response.data;
+        this.lodash.forEach(this.playbooks, (playbook) => {
+          if (this.ticketType && this.lodash.includes(this.ticketType.default_playbooks, playbook.id)) {
+            this.selectedPlaybooks.push(playbook);
+          }
+        });
+      });
+    });
+  },
+});
+</script>
+
+<style>
+.details > .col > .row > .row,
+.details > .col > .row > div > .row {
+  margin-top: 16px !important;
+  padding: 16px !important;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.v-application .create .vjsf-property {
+  margin-bottom: 16px;
+}
+
+.v-application .create .error--text {
+  color: white !important;
+}
+</style>