Git Product home page Git Product logo

Comments (4)

Tarmil avatar Tarmil commented on May 25, 2024 2

You can actually get it working with types other than string. You just need to make sure to put the correct type in both PropertyColumn and Func.

      comp<PropertyColumn<Person,int>> {
        "Property" => ( <@ Func<Person, int>(fun p -> p.PersonId) @> |> Lambda.toExpression )
        "Sortable" => true
      }

Now, there is a way to make this more friendly to use. In F#, when a method takes as argument an Expression<Func<T, U>>, you can directly pass it a lambda expression, and it will automatically be quoted and passed to LeafExpressionConverter.QuotationToExpression. That's how you can use LINQ methods in F#. So we can define a static method like this:

type QuickGridColumn =
    static member Property<'GridItem, 'Prop>(f: Expression<Func<'GridItem, 'Prop>>) =
        "Property" => f

and use it like this:

    comp<PropertyColumn<Person,int>> {
      QuickGridColumn.Property (fun p -> p.PersonId)
      "Sortable" => true
    }

And even better, Bolero's Builders.ComponentWithAttrsBuilder can create a component builder (ie an equivalent of comp<T>) with some attributes included. So you can do this:

type QuickGrid =
    static member PropertyColumn<'GridItem, 'Prop>(f: Expression<Func<'GridItem, 'Prop>>) =
        let attr = "Property" => f
        Builders.ComponentWithAttrsBuilder<PropertyColumn<'GridItem, 'Prop>>(attr)

and use it like this:

  QuickGrid.PropertyColumn (fun p -> p.PersonId) {
    "Sortable" => true
  }

It doesn't even need any explicit types anymore, type inference takes care of it!

As a final side-note, when you put elements and components inside a comp, they are automatically put inside its ChildContent attribute, so you don't need to create this attribute yourself.

comp<QuickGrid<Person>> {
  "Items" => people

  QuickGrid.PropertyColumn (fun p -> p.PersonId) {
    "Sortable" => true
  }
  QuickGrid.PropertyColumn (fun p -> p.Name) {
    "Sortable" => true
  }
  QuickGrid.PropertyColumn (fun p -> p.BirthDate) {
    "Sortable" => true
  }
}

from bolero.

callmekohei avatar callmekohei commented on May 25, 2024

inprogress...

Now problem is that col name is hidden.

image

fsharp code

