Implement preview table during CSV upload
Closed this issue · 5 comments
The intent is to have a mini table view (similar, but not identical to, the existing table view component) that appears in the upload dialog after selecting a file, at the point that the column type dropdowns currently appear. An example of this feature in @kirangadhave's UpSet work can be used for inspiration (but, of course, keeping the style and feel of the component to what is appropriate for Multinet):
Specific features for our iteration of this:
- condensed so that it feels right inside a modal dialog
- includes the existing
<v-select>s for type selection into the header of the table
@jtomeck, could you start by creating a mockup of this in Figma (or wherever is most comfortable for you)?
UPDATE: Jared has done a mockup which we can use as a guide for implementation:
https://www.figma.com/file/GSRmOdOi49FDEkazoQXtyv/Dropdowns-in-table?node-id=0%3A1
@waxlamp - I know I mentioned doing something like what we have on VIIME, but I decided against it because it doesn't use less screen real estate and requires you to do extra work to figure out what each column is set as. If you want me to elaborate further I can, but I decided to just spruce up what you had in the screenshot above, because often the simplest solution is the best one. This way you can see what each of the columns is set at on the top level without having to dig into the UI or make extra clicks to do this simple action.
I love this design! Looks great :) I would just suggest that we change the step one from "upload dataset" to "select dataset" or something similar so users don't think the dataset has been uploaded before the types are set
I really like it. I second Jack's comment about using "select dataset" as the phrase for step 1.
I left a comment in the Figma mockup, but I don't get what that little 2 in the circle is supposed to be. Is that counting the step you're on?
Related question: what Vuetify component would this use? Is it a "wizard"?
but I don't get what that little
2in the circle is supposed to be.
Related question: what Vuetify component would this use? Is it a "wizard"?
This would be a stepper, which is what was in your original screenshot as well. So it would be 1, 2, and 3 in the 3 circles. I had the flag there like a "finish" flag in a race. Honestly, I could do with or without that, as it was just me trying to be creative as a designer, potentially unnecessarily lol.