OpenProject Lookbook

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<h5 data-view-component="true">Automatic</h5>
<span data-view-component="true" class="text-small color-fg-subtle">Order the projects by one or more sorting criteria. You will lose the previous sorting.</span>
<div data-controller="sort-by-config" data-application-target="dynamic">
  <input type="hidden" name="sortBy" id="sortBy" value="[["lft","asc"],["created_at","desc"]]" data-sort-by-config-target="sortByField" autocomplete="off" />
  <div data-sort-by-config-target="inputRowContainer" data-view-component="true" class="d-flex flex-column">
    <div data-sort-by-config-target="inputRow" data-view-component="true" class="mt-3">
      <div data-view-component="true" class="d-flex flex-row">
        <div data-view-component="true" class="flex-1">    <select name="sort_field" id="sort_field" form="none" class="FormControl-select FormControl-medium FormControl--fullWidth" data-action="change->sort-by-config#fieldChanged"><option value="">-</option><option selected="selected" value="lft">Project hierarchy</option>
            <option value="created_at">Created on</option></select>
        </div>
        <div data-view-component="true">    <segmented-control>
            <ul aria-label="Sort order" role="list" data-view-component="true" class="SegmentedControl--medium SegmentedControl SegmentedControl--iconOnly ml-3">
              <li class="SegmentedControl-item SegmentedControl-item--selected" role="listitem" data-targets="segmented-control.items">
                <button data-direction="asc" data-action="click:segmented-control#select click->sort-by-config#fieldChanged" data-action="click:segmented-control#select" id="icon-button-ed3c6bfb-54c2-4e61-95a5-115cc97f65e3" aria-current="true" aria-labelledby="tooltip-1abd6a2a-4daa-4c69-9ded-832e94aaae98" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-sort-asc Button-visual">
                    <path d="m12.927 2.573 3 3A.25.25 0 0 1 15.75 6H13.5v6.75a.75.75 0 0 1-1.5 0V6H9.75a.25.25 0 0 1-.177-.427l3-3a.25.25 0 0 1 .354 0ZM0 12.25a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75Zm0-4a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 8.25Zm0-4a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 4.25Z"></path>
                  </svg>
                </button><tool-tip id="tooltip-1abd6a2a-4daa-4c69-9ded-832e94aaae98" for="icon-button-ed3c6bfb-54c2-4e61-95a5-115cc97f65e3" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Sort ascending</tool-tip>
              </li>
              <li class="SegmentedControl-item" role="listitem" data-targets="segmented-control.items">
                <button data-direction="desc" data-action="click:segmented-control#select click->sort-by-config#fieldChanged" data-action="click:segmented-control#select" id="icon-button-47b99c03-87f6-4685-a8f8-2c5caa884d3a" aria-current="false" aria-labelledby="tooltip-3da0ff33-c9fa-43b9-9494-0396aa5cf6c4" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-sort-desc Button-visual">
                    <path d="M0 4.25a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 4.25Zm0 4a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 8.25Zm0 4a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75ZM13.5 10h2.25a.25.25 0 0 1 .177.427l-3 3a.25.25 0 0 1-.354 0l-3-3A.25.25 0 0 1 9.75 10H12V3.75a.75.75 0 0 1 1.5 0V10Z"></path>
                  </svg>
                </button><tool-tip id="tooltip-3da0ff33-c9fa-43b9-9494-0396aa5cf6c4" for="icon-button-47b99c03-87f6-4685-a8f8-2c5caa884d3a" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Sort descending</tool-tip>
              </li>
            </ul>
          </segmented-control>
        </div>
      </div>
    </div>
    <div data-sort-by-config-target="inputRow" data-view-component="true" class="mt-3">
      <div data-view-component="true" class="d-flex flex-row">
        <div data-view-component="true" class="flex-1">    <select name="sort_field" id="sort_field" form="none" class="FormControl-select FormControl-medium FormControl--fullWidth" data-action="change->sort-by-config#fieldChanged"><option value="">-</option><option value="lft">Project hierarchy</option>
            <option selected="selected" value="created_at">Created on</option></select>
        </div>
        <div data-view-component="true">    <segmented-control>
            <ul aria-label="Sort order" role="list" data-view-component="true" class="SegmentedControl--medium SegmentedControl SegmentedControl--iconOnly ml-3">
              <li class="SegmentedControl-item" role="listitem" data-targets="segmented-control.items">
                <button data-direction="asc" data-action="click:segmented-control#select click->sort-by-config#fieldChanged" data-action="click:segmented-control#select" id="icon-button-f0058d8e-0d18-4ffe-83f5-d0cb2e5f9d2b" aria-current="false" aria-labelledby="tooltip-ba056b31-977b-460a-be28-706611fb90a9" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-sort-asc Button-visual">
                    <path d="m12.927 2.573 3 3A.25.25 0 0 1 15.75 6H13.5v6.75a.75.75 0 0 1-1.5 0V6H9.75a.25.25 0 0 1-.177-.427l3-3a.25.25 0 0 1 .354 0ZM0 12.25a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75Zm0-4a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 8.25Zm0-4a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 4.25Z"></path>
                  </svg>
                </button><tool-tip id="tooltip-ba056b31-977b-460a-be28-706611fb90a9" for="icon-button-f0058d8e-0d18-4ffe-83f5-d0cb2e5f9d2b" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Sort ascending</tool-tip>
              </li>
              <li class="SegmentedControl-item SegmentedControl-item--selected" role="listitem" data-targets="segmented-control.items">
                <button data-direction="desc" data-action="click:segmented-control#select click->sort-by-config#fieldChanged" data-action="click:segmented-control#select" id="icon-button-3d30d774-8d0c-4816-84f0-69baac0c8a88" aria-current="true" aria-labelledby="tooltip-42a6f871-1442-4640-9f5d-65182e8b431c" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-sort-desc Button-visual">
                    <path d="M0 4.25a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 4.25Zm0 4a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 8.25Zm0 4a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75ZM13.5 10h2.25a.25.25 0 0 1 .177.427l-3 3a.25.25 0 0 1-.354 0l-3-3A.25.25 0 0 1 9.75 10H12V3.75a.75.75 0 0 1 1.5 0V10Z"></path>
                  </svg>
                </button><tool-tip id="tooltip-42a6f871-1442-4640-9f5d-65182e8b431c" for="icon-button-3d30d774-8d0c-4816-84f0-69baac0c8a88" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Sort descending</tool-tip>
              </li>
            </ul>
          </segmented-control>
        </div>
      </div>
    </div>
    <div data-sort-by-config-target="inputRow" data-view-component="true" class="mt-3">
      <div data-view-component="true" class="d-flex flex-row">
        <div data-view-component="true" class="flex-1">    <select name="sort_field" id="sort_field" form="none" class="FormControl-select FormControl-medium FormControl--fullWidth" data-action="change->sort-by-config#fieldChanged"><option value="">-</option><option value="lft">Project hierarchy</option>
            <option value="created_at">Created on</option></select>
        </div>
        <div data-view-component="true">    <segmented-control>
            <ul aria-label="Sort order" role="list" data-view-component="true" class="SegmentedControl--medium SegmentedControl SegmentedControl--iconOnly ml-3">
              <li class="SegmentedControl-item" role="listitem" data-targets="segmented-control.items">
                <button data-direction="asc" data-action="click:segmented-control#select click->sort-by-config#fieldChanged" data-action="click:segmented-control#select" id="icon-button-20310c8b-faab-4d1c-85d1-1e656ecbc80c" aria-current="false" aria-labelledby="tooltip-cabd39b5-fbc2-41f5-a44c-c0170d6b1c86" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-sort-asc Button-visual">
                    <path d="m12.927 2.573 3 3A.25.25 0 0 1 15.75 6H13.5v6.75a.75.75 0 0 1-1.5 0V6H9.75a.25.25 0 0 1-.177-.427l3-3a.25.25 0 0 1 .354 0ZM0 12.25a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75Zm0-4a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 8.25Zm0-4a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 4.25Z"></path>
                  </svg>
                </button><tool-tip id="tooltip-cabd39b5-fbc2-41f5-a44c-c0170d6b1c86" for="icon-button-20310c8b-faab-4d1c-85d1-1e656ecbc80c" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Sort ascending</tool-tip>
              </li>
              <li class="SegmentedControl-item" role="listitem" data-targets="segmented-control.items">
                <button data-direction="desc" data-action="click:segmented-control#select click->sort-by-config#fieldChanged" data-action="click:segmented-control#select" id="icon-button-b213c453-2c14-401f-ae91-6ccb3753fa28" aria-current="false" aria-labelledby="tooltip-8d1acc7d-1239-4cea-8a0b-7872c1d22867" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-sort-desc Button-visual">
                    <path d="M0 4.25a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 4.25Zm0 4a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 8.25Zm0 4a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75ZM13.5 10h2.25a.25.25 0 0 1 .177.427l-3 3a.25.25 0 0 1-.354 0l-3-3A.25.25 0 0 1 9.75 10H12V3.75a.75.75 0 0 1 1.5 0V10Z"></path>
                  </svg>
                </button><tool-tip id="tooltip-8d1acc7d-1239-4cea-8a0b-7872c1d22867" for="icon-button-b213c453-2c14-401f-ae91-6ccb3753fa28" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Sort descending</tool-tip>
              </li>
            </ul>
          </segmented-control>
        </div>
      </div>
    </div>
  </div>
</div>

No notes provided.

1
2
3
4
5
6
7
8
9
10
11
query = ::ProjectQuery.new
query.order(lft: :asc)
query.order(created_at: :desc)
render ::Queries::SortByComponent.new(
  query:,
  selectable_columns: [
    { id: :lft, name: I18n.t(:label_project_hierarchy) },
    { id: :created_at, name: I18n.t("attributes.created_at") }
  ]
)

No params configured.