Contacts: Show fields for phone, email, address and groups by default for new contact

[jancborchardt]

When pressing the »New contact« button, you are faced with only the header for picture and name, as wel as the groups dropdown.

Phone, email and address should be displayed for any new contact. It was like that before too.

[xh3n1]

The problem with adding the 3 props tel email and adr to the template is that after they are created in the controller they do not have a $$hashKey. I tried multiple things, such as adding track by value option to the foreach loop but no good because it said it contained dupes. Therefore, I'm stuck atm and don't know how to proceed. Any advice would be appreciated.

[MorrisJobke]

The problem with adding the 3 props tel email and adr to the template is that after they are created in the controller they do not have a $$hashKey. I tried multiple things, such as adding track by value option to the foreach loop but no good because it said it contained dupes. Therefore, I'm stuck atm and don't know how to proceed. Any advice would be appreciated.

@xh3n1 Do you have the code change available somewhere? Then I can have a look. Angular is sometimes a bit tricky to tame 😉

cc @georgehrke

[xh3n1]

@MorrisJobke There is no code change. The issue is that when the 3 properties are added on line 11 in newContactButton_controller.js file, the created objects do not have a hashkey and therefore the template is not updated. What do you suggest?

[georgehrke]

For reference: https://github.com/nextcloud/contacts/blob/master/js/components/newContactButton/newContactButton_controller.js#L11

[xh3n1]

hey @MorrisJobke, I just did a little test by adding $$hashKey property to the created tel object/prop and to the value level. It was still unresponsive, meaning it did not update the template accordingly. What I also suspect now is that the contact object on line 11 mentioned above is not the same with contact object being displayed in the template. Could you look into my assumptions? cc @nickvergessen Thank you!

[xh3n1]

cc @Henni @skjnldsv @irgendwie

[georgehrke]

This is no angular issue, but simply a bug introduced by https://github.com/nextcloud/contacts/commit/028df62242f9756c043af4faaff0f4359baaf892

The contact object is created in this function, created on the server and stored in the cache:
https://github.com/nextcloud/contacts/blob/c506cd69e25325cc11d77b2da163e8a655af9734/js/services/contact_service.js#L161
Let's call it contact1.

The four properties are added here, but the contact is not being updated on the server.
https://github.com/nextcloud/contacts/blob/c506cd69e25325cc11d77b2da163e8a655af9734/js/components/newContactButton/newContactButton_controller.js#L10
Let's call it contact2.

contact1 === contact2

The detail view is loaded here:
https://github.com/nextcloud/contacts/blob/c506cd69e25325cc11d77b2da163e8a655af9734/js/components/contactDetails/contactDetails_controller.js#L52

It catches the contact from the Contactservice here:
https://github.com/nextcloud/contacts/blob/c506cd69e25325cc11d77b2da163e8a655af9734/js/services/contact_service.js#L136

As a first step, it catches the contact object from the cache. let's call that contact3.
contact1 === contact2 === contact3

but then it queries the server for the latest contact:
https://github.com/nextcloud/contacts/blob/c506cd69e25325cc11d77b2da163e8a655af9734/js/services/contact_service.js#L146L158

A new contact object (contact4) is created here based on the latest server data:
https://github.com/nextcloud/contacts/blob/c506cd69e25325cc11d77b2da163e8a655af9734/js/services/contact_service.js#L152
We didn't update the contact on the server when we added the four properties, hence these changes are lost now.

Now we have contact1 === contact2 === contact3 !== contact4

[skjnldsv]

I think we also have a duplicate focus on the name field
https://github.com/nextcloud/contacts/blob/master/js/components/newContactButton/newContactButton_controller.js#L20
https://github.com/nextcloud/contacts/blob/master/js/services/contact_service.js#L187

[skjnldsv]

Manually trigger a server update after adding the properties might help indeed.
But since we're creating a new card, the proper way should be NOT to query the server and keep the freshly created contact in the browser cache until the user edit the card.

[rutujasurve94]

I would like to take this bug up as a part of beginner level bug for Rails Girls Summer of Code 2018

[MorrisJobke]

@rutujasurve94 Nice :) Could we somehow help you? I'm not 100% familiar with contacts but maybe @skjnldsv @xh3n1 or @jonatoni could help out? Or @Henni / @irgendwie

[rutujasurve94]

Hi! @MorrisJobke Sure, some pointers wrt the code base would be great to proceed with the fix.

