Fix and improve dashboard repo UI

[Morlinest]

This commit contains one fix and few UI improvements:

1. (Fix) Do not show Vue template data, show spinner instead
2. Add search icon to input and show spinner/loader while loading data from server
3. Resolve race condition in search ajax callback (just simple check)
4. Add total count to repo search api (api/v1/repos/search) - new header X-Total-Count
5. Move search input and add filter for repositories - All, Sources, Forks and Collaborative
6. Add search limit to query (default value in meta tag _search_limit, filled by server)

Screenshots and animated gifs are in #2278 (scroll down; showing max 10 repos, this commit version is with default filled by server = 15).

First time working with Vue + new to Semantic UI so any advice is welcome.

[lunny]

Also fix #2114 and replace #2205

[lafriks]

@lunny I think it does not fixes nor replaces your mentioned issue/PR it just improves Dashboard UI

[Morlinest]

Maybe merge #2205 first, I'll rebase and check with my code? There are some improvements in #2205, also some unused code is removed (that is why i didnt remove anything).

[lunny]

@lafriks Yes, you are right. We need merge #2205 at first.

[Morlinest]

What do you think about Vue components? I've created search-repo component (with x-template) and then used inside Vue. There is no need for v-cloak and v-show and isMounted variable. It can be also reused later, on other pages (just example). For future improvements, I think we can create folder with vue components (x-templates) that can be generated/filled by server and just add to pages where we need them.

[andreynering]

let -> var to not break on older browsers, since this is not being preprocessed.

[andreynering]

LGTM

[Morlinest]

Changed to Vue component. What about full client rendering of component? That means no mirrors or organizations rendering on server, remains only localization.

Next posible upgrades (of this PR):

1. Full client rendering of component (except localization) - preparation for future pure independent component (so it can be cached as js, bundled, etc)
2. Change concrete #dashboard-repo-search to universal #app - init Vue on any page, where we will need it, just add id="#app" to element (do not need new Vue on each page or for each new feature, every feature should be added as component)

Edit: Changes will be added in future PR(s), not this one.

[andreynering]

@Morlinest I think these changes should be made in future PRs. We prefer small PRs when possible.

[Morlinest]

@andreynering OK, I'll create new branch(es) and send new PR(s) :)

[Morlinest]

@lunny @andreynering Should not be "mirror" tab removed? I've just created mirror and they are also shown in "My Repositories" tab. I can only add new filter. Or you want to have them on both tabs (Mirrors filter can be added anyway)?

[lunny]

@Morlinest I agree to add a mirrors filter and remove the tab mirror. @andreynering any idea?

[andreynering]

@lunny @Morlinest 👍 I agree with that.

[Morlinest]

@lunny @andreynering Great, it is done (few hours ago :D, will update PR tomorrow). But this creates new question :). Now there is only 1 or 2 tabs (1 for "org user", 2 for "normal user"). What about this? I see two options:

1. Hide tabs panel when showing "org user", show 2 tabs when showing "normal user"
2. Dont show any tab, instead show 1 panel for "org user" and always show both 2 panels for "normal user"

[Morlinest]

After adding mirrors filter and removing mirror tab:

1. Normal user
   

2. Org user
   

[daviian]

At first I want to thank you all for you hard and great work!
Just switched to gitea some days ago and I think it is time to start contributing, but I have to get into golang before ;-)

In my opinion the tab panel for the org user is redundant and should be removed.
It is totally clear that the box below is about a users repositories as the header states "My Repositories".

[Morlinest]

@daviian Thanks (from all). I agree with you that solo tab panel for "org user" is redundant. Another question is, what to for "normal user" page - show 2 tabs or show 2 panels (one above other).

[daviian]

@Morlinest I think there should be 2 panels. The collaborative repositories panel is gone. So why not use this freed space. And because of the pagination in the repositories panel they shouldn't take too much vertical space anyway.

[Morlinest]

OK, I've done some practical tests... If you have only few orgs, its no problem to have 2 panels visible at the same time. But if you have for example 20 orgs, there is not enough space on screen to show both panels without scrolling... Also orgs does not have any pagination, so everythink is shown in one list.

I wanted to use 2 panels at first, but now I think "two tabs" for "normal user" and "no tab" for "org user" will fit best.

Also i want to add some kind of settings later to give user option to increase/decrease pagination limit (REST api for "repo/search" has limit of min 10 and max 50 records).

@lunny @andreynering Any idea?

[daviian]

@Morlinest I thought about it and why not use something like accordions?

1. Normal User
   

2. Org User
   

So if a user clicks on My Organizations the repository panel is collapsing and vice versa.
Adding of repositories and organizations is still just one click away.

[lunny]

@Morlinest I don't like @daviian 's idea. Because I have hundreds of repositories and twenties of orgnizations on one of my Gitea instance. I think keep two tab is better.

[lunny]

@Morlinest A problem is you should put All, Mirrors and etc. to language-en-us file, otherwise LGTM.

[Morlinest]

@lunny Added missing localization strings (All, Sources, Mirrors and Collaborative).

Should I add X-Total-Count to swagger doc? I don`t know if you want to solve the missing "total count" problem this way (#2277).

[lunny]

@Morlinest maybe you can add X-Total-Count in another PR?

[Morlinest]

@lunny If you mean "add to docs", sure I can. As feature, has to be in this PR, because it is the only (fastest) way I know how many repos user has.

[lunny]

I don't think the file should be in templates/vue dir. We classify the templates according features not the front-end framework it used.

[Morlinest]

Where should I put it then? It's here for 2 (temporary) reasons:

1. There are part rendered by server
2. You can include it on any page as template for component (can't be included in js for reason 1)

[Morlinest]

Or you want me just to rename the folder like templates/components?

[lunny]

Just put it in user/dashboard/? an other page reference it?

[Morlinest]

Not now, but can be referenced later. I just wanted to make it more universal.

[Morlinest]

Rebased on master and changed repo-search.tmpl folder to templates/user/dashboard.

[strk]

This change broke Go 1.7 support, please make sure #2331 is fixed before 1.2.0 is closed