Skip to content

I
ipmworks-web
Commit fa52955a by Danijela Boberic Krsticev
Options

dodata validacija na poljima i poboljšan homepage

parent 58c8f646
Showing with 105 additions and 105 deletions
.gitignore
...@@ -44,3 +44,12 @@ testem.log ...@@ -44,3 +44,12 @@ testem.log
.DS_Store .DS_Store
Thumbs.db Thumbs.db
/.gradle/ /.gradle/
/.gradle/buildOutputCleanup/buildOutputCleanup.lock
/.gradle/checksums/checksums.lock
/.gradle/6.7/executionHistory/executionHistory.bin
/.gradle/6.7/executionHistory/executionHistory.lock
/.gradle/6.7/fileHashes/fileHashes.bin
/.gradle/6.7/fileHashes/fileHashes.lock
/.gradle/checksums/md5-checksums.bin
/.gradle/checksums/sha1-checksums.bin
/build/tmp/war/MANIFEST.MF
angular.json
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
"./node_modules/primeicons/primeicons.css", "./node_modules/primeicons/primeicons.css",
"./node_modules/primeng/resources/themes/mdc-light-indigo/theme.css", "./node_modules/primeng/resources/themes/mdc-light-indigo/theme.css",
"./node_modules/primeng/resources/primeng.css", "./node_modules/primeng/resources/primeng.css",
"./node_modules/primeflex/primeflex.scss" "./node_modules/primeflex/primeflex.css"
], ],
"scripts": [] "scripts": []
}, },
......
package.json
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
"@angular/platform-browser": "~12.0.2", "@angular/platform-browser": "~12.0.2",
"@angular/platform-browser-dynamic": "~12.0.2", "@angular/platform-browser-dynamic": "~12.0.2",
"@angular/router": "~12.0.2", "@angular/router": "~12.0.2",
"primeflex": "~2.0.0", "primeflex": "3.0.0",
"primeicons": "~4.1.0", "primeicons": "~4.1.0",
"primeng": "~12.0.0-rc.1", "primeng": "~12.0.0-rc.1",
"rxjs": "~6.6.0", "rxjs": "~6.6.0",
......
src/app/component/add-resource/add-resource.component.ts
...@@ -3,6 +3,7 @@ import {ResourceType, Language, Region, Sector, Project, Resource, Pest, Crop} f ...@@ -3,6 +3,7 @@ import {ResourceType, Language, Region, Sector, Project, Resource, Pest, Crop} f
import {ResourceService} from "../../service/resource.service"; import {ResourceService} from "../../service/resource.service";
import {MessageService} from 'primeng/api'; import {MessageService} from 'primeng/api';
import {Router} from "@angular/router"; import {Router} from "@angular/router";
import {FormControl} from "@angular/forms";
@Component({ @Component({
...@@ -25,7 +26,7 @@ export class AddResourceComponent implements OnInit { ...@@ -25,7 +26,7 @@ export class AddResourceComponent implements OnInit {
displayCropModal=false; displayCropModal=false;
newPest:Pest = {}; newPest:Pest = {};
newCrop: Crop = {}; newCrop: Crop = {};
resourceControl = new FormControl('');
constructor(private resourceService:ResourceService,private messageService: MessageService, private router: Router) { } constructor(private resourceService:ResourceService,private messageService: MessageService, private router: Router) { }
...@@ -51,7 +52,7 @@ export class AddResourceComponent implements OnInit { ...@@ -51,7 +52,7 @@ export class AddResourceComponent implements OnInit {
this.resourceService.saveResource(this.resource).subscribe((data: Resource) => { this.resourceService.saveResource(this.resource).subscribe((data: Resource) => {
this.resource = data; this.resource = data;
this.resourceService.addFiles(this.image, this.resourceContent, this.resource.idResource).subscribe(data => { this.resourceService.addFiles(this.image, this.resourceContent, this.resource.idResource).subscribe(data => {
this.messageService.add({severity: 'success', detail: 'Resource is saved!'}); this.messageService.add({severity: 'success', detail: 'Resource is saved, but need to be approved by administrator!'});
this.router.navigate(['/home']); this.router.navigate(['/home']);
}, error => { }, error => {
......
src/app/component/home/home.component.css
.imageSizeHome{ .imageSizeHome{
height: auto; max-width: 270px;
width: 100%; max-height: 120px;
max-width: 300px; display: block;
max-height: 150px; margin-left: auto;
margin-right: auto;
} }
.card { .card {
padding: 2rem; padding: 2rem;
...@@ -33,4 +34,3 @@ ...@@ -33,4 +34,3 @@
display: inline-block; display: inline-block;
} }
src/app/component/home/home.component.html
<p-messages [(value)]="disclaimer" [enableService]="false"></p-messages> <p-messages [(value)]="disclaimer" [enableService]="false"></p-messages>
<div class="grid pt-6 pl-6">
<div class="p-grid p-pt-6 p-pl-6"> <div class="col-3">
<div class="p-col-3"> <p class="text-xl">Sectors</p>
<h3>Sectors</h3> <p-multiSelect [selectionLimit]="1" defaultLabel="Select sector" [options]="sectors" [(ngModel)]="selectedSectors" optionLabel="name"></p-multiSelect>
<p-multiSelect defaultLabel="Select sector" [options]="sectors" [(ngModel)]="selectedSectors" optionLabel="name"></p-multiSelect> <p class="text-xl">Country of origin</p>
<p-multiSelect [selectionLimit]="1" defaultLabel="Select region" [options]="regions" [(ngModel)]="selectedRegions" optionLabel="name"></p-multiSelect>
<h3>Country of origin</h3> <div class="field">
<p-multiSelect defaultLabel="Select region" [options]="regions" [(ngModel)]="selectedRegions" optionLabel="name"></p-multiSelect> <p class="text-xl">Pest type</p>
<div class="p-field"> <p-dropdown autoWidth="false" [style]="{'width':'100%'}" placeholder="Select pest type" [options]="pestType" [(ngModel)]="selectedPestType" optionLabel="name" ></p-dropdown>
<h3>Pest type</h3> </div>
<p-dropdown autoWidth="false" [style]="{'width':'100%'}" placeholder="Select pest type" [options]="pestType" [(ngModel)]="selectedPestType" optionLabel="name" ></p-dropdown> <p class="text-xl">Project</p>
</div>
<h3>Project</h3>
<input id="project" type="text" pInputText [(ngModel)]="selectedProjects" placeholder="Add project"> <input id="project" type="text" pInputText [(ngModel)]="selectedProjects" placeholder="Add project">
<h3>Resource types</h3> <p class="text-xl">Resource types</p>
<p-multiSelect placeholder="Select resource type" [selectionLimit]="1"[(ngModel)]="selectedTypes" [options]="contentTypes" optionLabel="name" <p-multiSelect placeholder="Select resource type" [selectionLimit]="1"[(ngModel)]="selectedTypes" [options]="contentTypes" optionLabel="name"
></p-multiSelect> ></p-multiSelect>
<div class="button-right p-pt-3" *ngIf="!more"> <div class="button-right pt-3" *ngIf="!more">
<button pButton type="button" pTooltip="More filters..." icon="pi pi-plus" class="p-button-text p-button-sm p-button-rounded p-button-outlined " (click)="toggleFilters()"></button> <button pButton type="button" pTooltip="More filters..." icon="pi pi-plus" class="p-button-text p-button-sm p-button-rounded p-button-outlined " (click)="toggleFilters()"></button>
</div> </div>
<div class="button-right p-pt-3" *ngIf="more"> <div class="button-right pt-3" *ngIf="more">
<button pButton type="button" icon="pi pi-minus" pTooltip="Less filters..." <button pButton type="button" icon="pi pi-minus" pTooltip="Less filters..."
class="p-button-text p-button-sm p-button-rounded p-button-outlined " (click)="toggleFilters()"></button> class="p-button-text p-button-sm p-button-rounded p-button-outlined " (click)="toggleFilters()"></button>
</div> </div>
<div *ngIf="more"> <div *ngIf="more">
<h3>Specific pest</h3> <p class="text-xl">Specific pest</p>
<p-multiSelect defaultLabel="Select pests" [selectionLimit]="2" [options]="pests" optionLabel="commonName" filterBy="commonName,latinName,eppo" [(ngModel)]="selectedPests"> <p-multiSelect defaultLabel="Select pests" [selectionLimit]="1" [options]="pests" optionLabel="commonName" filterBy="commonName,latinName,eppo" [(ngModel)]="selectedPests">
<ng-template let-pest pTemplate="item"> <ng-template let-pest pTemplate="item">
<div>{{pest.commonName}} <i *ngIf="pest.latinName !=undefined"> <div>{{pest.commonName}} <i *ngIf="pest.latinName !=undefined">
({{pest.latinName}}, {{pest.eppo}})</i></div> ({{pest.latinName}}, {{pest.eppo}})</i></div>
...@@ -36,61 +34,48 @@ ...@@ -36,61 +34,48 @@
</p-multiSelect> </p-multiSelect>
<h3>Specific crop</h3> <p class="text-xl">Specific crop</p>
<p-multiSelect defaultLabel="Select crops" [selectionLimit]="2" [options]="crops" optionLabel="commonName" filterBy="commonName,latinName,eppo" [(ngModel)]="selectedCrops"> <p-multiSelect defaultLabel="Select crops" [selectionLimit]="1" [options]="crops" optionLabel="commonName" filterBy="commonName,latinName,eppo" [(ngModel)]="selectedCrops">
<ng-template let-crop pTemplate="item"> <ng-template let-crop pTemplate="item">
<div>{{crop.commonName}} <i *ngIf="crop.latinName !=undefined"> <div>{{crop.commonName}} <i *ngIf="crop.latinName !=undefined">
({{crop.latinName}}, {{crop.eppo}})</i></div> ({{crop.latinName}}, {{crop.eppo}})</i></div>
</ng-template> </ng-template>
</p-multiSelect> </p-multiSelect>
<h3>Languages</h3> <p class="text-xl">Languages</p>
<p-multiSelect defaultLabel="Select language" [selectionLimit]="2" [options]="languages" [(ngModel)]="selectedLanguages" optionLabel="name"></p-multiSelect> <p-multiSelect defaultLabel="Select language" [selectionLimit]="1" [options]="languages" [(ngModel)]="selectedLanguages" optionLabel="name"></p-multiSelect>
<!--<h3>Arbitrary text search</h3> <!--<h3>Arbitrary text search</h3>
<input type="text" pInputText [(ngModel)]="searchTerm"/>--> <input type="text" pInputText [(ngModel)]="searchTerm"/>-->
</div> </div>
<div class="p-pt-3 button-center"> <div class="pt-3 button-center">
<p-button label="Search" icon="pi pi-search" [loading]="false"></p-button> <p-button label="Search" icon="pi pi-search" [loading]="false"></p-button>
</div> </div>
</div> </div>
<div class="p-col-9"> <div class="col-9">
<div class="card"> <p-card>
<div class="button-right"> <div class="button-right">
<button pButton type="button" routerLink="/resource/add" icon="pi pi-plus" class="p-button-lg p-button-raised p-button-rounded"></button> <button pButton type="button" routerLink="/resource/add" icon="pi pi-plus" class="p-button-lg p-button-raised p-button-rounded"></button>
</div> </div>
<p-dataView #dv [value]="resources" [paginator]="true" [rows]="6" layout="grid"> <p-dataView [value]="resources" [paginator]="true" [rows]="6" layout="grid">
<ng-template let-resource pTemplate="gridItem"> <ng-template let-resource pTemplate="gridItem">
<div class="p-col-12 p-md-4"> <div class="card col-12 md:col-4 flex flex-column p-3 mt-3 justify-content-between" routerLink="/resource/{{resource.idResource}}">
<p-card header="{{resource.resourceName}}" subheader="" styleClass="p-card-shadow" routerLink="/resource/{{resource.idResource}}"> <div class="pb-1 align-self-end">
<ng-template pTemplate="header">
<div class="p-pb-1 button-right">
<p-tag *ngIf="resource.resourceType" [rounded]=true value="{{resource.resourceType.name}}"> <p-tag *ngIf="resource.resourceType" [rounded]=true value="{{resource.resourceType.name}}">
</p-tag> </p-tag>
</div> </div>
<img [src]="imagePath+'/'+resource.idResource" class="imageSizeHome"> <div class="">
</ng-template> <img [src]="imagePath+'/'+resource.idResource" class="imageSizeHome">
<div *ngFor="let sector of resource.relevantSectors" class="horizontal"> <p class="text-center">{{resource.resourceName}}</p>
<ng-container [ngSwitch]=sector.idSector> </div>
<img *ngSwitchCase="1" class="sector" [src]="'assets/sectors/arable.png'" pTooltip="{{sector.name}}"> <div class="align-self-center">
<img *ngSwitchCase="5" class="sector" [src]="'assets/sectors/greenhouse.png'" pTooltip="{{sector.name}}"> <button pButton type="button" routerLink="/resource/{{resource.idResource}}" icon="pi pi-forward" class="p-button-outlined mr-4" pTooltip="See more..."></button>
<img *ngSwitchCase="3" class="sector"[src]="'assets/sectors/orchard.png'" pTooltip="{{sector.name}}"> <button pButton type="button" icon="pi pi-share-alt" class="p-button-outlined" pTooltip="Share"></button>
<img *ngSwitchCase="4" class="sector"[src]="'assets/sectors/vegetables.png'" pTooltip="{{sector.name}}"> </div>
<img *ngSwitchCase="2" class="sector" [src]="'assets/sectors/vineyard.png'" pTooltip="{{sector.name}}"> </div>
</ng-container>
</div>
<ng-template pTemplate="footer">
<button pButton type="button" routerLink="/resource/{{resource.idResource}}" icon="pi pi-forward" class="p-button-outlined p-mr-4" pTooltip="See more..."></button>
<button pButton type="button" icon="pi pi-share-alt" class="p-button-outlined" pTooltip="Share"></button>
</ng-template>
</p-card>
</div>
</ng-template> </ng-template>
</p-dataView> </p-dataView>
</p-card>
</div> </div>
</div>
</div> </div>
src/app/component/resource/resource.component.css
.imageSize{ .imageSize{
height: auto;
width: 100%;
max-height: 400px; max-height: 400px;
max-width: 100%;
} }
.horizontal{ .horizontal{
padding:5px; padding:5px;
...@@ -18,3 +17,7 @@ ...@@ -18,3 +17,7 @@
.button-link{ .button-link{
background-color: unset !important; background-color: unset !important;
} }
.overflow-text{
overflow-wrap: anywhere;
}
src/app/component/resource/resource.component.html
<div class="p-grid p-pt-6 p-pl-6 p-d-flex"> <div class="grid pt-6 pl-6 flex">
<div class="p-d-flex p-col-12 p-jc-center"> <div class="flex col-12 justify-content-center">
<h1>{{resource.resourceName}}</h1> <p class="text-3xl">{{resource.resourceName}}</p>
</div> </div>
<div class="p-col-6 p-d-flex p-flex-column p-jc-center"> <div class="col-6 flex flex-column justify-content-center">
<div class="p-col-12"> <div class="col-12 text-center">
<img [src]="imagePath+'/'+resource.idResource" class="imageSize" > <img [src]="imagePath+'/'+resource.idResource" class="imageSize" >
</div> </div>
<div class="p-col-12"> <div class="col-12">
<p-panel class="p-col-12 p-d-inline"> <p-panel class="col-12 inline">
<div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource language</div><div class=" p-d-inline p-my-0">{{resource.language?.name}}</div></div> <div class="flex align-items-center"><div class="col-3 inline my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource language</div><div class="my-0">{{resource.language?.name}}</div></div>
<div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource origin</div> <div class=" p-d-inline p-my-0">{{resource.resourceOrigin}}</div></div> <div class="flex align-items-center"><div class="col-3 inline my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource origin</div> <div class="my-0 overflow-text"><a href="{{resource.resourceOrigin}}">{{resource.resourceOrigin}}</a></div></div>
<div class="p-d-flex p-ai-center"> <div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource type</div><div class=" p-d-inline p-my-0">{{resource.resourceType?.name}}</div></div> <div class="flex align-items-center"> <div class="col-3 inline my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource type</div><div class="my-0">{{resource.resourceType?.name}}</div></div>
<div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Organization name</div><div class=" p-d-inline p-my-0">{{resource.contactInstitution}}</div></div> <div class="flex align-items-center"><div class="col-3 inline my-0" [ngStyle]="{color:'var(--surface-500)'}">Organization name</div><div class="my-0">{{resource.contactInstitution}}</div></div>
<div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0"[ngStyle]="{color:'var(--surface-500)'}">Contact email</div><div class=" p-d-inline p-my-0"></div>{{resource.contactEmail}}</div> <div class="flex align-items-center"><div class="col-3 inline my-0"[ngStyle]="{color:'var(--surface-500)'}">Contact email</div><div class="my-0"></div>{{resource.contactEmail}}</div>
<div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0"[ngStyle]="{color:'var(--surface-500)'}">Contact phone</div><div class=" p-d-inline p-my-0">{{resource.contactPhone}}</div></div> <div class="flex align-items-center"><div class="col-3 inline my-0"[ngStyle]="{color:'var(--surface-500)'}">Contact phone</div><div class="my-0">{{resource.contactPhone}}</div></div>
<div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource main url</div><div class=" p-d-inline p-my-0">{{resource.mainURL}}</div></div> <div class="flex align-items-center"><div class="col-3 inline my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource main url</div><div class="overflow-text my-0"><a href="{{resource.mainURL}}">{{resource.mainURL}}</a></div></div>
<div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Citation (DOI)</div><div class=" p-d-inline p-my-0">{{resource.citation}}</div></div> <div class="flex align-items-center"><div class="col-3 inline my-0" [ngStyle]="{color:'var(--surface-500)'}">Citation (DOI)</div><div class="overflow-text my-0">{{resource.citation}}</div></div>
</p-panel> </p-panel>
</div> </div>
</div> </div>
<div class="p-col-6 p-d-flex p-flex-column"> <div class="col-6 flex flex-column">
<p-panel header="Short summary" class="p-col-12 p-d-block"> <p-panel header="Short summary" class="col-12 p-d-block">
<div class="p-d-flex "> {{resource.description}}</div> <div class="flex "> {{resource.description}}</div>
<div class="p-d-flex p-mt-5 "> <div class="flex mt-5 ">
<div class="p-d-inline p-col-3 p-my-0"[ngStyle]="{color:'var(--surface-500)'}">Sectors</div> <div class="inline col-3 my-0"[ngStyle]="{color:'var(--surface-500)'}">Sectors</div>
<div class="p-d-inline p-my-0" *ngFor="let sector of resource.sectors"> <div class="inline my-0" *ngFor="let sector of resource.sectors">
<img class="sector p-mx-2" [src]="'assets/sectors/'+sector.sectorIcon" pTooltip="{{sector.name}}"> <img class="sector mx-2" [src]="'assets/sectors/'+sector.sectorIcon" pTooltip="{{sector.name}}">
</div> </div>
</div> </div>
<div class="p-d-flex "> <div class="flex ">
<div class="p-d-inline p-col-3 p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Regions</div> <div class="inline col-3 my-0" [ngStyle]="{color:'var(--surface-500)'}">Regions</div>
<div *ngFor="let region of resource.regions" class="p-d-inline p-my-0"> <div *ngFor="let region of resource.regions" class="inline my-0">
<p class=" p-my-0 p-py-2 p-mx-2" >{{region.name}}</p> <p class=" my-0 py-2 mx-2" >{{region.name}}</p>
</div> </div>
</div> </div>
<div class="p-d-flex "> <div class="flex flex-wrap">
<div class="p-d-inline p-col-3 p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Relevant pest(s)</div> <div class="inline col-3 my-0" [ngStyle]="{color:'var(--surface-500)'}">Relevant pest(s)</div>
<div *ngFor="let pest of resource.pests" class="p-d-inline p-my-0"> <div *ngFor="let pest of resource.pests" class="inline my-0">
<p class=" p-my-0 p-py-2 p-mx-2" >{{pest.commonName}}</p> <div class=" my-0 py-2 mx-2" >{{pest.commonName}}</div>
</div> </div>
</div> </div>
<div class="p-d-flex "> <div class="flex flex-wrap">
<div class="p-d-inline p-col-3 p-my-0" [ngStyle]="{color:'var(--surface-500)'}"> Relevant crop(s)</div> <div class="inline col-3 my-0" [ngStyle]="{color:'var(--surface-500)'}"> Relevant crop(s)</div>
<div *ngFor="let crop of resource.crops" class="p-d-inline p-my-0"> <div *ngFor="let crop of resource.crops" class="inline my-0">
<p class="p-my-0 p-py-2 p-mx-2" >{{crop.commonName}}</p> <p class="my-0 py-2 mx-2" >{{crop.commonName}}</p>
</div> </div>
</div> </div>
</p-panel> </p-panel>
<p-panel class="p-col-12" header="Find out more"> <p-panel class="col-12" header="Find out more">
<div *ngFor="let file of resource.fileNames" > <div *ngFor="let file of resource.fileNames" >
<i class="pi pi-file p-mr-2" style="font-size: 2rem"></i> <i class="pi pi-file p-mr-2" style="font-size: 2rem"></i>
<button pButton type="button" label="{{file}}" class="p-button-link button-link" (click)="downloadFile(file)"></button> <button pButton type="button" label="{{file}}" class="p-button-link button-link" (click)="downloadFile(file)"></button>
</div> </div>
<div class="p-mt-2" *ngFor="let link of resource.links" > <div class="mt-2" *ngFor="let link of resource.links" >
<i class="pi pi-link p-mr-2" style="font-size: 2rem"></i> <i class="pi pi-link p-mr-2" style="font-size: 2rem"></i>
<a href="{{link}}">{{link}}</a> <a href="{{link}}">{{link}}</a>
</div> </div>
</p-panel> </p-panel>
</div> </div>
<div class="p-col-12 p-pt-3 button-center"> <div class="col-12 pt-3 button-center">
<p-button label="Back to search" icon="pi pi-search" routerLink="/home" [loading]="false"></p-button> <p-button label="Back to search" icon="pi pi-search" routerLink="/home" [loading]="false"></p-button>
</div> </div>
</div> </div>
src/styles.css
...@@ -8,12 +8,6 @@ ...@@ -8,12 +8,6 @@
.p-button:not(.p-button-outlined){ .p-button:not(.p-button-outlined){
background-color:#00662e !important; background-color:#00662e !important;
} }
.p-rating .p-rating-icon.pi-star {
color: darkorange !important;
}
.p-rating .p-rating-icon {
color:#00662e !important;
}
.p-multiselect, .p-inputtext { .p-multiselect, .p-inputtext {
width: 100%; width: 100%;
} }
...@@ -46,3 +40,11 @@ ...@@ -46,3 +40,11 @@
.p-button.p-button-outlined{ .p-button.p-button-outlined{
color:#00662e !important; color:#00662e !important;
} }
.p-grid {
display: flex;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
margin-top: -0.5rem;
justify-content:space-between;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment