Safe Haskell	Safe-Inferred

IHP.View.Types

Synopsis

data FormField = FormField {
- fieldType :: !InputType
- fieldName :: !Text
- fieldLabel :: !Text
- fieldValue :: !Text
- fieldInputId :: !Text
- validatorResult :: !(Maybe Violation)
- additionalAttributes :: [(Text, Text)]
- fieldClass :: !Text
- labelClass :: !Text
- disabled :: !Bool
- disableLabel :: !Bool
- disableGroup :: !Bool
- disableValidationResult :: !Bool
- cssFramework :: CSSFramework
- helpText :: !Text
- placeholder :: !Text
- required :: Bool
- autofocus :: Bool
}
data SubmitButton = SubmitButton {
- label :: Html
- buttonClass :: Text
- cssFramework :: CSSFramework
}
data FormContext model = FormContext {
- model :: model
- formAction :: !Text
- formMethod :: !Text
- cssFramework :: !CSSFramework
- formClass :: !Text
- formId :: !Text
- disableJavascriptSubmission :: !Bool
- customFormAttributes :: ![(Text, Text)]
- fieldNamePrefix :: !Text
}
data InputType
- = TextInput
- | NumberInput
- | CheckboxInput
- | ColorInput
- | EmailInput
- | HiddenInput
- | TextareaInput
- | DateInput
- | DateTimeInput
- | PasswordInput
- | SelectInput {
  - options :: ![(Text, Text)]
  }
- | RadioInput {
  - options :: ![(Text, Text)]
  }
- | FileInput
data CSSFramework = CSSFramework {
- styledFlashMessage :: CSSFramework -> FlashMessage -> Html
- styledFlashMessages :: CSSFramework -> [FlashMessage] -> Html
- styledFormField :: CSSFramework -> FormField -> Html
- styledTextFormField :: CSSFramework -> Text -> FormField -> Html -> Html
- styledTextareaFormField :: CSSFramework -> FormField -> Html -> Html
- styledCheckboxFormField :: CSSFramework -> FormField -> Html -> Html
- styledSelectFormField :: CSSFramework -> FormField -> Html -> Html
- styledRadioFormField :: CSSFramework -> FormField -> Html -> Html
- styledFormGroup :: CSSFramework -> Text -> Html -> Html
- styledSubmitButton :: CSSFramework -> SubmitButton -> Html
- styledSubmitButtonClass :: Text
- styledFormFieldHelp :: CSSFramework -> FormField -> Html
- styledInputClass :: CSSFramework -> FormField -> Text
- styledInputInvalidClass :: CSSFramework -> FormField -> Text
- styledFormGroupClass :: Text
- styledValidationResult :: CSSFramework -> FormField -> Html
- styledValidationResultClass :: Text
- styledPagination :: CSSFramework -> PaginationView -> Html
- styledPaginationLinkPrevious :: CSSFramework -> Pagination -> ByteString -> Html
- styledPaginationLinkNext :: CSSFramework -> Pagination -> ByteString -> Html
- styledPaginationPageLink :: CSSFramework -> Pagination -> ByteString -> Int -> Html
- styledPaginationDotDot :: CSSFramework -> Pagination -> Html
- styledPaginationItemsPerPageSelector :: CSSFramework -> Pagination -> (Int -> ByteString) -> Html
- styledBreadcrumb :: CSSFramework -> [BreadcrumbItem] -> BreadcrumbsView -> Html
- styledBreadcrumbItem :: CSSFramework -> [BreadcrumbItem] -> BreadcrumbItem -> Bool -> Html
}
data BreadcrumbsView = BreadcrumbsView {
- breadcrumbItems :: !Html
}
data PaginationView = PaginationView {
- cssFramework :: !CSSFramework
- pagination :: !Pagination
- pageUrl :: Int -> ByteString
- linkPrevious :: !Html
- linkNext :: !Html
- pageDotDotItems :: !Html
- itemsPerPageSelector :: !Html
}
type HtmlWithContext context = (?context :: context) => Html
type Layout = Html -> Html

Documentation

data FormField Source #

Constructors

FormField

Fields

fieldType :: !InputType
fieldName :: !Text
fieldLabel :: !Text
fieldValue :: !Text
fieldInputId :: !Text
validatorResult :: !(Maybe Violation)
additionalAttributes :: [(Text, Text)]
fieldClass :: !Text
labelClass :: !Text
disabled :: !Bool
disableLabel :: !Bool
disableGroup :: !Bool
disableValidationResult :: !Bool
cssFramework :: CSSFramework
helpText :: !Text
placeholder :: !Text
required :: Bool
autofocus :: Bool

Instances

Instances details

