@webiny/app-admin 6.5.0-beta.4 → 6.5.0-beta.6

package/features/formModel/FormModel.test.js

@@ -1834,7 +1834,7 @@ describe("FormModel", ()=>{
             return createForm({
                 fields: (fields)=>({
                         content: fields.object().label("Content").template("hero", (t)=>{
-                            t.label("Hero Banner").fields((f)=>({
+                            t.label("Hero Banner").description("Large heading with an image").fields((f)=>({
                                     heading: f.text().label("Heading").required("Required"),
                                     image: f.text().label("Image")
                                 }));
@@ -1861,7 +1861,8 @@ describe("FormModel", ()=>{
                 expect(vm.availableTemplates).toEqual([
                     {
                         id: "hero",
-                        label: "Hero Banner"
+                        label: "Hero Banner",
+                        description: "Large heading with an image"
                     },
                     {
                         id: "text",
@@ -2732,6 +2733,190 @@ describe("FormModel", ()=>{
             });
         });
     });
+    describe("inner layouts declared on the field builder", ()=>{
+        it("lays out a single object's children with .layout()", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        address: fields.object().fields((f)=>({
+                                street: f.text().label("Street"),
+                                city: f.text().label("City"),
+                                zip: f.text().label("Zip")
+                            })).layout((l)=>[
+                                l.row("street"),
+                                l.row("city", "zip")
+                            ])
+                    })
+            });
+            const vm = form.field("address").vm;
+            expect(vm.layout.map((node)=>asRow(node).fields.map((f)=>f.name))).toEqual([
+                [
+                    "street"
+                ],
+                [
+                    "city",
+                    "zip"
+                ]
+            ]);
+        });
+        it("applies .layout() to every list item", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        stats: fields.object().list().fields((f)=>({
+                                value: f.number().label("Value"),
+                                label: f.text().label("Label")
+                            })).layout((l)=>[
+                                l.row("value", "label")
+                            ])
+                    })
+            });
+            form.setData({
+                stats: [
+                    {
+                        value: 1,
+                        label: "A"
+                    },
+                    {
+                        value: 2,
+                        label: "B"
+                    }
+                ]
+            });
+            const vm = form.field("stats").vm;
+            expect(vm.items).toHaveLength(2);
+            for (const item of vm.items)expect(item.layout.map((node)=>asRow(node).fields.map((f)=>f.name))).toEqual([
+                [
+                    "value",
+                    "label"
+                ]
+            ]);
+        });
+        it("lays out an object nested in another object with its own .layout()", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        subMenu: fields.object().fields((f)=>({
+                                climbing: f.object().list().fields((c)=>({
+                                        label: c.text().label("Label"),
+                                        url: c.text().label("URL")
+                                    })).layout((l)=>[
+                                        l.row("label", "url")
+                                    ]),
+                                yoga: f.text().label("Yoga")
+                            })).layout((l)=>[
+                                l.row("climbing", "yoga")
+                            ])
+                    })
+            });
+            form.setData({
+                subMenu: {
+                    climbing: [
+                        {
+                            label: "Classes",
+                            url: "/c"
+                        }
+                    ],
+                    yoga: ""
+                }
+            });
+            const outer = form.field("subMenu").vm;
+            expect(asRow(outer.layout[0]).fields.map((f)=>f.name)).toEqual([
+                "climbing",
+                "yoga"
+            ]);
+            const inner = form.field("subMenu.climbing").vm;
+            expect(asRow(inner.items[0].layout[0]).fields.map((f)=>f.name)).toEqual([
+                "label",
+                "url"
+            ]);
+        });
+        it("lets a layout.object() node override the field's .layout()", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        meta: fields.object().fields((f)=>({
+                                a: f.text().label("A"),
+                                b: f.text().label("B")
+                            })).layout((l)=>[
+                                l.row("a", "b")
+                            ])
+                    }),
+                layout: (layout)=>[
+                        layout.object("meta", (l)=>[
+                                l.row("b"),
+                                l.row("a")
+                            ])
+                    ]
+            });
+            const vm = form.field("meta").vm;
+            expect(vm.layout.map((node)=>asRow(node).fields.map((f)=>f.name))).toEqual([
+                [
+                    "b"
+                ],
+                [
+                    "a"
+                ]
+            ]);
+        });
+        it("uses the layout declared on each template", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        content: fields.object().template("hero", (t)=>{
+                            t.label("Hero").fields((f)=>({
+                                    heading: f.text().label("Heading"),
+                                    subheading: f.text().label("Subheading")
+                                })).layout((l)=>[
+                                    l.row("heading", "subheading")
+                                ]);
+                        }).template("cta", (t)=>{
+                            t.label("CTA").fields((f)=>({
+                                    text: f.text().label("Text"),
+                                    url: f.text().label("URL")
+                                })).layout((l)=>[
+                                    l.row("url", "text")
+                                ]);
+                        })
+                    }),
+                layout: (layout)=>[
+                        layout.object("content", {
+                            hero: (l)=>[
+                                    l.row("subheading"),
+                                    l.row("heading")
+                                ]
+                        })
+                    ]
+            });
+            const field = form.field("content");
+            field.setTemplate("hero");
+            let vm = form.field("content").vm;
+            expect(vm.layout.map((node)=>asRow(node).fields.map((f)=>f.name))).toEqual([
+                [
+                    "subheading"
+                ],
+                [
+                    "heading"
+                ]
+            ]);
+            field.setTemplate("cta");
+            vm = form.field("content").vm;
+            expect(vm.layout.map((node)=>asRow(node).fields.map((f)=>f.name))).toEqual([
+                [
+                    "url",
+                    "text"
+                ]
+            ]);
+        });
+        it("throws when an object has both .layout() and .template()", ()=>{
+            expect(()=>createForm({
+                    fields: (fields)=>({
+                            content: fields.object().template("hero", (t)=>{
+                                t.fields((f)=>({
+                                        heading: f.text()
+                                    }));
+                            }).layout((l)=>[
+                                    l.row("heading")
+                                ])
+                        })
+                })).toThrow(/both .layout\(\) and .template\(\)/);
+        });
+    });
     describe("nested object layouts (Phase 8c.1)", ()=>{
         it("registers layout.object() nested inside another object's inner layout (non-templated)", ()=>{
             const form = createForm({
@@ -3049,6 +3234,24 @@ describe("FormModel", ()=>{
                 "text"
             ]);
         });
+        it("templates.add keeps the layout declared on the added template", ()=>{
+            const form = createSingleTemplatedForm();
+            const field = form.field("content").as("object");
+            field.templates.add("cta", (t)=>{
+                t.label("CTA").fields((f)=>({
+                        text: f.text(),
+                        url: f.text()
+                    })).layout((l)=>[
+                        l.row("text", "url")
+                    ]);
+            });
+            form.field("content").setTemplate("cta");
+            const vm = form.field("content").vm;
+            expect(asRow(vm.layout[0]).fields.map((f)=>f.name)).toEqual([
+                "text",
+                "url"
+            ]);
+        });
         it("templates.add throws on duplicate id", ()=>{
             const form = createSingleTemplatedForm();
             const field = form.field("content").as("object");