Column order sync across devices

[dcdspace]

Make sure these boxes are checked before submitting your issue -- thanks for reporting issues back to Parse Dashboard!

• You're running version >=2.1.4 of Parse Server.
• You've searched through existing issues. Chances are that your issue has been reported or resolved before.

Environment Setup

Dashboard running on Heroku via latest npm module

Steps to reproduce

Try re-ordering columns to your liking for a class, and then moving to a different web browser/device. You will notice that the order is not preserved.

Logs/Trace

Note: If you get a browser JS error please run npm run dev. This will provide source maps and a much more useful stack trace.

After doing some digging, I realized that the order is saved in the browser's local storage. Because of this, it is not synced across devices. I was wondering if there was a way to permanently set the order for class columns so that I do not have to reset it each time. Thanks.

[drew-gross]

As you mentioned, the order is stored in the browser's local storage. To have it sync across devices, it would need to be stored somewhere else, and I'm not sure where that would be. Storing it on parse-server doesn't make much sense, I don't think, and the dashboard doesn't have much of a concept of accounts really. I'd be happy to hear suggestions though.

[peterdotjs]

We've left the dashboard fairly lightweight and stateless and will likely keep it that way and like Drew said parse-server doesn't make sense since it shouldn't know anything about the UI. One approach could be using a dashboard preferences app to store all this information. It would be up to each dev to decide to use the preferences app but we could help shape the schema.

[dcdspace]

Thank you @drew-gross and @peterdotjs , that all makes sense. If you could point me in the right direction as to what files are responsible for reading and writing to the cache the column order, I'll take a shot at replacing the cache with a database.

A preferences app would be great though and very helpful!

[drew-gross]

src/lib/ColumnPreferences.js is the one

[sendsol]

Is there any solution for this yet?

[christianpbrink]

Also interested in this.

[JacobJT]

I'm curious as to what the "default" organization is? Does it follow the order of fields as they appear in the "_SCHEMA" class on mongo? i.e. if I had no local cache dictating this order, pulling up the dashboard for the first time in a new browser, does it match that _SCHEMA, thus editing that and clearing cache will sorta sync a new default to all browsers??

[tealshift]

I'd like to posit that the default order should follow the order that columns were added. At least then the required columns would all be on the left so for every class you will always find them instantly. I feel that will save us a decent amount of time column hunting.

This only really works if the column creation date is stored in Parse-Server though, and I don't know if that's the case.

[JacobJT]

I've found that to not be the case. I.e. I created a new class yesterday, and today someone else pulled it up on their computer, and it was jumbled with ACL / createdAt / updatedAt towards the middle. Not quite alphabetic. Have not been able to peg where the default organization comes from.

[JacobJT]

I revisited this issue and while it's not the best solution, I thought I'd share the closest thing I've found to an "organize once" method.

1. Open your dashboard [Optional: Organize classes by dragging the columns now]
2. Right click > inspect element
3. Click Console
4. Enter JSON.stringify(localStorage) and copy the value (Chrome has a copy button on the bottom right)
   5 [optional]) I used https://jsonformatter.curiousconcept.com/ to format it slightly better. You may also sort here by re-ordering the arrays in the values of this object. Less pretty, but way faster to copy / paste these than it is to drag the columns across the whole class
5. Paste into a text editor
6. Create a spreadsheet (I put mine in Drive) with at least a key and value column. I also added a class name column for more readability
7. Going through the pasted stringified value of local storage, copy all the keys for your classes (mine are formatted "ParseDashboard:v1:<app_id>:<ClassName>" and paste into your keys column of your spreadsheet. Be sure to include the quotes. Paste the value for those keys into the value column, again including the quotes. Value should be an array of objects with name and width fields.
8. When you need to use a different browser and want your sort order, open the console again, and enter localStorage.setItem(<key>,<value>), where the key/value are strings taken from your spreadsheet

Cons: Bit of a learning curve, not automatic, and you'll need to update the spreadsheet if your order changes or you add new fields (note: localStorage.getItem(<key>) after you've re-organized or added columns, and paste the new value into your spreadsheet), must set class by class

Pros: You get the hang of it pretty quick, and once it's set up, it takes seconds to re-organize your dashboard instead of what could take 30+ mins for a large class. You could also easily switch between different organization orders. I.e. my standard organization groups related fields in a logical order. But sometimes I'm doing a task where it's beneficial to have a few pieces of info from different groupings all at the front of the class, so as I'm clicking into pointers, I'm not scrolling back and forth or relying on cmd + f to find the data I'm looking at. It's easy to switch to one of these oft used organizations, and just as easy to switch back when I'm done.

Seems very roundabout, but can save hours, or just lots fo stress of sifting through an un-organized dashboard, the latter of which I ended up resigning myself to after the half dozen times of re-organizing everything.