product stock management

1 files changed, 93 insertions, 0 deletions

diff --git a/packages/frontend/src/components/form/InputTaxes.tsx b/packages/frontend/src/components/form/InputTaxes.tsx
new file mode 100644
index 0000000..666c16e
--- /dev/null
+++ b/packages/frontend/src/components/form/InputTaxes.tsx
@@ -0,0 +1,93 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { h } from "preact";
+import { InputArray } from "./InputArray";
+import { AMOUNT_REGEX, PAYTO_REGEX } from "../../utils/constants";
+import { useConfigContext } from "../../context/backend";
+import { Amount, MerchantBackend } from "../../declaration";
+import { FormErrors, FormProvider, useField } from "./Field";
+import { useCallback, useState } from "preact/hooks";
+import { InputCurrency } from "./InputCurrency";
+import { Input } from "./Input";
+import { TaxSchema as schema } from '../../schemas'
+import * as yup from 'yup';
+import { InputGroup } from "./InputGroup";
+
+export interface Props<T> {
+  name: keyof T;
+  readonly?: boolean;
+  isValid?: (e: any) => boolean;
+}
+type Entity = MerchantBackend.Tax
+export function InputTaxes<T>({ name, readonly }: Props<T>) {
+  const { error, value: taxes, onChange, } = useField<T>(name);
+
+  const [value, valueHandler] = useState<Partial<Entity>>({})
+  const [errors, setErrors] = useState<FormErrors<Entity>>({})
+
+  const submit = useCallback((): void => {
+    try {
+      schema.validateSync(value, { abortEarly: false })
+      onChange([value as any, ...taxes] as any)
+      valueHandler({})
+    } catch (err) {
+      const errors = err.inner as yup.ValidationError[]
+      const pathMessages = errors.reduce((prev, cur) => !cur.path ? prev : ({ ...prev, [cur.path]: { type: cur.type, params: cur.params, message: cur.message } }), {})
+      setErrors(pathMessages)
+    }
+  }, [value])
+
+  return (
+    <InputGroup name="tax" alternative={taxes.length > 0 && <p>this product has {taxes.length} taxes</p>}>
+      <FormProvider<Entity> name="tax" errors={errors} object={value} valueHandler={valueHandler} >
+
+        <div class="field is-horizontal">
+          <div class="field-label is-normal">
+          </div>
+          <div class="field-body" style={{ display: 'block' }}>
+            {taxes.map((v: any) => <div class="tags has-addons mt-3 mb-0 mr-3" style={{ flexWrap: 'nowrap' }}>
+              <span class="tag is-medium is-info mb-0" style={{ maxWidth: '90%' }}><b>{v.tax}</b>: {v.name}</span>
+              <a class="tag is-medium is-danger is-delete mb-0" onClick={() => {
+                onChange(taxes.filter((f: any) => f !== v) as any);
+                valueHandler(v);
+              }} />
+            </div>
+            )}
+            {!taxes.length && 'this product has no taxes'}
+          </div>
+        </div>
+
+        <Input<Entity> name="tax" >
+          currency and value separated with colon <b>USD:2.3</b>
+        </Input>
+
+        <Input<Entity> name="name" />
+
+        <div class="buttons is-right mt-5">
+          <button class="button is-info" onClick={submit}>add</button>
+        </div>
+
+
+      </FormProvider>
+    </InputGroup>
+  )
+}
+