Add navigation for browsing between comments

Author: janslifka

engine-shared/elm/Shared/Utils/ListUtils.elm

@@ -0,0 +1,49 @@
+module Shared.Utils.ListUtils exposing (findNextInfinite, findPreviousInfinite)
+
+import List.Extra as List
+
+
+findPrevious : a -> List a -> Maybe a
+findPrevious item list =
+    case list of
+        x :: y :: rest ->
+            if item == y then
+                Just x
+
+            else
+                findPrevious item (y :: rest)
+
+        _ ->
+            Nothing
+
+
+findPreviousInfinite : a -> List a -> Maybe a
+findPreviousInfinite item list =
+    if List.head list == Just item then
+        List.last list
+
+    else
+        findPrevious item list
+
+
+findNext : a -> List a -> Maybe a
+findNext item list =
+    case list of
+        x :: y :: rest ->
+            if item == x then
+                Just y
+
+            else
+                findNext item (y :: rest)
+
+        _ ->
+            Nothing
+
+
+findNextInfinite : a -> List a -> Maybe a
+findNextInfinite item list =
+    if List.last list == Just item then
+        List.head list
+
+    else
+        findNext item list

engine-wizard/elm/Wizard/Common/Components/Questionnaire.elm

@@ -97,6 +97,7 @@ import Shared.Markdown as Markdown
 import Shared.RegexPatterns as RegexPatterns
 import Shared.Undraw as Undraw
 import Shared.Utils exposing (dispatch, flip, getUuidString, listFilterJust, listInsertIf)
+import Shared.Utils.ListUtils as ListUtils
 import SplitPane
 import String
 import String.Extra as String
@@ -2458,6 +2459,35 @@ viewQuestionnaireRightPanelComments appState model path =
 viewQuestionnaireRightPanelCommentsLoaded : AppState -> Model -> String -> List CommentThread -> Html Msg
 viewQuestionnaireRightPanelCommentsLoaded appState model path commentThreads =
     let
+        comments =
+            List.map .path <|
+                QuestionnaireQuestionnaire.getComments model.questionnaire
+
+        nextPrevNavigation =
+            if List.length comments > 1 then
+                let
+                    previousCommentsPath =
+                        Maybe.withDefault "" <|
+                            ListUtils.findPreviousInfinite path comments
+
+                    nextCommentsPath =
+                        Maybe.withDefault "" <|
+                            ListUtils.findNextInfinite path comments
+                in
+                div [ class "comments-navigation" ]
+                    [ a [ onClick (OpenComments False previousCommentsPath) ]
+                        [ fa "fas fa-arrow-left me-2"
+                        , text (gettext "Previous" appState.locale)
+                        ]
+                    , a [ onClick (OpenComments False nextCommentsPath) ]
+                        [ text (gettext "Next" appState.locale)
+                        , fa "fas fa-arrow-right ms-2"
+                        ]
+                    ]
+
+            else
+                emptyNode
+
         navigationView =
             if Feature.projectCommentPrivate appState model.questionnaire then
                 viewCommentsNavigation appState model commentThreads
@@ -2508,7 +2538,8 @@ viewQuestionnaireRightPanelCommentsLoaded appState model path commentThreads =
                 |> List.sum
     in
     div [ class "Comments" ]
-        [ viewCommentsResolvedSelect appState model resolvedCommentsCount
+        [ nextPrevNavigation
+        , viewCommentsResolvedSelect appState model resolvedCommentsCount
         , navigationView
         , resolvedThreadsView
         , commentThreadsView

engine-wizard/scss/modules/Common/Components/_Questionnaire.scss

@@ -381,6 +381,30 @@ $toolbar-height: 40px;
         }
 
         .Comments {
+            .comments-navigation {
+                position: sticky;
+                top: -1rem;
+                z-index: 200;
+                background: $gray-100;
+                margin: -1rem -1rem 0 -1rem;
+                padding: 0;
+                border-bottom: 1px solid $gray-400;
+                margin-bottom: 1rem;
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+
+                a {
+                    @include not-selectable;
+                    padding: $spacer-2 $spacer-3;
+                    text-align: center;
+                    text-decoration: none;
+
+                    &:hover {
+                        background: $gray-200;
+                    }
+                }
+            }
+
             .form-check {
                 background: $gray-100;
                 margin: -1rem -1rem 0 -1rem;