Feature/claim card votes (#594)

* Fix claim modal footer buttons behavior

* Implements voting status bar

* Implements translations

* Implements claim day count

* Implements voting bar in claim modal & detail page

* Code standard fixes

* Code refactoring

* Implements bar display based of claim status

public/translations/amh-ETH.json

@@ -823,6 +823,10 @@
     },
     "title_action_completed": "ይህ የይገባኛል ጥያቄ በመጠባበቅ ላይ ነው ፣ ሆኖም እርምጃው ስለተጠናቀቀ ድምጽ መስጠት አይቻልም",
     "title_action_closed": "ይህ የይገባኛል ጥያቄ በመጠባበቅ ላይ ነው ፣ ሆኖም እርምጃው የተዘጋ ስለሆነ ድምጽ መስጠት አይቻልም",
+    "day_ago": "ከ {{day_count}} ቀን በፊት ተከፍቷል",
+    "days_ago": "ከ {{day_count}} ቀናት በፊት ተከፍቷል",
+    "vote": "ምርጫ",
+    "votes": "ድምፅ",
     "pending": "ዘገየ",
     "disapproved": "አልጸደቀም",
     "approved": "ጸድቋል",

public/translations/cat-CAT.json

@@ -864,6 +864,10 @@
     },
     "title_action_completed": "Aquesta reclamació està pendent, però, ja que l'acció s'ha completat, no és possible votar",
     "title_action_closed": "Aquesta reclamació està pendent, però, ja que l'acció està tancada, no és possible votar",
+    "day_ago": "Obert fa {{day_count}} die",
+    "days_ago": "Obert fa {{day_count}} dies",
+    "vote": "vot",
+    "votes": "vots",
     "pending": "Pendent",
     "disapproved": "Desaprovat",
     "approved": "Aprovat",

public/translations/en-US.json

@@ -862,6 +862,10 @@
     },
     "title_action_completed": "This claim is pending, however, since the action is completed, it's not possible to vote",
     "title_action_closed": "This claim is pending, however, since the action is closed, it's not possible to vote",
+    "day_ago": "Opened {{day_count}} day ago",
+    "days_ago": "Opened {{day_count}} days ago",
+    "vote": "vote",
+    "votes": "votes",
     "pending": "Pending",
     "disapproved": "Disapproved",
     "approved": "Approved",

public/translations/es-ES.json

@@ -864,6 +864,10 @@
     },
     "title_action_completed": "Este reclamo está pendiente, sin embargo, dado que la acción se completó, no es posible votar",
     "title_action_closed": "Este reclamo está pendiente, sin embargo, dado que la acción está cerrada, no es posible votar.",
+    "day_ago": "Abierto hace {{day_count}} día",
+    "days_ago": "Abierto hace {{day_count}} días",
+    "vote": "voto",
+    "votes": "votos",
     "pending": "Pendiente",
     "disapproved": "Rechazado",
     "approved": "Aprobado",

public/translations/pt-BR.json

@@ -836,7 +836,7 @@
     "error": "Algo deu errado ao carregar ações",
     "tabs": {
       "waiting_vote": "Esperando voto",
-      "analyzed": "Analizadas"
+      "analyzed": "Analisadas"
     },
     "filter": {
       "title": "Filtros",
@@ -868,7 +868,13 @@
     },
     "title_action_completed": "Esta reinvidicação está pendente, no entanto, como a ação foi concluída, não é possível votar",
     "title_action_closed": "Esta reinvidicação está pendente, no entanto, como a ação foi encerrada, não é possível votar",
+    "day_ago": "Aberto {{day_count}} dia atrás",
+    "days_ago": "Aberto {{day_count}} dias atrás",
+    "vote": "voto",
+    "votes": "votos",
     "pending": "Pendente",
+    "disapproved": "Reprovado",
+    "approved": "Aprovado",
     "disapproved_by": "Reprovado por",
     "pending_vote": "Votação Pendente",
     "approved_by": "Aprovado por",

src/elm/Claim.elm

@@ -21,6 +21,7 @@ module Claim exposing
     , viewClaimCard
     , viewPhotoModal
     , viewVoteClaimModal
+    , viewVotingProgress
     )
 
 import Action exposing (Action)
@@ -32,21 +33,23 @@ import Cambiatus.Object.Claim as Claim
 import Cambiatus.Object.ClaimConnection
 import Cambiatus.Object.ClaimEdge
 import Cambiatus.Scalar exposing (DateTime(..))
+import Date
 import Eos
 import Eos.Account as Eos
 import Graphql.OptionalArgument exposing (OptionalArgument(..))
 import Graphql.SelectionSet as SelectionSet exposing (SelectionSet, with)
-import Html exposing (Html, a, button, div, label, p, strong, text)
-import Html.Attributes exposing (class, classList, disabled, href, id, target)
+import Html exposing (Html, a, button, div, label, p, span, strong, text)
+import Html.Attributes exposing (class, classList, disabled, href, id, style, target)
 import Html.Events exposing (onClick)
 import Icons
