TableOpts: Experiment with more user-friendly sort column selection

4 files changed, 31 insertions, 9 deletions

diff --git a/elm/TableOpts.elm b/elm/TableOpts.elm
index 6ecf0aa9..243069fd 100644
--- a/elm/TableOpts.elm
+++ b/elm/TableOpts.elm
@@ -50,7 +50,7 @@ type Msg
   = Open Bool
   | View Int Bool
   | Results Int Bool
-  | Sort Int Bool Bool
+  | Sort Int Bool
   | Cols Int Bool
   | Save
   | Saved GApi.Response
@@ -62,7 +62,7 @@ update msg model =
     Open b      -> ({ model | saved = False, dd = DD.toggle model.dd b }, Cmd.none)
     View n _    -> ({ model | saved = False, view = n }, Cmd.none)
     Results n _ -> ({ model | saved = False, results = n }, Cmd.none)
-    Sort n b _  -> ({ model | saved = False, sort = n, asc = b }, Cmd.none)
+    Sort n b    -> ({ model | saved = False, sort = n, asc = b }, Cmd.none)
     Cols n b    -> ({ model | cols = if b then B.or model.cols (B.shiftLeftBy n 1) else B.and model.cols (B.xor (B.complement 0) (B.shiftLeftBy n 1)) }, Cmd.none)
     Save        -> ( { model | saved = False, state = Api.Loading }
                    , GTO.send { save = Maybe.withDefault "" model.opts.save
@@ -102,11 +102,19 @@ view model = div []
             ) model.opts.views ]
 
         , if List.isEmpty model.opts.sorts then text "" else
-          tr [] [ td [] [ text "Order by" ], td [] <| List.intersperse (br [] []) <| List.map (\o ->
-              linkRadio (model.sort == o.id) (Sort o.id (if model.sort == o.id then not model.asc else True))
-              [ text o.name
-              , text <| if model.sort /= o.id then "" else if model.asc then " ▴" else " ▾" ]
-            ) model.opts.sorts ]
+          tr [] [ td [] [ text "Order by" ], td [] [ table [] <| List.map (\o ->
+            let but w = a [ href "#", onClickD (Sort o.id w), classList [("checked", model.sort == o.id && model.asc == w)] ]
+                        [ text <| case (o.num, w) of
+                                    (True, True) -> "1→9"
+                                    (True, False) -> "9→1"
+                                    (False, True) -> "A→Z"
+                                    (False, False) -> "Z→A" ]
+            in tr []
+               [ td [ style "padding" "0"      ] [ text o.name ]
+               , td [ style "padding" "0 15px" ] [ but True  ]
+               , td [ style "padding" "0"      ] [ but False ]
+               ]
+            ) model.opts.sorts ] ]
 
         , if List.isEmpty model.opts.vis then text "" else
           tr [] [ td [] [ text "Visible", br [] [], text "columns" ], td [] <| List.intersperse (br [] []) <| List.map (\o ->
diff --git a/lib/VNWeb/TableOpts.pm b/lib/VNWeb/TableOpts.pm
index 8d0af29a..795dcae0 100644
--- a/lib/VNWeb/TableOpts.pm
+++ b/lib/VNWeb/TableOpts.pm
@@ -31,6 +31,7 @@ package VNWeb::TableOpts;
 #                                  # may include '?o' placeholder that will be replaced with selected ASC/DESC,
 #                                  # or '!o' as placeholder for the opposite.
 #                                  # If no placeholders are present, the ASC/DESC will be added automatically.
+#           sort_num => 0/1,       # Whether this is a numeric field, used in the UI to display "1→9" instead of "A→Z".
 #           sort_default => 'asc', # Set to 'asc' or 'desc' if this column should be sorted on by default.
 #       },
 #       popularity => {
@@ -208,7 +209,7 @@ my $FORM_OUT = form_compile any => {
     views   => { type => 'array', values => { uint => 1 } },
     default => { uint => 1 },
     value   => { uint => 1 },
-    sorts   => { aoh => { id => { uint => 1 }, name => {} } },
+    sorts   => { aoh => { id => { uint => 1 }, name => {}, num => { anybool => 1 } } },
     vis     => { aoh => { id => { uint => 1 }, name => {} } },
 };
 
@@ -230,7 +231,7 @@ sub elm_ {
         views   => $o->{views},
         default => $o->{default},
         value   => $v,
-        sorts   => [ map +{ id => $_->{sort_id}, name => $_->{name} }, grep defined $_->{sort_id}, values $o->{col_order}->@* ],
+        sorts   => [ map +{ id => $_->{sort_id}, name => $_->{name}, num => $_->{sort_num}||0 }, grep defined $_->{sort_id}, values $o->{col_order}->@* ],
         vis     => [ map +{ id => $_->{vis_id}, name => $_->{name} }, grep defined $_->{vis_id}, values $o->{col_order}->@* ],
     }, sub {
         TUWF::XML::div_ @_, sub {
diff --git a/lib/VNWeb/ULists/List.pm b/lib/VNWeb/ULists/List.pm
index 2e7c0837..9d27c679 100644
--- a/lib/VNWeb/ULists/List.pm
+++ b/lib/VNWeb/ULists/List.pm
@@ -17,6 +17,7 @@ my $TABLEOPTS = tableopts
         name => 'Vote date',
         sort_sql => 'uv.vote_date',
         sort_id => 1,
+        sort_num => 1,
         vis_id => 0,
         compat => 'voted'
     },
@@ -24,6 +25,7 @@ my $TABLEOPTS = tableopts
         name => 'Vote',
         sort_sql => 'uv.vote',
         sort_id => 2,
+        sort_num => 1,
         vis_id => 1,
         compat => 'vote'
     },
@@ -31,6 +33,7 @@ my $TABLEOPTS = tableopts
         name => 'Rating',
         sort_sql => 'v.c_rating',
         sort_id => 3,
+        sort_num => 1,
         vis_id => 2,
         compat => 'rating'
     },
@@ -45,6 +48,7 @@ my $TABLEOPTS = tableopts
         name => 'Added',
         sort_sql => 'uv.added',
         sort_id => 5,
+        sort_num => 1,
         vis_id => 4,
         compat => 'added'
     },
