Skip to content

Commit

Permalink
Creación de lista UIComponent en administrador de Magento P 1/3
Browse files Browse the repository at this point in the history 
Creamos GRID (tabla | regilla) que lista los contactos existentes, crearemos vista boton para agregar un contacto mas  (SOLO VISTA) la funcionalidad del botón estará en la parte 2/3

1.- Modificamos nuestro controlador para que cargue el layout
	app/code/Pfay/Contacts/Controller/Adminhtml/Test/Index.php
2.- creamos el layout correspondiente a backend
	app/code/Pfay/Contacts/view/adminhtml/layout/contacts_test_index.xml
	Aqui definimos que a nuestro contenedor ( content ) le pondremos un UICOMPOENETE ( contacts_test_listenig) <---- EL NOMBRE QUE DEFINIMOS AQUI SERA EL NOMBRE DE NUESTO GRID COMPONENTE creado a continuacion
3.- Creamos nuestro UIComponente
	app/code/Pfay/Contacts/view/adminhtml/ui_component/contacts_test_listing.xml
	Secciones de etiqueta listing
	1.- [ argument ]:[js_config] declaramos la fuente de datos que usaremos.
			[spinner] define en donde encontrará las columnas CUADRICULA.
			[buttons] definimos nuestro botón que agregará contactos
	2.- [dataSource]: nombramos objeto que obtendra los datos de la BDD, se definirá en DI.XML
			[component] definimos el componente a usar.
	3.- [columns] : Listado de columnas que tendrá nuestro grid , anteriormente definido en SPINNER

4.- Creamos las clase para definir los botones , declarado en la columna actionsColumn de nuestro UIComponent
	app/code/Pfay/Contacts/Ui/Component/Listing/Column/ContactsActions.php
5.- Creamos nuestro data Provider (ContactsGridDataProvider) declarado en el [dataSource] de nuestro componente UIComponent
	app/code/Pfay/Contacts/etc/di.xml
	1- Definimos un virtualType ContactsGridDataProvider, se lo pasamos a la clase de nuestra colección Pfay\Contacts\Model\ResourceModel\Contact\Collection y le decimos a magento que use un (filterPool) con el nombre ( ContactsGirdFilterPool).
	2- Definimos el ( ContactsGirdFilterPool) recién declarado pasando un elemento (regular) y un elemento (fulltext).
	3- creamos el tipo contacts_test_listing_data_source que usamos arriba en nuestro XML y definimos que usará nuestra colección.
	4.- Creamos un VirtualType SearchResult, páselo a nuestra colección y dígale que use nuestra tabla (pfay_contacts) y el modelo de recursos (Pfay\Contacts\Model\ResourceModel\Contact)

6.- actualízamos , compilamos y asignamos permisos
	php bin/magento setup:upgrade
	php bin/magento setup:di:compile
	chmod -R 777 var/ pub/
  • Loading branch information
@PerezContrerasLuis
PerezContrerasLuis committed Jan 21, 2022
1 parent 82ac3a7 commit f00f26c
Show file tree
Hide file tree
Showing 5 changed files with 255 additions and 1 deletion.
3 changes: 2 additions & 1 deletion code/Pfay/Contacts/Controller/Adminhtml/Test/Index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ class Index extends \Magento\Backend\App\Action
{
public function execute()
{
die('test admin view');
$this->_view->loadLayout();
$this->_view->renderLayout();
}
}
72 changes: 72 additions & 0 deletions code/Pfay/Contacts/Ui/Component/Listing/Column/ContactsActions.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
namespace Pfay\Contacts\Ui\Component\Listing\Column;

use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Ui\Component\Listing\Columns\Column;
use Magento\Framework\UrlInterface;

/**
* Class DepartmentActions
*/
class ContactsActions extends Column
{
/**
* @var UrlInterface
*/
protected $urlBuilder;

/**
* @param ContextInterface $context
* @param UiComponentFactory $uiComponentFactory
* @param UrlInterface $urlBuilder
* @param array $components
* @param array $data
*/
public function __construct(
ContextInterface $context,
UiComponentFactory $uiComponentFactory,
UrlInterface $urlBuilder,
array $components = [],
array $data = []
) {
$this->urlBuilder = $urlBuilder;
parent::__construct($context, $uiComponentFactory, $components, $data);
}

/**
* Prepare Data Source
*
* @param array $dataSource
* @return array
*/
public function prepareDataSource(array $dataSource)
{
if (isset($dataSource['data']['items'])) {
foreach ($dataSource['data']['items'] as &$item) {
$item[$this->getData('name')]['edit'] = [
'href' => $this->urlBuilder->getUrl(
'contacts/test/edit',
['id' => $item['pfay_contacts_id']]
),
'label' => __('Edit'),
'hidden' => false,
];
$item[$this->getData('name')]['delete'] = [
'href' => $this->urlBuilder->getUrl(
'contacts/test/delete',
['id' => $item['pfay_contacts_id']]
),
'label' => __('Delete'),
'hidden' => false,
];
}
}

return $dataSource;
}
}
42 changes: 42 additions & 0 deletions code/Pfay/Contacts/etc/di.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

<virtualType name="ContactsGridDataProvider" type="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider">
<arguments>
<argument name="collection" xsi:type="object" shared="false">Pfay\Contacts\Model\ResourceModel\Contact\Collection</argument>
<argument name="filterPool" xsi:type="object" shared="false">ContactsGirdFilterPool</argument>
</arguments>
</virtualType>

