Load shopping list from server on app startup

inköpslista-gui/ui/app.slint

@@ -1,35 +1,57 @@
-import { TabWidget, AboutSlint, Button, VerticalBox, ListView, CheckBox, ScrollView, HorizontalBox, TextEdit, GridBox } from "std-widgets.slint";
+import {
+    TabWidget,
+    AboutSlint,
+    Button,
+    VerticalBox,
+    ListView,
+    CheckBox,
+    ScrollView,
+    HorizontalBox,
+    TextEdit,
+    GridBox,
+} from "std-widgets.slint";
+
+export struct SItem {
+    name: string,
+    checked: bool,
+}
 
 component GoodListItem inherits Rectangle {
-    in property <string> name: "Mjölk";
-    in-out property <bool> checked: false;
+    in-out property <SItem> item;
     background: #ffffff10;
     border-radius: 8pt;
     border-width: 10pt;
     HorizontalBox {
         check := CheckBox {
-            checked <=> root.checked;
+            checked: root.item.checked;
+            toggled => {
+                // TODO
+            }
         }
+
         Text {
-            opacity: (checked ? 0.5 : 1.0);
+            opacity: (root.item.checked ? 0.5 : 1.0);
             font-size: 12pt;
-            text: name;
+            text: root.item.name;
         }
     }
+
     input := TouchArea {
         clicked => {
-            checked = !checked;
+            root.item.checked = !root.item.checked;
         }
     }
 }
 
 component GoodsList {
-    in property <[string]> items: ["Mjölk", "Ost", "Ägg"];
+    in property <[SItem]> items;
+
     ListView {
         for item in items: VerticalLayout {
             GoodListItem {
-                name: item;
+                item: item;
             }
+
             Rectangle {
                 height: 4pt;
             }
@@ -49,53 +71,71 @@ component GoodButtons inherits ScrollView {
     viewport-height: (count-y * (button-height + button-spacing)) * 1pt;
 
     for item[idx] in favorites: Button {
-        x: floor(mod(idx, count-x)) * (root.button-width + root.button-spacing) * 1pt ; 
-        y: floor(idx / count-x)  * (root.button-height + root.button-spacing) * 1pt;
-        width: root.button-width * 1pt; 
+        x: floor(mod(idx, count-x)) * (root.button-width + root.button-spacing) * 1pt;
+        y: floor(idx / count-x) * (root.button-height + root.button-spacing) * 1pt;
+        width: root.button-width * 1pt;
         height: root.button-height * 1pt;
         text: item;
     }
 }
 
 component AddView inherits VerticalBox {
-    goods:= GoodsList {
+    in property <[SItem]> list;
+    goods := GoodsList {
+        items <=> list;
     }
+
     HorizontalLayout {
         height: 50pt;
-        input:= TextEdit {
-        }
+        input := TextEdit { }
+
         Rectangle {
             width: 4pt; // spacing
         }
+
         Button {
             width: self.height;
             text: "+";
-            clicked => {
-                goods.items[goods.items.length] = input.text;
-            }
+           // clicked => {
+           //     goods.items[goods.items.length] = input.text;
+           // }
         }
     }
-    GoodButtons {
 
-    }
+    GoodButtons { }
 }
 
 component ShopView inherits VerticalBox {
-    goods := GoodsList {}
+    in property <[SItem]> list;
+
+    goods := GoodsList {
+        items <=> list;
+    }
+
     Button {
         text: "I am done hehe";
     }
 }
 
 export component App inherits Window {
+    in property <[SItem]> list: [
+        { name: "Test 1", checked: true },
+        { name: "Test 2", checked: false },
+        { name: "Test 3", checked: false },
+    ];
     TabWidget {
         Tab {
             title: "Add";
-            AddView {}
-        }   
+            AddView {
+                list <=> list;
+            }
+        }
+
         Tab {
             title: "Shop";
-            ShopView {}
-        }   
+            ShopView {
+                list <=> list;
+            }
+        }
     }
 }