+import Iso8601
 import Json.Encode as Encode
 import List.Extra as List
 import Profile
 import Profile.Summary
 import Route
 import Session.LoggedIn as LoggedIn
-import Session.Shared exposing (Translators)
+import Session.Shared exposing (Shared, Translators)
 import Strftime
 import Time
 import Utils
@@ -376,28 +379,49 @@ updateProfileSummaries externalMsg claimProfileSummaries =
 viewClaimCard : LoggedIn.Model -> ClaimProfileSummaries -> Model -> Html Msg
 viewClaimCard loggedIn profileSummaries claim =
     let
-        { t } =
+        { t, tr } =
             loggedIn.shared.translators
 
         date dateTime =
             Just dateTime
                 |> Utils.posixDateTime
                 |> Strftime.format "%d %b %Y" Time.utc
 
-        ( claimStatus, textColor ) =
-            case claim.status of
-                Approved ->
-                    ( t "all_analysis.approved", "text-green" )
+        completionStatus =
+            { approved =
+                List.filter .isApproved claim.checks
+                    |> List.length
+            , disapproved =
+                List.filter (not << .isApproved) claim.checks
+                    |> List.length
+            , verifications =
+                claim.action.verifications
+            , claimStatus = claim.status
+            }
 
-                Rejected ->
-                    ( t "all_analysis.disapproved", "text-red" )
+        claimAging =
+            let
+                createdAtDate =
+                    case claim.createdAt of
+                        DateTime dt ->
+                            Iso8601.toTime dt |> Result.map (Date.fromPosix Time.utc)
+            in
+            case createdAtDate of
+                Ok d ->
+                    loggedIn.shared.now |> Date.fromPosix Time.utc |> Date.diff Date.Days d
 
-                Pending ->
-                    if claim.action.isCompleted then
-                        ( t "community.actions.completed", "text-black" )
+                Err _ ->
+                    -1
 
-                    else
-                        ( t "all_analysis.pending", "text-black" )
+        claimAgingText =
+            if claimAging < 1 then
+                ""
+
+            else if claimAging == 1 then
+                tr "claim.day_ago" [ ( "day_count", String.fromInt claimAging ) ]
+
+            else
+                tr "claim.days_ago" [ ( "day_count", String.fromInt claimAging ) ]
     in
     div [ class "w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-2" ]
         [ viewClaimModal loggedIn profileSummaries claim
@@ -433,18 +457,19 @@ viewClaimCard loggedIn profileSummaries claim =
                     Nothing ->
                         text ""
                 ]
-            , div [ class "bg-gray-100 flex items-center justify-center h-6 w-32 mb-2" ]
-                [ p
-                    [ class ("text-caption uppercase " ++ textColor) ]
-                    [ text claimStatus ]
-                ]
             , div [ class "mb-6" ]
-                [ p [ class "text-body overflow-ellipsis overflow-hidden" ]
+                [ p [ class "text-body overflow-ellipsis overflow-hidden mb-2" ]
                     [ text claim.action.description ]
-                , p
-                    [ class "text-gray-900 text-caption uppercase" ]
-                    [ text (date claim.createdAt) ]
+                , div [ class "flex w-full" ]
+                    [ p
+                        [ class "text-gray-900 text-caption uppercase" ]
+                        [ text (date claim.createdAt) ]
+                    , p
+                        [ class "ml-auto text-purple-500 text-caption uppercase" ]
+                        [ text claimAgingText ]
+                    ]
                 ]
+            , viewVotingProgress loggedIn.shared completionStatus
             , if
                 isValidated claim loggedIn.accountName
                     || not (isValidator loggedIn.accountName claim)
@@ -475,6 +500,140 @@ viewClaimCard loggedIn profileSummaries claim =
         ]
 
 