ToHtml FormField
Instance details Defined in IHP.View.Form Methods toHtml :: FormField -> Html #

data SubmitButton Source #

Constructors

SubmitButton
Fields label :: Html buttonClass :: Text cssFramework :: CSSFramework

Instances

Instances details

ToHtml SubmitButton
Instance details Defined in IHP.View.Form Methods toHtml :: SubmitButton -> Html #

data FormContext model Source #

Constructors

FormContext

Fields

model :: model
The record this form is based on
formAction :: !Text
Url where the form is submitted to
formMethod :: !Text
Usually POST, sometimes set to GET
cssFramework :: !CSSFramework
formClass :: !Text
In the generated HTML, the class attribute will be set to this value
formId :: !Text
In the generated HTML, the id attribute will be set to this value
disableJavascriptSubmission :: !Bool
When set to True, the IHP helpers.js will not submit the form using ajax
customFormAttributes :: ![(Text, Text)]
Attach custom HTML attributes here
fieldNamePrefix :: !Text
Used by nested forms to preprend the nested field name to the field name

Instances

Instances details

SetField "cssFramework" (FormContext record) CSSFramework Source #
Instance details Defined in IHP.View.Types Methods setField :: CSSFramework -> FormContext record -> FormContext record Source #
SetField "disableJavascriptSubmission" (FormContext record) Bool Source #
Instance details Defined in IHP.View.Types Methods setField :: Bool -> FormContext record -> FormContext record Source #
SetField "formAction" (FormContext record) Text Source #
Instance details Defined in IHP.View.Types Methods setField :: Text -> FormContext record -> FormContext record Source #
SetField "formClass" (FormContext record) Text Source #
Instance details Defined in IHP.View.Types Methods setField :: Text -> FormContext record -> FormContext record Source #
SetField "formId" (FormContext record) Text Source #
Instance details Defined in IHP.View.Types Methods setField :: Text -> FormContext record -> FormContext record Source #
SetField "formMethod" (FormContext record) Text Source #
Instance details Defined in IHP.View.Types Methods setField :: Text -> FormContext record -> FormContext record Source #
SetField "model" (FormContext record) record Source #
Instance details Defined in IHP.View.Types Methods setField :: record -> FormContext record -> FormContext record Source #
SetField "customFormAttributes" (FormContext record) [(Text, Text)] Source #
Instance details Defined in IHP.View.Types Methods setField :: [(Text, Text)] -> FormContext record -> FormContext record Source #

data InputType Source #

Constructors

TextInput
NumberInput
CheckboxInput
ColorInput
EmailInput
HiddenInput
TextareaInput
DateInput
DateTimeInput
PasswordInput
SelectInput
Fields options :: ![(Text, Text)]
RadioInput
Fields options :: ![(Text, Text)]
FileInput

data CSSFramework Source #

Render functions to render with Bootstrap, Tailwind CSS etc. We call this functions with the cssFramework passed to have late binding (like from OOP languages). Here's an explanation breaking it down, step by step

renderedHtml = styledPagination theCSSFramework theCSSFramework paginationView

Can also be written using get:

renderedHtml = (theCSSFramework.styledPagination) theCSSFramework paginationView

That's important to understand here. We get a $sel:styledPagination:CSSFramework function using 'theCSSFramework.styledPagination'. Next, we apply theCSSFramework to that function. We do that so because the $sel:styledPagination:CSSFramework function internally might want to call other functions of the CSSFramework type. But we might want to override some functions of the CSSFramework.

Here's an example of how it would look if we don't pass this a second time, and it's shortcomings. Let's assume $sel:styledPagination:CSSFramework is calling a styledButton:

data CSSFramework = CSSFramework { styledPagination :: Html, styledButton :: Html }

bootstrapCSS = CSSFramework { styledPagination, styledButton }
   where
       styledPagination = [hsx|<div>{styledButton}</div>|]
       styledButton = [hsx|<button style="color: red">button</button>|]]

myPage = [hsx|{styledPagination bootstrapCSS}|]

So far all seems fine. But now let's say we would like to override the button styling, and change the button to green instead of red:

customCSS = bootstrapCSS { styledButton = [hsx|<button style="color: green">button</button>|]]  }

myPage = [hsx|{styledPagination customCSS}|]

Now, when we render the myPage we will get 'div style="color: red"button/button /div' (a red button, while our customCSS specified it should be green).

Our way to fix this is to "late-bind" the calls, by manually passing around a CSSFramework. Here we added that second CSSFramework to all functions. Notice how $sel:styledPagination:CSSFramework is getting the correct styledButton by calling 'cssFramework.styledButton':

data CSSFramework = CSSFramework { styledPagination :: CSSFramework -> Html, styledButton :: CSSFramework -> Html }

