Skip to content

Commit 4849494

Browse files
degamidegami
committed
added admin tour steps to show informations in admin pages
1 parent 1ffe832 commit 4849494

File tree

7 files changed

+182
-39
lines changed

7 files changed

+182
-39
lines changed

‎app/base/abstracts/Controllers/AdminManageModelsPage.php‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -831,6 +831,78 @@ protected function getBeforeListing() : ?TagElement
831831
return null;
832832
}
833833

834+
public function getUiTour(): array
835+
{
836+
$tourName = strtolower(static::getClassBasename($this)) . '.' . ($this->template_data['action'] ?? 'list');
837+
838+
$steps = [];
839+
if (($this->template_data['action'] ?? 'list') == 'list') {
840+
// on list action we can define uiTour steps
841+
842+
$baseListingSteps = [
843+
$this->prepareUiStep(
844+
'#listing-table-page',
845+
'Listirng Elements',
846+
'There are your lising elements',
847+
'up'
848+
),
849+
$this->prepareUiStep(
850+
'#pagination-layout-selector',
851+
'Layout Selector',
852+
'Here you can switch layour',
853+
'down'
854+
),
855+
$this->prepareUiStep(
856+
'#nav-action-buttons',
857+
'Action Buttons',
858+
'Here you will find action buttons',
859+
'down'
860+
),
861+
$this->prepareUiStep(
862+
'tr.selectable td:first-child',
863+
'Selector',
864+
'Here you can select elements',
865+
'right'
866+
),
867+
$this->prepareUiStep(
868+
'tr.selectable td:last-child',
869+
'Element Action Buttons',
870+
'Action buttons specific to elements',
871+
'left'
872+
),
873+
];
874+
875+
$userTours = $this->getCurrentUser()->getUserSession()->getSessionKey('uiSettings')['tours'] ?? [];
876+
877+
foreach ($userTours as $tour => $status) {
878+
if (str_ends_with($tour, '.list') && $status == 'shown') {
879+
// base steps can be skipped
880+
$baseListingSteps = [];
881+
}
882+
}
883+
884+
$steps = $baseListingSteps + $this->getListUiTourSteps();
885+
} else {
886+
// let controllers define uiTour steps on other "action" values
887+
$steps = $this->getActionUiTourSteps($this->template_data['action']);
888+
}
889+
890+
return [
891+
'name' => $tourName,
892+
'steps' => $steps,
893+
];
894+
}
895+
896+
protected function getActionUiTourSteps(string $action) : array
897+
{
898+
return [];
899+
}
900+
901+
protected function getListUiTourSteps() : array
902+
{
903+
return [];
904+
}
905+
834906
/**
835907
* gets object to show class name for loading
836908
*

‎app/base/abstracts/Controllers/AdminPage.php‎

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ protected function prepareTemplate(): Template
177177
'mediaPasteUrl' => $this->getUrl('crud.app.base.controllers.admin.json.mediapaste'),
178178
'currentLocale' => $this->getCurrentLocale(),
179179
'defaultTinymceOptions' => FORMS_DEFAULT_TINYMCE_OPTIONS,
180-
'uiTourSteps' => $this->getUiTourSteps(),
180+
'uiTour' => $this->getUiTour(),
181181
]
182182
) . ");"
183183
);
@@ -326,9 +326,41 @@ public function getTemplateData(): array
326326
return $this->template_data;
327327
}
328328

329-
public function getUiTourSteps(): array
329+
/**
330+
* ui tour
331+
* array must contain prperties
332+
* - string name
333+
* - array steps
334+
*
335+
* @return array
336+
*/
337+
public function getUiTour(): array
338+
{
339+
return [
340+
'name' => strtolower(static::getClassBasename($this)),
341+
'steps' => [],
342+
];
343+
}
344+
345+
/**
346+
* defines structure for a single ui tour step
347+
*
348+
* @param string $htmlSelector
349+
* @param string $title
350+
* @param string $text
351+
* @param string $position
352+
* @return array
353+
*/
354+
protected function prepareUiStep(string $htmlSelector, string $title, string $text, string $position = 'up') : array
330355
{
331-
return [];
356+
return [
357+
'title' => __($title),
358+
'text' => __($text),
359+
'attachTo' => [
360+
'element' => $htmlSelector,
361+
'on' => $position,
362+
],
363+
];
332364
}
333365

