diff --git a/imports/components/App.js b/imports/components/App.js
index aecc6a3..9dd5ad8 100644
--- a/imports/components/App.js
+++ b/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",
diff --git a/imports/components/ListSchema.js b/imports/components/ListSchema.js
index 0948e67..e6504a4 100644
--- a/imports/components/ListSchema.js
+++ b/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(
diff --git a/imports/components/ParticipationAdd.js b/imports/components/ParticipationAdd.js
new file mode 100644
index 0000000..b606448
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+ );
+};
+
+const ListItemsBare = ({ onChange, value }) => {
+ console.log("ListItemsBare", value);
+ if (!Array.isArray(value)) {
+ return
Not an array passed: {value}
;
+ }
+
+ return (
+
+ {value.map(row => {
+ return (
+
+ {row.zip} | {row.city} | {row.no} (x)
+
+ );
+ })}
+
+ );
+};
+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 Not an array passed: {value}
;
+ }
+
+ 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 (
+
+ setParticipationNo(value)}
+ />
+
+ );
+};
+const ListItemAdd = connectField(ListItemAddBare);
diff --git a/imports/components/ParticipationList.js b/imports/components/ParticipationList.js
new file mode 100644
index 0000000..923053f
--- /dev/null
+++ b/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 (
+
+
+
+
+ {/* */}
+
+
+
+ );
+};
+
+
+const ListItemsBare = ({ onChange, value }) => {
+ console.log("ListItemsBare", value);
+ if (!Array.isArray(value)) {
+ return Not an array passed: {value}
+ }
+
+ const deleteRow = row => {
+ const newValue = value.filter(val => val.zip !== row.zip);
+ onChange(newValue)
+ }
+
+ return (
+
+ {value.map((row)=> {
+ return (
{row.zip} | {row.city} (x)
+
)
+ })}
+
+ );
+}
+const ListItems = connectField(ListItemsBare);
+
+
+const ListItemAddBare = ({ onChange, value }) => {
+ console.log("ListItemAddBare", value);
+ if (!Array.isArray(value)) {
+ return Not an array passed: {value}
+ }
+
+ 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 All zip codes used!
+ }
+
+ console.log("unusedZipCodes", unusedZipCodes, usedZips);
+ return (
+
+ unusedZipCodes: {unusedZipCodes.join(", ")}
+
+
+ );
+}
+const ListItemAdd = connectField(ListItemAddBare);
\ No newline at end of file