sync list updates with server

inköpslista-gui/ui/app.slint

@@ -16,6 +16,17 @@ export struct SItem {
     checked: bool,
 }
 
+export global State {
+    in-out property <[SItem]> list: [
+        { name: "Test 1", checked: true },
+        { name: "Test 2", checked: false },
+        { name: "Test 3", checked: false },
+    ];
+    callback add-to-list(string);
+    callback check-item(string);
+    callback delete-checked();
+}
+
 component GoodListItem inherits Rectangle {
     in-out property <SItem> item;
     background: #ffffff10;
@@ -24,8 +35,9 @@ component GoodListItem inherits Rectangle {
     HorizontalBox {
         check := CheckBox {
             checked: root.item.checked;
-            toggled => {
-                // TODO
+            toggled() => {
+                State.check-item(item.name);
+                debug("CheckBox checked: ", self.checked);
             }
         }
 
@@ -38,7 +50,8 @@ component GoodListItem inherits Rectangle {
 
     input := TouchArea {
         clicked => {
-            root.item.checked = !root.item.checked;
+            //root.item.checked = !root.item.checked;
+            State.check-item(item.name);
         }
     }
 }
@@ -76,6 +89,9 @@ component GoodButtons inherits ScrollView {
         width: root.button-width * 1pt;
         height: root.button-height * 1pt;
         text: item;
+        clicked => {
+            State.add-to-list(item);
+        }
     }
 }
 
@@ -96,9 +112,9 @@ component AddView inherits VerticalBox {
         Button {
             width: self.height;
             text: "+";
-           // clicked => {
-           //     goods.items[goods.items.length] = input.text;
-           // }
+            clicked => {
+                State.add-to-list(input.text);
+            }
         }
     }
 
@@ -114,27 +130,28 @@ component ShopView inherits VerticalBox {
 
     Button {
         text: "I am done hehe";
+        clicked => {
+            State.delete-checked();
+        }
     }
 }
 
 export component App inherits Window {
-    in property <[SItem]> list: [
-        { name: "Test 1", checked: true },
-        { name: "Test 2", checked: false },
-        { name: "Test 3", checked: false },
-    ];
+
+    preferred-height: 700px;
+    preferred-width: 480px;
     TabWidget {
         Tab {
             title: "Add";
             AddView {
-                list <=> list;
+                list <=> State.list;
             }
         }
 
         Tab {
             title: "Shop";
             ShopView {
-                list <=> list;
+                list <=> State.list;
             }
         }
     }