@@ -52,6 +56,7 @@ my $TABLEOPTS = tableopts
         name => 'Modified',
         sort_sql => 'uv.lastmod',
         sort_id => 6,
+        sort_num => 1,
         vis_id => 5,
         compat => 'modified'
     },
@@ -59,6 +64,7 @@ my $TABLEOPTS = tableopts
         name => 'Start date',
         sort_sql => 'uv.started',
         sort_id => 7,
+        sort_num => 1,
         vis_id => 6,
         compat => 'started'
     },
@@ -66,6 +72,7 @@ my $TABLEOPTS = tableopts
         name => 'Finish date',
         sort_sql => 'uv.finished',
         sort_id => 8,
+        sort_num => 1,
         vis_id => 7,
         compat => 'finished'
     },
@@ -73,6 +80,7 @@ my $TABLEOPTS = tableopts
         name => 'Release date',
         sort_sql => 'v.c_released',
         sort_id => 9,
+        sort_num => 1,
         vis_id => 8,
         compat => 'rel'
     };
diff --git a/lib/VNWeb/VN/List.pm b/lib/VNWeb/VN/List.pm
index f1380cbf..7c72f6d8 100644
--- a/lib/VNWeb/VN/List.pm
+++ b/lib/VNWeb/VN/List.pm
@@ -31,6 +31,7 @@ sub TABLEOPTS {
             compat => 'rel',
             sort_id => 2,
             sort_sql => 'v.c_released ?o, v.title',
+            sort_num => 1,
         },
         length => {
             name => 'Length',
@@ -45,6 +46,7 @@ sub TABLEOPTS {
             compat => 'pop',
             sort_id => 3,
             sort_sql => 'v.c_pop_rank !o, v.sorttitle',
+            sort_num => 1,
             vis_id => 0,
             vis_default => 1,
         },
@@ -53,6 +55,7 @@ sub TABLEOPTS {
             compat => 'rating',
             sort_id => 4,
             sort_sql => 'v.c_rat_rank !o NULLS LAST, v.sorttitle',
+            sort_num => 1,
             vis_id => 1,
             vis_default => 1,
         },
@@ -60,12 +63,14 @@ sub TABLEOPTS {
             name => 'Vote average',
             sort_id => 5,
             sort_sql => 'v.c_average ?o NULLS LAST, v.sorttitle',
+            sort_num => 1,
             vis_id => 3,
         },
         votes => {
             name => 'Number of votes',
             sort_id => 6,
             sort_sql => 'v.c_votecount ?o, v.sorttitle',
+            sort_num => 1,
         }
 }