Develop Reference

Getting control over positioning of v-for items

Im working on a information-management system (vuejs, postgresql, graphql/hasura) for my company at the moment. We work project-based and have a lot of information to handle. Using postgresql, I've set up a few tables, ex client_information, general_information, internal_information and so on. (see structure below)
title -----| value | completed | date | project_number
-------------------------------------------------
customer -- walmart -- true ----- xx ----- 19823 --
contact --- xxxxxx --- false ---- xx ----- 19823 --
email ----- xxxxxx --- false ---- xx ----- 19823 --
So, this table with client_info contains info about all the clients we have, and each row is connected to a project by it's project number (19823). So, using hasura(graphQL) I make a request that returns all information about a chosen project in the form of a array filled with objects:
[ { title: 'customer', value: 'walmart', completed: true,
date: 'xx' project_number: 10823 }, {...}, {...}, {...} ]
So far all is fine and dandy, I could just v-for through the entire array and spit out all the information I need.
BUT, I'd like to be able to control in which order the items are displayed. During testing I created a function that takes in the array of objects above, and an array that I specify on the client looking like this:
['email', 'customer', 'contact']
This orders the array of items in the order specified, and works, but feels.. weird?
Consider this example:
This is my array:
const arr = [
{title: "customer", value: "walmart"},
{title: "email", value: "xx#xx.xx"},
{title: "phone", value: "01234"}
];
Then I do a:
<li v-for="item in arr">, text-field(vuetify) with placeholder="item.title", and v-model="item.value" </li>
That prints out the 3 items in the order of the array, so customer first, then email, then phone. What I don't understand is how to arrange the order of items. Maybe I want phone first, with a v-for loop, how is that possible? And yes, the array is way longer than just 3 items.
It might be that it's my first time using a relational database and my lack of experience is messing me up, but with the old database (firebase) everything was quite easy since each project was stored as a separate object. If I wanted the client email I'd just link a text-field to project.customer.email, and therefore had control. For reasons we need to move to postgresql and I'm not sure how to get the same control, maybe my solution is an "okay" one even though it feels a little weird to me, I dont know.
I was thinking about indexing the items in the db but I'd like to control if from the client in case we need to make layout-changes later on.
This turned into a novel, but if any of you guys have faced a similar situation and have some tips I'd greatly appreciate them.

Python Flask data feed from Pandas Dataframe, dynamically define with unique endpoint

Hi I am building a web app with Flask Python. I got a problem here:
#app.route('/analytics/signals/<ticker_url>')
def analytics_signals_com_page(ticker_url):
all_ticker = full_list
ticker_name = com_name
ticker = ticker_url.upper()
pricerec = sp500[ticker_url.upper()].tolist()
timerec = sp500[ticker_url.upper()].index.tolist()
return render_template('company.html', all_ticker=all_ticker, ticker_name=ticker_name, ticker=ticker, pricerec=pricerec, timerec=timerec)
Here I am defining company pages based on the a page will contain different content. The problem is that everything is fine upto ticker = ticker_url.upper(). It works perfectly fine. But for pricerec and timerec, they make problems.
sp500 is a pandas DataFrame columns being companies like "AAPL", "GOOG","MSFT", and so forth 505 companies and the index are timestamps, and values are the prices at each time.
So what I am doing for the pricerec, I am taking the ticker_url and use it to take the specific company's price and make it as a list. And timerec is to take the index (timestamps) and make it as a list. And I am passing these two variables into the company.html page.
But it makes internal server error. I do not know why it happens.
My expectation was that when a user click a button that href to "~/analytics/signals/aapl" then the company.html page will contain the pricerec and timerec for me to draw a graph. But it didn't work like that. It makes internal server error. I defined those two variables in the javascript also like I did for the other variables(all_ticker, ticker_name, and ticker)
Can anyone help me with this issue?
Thanks!

Redux handling new items and ids

I have my normalized store with lists and id mappings:
{
"byId": {
"images": {
"10984": {"id": "10984", "src": "/img.png"}
}
},
"myImages": [
"10948"
]
}
Now I want to create a new image, and add it to the list. The problem is that I don't have an id for it until I send it to the server. So I could generate a random id
"tempid19048": {"id": "tempid19048", src: "/img.png"}
"myImages": [
"10948",
"tempid19048"
]
And then I save it to the server and get an id back I dispatch an action. I may have tempid19048 used in multiple parts of the state.
What's a sane way to update everything with the new id? Am I approaching this all wrong?

