demo: 労働者の予定一覧画面

Changes

1 changed files (+102/-1)

• demo/src/Main.elm
  • @@ -20,7 +20,7 @@ import Browser.Navigation
    import Html exposing (text) import Html.Attributes exposing (href, style) import Url - import Url.Parser + import Url.Parser exposing ((</>)) main : Program Flags Model Msg
  • @@ -63,6 +63,7 @@ type Route
    | WorkerHome Editability | EmployerHome | AdminHome + | WorkerSchedule User Editability | NotFound
  • @@ -74,6 +75,9 @@ routeParser =
    , Url.Parser.map (WorkerHome ReadWrite) (Url.Parser.s "worker-mutable") , Url.Parser.map EmployerHome (Url.Parser.s "employer") , Url.Parser.map AdminHome (Url.Parser.s "admin") + , Url.Parser.map (WorkerSchedule Worker Readonly) (Url.Parser.s "worker" </> Url.Parser.s "schedule") + , Url.Parser.map (WorkerSchedule Worker ReadWrite) (Url.Parser.s "worker" </> Url.Parser.s "schedule-mutable") + , Url.Parser.map (WorkerSchedule Employer ReadWrite) (Url.Parser.s "employer" </> Url.Parser.s "worker-schedule") ]
  • @@ -126,6 +130,12 @@ update msg model =
    -- VIEW + type PaidLeaveStatus + = Pending + | ManuallyApproved String + | AutoApproved + + view : Model -> Browser.Document Msg view model = case model.route of
  • @@ -210,13 +220,104 @@ view model =
    ] } + WorkerSchedule role editability -> + { title = "労働者予定一覧 | Yamori デモ" + , body = + let + name = + case role of + Worker -> + "あなた" + + _ -> + "田中 太郎" + + pageAction = + case editability of + Readonly -> + "閲覧" + + ReadWrite -> + "閲覧と変更" + + list : List (Html.Html a) -> Html.Html a + list = + Html.ul + [ style "display" "flex" + , style "flex-direction" "column" + , style "gap" "0.75em" + , style "padding" "0" + ] + + item : String -> PaidLeaveStatus -> Html.Html a + item date status = + Html.li + [ style "display" "flex" + , style "flex-direction" "column" + ] + [ Html.span [] [ text date ] + , Html.span + [ style "font-size" "0.9em", style "opacity" "0.8" ] + [ case status of + Pending -> + text "未承認" + + ManuallyApproved by -> + text (by ++ "によって承認済み") + + AutoApproved -> + text "自動承認済み" + ] + , Html.div + [ style "display" "flex" + , style "gap" "0.5em" + , style "margin-top" "0.25em" + ] + [ case editability of + Readonly -> + text "" + + ReadWrite -> + Html.button [] [ text "変更" ] + , case role of + Worker -> + text "" + + _ -> + case status of + Pending -> + Html.button [] [ text "承認" ] + + _ -> + Html.button [] [ text "未承認に戻す" ] + ] + ] + in + [ Html.h1 [] [ text "有給休暇の予定と実績" ] + , Html.p [] + [ text (name ++ "の有給休暇の予定と実績の" ++ pageAction ++ "が行えます。") ] + , Html.h2 [] [ text "2026年2月" ] + , list + [ item "2026年2月3日" (ManuallyApproved "山田 花子") + , item "2026年2月10日" AutoApproved + ] + , Html.h2 [] [ text "2026年3月" ] + , list + [ item "2026年3月9日" Pending + ] + ] + } + DemoIndex -> { title = "Yamori デモ 画面選択" , body = [ Html.ul [] [ Html.li [] [ Html.a [ href "/worker" ] [ text "労働者ホーム" ] ] , Html.li [] [ Html.a [ href "/worker-mutable" ] [ text "労働者ホーム (編集権限あり)" ] ] + , Html.li [] [ Html.a [ href "/worker/schedule" ] [ text "労働者予定一覧" ] ] + , Html.li [] [ Html.a [ href "/worker/schedule-mutable" ] [ text "労働者予定一覧 (編集権限あり)" ] ] , Html.li [] [ Html.a [ href "/employer" ] [ text "使用者ホーム" ] ] + , Html.li [] [ Html.a [ href "/employer/worker-schedule" ] [ text "使用者から見た労働者予定一覧" ] ] , Html.li [] [ Html.a [ href "/admin" ] [ text "管理者ホーム" ] ] ] ]