✨ Invoices pane migrate to react

Som-Energia · Mar 11, 2024 · 9f6db68 · 9f6db68
1 parent d6714bc
commit 9f6db68
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 3 deletions.
diff --git a/tomatic/ui/src/mithril/components/callinfo.js b/tomatic/ui/src/mithril/components/callinfo.js
@@ -259,6 +259,7 @@ CallInfo.contractDetails = subscriptable(function() {
   return {
     atr_cases: contract?.atr_cases ?? null,
     lectures_comptadors: contract?.lectures_comptadors ?? null,
+    invoices: contract?.invoices ?? null,
   }
 })
 
@@ -279,13 +280,15 @@ CallInfo.selectedContract = subscriptable(function () {
 CallInfo.selectContract = function (idx) {
   CallInfo.currentContract = idx
   CallInfo.selectedContract.notify()
+  CallInfo.contractDetails.notify()
 }
 
 CallInfo.selectPartner = function (idx) {
   CallInfo.currentPerson = idx
   CallInfo.currentContract = 0
   CallInfo.selectedPartner.notify()
   CallInfo.selectedContract.notify()
+  CallInfo.contractDetails.notify()
 }
 
 var retrieveInfo = function () {

diff --git a/tomatic/ui/src/pages/CallinfoPage/DetailsInfo.js b/tomatic/ui/src/pages/CallinfoPage/DetailsInfo.js
@@ -4,6 +4,7 @@ import CircularProgress from '@mui/material/CircularProgress'
 import m from '../../services/hyperscript'
 import TabbedCard from './TabbedCard'
 import AtrCases from './AtrCases'
+import Invoices from './Invoices'
 import Meterings from './Meterings'
 import CallInfo from '../../mithril/components/callinfo'
 import { useSubscriptable } from '../../services/subscriptable'
@@ -29,8 +30,8 @@ export default function DetailsInfo() {
         labels={['ATR', 'Factures', 'Lectures']}
       >
         <Box className="contract-info-box">
-          {activeView === 0 && <AtrCases />}
-          {/* activeView === 1 && <Invoices invoices={contract.invoices} /> */}
+          { activeView === 0 && <AtrCases />}
+          { activeView === 1 && <Invoices /> }
           { activeView === 2 && <Meterings /> }
         </Box>
       </TabbedCard>

diff --git a/tomatic/ui/src/pages/CallinfoPage/Invoices.js b/tomatic/ui/src/pages/CallinfoPage/Invoices.js
@@ -0,0 +1,77 @@
+import React from 'react'
+import Box from '@mui/material/Box'
+import CircularProgress from '@mui/material/CircularProgress'
+import CallInfo from '../../mithril/components/callinfo'
+import { useSubscriptable } from '../../services/subscriptable'
+
+export default function Invoices() {
+  const contract = useSubscriptable(CallInfo.selectedContract)
+  const invoices = useSubscriptable(
+    CallInfo.contractDetails,
+  ).invoices
+  console.log("Invoices render")
+  if (invoices === null) {
+    return (
+      <Box className="factures">
+        <Box className="loading  layout vertical center">
+          {'Carregant factures...'}
+          <CircularProgress />
+        </Box>
+      </Box>
+    )
+  }
+  if (invoices.length === 0) {
+    return (
+      <Box className="factures">
+        <Box className="loading  layout vertical center">
+          {'No hi ha factures disponibles'}
+        </Box>
+      </Box>
+    )
+  }
+  return (
+    <Box className="factures">
+      {invoices.map(function (invoice, i) {
+        return (
+          <Box className="factura-info-item">
+            <Box>
+              <Box className="label-right">
+                {invoice.initial_date + ' ⇨ ' + invoice.final_date}
+              </Box>
+              <Box>
+                <Box className="label">{'Factura'}</Box>
+                {invoice.number}
+              </Box>
+            </Box>
+            <Box>
+              <Box className="label">{'Empresa'}</Box>
+              {invoice.payer}
+            </Box>
+            <table>
+              <thead>
+                <tr>
+                  <th>{'Total'}</th>
+                  <th>{'Energia'}</th>
+                  <th>{'Dies'}</th>
+                  <th>{'Emissió'}</th>
+                  <th>{'Venciment'}</th>
+                  <th>{'Estat'}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr key={i}>
+                  <td>{invoice.amount}</td>
+                  <td>{invoice.energy_invoiced}</td>
+                  <td>{invoice.days_invoiced}</td>
+                  <td>{invoice.invoice_date}</td>
+                  <td>{invoice.due_date}</td>
+                  <td>{invoice.state}</td>
+                </tr>
+              </tbody>
+            </table>
+          </Box>
+        )
+      })}
+    </Box>
+  )
+}
diff --git a/tomatic/ui/src/services/tomatic.js b/tomatic/ui/src/services/tomatic.js
@@ -120,11 +120,12 @@ Tomatic.restoreLine = function (line) {
   Tomatic.requestQueue('/resume/' + line)
 }
 
+const queueRefreshPeriodSeconds = 2 * 60 // TODO: config param
 Tomatic.queueTimer = 0
 Tomatic.updateQueuePeriodically = function () {
   console.log('Refreshing queue')
   clearTimeout(Tomatic.queueTimer)
-  Tomatic.queueTimer = setTimeout(Tomatic.updateQueuePeriodically, 10 * 1000)
+  Tomatic.queueTimer = setTimeout(Tomatic.updateQueuePeriodically, queueRefreshPeriodSeconds * 1000)
   Tomatic.requestQueue()
 }