#init

src/components/HelloWorld.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String,
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

src/components/TicketList.vue

@@ -0,0 +1,66 @@
+<script setup>
+import {onMounted, ref} from 'vue';
+import TicketApi from "@/servives/TicketApi.js";
+import {format, formatDistance} from "date-fns";
+import {fr} from 'date-fns/locale';
+
+import {Grid, html} from "gridjs";
+
+const gridWrapper = ref(null)
+
+const grid = new Grid({
+  columns: [
+    {
+      name: 'Fiche',
+      formatter: (cell) => `N° ${cell}`
+    },
+    {
+      name: 'Date de création',
+      formatter: (cell) => format(new Date(cell), 'dd/MM/yyyy HH:mm:ss')
+    }, {
+      name: 'Origine',
+      formatter: (cell, row) => html(`${cell} <br/> ${row.cells[3].data}`)
+
+    },
+    {name: 'Origine 2', hidden: true},
+    {
+      name: 'Voir',
+      formatter: (cell, row) => html('<a href="#" onclick="$(\'#11\').css({\'left\':\'0\',\'display\':\'block\',\'z-index\':\'1\' });window.location=\'#\';Affaire(\'11\',\'0\',\'' + cell.id_last_event + '\',\'' + cell.id + '\',\'4\',\'see\')"><i class="fa-solid fa-eye"></i></a>')
+    },
+    {
+      name: 'Attribuer à',
+      formatter: (cell, row) => {
+        return html('<a href="#" style="text-decoration: none" onclick="$(\'#11\').css({\'left\':\'0\',\'display\':\'block\',\'z-index\':\'1\'});window.location=\'#\';Affaire(\'11\',\'0\',\'' + row.cells[4].data.id_last_event + '\',\'' + row.cells[4].data.id + '\',\'4\',\'see\')"<i class="fa-solid fa-hand-point-down"></i></a>')
+      }
+    },
+    {
+      name: 'Depuis',
+      formatter: (cell) => formatDistance(new Date(cell), new Date(), {addSuffix: true, locale: fr})
+    }, 'Interlocuteur'],
+  server: {
+    url: '/App/api.php?prj=pharmamp',
+    then: data => data.list.map(ticket =>
+        [ticket.code, ticket.datetime, ticket.filter1, ticket.filter2, ticket, ticket.advisor, ticket.datetime, ticket.first_name + ' ' + ticket.last_name]
+    )
+  },
+  sort: true,
+  pagination: {
+    limit: 10,
+    summary: false
+  }
+
+});
+
+onMounted(() => {
+  grid.render(gridWrapper.value)
+})
+
+</script>
+
+<template>
+  <div ref="gridWrapper"></div>
+</template>
+
+<style scoped>
+
+</style>