Feature/modals - generic modal API (#373)

Default modal JS Implementation:

Add title option
Add buttons option
Change template cloning
Confirmation Modal:

Add implementation
Do not show again functionality
Web Page:

Add blocks array with twig loop insertion
This commit is contained in:
bdalsass
2022-12-06 10:18:59 +01:00
committed by GitHub
parent 98a53a46f0
commit dbe7fae82e
29 changed files with 322 additions and 345 deletions

View File

@@ -214,7 +214,7 @@ class DataTableUIBlockFactory extends AbstractUIBlockFactory
array_key_exists('tooltip', $aAction) ? Dict::S($aAction['tooltip']) : '',
array_key_exists('name', $aAction) ? $aAction['name'] : 'undefined'
);
$oButton->SetDataAttributes(['action-id' => $iKey]);
$oButton->SetDataAttributes(['action-id' => $iKey, 'tooltip-append-to' => 'body']);
$oToolbar->AddSubBlock($oButton);
}

View File

@@ -7,8 +7,6 @@
namespace Combodo\iTop\Application\UI\Base\Component\DataTable;
use Combodo\iTop\Application\UI\Base\Component\Dialog\DialogUIBlockFactory;
use Combodo\iTop\Application\UI\Base\Component\Input\InputUIBlockFactory;
use Combodo\iTop\Application\UI\Base\Layout\UIContentBlockUIBlockFactory;
/**
* Trait tTableRowActions
@@ -33,11 +31,11 @@ trait tTableRowActions
* confirmation => {
* message: string,
* message_row_data: string,
* remember_choice_pref_key: string
* do_not_show_again_pref_key: string
* }
* }
*/
protected $aRowActions;
protected $aRowActions = [];
/**
* Set row actions.
@@ -82,31 +80,4 @@ trait tTableRowActions
{
return DataTableUIBlockFactory::MakeActionRowToolbarTemplate($this);
}
/**
* GetRowActionsConfirmDialog.
*
* @return \Combodo\iTop\Application\UI\Base\Component\Html\Html
*/
public function GetRowActionsConfirmDialog()
{
static::$bDialogInitialized = true;
$oDialog = DialogUIBlockFactory::MakeNeutral('', '<div class="ibo-row-action--confirmation--explanation"></div>', 'table-row-action-confirmation-dialog');
$oContent = UIContentBlockUIBlockFactory::MakeStandard();
$oContent->AddCSSClass('ibo-row-action--confirmation--do-not-show-again');
$checkBox = InputUIBlockFactory::MakeStandard('checkbox', 'do_not_show_again', false);
$checkBox->AddCSSClass('ibo-row-action--confirmation--do-not-show-again--checkbox');
$checkBox->SetLabel(\Dict::S('UI:UserPref:DoNotShowAgain'));
$oContent->AddSubBlock($checkBox);
$oDialog->AddSubBlock($oContent);
return $oDialog;
}
public function GetRowActionsConfirmDialogInitializedFlag()
{
return static::$bDialogInitialized;
}
}

View File

@@ -1,109 +0,0 @@
<?php
/**
* Copyright (C) 2013-2021 Combodo SARL
*
* This file is part of iTop.
*
* iTop is free software; you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* iTop is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
*/
namespace Combodo\iTop\Application\UI\Base\Component\Dialog;
use Combodo\iTop\Application\UI\Base\Component\Html\Html;
use Combodo\iTop\Application\UI\Base\Layout\UIContentBlock;
/**
*
* @package Combodo\iTop\Application\UI\Base\Component\Dialog
* @since 3.1.0
*/
class Dialog extends UIContentBlock
{
// Overloaded constants
public const BLOCK_CODE = 'ibo-dialog';
public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/components/dialog/layout';
public const DEFAULT_JS_ON_READY_TEMPLATE_REL_PATH = 'base/components/dialog/layout';
public const DEFAULT_JS_FILES_REL_PATH = [
'js/components/dialog.js',
];
/** @var string $sTitle */
protected string $sTitle;
/** @var string $sContent */
protected string $sContent;
/**
* Alert constructor.
*
* @param string $sTitle
* @param string $sContent
* @param string|null $sId
*/
public function __construct(string $sTitle = '', string $sContent = '', ?string $sId = null)
{
parent::__construct($sId);
$this->sContent = $sContent;
if (!empty($sContent)) {
$this->AddSubBlock(new Html($sContent));
}
}
/**
* @return string
*/
public function GetTitle(): string
{
return $this->sTitle;
}
/**
* @param string $sTitle Title of the alert
*
* @return $this
*/
public function SetTitle(string $sTitle): Dialog
{
$this->sTitle = $sTitle;
return $this;
}
/**
* Return the raw HTML content, should be already sanitized.
*
* @return string
*/
public function GetContent(): string
{
return $this->sContent;
}
/**
* Set the raw HTML content, must be already sanitized.
*
* @param string $sContent The raw HTML content, must be already sanitized
*
* @return $this
*/
public function SetContent(string $sContent): Dialog
{
$this->sContent = $sContent;
return $this;
}
}

View File

