home.component.html

<div class="row">
    <div class="col-md-12">
        <h1 class="display-4" jhiTranslate="home.title">Welcome!</h1>

        <div [ngSwitch]="isAuthenticated()">
            <div class="row">
                <div class="col-sm-12">
                    <form name="searchForm" class="form-inline">
                        <div class="input-group w-100 mt-3">
                            <ng-container [queryParamGroup]="paramGroup">
                                <input type="text" class="form-control" queryParamName="searchText"
                                       placeholder="{{ 'gitSearchApp.searchResult.search' | translate }}"/>
                            </ng-container>
                        </div>
                    </form>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-3">
                    <form name="searchForm" class="form-inline">
                        <div class="input-group w-100 mt-3">
                            <ng-container [queryParamGroup]="paramGroup">
                                <input type="text" class="form-control" queryParamName="programmingLanguage"
                                       placeholder="{{ 'gitSearchApp.filters.programmingLanguage' | translate }}"/>
                            </ng-container>
                        </div>
                    </form>
                </div>
                <div class="col-sm-3">
                    <form name="searchForm" class="form-inline">
                        <div class="input-group w-100 mt-3">
                            <ng-container [queryParamGroup]="paramGroup">
                                <input type="text" class="form-control" queryParamName="keywords"
                                       placeholder="{{ 'gitSearchApp.filters.keywords' | translate }}"/>
                            </ng-container>
                        </div>
                    </form>
                </div>
            </div>

            <div class="row">
                <div class="col-2">
                    <ng-container *ngIf="gitFilesAggregation">
                        <br>
                        <h3 jhiTranslate="home.metadata.filter">Search Filter</h3>

                        <div class="filter">
                            <ng-select
                                [hidden]="gitFilesAggregation?.repositories == null"
                                [items]="repos"
                                bindLabel="key"
                                [multiple]="true"
                                (change)="filter()"
                                [(ngModel)]="selectedRepository"
                                placeholder="{{ 'home.metadata.repository' | translate }}">
                            </ng-select>
                        </div>

                        <div class="filter">
                            <ng-select
                                [hidden]="gitFilesAggregation?.university == null"
                                [items]="university"
                                bindLabel="key"
                                [multiple]="true"
                                (change)="filter()"
                                [(ngModel)]="selectedUniversity"
                                placeholder="{{ 'home.metadata.university' | translate }}">
                            </ng-select>
                        </div>

                        <div class="filter">
                            <ng-select
                                [hidden]="gitFilesAggregation?.fileFormat == null"
                                [items]="fileFormat"
                                bindLabel="key"
                                [multiple]="true"
                                (change)="filter()"
                                [(ngModel)]="selectedFileFormat"
                                placeholder="{{ 'home.metadata.fileformat' | translate }}">
                            </ng-select>
                        </div>

                        <hr>

                        <h3 jhiTranslate="home.metadata.information">Search information</h3>

                        <jhi-home-metadata [frequencies]="gitFilesAggregation?.repositories"
                                           [parameter]="'repository'"></jhi-home-metadata>
                        <jhi-home-metadata [frequencies]="gitFilesAggregation?.university"
                                           [parameter]="'university'"></jhi-home-metadata>
                        <jhi-home-metadata [frequencies]="gitFilesAggregation?.fileFormat"
                                           [parameter]="'fileformat'"></jhi-home-metadata>
                    </ng-container>
                </div>

                <div class="col-10">
                    <ng-container *ngIf="gitFilesPageDetails">
                        <hr>
                        <h2 id="home-logged-message" jhiTranslate="home.search"
                            [translateValues]="{ results: gitFilesPageDetails?.hitCount || 0 }">search
                            results</h2>
                    </ng-container>
                    <hr [hidden]="gitFilesAggregation == null">

                    <div *ngIf="gitFilesPageDetails?.gitFiles !== null">
                        <div
                            *ngFor="let gitFile of gitFiles">
                            <a (click)="onClickMe(gitFile)">{{ gitFile.filePath}}</a>
                            <div class="solid">
                                <div class="row">
                                    <jhi-home-highlighting [gitFiles]="gitFile"></jhi-home-highlighting>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm">
                                <span class="info"><fa-icon icon="language"></fa-icon>
                                    {{gitFile.fileFormat}}</span>
                                </div>
                                <div class="col-sm">
                                <span class="info"><fa-icon icon="book"></fa-icon>
                                    {{gitFile.repository}}</span>
                                </div>
                            </div>

                            <hr>
                        </div>
                    </div>
                    <div class="d-flex justify-content-center">
                        <ngb-pagination
                            (pageChange)="onPageChange($event)"
                            [hidden]="hitCount == 0"
                            [(page)]="page"
                            [pageSize]="pageSize"
                            [boundaryLinks]="true"
                            [maxSize]="5"
                            [rotate]="true"
                            [collectionSize]="hitCount"></ngb-pagination>
                    </div>

                </div>
            </div>
            <div class="alert alert-warning" *ngSwitchCase="false">
                <span jhiTranslate="global.messages.info.authenticated.prefix">If you want to </span>
                <a class="alert-link" (click)="login()" jhiTranslate="global.messages.info.authenticated.link">sign
                    in</a><span jhiTranslate="global.messages.info.authenticated.suffix">, you can try the default accounts:<br/>- Administrator (login="admin" and password="admin") <br/>- User (login="user" and password="user").</span>
            </div>

            <div class="alert alert-warning" *ngSwitchCase="false">
                <span jhiTranslate="global.messages.info.register.noaccount">You don't have an account yet?</span>&nbsp;
                <a class="alert-link" routerLink="account/register" jhiTranslate="global.messages.info.register.link">Register
                    a new account</a>
            </div>
        </div>
    </div>
</div>