filter in clientes timbres by year

Templates/Clientes/timbres_cliente.html

@@ -35,6 +35,10 @@
         <th scope="col">
           <input id="table_fecha" name="fecha" value="True" type="checkbox" class="form-check-input my_event_cls" >
           Fecha
+          <select id="table_select_anio" class="form-control form-control-sm my_event_cls">
+            <!--option value="2023"></option-->
+          </select>
+
           <select id="table_select_Meses" class="form-control form-control-sm my_event_cls">
             <option value="00">Todos</option>
             <option value="01">Enero</option>
@@ -75,6 +79,7 @@
 {% block scripts %}
 <script>
   function get_pacs(){
+    
     let rfc = '{{request.path}}'
     rfc= Object.values(rfc.split('/'))    
     url = `{% url 'PACS_Retrive_RFCS' %}?RFC=${rfc[2]}`
@@ -110,6 +115,7 @@
 <script>
       let filters = document.getElementById('id_filters').textContent
       let mes = Object.values(filters.split('&'))
+      let year = Object.values(filters.split('&'))
       let PAC = Object.values(filters.split('&'))
       let tipo = Object.values(filters.split('&'))
       let lsearch = Object.values(filters.split('&'))
@@ -118,6 +124,26 @@
       let anc = document.getElementById('home_id')
       let ref=''
 
+      /*Add years to select anio tag*/
+          
+      let anio = parseInt('{{fecha|date:"Y"}}')
+      
+      let fin = anio-5
+      console.log(anio)
+      for(var i = anio; i >= fin ;i--){      
+        let option = document.createElement('option')
+        option.value=i
+        option.text=i
+        table_select_anio.add(option)
+      }
+      
+      
+      year.filter(val=> val.length>0)
+      .filter(val=>val.includes('year'))
+      .forEach((val,index)=>{
+        table_select_anio.value=val.split('=')[1]
+      })
+
       mes.filter(val=> val.length >0)
       .filter(val=>val.includes('mes'))
       .forEach((val,index)=>{
@@ -153,6 +179,7 @@
           item.addEventListener('focusout',event=>{
             ref=`?PAC=${table_select_PAC.value}`
             ref+=`&mes=${table_select_Meses.value}`
+            ref+=`&year=${table_select_anio.value}`
             ref+=`&tipo=${table_tipo.checked}`
             ref+=`&search=${search.value}`
             ref+=`&datepicker=${datepicker.value}`
@@ -163,6 +190,7 @@
           item.addEventListener('change', event=>{
             ref=`?PAC=${table_select_PAC.value}`
             ref+=`&mes=${table_select_Meses.value}`
+            ref+=`&year=${table_select_anio.value}`
             ref+=`&tipo=${table_tipo.checked}`
             ref+=`&search=${search.value}`
             ref+=`&datepicker=${datepicker.value}`
@@ -184,6 +212,13 @@
         anc.click()
       })
 
+      
+      table_select_anio.addEventListener('change',(event)=>{
+        anc.href=''
+        anc.href=ref
+        anc.click()
+      })
+
       table_tipo.addEventListener('click', (event)=>{
           document.getElementById('tipo').checked = table_tipo.checked? true:false;
           if(table_fecha.checked){
@@ -191,9 +226,7 @@
           }
       })
 
-      table_fecha.addEventListener('click', (event)=>{
-          
-
+      table_fecha.addEventListener('click', (event)=>{        
           if(dates.hasAttribute("style")){
               dates.removeAttribute('style')
               datepicker.value=''