bootstrapCSS = CSSFramework { styledPagination, styledButton }
   where
       styledPagination cssFramework = [hsx|<div>{cssFramework.styledButton}</div>|]
       styledButton cssFramework = [hsx|<button style="color: red">button</button>|]]

myPage = [hsx|{styledPagination bootstrapCSS bootstrapCSS}|]

Now, with this second CSSFramework in place we can customize it again:

customCSS = bootstrapCSS { styledButton = \cssFramework -> [hsx|<button style="color: green">button</button>|]]  }

myPage = [hsx|{styledPagination customCSS customCSS}|]

Constructors

CSSFramework

Fields

styledFlashMessage :: CSSFramework -> FlashMessage -> Html
styledFlashMessages :: CSSFramework -> [FlashMessage] -> Html
styledFormField :: CSSFramework -> FormField -> Html
Renders the full form field calling other functions below
styledTextFormField :: CSSFramework -> Text -> FormField -> Html -> Html
styledTextareaFormField :: CSSFramework -> FormField -> Html -> Html
styledCheckboxFormField :: CSSFramework -> FormField -> Html -> Html
styledSelectFormField :: CSSFramework -> FormField -> Html -> Html
styledRadioFormField :: CSSFramework -> FormField -> Html -> Html
styledFormGroup :: CSSFramework -> Text -> Html -> Html
styledSubmitButton :: CSSFramework -> SubmitButton -> Html
The primary form submit button
styledSubmitButtonClass :: Text
Class for the primary form submit button
styledFormFieldHelp :: CSSFramework -> FormField -> Html
Renders the help text below an input field. Used with [hsx|{(textField #firstname) { helpText = "Your first name" } }|]
styledInputClass :: CSSFramework -> FormField -> Text
First class attached to input/ elements, e.g. class="form-control"/
styledInputInvalidClass :: CSSFramework -> FormField -> Text
When the form validation failed, invalid inputs will have this class
styledFormGroupClass :: Text
Class applied to the div wrapping the label and input, e.g. "form-group"
styledValidationResult :: CSSFramework -> FormField -> Html
Elements that containers the validation error message for a invalid form field
styledValidationResultClass :: Text
Class name for container of validation error message
styledPagination :: CSSFramework -> PaginationView -> Html
Renders a the entire pager, with all its elements.
styledPaginationLinkPrevious :: CSSFramework -> Pagination -> ByteString -> Html
The pagination's previous link
styledPaginationLinkNext :: CSSFramework -> Pagination -> ByteString -> Html
The pagination's next link
styledPaginationPageLink :: CSSFramework -> Pagination -> ByteString -> Int -> Html
Render the pagination links
styledPaginationDotDot :: CSSFramework -> Pagination -> Html
Render the dots between pagination numbers (e.g. 5 6 ... 7 8)
styledPaginationItemsPerPageSelector :: CSSFramework -> Pagination -> (Int -> ByteString) -> Html
Render the items per page selector for pagination. Note the (Int -> ByteString), we are passing the pageUrl function, so anyone that would like to override it the selector with different items per page could still use the pageUrl function to get the correct URL.
styledBreadcrumb :: CSSFramework -> [BreadcrumbItem] -> BreadcrumbsView -> Html
Renders an entire breadcrumbs element.
styledBreadcrumbItem :: CSSFramework -> [BreadcrumbItem] -> BreadcrumbItem -> Bool -> Html
Render a single breadcrumb item. We pass the entire list of breadcrumbs, in case an item may change based on that list. The Bool indicates if item is the last one.

Instances

Instances details

Default CSSFramework Source #	Provides an unstyled CSSFramework This way we can later add more properties to the CSSFramework without having to update all the CSS Frameworks manually
Instance details Defined in IHP.View.CSSFramework Methods def :: CSSFramework #
SetField "cssFramework" (FormContext record) CSSFramework Source #
Instance details Defined in IHP.View.Types Methods setField :: CSSFramework -> FormContext record -> FormContext record Source #

data BreadcrumbsView Source #

Constructors

BreadcrumbsView
Fields breadcrumbItems :: !Html

data PaginationView Source #

Constructors

PaginationView
Fields cssFramework :: !CSSFramework pagination :: !Pagination pageUrl :: Int -> ByteString linkPrevious :: !Html linkNext :: !Html pageDotDotItems :: !Html itemsPerPageSelector :: !Html

type HtmlWithContext context = (?context :: context) => Html Source #

type Layout = Html -> Html Source #

A layout is just a function taking a view and returning a new view.

Example: A very basic html layout.

myLayout :: Layout
myLayout view = [hsx|
    <html>
        <body>
            {view}
        </body>
    </html>
|]