// F# lambda to C# LINQ Expression
// http://www.fssnip.net/ts/title/F-lambda-to-C-LINQ-Expression
open Microsoft.FSharp.Linq.RuntimeHelpers
module Lambda =
  let toExpression (``f# lambda`` : Quotations.Expr<'a>) =
      ``f# lambda``
      |> LeafExpressionConverter.QuotationToExpression
      |> unbox<Expression<'a>>

type Person = {
  PersonId  : int
  Name      : string
  BirthDate : DateOnly
}

let people =
[
  { PersonId=10895; Name="Jean Martin"    ; BirthDate=new DateOnly(1985,  3, 16) }
  { PersonId=10944; Name="António Langa"  ; BirthDate=new DateOnly(1991, 12, 1)  }
  { PersonId=11203; Name="Julie Smith"    ; BirthDate=new DateOnly(1958, 10, 10) }
  { PersonId=11205; Name="Nur Sari"       ; BirthDate=new DateOnly(1922, 4, 27)  }
  { PersonId=11898; Name="Jose Hernandez" ; BirthDate=new DateOnly(2011, 5, 3)   }
  { PersonId=12130; Name="Kenji Sato"     ; BirthDate=new DateOnly(2004, 1, 9)   }
]
|> fun x -> x.AsQueryable()


// QuickGrid<'TGridItem>
comp<QuickGrid<Person>> {

  // Items:  IQueryable<'TGridItem>
  "Items" => people

  // Property:  Expression<Func<'TGridItem,'TProp>>
  let fragment =
    concat{

      comp<PropertyColumn<Person,string>> {
        "Property" => ( <@ Func<Person, string>(fun p -> p.PersonId |> string) @> |> Lambda.toExpression )
        "Sortable" => true
      }

      comp<PropertyColumn<Person,string>> {
        "Property" => ( <@ Func<Person, string>(fun p -> p.Name) @> |> Lambda.toExpression )
        "Sortable" => true
      }

      comp<PropertyColumn<Person,string>> {
        "Property" => ( <@ Func<Person, string>(fun p -> p.BirthDate |> string) @> |> Lambda.toExpression )
        "Sortable" => true
      }

    }
  attr.fragment "ChildContent" fragment

}

I would appreciate it if you could show me (^_^)/

from bolero.

callmekohei avatar callmekohei commented on May 25, 2024

Solution

Input date is all string.

image

fsharp code

type Person = {
  PersonId  : string
  Name      : string
  BirthDate : string
}


let people =
  [
    { PersonId=10895 |> string ; Name="Jean Martin"    ; BirthDate=new DateOnly(1985,  3, 16) |> fun d -> d.ToString("yyyy-MM-dd") }
    { PersonId=10944 |> string ; Name="António Langa"  ; BirthDate=new DateOnly(1991, 12, 1)  |> fun d -> d.ToString("yyyy-MM-dd") }
    { PersonId=11203 |> string ; Name="Julie Smith"    ; BirthDate=new DateOnly(1958, 10, 10) |> fun d -> d.ToString("yyyy-MM-dd") }
    { PersonId=11205 |> string ; Name="Nur Sari"       ; BirthDate=new DateOnly(1922, 4, 27)  |> fun d -> d.ToString("yyyy-MM-dd") }
    { PersonId=11898 |> string ; Name="Jose Hernandez" ; BirthDate=new DateOnly(2011, 5, 3)   |> fun d -> d.ToString("yyyy-MM-dd") }
    { PersonId=12130 |> string ; Name="Kenji Sato"     ; BirthDate=new DateOnly(2004, 1, 9)   |> fun d -> d.ToString("yyyy-MM-dd") }
  ]
  |> fun x -> x.AsQueryable()

Please let me know if you have any other good ideas.

from bolero.

callmekohei avatar callmekohei commented on May 25, 2024

@Tarmil
I am very very happy for your advice!
Thank you very much!

So, I used your code and I tried writing it using Dapper(from SQLite/Postgres).
Then result was good.

like this

image

fsharp code1 ( create data source)

let foo (dapperSqlMapperDapperRows:seq<obj>) =
  dapperSqlMapperDapperRows
  |> Seq.map( fun (x:obj)  ->
    x :?> IDictionary<string, obj>
    |> Seq.map( fun (KeyValue(k,v)) ->
      if isNull(box(v))
      then (k,"")
      else (k, v.ToString() )
    )
    |> dict
  )

let books() :seq<IDictionary<string,string>> =
  let dbFile = Path.Combine(env.ContentRootPath, "data/books.db")
  let con = new SqliteConnection($"Data Source={dbFile}")
  con.Open()
  let tmp = con.Query("select * from books_")
  con.Close()
  tmp |> foo

fsharp code2 ( display data source)

// Question : DataGrid(QuickGrid) can have no date on web browser. #283
// @Tarmil
// https://github.com/fsbolero/Bolero/issues/283#issuecomment-1407123501
type QuickGrid'<'GridItem>() =
  inherit QuickGrid<'GridItem>()
    static member PropertyColumn<'GridItem, 'Prop>(f: Expression<Func<'GridItem, 'Prop>>) =
      let attr = "Property" => f
      Builders.ComponentWithAttrsBuilder<PropertyColumn<'GridItem, 'Prop>>(attr)

let dataPage model (username: string) dispatch =
    Main.Data()
      .Reload(fun _ -> dispatch GetBooks)
      .Username(username)
      .SignOut(fun _ -> dispatch SendSignOut)

      .quickgrid(

        comp<QuickGrid'<IDictionary<string,string>>> {
          let myDictionaryDatas = model.books.Value |> fun x -> x.AsQueryable()
          "Items" => myDictionaryDatas
          let mutable x:Node =  null
          let keys = myDictionaryDatas |> Seq.head |> fun x -> x.Keys
          keys |> Seq.iteri(fun i s ->
            let tmp = QuickGrid'.PropertyColumn (fun (x:IDictionary<string,string>) -> x.Item(s) ) { "Title" => s ; "Sortable" => true }
            if i = 0 then x <- tmp
            else x <- ConcatBuilder().Combine(x,tmp)
          )
          x
        }

html code

<!-- .table-container not working on desktop #2572 -->
<!-- https://github.com/jgthms/bulma/issues/2572#issuecomment-523173866 -->
<div style="display: grid">
    <div class="table-container">
      <div class="table is-striped is-narrow is-hoverable is-bordered">
        ${quickgrid}
      </div>
    </div>
</div>

from bolero.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.