Because Redux is really a client-side state manager, generally you just want to mirror the global state and thats it. As you know, unlike Flux/GraphQL, there isn't any functionality for caching, optimistic updates etc. My gut tells me building this would be difficult without compromising the pure simplicity that Redux is built on.
That said, I found redux-optimistic that mimicks Flux's optimistic updates for Redux. I've not used it, but it looks nice enough.
But with even with that said, I'd still highlight the simple solution of designing-out any need for temp ids / optimistic updates etc:
make a request to create the image on the server
show a spinner
on success message from the server, add the new image with the new id to the global state

You can make IDs in "myImage" as key-value pair.
"myImages": {
"10948": "10948",
"tempid19048": "tempid19048"
}
Now where ever you want to use you can use as
myImages["tempid19048"]
This will give you its current value as "tempid19048".
And if you need to change this tempId you need to change only the value, and key remains same.
"myImages": {
"10948": "10948",
"tempid19048": "newServerID"
}
Hence, irrespective of number of places you are using tempID now you need to update in only one place.

Sequential array issue

Back end code - PHP
Front end - Angular/JavaScript
I am experimenting around with a preferential search on my website - I have users who are mapped to friends, each user can post certain content which can be "liked", my idea for the search was to count how many of the users friends have "liked" resources on the site and sort them from highest to lowest. I have the main chunk of this working (the background code) and have it returning an object that looks like:
{"results":
"post":
{"9": {"message" : "blah9"}
,
"1": {"message" : "blah"}}
}
The number is the id of the post - just a side note, which I'm using to refresh something elsewhere on the site, my problem is, is when I console.log(); this onto the screen it changes to:
{"results":
"post":
{"1": {"message" : "blah"},
"9": {"message" : "blah9"}}
}
Which makes the sorting code kind of useless, is there anyway I can stop this from happening?
$http.post('php/router.php', {'request' : 'search', 'page': 'Search', 'searchString': searchString}).success(function(data) {
console.log(data.results.post);
});

Let the Javascript side of things do the sorting and totally remove the sort from your PHP. Just have the PHP do the pagination of the set (1 to 10, 11 to 20, etc) and the Javascript can order results for you (chunks of 10 from my earlier example) for you.
Probably you'll still have some kind of sort on the PHP side if you have a ton of results to chunk up but the JS can certainly sort out each chunk that is sent to the client.

Get full data set, sorted with YUI Data Table with Pagination

I hope I am describing my issue enough.. here goes:
I have a YUI data table, get a server side set of records via JSON, and then populates the data.
Users can click on the headers to sort the data in three of the 6 columns, (which are using a custom sort function for each column). The sorting is done client-side.
When a user sorts the data, I need to be able to get a complete list of the values from one of the columns being shown. I need all the data available, not just what's rendered to the page. The data hidden via pagination must be included.
Any ideas? I've tried the handleDataReturnPayload and doBeforeLoadData methods of the DataTable but both give the original, unsorted data.
I'm really stuck here and I've got a client depending on a feature that depends on me getting this sorted list.
Thanks in advance.

Satyam, over at the YUI Forums answered my question perfectly.
The data is actually stored in the
RecordSet. At any time you can go and
look at it, and it will be sorted as
shown on the screen, but it will have
all the data, whether shown or not.
Method getRecordset() will give you a
reference to it and then you can loop
through its records.
You can listen to the columnSortEvent
to be notified a sort has occurred.
I just subscribed to the columnSortEvent event and looped through the array returned by datatable.getRecordSet().getRecords().

I'd recommend posting this to the YUI forums -- http://yuilibrary.com/forum/ -- that's a great place to get support on DataTable issues.

I stumbled upon this question looking for information on how to retrieve information from a dataset that was NOT displayed in the datatable. IF you place the hidden data in the datasource before any field you wish to be displayed, it will be rendered blank, but if you place it after your last field that will be rendered (as defined by the columns object), then they will not render but still be accessible through the record).
var columns = [
{key:"Whatchamacallits", children:[
{key:"name" },
{key:"price" }
]}
];
var ds = new YAHOO.util.DataSource('index.php...');
oDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
oDataSource.responseSchema = {
fields:["name","price","id"]
};
var dt = new YAHOO.widget.DataTable("dt-id", columns, ds, {});
dt.subscribe("rowClickEvent", dt.onEventSelectRow);
dt.subscribe("rowSelectEvent", function(p){ alert(p.getData('id'); });