[MorrisJobke]

Copy from IRC:

on mac the dev setup is a bit harder, but basically it should be this here: https://pad.morrisjobke.de/p/osx-dev

you need a web server that runs the nextcloud server itself first

most of our devs go a different way and use a virtual machine to run linux (because officially macOS is not supported, but it works for most cases)

it's up to you which way you want to go

the VM approach is basically: follow the admin manual to setup the linux server and then mount the folder from you host to the guest machine to be able to use the macOS editors to edit the files

and then you need to build the contacts app

for the contacts app you clone the contacts repo into the app/ folder of your nextcloud server

then you open this contacts app folder and run "make" one time (this fetches all the dependencies and creates the compiled assets)

then you could run "make watch" to run a watch service so that you can edit files and the assets are build automatically

just ask here if you need further details

[rutujasurve94]

I followed the steps, installed php7, changed the conf in apache2.conf and git cloned next cloud server, ran the init command, cloned the contacts repo in the apps folder and tried running make
this is the error I get with make: apps rsurve$ cd contacts/
Rutujas-MacBook-Pro:contacts rsurve$ make
make npm
npm run build
make[1]: npm: No such file or directory
make[1]: * [npm] Error 1
make: * [build] Error 2

[MorrisJobke]

You are missing the npm command - have a look at https://docs.npmjs.com/getting-started/installing-node for install instructions.

[rutujasurve94]

@MorrisJobke @jancborchardt @skjnldsv I've been able to successfully build the contacts app on my Mac with the guidelines suggested above. I read the thread above, we want to ensure that contact3 (freshly created contact) is used when the user tries to edit. When the 3 new properties wrt address, etc. are added in newContactButton_controller.js, they don't get updated at server side where the contact object is actually created in contact_service.js right? When contactDetails_controller.js tries to get contact details from contacts/js/services/contact_service.js (Line 136) which is contact3, and when we say contact1 === contact2 === contact3, does it mean that all these are the latest updated contact object with the three new fields? contact_service.js has the latest updated contact object till here. But contact4 formed from querying the server: DavClient.getContacts(addressBook, {}, [ contact.data.url ]).then(
function (vcards) { return new Contact(addressBook, vcards[0]); }
needs to be removed and we need to do contacts.put(contact.uid(), contact); of the contact fetched in line 136?
Could you please review my approach and correct me if my understanding of this is wrong somewhere?

[MorrisJobke]

hey don't get updated at server side where the contact object is actually created in contact_service.js right?

On the server side we use the CardDav backend that is located in the server repo and written in PHP. That means all the JS code is executed on the client side. Sadly I'm not that familiar with the contacts app. Maybe @xh3n1 or @jonatoni can judge a bit better. 🙄

[rutujasurve94]

@MorrisJobke sure, thanks a lot

[suntala]

@MorrisJobke thank you for creating a guide to setup Nextcloud on a mac. Finding my VM painfully slow, I decided to give it a try. I followed the instructions on https://pad.morrisjobke.de/p/osx-dev, but I am still being told to update my PHP version.

I wasn’t sure what this line in your instructions was saying and so I ignored it: Option 1: put nextcloud in a subdir of your 
Could that be the reason why my setup isn’t working?

[MorrisJobke]

@suntala The guide installs PHP 5.6 and 7. just run the unlink command for 5.6 and link 7.0. then the correct version should be available

[MorrisJobke]

And yes you need to put the Nextcloud in a folder that is served by Apache

[suntala]

@MorrisJobke thanks for the info. I already did the unlinking and linking. And as for the second point, I assume you mean the instructions that begin with # Set your document root DocumentRoot "/Users/yourmacusernamehere/Projects/nextcloud/", which I also implemented.

[MorrisJobke]

@MorrisJobke thanks for the info. I already did the unlinking and linking. And as for the second point, I assume you mean the instructions that begin with # Set your document root DocumentRoot "/Users/yourmacusernamehere/Projects/nextcloud/", which I also implemented.

Mmmh ... I don't understand fully. Could you rephrase it maybe?

[suntala]

@MorrisJobke Thanks for getting back to me. I have everything running properly now :)

[suntala]

Hi @rutujasurve94, I'm interested in working on this issue and was wondering if you are still working on it.

[joe-pirat]

please fix the bug, it makes the experience of nextcloud very unpleasant