Create three panel view (#26)

* Create three panel view

ui/src/views/Ticket.vue

@@ -1,6 +1,9 @@
 <template>
-  <v-main>
-    <div v-if="ticket === undefined" class="text-sm-center py-16">
+  <div>
+    <div v-if="$route.params.id === 'new'">
+      <TicketNew></TicketNew>
+    </div>
+    <div v-else-if="ticket === undefined" class="text-sm-center py-16">
       <v-progress-circular
         indeterminate
         color="primary"
@@ -10,7 +13,7 @@
       >
       </v-progress-circular>
     </div>
-    <v-container v-else>
+    <div v-else>
       <!--v-row-- class="mt-5">
         <v-col>
           <div style="display: flex; justify-content: flex-end" class="pb-1">
@@ -26,7 +29,7 @@
         </v-col>
       </v-row-->
       <v-row class="mt-2">
-        <v-col cols="8">
+        <v-col cols="12" lg="8">
           <h1 class="d-flex">
             <v-menu offset-y>
               <template v-slot:activator="{ on, attrs }">
@@ -222,7 +225,7 @@
             </div>
           </div>
         </v-col>
-        <v-col cols="4">
+        <v-col cols="12" lg="4" >
           <v-btn
             v-if="$store.state.settings.tier === 'enterprise'"
             :to="{ name: 'Graph', params: { col: 'tickets', id: ticket.id } }"
@@ -775,8 +778,8 @@
           </v-dialog>
         </v-col>
       </v-row>
-    </v-container>
-  </v-main>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -799,7 +802,7 @@ import {
   Type,
   TypeColorEnum,
   TaskResponse, PlaybookResponse, UserResponse, TaskTypeEnum, TicketWithTickets,
-} from "../client";
+} from "@/client";
 import {API} from "@/services/api";
 
 import {Dashboard} from "@uppy/vue";
@@ -813,6 +816,7 @@ import {AxiosError, AxiosResponse} from "axios";
 import {DateTime} from "luxon";
 import VueMarkdown from "vue-markdown";
 import JSONHTML from "../components/JSONHTML.vue";
+import TicketNew from "@/views/TicketNew.vue";
 
 interface State {
   valid: boolean;
@@ -879,6 +883,7 @@ interface TaskWithID {
 export default Vue.extend({
   name: "Ticket",
   components: {
+    TicketNew,
     Dashboard,
     ArtifactSnippet,
     TicketSnippet,
@@ -1533,6 +1538,10 @@ export default Vue.extend({
     }
   },
   mounted() {
+    if (this.$route.params.id === 'new') {
+      return
+    }
+
     this.loadTicket();
     API.listUsers().then(response => {
       this.users = response.data;

ui/src/views/TicketList.vue

@@ -1,30 +1,77 @@
 <template>
-  <v-main>
-    <TicketListComponent :type="this.$route.params.type" :query="query" @click="open"></TicketListComponent>
+  <v-main style="min-height: 100vh">
+    <splitpanes class="default-theme" @resize="paneSize = $event[0].size">
+      <pane class="pa-3" :size="paneSize">
+        <TicketListComponent :type="$route.params.type" :query="query" @click="open" @new="opennew"></TicketListComponent>
+      </pane>
+      <pane v-if="this.$route.params.id" class="pa-3" :size="100 - paneSize">
+        <v-row>
+          <v-spacer></v-spacer>
+          <v-btn @click="close" outlined rounded class="mt-3 mr-3">
+            <v-icon>mdi-close</v-icon>
+            Close
+          </v-btn>
+        </v-row>
+        <router-view></router-view>
+      </pane>
+    </splitpanes>
   </v-main>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
 import {TicketResponse} from "@/client";
+import { Splitpanes, Pane } from 'splitpanes';
+import 'splitpanes/dist/splitpanes.css';
 
 import TicketListComponent from "../components/TicketList.vue";
 
 export default Vue.extend({
   name: "TicketList",
-  components: {TicketListComponent},
-  props: ['query'],
+  components: {
+    TicketListComponent,
+    Splitpanes, Pane,
+  },
+  props: ['query', 'type'],
+  data: () => ({
+    paneSize: 30,
+  }),
   methods: {
+    numeric: function (n: any): boolean {
+      return !isNaN(parseFloat(n)) && !isNaN(n - 0);
+    },
     open: function (ticket: TicketResponse) {
-      if (ticket.id === undefined) {
-        return;
-      }
-
       this.$router.push({
         name: "Ticket",
         params: {type: this.$route.params.type, id: ticket.id.toString()}
+      }).then(() => {
+        this.paneSize = 30;
       });
+    },
+    opennew: function () {
+      this.paneSize = 30;
+    },
+    close: function () {
+      this.$router.push({
+        name: "TicketList",
+        params: {type: this.$route.params.type},
+      }).then(() => {
+        this.paneSize = 100;
+      });
+    },
+    hidelist: function () {
+      this.paneSize = 0;
     }
   }
 });
 </script>
+
+<style lang="scss">
+.splitpanes.default-theme .splitpanes__pane {
+  background: none;
+}
+.splitpanes.default-theme .splitpanes__splitter {
+  background: none;
+  border: none;
+}
+</style>

ui/src/views/TicketNew.vue

@@ -1,48 +1,42 @@
 <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>
+  <div class="mt-8">
+    <h2>New {{ $route.params.type | capitalize }}</h2>
+    <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="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-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-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>
+      <v-btn color="green" @click="createTicket" outlined>
+        Create
+      </v-btn>
+    </v-form>
+  </div>
 </template>
 
 <script lang="ts">
@@ -54,7 +48,7 @@ import {
   TicketForm,
   TicketTemplateResponse,
   TicketType
-} from "../client";
+} from "@/client";
 import { API } from "@/services/api";
 
 interface State {