grid view update

2024-12-26 09:28:21 +01:00 · 2020-04-03 13:49:12 +02:00 · 2020-04-03 13:49:12 +02:00 · 5b21696fa1
commit 5b21696fa1
parent 60e50d2ceb
7 changed files with 108 additions and 11 deletions
--- a/src/core/tags/GridView.coffee
+++ b/src/core/tags/GridView.coffee
@ -1,9 +1,25 @@
 class GridCellPrototype extends Ant.OS.GUI.BaseTag
    constructor: (r, o) ->
        super r, o
-        @setopt "class", "afxgridcell"
+        @setopt "class", "afx-grid-cell"
+        @setopt "oncellselect", (e) ->
+        @setopt "oncelldbclick", (e) ->
        @setopt "data", {}
    
+    mount: () ->
+        me = @
+        $(@root).css "display", "block"
+        $(@root).click (e) ->
+            me.cellseleck e, false
+        $(@root).dblclick (e) ->
+            me.cellseleck e, true
+    
+
+    cellseleck: (e, flag) ->
+        e.item = @root
+        evt = { id: @aid(), data: e }
+        return @get("oncellselect") evt unless flag
+        @get("oncelldbclick") evt

    __class__: (v) ->
        $(@root).removeClass().addClass @get("class")
@ -19,8 +35,6 @@ class SimpleGridCell extends GridCellPrototype
    __data__: (d) ->
        @refs.cell.set  k, v for k, v of d

