Add mobile number and means of transportation to user profile

[djahnie]

Feedback from Fürth:

In storeview and groupview not only the names of foodsavers who signed up for a pick-up should be displayed but also additional info like mobile numbers and means of transportation.

This would require the possibility for users to enter these kinds of information on their profiles, so that it can be displayed in a dropdown menu (for example) in every pick-up they signed up for.

[tiltec]

This touches data privacy. Users should be aware that they will share this information with other group members.

See #428 for a related issue

[Sliverriver]

which can be covered by the data privacy poilcy which should describe what data is stored and who has access to it and why. #607

[nicksellen]

At the moment it's hard to understand much about a user, unless you already know them personally.

Some ideas:

• add an alert to top of page until user has filled out some details (currently only description is available?)
• add more fields (e.g. mobile number, means of transportation, ...etc, maybe look at foodsharing/trustroots or other sites for inspiration)

[tiltec]

• open a chat/conversation for people who will do the pickup together. can display more detailed user information in there -> more discussion here Add conversations to individual pickups #677

[tiltec]

Mobile phone number should be ready for implementation:

• Add a field that can contain "mobile phone number" to the user model in karrot-backend
• Add this field to the profile edit form
• Show field in relevant places, e.g. user profile

While "means of transportation" needs a bit more thought in my eyes. It could be nice to show symbols next to the user who signed up for a pickup (bike, trailer, car...) and optionally also a text comment. Right now, we only show the user photo.

[swekshajha12]

Hey, can me and my teammate @DevipriyaSarkar pick it up for getting started with RGSoC?

[tiltec]

Yes! Don't hesitate to ask if you have questions!
I recommend to start with the backend implementation, especially the model and the serializer.

[DevipriyaSarkar]

Hey @tiltec @nicksellen , can I use django-phonenumber-field as the model field for the phone number field?

[tiltec]

Hi @DevipriyaSarkar, yes please try it out. From what I read, it takes care of proper formatting.

I have two questions to it:

• how does it handle national numbers? I think most karrot users won't enter an international prefix.
• will it reject invalid phone numbers? It could make sense if the karrot app offers a direct "call this user" functionality, but on the other hand it would add a burden when it doesn't recognize a valid number.

[DevipriyaSarkar]

Hey @tiltec , so I tested the following on a sample Django application:

• For handling national numbers, you can set a PHONENUMBER_DEFAULT_REGION on the settings. The value of which is a string containing an ISO-3166-1 two-letter country code (Link). So, if the default region is USA, we could set PHONENUMBER_DEFAULT_REGION = 'US' in settings.py , and then the USA phone numbers will not need an international prefix.
• In brief, yes. It will act as a form field validation for phone numbers.
  But the library is an interface to a port of Google's libphonenumber library, which powers Android's phone number handling. So I think chances of not recognizing valid phone numbers are slim.

Link to give you an idea of the underlying PhoneNumber object.

Anyway, I just wanted to confirm whether our use case needs the validation overhead. What do you think?

[tiltec]

Thanks for the writeup! I'd be happy if you go without validation, I guess we don't need the overhead (yet). A CharField should be fine :)

[DevipriyaSarkar]

Cool. :) I had a few questions:

• what will be the max length of the CharField ?
• will phone number be a required field (model.CharField(null=True))? Or an optional field (model.CharField(blank=True, null=True))?
• what's the default (national) region for karrot? (Just curious)

[djahnie]

I'll try to answer your questions, @DevipriyaSarkar:

• Since it's only supposed to hold a phone number 20 characters should be enough.
• Optional, I'd say. If people want to work together effectively they will enter it voluntarily, which is always better than forcing them to do stuff.
• There is none. Every group can set a location and timezone, but they don't have to. Would be cool though, if the phone number's default region was the one specified in the group settings... 😉 (But that would only be a gimmick and is definitely not necessary at this point.)

[tiltec]

Ah thanks @djahnie, although I have some additions:

• I wouldn't restrict phone numbers too much for now, so the CharField default of 255 characters should be good to prevent abuse.
• I'd set blank=True to have an optional field, setting null=True on CharField is not recommended: https://docs.djangoproject.com/en/2.0/ref/models/fields/#null

[DevipriyaSarkar]

Thanks @djahnie and @tiltec.

@tiltec, since our db already exists, while migration, either we have to add a new field with null=True or have to give default value for the new field right?

[tiltec]

@DevipriyaSarkar, I think Django sets the default implicitly to '' if blank=True. If that doesn't work, you can provide a one-time default when running makemigrations.

[tiltec]

