Component Guide – REMS

[nav-link-impl {:path "example/path", :title "Link text"}]

[nav-link-impl
 {:path "example/path", :title "Link text", :active? true}]

[small]

[big]

[language-switcher]

[oidc/login-component]

[:table.rems-table.cart
 [:tbody [item-view {:localizations {:en {:title "Item title"}}} true]]]

[:table.rems-table.cart
 [:tbody
  [item-view {:localizations {:en {:title "Item title"}}} false]]]

[:table.rems-table.cart
 [bundle-view
  [{:localizations {:en {:title "Item title 1"}}}
   {:localizations {:en {:title "Item title 2"}}}
   {:localizations {:en {:title "Item title 3"}}}]]]

[cart-list [] nil]

[cart-list
 [{:localizations {:en {:title "Item title"}}, :wfid 1}
  {:localizations {:en {:title "Another title"}}, :wfid 2}]]

[cart-list
 [{:localizations {:en {:title "First title"}}, :wfid 2}
  {:localizations {:en {:title "Second title"}}, :wfid 1}
  {:localizations {:en {:title "Third title"}}, :wfid 1}
  {:localizations {:en {:title "Fourth title"}}, :wfid 1}
  {:localizations {:en {:title "Fifth title"}}, :wfid 3}]]

[cart-list
 [{:localizations {:en {:title "First form"}}, :wfid 1, :formid 1}
  {:localizations {:en {:title "Second form"}}, :wfid 1, :formid 2}
  {:localizations {:en {:title "First form"}}, :wfid 1, :formid 1}
  {:localizations {:en {:title "Second form"}}, :wfid 1, :formid 2}
  {:localizations {:en {:title "First form"}}, :wfid 1, :formid 1}]]

[list
 {:id :rems.application-list/example1,
  :applications :rems.application-list/no-applications}]

[list
 {:id :rems.application-list/example2,
  :applications :rems.application-list/example-applications,
  :visible-columns
  #{:description
    :last-activity
    :created
    :state
    :id
    :resource
    :applicant
    :view}}]

[list
 {:id :rems.application-list/example3,
  :applications :rems.application-list/example-applications,
  :default-sort-column :created,
  :default-sort-order :desc}]

[component
 {:id "standard-collapsible-1",
  :title "Standard",
  :always [:p "I am content that is always visible"],
  :collapse [:p "I am content that you can hide"]}]

[component
 {:id "standard-collapsible-2",
  :title "Focus on show",
  :always [:p "Collapsed input receives focus when opened"],
  :collapse [:input]}]

[component
 {:id "standard-collapsible-3",
  :title "No collapse",
  :always [:p "I am content that is always visible"],
  :footer [:div.solid-group "I am the footer that is always visible"]}]

[component
 {:on-close #(js/console.log "bye"),
  :top-less-button? true,
  :footer [:div.solid-group "I am the footer that is always visible"],
  :title "Highly customized",
  :id "standard-collapsible-4",
  :bottom-less-button? true,
  :open? true,
  :collapse-hidden
  [:p "I am content that is only visible when collapsed"],
  :collapse
  (into [:div] (repeat 3 [:p "I am long content that you can hide"])),
  :on-open #(js/console.log "hello"),
  :always
  [:div.solid-group
   [:b "Custom controls:"]
   [rems.collapsible/toggle-control
    {:collapsible-id "standard-collapsible-4"}]]}]

[minimal
 {:id "minimal-collapsible-1",
  :always
  [rems.collapsible/toggle-control
   {:collapsible-id "minimal-collapsible-1"}],
  :collapse [:p "I am content that you can hide"]}]

[minimal
 {:id "minimal-collapsible-2",
  :footer
  [rems.collapsible/toggle-control
   {:collapsible-id "minimal-collapsible-2"}],
  :collapse [:p "I am content that you can hide"]}]

[minimal
 {:id "minimal-collapsible-3",
  :open? true,
  :always
  [rems.collapsible/toggle-control
   {:collapsible-id "minimal-collapsible-3"}],
  :collapse
  (into [:div] (repeat 3 [:p "I am long content that you can hide"])),
  :collapse-hidden
  [:p "I am content that is only visible when collapsed"],
  :footer
  [rems.collapsible/toggle-control
   {:collapsible-id "minimal-collapsible-3"}]}]

[expander
 {:id "expander-collapsible-1",
  :title "The whole header is clickable",
  :collapse
  (into [:div] (repeat 3 [:p "I am content that you can hide"]))}]

[expander
 {:id "expander-collapsible-2",
  :title [:h3.m-0 "Initially open"],
  :collapse
  (into [:div] (repeat 3 [:p "I am content that you can hide"])),
  :open? true}]

