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)} + /> +