I'm trying to write a React component which subscribes to data on the server by passing the collection name as a prop. (in the example the name is still hardcoded to keep things simple) Since the collection names can change dynamically, I'm calling a method to construct the publication and server collection variable. Now the theory is to construct the data publication, server and client mongo collection variable in a parent component and the subscribe to this publication in the child component. The parent component is set up like this:
export default class TilesSingle extends TrackerReact(Component) {
newDataCollection(){
Meteor.call("setupData","randomcollectionname");
if(!window["randomcollectionname"]){
window["randomcollectionname"] = new Meteor.Collection("randomcollectionname");
}
}
render(){
this.newDataCollection();
return(
<div>
<DataObject />
</div>
)
}
}
The setupData method looks like this:
Meteor.methods({
setupData(collectionname){
if(!global[collectionname]){
global[collectionname] = new Meteor.Collection(collectionname);
Meteor.publish("pub."+ collectionname,function() {
return global[collectionname].find();
});
}
}
})
And the child DataObject component looks like this:
export default class DataObject extends TrackerReact(Component) {
constructor(){
super();
this.state = {
subscription: {
tiledata: Meteor.subscribe("pub.randomcollectionname"),
}
}
}
componentWillUnmount(){
this.state.subscription.tiledata.stop();
}
findData(){
post = window['randomcollectionname'].findOne();
console.log(post)
return post;
}
render(){
obj = this.findData();
if(!obj){
obj = {};
obj["score"] = 0;
}
return(
<div>
<h4>{obj.score}</h4>
</div>
)
}
}
Notice that I'm logging post in the findData() function. When I refresh, the console logs:
undefined
undefined
> Object {..}
> Object {..}
undefined
undefined
It is almost as if the subscription works and then stops working. I'm thinking that it has to do with the order in which react renders these components, and that the method is not finished on the server by the time the client tries to render the child component. Any Ideas?
Related
I want to filter records so that the assigned user can only see the records that are assigned to him from the popup list view.
The reason why I'm not doing this in the roles management is because if I assigned a user to a client record then other users that have the same role wouldn't able to see it so I've set the role->list tab to "all" and added custom code in list view that only the login user can see their own records.
Here's what I've done.
<?php
require_once('include/MVC/View/views/view.popup.php');
class AccountsViewPopup extends ViewPopup
{
public function display()
{
parent::display(); // TODO: Change the autogenerated stub
require_once 'modules/ACLRoles/ACLRole.php';
$ACLRole = new ACLRole();
$roles = $ACLRole->getUserRoles($GLOBALS['current_user']->id);
if (in_array('User1', $roles)) {
global $db, $current_user;
$this->where .= " AND accounts.assigned_user_id = '$current_user->id' AND deleted=0 ";
}
}
}
But i get this error:
Undefined property: AccountsViewPopup::$where
For list view only: custom/modules/MODULE_NAME/views/view.list.php
and following is the helping code:
require_once('include/MVC/View/views/view.list.php');
class MODULE_NAMEViewList extends ViewList {
function listViewProcess() {
global $current_user;
$this->params['custom_where'] = ' AND module_name.name = "test" ';
parent::listViewProcess();
}
}
For list and popup view(both):
You need to change the logic inside create_new_list_query function which actually prepares a query. Some modules have override it a bean level(e.g. see modules/Leads/Lead.php).
If you want to override it in upgrade safe manner then create a file in custom directory e.g: custom/modules/Leads/Lead.php, then extend it from the core bean class like following:
<?php
if(!defined('sugarEntry') || !sugarEntry) die('Not A Valid Entry Point');
require_once('modules/Leads/Lead.php');
class CustomLead extends Lead {
function create_new_list_query($order_by, $where,$filter=array(),$params=array(), $show_deleted = 0,$join_type='', $return_array = false,$parentbean=null, $singleSelect = false, $ifListForExport = false)
{
// Code from create_new_list_query in and then modify it accordingly.
}
}
Register new bean class in this location: custom/Extension/application/Ext/Include/custom_leads_class.php and registration code will look like following:
<?php
$objectList['Leads'] = 'Lead';
$beanList['Leads'] = 'CustomLead';
$beanFiles['CustomLead'] = 'custom/modules/Leads/Lead.php';
?>
I know this has been answered, but decided to post my solution anyway. I had almost the same problem some time ago (7.10.7).
PopupView has method getCustomWhereClause() which you can implement in your custom view.
It has to return containing string with the conditions.
Example:
custom/modules/Meetings/views/view.popup.php
/*class declaration and other stuff*/
protected function getCustomWhereClause()
{
global $current_user;
return " ( {$this->bean->table_name}.assigned_user_id='{$current_user->id}') ";
}
Remember to leave at least one space at the start and the end because SuiteCRM actually forgets to add it and it may result in broken query (but it's fairly easy to find in logs).
Due to the fact that I am new in meteor/react I can't figure out how to initialize my state variable.
My problem is that I would like to get
my mongo collection through the createContainer from react-meteor-data (as described here),
use the initialized prop to intialize the state variable
But the prop in the constructor is empty. Only when I the "gotClicked" function is called the prop.allLists is filled with the data from mongo.
Does anyone know why? My guess the data is loaded asynchronously, so that the data is not available yet in the constructor.
What would be a better way to get the data?
import React, {Component, PropTypes} from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import {AllLists} from '../api/alllists.js'
export default class MyList extends Component {
constructor(props) {
super();
console.log(props.allLists)
console.log(this.props.allLists)
//allLists is empty
this.state = {
lists: props.allLists
}
}
gotClicked(){
console.log(this.props.allLists)
//allLists is filled
}
render() {
return (
<div className="container" onClick={this.gotClicked.bind(this)}>
</div>
);
}
}
MyList.propTypes = {
allLists: PropTypes.string.isRequired
}
export default createContainer(() => {
return {
allLists: AllLists.find({}).fetch()
};
}, MyList);
You're right, the data is loaded asynchronously, and it might not be available in the constructor. However, the callback function you pass to createContainer is evaluated again when the data is loaded, and it automatically updates the props of your component.
To catch this change, implement the componentWillReceiveProps function in your React component.
componentWillReceiveProps(nextProps) {
this.setState({
lists: nextProps.allLists
});
}
Docs here: https://facebook.github.io/react/docs/component-specs.html
I have a form say:
class Application_Form_UserDetails extends Zend_Form
{
public function init()
{
$pswd = new Zend_Form_Element_Password('password');
$pswd->setLabel('New password:');
$pswd->setAttrib('size', 25);
$pswd->setRequired(false);
$pswd->addValidator('StringLength', false, array(4,15));
$pswd->addErrorMessage('Wron password');
}
}
In my user details controller class I have:
class UserDetailsController extends Zend_Controller_Action {
public function editAction()
{
$userId = $this->userInfo->id;
$DbTableUsers = new Application_Model_DbTable_User;
$obj = $DbTableUsers->getUserDetails($userId);
$this->view->formUser = new $this->_UserDetails_form_class;
$this->view->formCompany = new $this->_CompanyDetails_form_class;
if ($obj) {
$this->view->formUser->populate($obj);
}
$url = $this->view->url(array('action' => 'update-user-details'));
$this->view->formUser->setAction($url);
}
public function updateUserDetailsAction()
{
$formUser = new $this->_UserDetails_form_class;
if ($formUser->isValid($this->getRequest()->getPost())) {
}
else {
//validation failed
$formUser->markAsError();
$this->view->formUser = $formUser;
$this->_helper->redirector('edit', 'user-details');
}
}
}
The first time Edit action is called the form built and displayed.
User fills the form and sends it (updateUserDetailsAction is called).
In updateUserDetailsAction, on validation failure I mark the form as having errors and want to display the form with error messages that I previously set in updateUserDetailsAction class.
Then I redirect:
$this->_helper->redirector('edit', 'user-details');
in order to display the same form but with errors for the user to re-enter correct values.
The problem is I don't know how to let know the edit action that the form must display validation errors?
On $this->_helper->redirector('edit', 'user-details'); the form is redisplayed
as a new form with cleared erros but I need them displayed.
Do I do this the correct way?
regards
Tom
Problem comes from the fact that you are redirecting and in each method you are creating a new instance of the form, that means the form class is loosing its state - data you injected from the request and any other values passed to this object.
Combine editAction and updateUserDetailsAction into one method:
...
$formUser = new Form();
// populate the form from the model
if ($this->getRequest()->isPost()) {
if ($formUser->isValid($this->getRequest()->getPost())) {
// update the model
}
}
...
and have the form being submitted to the edit action. This will simplify your code and remove code duplication.
If you just wan to fix your code you can instantiate the form object in the init() method of your controller as set it as a property of your controller. This will way you will reuse same instance after redirection. I still think that solution above is much more compact and easier to understand for someone else.
I am quite new to TypeScript and I experience a strange problem at the moment. I create an instance of my main class when the document is ready, using JQuery.
var main: MainApp;
$(document).ready(function () {
main = new MainApp();
});
The simplified MainApp Class:
class MainApp {
// Helper Objects
net: AppNetworking;
urlHelper: UrlHelper;
cat: Category;
// Construction
constructor() {
this.net = new AppNetworking();
this.urlHelper = new UrlHelper();
}
// Ajax Callback with Data needed to initialize the "cat" object
private AjaxCallback(categoryData){
this.cat = new Category(categoryData);
}
// Event Handler for an HTML-Element
// As it would be called anonymously in JS I decided to make it a static function
static onClickSendButton(): void{
// Using some members of the MainApp
var hostUrl: string = main.urlHelper.getQueryStringParam("HostUrl");
if (main.cat.isValidCategory()) {
main.sendCategory();
}
}
sendCategory(): boolean {
// Some logic to send data via AJAX
}
}
The function is being registered to the onClick Event of a Button on construction of the MainApp Class.
$("#btnSendCat").click(MainApp.onClickSendButton);
When the function onClickSendButton() gets called, it produces the error:
Uncaught TypeError: Cannot read property 'isValidCategory' of undefined
When debugging, the urlHelper Instance is defined, but the cat Instance is undefined. As I do not touch the instance cat anywhere in my application, I'm really confused how it is undefined. Also when checking the main variable all members are defined!
Am I doing anything illegal here? Could there be issues with that code?
Completely revised answer. I actually answered with the two most common scenarios for this error, but actually your problem is different.
The usual answers are
Make sure you are referencing .js files, not .ts files
Make sure you are loading scripts in the correct order
In your case, this is not the problem and your code is sufficient to recreate the issue.
I have put together the following test, filling in the blanks - and it works as expected.
app.ts
declare var main: MainApp;
class AppNetworking {
}
class UrlHelper {
getQueryStringParam(input: string) {
console.log('Got here getQueryStringParam');
return input;
}
}
class Category {
isValidCategory() {
console.log('Got here isValidCategory');
return true;
}
}
class MainApp {
// Helper Objects
net: AppNetworking;
urlHelper: UrlHelper;
cat: Category;
// Construction
constructor() {
this.net = new AppNetworking();
this.cat = new Category();
this.urlHelper = new UrlHelper();
}
// Event Handler for an HTML-Element
// As it would be called anonymously in JS I decided to make it a static function
static onClickSendButton(): void{
// Using some members of the MainApp
var hostUrl: string = main.urlHelper.getQueryStringParam("HostUrl");
if (main.cat.isValidCategory()) {
main.sendCategory();
}
}
sendCategory(): boolean {
// Some logic to send data via AJAX
return true;
}
}
index.html snip
<div id="btnSendCat">BTN SEND CAT</div>
<script src="app.js"></script>
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script>
var main;
$(document).ready(function () {
main = new MainApp();
$("#btnSendCat").click(MainApp.onClickSendButton);
});
</script>
The result of running this test is the following output in the console window:
"Got here getQueryStringParam" app.js:10
"Got here isValidCategory" app.js:19
I left some important parts of my App out, I'm sorry. Later in the project I used to reinitialize that Category Object. This re initialization was done in an AJAX-Callback Function. This function runs outside of my Object and this wont be my MainApp Class but the Window. I think it's what you call an anonymous function in JavaScript.
I fixed that issue by taking use of my global main Variable
class MainApp {
// Called anonymous so it should be a static function
private AjaxCallback(categoryData){
// this.cat = new Category(categoryData); ! this will be the Window Instance and not a MainApp Instance
main.cat = new Category(categoryData); // Initialization using the "main" variable
}
}
The call in my onClickSendButton Method to this.cat succeeds now, as this.cat was reinitialized correctly.
This video helped me a lot in my researches: Understanding "this" in TypeScript
I'm teaching myself Zend am and having a problem with using my session to call a View Helper action.
My controller:
<?php
class SessionController extends Zend_Controller_Action
{
protected $session;
public function init() //Like a constructor
{
$this->_helper->viewRenderer->setNoRender(); // Will not automatically go to views/Session
$this->_helper->getHelper('layout')->disableLayout(); // Will not load the layout
}
public function preDispatch() //Invokes code before rendering. Good for sessions/cookies etc.
{
$this->session = new Zend_Session_Namespace(); //Create session
if(!$this->session->__isset('view'))
{
$this->session->view = $this->view; //if the session doesn't exist, make it's view default
}
}
public function printthingAction()
{
echo $this->session->view->tabbedbox($this->getRequest()->getParam('textme'));
}
}
?>
My view helper
<?php
class App_View_Helper_Tabbedbox extends Zend_View_Helper_Abstract
{
public $wordsauce = "";
public function tabbedbox($message = "")
{
$this->wordsauce .= $message;
return '<p>' . $this->wordsauce . "</p>";
}
}
?>
My view:
<p>I GOT TO THE INDEX VIEW</p>
<input id='textme' type='input'/>
<input id='theButton' type='submit'/>
<div id="putstuffin"></div>
<script type="text/javascript">
$(function()
{
$("#theButton").click(function()
{
$.post(
"session/printthing",
{'textme' : $("#textme").val()},
function(response)
{
$("#putstuffin").append(response);
});
});
});
</script>
The first time I click on theButton, it works, and appends my word like it's supposed to. For every time after, though, it gives me this error message:
Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, '__PHP_Incomplete_Class::tabbedbox' was given in C:\xampp\htdocs\BC\library\Zend\View\Abstract.php on line 341
I copied the Zendcasts.com video almost line for line, and it's still not working. It seems like my session is getting destroyed or something. I would be forever grateful to anyone who could tell me what's happening.
When you store an object in the session, you're really storing a serialized representation of it. The __PHP_Incomplete_Class::tabbedbox occurs because, on subsequent requests, PHP has forgotten what an App_View_Helper_Tabbedbox is.
The solution: make sure you include the App_View_Helper_Tabbedbox class file before Zend_Session::start() is called.
And, the best way to do that is to place this at the opening of your app:
require_once 'Zend/Loader.php';
Zend_Loader::registerAutoload();