<virtualType name="ContactsGridDataProvider" type="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider">
<arguments>
<argument name="collection" xsi:type="object" shared="false">Pfay\Contacts\Model\ResourceModel\Contact\Collection</argument>
<argument name="filterPool" xsi:type="object" shared="false">ContactsGirdFilterPool</argument>
</arguments>
</virtualType>

<virtualType name="ContactsGirdFilterPool" type="Magento\Framework\View\Element\UiComponent\DataProvider\FilterPool">
<arguments>
<argument name="appliers" xsi:type="array">
<item name="regular" xsi:type="object">Magento\Framework\View\Element\UiComponent\DataProvider\RegularFilter</item>
<item name="fulltext" xsi:type="object">Magento\Framework\View\Element\UiComponent\DataProvider\FulltextFilter</item>
</argument>
</arguments>
</virtualType>

<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
<arguments>
<argument name="collections" xsi:type="array">
<item name="contacts_test_listing_data_source" xsi:type="string">Pfay\Contacts\Model\ResourceModel\Contact\Collection</item>
</argument>
</arguments>
</type>

<virtualType name="Pfay\Contacts\Model\ResourceModel\Contact\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
<arguments>
<argument name="mainTable" xsi:type="string">pfay_contacts</argument>
<argument name="resourceModel" xsi:type="string">Pfay\Contacts\Model\ResourceModel\Contact</argument>
</arguments>
</virtualType>

</config>
8 changes: 8 additions & 0 deletions code/Pfay/Contacts/view/adminhtml/layout/contacts_test_index.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<uiComponent name="contacts_test_listing"/>
</referenceContainer>
</body>
</page>
131 changes: 131 additions & 0 deletions code/Pfay/Contacts/view/adminhtml/ui_component/contacts_test_listing.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">

<!-- main part of the grid -->
<argument name="data" xsi:type="array">
<!-- define where to find the date source -->
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">contacts_test_listing.contacts_test_listing_data_source</item>
<item name="deps" xsi:type="string">contacts_test_listing.contacts_test_listing_data_source</item>
</item>
<!-- define where to find the columns -->
<item name="spinner" xsi:type="string">contacts_test_columns</item>

<item name="buttons" xsi:type="array">
<item name="add" xsi:type="array">
<item name="name" xsi:type="string">add</item>
<item name="label" xsi:type="string" translate="true">Add a new Contact</item>
<item name="class" xsi:type="string">primary</item>
<item name="url" xsi:type="string">*/*/newAction</item>
</item>
</item>
</argument>

<!-- define the date source (must be the same than in argument/item/provider and argument/js_config/deps -->
<dataSource name="contacts_contact_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<!-- unique name for the grid -->
<argument name="class" xsi:type="string">ContactsGridDataProvider</argument>
<!-- name of the data source same as in argument/js_config/provider -->
<argument name="name" xsi:type="string">contacts_test_listing_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">pfay_contacts_id</argument>
<argument name="requestFieldName" xsi:type="string">id</argument>
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
<item name="update_url" xsi:type="url" path="mui/index/render"/>
<item name="storageConfig" xsi:type="array">
<item name="indexField" xsi:type="string">pfay_contacts_id</item>
</item>
</item>
</argument>
</argument>
</dataSource>

<!-- define the columns of my grid -->
<columns name="contacts_test_columns">

<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<!-- Bookmarks behaviour -->
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">contacts_test_listing.contacts_test_listing.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current</item>
</item>
<item name="childDefaults" xsi:type="array">
<item name="controlVisibility" xsi:type="boolean">true</item>
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">contacts_test_listing.contacts_test_listing.listing_top.bookmarks</item>
<item name="root" xsi:type="string">columns.${ $.index }</item>
<item name="namespace" xsi:type="string">current.${ $.storageConfig.root}</item>
</item>
</item>
</item>
</argument>

<selectionsColumn name="ids">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<!-- define which field will be used as ID -->
<item name="indexField" xsi:type="string">pfay_contacts_id</item>
</item>
</argument>
</selectionsColumn>

<!-- Column ID -->
<column name="pfay_contacts_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">textRange</item>
<item name="sorting" xsi:type="string">asc</item>
<item name="label" xsi:type="string" translate="true">ID</item>
</item>
</argument>
</column>
<!-- Column name -->
<column name="name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">contact</item>
<item name="dataScope" xsi:type="string">name</item>
<item name="label" xsi:type="string" translate="true">Name</item>
<item name="filter" xsi:type="string">text</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</column>
<!-- Column email -->
<column name="email">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">contact</item>
<item name="dataScope" xsi:type="string">email</item>
<item name="label" xsi:type="string" translate="true">Email</item>
<item name="filter" xsi:type="string">text</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</column>
<!-- action columns edit and delete -->
<actionsColumn name="actions" class="Pfay\Contacts\Ui\Component\Listing\Column\ContactsActions">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="resizeEnabled" xsi:type="boolean">false</item>
<item name="resizeDefaultWidth" xsi:type="string">107</item>
<item name="indexField" xsi:type="string">pfay_contacts_id</item>
</item>
</argument>
</actionsColumn>
</columns>

</listing>

0 comments on commit f00f26c

Please sign in to comment.