[member-info
 {:id "info1",
  :attributes
  {:userid "developer@uu.id",
   :email "developer@uu.id",
   :name "Deve Loper",
   :notification-email "notification@example.com",
   :organizations
   [#:organization{:id "Testers"} #:organization{:id "Users"}],
   :address "Testikatu 1, 00100 Helsinki",
   :researcher-status-by "so"},
  :application
  #:application{:id 42,
                :applicant {:userid "developer@uu.id"},
                :licenses [#:license{:id 1}],
                :accepted-licenses {"developer@uu.id" #{1}}}}]

[member-info
 {:id "info2",
  :attributes
  {:userid "developer",
   :email "developer@uu.id",
   :address "Testikatu 1, 00100 Helsinki"}}]

[member-info
 {:id "info3",
  :attributes {:userid "alice"},
  :application
  #:application{:id 42,
                :applicant {:userid "developer"},
                :licenses [#:license{:id 1}],
                :permissions
                #{:application.command/change-applicant
                  :application.command/remove-member}},
  :group? true}]

[member-info
 {:id "info4",
  :attributes {:name "John Smith", :email "john.smith@invited.com"},
  :application #:application{:id 42, :applicant {:userid "developer"}},
  :group? true}]

[member-info
 {:id "info5",
  :attributes {:name "John Smith", :email "john.smith@invited.com"},
  :application
  #:application{:id 42,
                :applicant {:userid "developer"},
                :permissions #{:application.command/uninvite-member}},
  :group? true}]

[member-info
 {:id "info6",
  :group? false,
  :attributes
  {:userid "developer@uu.id",
   :email "developer@uu.id",
   :name "Deve Loper"}}]

[member-info
 {:id "info7",
  :simple? true,
  :attributes
  {:userid "developer@uu.id",
   :email "developer@uu.id",
   :name "Deve Loper"}}]

[applicants-info
 #:application{:id 42,
               :applicant
               {:userid "developer",
                :email "developer@uu.id",
                :name "Deve Loper"},
               :members #{{:userid "bob"} {:userid "alice"}},
               :invited-members
               #{{:name "John Smith",
                  :email "john.smith@invited.com"}},
               :licenses [#:license{:id 1}],
               :accepted-licenses {"developer" #{1}},
               :permissions
               #{:application.command/invite-member
                 :application.command/add-member}}]

[applicants-info
 #:application{:id 42,
               :applicant
               {:userid "developer",
                :email "developer@uu.id",
                :name "Deve Loper"},
               :members #{},
               :invited-members #{},
               :licenses [#:license{:id 1}],
               :accepted-licenses {"developer" #{1}},
               :permissions #{}}]

[disabled-items-warning
 #:application{:state :application.state/submitted,
               :resources
               [#:catalogue-item{:enabled false,
                                 :archived false,
                                 :title
                                 {:en "Disabled catalogue item"}}]}]

[disabled-items-warning #:application{:permissions #{:see-everything}}]

[disabled-items-warning
 #:application{:permissions #{:see-everything},
               :state :application.state/submitted,
               :resources
               [#:catalogue-item{:enabled true,
                                 :archived true,
                                 :title {:en "Catalogue item 1"}}
                #:catalogue-item{:enabled false,
                                 :archived false,
                                 :title {:en "Catalogue item 2"}}
                #:catalogue-item{:enabled true,
                                 :archived false,
                                 :title {:en "Catalogue item 3"}}]}]

[blacklist-warning {}]

[blacklist-warning
 #:application{:resources
               [{:resource/ext-id "urn:11",
                 :catalogue-item/title {:fi "11", :sv "11", :en "11"}}
                {:resource/ext-id "urn:12",
                 :catalogue-item/title
                 {:fi "12", :sv "12", :en "12"}}],
               :blacklist
               [#:blacklist{:user
                            {:userid "user1",
                             :name "First User",
                             :email "first@example.com"},
                            :resource #:resource{:ext-id "urn:11"}}
                #:blacklist{:user
                            {:userid "user1",
                             :name "First User",
                             :email "first@example.com"},
                            :resource #:resource{:ext-id "urn:12"}}
                #:blacklist{:user
                            {:userid "user2",
                             :name "Second User",
                             :email "second@example.com"},
                            :resource #:resource{:ext-id "urn:11"}}]}]

[license-field
 #:application{:id 123}
 #:license{:id 1,
           :type :link,
           :title {:en "Link to license"},
           :link
           {:en "https://creativecommons.org/licenses/by/4.0/deed.en"}}
 false]

[license-field
 #:application{:id 123}
 {:license/id 1,
  :license/type :link,
  :license/title {:en "Link to license"},
  :license/link
  {:en "https://creativecommons.org/licenses/by/4.0/deed.en"},
  :accepted false}
 true]

[license-field
 #:application{:id 123}
 {:license/id 1,
  :license/type :link,
  :license/title {:en "Link to license"},
  :license/link
  {:en "https://creativecommons.org/licenses/by/4.0/deed.en"},
  :accepted true}
 true]

[license-field
 #:application{:id 123}
 #:license{:id 1,
           :type :text,
           :title {:en "A Text License"},
           :text {:en lipsum-paragraphs}}
 false]

[license-field
 #:application{:id 123}
 #:license{:id 1,
           :type :attachment,
           :title {:en "A Text License"},
           :text {:en lipsum-paragraphs}}
 false]

