WIP : recherche de fiches

src/App.vue

@@ -11,6 +11,7 @@ import Modal from '@/components/base/Modal.vue'
 import FormReply from "@/components/FormReply.vue";
 import TicketApi from "@/services/TicketApi.js";
 import FetchIcon from "@/components/base/FetchIcon.vue";
+import FormSearch from "@/components/FormSearch.vue";
 
 const store = useGlobalStore()
 const storeTicket = useTicketStore();
@@ -18,6 +19,7 @@ const {
   newTickets,
   pendingTickets,
   myTickets,
+  searchTickets,
   originFilter,
   idTicket,
   currentTicket,
@@ -207,7 +209,8 @@ const refreshTicketList = async () => {
             <ticket-list :rows="mapListOfTickets(myTickets)" :key="'new_'+originFilter+'_'+apiCounter"></ticket-list>
           </div>
           <div class="tab-pane" id="search" role="tabpanel" tabindex="0">
-            TO DO
+            <form-search></form-search>
+            <ticket-list :rows="mapListOfTickets(searchTickets)" :key="'new_'+originFilter+'_'+apiCounter"></ticket-list>
           </div>
         </div>
       </div>

src/components/BaseElements/BaseInput.vue

@@ -1,11 +1,5 @@
 <script setup>
-import {nextTick, onMounted, ref, watch} from "vue";
-
-import {useShipmentStore} from '@/stores/shipment.js'
-import {storeToRefs} from "pinia";
-
-const store = useShipmentStore();
-const {currentFocus} = storeToRefs(store);
+import {ref} from "vue";
 
 const props = defineProps({
   label: {
@@ -20,10 +14,6 @@ const props = defineProps({
     type: [String, Number],
     default: ''
   },
-  autoFocus: {
-    type: Boolean,
-    default: false,
-  },
   insideModal: {
     type: Boolean,
     default: false,
@@ -32,30 +22,10 @@ const props = defineProps({
 
 const inputRef = ref(null)
 
-onMounted(() => {
-
-  if (props.autoFocus) {
-
-    if (props.insideModal) {
-      setTimeout(function () {
-        inputRef.value.focus()
-      }, 500);
-    } else {
-      inputRef.value.focus()
-    }
-  }
-});
-
-watch(currentFocus, async (to, from) => {
-  if (to === props.name && from !== props.name) {
-    await nextTick()
-    inputRef.value.focus()
-  }
-});
-
 </script>
 
 <template>
+  <label :class="classLabel" :for="$attrs.hasOwnProperty('id') ? $attrs.id : null" v-if="label">{{ label }}</label>
   <input
       ref="inputRef"
       :value="modelValue"
@@ -65,7 +35,6 @@ watch(currentFocus, async (to, from) => {
     }"
       class="form-control"
   >
-  <label :class="classLabel" :for="$attrs.hasOwnProperty('id') ? $attrs.id : null" v-if="label">{{ label }}</label>
 </template>
 
 <style scoped>

src/components/FormSearch.vue

@@ -0,0 +1,32 @@
+<script setup>
+import BaseInput from "@/components/BaseElements/BaseInput.vue";
+import {ref} from "vue";
+import TicketApi from "@/services/TicketApi.js";
+
+const lastName = ref(null)
+const firstName = ref(null)
+const email = ref(null)
+const id = ref(null)
+const dateFrom = ref(null)
+const dateTo = ref(null)
+
+const search =async () => {
+  await TicketApi.searchTickets(lastName.value, firstName.value, email.value, id.value, null, null)
+}
+
+</script>
+
+<template>
+  <div class="col-lg-4">
+    <base-input label="Nom" :model-value="lastName"></base-input>
+    <base-input label="Prenom" :model-value="firstName"></base-input>
+    <base-input label="Email" :model-value="email" type="email"></base-input>
+    <base-input label="Id Fiche" :model-value="id"></base-input>
+    <button class="btn btn-primary mt-4" @click="search()">Valider</button>
+  </div>
+
+</template>
+
+<style scoped>
+
+</style>

src/services/TicketApi.js

@@ -176,5 +176,8 @@ export default {
     },
     async archiveTickets(archivePeriod) {
         return Api.get('TicketingController', 'archiveTickets', '&archivage_from='+archivePeriod)
+    },
+    async searchTickets(lastName, firstName, email, id, dateFrom, dateTo) {
+        return Api.get('TicketingController', 'searchTickets', '&lastName='+lastName+'&firstName='+firstName+'&email='+email+'&id='+id+'&dateFrom='+dateFrom+'&dateTo='+dateTo)
     }
 }

src/stores/ticket.js

@@ -10,7 +10,8 @@ export const useTicketStore = defineStore('ticket', {
         ticketList: [],
         originFilter: 'ALL',
         idTicket: 0,
-        codeTicket: 0
+        codeTicket: 0,
+        searchTickets: [],
     }),
     getters: {
         newTickets: (state) => splitTicketList(state.ticketList, 'new_tickets', state.originFilter),