This is a meta-issue for submitting and discussing UI mockups for the grid interface for editing Case Tracker nodes.

Questions to be settled:

* What fields are needed?
* Should we use tabledrag.js for priorities?
* Should we have drop-downs for assigning users to individual case nodes?
* What kind of interface for editing project categories?
* What should it look like generally?

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

EvanDonovan’s picture

Attached is a first draft mockup of the UI that I propose. I created it with Skitch, a very useful design and screen capture tool for Mac available at skitch.com.

Since the Drupal.org upload form doesn't currently allow Skitch files or SVG's, here are the links to the Skitch & SVG files on Skitch.com, so they can be downloaded and edited by anyone who has interest:

SVG: http://skitch.com/evandonovan/n74gt/case-tracker-timeline-grid-ui-1
Skitch: http://skitch.com/evandonovan/n74f5/case-tracker-timeline-grid-ui-1

Any questions, we can discuss below.

EvanDonovan’s picture

Apparently, you can't include images directly in issue comments, or at least I can't. I'll let you take a look at the mockup I attached and give your comments based on that.

EvanDonovan’s picture

Case Tracker Timeline Grid UI

auzigog’s picture

Mockup looks good. As far as my GSoC proposal, that's not what I was thinking. I'm hoping we can come up with an approach that would allow for a module that would accommodate both cases (assuming that making it more abstract doesn't make it too much harder to use).

Few questions:
* How is that mockup that different than the typical task listing? It doesn't really seem like something all that different to me. What do you feel the main benefit is?
* What would the dragging do? I see yours changes the priority. What if the user didn't want the sort order to be by priority? What if they wanted to sort by date? Would dragging do anything?
* Do the dropdowns at the top of the columns act as filters?

auzigog’s picture

Here is what I was thinking in terms of the timeline.

Key features
* Adding a new task would be as simple as clicking in a blank space in one of the cells (kind of like google calendar)
* Viewing a task would be a popup (similar to google calendar) (see image 2)
* Editing a task would allow you to see a handful of fiends (see image 2)

Rows: "realms" of a project. Category, etc.
Columns: Time. Could be by week, day or month.
Cells: List of task titles

UPDATE:
Dragging would move the realm/week of the project.

Question: Would tabledrag.js actually work for this?

EvanDonovan’s picture

Feedback on comment #4:

I was trying in this mockup primarily to illustrate what we currently do in Google Docs, and how it could be enhanced, I think, if it were in Drupal.

Of course, a static mockup can't illustrate all the possible interactions. I'll try to answer your questions in more detail in the next few days. First, I am going to download the Case Tracker module by itself and see how different it is, since I've only seen how it worked in Open Atrium. Perhaps it can actually get fairly close to my proposed wireframe already. If so, I'd be interested to see anything you would propose.

I think that, in my case, the dragging would only change priority, using a kind of "weighted" priority system. I don't think that you could use the drag JS to change date on tasks because you wouldn't be able to set the specific dates for the tasks.

The dropdowns would be filters, as on VBO views. They would primarily be for use with the draggable feature (in fact, it might not make sense to enable draggable, unless the view was filtered down to a specific individual), and also for use with the checkboxes to delete tasks.

The add new button would add a new row - a new task that could be populated with data & then saved.

Basically I see this as a combination between a VBO view, a Draggable Views view, and some inline editing JS.

EvanDonovan’s picture

Feedback on comment #5:

This makes a lot of sense, and is definitely a timeline. I guess I was thinking that timeline was for display and grid was for editing. At least for our organization that would make more sense. I wonder if it would be possible to have both a timeline & grid view, and to have both be editable?

basvredeling’s picture

Are you also implementing gantt charts?

auzigog’s picture

The incarnation that I am imagining isn't actually in gantt format. I'm aiming to create something that is intuitive to non-developers. Although gantt certainly can be used by non-programmers, I get the sense that is where it is used most often.

There is some old code around for creating a gantt chart for OG: http://drupal.org/node/226598

EvanDonovan’s picture

auzigog: So basically, you're thinking of something between the complexity of a GANTT chart and the basic grid interface that I described?

auzigog’s picture

EvanDonovan: Yeah, basically. What do you think about that? I can see how it fits my use case, but I'd much rather create something that roughly fits mine but is usable by a wide audience. Do you think that halfway point makes it usable by more people or makes it unattractive to both ends of the spectrum?

EvanDonovan’s picture

Not really sure. I think we should try to find out people who use Drupal for nonprofits, or for just general project management, and see what their workflows are like.

Bucketworks’s picture

Speaking as a nonprofit that uses Drupal for Project Management (actually we use OpenAtrium and it is great) we have been looking at creating this exact view, with easy editing. The key drivers are:
Rapid data entry of cases (because we are truly living in Casetracker--everything we need to do, or get done, is recorded there)
Rapid viewing/sorting of case information in aggregate
Displaying projects and cases in a summary tabular view
Editing individual attributes of a case in grid view
Essentially, just what you've been talking about!

See the attached for a mockup of a multiple-case entry form--I know it's not quite what you're talking about here, but something that might be useful. I'd be happy to provide any other feedback or assistance required--and Evan, look out for an email from Kevin C about working with you as part of your Google Summer of Code project!

EvanDonovan’s picture

@Bucketworks: Thanks for the feedback. auzigog is the one who is the GSoC participant, though. I just happened to have the CVS access to start the project :)

I like your mockup also. I'm going to try to download the new version of Case Tracker (2.0) soon, to see what is available.

Essentially, what I think my organization would want would be something that would allow for quick entry, like a spreadsheet does, but also have tasks as individual notes so they can have attachments, followups, etc.

