Creating ProjectTeam plugin for TeamScreen

Creating ProjectTeam plugin for TeamScreen

As I mentioned in the first post of this series, when you are going through IT company, TV screens with a list of running/failing builds aren’t an uncommon thing. Depending on the size of the company you can pass many of them, but all you see it’s just a set of different words, you have not a clue what actually means. You pass these people every day and very often all you know about them are just those build names. That’s why one of the first ideas for TeamScreen plugin was to create a ProjectTeam plugin when you could learn more about project and people involved in it.

Creating plugin was described in the previous posts in this series, so I won’t repeat here myself. Let’s instead think what kind of information we want to display. I wanted to show project name and description, a list of people involved in the project with their photos and list of technologies used in it. Apart from the list of people with photos, all other information will be set in settings screen similar to previous plugins. When it comes to the list of people – it’s time to turn on authentication mechanism. First I merged two Entity Framework context that I had to create a new one:

We will need a full person’s name and his/her photo so we need to add two additional properties to user entity:

After recreating DB with the new schema, I altered Manage and Account controllers and views and set up links to them in the application. Also by decorating SettingsController with [Authorize] attribute, I restricted access to settings only to registered users. The hardest part of developing ProjectTeam plugin was to actually give user ability to upload the photo, store it in DB and then display it on the page. To do that I created a new page when the user can upload his/her photo:

I created standard HTML form with an input of type file and submit button. This page is accessible through ManageController:

GET returns previously presented page, whereas POST uses special class IFormFile to copy content to temporary MemoryStream and then get currently logged user and update his/her photo in DB. To display the photo of the given user on a page I use this statement:

The actual photo comes from PhotoController:

PhotoController returns a photo of the user with given email or in case if the user is not registered in the application or doesn’t provide photo returns a fallback picture.

With all plugin/settings/identity/photos on the place I created this view:

With that, we have another plugin for TeamScreen. Full source code is available on GitHub. Thanks for reading and see you next time!

One thought on “Creating ProjectTeam plugin for TeamScreen

  1. Pingback:

Leave a Reply

Your email address will not be published. Required fields are marked *