json parse error with ps-table

[Matt75]

Hi,

I try to use ps-table component to display a list, I try the example found on the wiki but I have an json parse error. Someone has an example who is working ?

Thanks

[Scritik]

Hi @Matt75,

Which version of PrestUi and Riot are you using? Can you share some code please?

[Matt75]

Hi,

I use Prestui 0.7.1 and RiotJS 3.5.0
The code is an exactly past & copy of the wiki https://github.com/Scritik/prestui/wiki/Tables

modules/prestui/prestui.php

<?php 

if( !defined ('_PS_VERSION_') )
	exit;

class prestui extends Module {

	public function __construct()
	{

		$this->name = 'prestui';
		$this->tab = 'administration';
        $this->version = '0.0.1';
		$this->author = 'Matt75';
        $this->need_instance = 0;
		$this->bootstrap = true;

		parent::__construct();

		$this->displayName = $this->l('PrestUI Demo');
        $this->description = $this->l('PrestUI demonstration');

	}

	public function getContent()
	{
		$this->context->controller->addJS(_MODULE_DIR_ . $this->name . '/views/js/riot-compiler.min.js');

        $this->smarty->assign('ps_version', Tools::substr(_PS_VERSION_, 0, 3));

        // $this->smarty->assign('tags', array('tabs', 'panel'));

		$this->smarty->assign(array(
			'data' => Tools::jsonEncode(array(
				'columns' => array(
					array('content' => 'ID', 'key' => 'id', 'center' => true),
					array('content' => 'Email', 'key' => 'email'),
					array('content' => 'Name', 'key' => 'name'),
					array('content' => 'Active', 'key' => 'active', 'bool' => true, 'center' => true, 'fa' => true)
				),
				'rows' => array(
					array('id' => 1, 'email' => 'bob@google.com', 'name' => 'Bob'),
					array('id' => 2, 'email' => 'john@google.com', 'name' => 'John')
				),
				'rows_actions' => array(
					array('title' => 'Edit', 'action' => 'edit_employee', 'icon' => 'pencil', 'img' => '../img/admin/edit.gif', 'fa' => 'pencil'),
					array('title' => 'Delete', 'action' => 'delete_employee', 'icon' => 'trash', 'img' => '../img/admin/delete.gif', 'fa' => 'trash')
				),
				'top_actions' => array(
					array('title' => 'Add employee', 'action' => 'add_employee', 'icon' => 'add', 'img' => 'themes/default/img/process-icon-new.png', 'fa' => 'plus'),
				),
				'url_params' => array('configure' => $this->name),
				'identifier' => 'id'
			))
		));

        $html = $this->display(__FILE__, 'views/templates/admin/configure.tpl');
		return $html.$this->display(__FILE__, 'views/templates/admin/prestui/ps-tags.tpl');
	}

}

modules/prestui/views/js/configure.tpl

<ps-alert-hint>Remember to save after any modification</ps-alert-hint>

<ps-tabs position="left">

  <ps-tab label="Tab 1" active="true" badge="42" id="tab1" icon="icon-AdminParentModules" img="../img/t/AdminBackup.gif" fa="cogs">
    <ps-panel icon="icon-cogs" img="../img/t/AdminBackup.gif" header="My panel">

      <form class="form-horizontal">
        <ps-input-text name="ps_input" label="Text input" help="Need some help?" size="10" value="PrestaShop rocks" required-input="true" suffix="suffix" prefix="prefix" hint="That's right baby" fixed-width="lg"></ps-input-text>

        <ps-switch name="switch" label="Switch" yes="Yes" no="No" active="true"></ps-switch>

        <ps-radios label="Radios">
    <ps-radio name="ps_radio" value="1">Yes</ps-radio>
    <ps-radio name="ps_radio" value="0" checked="true">No</ps-radio>
  </ps-radios>

  <ps-checkboxes label="Checkboxes">
    <ps-checkbox name="versions[]" value="1.4">1.4</ps-checkbox>
    <ps-checkbox name="versions[]" value="1.5" checked="true">1.5</ps-checkbox>
    <ps-checkbox name="versions[]" value="1.6">1.6</ps-checkbox>
  </ps-checkboxes>

  <ps-color-picker label="Color" name="color_picker"></ps-color-picker>

  <ps-date-picker id="date_picker" name="date_picker" label="My datepicker" value="03/05/2015"></ps-date-picker>

  <ps-password label="Your password"></ps-password>

  <ps-input-text-lang name="ps_input_lang" label="Text input lang" help="Need some help?" size="60" col-lg="5" active-lang="1">
    <div data-is="ps-input-text-lang-value" iso-lang="fr" id-lang="1" lang-name="French" value="Mon texte"></div>
    <div data-is="ps-input-text-lang-value" iso-lang="en" id-lang="2" lang-name="English" value="My text"></div>
  </ps-input-text-lang>

  <ps-textarea-lang name="ps_textarea_lang" label="Text input lang" help="Need some help?" col-lg="10" rows="10" cols="40" active-lang="2" rich-editor="true">
    <div data-is="ps-textarea-lang-value" iso-lang="fr" id-lang="1" lang-name="French"></div>
    <div data-is="ps-textarea-lang-value" iso-lang="en" id-lang="2" lang-name="English"><h3>My english text textarea</h3></div>
  </ps-textarea-lang>

  <ps-select label="Select input" name="ps_select" chosen='true'>
    <option value="test">test</option>
  </ps-select>
      </form>

      <ps-panel-divider></ps-panel-divider>

      <ps-alert-warn>You need to update!</ps-alert-warn>

      <ps-panel-footer>
        <ps-panel-footer-submit title="save" icon="process-icon-save" direction="right" name="submitPanel"></ps-panel-footer-submit>
        <ps-panel-footer-link title="Back to Google" icon="process-icon-back" href="http://google.fr" direction="left"></ps-panel-footer-link>
      </ps-panel-footer>

    </ps-panel>
  </ps-tab>

  <ps-tab label="Tab 2" id="tab2" icon="icon-AdminParentModules" img="../img/t/AdminBackup.gif">
     <ps-table header="{l s='Employees'}" icon="icon-users" content='{$data}' no-items-text="{l s='No items found'}"></ps-table>
  </ps-tab>