[actions-form #:application{:id 123, :permissions #{}} {}]

[actions-form
 #:application{:id 123,
               :permissions #{:application.command/save-draft}}
 {:show-pdf-action true}]

[actions-form
 #:application{:id 123,
               :permissions
               #{:application.command/copy-as-new
                 :application.command/submit
                 :application.command/request-review
                 :application.command/review
                 :application.command/reject
                 :application.command/revoke
                 :application.command/request-decision
                 :application.command/decide
                 :application.command/remark
                 :application.command/save-draft
                 :application.command/approve
                 :application.command/return
                 :application.command/assign-external-id
                 :application.command/close},
               :attachments
               [#:attachment{:filename "foo.txt"}
                #:attachment{:filename "bar.txt"}]}]

[render-application
 {:application
  #:application{:id 17,
                :applicant {:userid "applicant"},
                :roles #{:applicant},
                :permissions #{:application.command/accept-licenses},
                :state :application.state/draft,
                :resources
                [#:catalogue-item{:title {:en "An applied item"}}],
                :forms
                [#:form{:id 1,
                        :fields
                        [#:field{:id "fld1",
                                 :type :text,
                                 :title {:en "Field 1"},
                                 :placeholder {:en "placeholder 1"}}
                         {:field/id "fld2",
                          :field/type :label,
                          :title "Please input your wishes below."}
                         #:field{:id "fld3",
                                 :type :texta,
                                 :optional true,
                                 :title {:en "Field 2"},
                                 :placeholder {:en "placeholder 2"}}
                         #:field{:id "fld4",
                                 :type :unsupported,
                                 :title {:en "Field 3"},
                                 :placeholder {:en "placeholder 3"}}
                         #:field{:id "fld5",
                                 :type :date,
                                 :title {:en "Field 4"}}]}],
                :licenses
                [#:license{:id 4,
                           :type :text,
                           :title {:en "A Text License"},
                           :text {:en lipsum}}
                 #:license{:id 5,
                           :type :link,
                           :title {:en "Link to license"},
                           :link
                           {:en
                            "https://creativecommons.org/licenses/by/4.0/deed.en"}}]},
  :edit-application
  {:field-values {1 {"fld1" "abc"}},
   :show-diff {},
   :validation {:errors nil, :warnings nil},
   :accepted-licenses {"applicant" #{5}}},
  :userid "applicant"}]

[render-application
 {:application
  #:application{:id 17,
                :state :application.state/submitted,
                :resources
                [#:catalogue-item{:title {:en "An applied item"}}],
                :forms
                [#:form{:id 1,
                        :fields
                        [#:field{:id "fld1",
                                 :type :text,
                                 :title {:en "Field 1"},
                                 :placeholder
                                 {:en "placeholder 1"}}]}],
                :licenses
                [#:license{:id 4,
                           :type :text,
                           :title {:en "A Text License"},
                           :text {:en lipsum}}]}}]

[render-application
 {:application
  #:application{:id 17,
                :state :application.state/approved,
                :applicant
                {:userid "userid",
                 :email "email@example.com",
                 :additional "additional field"},
                :resources
                [#:catalogue-item{:title {:en "An applied item"}}],
                :forms
                [#:form{:id 1,
                        :fields
                        [#:field{:id "fld1",
                                 :type :text,
                                 :title {:en "Field 1"},
                                 :placeholder
                                 {:en "placeholder 1"}}]}],
                :licenses
                [#:license{:id 4,
                           :type :text,
                           :title {:en "A Text License"},
                           :text {:en lipsum}}]}}]

[event-view
 nil
 #:event{:time #inst "2020-01-01T08:35:00.000000000-00:00",
         :type :application.event/submitted,
         :actor-attributes {:userid "alice", :name "Alice Applicant"}}]

[event-view
 nil
 {:event/time #inst "2020-01-01T08:35:00.000000000-00:00",
  :event/type :application.event/decided,
  :event/actor-attributes {:name "Hannah Handler"},
  :application/decision :rejected,
  :application/comment "This application is bad."}]

(let [opts {:attachments
            [#:attachment{:filename
                          "verylongfilename_loremipsum_dolorsitamet.pdf"}]}]
  [event-view
   opts
   {:event/time #inst "2020-01-01T08:35:00.000000000-00:00",
    :event/type :application.event/remarked,
    :event/actor-attributes {:name "Hannah Handler"},
    :application/comment (str lipsum "\n\nA final line.")}])

[event-view
 nil
 {:event/time #inst "2020-01-01T08:35:00.000000000-00:00",
  :event/type :application.event/remarked,
  :event/actor-attributes {:userid "rems-handler"},
  :application/comment
  "I could be reviewer 1 or reviewer 2, but you will never know."}]

(let [opts {:attachments
            [#:attachment{:filename "new_image.jpeg"}
             #:attachment{:filename "new_document.pdf"}],
            :redacted-attachments
            [#:attachment{:filename "image_alice.jpeg", :redacted true}
             #:attachment{:filename "document_alice.pdf",
                          :redacted true}]}]
  [event-view
   opts
   {:event/time #inst "2023-10-04T06:50:00.000000000-00:00",
    :event/type :application.event/attachments-redacted,
    :event/actor-attributes {:name "Hannah Handler"},
    :application/comment (str lipsum "\n\nA final line.")}])

