#init

src/App.vue

@@ -0,0 +1,52 @@
+<script setup>
+import TicketList from '@/components/TicketList.vue'
+import {onMounted, ref} from 'vue';
+import {Tab} from 'bootstrap'
+
+const tabWrapper = ref(null)
+
+onMounted(() => {
+  new Tab(tabWrapper.value)
+})
+</script>
+
+<template>
+<div class="container-fluid">
+
+  <div class="card">
+    <div class="card-body">
+
+
+
+  <ul class="nav nav-tabs nav-tabs-bordered" id="ticketsList" role="tablist">
+    <li class="nav-item" role="presentation">
+      <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Nouvelles Fiches</button>
+    </li>
+    <li class="nav-item" role="presentation">
+      <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Fiches en cours</button>
+    </li>
+    <li class="nav-item" role="presentation">
+      <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Mes Fiches</button>
+    </li>
+  </ul>
+  <div class="tab-content" id="ticketsListContent">
+    <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
+      <ticket-list></ticket-list>
+    </div>
+    <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
+    <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
+  </div>
+
+</div>
+
+  </div>
+
+</div>
+</template>
+
+<style>
+
+#ticketsListContent{
+  padding-top: 20px;
+}
+</style>

src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

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>

src/main.js

@@ -0,0 +1,13 @@
+import { createApp } from 'vue'
+
+import App from './App.vue'
+
+import "bootstrap/scss/bootstrap.scss";
+import './style.css'
+
+import '@fortawesome/fontawesome-free/css/fontawesome.css'
+import '@fortawesome/fontawesome-free/css/solid.css'
+import '@fortawesome/fontawesome-free/css/regular.css'
+import "gridjs/dist/theme/mermaid.css";
+
+createApp(App).mount('#app')

src/servives/TicketApi.js

@@ -0,0 +1,19 @@
+export default {
+    async getNew() {
+
+        const apiUrl = '/App/api.php?prj=pharmamp';
+
+        if (import.meta.env.DEV) {
+            console.log(apiUrl)
+        }
+
+        const response = await fetch(apiUrl)
+
+        if (import.meta.env.DEV) {
+            console.log(response.clone().text())
+        }
+
+        return response.json();
+
+    },
+}