We'll see what auzigog, you, and I can decide upon as a direction for development, although I believe the project proposal has yet to be officially approved.

EvanDonovan’s picture

auzigog: Did your GSoC application get accepted? Do you still plan to work on this project?

If not, I may start development on it, focusing on the features from the mockups in #3 & #13. But I probably won't start until mid-June at the earliest.

Let me know your plans.

EvanDonovan’s picture

So this (http://activismlabs.org/2010/04/27/activism-labs-proposal-accepted-to-gs...) indicates your proposal was accepted. Is this project still part of the workplan for it? I'll let you decide what direction you want to take the code, if so.

(I still have to test the 2.0 version of CaseTracker.)

auzigog’s picture

@EvanDonovan, Sorry for forgetting to keep track of this this thread! Yeah, the proposal was accepted (YAY!) and yes, I am still planning to do development on this module in a manner somewhat similar to the screenshot I proposed.

If you want to make a separate module, that might make sense. That said, I think there will be a lot of overlap in the way we approach our goals. Is there any planning we could do now so we don't duplicate each other's work?

@Bucketworks: Thanks for all the support those far in this thread and elsewhere. I like your mockup. I think it might be something I tack onto my exiting project goals.

Also, I've centralized all resources related to the project here: Grassroots project management tools.

Also, I have all of my user stories here: Project Tracker - Activism Labs

I think this thread is a good place to continue related discussions.

Grim.miles’s picture

FileSize
25.1 KB

This is similar to what the dashboard function provided in the 5.x version. We've been using it quite awhile for managing cases (i.e., projects, tasks, tickets) In our example, the departments we service are our "projects" and we categorize all of the work we do for them within those projects. I've included a sample of the summary we created using the dashboard functionality from the previous version. At this point, that functionality is not present any longer in 6.x however, do you think this timeline grid interface might be a good way to develop our summary report in the new environment? The lack of this kind of dashboard in Open Atrium seems to be a limitation, too.

auzigog’s picture

@grim.miles I don't think that kind of dashboard would be the primary functionality of casetracker_timeline, but it might be something we build in to one of the tools being created over at http://activismlabs.org ... I definitely see the benefit there.

auzigog’s picture

@EvanDonovan - I just found the feature you are looking for in Google Spreadsheets. If you click on "new version" in the top right, you can now drag and drop single rows. I know you'd probably rather have it in Drupal, but I wanted to let you know it exists. Yay!

EvanDonovan’s picture

@auzigog: Actually, I am happier with Google Spreadsheets than I used to be. I think that focusing on the timeline functionality will be the best way forward. So we are on the same page, and I look forward to any new mockups you have.

Dane Powell’s picture

I would love to implement this kind of functionality with my Gantt chart View. It might make sense to work together on some sort of underlying API or backend to allow for that, although I haven't researched what's already out there (tabledrag.js, etc...)

EvanDonovan’s picture

I just reviewed this thread again. Looks like there are as many UI proposals as there are ways of doing project management.

@Dane Powell, I think that your idea of creating an underlying API sounds promising, although I'm not sure what this module would add that your Gantt chart view module doesn't already do. I will have to test it sometime.

@auzigog, looks like GSoC is over, and you made major strides in some other areas (http://activismlabs.org/2010/08/31/google-summer-of-code-2010-reflection/), which is great. I see that some sort of timeline is still on your long-term roadmap, though - https://docs.google.com/document/edit?id=1ddV_zHdgAU30ILeStikRQWbLY-lZcE....

Do you still want to control the direction of this project (which still doesn't have any code)? I've learned how to love Google Spreadsheets for task management at my organization, so I won't really have time to move forward with this, at least not at any time in the near future.

Alternatively, if anyone else wants to suggest a detailed proposal of what they want to implement in this area, I will support them in their CVS application so that they can go ahead and gain commit access to the project.

I'm changing status of the project to "seeking co-maintainer" accordingly.

auzigog’s picture

I definitely do want to work create some form of timeline module eventually. I'm not sure when that will happen though. And I'm also less confident that it will be based on casetracker.

I am happy to pass this project namespace onto someone else if they're interested in taking it on.

Dane Powell’s picture

@Evan, I'm thinking mostly in terms of a backend to allow editing of nodes via a faster and more intuitive interface than by the traditional "View - Edit - Save" manner. I think if Drupal has any weakness in the "Web 2.0" arena, this is it - it can't offer or compete with the whiz-bang (and very useful) interfaces that people have come to expect from sites like Google Calendar/Gmail, Remember the Milk, Facebook etc... For instance, my Gantt chart plug-in is a great way to visualize data, but what if instead of just visualizing it, you could actually drag and drop tasks (cases) to adjust due dates and parent projects, while intelligently handling dependencies, etc...? This is something that I could program in myself, but it would be a heck of a lot easier if there were some sort of backend (think an extended version of tabledrag.js) to allow for this.

Sorry for my mini-rant... I guess I'm just saying that there seems to be an underlying problem here that I'd love to see addressed to help improve Drupal's usability and marketshare.

EvanDonovan’s picture

@Dane Powell: Do you want to take this over? I originally created it for auzigog, but he didn't have the time to include it in his finished project for GSoC, so now I'm looking to handle this off to someone else. You seem to have a good idea for where to take it.

Dane Powell’s picture

I'd love to, but I don't have the time at the moment, or in the foreseeable future- sorry.

EvanDonovan’s picture

No worries. Just trying to clean up my own list of modules, so I can focus on the ones I have resources to develop. We'll just let this sit for now.

colorado’s picture