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 221 additions and 201 deletions
.gitignore
......@@ -44,3 +44,12 @@ testem.log
.DS_Store
Thumbs.db
/.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 @@
"./node_modules/primeicons/primeicons.css",
"./node_modules/primeng/resources/themes/mdc-light-indigo/theme.css",
"./node_modules/primeng/resources/primeng.css",
"./node_modules/primeflex/primeflex.scss"
"./node_modules/primeflex/primeflex.css"
],
"scripts": []
},
......
package.json
......@@ -18,7 +18,7 @@
"@angular/platform-browser": "~12.0.2",
"@angular/platform-browser-dynamic": "~12.0.2",
"@angular/router": "~12.0.2",
"primeflex": "~2.0.0",
"primeflex": "3.0.0",
"primeicons": "~4.1.0",
"primeng": "~12.0.0-rc.1",
"rxjs": "~6.6.0",
......
src/app/component/add-resource/add-resource.component.html
<div class="card p-pt-6 p-pl-6 p-pr-6">
<h2> Add resource</h2>
<div class="card pt-6 pl-6 pr-6">
<p class="text-3xl"> Add resource</p>
<form #resourceForm="ngForm" (ngSubmit)="saveResource()">
<div class="p-fluid">
<div class="p-field p-grid">
<label for="title" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Short description</label>
<div class="p-col-12 p-md-10">
<input id="title" type="text" pInputText [(ngModel)]="resource.resourceName">
<div class="field grid">
<label for="title" class="col-12 mb-2 md:col-2 md:mb-0">Short description</label>
<div class="col-12 md:col-10">
<input id="title" name="title" #title='ngModel' type="text" pInputText [(ngModel)]="resource.resourceName" required [ngClass]="!title.valid ? 'ng-invalid ng-dirty' : ''">
<div [hidden]="title.valid" class="text-xs p-error ">
Short description is required
</div>
</div>
</div>
<div class="p-field p-grid">
<label for="description" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Long description (in English, 500 words)</label>
<div class="p-col-12 p-md-10">
<textarea id="description" type="text" rows="4" pInputTextarea [(ngModel)]="resource.description"></textarea>
<div class="field grid">
<label for="description" class="col-12 mb-2 md:col-2 md:mb-0">Long description (in English, 500 words)</label>
<div class="col-12 md:col-10">
<textarea id="description" name="description" #description='ngModel' type="text" rows="4" pInputTextarea [(ngModel)]="resource.description" required [ngClass]="!description.valid ? 'ng-invalid ng-dirty' : ''"></textarea>
<div [hidden]="description.valid" class="text-xs p-error">
Long description is required
</div>
</div>
</div>
<div class="p-field p-grid">
<label for="description" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Long description (in native language, if not English, 500 words)</label>
<div class="p-col-12 p-md-10">
<textarea id="descriptionNative" type="text" rows="4" pInputTextarea [(ngModel)]="resource.descriptionNative"></textarea>
<div class="field grid">
<label for="description" class="col-12 mb-2 md:col-2 md:mb-0">Long description (in native language, if not English, 500 words)</label>
<div class="col-12 md:col-10">
<textarea id="descriptionNative" name="descriptionNative" type="text" rows="4" pInputTextarea [(ngModel)]="resource.descriptionNative"></textarea>
</div>
</div>
<div class="p-field p-grid">
<label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Sectors</label>
<div class="p-col-12 p-md-10">
<p-multiSelect defaultLabel="Select sector" [options]="sectors" optionLabel="name" [(ngModel)]="resource.sectors"> </p-multiSelect>
<div class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">Sectors</label>
<div class="col-12 md:col-10">
<p-multiSelect name="sector" #sector='ngModel' required defaultLabel="Select sector" [options]="sectors" optionLabel="name" [(ngModel)]="resource.sectors" [ngClass]="!sector.valid? 'ng-invalid ng-dirty' : ''" >
</p-multiSelect>
<div [hidden]="sector.valid" class="text-xs p-error">
Sector is required
</div>
</div>
</div>
<div class="p-field p-grid">
<label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Country of origin</label>
<div class="p-col-12 p-md-10">
<p-multiSelect defaultLabel="Select region" [options]="regions" optionLabel="name" [(ngModel)]="resource.regions"></p-multiSelect>
<div class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">Country of origin</label>
<div class="col-12 md:col-10">
<p-multiSelect name="region" #region='ngModel' required defaultLabel="Select region" [options]="regions" optionLabel="name" [(ngModel)]="resource.regions" [ngClass]="!region.valid? 'ng-invalid ng-dirty' : ''"></p-multiSelect>
<div [hidden]="region.valid" class="text-xs p-error">
Country of origin is required
</div>
</div>
</div>
<div class="p-field p-grid">
<label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Relevant pests
<i class="p-pl-3 pi pi-question-circle" pBadge pTooltip="You can enter common English name, Latin name or EPPO to select pest. Choose Other to add new pest."></i>
<div class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">Relevant pests
<i class="pl-3 pi pi-question-circle" pBadge pTooltip="You can enter common English name, Latin name or EPPO to select pest. Choose Other to add new pest."></i>
</label>
<div class="p-col-12 p-md-10">
<p-multiSelect defaultLabel="Select pests" [options]="pests" optionLabel="commonName" filterBy="commonName,latinName,eppo" [(ngModel)]="resource.pests" (onChange)="openPestModal()">
<div class="col-12 md:col-10">
<p-multiSelect name="pests" defaultLabel="Select pests" [options]="pests" optionLabel="commonName" filterBy="commonName,latinName,eppo" [(ngModel)]="resource.pests" (onChange)="openPestModal()">
<ng-template let-pest pTemplate="item">
<div>{{pest.commonName}} <i *ngIf="pest.latinName !=undefined">
({{pest.latinName}}, {{pest.eppo}})</i></div>
......@@ -44,12 +60,12 @@
</p-multiSelect>
</div>
</div>
<div class="p-field p-grid">
<label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Relevant crops
<i class="p-pl-3 pi pi-question-circle" pBadge pTooltip="You can enter common English name, Latin name or EPPO to select crop. Choose Other to add new crop."></i>
<div class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">Relevant crops
<i class="pl-3 pi pi-question-circle" pBadge pTooltip="You can enter common English name, Latin name or EPPO to select crop. Choose Other to add new crop."></i>
</label>
<div class="p-col-12 p-md-10">
<p-multiSelect defaultLabel="Select crops" [options]="crops" optionLabel="commonName" filterBy="commonName,latinName,eppo" [(ngModel)]="resource.crops" (onChange)="openCropModal()">
<div class="col-12 md:col-10">
<p-multiSelect name="crops" defaultLabel="Select crops" [options]="crops" optionLabel="commonName" filterBy="commonName,latinName,eppo" [(ngModel)]="resource.crops" (onChange)="openCropModal()">
<ng-template let-crop pTemplate="item">
<div>{{crop.commonName}} <i *ngIf="crop.latinName !=undefined">
({{crop.latinName}}, {{crop.eppo}})</i></div>
......@@ -57,132 +73,136 @@
</p-multiSelect>
</div>
</div>
<div class="p-field p-grid">
<label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Relevant project title</label>
<div class="p-col-12 p-md-10">
<input id="project" type="text" pInputText [(ngModel)]="resource.project">
<div class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">Relevant project title</label>
<div class="col-12 md:col-10">
<input id="project" name="project" type="text" pInputText [(ngModel)]="resource.project">
</div>
</div>
<div class="p-field p-grid">
<label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Link to project website</label>
<div class="p-col-12 p-md-10">
<input id="projectWeb" type="text" pInputText [(ngModel)]="resource.projectWeb">
<div class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">Link to project website</label>
<div class="col-12 md:col-10">
<input id="projectWeb" name="projectWeb" type="text" pInputText [(ngModel)]="resource.projectWeb">
</div>
</div>
<div class="p-field p-grid">
<label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">If an EU project, add grant code</label>
<div class="p-col-12 p-md-10">
<input id="projectGrantNo" type="text" pInputText [(ngModel)]="resource.projectGrantNo">
<div class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">If an EU project, add grant code</label>
<div class="col-12 md:col-10">
<input id="projectGrantNo" name="projectGrantNo" type="text" pInputText [(ngModel)]="resource.projectGrantNo">
</div>
</div>
<div class="p-field p-grid">
<label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Resource type</label>
<div class="p-col-12 p-md-10">
<p-dropdown [options]="resourceTypes" optionLabel="name" placeholder="Select resource type" [(ngModel)]="resource.resourceType"></p-dropdown>
<div class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">Resource type</label>
<div class="col-12 md:col-10">
<p-dropdown [options]="resourceTypes" [required]="true" #resourceType='ngModel' name="resourceTypes" optionLabel="name" placeholder="Select resource type" [(ngModel)]="resource.resourceType" [ngClass]="!resourceType.valid ? 'ng-invalid ng-dirty' : ''"></p-dropdown>
<div [hidden]="resourceType.valid" class="text-xs p-error">
Resource type is required
</div>
</div>
</div>
<div class="p-field p-grid">
<label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Language</label>
<div class="p-col-12 p-md-10">
<p-dropdown [options]="languages" optionLabel="name" placeholder="Select language" [(ngModel)]="resource.language"></p-dropdown>
<div class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">Language</label>
<div class="col-12 md:col-10">
<p-dropdown [options]="languages" optionLabel="name" name="language" placeholder="Select language" [(ngModel)]="resource.language"></p-dropdown>
</div>
</div>
<div class="p-field p-grid">
<label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Upload image</label>
<div class="p-col-12 p-md-10">
<div class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">Upload image</label>
<div class="col-12 md:col-10">
<p-fileUpload name="image" [maxFileSize]=5242880 [auto]=true [showUploadButton]=false [customUpload]=true (uploadHandler)="fileUploader('image',$event)"></p-fileUpload>
</div>
</div>
<div class="p-field p-grid">
<label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Upload resource content</label>
<div class="p-col-12 p-md-10">
<p-fileUpload name="resources" [multiple]=true [fileLimit]=5 [maxFileSize]=5242880 [auto]=true [showUploadButton]=false [customUpload]=true (uploadHandler)="fileUploader('content',$event)"></p-fileUpload>
<div class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">Upload resource content</label>
<div class="col-12 md:col-10">
<p-fileUpload name="resources" required [multiple]=true [fileLimit]=5 [maxFileSize]=5242880 [auto]=true [showUploadButton]=false [customUpload]=true (uploadHandler)="fileUploader('content',$event)"></p-fileUpload>
</div>
</div>
<div class="p-field p-grid">
<label for="source" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Original website address </label>
<div class="p-col-12 p-md-10">
<input id="source" type="text" pInputText [(ngModel)]="resource.resourceOrigin">
<div class="field grid">
<label for="source" class="col-12 mb-2 md:col-2 md:mb-0">Original website address </label>
<div class="col-12 md:col-10">
<input id="source" type="text" name="source" pInputText [(ngModel)]="resource.resourceOrigin">
</div>
</div>
<div class="p-field p-grid">
<label for="citation" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">DOI</label>
<div class="p-col-12 p-md-10">
<input id="citation" type="text" pInputText [(ngModel)]="resource.citation">
<div class="field grid">
<label for="citation" class="col-12 mb-2 md:col-2 md:mb-0">DOI</label>
<div class="col-12 md:col-10">
<input id="citation" name="citation" type="text" pInputText [(ngModel)]="resource.citation">
</div>
</div>
<div class="p-field p-grid">
<label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Up to 5 links to further reading</label>
<div class="p-col-12 p-md-10">
<p-chips [(ngModel)]="resource.links" [max]=5 placeholder="Enter relevant links" [allowDuplicate]=false></p-chips>
<div class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">Up to 5 links to further reading</label>
<div class="col-12 md:col-10">
<p-chips [(ngModel)]="resource.links" name="links" [max]=5 placeholder="Enter relevant links" [allowDuplicate]=false></p-chips>
</div>
</div>
<div class="p-field p-grid">
<label for="contactOrg" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Contact institution</label>
<div class="p-col-12 p-md-10">
<input id="contactOrg" type="text" pInputText [(ngModel)]="resource.contactInstitution">
<div class="field grid">
<label for="contactOrg" class="col-12 mb-2 md:col-2 md:mb-0">Contact institution</label>
<div class="col-12 md:col-10">
<input id="contactOrg" name="contactOrg" type="text" pInputText [(ngModel)]="resource.contactInstitution">
</div>
</div>
<!-- <div class="p-field p-grid">
<label for="contactName" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Contact name</label>
<div class="p-col-12 p-md-10">
<!-- <div class="field grid">
<label for="contactName" class="col-12 mb-2 md:col-2 md:mb-0">Contact name</label>
<div class="col-12 md:col-10">
<input id="contactName" type="text" pInputText [(ngModel)]="resource.contactName">
</div>
</div>-->
<div class="p-field p-grid">
<label for="contactEmail" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Contact email</label>
<div class="p-col-12 p-md-10">
<input id="contactEmail" type="text" pInputText [(ngModel)]="resource.contactEmail">
<div class="field grid">
<label for="contactEmail" class="col-12 mb-2 md:col-2 md:mb-0">Contact email</label>
<div class="col-12 md:col-10">
<input id="contactEmail" name="contactEmail" type="text" pInputText [(ngModel)]="resource.contactEmail">
</div>
</div>
<div class="p-field p-grid">
<label for="contactPhone" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Contact phone</label>
<div class="p-col-12 p-md-10">
<input id="contactPhone" type="text" pInputText [(ngModel)]="resource.contactPhone">
<div class="field grid">
<label for="contactPhone" class="col-12 mb-2 md:col-2 md:mb-0">Contact phone</label>
<div class="col-12 md:col-10">
<input id="contactPhone" name="contactPhone" type="text" pInputText [(ngModel)]="resource.contactPhone">
</div>
</div>
</div>
<div class="p-col-12 p-pt-3 button-center">
<p-button label="Save resource" icon="pi pi-save"[loading]="false" (click)="saveResource()"></p-button>
<div class="col-12 pt-3 button-center">
<p-button label="Save resource" icon="pi pi-save"[loading]="false" [disabled]="resourceForm.form.invalid" (submit)="saveResource();resourceForm.control.markAsTouched()"></p-button>
</div>
</form>
</div>
<p-toast></p-toast>
<p-dialog id="pestModal" header="Add new pest" [(visible)]="displayPestModal">
<div class="p-field">
<div class="field">
<label>English common name</label>
<input id="commonName" type="text" pInputText [(ngModel)]="newPest.commonName"/>
</div>
<div class="p-field">
<div class="field">
<label>Latin name</label>
<input id="latinName" type="text" pInputText [(ngModel)]="newPest.latinName"/>
</div>
<div class="p-field">
<div class="field">
<label>EPPO</label>
<input id="eppo" type="text" pInputText [(ngModel)]="newPest.eppo" />
</div>
<div class="p-field button-center">
<div class="field button-center">
<button pButton type="button" class="p-button-help" label="Cancel" (click)="displayPestModal=false" ></button>
<button pButton type="button" class="p-pl-3" label="Submit" (click)="addPest()"></button>
</div>
</p-dialog>
<p-dialog id="cropModal" name="cropModal" header="Add new crop" [(visible)]="displayCropModal">
<div class="p-field">
<div class="field">
<label>English common name</label>
<input id="commonNameCrop" type="text" pInputText [(ngModel)]="newCrop.commonName" />
</div>
<div class="p-field">
<div class="field">
<label>Latin name</label>
<input id="latinNameCrop" type="text" pInputText [(ngModel)]="newCrop.latinName"/>
</div>
<div class="p-field">
<div class="field">
<label>EPPO</label>
<input id="eppoCrop" type="text" pInputText [(ngModel)]="newCrop.eppo"/>
</div>
<div class="p-field button-center">
<div class="field button-center">
<button pButton type="button" class="p-button-help" label="Cancel" (click)="displayCropModal=false" ></button>
<button pButton type="button" class="p-pl-3" label="Submit" (click)="addCrop()" ></button>
</div>
......
src/app/component/add-resource/add-resource.component.ts
......@@ -3,6 +3,7 @@ import {ResourceType, Language, Region, Sector, Project, Resource, Pest, Crop} f
import {ResourceService} from "../../service/resource.service";
import {MessageService} from 'primeng/api';
import {Router} from "@angular/router";
import {FormControl} from "@angular/forms";
@Component({
......@@ -25,7 +26,7 @@ export class AddResourceComponent implements OnInit {
displayCropModal=false;
newPest:Pest = {};
newCrop: Crop = {};
resourceControl = new FormControl('');
constructor(private resourceService:ResourceService,private messageService: MessageService, private router: Router) { }
......@@ -51,7 +52,7 @@ export class AddResourceComponent implements OnInit {
this.resourceService.saveResource(this.resource).subscribe((data: Resource) => {
this.resource = 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']);
}, error => {
......
src/app/component/home/home.component.css
.imageSizeHome{
height: auto;
width: 100%;
max-width: 300px;
max-height: 150px;
max-width: 270px;
max-height: 120px;
display: block;
margin-left: auto;
margin-right: auto;
}
.card {
padding: 2rem;
......@@ -33,4 +34,3 @@
display: inline-block;
}
src/app/component/home/home.component.html
<p-messages [(value)]="disclaimer" [enableService]="false"></p-messages>
<div class="p-grid p-pt-6 p-pl-6">
<div class="p-col-3">
<h3>Sectors</h3>
<p-multiSelect defaultLabel="Select sector" [options]="sectors" [(ngModel)]="selectedSectors" optionLabel="name"></p-multiSelect>
<h3>Country of origin</h3>
<p-multiSelect defaultLabel="Select region" [options]="regions" [(ngModel)]="selectedRegions" optionLabel="name"></p-multiSelect>
<div class="p-field">
<h3>Pest type</h3>
<p-dropdown autoWidth="false" [style]="{'width':'100%'}" placeholder="Select pest type" [options]="pestType" [(ngModel)]="selectedPestType" optionLabel="name" ></p-dropdown>
</div>
<h3>Project</h3>
<div class="grid pt-6 pl-6">
<div class="col-3">
<p class="text-xl">Sectors</p>
<p-multiSelect [selectionLimit]="1" 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>
<div class="field">
<p class="text-xl">Pest type</p>
<p-dropdown autoWidth="false" [style]="{'width':'100%'}" placeholder="Select pest type" [options]="pestType" [(ngModel)]="selectedPestType" optionLabel="name" ></p-dropdown>
</div>
<p class="text-xl">Project</p>
<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>
<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>
</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..."
class="p-button-text p-button-sm p-button-rounded p-button-outlined " (click)="toggleFilters()"></button>
</div>
<div *ngIf="more">
<h3>Specific pest</h3>
<p-multiSelect defaultLabel="Select pests" [selectionLimit]="2" [options]="pests" optionLabel="commonName" filterBy="commonName,latinName,eppo" [(ngModel)]="selectedPests">
<p class="text-xl">Specific pest</p>
<p-multiSelect defaultLabel="Select pests" [selectionLimit]="1" [options]="pests" optionLabel="commonName" filterBy="commonName,latinName,eppo" [(ngModel)]="selectedPests">
<ng-template let-pest pTemplate="item">
<div>{{pest.commonName}} <i *ngIf="pest.latinName !=undefined">
({{pest.latinName}}, {{pest.eppo}})</i></div>
......@@ -36,61 +34,48 @@
</p-multiSelect>
<h3>Specific crop</h3>
<p-multiSelect defaultLabel="Select crops" [selectionLimit]="2" [options]="crops" optionLabel="commonName" filterBy="commonName,latinName,eppo" [(ngModel)]="selectedCrops">
<p class="text-xl">Specific crop</p>
<p-multiSelect defaultLabel="Select crops" [selectionLimit]="1" [options]="crops" optionLabel="commonName" filterBy="commonName,latinName,eppo" [(ngModel)]="selectedCrops">
<ng-template let-crop pTemplate="item">
<div>{{crop.commonName}} <i *ngIf="crop.latinName !=undefined">
({{crop.latinName}}, {{crop.eppo}})</i></div>
</ng-template>
</p-multiSelect>
<h3>Languages</h3>
<p-multiSelect defaultLabel="Select language" [selectionLimit]="2" [options]="languages" [(ngModel)]="selectedLanguages" optionLabel="name"></p-multiSelect>
<p class="text-xl">Languages</p>
<p-multiSelect defaultLabel="Select language" [selectionLimit]="1" [options]="languages" [(ngModel)]="selectedLanguages" optionLabel="name"></p-multiSelect>
<!--<h3>Arbitrary text search</h3>
<input type="text" pInputText [(ngModel)]="searchTerm"/>-->
</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>
</div>
</div>
<div class="p-col-9">
<div class="card">
<div class="col-9">
<p-card>
<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>
</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">
<div class="p-col-12 p-md-4">
<p-card header="{{resource.resourceName}}" subheader="" styleClass="p-card-shadow" routerLink="/resource/{{resource.idResource}}">
<ng-template pTemplate="header">
<div class="p-pb-1 button-right">
<div class="card col-12 md:col-4 flex flex-column p-3 mt-3 justify-content-between" routerLink="/resource/{{resource.idResource}}">
<div class="pb-1 align-self-end">
<p-tag *ngIf="resource.resourceType" [rounded]=true value="{{resource.resourceType.name}}">
</p-tag>
</div>
<img [src]="imagePath+'/'+resource.idResource" class="imageSizeHome">
</ng-template>
<div *ngFor="let sector of resource.relevantSectors" class="horizontal">
<ng-container [ngSwitch]=sector.idSector>
<img *ngSwitchCase="1" class="sector" [src]="'assets/sectors/arable.png'" pTooltip="{{sector.name}}">
<img *ngSwitchCase="5" class="sector" [src]="'assets/sectors/greenhouse.png'" pTooltip="{{sector.name}}">
<img *ngSwitchCase="3" class="sector"[src]="'assets/sectors/orchard.png'" pTooltip="{{sector.name}}">
<img *ngSwitchCase="4" class="sector"[src]="'assets/sectors/vegetables.png'" pTooltip="{{sector.name}}">
<img *ngSwitchCase="2" class="sector" [src]="'assets/sectors/vineyard.png'" pTooltip="{{sector.name}}">
</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>
<div class="">
<img [src]="imagePath+'/'+resource.idResource" class="imageSizeHome">
<p class="text-center">{{resource.resourceName}}</p>
</div>
<div class="align-self-center">
<button pButton type="button" routerLink="/resource/{{resource.idResource}}" icon="pi pi-forward" class="p-button-outlined mr-4" pTooltip="See more..."></button>
<button pButton type="button" icon="pi pi-share-alt" class="p-button-outlined" pTooltip="Share"></button>
</div>
</div>
</ng-template>
</p-dataView>
</p-card>
</div>
</div>
</div>
src/app/component/resource/resource.component.css
.imageSize{
height: auto;
width: 100%;
max-height: 400px;
max-width: 100%;
}
.horizontal{
padding:5px;
......@@ -18,3 +17,7 @@
.button-link{
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="p-d-flex p-col-12 p-jc-center">
<h1>{{resource.resourceName}}</h1>
<div class="grid pt-6 pl-6 flex">
<div class="flex col-12 justify-content-center">
<p class="text-3xl">{{resource.resourceName}}</p>
</div>
<div class="p-col-6 p-d-flex p-flex-column p-jc-center">
<div class="p-col-12">
<div class="col-6 flex flex-column justify-content-center">
<div class="col-12 text-center">
<img [src]="imagePath+'/'+resource.idResource" class="imageSize" >
</div>
<div class="p-col-12">
<p-panel class="p-col-12 p-d-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="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="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="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="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="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="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="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="col-12">
<p-panel class="col-12 inline">
<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="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="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="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="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="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="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="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>
</div>
</div>
<div class="p-col-6 p-d-flex p-flex-column">
<p-panel header="Short summary" class="p-col-12 p-d-block">
<div class="p-d-flex "> {{resource.description}}</div>
<div class="p-d-flex p-mt-5 ">
<div class="p-d-inline p-col-3 p-my-0"[ngStyle]="{color:'var(--surface-500)'}">Sectors</div>
<div class="p-d-inline p-my-0" *ngFor="let sector of resource.sectors">
<img class="sector p-mx-2" [src]="'assets/sectors/'+sector.sectorIcon" pTooltip="{{sector.name}}">
<div class="col-6 flex flex-column">
<p-panel header="Short summary" class="col-12 p-d-block">
<div class="flex "> {{resource.description}}</div>
<div class="flex mt-5 ">
<div class="inline col-3 my-0"[ngStyle]="{color:'var(--surface-500)'}">Sectors</div>
<div class="inline my-0" *ngFor="let sector of resource.sectors">
<img class="sector mx-2" [src]="'assets/sectors/'+sector.sectorIcon" pTooltip="{{sector.name}}">
</div>
</div>
<div class="p-d-flex ">
<div class="p-d-inline p-col-3 p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Regions</div>
<div class="flex ">
<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">
<p class=" p-my-0 p-py-2 p-mx-2" >{{region.name}}</p>
<div *ngFor="let region of resource.regions" class="inline my-0">
<p class=" my-0 py-2 mx-2" >{{region.name}}</p>
</div>
</div>
<div class="p-d-flex ">
<div class="p-d-inline p-col-3 p-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">
<p class=" p-my-0 p-py-2 p-mx-2" >{{pest.commonName}}</p>
<div class="flex flex-wrap">
<div class="inline col-3 my-0" [ngStyle]="{color:'var(--surface-500)'}">Relevant pest(s)</div>
<div *ngFor="let pest of resource.pests" class="inline my-0">
<div class=" my-0 py-2 mx-2" >{{pest.commonName}}</div>
</div>
</div>
<div class="p-d-flex ">
<div class="p-d-inline p-col-3 p-my-0" [ngStyle]="{color:'var(--surface-500)'}"> Relevant crop(s)</div>
<div class="flex flex-wrap">
<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">
<p class="p-my-0 p-py-2 p-mx-2" >{{crop.commonName}}</p>
<div *ngFor="let crop of resource.crops" class="inline my-0">
<p class="my-0 py-2 mx-2" >{{crop.commonName}}</p>
</div>
</div>
</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" >
<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>
</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>
<a href="{{link}}">{{link}}</a>
</div>
</p-panel>
</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>
</div>
</div>
src/styles.css
......@@ -8,12 +8,6 @@
.p-button:not(.p-button-outlined){
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 {
width: 100%;
}
......@@ -46,3 +40,11 @@
.p-button.p-button-outlined{
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