Repository

https://github.com/mcfarhat/actifit-landingpage

Pull Request

https://github.com/mcfarhat/actifit-landingpage/pull/10

It is now possible to edit your own activity reports on the Actifit website.
If you log in to the website via SteemConnect you can access your activity reports via the menu in the top right corner.

The post cards now have an edit link in the bottom right corner.

This link will open a new modal where you can edit your post.

Implementation

I started with just the basic functionality, which is populating some text fields with the post's data and then updating it via SteemConnect.

The click on the edit button of a post, stores this post in the vuex store's editReport property and opens the new edit modal component.

This component gets the selected post from the store and uses it to fill the form with data. This happens in a watcher so that whenever the editReport property changes, the form gets updated.

The save method then triggers a loading animation and updates the post via SteemConnect. (See https://github.com/mktcode/vue-steemconnect for a very easy way to integrate SteemConnect in your Vue.js project!)

In the end the post needs to be updated in the vuex store (via this store action) to show the changes on the page.

Markdown Editor

https://github.com/mcfarhat/actifit-landingpage/pull/10/commits/dbaa64f4263e7b51a6c213d616cf40bb8c024fbc

To have a more convenient editor I used a Vue.js implementation of Simplemde. To avoid some issues with Nuxt's server side rendering, I implemented this as a plugin and configured it to not be rendered on the server.

This makes this component globally available and you can use the editor by simply using the <markdown-editor> tag.

In the editor's configuration I used a custom callback for the preview, so that usernames (starting with @) get converted to links.

Tag Input

https://github.com/mcfarhat/actifit-landingpage/pull/10/commits/7ffdb010a4c0398d8d6d96a0798e38b5104718f1

For the tag input I used matiastucci/vue-input-tag, a very easy to use Vue.js component.
With this component you just need to import it and then you can use this <tag-input> tag and bind it to an array of tags in your data.
With some additional styling you then have a nice and convenient tag input.

Small Bugfix

https://github.com/mcfarhat/actifit-landingpage/pull/10/commits/83b03fe5dd6a22c689c38621790db79aee7e0c2f

There was some unintended behavior that removed the first post of a user.
When you fetch posts via steem-js and you use the start_author and start_permlink parameters, the first post that is returned is actually that start post. But since this is also the last post of the result set that you already fetched before, you don't want that to be included in those new posts. But actually I forgot to disable this behavior on the first fetch, because then of course you want all the posts.

TODO

Currently the editor does not support image uploads. I don't know if and when I will find the time to do that.

That's it!