Make form components for participation

imports/components/App.js

@@ -13,6 +13,8 @@ import { Form, FormLayout } from "@shopify/polaris";
 import { SelectComponentForm } from "./SelectComponentForm";
 import { AvailableTypesForm } from "./AvailableTypesForm";
 import { ListForm } from "./ListForm";
+import { ParticipationList } from "./ParticipationList";
+import { ParticipationAdd } from "./ParticipationAdd";
 
 // import SimpleForm from "./SimpleForm";
 // import CustomForm from "./CustomForm";
@@ -86,6 +88,18 @@ export const App = () => {
       content: "List Form",
       panelID: "list-form-content",
       component: ListForm
+    }, 
+    {
+      id: "participation-list-form",
+      content: "Participation List Form",
+      panelID: "participation-list-form-content",
+      component: ParticipationList
+    }, 
+    {
+      id: "participation-add-form",
+      content: "Participation Add Form",
+      panelID: "participation-add-form-content",
+      component: ParticipationAdd
     },    
     {
       id: "available-types-form",

imports/components/ListSchema.js

@@ -7,6 +7,7 @@ export const ListSchema = new SimpleSchema({
   '_listArray.$': Object,
   '_listArray.$.zip': String,
   '_listArray.$.city': String,
+  '_listArray.$.no': String
 });
 
 export const ListBridge = new SimpleSchema2Bridge(

imports/components/ParticipationAdd.js

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import {
+  AutoForm,
+  AutoField,
+  SubmitField,
+  ErrorsField,
+  SelectField
+} from "uniforms-polaris";
+import { TextField, Select, Button } from "@shopify/polaris";
+
+import { ListBridge } from "./ListSchema";
+import connectField from "uniforms/connectField";
+
+export const ParticipationAdd = ({ onSubmit }) => {
+  const model = {
+    _listArray: [{ zip: "1010", city: "Vienna" }, { zip: "8010", city: "Graz" }]
+  };
+  // const model = {};
+  console.log("ListForm", ListBridge);
+
+  return (
+    <React.Fragment>
+      <AutoForm
+        schema={ListBridge}
+        onSubmit={onSubmit}
+        model={model}
+        showInlineError
+      >
+        <ListItems name="_listArray" />
+        <ListItemAdd name="_listArray" />
+      </AutoForm>
+    </React.Fragment>
+  );
+};
+
+const ListItemsBare = ({ onChange, value }) => {
+  console.log("ListItemsBare", value);
+  if (!Array.isArray(value)) {
+    return <div>Not an array passed: {value} </div>;
+  }
+
+  return (
+    <div>
+      {value.map(row => {
+        return (
+          <div key={row.zip}>
+            {row.zip} | {row.city} | {row.no} (x)
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+const ListItems = connectField(ListItemsBare);
+
+const ListItemAddBare = ({ onChange, value }) => {
+  const [participationNo, setParticipationNo] = useState();
+  const [selectedParticipation, setSelectedParticipation] = useState();
+
+  console.log("ListItemAddBare", value);
+  if (!Array.isArray(value)) {
+    return <div>Not an array passed: {value} </div>;
+  }
+
+  const usedZips = value.map(row => row.zip);
+  const zips = ["8010", "1010", "2020"];
+  const unusedZipCodes = zips.filter(x => !usedZips.includes(x));
+
+  const addParticipation = () => {
+    console.log("participationNo", participationNo);
+    console.log("selectedParticipation", selectedParticipation);
+    const newValue = value.map(val => val.zip === selectedParticipation? ({...val, no: participationNo }): val)
+    console.log(newValue);
+    setSelectedParticipation(undefined);
+    onChange(newValue);
+  };
+
+  const options = value.filter(val => !val.no).map(val => ({ label: val.zip, value: val.zip }));
+
+  console.log("unusedZipCodes", unusedZipCodes, usedZips);
+  return (
+    <div>
+      <TextField
+        label="Participation Number"
+        value={participationNo}
+        onChange={value => setParticipationNo(value)}
+      />
+      <Select
+        label="Participations"
+        placeholder=" "
+        options={options}
+        value={selectedParticipation}
+        onChange={value => setSelectedParticipation(value)}
+      />
+      <Button onClick={() => addParticipation()}>
+        add
+      </Button>
+    </div>
+  );
+};
+const ListItemAdd = connectField(ListItemAddBare);

imports/components/ParticipationList.js

@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+import {
+  AutoForm,
+  AutoField,
+  TextField,
+  SubmitField,
+  ErrorsField
+} from "uniforms-polaris";
+
+import { ListBridge } from "./ListSchema";
+import connectField from 'uniforms/connectField';
+
+
+export const ParticipationList = ({ onSubmit }) => {
+  const model = { _listArray: [{zip: "1010", city: "Vienna"}, {zip: "8010", city: "Graz"}] };
+  // const model = {};
+  console.log("ListForm", ListBridge);
+  return (
+    <React.Fragment>
+      <AutoForm
+        schema={ListBridge}
+        onSubmit={onSubmit}
+        model={model}
+        showInlineError={true}
+      >
+        <ListItems name="_listArray" />
+        <ListItemAdd name="_listArray" />
+        {/* <AutoField
+          name="_listArray"
+        /> */}
+
+      </AutoForm>
+    </React.Fragment>
+  );
+};
+
+
+const ListItemsBare = ({ onChange, value }) => {
+  console.log("ListItemsBare", value);
+  if (!Array.isArray(value)) {
+    return <div>Not an array passed: {value} </div>
+  }
+
+  const deleteRow = row => {
+    const newValue = value.filter(val => val.zip !== row.zip);
+    onChange(newValue)
+  }
+
+  return (
+    <div >
+      {value.map((row)=> {
+        return (<div key={row.zip}>{row.zip} | {row.city} (x)
+        <button onClick={()=> {
+        console.log("ListItemtoDelete value", row);
+        deleteRow(row);
+        }}/>
+      </div>)
+      })}
+    </div>
+  );
+}
+const ListItems = connectField(ListItemsBare);
+
+
+const ListItemAddBare = ({ onChange, value }) => {
+  console.log("ListItemAddBare", value);
+  if (!Array.isArray(value)) {
+    return <div>Not an array passed: {value} </div>
+  }
+
+  const usedZips = value.map((row) => row.zip);
+  const zips = ["8010", "1010", "2020"];
+  const unusedZipCodes = zips.filter(x => !usedZips.includes(x));
+
+  if (unusedZipCodes.length === 0) {
+    return <div>All zip codes used!</div>
+  }
+
+  console.log("unusedZipCodes", unusedZipCodes, usedZips);
+  return (
+    <div>
+      unusedZipCodes:  {unusedZipCodes.join(", ")}
+      <button onClick={()=> {
+        if(!unusedZipCodes.includes("2020")) return; 
+        value.push({zip: "2020", city: "Somewhere"})
+        console.log("ListItemAddBare value", value);
+        onChange(value);
+      }}></button>
+    </div>
+  );
+}
+const ListItemAdd = connectField(ListItemAddBare);