src/FormView.tsx

   1 // Copyright 2020 Blue Static <https://www.bluestatic.org>
   2 // This program is free software licensed under the GNU General Public License,
   3 // version 3.0. The full text of the license can be found in LICENSE.txt.
   4 // SPDX-License-Identifier: GPL-3.0-only
   5
   6 import { createMemo } from 'solid-js';
   7 import { For } from 'solid-js/dom';
   8 import { TaxReturn, Form } from 'ustaxlib/core';
   9
  10 const S = require('./FormView.css');
  11
  12 interface FormProps {
  13   tr: TaxReturn;
  14   form: Form<any>;
  15 }
  16
  17 export default function FormView(props: FormProps) {
  18   const lines = createMemo(() => {
  19     const keys = Object.keys(props.form.lines);
  20     keys.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
  21     return keys.map(k => props.form.lines[k]);
  22   });
  23
  24   return (
  25     <>
  26       <h2 class={S.formName}>Form {props.form.name}</h2>
  27
  28       <table class={S.table}>
  29         <For each={lines()}>
  30           {line => <Line tr={props.tr} line={line} />}
  31         </For>
  32       </table>
  33     </>
  34   );
  35 }
  36
  37 function Line(props: { tr, line }) {
  38   const { tr, line } = props;
  39   const value = createMemo(() => {
  40     try {
  41       return JSON.stringify(line.value(tr), null, 1);
  42     } catch (e) {
  43       return <span class={S.error} title={e.stack}>{e.message}</span>;
  44     }
  45   });
  46   return (
  47     <tr class={S.line}>
  48       <th class={S.id}>{line.id}</th>
  49       <td class={S.description}>{line.description}</td>
  50       <td class={S.value}>{value()}</td>
  51     </tr>
  52   );
  53 }