+type alias CompletionStatus =
+    { approved : Int
+    , disapproved : Int
+    , verifications : Int
+    , claimStatus : ClaimStatus
+    }
+
+
+viewVotingProgress : Shared -> CompletionStatus -> Html msg
+viewVotingProgress shared completionStatus =
+    let
+        { t } =
+            shared.translators
+
+        totalVotes =
+            toFloat completionStatus.verifications
+
+        approvedWidth =
+            (toFloat completionStatus.approved / totalVotes) * 100
+
+        disapprovedWidth =
+            (toFloat completionStatus.disapproved / totalVotes) * 100
+
+        votingLeft =
+            completionStatus.verifications - completionStatus.approved - completionStatus.disapproved
+
+        voteNumberTitleConditional compStatus =
+            if compStatus == 1 then
+                text (t "claim.vote")
+
+            else
+                text (t "claim.votes")
+
+        viewVotesBar =
+            case completionStatus.claimStatus of
+                Pending ->
+                    div []
+                        [ div
+                            [ class "flex" ]
+                            [ p
+                                [ class "w-full text-right text-gray-600" ]
+                                [ text (t "claim.pending") ]
+                            ]
+                        , div [ class "w-full h-2 bg-gray-500 flex rounded-full my-2" ]
+                            [ div
+                                [ class "flex rounded-full overflow-hidden h-2"
+                                , style "width" (String.fromFloat (approvedWidth + disapprovedWidth) ++ "%")
+                                ]
+                                [ div [ class "bg-green", style "width" (String.fromFloat (toFloat completionStatus.approved / toFloat (completionStatus.approved + completionStatus.disapproved) * 100) ++ "%") ] []
+                                , div
+                                    [ class "bg-red"
+                                    , style "width" (String.fromFloat (toFloat completionStatus.disapproved / toFloat (completionStatus.approved + completionStatus.disapproved) * 100) ++ "%")
+                                    ]
+                                    []
+                                ]
+                            ]
+                        ]
+
+                Approved ->
+                    div []
+                        [ p
+                            [ class "w-full text-right text-green" ]
+                            [ text (t "claim.approved") ]
+                        , div [ class "w-full h-2 bg-green flex rounded-full my-2" ]
+                            []
+                        ]
+
+                Rejected ->
+                    div []
+                        [ p
+                            [ class "w-full text-right text-red" ]
+                            [ text (t "claim.disapproved") ]
+                        , div [ class "w-full h-2 bg-red flex rounded-full my-2" ]
+                            []
+                        ]
+    in
+    div
+        [ class "flex flex-col mb-4" ]
+        [ viewVotesBar
+        , case completionStatus.claimStatus of
+            Approved ->
+                p
+                    [ class "ml-auto text-green text-right" ]
+                    [ span [ class "font-bold mr-2" ]
+                        [ text (String.fromInt completionStatus.approved)
+                        ]
+                    , span []
+                        [ voteNumberTitleConditional completionStatus.approved ]
+                    ]
+
+            Rejected ->
+                p
+                    [ class "ml-auto text-red text-right" ]
+                    [ span [ class "font-bold mr-2" ]
+                        [ text (String.fromInt completionStatus.disapproved)
+                        ]
+                    , span []
+                        [ voteNumberTitleConditional completionStatus.disapproved ]
+                    ]
+
+            Pending ->
+                div [ class "flex" ]
+                    [ if completionStatus.approved == 0 then
+                        text ""
+
+                      else
+                        p
+                            [ style "width" (String.fromFloat approvedWidth ++ "%") ]
+                            [ span [ class "font-bold text-green" ]
+                                [ text (String.fromInt completionStatus.approved)
+                                ]
+                            ]
+                    , if completionStatus.disapproved == 0 then
+                        text ""
+
+                      else
+                        p
+                            [ style "width" (String.fromFloat disapprovedWidth ++ "%") ]
+                            [ span [ class "font-bold text-red" ]
+                                [ text (String.fromInt completionStatus.disapproved)
+                                ]
+                            ]
+                    , p
+                        [ class "ml-auto text-gray-600 text-right" ]
+                        [ span [ class "font-bold mr-2" ]
+                            [ text (String.fromInt votingLeft)
+                            ]
+                        , span []
+                            [ voteNumberTitleConditional votingLeft ]
+                        ]
+                    ]
+        ]
+
+
 viewClaimModal : LoggedIn.Model -> ClaimProfileSummaries -> Model -> Html Msg
 viewClaimModal { shared, accountName } profileSummaries claim =
     let
@@ -682,7 +841,7 @@ viewClaimModal { shared, accountName } profileSummaries claim =
             div
                 [ class "block mt-6" ]
                 [ p [ class greenTextTitleClass ] [ text (t "claim.action") ]
-                , p [ class "text-left mt-2 text-lg w-full" ] [ text claim.action.description ]
+                , p [ class "text-left mt-2 mb-6 text-lg w-full" ] [ text claim.action.description ]
                 , case claim.proofPhoto of
                     Just url ->
                         div
@@ -714,10 +873,23 @@ viewClaimModal { shared, accountName } profileSummaries claim =
                 , viewClaimDateAndState
                 ]
 
+        completionStatus =
+            { approved =
+                List.filter .isApproved claim.checks
+                    |> List.length
+            , disapproved =
+                List.filter (not << .isApproved) claim.checks
+                    |> List.length
+            , verifications =
+                claim.action.verifications
+            , claimStatus = claim.status
+            }
+
         body =
             div
                 [ class "block" ]
-                [ viewRewardInfo
+                [ viewVotingProgress shared completionStatus
+                , viewRewardInfo
                 , viewApprovedByProfileSummaryList
                 , viewDisapprovedByProfileSummaryList
                 , viewPendingVotersProfileSummaryList
@@ -732,7 +904,7 @@ viewClaimModal { shared, accountName } profileSummaries claim =
 
         claimDetailsButton =
             a
-                [ class "button button-primary w-full"
+                [ class "button button-primary w-full mt-4"
                 , target "_blank"
                 , Route.href claimRoute
                 ]
@@ -741,7 +913,7 @@ viewClaimModal { shared, accountName } profileSummaries claim =
                 ]
 
         footer =
-            div [ class "block w-1/2 mx-auto space-y-4" ]
+            div [ class "block w-full my-4 sm:w-1/2 sm:mx-auto" ]
                 [ if isVotable claim accountName shared.now then
                     div [ class "flex space-x-4" ]
                         [ button