You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We choose `wcf.acp.menu.link.content` as the parent menu item for the first menu item `wcf.acp.menu.link.person` because the people we are managing is just one form of content.
173
197
The fourth level menu item `wcf.acp.menu.link.person.add` will only be shown as an icon and thus needs an additional element `icon` which takes a FontAwesome icon class as value.
174
198
175
199
### People List
176
200
177
-
To list the people in the ACP, we need a `PersonListPage` class and a `personList` template.
201
+
To list the people in the ACP, we need the classes `PersonListPage`, `PersonGridView`, and a `personList` template.
178
202
179
203
#### `PersonListPage`
180
204
@@ -184,13 +208,26 @@ To list the people in the ACP, we need a `PersonListPage` class and a `personLis
As WoltLab Suite Core already provides a powerful default implementation of a sortable page, our work here is minimal:
211
+
`PersonListPage` uses a [grid view](../../php/api/grid_views.md) to display the list of people, our work here is minimal:
188
212
189
213
1. We need to set the active ACP menu item via the `$activeMenuItem`.
190
214
1.`$neededPermissions` contains a list of permissions of which the user needs to have at least one in order to see the person list.
191
215
We use the same permission for both the menu item and the page.
192
-
1. The database object list class whose name is provided via `$objectListClassName` and that handles fetching the people from database is the `PersonList` class, which we have already created.
193
-
1. To validate the sort field passed with the request, we set `$validSortFields` to the available database table columns.
216
+
1. Implement the method `createGridView()` and return the grid view that should be used to render the list of people.
The following features are defined in the grid view:
227
+
228
+
1. The columns to be displayed and their order.
229
+
1. Which columns can be sorted and what their default sorting is.
230
+
1. What interaction options the user has with the displayed items.
194
231
195
232
#### `personList.tpl`
196
233
@@ -207,17 +244,7 @@ We will go piece by piece through the template code:
207
244
1. We set the content header and additional provide a button to create a new person in the content header navigation.
208
245
1. As not all people are listed on the same page if many people have been created, we need a pagination for which we use the `pages` template plugin.
209
246
The `{hascontent}{content}{/content}{/hascontent}` construct ensures the `.paginationTop` element is only shown if the `pages` template plugin has a return value, thus if a pagination is necessary.
210
-
1. Now comes the main part of the page, the list of the people, which will only be displayed if any people exist.
211
-
Otherwise, an info box is displayed using the generic `wcf.global.noItems` language item.
212
-
The `$objects` template variable is automatically assigned by `wcf\page\MultipleLinkPage` and contains the `PersonList` object used to read the people from database.
213
-
The table itself consists of a `thead` and a `tbody` element and is extendable with more columns using the template events `columnHeads` and `columns`.
214
-
In general, every table should provide these events.
215
-
The default structure of a table is used here so that the first column of the content rows contains icons to edit and to delete the row (and provides another standard event `rowButtons`) and that the second column contains the ID of the person.
216
-
The table can be sorted by clicking on the head of each column.
217
-
The used variables `$sortField` and `$sortOrder` are automatically assigned to the template by `SortablePage`.
218
-
1. The `.contentFooter` element is only shown if people exist as it basically repeats the `.contentHeaderNavigation` and `.paginationTop` element.
219
-
1. The delete button for each person shown in the `.columnIcon` element relies on the global [`WoltLabSuite/Core/Ui/Object/Action`](../../migration/wsc53/javascript.md#wcfactiondelete-and-wcfactiontoggle) module which only requires the `jsObjectActionContainer` CSS class in combination with the `data-object-action-class-name` attribute for the `table` element, the `jsObjectActionObject` CSS class for each person's `tr` element in combination with the `data-object-id` attribute, and lastly the delete button itself, which is created with the [`objectAction` template plugin](../../view/template-plugins.md#view/template-plugins/#54-objectaction).
220
-
1. The [`.jsReloadPageWhenEmpty` CSS class](../../migration/wsc53/javascript.md#wcftableemptytablehandler) on the `tbody` element ensures that once all persons on the page have been deleted, the page is reloaded.
247
+
1. For the main part of the page we only need to call the `render()` method of the grid view.
221
248
1. Lastly, the `footer` template is included that terminates the page.
222
249
You also have to include this template for every page!
!!! info "We use `SortablePage` as a type hint instead of `wcf\acp\page\PersonListPage` because we will be using the same event listener class in the front end to also allow sorting that list by birthday."
136
-
137
-
As the relevant template codes are only one line each, we will simply put them directly in the `templateListener.xml` file that will be shown [later on](#templatelistenerxml).
138
-
The code for the table head is similar to the other `th` elements:
Copy file name to clipboardExpand all lines: docs/tutorial/series/part_3.md
+55-42Lines changed: 55 additions & 42 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -24,50 +24,66 @@ In addition to the components used in [part 1](part_1.md), we will use the [obje
24
24
The complete package will have the following file structure (including the files from [part 1](part_1.md)):
25
25
26
26
```
27
-
├── acpMenu.xml
28
27
├── acptemplates
29
-
│ ├── personAdd.tpl
30
-
│ └── personList.tpl
28
+
│ ├── personAdd.tpl
29
+
│ └── personList.tpl
31
30
├── files
32
-
│ ├── acp
33
-
│ │ └── database
34
-
│ │ └── install_com.woltlab.wcf.people.php
35
-
│ └── lib
36
-
│ ├── acp
37
-
│ │ ├── form
38
-
│ │ │ ├── PersonAddForm.class.php
39
-
│ │ │ └── PersonEditForm.class.php
40
-
│ │ └── page
41
-
│ │ └── PersonListPage.class.php
42
-
│ ├── data
43
-
│ │ └── person
44
-
│ │ ├── Person.class.php
45
-
│ │ ├── PersonAction.class.php
46
-
│ │ ├── PersonEditor.class.php
47
-
│ │ └── PersonList.class.php
48
-
│ ├── page
49
-
│ │ ├── PersonListPage.class.php
50
-
│ │ └── PersonPage.class.php
51
-
│ └── system
52
-
│ ├── cache
53
-
│ │ └── runtime
54
-
│ │ └── PersonRuntimeCache.class.php
55
-
│ ├── comment
56
-
│ │ └── manager
57
-
│ │ └── PersonCommentManager.class.php
58
-
│ └── page
59
-
│ └── handler
60
-
│ └── PersonPageHandler.class.php
31
+
│ ├── acp
32
+
│ │ └── database
33
+
│ │ └── install_com.woltlab.wcf.people.php
34
+
│ └── lib
35
+
│ ├── acp
36
+
│ │ ├── form
37
+
│ │ │ ├── PersonAddForm.class.php
38
+
│ │ │ └── PersonEditForm.class.php
39
+
│ │ └── page
40
+
│ │ └── PersonListPage.class.php
41
+
│ ├── bootstrap
42
+
│ │ └── com.woltlab.wcf.people.php
43
+
│ ├── data
44
+
│ │ └── person
45
+
│ │ ├── Person.class.php
46
+
│ │ ├── PersonAction.class.php
47
+
│ │ ├── PersonEditor.class.php
48
+
│ │ └── PersonList.class.php
49
+
│ ├── event
50
+
│ │ └── gridView
51
+
│ │ └── admin
52
+
│ │ └── PersonGridViewInitialized.class.php
53
+
│ ├── page
54
+
│ │ ├── PersonListPage.class.php
55
+
│ │ └── PersonPage.class.php
56
+
│ └── system
57
+
│ ├── cache
58
+
│ │ └── runtime
59
+
│ │ └── PersonRuntimeCache.class.php
60
+
│ ├── comment
61
+
│ │ └── manager
62
+
│ │ └── PersonCommentManager.class.php
63
+
│ ├── endpoint
64
+
│ │ └── controller
65
+
│ │ └── core
66
+
│ │ └── persons
67
+
│ │ └── DeletePerson.class.php
68
+
│ ├── gridView
69
+
│ │ └── admin
70
+
│ │ └── PersonGridView.class.php
71
+
│ ├── interaction
72
+
│ │ └── admin
73
+
│ │ └── PersonInteractions.class.php
74
+
│ └── page
75
+
│ └── handler
76
+
│ └── PersonPageHandler.class.php
61
77
├── language
62
-
│ ├── de.xml
63
-
│ └── en.xml
78
+
│ ├── de.xml
79
+
│ └── en.xml
64
80
├── menuItem.xml
65
81
├── objectType.xml
66
82
├── package.xml
67
83
├── page.xml
68
84
├── templates
69
-
│ ├── person.tpl
70
-
│ └── personList.tpl
85
+
│ ├── person.tpl
86
+
│ └── personList.tpl
71
87
└── userGroupOption.xml
72
88
```
73
89
@@ -132,8 +148,8 @@ With this option, comments on individual people can be disabled.
132
148
133
149
The `PersonPage` class is similar to the `PersonEditForm` in the ACP in that it reads the id of the requested person from the request data and validates the id in `readParameters()`.
134
150
The rest of the code only handles fetching the list of comments on the requested person.
135
-
In `readData()`, this list is fetched using `CommentHandler::getCommentList()` if comments are enabled for the person.
136
-
The `assignVariables()` method assigns some additional template variables like `$commentCanAdd`, which is `1` if the active person can add comments and is `0` otherwise, `$lastCommentTime`, which contains the UNIX timestamp of the last comment, and `$likeData`, which contains data related to the likes for the disabled comments.
151
+
In `readData()`, this list is fetched using a `CommentsView` if comments are enabled for the person.
152
+
The `assignVariables()` method assigns this view as a template variable.
137
153
138
154
### `person.tpl`
139
155
@@ -144,10 +160,7 @@ The `assignVariables()` method assigns some additional template variables like `
144
160
) }}
145
161
146
162
For now, the `person` template is still very empty and only shows the comments in the content area.
147
-
The template code shown for comments is very generic and used in this form in many locations as it only sets the header of the comment list and the container `ul#personCommentList` element for the comments shown by `commentList` template.
148
-
The `ul#personCommentList` elements has five additional `data-` attributes required by the JavaScript API for comments for loading more comments or creating new ones.
149
-
The `commentListAddComment` template adds the WYSIWYG support.
150
-
The attribute `wysiwygSelector` should be the id of the comment list `personCommentList` with an additional `AddComment` suffix.
163
+
For the main part of the page we only need to call the `render()` method of the `CommentsView`.
0 commit comments