mirror of
https://github.com/TheAnachronism/docspell.git
synced 2025-04-19 23:59:32 +00:00
dd935454c9
This drops fomantic-ui as css toolkit and introduces tailwindcss. With tailwind there are no predefined components, but it's very easy to create those. So customizing the look&feel is much simpler, most of the time no additional css is needed. This requires a complete rewrite of the markup + styles. Luckily all logic can be kept as is. The now old ui is not removed, it is still available by using a request header `Docspell-Ui` with a value of `1` for the old ui and `2` for the new ui. Another addition is "dev mode", where docspell serves assets with a no-cache header, to disable browser caching. This makes developing a lot easier.
113 lines
2.3 KiB
Elm
113 lines
2.3 KiB
Elm
module Comp.EquipmentForm exposing
|
|
( Model
|
|
, Msg(..)
|
|
, emptyModel
|
|
, getEquipment
|
|
, isValid
|
|
, update
|
|
, view
|
|
, view2
|
|
)
|
|
|
|
import Api.Model.Equipment exposing (Equipment)
|
|
import Comp.Basic as B
|
|
import Data.Flags exposing (Flags)
|
|
import Html exposing (..)
|
|
import Html.Attributes exposing (..)
|
|
import Html.Events exposing (onInput)
|
|
import Styles as S
|
|
|
|
|
|
type alias Model =
|
|
{ equipment : Equipment
|
|
, name : String
|
|
}
|
|
|
|
|
|
emptyModel : Model
|
|
emptyModel =
|
|
{ equipment = Api.Model.Equipment.empty
|
|
, name = ""
|
|
}
|
|
|
|
|
|
isValid : Model -> Bool
|
|
isValid model =
|
|
model.name /= ""
|
|
|
|
|
|
getEquipment : Model -> Equipment
|
|
getEquipment model =
|
|
Equipment model.equipment.id model.name model.equipment.created
|
|
|
|
|
|
type Msg
|
|
= SetName String
|
|
| SetEquipment Equipment
|
|
|
|
|
|
update : Flags -> Msg -> Model -> ( Model, Cmd Msg )
|
|
update _ msg model =
|
|
case msg of
|
|
SetEquipment t ->
|
|
( { model | equipment = t, name = t.name }, Cmd.none )
|
|
|
|
SetName n ->
|
|
( { model | name = n }, Cmd.none )
|
|
|
|
|
|
view : Model -> Html Msg
|
|
view model =
|
|
div [ class "ui form" ]
|
|
[ div
|
|
[ classList
|
|
[ ( "field", True )
|
|
, ( "error", not (isValid model) )
|
|
]
|
|
]
|
|
[ label [] [ text "Name*" ]
|
|
, input
|
|
[ type_ "text"
|
|
, onInput SetName
|
|
, placeholder "Name"
|
|
, value model.name
|
|
]
|
|
[]
|
|
]
|
|
]
|
|
|
|
|
|
|
|
--- View2
|
|
|
|
|
|
view2 : Model -> Html Msg
|
|
view2 model =
|
|
div [ class "flex flex-col" ]
|
|
[ div
|
|
[ class "mb-4"
|
|
]
|
|
[ label
|
|
[ for "equipname"
|
|
, class S.inputLabel
|
|
]
|
|
[ text "Name"
|
|
, B.inputRequired
|
|
]
|
|
, input
|
|
[ type_ "text"
|
|
, onInput SetName
|
|
, placeholder "Name"
|
|
, value model.name
|
|
, name "equipname"
|
|
, class S.textInput
|
|
, classList
|
|
[ ( "border-red-600 dark:border-orange-600"
|
|
, not (isValid model)
|
|
)
|
|
]
|
|
]
|
|
[]
|
|
]
|
|
]
|