ticket list

src/views/tickets/AssignedTicketList.vue

@@ -0,0 +1,22 @@
+<template>
+  <TicketListTable :url="url" />
+</template>
+
+<script>
+import TicketListTable from './TicketListTable'
+export default {
+  name: 'AssignedTicketList',
+  components: {
+    TicketListTable
+  },
+  data() {
+    return {
+      url: 'api/v1/tickets/tickets/?assign=1'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/tickets/MyTicketList.vue

@@ -0,0 +1,22 @@
+<template>
+  <TicketListTable :url="url" />
+</template>
+
+<script>
+import TicketListTable from './TicketListTable'
+export default {
+  name: 'MyTicketList',
+  components: {
+    TicketListTable
+  },
+  data() {
+    return {
+      url: 'api/v1/tickets/tickets/?assign=0'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/tickets/TicketDetail.vue

@@ -0,0 +1,17 @@
+<template>
+  <GenericDetailPage />
+</template>
+
+<script>
+import { GenericDetailPage } from '@/layout/components'
+export default {
+  name: 'TicketDetail',
+  components: {
+    GenericDetailPage
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/tickets/TicketList.vue

@@ -0,0 +1,42 @@
+<template>
+  <TabPage :active-menu.sync="config.activeMenu" :submenu="config.submenu">
+    <keep-alive>
+      <component :is="config.activeMenu" />
+    </keep-alive>
+  </TabPage>
+</template>
+
+<script>
+import { TabPage } from '@/layout/components'
+import AssignedTicketList from './AssignedTicketList'
+import MyTicketList from './MyTicketList'
+export default {
+  name: 'Index',
+  components: {
+    TabPage,
+    AssignedTicketList,
+    MyTicketList
+  },
+  data() {
+    return {
+      config: {
+        activeMenu: 'MyTicketList',
+        submenu: [
+          {
+            title: this.$t('tickets.MyTickets'),
+            name: 'MyTicketList'
+          },
+          {
+            title: this.$t('tickets.AssignedMe'),
+            name: 'AssignedTicketList'
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/tickets/TicketListTable.vue

@@ -0,0 +1,67 @@
+<template>
+  <ListTable :table-config="ticketTableConfig" :header-actions="ticketActions" />
+</template>
+<script>
+import { ListTable } from '@/components'
+import { DetailFormatter } from '@/components/ListTable/formatters'
+export default {
+  name: 'TicketListTable',
+  components: {
+    ListTable
+  },
+  props: {
+    url: {
+      type: String,
+      default: '/api/v1/tickets/tickets/'
+    }
+
+  },
+  data() {
+    return {
+      ticketTableConfig: {
+        url: this.url,
+        columns: [
+          {
+            prop: 'title',
+            label: this.$t('tickets.title'),
+            formatter: DetailFormatter,
+            sortable: 'custom',
+            route: 'TicketDetail'
+          },
+          {
+            prop: 'user_display',
+            label: this.$t('tickets.user'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'type_display',
+            label: this.$t('tickets.type'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'status',
+            label: this.$t('tickets.status'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'date_created',
+            label: this.$t('tickets.date'),
+            sortable: 'custom'
+          }
+        ]
+      },
+      ticketActions: {
+        hasCreate: false,
+        hasBulkDelete: false,
+        hasExport: false,
+        hasImport: false,
+        hasRefresh: false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/tickets/index.js

@@ -2,7 +2,13 @@ export default [
   {
     path: 'tickets',
     name: 'TicketsList',
-    component: () => import('@/views/tickets/TicketsList'),
+    component: () => import('@/views/tickets/TicketList'),
     meta: { title: 'Tickets', icon: 'check-square-o' }
+  },
+  {
+    path: 'tickets/:id',
+    name: 'TicketDetail',
+    component: () => import('@/views/tickets/TicketDetail'),
+    meta: { title: 'TicketDetail', icon: 'check-square-o' }
   }
 ]