[add] PaginatorView

package.json

@@ -1,6 +1,6 @@
 {
     "name": "puzzlez",
-    "version": "0.4.0",
+    "version": "0.4.1",
     "private": true,
     "devDependencies": {
         "dateformat": "^3.0.3",

src/haxe/ru/m/puzzlez/view/GameListFrame.hx

@@ -9,6 +9,7 @@ import ru.m.data.IDataSource;
 import ru.m.puzzlez.core.GameState;
 import ru.m.puzzlez.core.Id.ImageId;
 import ru.m.puzzlez.storage.GameStorage;
+import ru.m.puzzlez.view.common.PaginatorView;
 import ru.m.puzzlez.view.PuzzleImageView;
 
 @:template class GameListFrame extends FrameView<GameStatus> {
@@ -16,7 +17,7 @@ import ru.m.puzzlez.view.PuzzleImageView;
     public static var ID(default, never) = "game_list";
 
     @:view("images") var imagesView:ActionDataView<ImageId, PuzzleImageView, Action>;
-    @:view("pages") var pagesView:DataView<Int, ToggleButtonView>;
+    @:view("pages") var pagesView:PaginatorView;
     private var loading:LoadingWrapper;
 
     @:provide var switcher:FrameSwitcher;
@@ -30,7 +31,7 @@ import ru.m.puzzlez.view.PuzzleImageView;
     private function set_data(value:DataPage<ImageId>):DataPage<ImageId> {
         data = value;
         imagesView.data = data.data;
-        pagesView.data = [for (i in 0...Std.int((data.total - 1) / data.page.count) + 1) i];
+        pagesView.page = value;
         return data;
     }
 
@@ -48,6 +49,12 @@ import ru.m.puzzlez.view.PuzzleImageView;
     }
 
     override public function onShow(data:GameStatus):Void {
+        page.index = 0;
+        this.data = {
+            page: page,
+            total: 0,
+            data: [],
+        };
         status = data;
         page.filter = ["status" => status];
         refresh();
@@ -60,9 +67,10 @@ import ru.m.puzzlez.view.PuzzleImageView;
     private function refresh():Void {
         data = {
             page: page,
-            total: 0,
+            total: data != null ? data.total : 0,
             data: [],
         };
+        data.data = [];
         loading.promise = storage.getIndexPage(page).then(data -> this.data = data);
     }
 

src/haxe/ru/m/puzzlez/view/GameListFrame.yaml

@@ -15,13 +15,9 @@ views:
     geometry.margin: 5
     overflow.y: scroll
   - id: pages
-    $type: haxework.view.data.DataView
+    $type: ru.m.puzzlez.view.common.PaginatorView
     geometry.width: 100%
-    layout:
+    +onPageSelect: |
-      $type: haxework.view.layout.TailLayout
-      margin: 5
-    factory: ~pageFactory
-    +onDataSelect: |
       ~(index) -> {
         page.index = index;
         refresh();

src/haxe/ru/m/puzzlez/view/ImageListFrame.hx

@@ -1,8 +1,8 @@
 package ru.m.puzzlez.view;
 
-import haxework.view.form.ToggleButtonView;
 import haxework.view.data.DataView;
 import haxework.view.form.ButtonView;
+import haxework.view.form.ToggleButtonView;
 import haxework.view.frame.FrameSwitcher;
 import haxework.view.frame.FrameView;
 import haxework.view.popup.ConfirmView;
@@ -12,13 +12,14 @@ import ru.m.puzzlez.FileUtil;
 import ru.m.puzzlez.source.FileSource;
 import ru.m.puzzlez.storage.GameStorage;
 import ru.m.puzzlez.storage.ImageStorage;
+import ru.m.puzzlez.view.common.PaginatorView;
 import ru.m.puzzlez.view.PuzzleImageView;
 
 @:template class ImageListFrame extends FrameView<ImageListSource> {
     public static var ID = "image_list";
 
     @:view("images") var imagesView:ActionDataView<ImageId, PuzzleImageView, Action>;
-    @:view("pages") var pagesView:DataView<Int, ToggleButtonView>;
+    @:view("pages") var pagesView:PaginatorView;
     @:view var select:ButtonView;
 
     @:provide var imageStorage:ImageStorage;
@@ -34,8 +35,7 @@ import ru.m.puzzlez.view.PuzzleImageView;
     private function set_data(value:DataPage<ImageId>):DataPage<ImageId> {
         data = value;
         imagesView.data = data.data;
-        // ToDo: PaginatorView
+        pagesView.page = data;
-        pagesView.data = [for (i in 0...Std.int((data.total - 1) / data.page.count) + 1) i].slice(0, 10);
         return data;
     }
 
@@ -53,6 +53,12 @@ import ru.m.puzzlez.view.PuzzleImageView;
     }
 
     override public function onShow(data:ImageListSource):Void {
+        page.index = 0;
+        this.data = {
+            page: page,
+            total: 0,
+            data: [],
+        };
         if (data != null) {
             source = data;
             select.visible = source.source.id == FileSource.ID;
@@ -61,10 +67,6 @@ import ru.m.puzzlez.view.PuzzleImageView;
         }
     }
 
-    override public function onHide():Void {
-        //imagesView.data = [];
-    }
-
     private function selectFile():Void {
         FileUtil.browse().then((data:FileContent) -> {
             var fileSource:FileSource = cast source.source;
@@ -95,7 +97,7 @@ import ru.m.puzzlez.view.PuzzleImageView;
     private function refresh():Void {
         data = {
             page: page,
-            total: 0,
+            total: data != null ? data.total : 0,
             data: [],
         };
         loading.promise = source.source.getIndexPage(page).then(data -> this.data = data);

src/haxe/ru/m/puzzlez/view/ImageListFrame.yaml

@@ -5,6 +5,7 @@ views:
     $type: haxework.view.data.ActionDataView
     layout:
       $type: haxework.view.layout.TailLayout
+      rowSize: 3
       margin: 5
       vAlign: middle
     geometry.stretch: true
@@ -14,13 +15,9 @@ views:
     geometry.margin: 5
     overflow.y: scroll
   - id: pages
-    $type: haxework.view.data.DataView
+    $type: ru.m.puzzlez.view.common.PaginatorView
     geometry.width: 100%
-    layout:
+    +onPageSelect: |
-      $type: haxework.view.layout.TailLayout
-      margin: 5
-    factory: ~pageFactory
-    +onDataSelect: |
       ~(index) -> {
         page.index = index;
         refresh();

src/haxe/ru/m/puzzlez/view/common/PaginatorView.hx

@@ -0,0 +1,82 @@
+package ru.m.puzzlez.view.common;
+
+import haxework.signal.Signal;
+import haxework.view.data.DataView;
+import haxework.view.form.ToggleButtonView;
+import haxework.view.layout.TailLayout;
+import ru.m.data.IDataSource.DataPage;
+
+enum PaginatorAction {
+    START;
+    JUMP(distance:Int);
+    INDEX(index:Int);
+    END;
+}
+
+class PaginatorButtonView extends ToggleButtonView {
+    public var action(default, set):PaginatorAction;
+
+    private function set_action(value:PaginatorAction):PaginatorAction {
+        action = value;
+        text = switch action {
+            case INDEX(index): Std.string(index);
+            case x: Std.string(x);
+        }
+        return action;
+    }
+
+    public static function factory(index:Int, action:PaginatorAction):PaginatorButtonView {
+        var result = new PaginatorButtonView();
+        result.action = action;
+        return result;
+    }
+}
+
+class PaginatorView extends DataView<PaginatorAction, PaginatorButtonView> {
+
+    public var page(default, set):DataPage<Dynamic>;
+    public var onPageSelect(default, null):Signal<Int>;
+
+    private function set_page(value:DataPage<Dynamic>):DataPage<Dynamic> {
+        page = value;
+        refresh();
+        return page;
+    }
+
+    public function new() {
+        super(new TailLayout());
+        layout.margin = 3;
+        onPageSelect = new Signal();
+        factory = PaginatorButtonView.factory;
+        onDataSelect.connect(onAction);
+    }
+
+    private function onAction(action:PaginatorAction):Void {
+        onPageSelect.emit(switch action {
+            case START: 0;
+            case INDEX(index): index;
+            case JUMP(distance): page.page.index + distance;
+            case END: Std.int((page.total - 1) / page.page.count);
+        });
+    }
+
+    private function refresh():Void {
+        var total:Int = Std.int((page.total - 1) / page.page.count);
+        var start:Int = Std.int(Math.max(page.page.index - 2, 0));
+        var end:Int = Std.int(Math.min(page.page.index + 2, total));
+        var data = [for (index in start...end + 1) INDEX(index)];
+        if (start > 0) {
+            data.unshift(START);
+        }
+        if (end < total) {
+            data.push(END);
+        }
+        this.data = data;
+        for (button in dataViews) {
+            button.on = switch button.action {
+                case INDEX(index): index == page.page.index;
+                case x: false;
+            }
+        }
+    }
+}