Is it possible to make two tables scroll horizontally in sync with one another?

Bow Down Season 21 GIF by The Voice - Find & Share on GIPHY

3 Likes

I was attempting to make it look like what they use now. Right now they are using a Google Sheet and this is what it looks like:

I was hoping to keep the new one looking same as to not confuse anyone. Plus my boss told me it needs to be the same.

The query that retrieves the pool models is very simple:

SELECT model_name
FROM production_models

I listed the pools in the database in the order that they needed to be, so there is no ORDER BY clause.

I'd suggest it's not best practice to not have an id on that table but in theory you could select a row num and sort by that in your components. Something like:

select model_name, row_number() over(order by ctid asc) as row_num from production_models

Actually I do have an id in the production_models database. When I set the query to ORDER BY id, everything went to the order that I needed.

I now having the page looking the way it needs to. Thank you so much for all your help and for sticking with me. I really appreciate it.

1 Like

Do you know how I can get rid of the spaces?

Also, I am trying to get the number of orders for each day. Why does the console show 1 order for every model for every day?

I tried to use this to display the number of orders for each day, but it only worked for the first day.

{{ item.orders[i].model.length }}

The orders array for each date is by product so there will be 73 entries for each date, not what you're after here.

You could filter the orders array for each date for ones that have a build_date, but that would be complex and time consuming because the listview will have to run that 7 times every time and it's quite wasteful.
As we're already gathering the order data in the formatOrders function, you could populate it there.

Switch around the lines where we create the object for "today" ie

let d = {
    orders: [],
    date: today
  };

and put this after the part where we filter order_list by build_date. The length of this array could be a new property in d, that would tell you orders per day.

As for the spacing, that's just padding or margin on your container or tables

What exactly do you mean by switch around the lines? Should it look like this?

let d = {
     date: today,
     orders: []
};

I thought the spacing was a result of the container padding or margin, but I turned those all off and I still have the spacing between lists. I was hoping to get rid of it, but is is not a deal breaker.

no, not quite.

switch the line(s) where we create that "d" object with the one where we filter order_list (so that it runs before "d" is created". I mean to switch the order of these commands.

The spacing is definitely possible, my original demo hadn't got gaps if you want to check that for reference

OK, so how do I call that value? Would it just {{ item.o }}?

I tried {{ item.o.length }} and it says item.o is undefined.

By the way, do you know if there is a way to check a table cell to see if the data is string or number?

If you've added a new property to this object, which was the suggestion, then you can access it in the same way as you're accessing the date now - so item.whateveryoucalledit would be the path to access it

I got the order count working.

If I want to call one of the entries from this list

d.orders.push(_.merge({
      model: p.model_name,
      build_date: null,
      serial_no: null,
      color: null,
      add_ons: null,
      proj_date: null,
      mold_repair: null

how do I do that? I tried item.color, orders.color and item.orders.color and none of those work.

That would depend on where you're trying to access it from. Context is important in javascript (and Retool)

If you're trying to access it in one of the tables inside the listview (which is where they're currently being displayed) then you should be able to reference them with item.propertyname as you have tried.
Where are you trying to access them and what do you want to do with them?

I have to be able to turn a row black if the product mold is out for repair. That is how they do it now. So I added a mold_repair fieild to the database and set it to boolean. Now I have it set to text and the entries are "true" of "false". Then I inserted {{ item.mold_repair == 'true' ? '#000000' : '' }} in row color in my table. It is not working.

Trying to turn the row black for mold_repair is quite the conundrum. It can only read the mold_repair option I added if there is an order and if it is entered as an order, it throws the order count off.

Would you have any suggestions on how to do this? I thought maybe I could create a database where the model name, start date and end date of which mold it is and when it goes in for repair and when it is done. Then if the record in the listview matches one of the records in the table, it would turn the row black. I worked on it all afternoon and thought I had it at one point, but when I added a second record to the mold repair table, it stopped working again.

Is the repair status attached to the model or the order?
It sounds like it's against the model itself, so where is the mold_repair field in your data?

The repair status is attached to the model and there is a start and end date. The data is in a separate table right now.

So you'd need to reference that in your transformer that outputs the data for your listview.
ie something like:

d.orders.push(_.merge({
      model: p.model_name,
      being_repaired: list_of_products_being_repaired.includes(p.model_name),
      build_date: null,
      serial_no: null,
      color: null,
      add_ons: null,
      proj_date: null,
      mold_repair: null

So every entry has a boolean for "is being repaired"

you can then use this in the row colour property of the table. weird syntax though, you'll need to use current row eg:

image

Yes, I figured that out as I was waiting for a response. I'm getting a little better at this thanks in large part to your help.

Now the last piece of the puzzle is to create a way to select multiple dates at once for the mold_repair. The way it is right now, the user would need to go in and enter an "order" for each date that the mold is down for repair. I don't think they would consider that to be very efficient. :slightly_smiling_face:

I also discovered that entering it as an order adds it to the order count for the day. Any ideas on how to enter the mold_repair differently or adjust the count so those aren't added?

Is it possible to add another filter to this line let o = order_list.filter(x => x.build_date === today); that would filter out records where serial_no is blank or null?

Also, for some reason, when I enter a new order through the form I created, it is entering the record twice, once in the day I specify and once in the day after.

I'm trying to figure this out on my own.

I changed the line of code that I showed you before to let o = order_list.filter(x => x.build_date === today && x.serial_no !== ''); which worked for the order count, but now the row for mold_repair won't turn black because that record is not being included because of the filter.

This is all very frustrating.

I'd suggest keeping your data separate here.
You have products and info about them such as name, serial_number and repair status
You have orders with models, colour, addons etc

If the formatOrders transformer is producing you a list of all dates and all products and all orders, then this is the right place to add in additional information about the repair status but that's not and order and shouldn't be treated as one, imho