Project

General

Profile

« Previous | Next » 

Revision 58181

[Library|Trunk]

Search:
Search all: update tabs css
Advanced Search Form:
change select to mat-select
changes for publication date field
Entities Selection: on simple search navigate when entity changes

View differences:

modules/uoa-services-library/trunk/ng-openaire-library/src/app/searchPages/find/searchAll.component.html
34 34
               [logoURL]="properties.baseLink+logoURL" type="search" [name]=name></schema2jsonld>
35 35
<div class="uk-container-large uk-container">
36 36

  
37
  <ul class=" uk-tab  uk-width-1-1 " uk-tab="animation: uk-animation-fade">
37
  <ul class=" portalTabs uk-tab  uk-width-1-1 " uk-tab="animation: uk-animation-fade">
38 38
    <li *ngIf="showPublications || showDatasets || showOrps || showSoftware" (click)="entityChanged('result')"
39 39
        [class]="activeEntity == 'result'?'uk-active':''">
40 40
      <a>
modules/uoa-services-library/trunk/ng-openaire-library/src/app/searchPages/searchUtils/entitiesSelection.component.ts
9 9
@Component({
10 10
  selector: 'entities-selection',
11 11
  template: `
12
    <!--  <select *ngIf="show" [(ngModel)]="selectedEntity" class="uk-select uk-width-auto  portal-box uk-text-small" (ngModelChange)="entityChanged()" >
13
        <option *ngIf="simpleView && (showResearchOutcomes + showDataProviders + showOrganizations + showProjects )>1 " value="all">All content</option>
14
        <option *ngIf="showResearchOutcomes" value="result">Research outcomes</option>
15
        <option *ngIf="showProjects" value="project">Projects</option>
16
        <option *ngIf="showDataProviders" value="dataprovider">Content providers</option>
17
        <option *ngIf="showOrganizations" value="organization">Organizations</option>
18
      </select>-->
19

  
20
    <!--<button *ngIf="!show && currentEntity"  class="uk-select uk-width-auto  portal-box uk-text-small">
21
      <span *ngIf="currentEntity=='all'">All content</span>
22
      <span *ngIf="currentEntity=='result'">Research outcomes</span>
23
      <span *ngIf="currentEntity=='project'">Projects</span>
24
      <span *ngIf="currentEntity=='dataprovider'">Content providers</span>
25
      <span *ngIf="currentEntity=='organization'">Organizations</span>
26
    </button>-->
27
<!---->
28
    <span  class="entitiesSelection portal-box uk-text-small " style="" >
12
     <span  class="entitiesSelection portal-box uk-text-small " style="" >
29 13
      <mat-select *ngIf="show && selectedEntity" [(value)]="selectedEntity"
30
                 (valueChange)="entityChanged()" [disableOptionCentering]="true" panelClass="entitiesSelectionPanel">
14
                 (valueChange)="entityChanged()" [disableOptionCentering]="true" panelClass="matSelectionPanel">
31 15
        <mat-option
32 16
          *ngIf="simpleView && (showResearchOutcomes + showDataProviders + showOrganizations + showProjects )>1 "
33 17
          value="all">All content
......
108 92

  
109 93
  entityChanged() {
110 94

  
111
    if (!this.simpleView) {
112
      this.router.navigate([this.getUrl(false)]);
95
    if (!this.simpleView || this.onChangeNavigate) {
96
      this.router.navigate([this.getUrl(this.simpleView)]);
113 97
    } else {
114 98
      this.selectionChange.emit({
115 99
        entity: this.selectedEntity,
modules/uoa-services-library/trunk/ng-openaire-library/src/app/searchPages/searchUtils/advancedSearchForm.component.html
27 27
        <td class="uk-text-muted uk-text-uppercase">Term</td>
28 28
      </tr>
29 29
      <tr *ngFor="let selectedField of selectedFields; let i = index" class="-row  ">
30
        <td><select [(ngModel)]="selectedField.id" name="selectField_{{i}}"
30
        <td><mat-select [(ngModel)]="selectedField.id" name="selectField_{{i}}" [disableOptionCentering]="true" class="matSelection uk-input" panelClass="matSelectionPanel"
31 31
                    (ngModelChange)="fieldIdsChanged(i,selectedField.id)"><!--(click)="fieldIdsChanged(i)"  -->
32
          <option *ngFor="let id of fieldIds" [value]="id">{{fieldIdsMap[id].name}} </option>
33
        </select></td>
32
          <mat-option *ngFor="let id of fieldIds" [value]="id">{{fieldIdsMap[id].name}} </mat-option>
33
        </mat-select></td>
34 34
        <td *ngIf="selectedField.type == 'keyword'">
35 35
          <div class="uk-inline uk-width-expand">
36 36
            <a *ngIf="selectedField.value.length > 0" class="uk-form-icon uk-form-icon-flip"
......
44 44

  
45 45
        </td>
46 46
        <td *ngIf="selectedField.type == 'date'">
47
          <date-filter [dateValue]=selectedField.dateValue [validDateFrom]=validDateFrom
47
          <date-filter [dateValue]=selectedField.dateValue [validDateFrom]=validDateFrom class="uk-width-expand"
48 48
                       [validDateTo]=validDateTo></date-filter>
49 49
        </td>
50 50
        <td *ngIf=" selectedField.id && selectedField.type == 'vocabulary'">
......
85 85
                           value="false">No<br>
86 86
                  </span>
87 87
        </td>
88
        <td  style="min-width: 75px;"><select *ngIf="i+1 <selectedFields.length"
88
        <td  style="min-width: 75px;"><mat-select *ngIf="i+1 <selectedFields.length"
89 89
                                        [(ngModel)]="selectedFields[i+1].operatorId"
90
                              name="selectOp_{{i}}">
91
          <option *ngFor="let op of operators" (change)="fieldOperatorChanged(i+1, op.id, op.id)"
92
                  (click)="fieldOperatorChanged(i+1, op.id, op.id)" [value]="op.id">{{op.id}}</option>
93
        </select>
90
                              name="selectOp_{{i}}" [disableOptionCentering]="true" class="matSelection uk-input" panelClass="matSelectionPanel">
91
          <mat-option *ngFor="let op of operators" (change)="fieldOperatorChanged(i+1, op.id, op.id)"
92
                  (click)="fieldOperatorChanged(i+1, op.id, op.id)" [value]="op.id">{{op.id}}</mat-option>
93
        </mat-select>
94 94
          <div *ngIf="i == selectedFields.length-1 " class=" uk-text-right" style="margin-top: 55px;">
95 95
            <span class="uk-text-muted uk-text-uppercase uk-margin-small-right " > Add rule</span>
96 96
          </div>
......
134 134
      <div [class]="(entitiesSelection)?'':'uk-width-medium@m uk-width-small@s'">
135 135
        <entities-selection *ngIf="entitiesSelection" [simpleView]="true" [currentEntity]="entityType"
136 136
                            [properties]="properties"
137
                            (selectionChange)=" simpleEntityChanged($event)"></entities-selection>
137
                            (selectionChange)=" simpleEntityChanged($event)"
138
                            [onChangeNavigate]="true"></entities-selection>
138 139
      </div>
139 140
      <div [class]="((resultTypes || quickFilter)?'quickSelectionsBox':'')+' uk-padding-remove-left'">
140 141
        <div class="uk-inline">
modules/uoa-services-library/trunk/ng-openaire-library/src/app/searchPages/searchUtils/dateFilter.module.ts
3 3
import { FormsModule, ReactiveFormsModule }         from '@angular/forms';
4 4
import { MyDatePickerModule } from '../../utils/my-date-picker/my-date-picker.module';
5 5
import {DateFilterComponent} from './dateFilter.component';
6
import {MatNativeDateModule} from '@angular/material';
6
import {MatNativeDateModule, MatSelectModule} from '@angular/material';
7 7
import {MatDatepickerModule} from '@angular/material/datepicker';
8 8
import {MatFormFieldModule} from '@angular/material';
9 9
import {MatInputModule} from '@angular/material';
10 10
@NgModule({
11 11
  imports: [
12 12
    CommonModule, FormsModule, ReactiveFormsModule, MyDatePickerModule,
13
    MatNativeDateModule, MatDatepickerModule, MatFormFieldModule, MatInputModule
13
    MatNativeDateModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatSelectModule
14 14
  ],
15 15
  declarations: [
16 16
    DateFilterComponent
modules/uoa-services-library/trunk/ng-openaire-library/src/app/searchPages/searchUtils/searchHelperClasses.class.ts
41 41
    }
42 42
}
43 43
export class DateValue{
44
    public types = ["any","range","1mon","2mon","3mon","6mon","12mon","2year","5year","10year"];
45
    public typesTitle = ["any","in the specified date range","in the last month","in the last 2 months","in the last 3 months","in the last 6 months","in the last year","in the last 2 years","in the last 5 years","in the last 10 years"];
44
    public types = ["1mon","2mon","3mon","6mon","12mon","2year","5year","10year","range"];
45
    public typesTitle = ["Last month","Last 2 months","Last 3 months","Last 6 months","Last year","Last 2 years","Last 5 years","Last 10 years", "Specify date range..."];
46 46
    public type: string ;
47 47
    public from:Date = new Date();
48 48
    public to:Date = new Date();
modules/uoa-services-library/trunk/ng-openaire-library/src/app/searchPages/searchUtils/advancedSearchForm.module.ts
10 10
import {SearchFormModule} from './searchForm.module';
11 11
import {QuickSelectionsModule} from "./quick-selections.module";
12 12
import {EntitiesSelectionModule} from "./entitiesSelection.module";
13
import {MatSelectModule} from "@angular/material";
13 14

  
14 15

  
15 16
@NgModule({
16 17
  imports: [
17
    CommonModule, FormsModule, RouterModule, EntitiesAutocompleteModule, StaticAutocompleteModule, DateFilterModule, SearchFormModule, QuickSelectionsModule, EntitiesSelectionModule
18
    CommonModule, FormsModule, RouterModule, EntitiesAutocompleteModule, StaticAutocompleteModule, DateFilterModule, SearchFormModule, QuickSelectionsModule, EntitiesSelectionModule, MatSelectModule
18 19
  ],
19 20
  declarations: [
20 21
    AdvancedSearchFormComponent,
modules/uoa-services-library/trunk/ng-openaire-library/src/app/searchPages/searchUtils/dateFilter.component.ts
11 11
@Component({
12 12
    selector: 'date-filter',
13 13
    template: `
14

  
15
    <select *ngIf="dateValue && dateValue.type!='range' "  name="{{'select_date_type'+filterId}}"    [(ngModel)]=dateValue.type >
16
      <option *ngFor="let type of dateValue.types let i = index"  [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</option>
17
    </select>
14
<div  class="uk-input uk-width-medium">
15
    <mat-select *ngIf="dateValue && dateValue.type!='range' "  name="{{'select_date_type'+filterId}}"   class=" matSelection uk-input"    [(ngModel)]=dateValue.type  [disableOptionCentering]="true" panelClass="matSelectionPanel">
16
      <mat-option *ngFor="let type of dateValue.types let i = index"  [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</mat-option>
17
    </mat-select>
18 18
    <div *ngIf="dateValue && dateValue.type=='range' ">
19 19
      <table class=" uk-table uk-table-responsive" >
20 20
        <tr>
21 21
          <td class="uk-padding-remove">
22
            <select name="{{'select_date_type'+filterId}}"    [(ngModel)]=dateValue.type >
23
              <option *ngFor="let type of dateValue.types let i = index"  [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</option>
24
            </select>
22
            <mat-select name="{{'select_date_type'+filterId}}"    [(ngModel)]=dateValue.type [disableOptionCentering]="true" class="matSelection uk-input" panelClass="matSelectionPanel">
23
              <mat-option *ngFor="let type of dateValue.types let i = index"  [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</mat-option>
24
            </mat-select>
25 25
          </td>
26 26
<!--          <td>-->
27 27
<!--            From-->
......
48 48
        </tr>
49 49
      </table>
50 50
    </div>
51
</div>
51 52
<!--    <div *ngIf="dateValue.type=='range' " class="-row dateFilter" >-->
52 53

  
53 54
<!--      <table class=" uk-table uk-table-responsive" >-->
modules/uoa-services-library/trunk/ng-openaire-library/src/assets/library.css
1434 1434
    border-radius: 1px
1435 1435
}
1436 1436

  
1437
ul.portalTabs.uk-tab > .uk-active > a, ul.portalTabs.uk-tab > * > a:focus,  ul.portalTabs.uk-tab > * > a:hover {
1438
    color: var(--portal-main-color) !important;
1439
    border-color: var(--portal-main-color) !important;
1440
    /*font-family: Roboto, sans-serif !important;*/
1441
}
1442
ul.portalTabs.uk-tab  > .uk-active > a{
1443
 font-weight: bold;
1444
}
1445

  
1446
ul.portalTabs.uk-tab::before {
1447
    border-bottom: 1px solid var(--portal-main-color);
1448
}
1449

  
1437 1450
.quickSelectionsBox{
1438 1451
    border: 1px solid #E6E6E6;
1439 1452
    border-top:0px;
......
1467 1480
    padding:10px;
1468 1481
    display: inline-block
1469 1482
}
1470
.entitiesSelectionPanel{
1483
.entitiesSelectionPanel, .matSelectionPanel{
1471 1484
    margin-top: 30px !important;
1472 1485
}

Also available in: Unified diff