-    mount: () ->
-        $(@root).css "display", "block"
    layout: () ->
        [{
            el: "afx-label", ref: "cell"
@ -32,8 +46,14 @@ class GridViewTag extends Ant.OS.GUI.BaseTag
        @setopt "header", []
        @setopt "headeritem", "afx-grid-cell"
        @setopt "cellitem", "afx-grid-cell"
-        @setopt "cellclass", "afxgridcell"
+        @setopt "selectedCell", undefined
+        @setopt "selectedRows", []
+        @setopt "selectedRow", undefined
        @setopt "rows", []
+        @setopt "oncellselect", (e) ->
+        @setopt "onrowselect", (e) ->
+        @setopt "oncelldbclick", (e) ->
+        @setopt "multiselect", false

    __header__: (v) ->
        return $(@refs.header).hide() if not v or v.length is 0
@ -46,13 +66,63 @@ class GridViewTag extends Ant.OS.GUI.BaseTag
        @calibrate()

    __rows__: (rows) ->
+        me = @
        $(@refs.grid).empty()
        for row in rows
+            div = $("<div>")
+                .addClass("afx-grid-row")
+                .css "display", "contents"
+                .appendTo @refs.grid
            for cell in row
-                el = $("<#{@get("cellitem")}>").appendTo @refs.grid
+                el = $("<#{@get("cellitem")}>").appendTo div
                el[0].uify undefined
                el[0].set "data", cell
                cell.domel = el[0]
+                el[0].set "oncellselect", (e) -> me.cellselect e, false
+                el[0].set "oncelldbclick", (e) -> me.cellselect e, true
+
+    multiselect: () ->
+        @get "multiselect"
+
+    cellselect: (e, flag) ->
+        e.id = @aid()
+        selectedCell = @get "selectedCell"
+        # return if e.data.item is selectedCell and not flag
+        selectedCell.set "class", "afx-grid-cell" if selectedCell
+        @set "selectedCell", e.data.item
+        $(e.data.item).addClass "afx-grid-cell-selected"
+        if flag
+            @observable.trigger "celldbclick", e
+            @get("oncelldbclick") e
+        else
+            @observable.trigger "cellselect", e
+            @get("oncellselect") e
+            @rowselect e
+
+    rowselect: (e) ->
+        return unless e.data.item
+        selectedRow = @get "selectedRow"
+        selectedRows = @get "selectedRows"
+        evt = { id: @aid(), data: {} }
+        div = $(e.data.item).parent()[0]
+        if @multiselect()
+            if selectedRows.includes div
+                selectedRows.splice selectedRows.indexOf(div) , 1
+                $(div).removeClass()
+            else
+                selectedRows.push div
+                $(div).removeClass().addClass("afx-grid-row-selected")
+            evt.data.items = @get "selectedRows"
+        else
+            return if selectedRow is div
+            $(selectedRow).removeClass()
+            @set "selectedRow", div
+            @set "selectedRows", [div]
+            evt.data.item = div
+            evt.data.items = [ div ]
+            $(div).removeClass().addClass("afx-grid-row-selected")
+        @get("onrowselect") evt
+        @observable.trigger "rowselect", evt

    has_header: () ->
        h = @get("header")
--- a/src/core/tags/MenuTag.coffee
+++ b/src/core/tags/MenuTag.coffee
@ -158,6 +158,7 @@ class MenuTag extends Ant.OS.GUI.BaseTag

    handleselect: (e) ->
        $(@root).hide() if @isctxmenu()
+        e.id = @aid()
        @get("onmenuselect") e
        @observable.trigger "menuselect", e

--- a/src/core/tags/tag.coffee
+++ b/src/core/tags/tag.coffee
@ -12,9 +12,13 @@ class Ant.OS.GUI.BaseTag
        @root.aid = () -> me.aid()
        @refs = {}
        @setopt "data-id", (Math.floor(Math.random() * 100000) + 1).toString()
-        $(@root).attr "data-id", @get("data-id")
+        #$(@root).attr "data-id", @get("data-id")
        @children = []

+        __: (k, v) ->
+            @set k, v if v
+            @get k
+
        for obj in @layout()
            dom = @mkui obj
            if dom
--- a/src/packages/ShowCase/Makefile
+++ b/src/packages/ShowCase/Makefile
@ -2,7 +2,7 @@ coffee_files = coffees/main.coffee

 jsfiles =

-cssfiles = 
+cssfiles =  css/main.css

 copyfiles = assets/scheme.html package.json

--- a/src/packages/ShowCase/coffees/main.coffee
+++ b/src/packages/ShowCase/coffees/main.coffee
@ -35,7 +35,7 @@ class ShowCase extends this.OS.GUI.BaseApplication
    openwin: () ->
        me = @
        scheme =  $.parseHTML """
-        <afx-app-window apptitle="Preview" width="650" height="500">
+        <afx-app-window data-id="example-show-case" apptitle="Preview" width="650" height="500">
            <afx-vbox>
                <afx-menu data-height="30" data-id="menu" />
            <afx-hbox>
@ -55,10 +55,10 @@ class ShowCase extends this.OS.GUI.BaseApplication
                    </afx-hbox>
                    <afx-resizer data-height="5" />
                    <afx-hbox>
-                        <afx-list-view data-id="list" dropdown="false" multiselect="false" />
+                        <afx-list-view data-id="list" dropdown="false" multiselect="true" />
                    </afx-hbox>
                     <afx-hbox data-height="150">
-                        <afx-grid-view data-id="grid" />
+                        <afx-grid-view data-id="grid" multiselect="true" />
                    </afx-hbox>
                </afx-vbox>
                <afx-vbox data-width="150">
@ -122,6 +122,12 @@ class ShowCase extends this.OS.GUI.BaseApplication
            ctmenu.show e
        
        grid = $ "[data-id='grid']", scheme[0]
+        grid[0].set "oncelldbclick", (e) ->
+            console.log  "on dbclick", e
+        grid[0].set "onrowselect", (e) ->
+            console.log  "on rowselect", e.data.items
+        me.subwin.observable.on "cellselect", (e) ->
+            console.log "observable", e
        grid[0].set "header", [{ text: "header1", width: 80 }, { text: "header2" }, { text: "header3" }]
        grid[0].set "rows", [
            [{ text: "text 1" }, { text: "text 2" }, { text: "text 3" }],
--- a/src/packages/ShowCase/css/main.css
+++ b/src/packages/ShowCase/css/main.css
@ -0,0 +1,14 @@
+afx-app-window[data-id="example-show-case"] afx-grid-view div.afx-grid-row:nth-child(even) .afx-grid-cell
+{
+    background-color: #f5F5F5;
+}
+
+afx-app-window[data-id="example-show-case"] afx-grid-view div.afx-grid-row-selected .afx-grid-cell
+{
+    background-color: #116cd6;
+    color:white;
+}
+afx-app-window[data-id="example-show-case"] afx-grid-view div.afx-grid-row-selected .afx-grid-cell-selected
+{
+    font-weight: bold;
+}
--- a/src/packages/pkg.mk
+++ b/src/packages/pkg.mk
@ -24,4 +24,6 @@ css:
 copy:
 	cp -rf $(copyfiles) build/
 clean:
-	- rm -rf build/*
+	- rm -rf build/*
+
+.PHONY: all main clean copy css js cofee