Backend has been added by @DevipriyaSarkar, now the frontend needs to be done. Would you @DevipriyaSarkar be interested in it as well?

[swekshajha12]

Yes, we are working on it now.

[DevipriyaSarkar]

@tiltec we are new to vue.js, so it's taking a bit of time to figure it out. We are on it :)

[tiltec]

Great! Please ask questions if you have any, we try to come up with answers.

https://github.com/vuejs/vue-devtools are quite helpful for local frontend development, they let you analyze the website quite much :)

[tiltec]

Phone number field is merged to master and should be visible on dev.karrot.world soon.

That doesn't yet fulfill the original requirement: "In storeview and groupview not only the names of foodsavers who signed up for a pick-up should be displayed but also additional info like mobile numbers and means of transportation."

I wonder how it could be managed from a design perspective. The alternative would be to have a separate page for each pickup with the details. A modal could also make sense. Related is also #677

[swekshajha12]

So, shall we use a modal?

[tiltec]

I'm not sure. I don't like modals very much, because can't be easily routed to and the user can't interact with other elements on the website while a modal is open.
Another option would be to make a pickup "collapsible", hiding the extended information by default until somebody clicks on a small arrow button. The extended information could be shown by default to the people who signed up for the pickup.
@D0nPiano what would your preference be?

[swekshajha12]

Hey! Can you update us on how shall we proceed? :)

[tiltec]

I'd love to :) I guess it's a bit design-heavy though.. would you feel comfortable trying out different designs as mock-ups (doesn't need to functional) and post the pictures here?
Or would you be more interested in implementing a well-described feature?

[D0nPiano]

Sorry, forgot to answer earlier. I like the idea of @tiltec to be able to collapse the pickup and expand it by default if you are one of the people who signed up for it - This is especially nicer for the desktop version and shouldn't be too hard to implement since we already have the animation set up (in sidenav boxes or the empty pickups on the group wall). If you run into trouble design wise, let me know.

[swekshajha12]

Hey, Thanks! We'd work on the collapsible design then? Also we might work a little slow because we are having internal exams this coming week and gets over by 15. Is that fine?

[tiltec]

Sure, no worries. All the best for your exams!

[swekshajha12]

The means_of_transport field should be added to groups model or pickups model? A little confusion here. We have this doubt because user can go for different pickups using different vehicles right? So it didn't seem like a field to be added to user model.

[tiltec]

I'm also not sure about the means of transportation field. As you said, it can be different for each pickup, therefore it would be wrong to make it a field on the user model.

On the other hand, if it's a field on the pickup collector relation, then the user would have to enter it every time when they join a pickup (and probably need to make it editable too without leaving the pickup again).

As variation to the latter idea, we could have some values predefined (e.g. show icons with "walking", "trolley", "bike", "bike+trailer", "car", "van") that the user can simply select instead of typing words. Seems a bit more complex design-wise, but could offer much better user experience. If we go for this, we should also decide if we want to still allow custom text.

Slightly related: the idea of adding conversations to individual pickups #677

All in all, I think we should discuss the idea a bit more...

---

By the way, are you still up for working on the collapsible pickup design to show phone numbers of the participants?

Related to that, I had the idea of adding a "profile preview" function, similar to the one in Slack. It would help to get the most important information about another user without leaving the page.
This might be implemented instead of the collapsible pickup design and could be a better solution.

[swekshajha12]

Yes, we are up for the collapsible design, thought mean_of_transport was to be done first but since it requires more discussion, we'll do the collapsible thing first.
Regarding that, are you saying we should implement the profile preview feature instead of the collapsible design for phone numbers?

[tiltec]

Yes, having a profile preview feature seems more useful to me than having collapsible pickups. A simple preview could show these things:

• bigger profile picture
• full name
• phone number
• link to profile

In future, it can be extended with more actions, e.g. "message this user".

Maybe the popover component is suitable for this? http://v0-14.quasar-framework.org/components/popover.html

[djahnie]

This seems kind of stuck. Does anybody have more input, thoughts and ideas for this? Would be nice to see it progressing further! 🙂

(I will also add some more thoughts to this, promise!)

[tiltec]

We now have pickup conversations and user conversations which are presented in a "detail" sidebar. This issue seems to be lower priority because people can talk about this in a pickup conversation.

At some point, it could be good to add more information to the pickup detail sidebar, e.g. the means of transport. It should be stored per pickup per user, perhaps with some predefined choices.

[tiltec]

We should probably open a new issue summarizing the things that should be worked on, and then close this one.

[djahnie]

The mobile number field is implemented and the number of comments on this issue is pretty intimidating. If there is still a need for the means of transportation field, a new issue should be opened.