334366
/**

‎app/base/controllers/Admin/Dashboard.php‎

Lines changed: 33 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -142,32 +142,41 @@ public function getTemplateData(): array
142142
return $this->template_data;
143143
}
144144

145-
public function getUiTourSteps(): array
145+
public function getUiTour(): array
146146
{
147147
return [
148-
[
149-
'title' => __('Menu Sidebar'),
150-
'text' => __('Use the sidebar to navigate through different sections of the admin panel. Click on the icons to expand and access various features and settings.'), // popover['description'] diventa text
151-
'attachTo' => [
152-
'element' => '#sidebar',
153-
'on' => 'right',
154-
],
155-
],
156-
[
157-
'title' => __('Logout'),
158-
'text' => __('This is the logout button.'),
159-
'attachTo' => [
160-
'element' => '#logout-btn',
161-
'on' => 'bottom',
162-
],
163-
],
164-
[
165-
'title' => __('Dark theme switcher'),
166-
'text' => __('This switches between dark and light theme.'),
167-
'attachTo' => [
168-
'element' => '.darkmode-switch .switch',
169-
'on' => 'left',
170-
],
148+
'name' => 'dashboard',
149+
'steps' => [
150+
$this->prepareUiStep(
151+
'#sidebar',
152+
'Menu Sidebar',
153+
'Use the sidebar to navigate through different sections of the admin panel. Click on the icons to expand and access various features and settings.',
154+
'right'
155+
),
156+
$this->prepareUiStep(
157+
'#links',
158+
'Section links',
159+
'These links will guide you to the admin section. numbers of each link is the number of elements for that section.',
160+
'up'
161+
),
162+
$this->prepareUiStep(
163+
'#profile',
164+
'Profile page',
165+
'This link heads to your profile page.',
166+
'bottom'
167+
),
168+
$this->prepareUiStep(
169+
'.darkmode-switch .switch',
170+
'Dark theme switcher',
171+
'This switches between dark and light theme.',
172+
'left'
173+
),
174+
$this->prepareUiStep(
175+
'#logout-btn',
176+
'Logout',
177+
'This is the logout button.',
178+
'bottom'
179+
),
171180
],
172181
];
173182
}

‎app/site/controllers/Admin/Cms/Pages.php‎

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -349,14 +349,40 @@ function ($page) {
349349
);
350350
}
351351

352-
public function getUiTourSteps(): array
352+
protected function getActionUiTourSteps(string $action) : array
353353
{
354-
if (($this->getRequest()->query->get('action') ?? 'list') == 'edit') {
354+
if ($action == 'edit') {
355355
return [
356-
//@todo
356+
$this->prepareUiStep(
357+
'#title',
358+
'Page Title',
359+
'Page Title Here',
360+
'down'
361+
),
362+
$this->prepareUiStep(
363+
'#template_name',
364+
'Page Template',
365+
'Template Selector',
366+
'down'
367+
),
368+
$this->prepareUiStep(
369+
'.tinymce-container',
370+
'Page Content',
371+
'Page Content Here',
372+
'down'
373+
),
374+
$this->prepareUiStep(
375+
'#nav-action-buttons',
376+
'Contextual Actions',
377+
'Contextual Actions on page',
378+
'down'
379+
),
380+
381+
357382
];
358383
}
359384

360-
return parent::getUiTourSteps();
385+
return [];
361386
}
387+
362388
}

‎js/src/admin/admin.init.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -305,15 +305,17 @@ $.fn.appAdmin.methods = $.extend({
305305
}
306306
});
307307

308-
// show driver.js tour if needed
309-
if ($elem.appAdmin('getSettings').uiTourSteps.length > 0) {
308+
// show shepherd.js tour if needed
309+
if ($elem.appAdmin('getSettings').uiTour.steps.length > 0) {
310310
$elem.appAdmin('getUserUiSettings', function(data) {
311-
if (!data.tours || data.tours[$elem.appAdmin('getSettings').currentRoute] != 'shown') {
311+
let tourName = $elem.appAdmin('getSettings').uiTour.name || $elem.appAdmin('getSettings').currentRoute;
312+
console.log(tourName);
313+
if (!data.tours || data.tours[tourName] != 'shown') {
312314

313315
if (!data.tours) {
314316
data.tours = {};
315317
}
316-
data.tours[$elem.appAdmin('getSettings').currentRoute] = 'shown';
318+
data.tours[tourName] = 'shown';
317319
const updateTourStatus = function() {
318320
$elem.appAdmin('updateUserUiSettings',
319321
{'tours': data.tours},
@@ -357,7 +359,7 @@ $.fn.appAdmin.methods = $.extend({
357359
};
358360

359361
const tour = new Tour(tourOptions);
360-
tour.addSteps($elem.appAdmin('getSettings').uiTourSteps);
362+
tour.addSteps($elem.appAdmin('getSettings').uiTour.steps);
361363

362364
tour.on('complete', updateTourStatus);
363365
tour.on('cancel', updateTourStatus);

‎templates/admin/dashboard.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
</div>
4040

4141
<div class="counters container-fluid">
42-
<div class="row row-cols-3 justify-content-md-between">
42+
<div id="links" class="row row-cols-3 justify-content-md-between">
4343
<?php if ($bySection):
4444
$bySectionLinks = [];
4545
foreach ($dashboard_links as $link) {

‎templates/admin/layout.php‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,10 @@
3434
<li class="nav-item px-1">
3535
<div class="text-nowrap px-1 d-flex align-items-center">
3636
<?= $this->sitebase()->getDarkModeSwitch($controller); ?>
37-
<?= $this->sitebase()->getGravatar($current_user->email, 30, class: 'rounded-circle mr-2');?>
38-
<?= $this->sitebase()->translate('Hello');?>&nbsp;<a href="<?= $this->sitebase()->getUrl('admin.users'); ?>?action=edit&user_id=<?= $current_user->id; ?>"><?= $current_user->nickname; ?></a>
37+
<span id="profile">
38+
<?= $this->sitebase()->getGravatar($current_user->email, 30, class: 'rounded-circle mr-2');?>
39+
<?= $this->sitebase()->translate('Hello');?>&nbsp;<a href="<?= $this->sitebase()->getUrl('admin.users'); ?>?action=edit&user_id=<?= $current_user->id; ?>"><?= $current_user->nickname; ?></a>
40+
</span>
3941
<a class="btn btn-light btn-sm ml-2" id="logout-btn" href="<?= $this->sitebase()->getUrl('admin.logout');?>" title="<?= $this->sitebase()->translate('Sign out');?>">
4042
<span class="d-none d-md-inline-block"><?= $this->sitebase()->translate('Sign out');?></span> <?php $this->sitebase()->drawIcon('log-out'); ?>
4143
</a>

0 commit comments

Comments
 (0)