@@ -1,54 +0,0 @@
<?php
/**
* Copyright (C) 2013-2021 Combodo SARL
*
* This file is part of iTop.
*
* iTop is free software; you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* iTop is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
*/
namespace Combodo\iTop\Application\UI\Base\Component\Dialog;
use Combodo\iTop\Application\UI\Base\AbstractUIBlockFactory;
/**
* Class DialogUIBlockFactory
*
* @api
*
* @since 3.1.0
* @package Combodo\iTop\Application\UI\Base\Component\Dialog
*/
class DialogUIBlockFactory extends AbstractUIBlockFactory
{
/** @inheritDoc */
public const TWIG_TAG_NAME = 'UIDialog';
/** @inheritDoc */
public const UI_BLOCK_CLASS_NAME = Dialog::class;
/**
* Make a basis Dialog component
*
* @param string $sTitle Title of the alert
* @param string $sContent The raw HTML content, must be already sanitized
* @param string|null $sId id of the html block
*
* @return \Combodo\iTop\Application\UI\Base\Component\Alert\Alert
*/
public static function MakeNeutral(string $sTitle = '', string $sContent = '', ?string $sId = null)
{
return new Dialog($sTitle, $sContent, $sId);
}
}

View File

@@ -0,0 +1,59 @@
<?php
/**
* Copyright (C) 2013-2023 Combodo SARL
*
* This file is part of iTop.
*
* iTop is free software; you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* iTop is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
*/
namespace Combodo\iTop\Application\UI\Base\Component\Modal;
use Combodo\iTop\Application\UI\Base\Component\Input\InputUIBlockFactory;
use Combodo\iTop\Application\UI\Base\Layout\UIContentBlock;
use Dict;
/**
*
* @package Combodo\iTop\Application\UI\Base\Component\Modal
* @since 3.1.0
*/
class DoNotShowAgainOptionBlock extends UIContentBlock
{
/**
* Constructor.
*
* @param string|null $sId
*/
public function __construct(string $sId = null)
{
parent::__construct($sId, ['ibo-modal-option--do-not-show-again']);
// initialize UI
$this->InitUI();
}
/**
* Initialize UI.
*
* @return void
*/
private function InitUI()
{
// Create checkbox
$oCheckBox = InputUIBlockFactory::MakeStandard('checkbox', 'do_not_show_again', false);
$oCheckBox->AddCSSClass('ibo-modal-option--do-not-show-again--checkbox');
$oCheckBox->SetLabel(Dict::S('UI:UserPref:DoNotShowAgain'));
$this->AddSubBlock($oCheckBox);
}
}

View File

@@ -20,6 +20,7 @@
namespace Combodo\iTop\Application\UI\Base\Component\Template;
use Combodo\iTop\Application\UI\Base\AbstractUIBlockFactory;
use Combodo\iTop\Application\UI\Base\Layout\UIContentBlock;
/**
* Class TemplateUIBlockFactory
@@ -47,4 +48,17 @@ class TemplateUIBlockFactory extends AbstractUIBlockFactory
{
return new Template($sId);
}
/**
* Make a Template component with a block inside.
*
* @return \Combodo\iTop\Application\UI\Base\Component\Template\Template
*/
public static function MakeForBlock(string $sId, UIContentBlock $oContentBlock)
{
$oBlock = TemplateUIBlockFactory::MakeStandard($sId);
$oBlock->AddSubBlock($oContentBlock);
return $oBlock;
}
}

View File

@@ -55,9 +55,9 @@ class BlockDirectLinksViewTable extends AbstractBlockLinksViewTable
'icon_classes' => 'fas fa-minus',
'js_row_action' => "LinkSetWorker.DetachLinkedObject('{$this->sTargetClass}', aRowData['{$this->sTargetClass}/_key_/raw'], '{$this->oAttDef->GetExtKeyToMe()}');",
'confirmation' => [
'message' => 'UI:Links:ActionRow:detach:confirmation',
'message_row_data' => "{$this->sTargetClass}/hyperlink",
'remember_choice_pref_key' => 'LinkSetWorker.DetachLinkedObject',
'message' => 'UI:Links:ActionRow:detach:confirmation',
'message_row_data' => "{$this->sTargetClass}/hyperlink",
'do_not_show_again_pref_key' => 'LinkSetWorker.DetachLinkedObject',
],
);
break;
@@ -68,9 +68,9 @@ class BlockDirectLinksViewTable extends AbstractBlockLinksViewTable
'icon_classes' => 'fas fa-trash',
'js_row_action' => "LinkSetWorker.DeleteLinkedObject('{$this->oAttDef->GetLinkedClass()}', aRowData['{$this->oAttDef->GetLinkedClass()}/_key_/raw']);",
'confirmation' => [
'message' => 'UI:Links:ActionRow:delete:confirmation',
'message_row_data' => "{$this->sTargetClass}/hyperlink",
'remember_choice_pref_key' => 'LinkSetWorker.DeleteLinkedObject',
'message' => 'UI:Links:ActionRow:delete:confirmation',
'message_row_data' => "{$this->sTargetClass}/hyperlink",
'do_not_show_again_pref_key' => 'LinkSetWorker.DeleteLinkedObject',
],
);
break;

View File

@@ -63,9 +63,9 @@ class BlockIndirectLinksViewTable extends AbstractBlockLinksViewTable
'icon_classes' => 'fas fa-minus',
'js_row_action' => "LinkSetWorker.DeleteLinkedObject('{$this->oAttDef->GetLinkedClass()}', aRowData['Link/_key_/raw']);",
'confirmation' => [
'message' => 'UI:Links:ActionRow:detach:confirmation',
'message_row_data' => "Remote/hyperlink",
'remember_choice_pref_key' => 'LinkSetWorker.DetachLinkedObject',
'message' => 'UI:Links:ActionRow:detach:confirmation',
'message_row_data' => "Remote/hyperlink",
'do_not_show_again_pref_key' => 'LinkSetWorker.DetachLinkedObject',
],
);