(let [opts {:attachments
            (list
              #:attachment{:filename :filename/redacted}
              #:attachment{:filename "document.pdf"}
              #:attachment{:filename :filename/redacted})}]
  [event-view
   opts
   #:event{:time #inst "2023-10-04T06:50:00.000000000-00:00",
           :type :application.event/remarked,
           :actor-attributes {:name "Hannah Handler"}}])

(let [opts {:attachments
            (list
              #:attachment{:filename "document.txt"}
              #:attachment{:filename "agreement.doc", :redacted true}
              #:attachment{:filename
                           "binding.834c530d-1a72-46c3-9593-f84269a915bf.pdf",
                           :redacted true}
              #:attachment{:filename "document.txt"}
              #:attachment{:filename
                           "document.7097ae1c-ba94-47b0-a551-9f127da5e277.jpeg"}
              #:attachment{:filename
                           "document.6b10763b-f1b7-435d-aaf0-b327805f58fc.pdf",
                           :redacted true}
              #:attachment{:filename "binding.important.txt"})}]
  [event-view
   opts
   #:event{:time #inst "2023-10-04T06:50:00.000000000-00:00",
           :type :application.event/approved,
           :actor-attributes {:name "Hannah Handler"}}])

[application-copy-notice {}]

[application-copy-notice
 #:application{:copied-from
               #:application{:id 1, :external-id "2018/10"}}]

[application-copy-notice
 #:application{:copied-to
               [#:application{:id 2, :external-id "2019/20"}]}]

[application-copy-notice
 #:application{:copied-to
               [#:application{:id 2, :external-id "2019/20"}
                #:application{:id 3, :external-id "2020/30"}]}]

[application-copy-notice
 #:application{:copied-from
               #:application{:id 1, :external-id "2018/10"},
               :copied-to
               [#:application{:id 2, :external-id "2019/20"}
                #:application{:id 3, :external-id "2020/30"}]}]

[multi-attachment-view
 {:id "action-guide-example-1",
  :attachment nil,
  :on-attach (fn [_] nil)}]

[multi-attachment-view
 {:id "action-guide-example-1",
  :attachments
  [#:attachment{:filename "attachment.xlsx"}
   #:attachment{:filename "data.pdf"}],
  :on-attach (fn [_] nil)}]

[multi-attachment-view
 {:id "action-guide-example-1",
  :label "Long filenames",
  :attachments
  [#:attachment{:filename
                "this_is_the_very_very_very_long_filename_of_a_test_file_the_file_itself_is_quite_short_though_abcdefghijklmnopqrstuvwxyz0123456789_overflow_overflow_overflow.txt"}
   #:attachment{:filename
                "this_is_another_very_very_very_long_filename_of_another_test_file_the_file_itself_is_quite_short_though_abcdefghijklmnopqrstuvwxyz0123456789_overflow_overflow_overflow.txt"}],
  :on-attach (fn [_] nil)}]

[field
 {:form/id 1,
  :field/id "1",
  :field/type :text,
  :field/title {:en "Title"},
  :field/placeholder {:en "placeholder"}}]

[field
 {:form/id 1,
  :field/id "info-1",
  :field/type :text,
  :field/title {:en "Title"},
  :field/placeholder {:en "placeholder"},
  :field/info-text
  {:en
   "Extra information about the field, \n\n                                           maybe it even contains a link, such as https://en.wikipedia.org/wiki/Igor_Stravinsky\n                                           \n\n                                           or https://en.wikipedia.org/wiki/Dmitri_Shostakovich"}}]

[field
 {:form/id 2,
  :field/id "1",
  :field/type :text,
  :field/title {:en "Title"},
  :field/placeholder {:en "placeholder"},
  :field/max-length 10}]

[field
 {:form/id 3,
  :field/id "1",
  :field/type :text,
  :field/title {:en "Title http://google.com"},
  :field/placeholder {:en "placeholder"},
  :validation {:type :t.form.validation/required}}]

[field
 {:form/id 4,
  :field/id "1",
  :field/type :text,
  :field/title {:en "Title"},
  :field/placeholder {:en "placeholder"},
  :readonly true}]

[field
 {:form/id 5,
  :field/id "1",
  :field/type :text,
  :field/title {:en "Title"},
  :field/placeholder {:en "placeholder"},
  :readonly true,
  :field/value lipsum-short}]

[field
 {:form/id 6,
  :field/id "1",
  :field/type :texta,
  :field/title {:en "Title"},
  :field/placeholder {:en "placeholder"}}]

[field
 {:form/id 7,
  :field/id "1",
  :field/type :texta,
  :field/title {:en "Title"},
  :field/placeholder {:en "placeholder"},
  :field/max-length 10}]

[field
 {:form/id 8,
  :field/id "1",
  :field/type :texta,
  :field/title {:en "Title"},
  :field/placeholder {:en "placeholder"},
  :validation {:type :t.form.validation/required}}]

[field
 {:form/id 9,
  :field/id "1",
  :field/type :texta,
  :field/title {:en "Title"},
  :field/placeholder {:en "placeholder"},
  :readonly true,
  :field/value lipsum-paragraphs}]

[field
 {:app-id 5,
  :form/id 15,
  :field/id "6",
  :field/type :attachment,
  :field/title {:en "Title"}}]

[field
 {:app-id 5,
  :form/id 16,
  :field/id "6",
  :field/type :attachment,
  :field/title {:en "Title"},
  :field/value "123",
  :field/attachments
  [#:attachment{:id 123, :filename "test.txt"}
   #:attachment{:id 456, :filename "second.pdf"}]}]

[field
 {:app-id 5,
  :form/id 16,
  :field/id "6",
  :field/type :attachment,
  :field/title {:en "Title"},
  :field/value "123",
  :field/attachments
  [#:attachment{:id 123,
                :filename
                "this_is_the_very_very_very_long_filename_of_a_test_file_the_file_itself_is_quite_short_though_abcdefghijklmnopqrstuvwxyz0123456789_overflow_overflow_overflow.txt"}]}]

[field
 {:app-id 5,
  :form/id 17,
  :field/id "6",
  :field/type :attachment,
  :field/title {:en "Title"},
  :field/value "123",
  :field/attachments [#:attachment{:id 123, :filename "test.txt"}],
  :field/attachment-status :success}]

[field
 {:app-id 5,
  :form/id 17,
  :field/id "6",
  :field/type :attachment,
  :field/title {:en "Title"},
  :field/value "123",
  :field/attachments [#:attachment{:id 123, :filename "test.txt"}],
  :field/attachment-status :error}]

[field
 {:app-id 5,
  :form/id 17,
  :field/id "6",
  :field/type :attachment,
  :field/title {:en "Title"},
  :field/value "123",
  :field/attachments [#:attachment{:id 123, :filename "test.txt"}],
  :field/attachment-status :pending}]

[field
 {:field/title {:en "Title"},
  :app-id 5,
  :field/previous-attachments
  [#:attachment{:id 789, :filename "old.txt"}],
  :form/id 18,
  :field/type :attachment,
  :field/value "123",
  :field/attachments
  [#:attachment{:id 123, :filename "new.txt"}
   #:attachment{:id 456, :filename "new2.txt"}],
  :field/previous-value "456",
  :field/id "6",
  :diff true}]

[field
 {:field/title {:en "Title"},
  :app-id 5,
  :field/previous-attachment
  [#:attachment{:id 456, :filename "old.txt"}],
  :form/id 19,
  :field/type :attachment,
  :field/value "123",
  :field/attachments
  [#:attachment{:id 123, :filename "new.txt"}
   #:attachment{:id 456, :filename "new2.txt"}],
  :field/previous-value "456",
  :field/id "6"}]

[field
 {:field/title {:en "Title"},
  :app-id 5,
  :field/previous-attachments
  (repeat 20 #:attachment{:id 789, :filename "old.txt"}),
  :form/id 18,
  :field/type :attachment,
  :field/value "123",
  :field/attachments
  (repeat 20 #:attachment{:id 123, :filename "new.txt"}),
  :field/previous-value "456",
  :field/id "6",
  :diff true}]

[field
 {:app-id 5,
  :form/id 20,
  :field/id "6",
  :field/type :attachment,
  :field/title {:en "Title"},
  :field/previous-value "456",
  :field/previous-attachments
  [#:attachment{:id 456, :filename "old.txt"}],
  :diff true}]

[field
 {:app-id 5,
  :form/id 21,
  :field/id "6",
  :field/type :attachment,
  :field/title {:en "Title"},
  :field/previous-value "456",
  :field/previous-attachments
  [#:attachment{:id 456, :filename "old.txt"}]}]

[field
 {:app-id 5,
  :form/id 22,
  :field/id "6",
  :field/type :attachment,
  :field/title {:en "Title"},
  :readonly true}]

[field
 {:app-id 5,
  :form/id 23,
  :field/id "6",
  :field/type :attachment,
  :field/title {:en "Title"},
  :readonly true,
  :field/value "123",
  :field/attachments
  [#:attachment{:id 123, :filename "test.txt"}
   #:attachment{:id 456, :filename "second.pdf"}]}]

[field
 {:app-id 5,
  :form/id 23,
  :field/id "6",
  :field/type :attachment,
  :field/title {:en "Title"},
  :readonly true,
  :field/value "123",
  :field/attachments
  (repeat 100 #:attachment{:id 123, :filename "test.txt"})}]

[field
 {:form/id 24,
  :field/id "1",
  :field/type :date,
  :field/title {:en "Title"}}]

[field
 {:form/id 25,
  :field/id "1",
  :field/type :date,
  :field/title {:en "Title"},
  :field/value "2000-12-31"}]

[field
 {:form/id 26,
  :field/id "1",
  :field/type :date,
  :field/title {:en "Title"},
  :readonly true,
  :field/value ""}]

[field
 {:form/id 27,
  :field/id "1",
  :field/type :date,
  :field/title {:en "Title"},
  :readonly true,
  :field/value "2000-12-31"}]

[field
 {:form/id 28,
  :field/id "1",
  :field/type :option,
  :field/title {:en "Title"},
  :field/value "y",
  :field/options
  [{:key "y", :label {:en "Yes", :fi "Kyllä"}}
   {:key "n", :label {:en "No", :fi "Ei"}}]}]

[field
 {:form/id 29,
  :field/id "1",
  :field/type :option,
  :field/title {:en "Title"},
  :field/value "y",
  :readonly true,
  :field/options
  [{:key "y", :label {:en "Yes", :fi "Kyllä"}}
   {:key "n", :label {:en "No", :fi "Ei"}}]}]

[field
 {:form/id 30,
  :field/id "1",
  :field/type :multiselect,
  :field/title {:en "Title"},
  :field/value "egg bacon",
  :field/options
  [{:key "egg", :label {:en "Egg", :fi "Munaa"}}
   {:key "bacon", :label {:en "Bacon", :fi "Pekonia"}}
   {:key "spam", :label {:en "Spam", :fi "Lihasäilykettä"}}]}]

[field
 {:form/id 31,
  :field/id "1",
  :field/type :multiselect,
  :field/title {:en "Title"},
  :field/value "egg bacon",
  :readonly true,
  :field/options
  [{:key "egg", :label {:en "Egg", :fi "Munaa"}}
   {:key "bacon", :label {:en "Bacon", :fi "Pekonia"}}
   {:key "spam", :label {:en "Spam", :fi "Lihasäilykettä"}}]}]

[field
 {:form/id 32,
  :field/id "1",
  :field/type :texta,
  :field/optional true,
  :field/title {:en "Title"},
  :field/placeholder {:en "placeholder"}}]

[field
 {:form/id 33,
  :field/id "1",
  :field/type :label,
  :field/title {:en "Lorem ipsum dolor sit amet"}}]

[field
 {:form/id 34,
  :field/id "1",
  :field/type :description,
  :field/title {:en "Title"},
  :field/placeholder {:en "placeholder"}}]

[field
 {:form/id 35,
  :field/id "1",
  :field/type :table,
  :field/title {:en "Lorem ipsum dolor sit amet"},
  :field/columns
  [{:key "col1", :label {:en "First column"}}
   {:key "col2", :label {:en "Second column"}}
   {:key "col3", :label {:en "Third column"}}],
  :field/value
  [[{:column "col1", :value "aaaaa"}
    {:column "col2", :value "bbbbbb"}
    {:column "col3", :value "ccccccc"}]
   [{:column "col1", :value "ddddd"}
    {:column "col2", :value "eeeeee"}
    {:column "col3", :value "fffffff"}]]}]

[field
 {:readonly true,
  :form/id 36,
  :field/id "1",
  :field/type :table,
  :field/title {:en "Lorem ipsum dolor sit amet"},
  :field/columns
  [{:key "col1", :label {:en "First column"}}
   {:key "col2", :label {:en "Second column"}}
   {:key "col3", :label {:en "Third column"}}],
  :field/value
  [[{:column "col1", :value "aaaaa"}
    {:column "col2", :value "bbbbbb"}
    {:column "col3", :value "ccccccc"}]
   [{:column "col1", :value "ddddd"}
    {:column "col2", :value "eeeeee"}
    {:column "col3", :value "fffffff"}]]}]

[field
 {:readonly true,
  :form/id 36,
  :field/id "1",
  :field/type :table,
  :field/title {:en "Lorem ipsum dolor sit amet"},
  :field/columns
  [{:key "col1", :label {:en "First column"}}
   {:key "col2", :label {:en "Second column"}}
   {:key "col3", :label {:en "Third column"}}],
  :field/value []}]

[field
 {:diff true,
  :form/id 36,
  :field/id "1",
  :field/type :table,
  :field/title {:en "Lorem ipsum dolor sit amet"},
  :field/columns
  [{:key "col1", :label {:en "First column"}}
   {:key "col2", :label {:en "Second column"}}
   {:key "col3", :label {:en "Third column"}}],
  :field/previous-value
  [[{:column "col1", :value "aaaaa"}
    {:column "col2", :value "bbbbbb"}
    {:column "col3", :value "ccccccc"}]
   [{:column "col1", :value "ddddd"}
    {:column "col2", :value "eeeeee"}
    {:column "col3", :value "fffffff"}]],
  :field/value
  [[{:column "col1", :value "aaaaa"}
    {:column "col2", :value "bbxxxxbb"}
    {:column "col3", :value "ccccccc"}]
   [{:column "col1", :value "yyyyy"}
    {:column "col2", :value "eeeeee"}
    {:column "col3", :value "fffffff"}]
   [{:column "col1", :value "1"}
    {:column "col2", :value "2"}
    {:column "col3", :value "3"}]]}]

[missing-email-warning-dialog]

[navigator]

[paging-field {:id "paging1", :pages 0}]

[paging-field {:id "paging2", :pages 1}]

[paging-field {:id "paging3", :paging {:current-page 1}, :pages 3}]

[paging-field {:id "paging4", :paging {:current-page 1}, :pages 9}]

[paging-field {:id "paging5", :paging {:current-page 1}, :pages 100}]

[paging-field
 {:id "paging5",
  :paging {:current-page 1, :show-all-page-numbers true},
  :pages 100}]

(rf/reg-sub :rems.table/empty-table-rows (fn [_ _] []))

[table
 {:id :rems.table/example0,
  :columns
  [{:key :first-name,
    :title "First name",
    :sortable? false,
    :filterable? false}
   {:key :last-name,
    :title "Last name",
    :sortable? false,
    :filterable? false}],
  :rows [:rems.table/empty-table-rows],
  :default-sort-column :first-name}]

(defn- example-commands [text]
  {:td
   [:td.commands
    [:button.btn.btn-primary
     {:on-click
      #(do (js/alert (str "View " text)) (.stopPropagation %))}
     "View"]]})

(def example-data
 [{:key 1,
   :first-name {:value "Cody"},
   :last-name {:value "Turner"},
   :commands (example-commands "Cody")}
  {:key 2,
   :first-name {:value "Melanie"},
   :last-name {:value "Palmer"},
   :commands (example-commands "Melanie")}
  {:key 3,
   :first-name {:value "Henry"},
   :last-name {:value "Herring"},
   :commands (example-commands "Henry")}])

(rf/reg-sub :rems.table/example-table-rows (fn [_ _] example-data))

(let [example1 {:id :rems.table/example1,
                :columns
                [{:key :first-name,
                  :title "First name",
                  :sortable? false,
                  :filterable? false}
                 {:key :last-name,
                  :title "Last name",
                  :sortable? false,
                  :filterable? false}],
                :rows [:rems.table/example-table-rows],
                :default-sort-column :first-name}]
  [table example1])

The table components supports selection of rows. You can provide a callback for when the set of selected rows changes.

[table
 {:id :rems.table/example-selectable,
  :columns
  [{:key :first-name,
    :title "First name",
    :sortable? false,
    :filterable? false}
   {:key :last-name,
    :title "Last name",
    :sortable? false,
    :filterable? false}
   {:key :commands,
    :sortable? false,
    :filterable? false,
    :aria-label (text :t.actions/commands)}],
  :rows [:rems.table/example-table-rows],
  :default-sort-column :first-name,
  :selectable? true,
  :on-select #(reset! example-selected-rows %)}]

Filtering and search can be added by using the rems.table/search component

(let [example2 {:id :rems.table/example2,
                :columns
                [{:key :first-name, :title "First name"}
                 {:key :last-name, :title "Last name"}
                 {:key :commands,
                  :sortable? false,
                  :filterable? false}],
                :rows [:rems.table/example-table-rows],
                :default-sort-column :first-name}]
  [:div [search example2] [table example2]])

Hawks have a special sort-value so they are always listed first (or last if order is flipped).Also, filtering ignores the word "Team".Also, the score has special styling.Eagles have special styling. :value is used for sorting & filtering but :td for rendering.

(def example-data-rich
 [{:key 1,
   :team
   {:display-value "Team Hawks",
    :filter-value "hawks",
    :sort-value "0000hawks"},
   :points {:value 3, :display-value "-> 3 <-"}}
  {:key 2,
   :team {:value "Eagles", :td [:td.eagles-are-best [:em "Eagles"]]},
   :points {:value 4}}
  {:key 3, :team {:value "Ravens"}, :points {:value 0}}])

(rf/reg-sub
  :rems.table/example-rich-table-rows
  (fn [_ _] example-data-rich))

Now the data can be used like so

(let [example3 {:id :rems.table/example3,
                :columns
                [{:key :team, :title "Team"}
                 {:key :not-shown,
                  :title "Not shown",
                  :when-rows (constantly false)}
                 {:key :points, :title "Points"}],
                :rows [:rems.table/example-rich-table-rows]}]
  [:div [search example3] [table example3]])

(rf/reg-sub :rems.tree/empty-tree-rows (fn [_ _] []))

[tree
 {:id "rems-tree-example0",
  :columns
  [{:key :first-name,
    :title "First name",
    :sortable? false,
    :filterable? false}
   {:key :last-name,
    :title "Last name",
    :sortable? false,
    :filterable? false}],
  :rows [:rems.tree/empty-tree-rows],
  :default-sort-column :first-name,
  :aria-label "Empty tree"}]

(defn- example-commands [text]
  [:div.commands.w-100
   [:button.btn.btn-primary
    {:on-click
     #(do (js/alert (str "View " text)) (.stopPropagation %))}
    "View"]])

(def example-data
 [{:key 0,
   :name "Users",
   :children
   [{:key 1,
     :name "Applicants",
     :commands (example-commands "Applicants")}
    {:key 2, :name "Handlers", :commands (example-commands "Handlers")}
    {:key 3,
     :name "Administration",
     :commands (example-commands "Administration"),
     :children
     [{:key 4,
       :name "Reporters",
       :commands (example-commands "Reporters")}
      {:key 5,
       :name "Owners",
       :commands (example-commands "Owners"),
       :children
       [{:key 6,
         :name "Super Owners",
         :commands (example-commands "Super owners")}
        {:key 7,
         :name "Org Owners",
         :commands (example-commands "Org Owners")}]}]}],
   :commands (example-commands "Users")}])

(rf/reg-sub :rems.tree/example-tree-rows (fn [_ _] example-data))

[tree
 {:id "rems-tree-example1",
  :columns
  [{:key :name, :title "Name", :sortable? false, :filterable? false}
   {:key :commands,
    :content :commands,
    :sortable? false,
    :filterable? false}],
  :rows [:rems.tree/example-tree-rows],
  :default-sort-column :title,
  :aria-label "Static tree with a three level hierarchy"}]

Filtering and search can be added by using the rems.tree/search component

(let [example2 {:id "rems-tree-example2",
                :show-matching-parents? true,
                :columns
                [{:key :name, :title "Name"}
                 {:key :commands,
                  :content :commands,
                  :sortable? false,
                  :filterable? false}],
                :rows [:rems.tree/example-tree-rows],
                :default-sort-column :title,
                :aria-label "Sortable and filterable tree"}]
  [:div [search example2] [tree example2]])

(def example-items
 [{:id 1, :name "Alice"}
  {:id 2, :name "Bob"}
  {:id 3, :name "Carl"}
  {:id 4, :name "Own"}
  {:id 5, :name "Deve"}])

[dropdown
 {:items example-items,
  :item-key :id,
  :item-label :name,
  :on-change on-change}]

[dropdown
 {:items example-items,
  :item-key :id,
  :item-label :name,
  :item-selected? #(= "Bob" (:name %)),
  :on-change on-change}]

[dropdown
 {:items example-items,
  :item-key :id,
  :item-label :name,
  :item-selected? #(contains? #{1 3 5} (% :id)),
  :multi? true,
  :on-change on-change}]

[dropdown
 {:items example-items,
  :item-key :id,
  :item-label :name,
  :item-selected? #(contains? #{1 3 5} (% :id)),
  :multi? true,
  :disabled? true,
  :on-change on-change}]

[dropdown
 {:items example-items,
  :item-key :id,
  :item-label :name,
  :item-selected? #(contains? #{1 3 5} (% :id)),
  :multi? true,
  :hide-selected? false,
  :on-change on-change}]

[async-dropdown
 {:item-key :id,
  :item-label :name,
  :on-change on-change,
  :on-load-options
  (fn [{:keys [_ on-data]}]
    (js/setTimeout #(on-data example-items) 500))}]

[async-dropdown
 {:item-key :id,
  :item-label :name,
  :multi? true,
  :on-change on-change,
  :on-load-options
  (fn [{:keys [_ on-data]}]
    (js/setTimeout #(on-data example-items) 500))}]

[async-dropdown
 {:item-key :id,
  :item-label :name,
  :items @async-example-items,
  :multi? true,
  :on-change (comp on-change #(reset! async-example-items %)),
  :on-load-options
  (fn [{:keys [_ on-data]}]
    (js/setTimeout #(on-data example-items) 500))}]

[phases
 :submitted
 [{:phase :apply, :completed? true, :text :t.phases/apply}
  {:phase :approve, :active? true, :text :t.phases/approve}
  {:phase :result, :text :t.phases/approved}]]

[phases
 :approved
 [{:phase :apply, :completed? true, :text :t.phases/apply}
  {:phase :approve, :completed? true, :text :t.phases/approve}
  {:phase :result,
   :completed? true,
   :approved? true,
   :text :t.phases/approved}]]

[phases
 :rejected
 [{:phase :apply, :completed? true, :text :t.phases/apply}
  {:phase :approve,
   :completed? true,
   :rejected? true,
   :text :t.phases/approve}
  {:phase :result,
   :completed? true,
   :rejected? true,
   :text :t.phases/rejected}]]

[phases
 :revoked
 [{:phase :apply, :completed? true, :text :t.phases/apply}
  {:phase :approve,
   :completed? true,
   :approved? true,
   :text :t.phases/approve}
  {:phase :result,
   :completed? true,
   :revoked? true,
   :text :t.phases/revoked}]]

[phases
 :closed
 [{:phase :apply, :closed? true, :text :t.phases/apply}
  {:phase :approve, :closed? true, :text :t.phases/approve}
  {:phase :result, :closed? true, :text :t.phases/approved}]]

[success-symbol]

[failure-symbol]

[readonly-checkbox {:value false}]

[readonly-checkbox {:value true}]

[checkbox {:value @state, :on-change on-change}]

[checkbox
 {:id :special,
  :class :text-danger,
  :value @state,
  :on-change on-change}]

[info-field "Users" "Bob Tester"]

[info-field "Users" ["Bob Tester" "Jane Coder"]]

[info-field "Users" ["Bob Tester" "Jane Coder"] {:multiline? true}]

[info-field "Users" false]

[info-field "Users" {"Bob Tester" false, "Jane Coder" true}]

[info-field
 "Users"
 [{"Bob Tester" false, "Jane Coder" {:type :coder, :missing nil}}]]

[info-field "Users" "Bob Tester" {:box? false}]

[info-field "Users" ["Bob Tester" "Jane Coder"] {:inline? true}]

[attachment-link #:attachment{:id 1, :filename "my-attachment.pdf"}]

[attachment-link
 #:attachment{:id 123,
              :filename
              "this_is_the_very_very_very_long_filename_of_a_test_file_the_file_itself_is_quite_short_though_abcdefghijklmnopqrstuvwxyz0123456789_overflow_overflow_overflow.txt"}]

(def example-command
 {:id "example-command",
  :class "example-command",
  :label "Example",
  :url "http://example.com/command",
  :on-click #(js/alert "click example")})

[action-link example-command]

[action-button example-command]

(defn- stateful-context [& pairs]
  (r/with-let
    [n (r/atom 0) on-click #(do (r/rswap! n inc) (println @n))]
    [:<>
     (for
       [[c cmd] pairs]
       [:span.ml-1 [c (assoc cmd :on-click on-click)]])
     [:span.ml-2 "Count: " @n]]))

[stateful-context
 [rate-limited-action-button example-command]
 [rate-limited-action-button
  (assoc example-command :id "second-rate-limited-button")]]

[commands]

(def another-command
 {:id "another-command",
  :class "another-command",
  :label "Another",
  :url "http://example.com/another",
  :on-click #(js/alert "click another")})

[commands
 [action-button example-command]
 [action-button another-command]]

[commands-group-button]

[commands-group-button {:label "Group"} example-command]

[commands-group-button {:label "Group"} example-command another-command]

(r/with-let
  [n (r/atom 0)]
  [rate-limited-button
   {:on-click #(r/rswap! n inc), :text (str "Count: " @n)}])

[username
 {:userid "developer@uu.id",
  :email "developer@example.com",
  :name "Deve Loper"}]

[username {:userid "developer@uu.id", :email "developer@example.com"}]

[username {}]

[attributes
 {:userid "developer@uu.id",
  :email "developer@uu.id",
  :name "Deve Loper",
  :notification-email "notification@example.com",
  :organizations
  [#:organization{:id "Testers"} #:organization{:id "Users"}],
  :address "Testikatu 1, 00100 Helsinki",
  :researcher-status-by "so",
  :nickname "The Dev"}
 false]

[attributes
 {:userid "invited@member.com",
  :email "invited@member.com",
  :name "Invited Mamber",
  :notification-email "invited@member.com",
  :organizations []}
 true]

[attributes
 {:userid "developer@uu.id",
  :email "developer@uu.id",
  :organizations
  [#:organization{:id "Testers"} #:organization{:id "Users"}],
  :researcher-status-by :dac}]

[attributes
 {:email "developer@uu.id",
  :organizations
  [#:organization{:id "Testers"} #:organization{:id "Users"}]}]

[attributes {}]

(let [state (r/cursor guide-state ["attachment-upload-button"])]
  [upload-button
   {:id "attachment-upload-button",
    :label (:filename @state),
    :status (:status @state),
    :on-upload
    (fn [{:keys [filename]}]
      (swap! state assoc :filename filename :status :pending)
      (js/setTimeout #(swap! state assoc :status :success) 1000))}])

[upload-button {:id "pending-upload-button", :status :pending}]

[upload-button {:id "error-upload-button", :status :error}]

(into
  [:div [rems.attachment/allowed-extensions-info]]
  (for
    [lang @rems.config/languages]
    [upload-button
     {:id (str "attachment-upload-button-2-" (name lang)),
      :label (str/upper-case (name lang)),
      :hide-info? true}]))