</ps-tabs>

Sans oublié les fichiers de prestui 0.7.1 que j'ai placé dans
modules/prestui/views/templates/admin/prestui
et la librairie RiotJS 3.5.0 que j'ai placé dans modules/prestui/views/js/riot-compiler.min.js

Tout fonctionne bien si je commente cette ligne dans le configure.tpl
<ps-table header="{l s='Employees'}" icon="icon-users" content='{$data}' no-items-text="{l s='No items found'}"></ps-table>
Sinon j'ai un json parsing error...

[flyka0]

Hello,

do you have any update considering this issue?
Actually for the moment we can not use PrestUI because of this problem and it would be really great if you fix it.

Thank you in advance !

[Scritik]

Hi,

Sorry for the delay guys.

The $data variable needs to be escaped. But the doc is not up to date.

Can you try something like this:

<ps-table header="{l s='Employees'}" icon="icon-users" content="{$data|replace:'{':'\{'|replace:'}':'\}'|escape:'htmlall':'UTF-8'}" no-items-text="{l s='No items found'}"></ps-table>

I will update the documentation if it's ok on your side.

[flyka0]

Hello,

thank you so much. It works !
I have another question :
what are you thinking about pagination http://prntscr.com/g0f93b and search options http://prntscr.com/g0f9l2 ? Is it possible that it could be added to the library shortly?

Thank you

[Scritik]

Shortly, I don't think so. It's a lot of work between the 1.5 and the 1.6/1.7. But you can try to add it if you want! I recommend to use the helper if you want advanced features like you want.

[estebangarviso]

How do I check when all component with riot are mounted? I know there's a function onMounted() but how do I use it?
I'm trying to apply dynamic live validation with a javascript using $this->context->controller->addJS(... and also tried to display a tpl with external script after ps-tags.tpl like so:

Module Class -> After ps-tags.tpl

$this->_html = ''; (...) $this->context->smarty->assign(array( 'module_js_dir' => $this->uri_js, 'ps_version' => _PS_VERSION_ )); $afterTags = $this->display(__file__, 'views/templates/admin/javascripts.tpl'); $this->context->controller->addJS(_MODULE_DIR_.$this->name.'/views/js/riot+compiler.min.js'); $this->_html .= $this->display(__file__, 'views/templates/admin/extrablock.tpl'); return $this->_html.$this->display(__file__, 'views/templates/admin/prestui/ps-tags.tpl').$afterTags;

javascripts.tpl -> After ps-tags.tpl

`<script type="text/javascript" src="{$module_js_dir}jquery.vatNumber.min.js" defer></script>

<script type="text/javascript" src="{$module_js_dir}admin.js" defer></script>`

With addJS

$this->_html = ''; (...) $this->context->controller->addJS(_MODULE_DIR_.$this->name.'/views/js/riot+compiler.min.js'); $this->context->controller->addJS(_MODULE_DIR_.$this->name.'/views/js/jquery.vatNumber.min.js'); $this->context->controller->addJS(_MODULE_DIR_.$this->name.'/views/js/admin.js'); $this->_html .= $this->display(__file__, 'views/templates/admin/extrablock.tpl'); return $this->_html.$this->display(__file__, 'views/templates/admin/prestui/ps-tags.tpl');