<!-- prettier-ignore-start -->
<main id="main" class="search-all-page enablevue">
<div class="container">
<div class="row breadcrumbs">
<div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="breadcrumbs-container row">
<div class="col-12 col-lg-8 breadcrumb-col">
<nav aria-label="Breadcrumbs" class="mr-auto">
<ol class="breadcrumb ">
<li class="breadcrumb-item"><a href="/">Hem</a></li>
<li class="breadcrumb-item"><a href="/utbildning">Utbildning</a></li>
<li class="breadcrumb-item"><a href="/utbildning">Utbildning</a></li>
<li class="breadcrumb-item active" aria-current="page">En sjukt lång text som egentligen inte borde vara här. Men så blir det när man behöver testa vissa saker. :)</li>
</ol>
</nav>
</div>
<div class="col-12 col-lg-4 breadcrumb-col enablevue">
<nav class="breadcrumbs-actions float-md-left float-lg-right" aria-label="Page functions" id="breadcrumbs">
<ul class="page-functions-list list-unstyled">
<li v-if="isSetAsFavourite" id='remove-bookmark-container' class="page-functions-list-item">
<a href="javascript:void(0)" id="bookmarkremove" class="small-font" v-on:click="removeFavourite()">
<i class="material-icons blue">favorite</i>
<span>Ta bort favorit</span>
</a>
</li>
<li v-else id="save-bookmark-container" class="page-functions-list-item">
<a href="javascript:void(0)" id="bookmarksave" class="small-font" v-on:click="addFavourite()">
<i class="material-icons">favorite_border</i>
<span>Spara</span>
</a>
</li>
<li class="page-functions-list-item">
<div id="readspeaker_button1" class="rs_skip rsbtn rs_preserve">
<a rel="nofollow" class="rsbtn_play" accesskey="L" title="webReader" href="//app-eu.readspeaker.com/cgi-bin/rsent?customerid=5305&lang=sv_se&readid=maincontent;url=">
<span class="rsbtn_left rsimg rspart"><span
class="rsbtn_text"><span>Lyssna</span></span></span>
<span class="rsbtn_right rsimg rsplay rspart"></span>
</a>
</div>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row title-container">
<div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 class="heading-level-1">Search results Test</h1>
</div>
</div>
</div>
<noscript>
<div class="container no-js-search">
<div class="row">
<div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="alert alert-danger" role="alert">
<h4>Javascript inaktiverat</h4>
<p class="mb-0">Söksidan har laddats med begränsad funktionalitet.</p>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<form class="input-group row" method="POST" title="Sök på miun.se">
<div class="col-10">
<input name="searchTerm" title="Sök på miun.se" type="text" class="form-control" placeholder="Sök på miun.se">
</div>
<div class="col-2">
<button class="button-small selected" type="submit">Sök</button>
</div>
</form>
</div>
</div>
<div class="row mt-4">
<div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<header class="d-flex flex-row flex-wrap align-items-center">
<p class=" mb-0"><strong>25</strong> träffar</p>
</header>
</div>
</div>
<div class="row mt-4 mb-5">
<div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<ul class="list-unstyled">
<li class="li-article">
<article>
<h3>
<a href="/hit1">
Rubrik 1
</a>
</h3>
<p>
En lite längre text med en ingress på det länkade objektet
</p>
</article>
</li>
<li class="li-article">
<article>
<h3>
<a href="/hit2">
Rubrik 2
</a>
</h3>
<p>
En lite längre text med en ingress på det länkade objektet
</p>
</article>
</li>
<li class="li-article">
<article>
<h3>
<a href="/hit3">
Rubrik 3
</a>
</h3>
<p>
En lite längre text med en ingress på det länkade objektet
</p>
</article>
</li>
</ul>
</div>
</div>
</div>
</noscript>
<searchall-tabs1 id="searchallpage" v-cloak get-main-facets-url="http://localhost:2000/production/KitModules/EPiFind/Services/SearchService.asmx/GetMainFacets" get-best-bets-url="http://localhost:2000/production/KitModules/EPiFind/Services/SearchService.asmx/GetBestBets"
query-free-text-url="http://localhost:2000/production/KitModules/EPiFind/Services/SearchService.asmx/QueryFreeText" query-free-text-json='{"query":{"querytext":"","mainfacet":"All","facets":[],"metafacets":[],"metafacetsor":[],"take":10,"skip":0,"returnSuggestions":true,"addSuggestionsToQuery":false,"sortorder":"","TitleStartsWith":"","SearchPageId":"65227","Language":"sv","DoNotTrack":false,"NoHits":"","UseAutoboost":false,"AddSpellcheckToQuery":false,"WithAndAsDefaultOperator":false}}'
query="*" query-search-url="http://localhost:2000/production/sv/find/rest/autocomplete/get/" show-more-text="Show more" filter-text="Filters" all-hits-text="All hits" webpages-text="Webpages" document-text="Documents" courses-text="Courses" program-text="Programs"
person-text="Persons" result-show-text="Showing" result-hits-text="hits" sort-by-text="Sort by" relevancy-text="Relevancy" date-text="Date" more-filters-text="More filters" pick-area-text="Pick area" pick-area-all-text="Pick all areas" course-area-text="Area"
course-progression-text="Progression order" course-studyform-text="Studyform" course-study-pace-text="Studypace" course-status-text="Show only" course-status-badge-text="Current educations" course-level-text="Level" course-term-start-text="Term start"
course-study-location-text="Location" application-open-text="Open for application" application-closed-text="Closed" application-late-text="Late application" application-canceled-text="Terminated" education-occasion-text="occasion" education-occasions-text="occasions"
pick-department-text="Department" pick-department-all-text="All departments" pick-location-text="Location" pick-location-all-text="All locations" pick-research-center-text="Research Center" pick-research-center-all-text="All research centers" pick-subject-text="Subject"
pick-subject-all-text="All subjects" pick-title-text="Title" pick-title-all-text="All titles" no-hits-title-text="Your search query returned no hits on miun.se :(" no-hits-sub-text="Did you mean" no-hits-description-text="Check for any spelling errors. Our search has a hard time understanding misspellings. Try using other keywords. There may be another word that is more relevant to your search query. If you do not find what you are looking for, you are welcome to contact us at <a href="mailto:kontakt@miun.se">kontakt@miun.se</a> or +46 (0) 10-142 80 00."
published-text="Published" date-language="sv">
</searchall-tabs1>
</main>
<!-- prettier-ignore-end -->
{{!< ../_preview-page}}
<!-- prettier-ignore-start -->
<main id="main" class="search-all-page enablevue">
{{render '@breadcrumbs' }}
<div class="container">
<div class="row title-container">
<div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 class="heading-level-1" {{{title.epiEditAttribute}}}>{{title.value}}</h1>
</div>
</div>
</div>
<noscript>
{{render '@searchresultnojavascript' noJavascriptResultContext}}
</noscript>
<searchall-tabs1 id="searchallpage" v-cloak get-main-facets-url="{{url.getMainFacets}}" get-best-bets-url="{{url.getBestBets}}"
query-free-text-url="{{url.queryFreeText.url}}" query-free-text-json='{{{url.queryFreeText.json}}}'
query="{{query}}" query-search-url="{{url.querySearchUrl}}"
show-more-text="{{componentTexts.showMoreText.value}}"
filter-text="{{componentTexts.filterText.value}}"
all-hits-text="{{componentTexts.allHitsText.value}}"
webpages-text="{{componentTexts.webpagesText.value}}"
document-text="{{componentTexts.documentText.value}}"
courses-text="{{componentTexts.coursesText.value}}"
program-text="{{componentTexts.programText.value}}"
person-text="{{componentTexts.personText.value}}"
result-show-text="{{componentTexts.resultShowText.value}}"
result-hits-text="{{componentTexts.resultHitsText.value}}"
sort-by-text="{{componentTexts.sortByText.value}}"
relevancy-text="{{componentTexts.relevancyText.value}}"
date-text="{{componentTexts.dateText.value}}"
more-filters-text="{{componentTexts.moreFiltersText.value}}"
pick-area-text="{{componentTexts.pickAreaText.value}}"
pick-area-all-text="{{componentTexts.pickAreaAllText.value}}"
course-area-text="{{componentTexts.courseAreaText.value}}"
course-progression-text="{{componentTexts.courseProgressionText.value}}"
course-studyform-text="{{componentTexts.courseStudyformText.value}}"
course-study-pace-text="{{componentTexts.courseStudyPaceText.value}}"
course-status-text="{{componentTexts.courseStatusText.value}}"
course-status-badge-text="{{componentTexts.courseStatusBadgeText.value}}"
course-level-text="{{componentTexts.courseLevelText.value}}"
course-term-start-text="{{componentTexts.courseTermStartText.value}}"
course-study-location-text="{{componentTexts.courseStudyLocationText.value}}"
application-open-text="{{componentTexts.applicationOpenText.value}}"
application-closed-text="{{componentTexts.applicationClosedText.value}}"
application-late-text="{{componentTexts.applicationLateText.value}}"
application-canceled-text="{{componentTexts.applicationCanceledText.value}}"
education-occasion-text="{{componentTexts.educationOccasionText.value}}"
education-occasions-text="{{componentTexts.educationOccasionsText.value}}"
pick-department-text="{{componentTexts.pickDepartmentText.value}}"
pick-department-all-text="{{componentTexts.pickDepartmentAllText.value}}"
pick-location-text="{{componentTexts.pickLocationText.value}}"
pick-location-all-text="{{componentTexts.pickLocationAllText.value}}"
pick-research-center-text="{{componentTexts.pickResearchCenterText.value}}"
pick-research-center-all-text="{{componentTexts.pickResearchCenterAllText.value}}"
pick-subject-text="{{componentTexts.pickSubjectText.value}}"
pick-subject-all-text="{{componentTexts.pickSubjectAllText.value}}"
pick-title-text="{{componentTexts.pickTitleText.value}}"
pick-title-all-text="{{componentTexts.pickTitleAllText.value}}"
no-hits-title-text="{{componentTexts.noHitsTitleText.value}}"
no-hits-sub-text="{{componentTexts.noHitsSubText.value}}"
no-hits-description-text="{{componentTexts.noHitsDescriptionText.value}}"
published-text="{{componentTexts.publishedText.value}}"
date-language="{{componentTexts.dateLanguage.value}}"
>
</searchall-tabs1>
</main>
<!-- prettier-ignore-end -->
{
"pageId": "testID",
"title": {
"value": "Search results Test",
"epiEditAttribute": ""
},
"componentTexts": {
"showMoreText": {
"value": "Show more"
},
"filterText": {
"value": "Filters"
},
"allHitsText": {
"value": "All hits"
},
"webpagesText": {
"value": "Webpages"
},
"documentText": {
"value": "Documents"
},
"coursesText": {
"value": "Courses"
},
"programText": {
"value": "Programs"
},
"personText": {
"value": "Persons"
},
"resultShowText": {
"value": "Showing"
},
"resultHitsText": {
"value": "hits"
},
"sortByText": {
"value": "Sort by"
},
"relevancyText": {
"value": "Relevancy"
},
"dateText": {
"value": "Date"
},
"moreFiltersText": {
"value": "More filters"
},
"pickAreaText": {
"value": "Pick area"
},
"pickAreaAllText": {
"value": "Pick all areas"
},
"courseAreaText": {
"value": "Area"
},
"courseProgressionText": {
"value": "Progression order"
},
"courseStudyformText": {
"value": "Studyform"
},
"courseStudyPaceText": {
"value": "Studypace"
},
"courseStatusText": {
"value": "Show only"
},
"courseStatusBadgeText": {
"value": "Current educations"
},
"courseLevelText": {
"value": "Level"
},
"courseTermStartText": {
"value": "Term start"
},
"courseStudyLocationText": {
"value": "Location"
},
"applicationOpenText": {
"value": "Open for application"
},
"applicationClosedText": {
"value": "Closed"
},
"applicationLateText": {
"value": "Late application"
},
"applicationCanceledText": {
"value": "Terminated"
},
"educationOccasionText": {
"value": "occasion"
},
"educationOccasionsText": {
"value": "occasions"
},
"pickDepartmentText": {
"value": "Department"
},
"pickDepartmentAllText": {
"value": "All departments"
},
"pickLocationText": {
"value": "Location"
},
"pickLocationAllText": {
"value": "All locations"
},
"pickResearchCenterText": {
"value": "Research Center"
},
"pickResearchCenterAllText": {
"value": "All research centers"
},
"pickSubjectText": {
"value": "Subject"
},
"pickSubjectAllText": {
"value": "All subjects"
},
"pickTitleText": {
"value": "Title"
},
"pickTitleAllText": {
"value": "All titles"
},
"noHitsTitleText": {
"value": "Your search query returned no hits on miun.se :("
},
"noHitsSubText": {
"value": "Did you mean"
},
"noHitsDescriptionText": {
"value": "Check for any spelling errors. Our search has a hard time understanding misspellings. Try using other keywords. There may be another word that is more relevant to your search query. If you do not find what you are looking for, you are welcome to contact us at <a href=\"mailto:kontakt@miun.se\">kontakt@miun.se</a> or +46 (0) 10-142 80 00."
},
"publishedText": {
"value": "Published"
},
"dateLanguage": {
"value": "sv"
}
},
"query": "*",
"url": {
"getMainFacets": "http://localhost:2000/production/KitModules/EPiFind/Services/SearchService.asmx/GetMainFacets",
"getBestBets": "http://localhost:2000/production/KitModules/EPiFind/Services/SearchService.asmx/GetBestBets",
"querySearchUrl": "http://localhost:2000/production/sv/find/rest/autocomplete/get/",
"queryFreeText": {
"url": "http://localhost:2000/production/KitModules/EPiFind/Services/SearchService.asmx/QueryFreeText",
"json": "{\"query\":{\"querytext\":\"\",\"mainfacet\":\"All\",\"facets\":[],\"metafacets\":[],\"metafacetsor\":[],\"take\":10,\"skip\":0,\"returnSuggestions\":true,\"addSuggestionsToQuery\":false,\"sortorder\":\"\",\"TitleStartsWith\":\"\",\"SearchPageId\":\"65227\",\"Language\":\"sv\",\"DoNotTrack\":false,\"NoHits\":\"\",\"UseAutoboost\":false,\"AddSpellcheckToQuery\":false,\"WithAndAsDefaultOperator\":false}}"
}
}
}
import axios from 'axios';
import ClickOutside from 'vue-click-outside';
Vue.component("searchall-tabs1", {
props: [
"getMainFacetsUrl",
"getBestBetsUrl",
"queryFreeTextUrl",
"queryFreeTextJson",
"querySearchUrl",
"query",
"showMoreText",
"filterText",
"allHitsText",
"webpagesText",
"documentText",
"coursesText",
"programText",
"personText",
"resultShowText",
"resultHitsText",
"sortByText",
"relevancyText",
"dateText",
"pickAreaText",
"pickAreaAllText",
"moreFiltersText",
"courseAreaText",
"courseProgressionText",
"courseStudyformText",
"courseStudyPaceText",
"courseStatusText",
"courseLevelText",
"courseTermStartText",
"courseStudyLocationText",
"courseStatusBadgeText",
"applicationOpenText",
"applicationClosedText",
"applicationLateText",
"applicationCanceledText",
"educationOccasionText",
"educationOccasionsText",
"pickDepartmentText",
"pickDepartmentAllText",
"pickLocationText",
"pickLocationAllText",
"pickResearchCenterText",
"pickResearchCenterAllText",
"pickSubjectText",
"pickSubjectAllText",
"pickTitleText",
"pickTitleAllText",
"noHitsTitleText",
"noHitsSubText",
"noHitsDescriptionText",
"publishedText",
"dateLanguage"
],
data() {
return {
texts: {
showMoreText: this.showMoreText,
filterText: this.filterText,
allHitsText: this.allHitsText,
webpagesText: this.webpagesText,
documentText: this.documentText,
coursesText: this.coursesText,
programText: this.programText,
personText: this.personText,
resultShowText: this.resultShowText,
resultHitsText: this.resultHitsText,
sortByText: this.sortByText,
relevancyText: this.relevancyText,
dateText: this.dateText,
pickAreaText: this.pickAreaText,
pickAreaAllText: this.pickAreaAllText,
moreFiltersText: this.moreFiltersText,
courseAreaText: this.courseAreaText,
courseProgressionText: this.courseProgressionText,
courseStudyformText: this.courseStudyformText,
courseStudyPaceText: this.courseStudyPaceText,
courseStatusText: this.courseStatusText,
courseStatusBadgeText: this.courseStatusBadgeText,
courseLevelText: this.courseLevelText,
courseTermStartText: this.courseTermStartText,
courseStudyLocationText: this.courseStudyLocationText,
applicationOpenText: this.applicationOpenText,
applicationClosedText: this.applicationClosedText,
applicationLateText: this.applicationLateText,
applicationCanceledText: this.applicationCanceledText,
educationOccasionText: this.educationOccasionText,
educationOccasionsText: this.educationOccasionsText,
pickDepartmentText: this.pickDepartmentText,
pickDepartmentAllText: this.pickDepartmentAllText,
pickLocationText: this.pickLocationText,
pickLocationAllText: this.pickLocationAllText,
pickResearchCenterText: this.pickResearchCenterText,
pickResearchCenterAllText: this.pickResearchCenterAllText,
pickSubjectText: this.pickSubjectText,
pickSubjectAllText: this.pickSubjectAllText,
pickTitleText: this.pickTitleText,
pickTitleAllText: this.pickTitleAllText,
noHitsTitleText: this.noHitsTitleText,
noHitsSubText: this.noHitsSubText,
noHitsDescriptionText: this.noHitsDescriptionText,
publishedText: this.publishedText,
dateLanguage: this.dateLanguage
},
tabs: [
"allHits",
"webpageHits",
"documentHits",
"courseHits1",
"programHits1",
"personHits"
],
spellchecks: "",
currentFacet: "",
selected: "programHits1",
request: JSON.parse(this.queryFreeTextJson),
userInput: JSON.parse(JSON.stringify(this.query)),
fetchFreeTextUrl: JSON.parse(JSON.stringify(this.queryFreeTextUrl)),
fetchBestBetsUrl: JSON.parse(JSON.stringify(this.getBestBetsUrl)),
fetchFacetsUrl: JSON.parse(JSON.stringify(this.getMainFacetsUrl)),
isInputFocus: false,
userQuery: "",
allCount: 0,
webCount: 0,
documentCount: 0,
courseCount: 0,
programCount: 0,
personCount: 0,
promotedPost: "",
autoCompleteHits: [],
loading: false,
showAutoComplete: false,
waitForUrl: false,
MainFacet: [],
facets: [],
metafacets: [],
metafacetsor: [],
totaltake: 10,
req: "",
activeMetaData: []
};
},
mounted() {
let urlParams = new URLSearchParams(window.location.search);
let queryText = "*";
let facets = "";
let MainFacet = "All";
let metafacets = "";
let metafacetsor = "";
let totaltake = 10;
if (urlParams.get("querytext")) {
queryText = urlParams.get("querytext");
}
if (urlParams.get("MainFacet")) {
MainFacet = urlParams.get("MainFacet");
}
if (urlParams.get("metafacets")) {
metafacets = urlParams.get("metafacets");
}
if (urlParams.get("metafacetsor")) {
metafacetsor = urlParams.get("metafacetsor");
}
if (urlParams.get("totaltake")) {
totaltake = urlParams.get("totaltake");
}
console.log({"first": metafacets})
history.pushState(
{
page: 1
},
"searchallpage",
`?MainFacet=${encodeURI(
MainFacet
)}&querytext=${queryText}&facets=${facets}&metafacets=${metafacets}&metafacetsor=${metafacetsor}&totaltake=${totaltake}`
);
if (this.request) {
let req = {
...this.request
};
if (queryText) {
this.userInput = queryText;
this.userQuery = queryText;
}
if (facets) {
let facetsFromUrl = facets.split(",");
console.log(facetsFromUrl)
req.query.facets = facetsFromUrl;
}
if (MainFacet) {
let allFacet = "All";
let webFacet = "65227|Webbsidor|-1|False";
let docFacet = "65227|Dokument|0|False";
let courseFacet = "65227|Kurser|1|False";
let programFacet = "65227|Program|1|False";
let personFacet = "65227|Personer|2|False";
if (decodeURI(MainFacet) == allFacet) {
this.selected = "allHits";
this.currentFacet = allFacet;
}
if (decodeURI(MainFacet) == webFacet) {
this.selected = "webpageHits";
this.currentFacet = webFacet;
}
if (decodeURI(MainFacet) == docFacet) {
this.selected = "documentHits";
this.currentFacet = docFacet;
}
if (decodeURI(MainFacet) == courseFacet) {
this.selected = "courseHits1";
this.currentFacet = courseFacet;
}
if (decodeURI(MainFacet) == programFacet) {
this.selected = "programHits1";
this.currentFacet = programFacet;
}
if (decodeURI(MainFacet) == personFacet) {
this.selected = "personHits";
this.currentFacet = personFacet;
}
req.query.mainfacet = MainFacet;
}
if (metafacets) {
// let meta = [];
// metafacets.map(m => meta.push(m))
// console.log(meta)
// let meta = [];
// meta.push(metafacets)
// console.log(metafacets)
// let ad = encodeURIComponent(metafacets);
// ad.replace(/\+/g, "%20");
// console.log({"ad":ad})
// let array = metafacets.split(/,(?!"(?:(?:"){2})*$)/);
// console.log(array);
// let arr = metafacets.split(/,|/)
// console.log(arr)
// let asd = "'" + metafacets + "'";
// var string ='"long one","short","oh, look","wow.", ""',
// array = JSON.parse('[' + asd + ']');
// console.log(array);
if (metafacets.includes(",")) {
console.log("metafacets here 1")
let metafacetsFromUrl = metafacets.split(",");
req.query.metafacets = metafacetsFromUrl;
console.log({"metafacets here 1": metafacetsFromUrl})
} else {
let meta = [];
meta.push(metafacets);
req.query.metafacets = meta;
}
}
if (metafacetsor) {
console.log("metafacets here 2")
let metafacetsorFromUrl = metafacetsor.split(",");
req.query.metafacetsor = metafacetsorFromUrl;
}
if (totaltake) {
req.query.take = totaltake;
}
this.req = req;
}
this.showAutoComplete = false;
if (this.fetchFacetsUrl && this.query) {
this.fetchTotalHits();
}
if(this.fetchBestBetsUrl && this.query ) {
this.fetchBestBets();
}
},
watch: {
userQuery: function(newVal, oldVal) {
if (newVal !== oldVal) {
this.autocomplete(newVal);
}
if (newVal.length < 2) {
this.showAutoComplete = false;
this.autoCompleteHits = "";
}
},
selected: function(newVal, oldVal) {
if(newVal !== oldVal ) {
this.fetchBestBets();
}
}
},
methods: {
switchView(tab) {
let urlParams = new URLSearchParams(window.location.search);
let queryText = urlParams.get("querytext");
let allFacet = encodeURI("All");
let webFacet = encodeURI("65227|Webbsidor|-1|False");
let docFacet = encodeURI("65227|Dokument|0|False");
let courseFacet = encodeURI("65227|Kurser|1|False");
let programFacet = encodeURI("65227|Program|1|False");
let personFacet = encodeURI("65227|Personer|2|False");
if (tab == "allHits") {
this.resetUrl(allFacet, queryText);
this.currentFacet = decodeURI(allFacet)
}
if (tab == "webpageHits") {
this.resetUrl(webFacet, queryText);
this.currentFacet = decodeURI(webFacet)
}
if (tab == "documentHits") {
this.resetUrl(docFacet, queryText);
this.currentFacet = decodeURI(docFacet)
}
if (tab == "courseHits1") {
this.resetUrl(courseFacet, queryText);
this.currentFacet = decodeURI(courseFacet)
}
if (tab == "programHits1") {
this.resetUrl(programFacet, queryText);
this.currentFacet = decodeURI(programFacet)
}
if (tab == "personHits") {
this.resetUrl(personFacet, queryText);
this.currentFacet = decodeURI(personFacet)
}
this.selected = tab;
},
openAutoCompleteWindow() {
if (this.userQuery.length > 1) {
this.showAutoComplete = true;
} else {
this.showAutoComplete = false;
}
},
resetUrl(MainFacet, query) {
history.pushState(
{
page: 1
},
"searchallpage",
`?MainFacet=${
MainFacet ? encodeURIComponent(MainFacet) : "All"
}&querytext=${
query ? encodeURIComponent(query) : "*"
}&facets=&metafacets=&metafacetsor=&totaltake=10`
);
this.req.query.facets = [];
this.req.query.metafacets = [];
this.req.query.metafacetsor = [];
this.req.query.take = 10;
},
setUrl(mainfacet, querytext, metafacet, take ) {
let url = "mainfacet: " + mainfacet +" querytext: "+ querytext + " metafacets: "+metafacet +" take: " +take
console.log("Setting the url to", url)
history.pushState(
{page: 1},
"searchallpage",
`?MainFacet=${mainfacet}&querytext=${querytext}&facets=&metafacets=${metafacet}&metafacetsor=&totaltake=${take}`
);
},
setMetaFacet(mainfacet, querytext, metafacet, take){
return new Promise((resolve, reject) => {
if(metafacet.length == 1) {
let singleMetafacet = encodeURI(metafacet);
this.setUrl(encodeURI(mainfacet), querytext, singleMetafacet, take);
resolve();
} else if(metafacet.length > 1) {
console.log({"Parent": metafacet})
let multipleMetafacets = metafacet.map(m => encodeURI(m)).join();
console.log({"multipleMetafacets": multipleMetafacets})
this.setUrl(encodeURI(mainfacet), querytext, multipleMetafacets, take);
resolve();
} else if(metafacet.length < 1) {
this.setUrl(encodeURI(mainfacet), querytext, "", take)
resolve();
}
})
},
setUrl1(MainFacet, value, take) {
if (
!this.activeMetaData.includes(value) &&
![
"allDepartments",
"allLocations",
"allResearchCenters",
"allSubjects",
"allTitles",
"allAreas",
"allStudyforms",
"allStudyPace",
"allLevels",
"allTermStarts",
"allStudyLocations"
].includes(value)
) {
this.activeMetaData.push(value);
let metafacets = this.activeMetaData.join();
history.pushState(
{
page: 1
},
"searchallpage",
`?MainFacet=${
MainFacet ? encodeURIComponent(MainFacet) : "All"
}&querytext=${
this.userInput ? encodeURIComponent(this.userInput) : "*"
}&facets=&metafacets=${
metafacets ? encodeURIComponent(metafacets) : ""
}&metafacetsor=&totaltake=${take ? Number(take) : 10}`
);
} else if (value == "allDepartments") {
this.activeMetaData.map(x => {
if (x.includes("Department|")) {
let index = this.activeMetaData.indexOf(x);
this.activeMetaData.splice(index, 1);
}
});
let metafacets = this.activeMetaData.join();
history.pushState(
{
page: 1
},
"searchallpage",
`?MainFacet=${
MainFacet ? encodeURIComponent(MainFacet) : "All"
}&querytext=${
this.userInput ? encodeURIComponent(this.userInput) : "*"
}&facets=&metafacets=${
metafacets ? encodeURIComponent(metafacets) : ""
}&metafacetsor=&totaltake=${take ? Number(take) : 10}`
);
} else if (value == "allLocations") {
this.activeMetaData.map(x => {
if (x.includes("Location|")) {
let index = this.activeMetaData.indexOf(x);
this.activeMetaData.splice(index, 1);
}
});
let metafacets = this.activeMetaData.join();
history.pushState(
{
page: 1
},
"searchallpage",
`?MainFacet=${
MainFacet ? encodeURIComponent(MainFacet) : "All"
}&querytext=${
this.userInput ? encodeURIComponent(this.userInput) : "*"
}&facets=&metafacets=${
metafacets ? encodeURIComponent(metafacets) : ""
}&metafacetsor=&totaltake=${take ? Number(take) : 10}`
);
} else if (value == "allResearchCenters") {
this.activeMetaData.map(x => {
if (x.includes("ResearchCenter|")) {
let index = this.activeMetaData.indexOf(x);
this.activeMetaData.splice(index, 1);
}
});
let metafacets = this.activeMetaData.join();
history.pushState(
{
page: 1
},
"searchallpage",
`?MainFacet=${
MainFacet ? encodeURIComponent(MainFacet) : "All"
}&querytext=${
this.userInput ? encodeURIComponent(this.userInput) : "*"
}&facets=&metafacets=${
metafacets ? encodeURIComponent(metafacets) : ""
}&metafacetsor=&totaltake=${take ? Number(take) : 10}`
);
} else if (value == "allSubjects") {
this.activeMetaData.map(x => {
if (x.includes("Subject|")) {
let index = this.activeMetaData.indexOf(x);
this.activeMetaData.splice(index, 1);
}
});
let metafacets = this.activeMetaData.join();
history.pushState(
{
page: 1
},
"searchallpage",
`?MainFacet=${
MainFacet ? encodeURIComponent(MainFacet) : "All"
}&querytext=${
this.userInput ? encodeURIComponent(this.userInput) : "*"
}&facets=&metafacets=${
metafacets ? encodeURIComponent(metafacets) : ""
}&metafacetsor=&totaltake=${take ? Number(take) : 10}`
);
} else if (value == "allTitles") {
this.activeMetaData.map(x => {
if (x.includes("Title|")) {
let index = this.activeMetaData.indexOf(x);
this.activeMetaData.splice(index, 1);
}
});
let metafacets = this.activeMetaData.join();
history.pushState(
{
page: 1
},
"searchallpage",
`?MainFacet=${
MainFacet ? encodeURIComponent(MainFacet) : "All"
}&querytext=${
this.userInput ? encodeURIComponent(this.userInput) : "*"
}&facets=&metafacets=${
metafacets ? encodeURIComponent(metafacets) : ""
}&metafacetsor=&totaltake=${take ? Number(take) : 10}`
);
} else if (value == "allAreas") {
this.activeMetaData.map(x => {
if (x.includes("Area|")) {
let index = this.activeMetaData.indexOf(x);
this.activeMetaData.splice(index, 1);
}
});
let metafacets = this.activeMetaData.join();
history.pushState(
{
page: 1
},
"searchallpage",
`?MainFacet=${
MainFacet ? encodeURIComponent(MainFacet) : "All"
}&querytext=${
this.userInput ? encodeURIComponent(this.userInput) : "*"
}&facets=&metafacets=${
metafacets ? encodeURIComponent(metafacets) : ""
}&metafacetsor=&totaltake=${take ? Number(take) : 10}`
);
} else if (value == "allStudyforms") {
this.activeMetaData.map(x => {
if (x.includes("StudyForm|")) {
let index = this.activeMetaData.indexOf(x);
this.activeMetaData.splice(index, 1);
}
});
let metafacets = this.activeMetaData.join();
history.pushState(
{
page: 1
},
"searchallpage",
`?MainFacet=${
MainFacet ? encodeURIComponent(MainFacet) : "All"
}&querytext=${
this.userInput ? encodeURIComponent(this.userInput) : "*"
}&facets=&metafacets=${
metafacets ? encodeURIComponent(metafacets) : ""
}&metafacetsor=&totaltake=${take ? Number(take) : 10}`
);
} else if (value == "allStudyPace") {
this.activeMetaData.map(x => {
if (x.includes("StudyPace|")) {
let index = this.activeMetaData.indexOf(x);
this.activeMetaData.splice(index, 1);
}
});
let metafacets = this.activeMetaData.join();
history.pushState(
{
page: 1
},
"searchallpage",
`?MainFacet=${
MainFacet ? encodeURIComponent(MainFacet) : "All"
}&querytext=${
this.userInput ? encodeURIComponent(this.userInput) : "*"
}&facets=&metafacets=${
metafacets ? encodeURIComponent(metafacets) : ""
}&metafacetsor=&totaltake=${take ? Number(take) : 10}`
);
} else if (value == "allLevels") {
this.activeMetaData.map(x => {
if (x.includes("Level|")) {
let index = this.activeMetaData.indexOf(x);
this.activeMetaData.splice(index, 1);
}
});
let metafacets = this.activeMetaData.join();
history.pushState(
{
page: 1
},
"searchallpage",
`?MainFacet=${
MainFacet ? encodeURIComponent(MainFacet) : "All"
}&querytext=${
this.userInput ? encodeURIComponent(this.userInput) : "*"
}&facets=&metafacets=${
metafacets ? encodeURIComponent(metafacets) : ""
}&metafacetsor=&totaltake=${take ? Number(take) : 10}`
);
} else if (value == "allTermStarts") {
this.activeMetaData.map(x => {
if (x.includes("TermStart|")) {
let index = this.activeMetaData.indexOf(x);
this.activeMetaData.splice(index, 1);
}
});
let metafacets = this.activeMetaData.join();
history.pushState(
{
page: 1
},
"searchallpage",
`?MainFacet=${
MainFacet ? encodeURIComponent(MainFacet) : "All"
}&querytext=${
this.userInput ? encodeURIComponent(this.userInput) : "*"
}&facets=&metafacets=${
metafacets ? encodeURIComponent(metafacets) : ""
}&metafacetsor=&totaltake=${take ? Number(take) : 10}`
);
} else if (value == "allStudyLocations") {
this.activeMetaData.map(x => {
if (x.includes("StudyLocation|")) {
let index = this.activeMetaData.indexOf(x);
this.activeMetaData.splice(index, 1);
}
});
let metafacets = this.activeMetaData.join();
history.pushState(
{
page: 1
},
"searchallpage",
`?MainFacet=${
MainFacet ? encodeURIComponent(MainFacet) : "All"
}&querytext=${
this.userInput ? encodeURIComponent(this.userInput) : "*"
}&facets=&metafacets=${
metafacets ? encodeURIComponent(metafacets) : ""
}&metafacetsor=&totaltake=${take ? Number(take) : 10}`
);
} else if (value == "") {
let metafacets = this.activeMetaData.join();
history.pushState(
{
page: 1
},
"searchallpage",
`?MainFacet=${
MainFacet ? encodeURIComponent(MainFacet) : "All"
}&querytext=${
this.userInput ? encodeURIComponent(this.userInput) : "*"
}&facets=&metafacets=${
metafacets ? encodeURIComponent(metafacets) : ""
}&metafacetsor=&totaltake=${take ? Number(take) : 10}`
);
} else if (this.activeMetaData.includes(value)) {
var result = this.activeMetaData.indexOf(value);
this.activeMetaData.splice(result, 1);
let metafacets = this.activeMetaData.join();
history.pushState(
{
page: 1
},
"searchallpage",
`?MainFacet=${
MainFacet ? encodeURIComponent(MainFacet) : "All"
}&querytext=${
this.userInput ? encodeURIComponent(this.userInput) : "*"
}&facets=&metafacets=${
metafacets ? encodeURIComponent(metafacets) : ""
}&metafacetsor=&totaltake=${take ? Number(take) : 10}`
);
}
},
async autocomplete(val) {
if (typeof val === "string") {
if (val.length >= 2 && this.querySearchUrl) {
this.loading = true;
try {
const response = await fetch(
this.querySearchUrl + val + "?size=5"
).then(response => response.json());
if (response.Hits) {
this.autoCompleteHits = response.Hits;
}
this.loading = false;
} catch (error) {
throw Error(error);
}
} else {
this.autoCompleteHits = "";
}
}
},
hideAutoCompleteWindow() {
this.showAutoComplete = false;
},
updateSpellChecks(val) {
if (val) {
this.spellchecks = val;
}
},
submitQuery(e) {
e.preventDefault();
let allFacet = encodeURI("All");
let webFacet = encodeURI("65227|Webbsidor|-1|False");
let docFacet = encodeURI("65227|Dokument|0|False");
let courseFacet = encodeURI("65227|Kurser|1|False");
let programFacet = encodeURI("65227|Program|1|False");
let personFacet = encodeURI("65227|Personer|2|False");
if (this.userQuery.length > 0) {
this.showAutoComplete = false;
this.userInput = this.userQuery;
this.fetchTotalHits();
if (this.selected == "allHits") {
history.pushState(
{
page: 1
},
"searchallpage",
`?MainFacet=${allFacet}&querytext=${
this.userQuery ? encodeURIComponent(this.userQuery) : "*"
}&facets=&metafacets=&metafacetsor=&totaltake=${
this.totaltake ? encodeURIComponent(this.totaltake) : 10
}`
);
window.location.reload();
}
if (this.selected == "webpageHits") {
history.pushState(
{
page: 1
},
"searchallpage",
`?MainFacet=${webFacet}&querytext=${
this.userQuery ? encodeURIComponent(this.userQuery) : "*"
}&facets=&metafacets=&metafacetsor=&totaltake=${
this.totaltake ? encodeURIComponent(this.totaltake) : 10
}`
);
window.location.reload();
}
if (this.selected == "documentHits") {
history.pushState(
{
page: 1
},
"searchallpage",
`?MainFacet=${docFacet}&querytext=${
this.userQuery ? encodeURIComponent(this.userQuery) : "*"
}&facets=&metafacets=&metafacetsor=&totaltake=${
this.totaltake ? encodeURIComponent(this.totaltake) : 10
}`
);
window.location.reload();
}
if (this.selected == "courseHits1") {
history.pushState(
{
page: 1
},
"searchallpage",
`?MainFacet=${courseFacet}&querytext=${
this.userQuery ? encodeURIComponent(this.userQuery) : "*"
}&facets=&metafacets=&metafacetsor=&totaltake=${
this.totaltake ? encodeURIComponent(this.totaltake) : 10
}`
);
window.location.reload();
}
if (this.selected == "programHits1") {
history.pushState(
{
page: 1
},
"searchallpage",
`?MainFacet=${programFacet}&querytext=${
this.userQuery ? encodeURIComponent(this.userQuery) : "*"
}&facets=&metafacets=&metafacetsor=&totaltake=${
this.totaltake ? encodeURIComponent(this.totaltake) : 10
}`
);
window.location.reload();
}
if (this.selected == "personHits") {
history.pushState(
{
page: 1
},
"searchallpage",
`?MainFacet=${personFacet}&querytext=${
this.userQuery ? encodeURIComponent(this.userQuery) : "*"
}&facets=&metafacets=&metafacetsor=&totaltake=${
this.totaltake ? encodeURIComponent(this.totaltake) : 10
}`
);
window.location.reload();
}
this.fetchBestBets();
}
},
async fetchBestBets() {
try {
let request = {
query: {
Language: this.dateLanguage,
SearchPageId: "65227",
TitleStartsWith: "",
addSuggestionsToQuery: false,
mainfacet: this.currentFacet,
querytext: this.userInput
}
};
axios.post(this.fetchBestBetsUrl, request).then(response => {
if(response && response.data && response.data.d && response.data.d.length > 0) {
this.promotedPost = response.data.d[0];
}
})
} catch (error) {
throw new Error('Något gick fel. Kunde inte hämta best bets.');
}
},
async fetchTotalHits() {
try {
let req = {
query: {
Language: "sv",
SearchPageId: "65227",
TitleStartsWith: "",
addSuggestionsToQuery: false,
facets: [],
mainfacet: "All",
metafacets: [],
metafacetsor: [],
querytext: this.userInput
}
};
let res = await axios.post(this.fetchFacetsUrl, req);
let data = res.data.d;
this.allCount = 0;
this.webCount = 0;
this.documentCount = 0;
this.courseCount = 0;
this.programCount = 0;
this.personCount = 0;
let allFacet = "All";
let webFacet = "65227|Webbsidor|-1|False";
let docFacet = "65227|Dokument|0|False";
let courseFacet = "65227|Kurser|1|False";
let programFacet = "65227|Program|1|False";
let personFacet = "65227|Personer|2|False";
if (data.MainFacets.length > 0) {
data.MainFacets.map(x => {
if (x.Term == allFacet) {
this.allCount = x.Count;
}
if (x.Term == webFacet) {
this.webCount = x.Count;
}
if (x.Term == docFacet) {
this.documentCount = x.Count;
}
if (x.Term == courseFacet) {
this.courseCount = x.Count;
}
if (x.Term == programFacet) {
this.programCount = x.Count;
}
if (x.Term == personFacet) {
this.personCount = x.Count;
}
});
}
} catch (error) {
throw Error(error);
}
}
},
template: `
<div class="container" >
<div class="row mb-xs">
<div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<form autocomplete="off" @submit="this.submitQuery" :class="{'is--focused': isInputFocus}" class="search--input--container form-control" ref="search">
<input type="text" name="name" v-model="userQuery" @input="openAutoCompleteWindow" :placeholder="userInput ? userInput : 'Sök'" @focus="isInputFocus = true" @blur="isInputFocus = false" />
<transition name="fade" mode="in-out">
<button @click="this.submitQuery" type="submit" v-if="!isInputFocus "
class="d-flex align-items-center justify-content-center search--btn">
<span class="material-icons ">search</span>
</button>
<button type="submit" @click="this.submitQuery" v-else
class="d-flex search--btn align-items-center active justify-content-center">
<span class="material-icons blue">search</span>
</button>
</transition>
<transition name="fade" mode="out-in">
<autocomplete-hits :selectedComponent="selected" @hideAutoComplete="this.hideAutoCompleteWindow" v-if="this.autoCompleteHits && this.showAutoComplete" :hits="this.autoCompleteHits" :isLoading="this.loading"></autocomplete-hits>
</transition>
</form>
</div>
</div>
<transition mode="out-in" name="fade">
<spellcheckscomponent :selectedComponent="selected" class="mb-xs" v-if="spellchecks.length > 0" :translation="noHitsSubText" :hits="spellchecks"></spellcheckscomponent>
</transition>
<div class="row mb-xs">
<div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h4 class="heading-level-4">{{texts.filterText}}</h4>
<button
v-for="tab in tabs"
:key="tab"
@click="switchView(tab)"
class="button-small mr-2 mb-2"
:class="['tab-btn', { 'selected': selected === tab }]"
>
<template v-if="tab == 'allHits'">{{texts.allHitsText}} ({{allCount ? allCount : 0}})</template>
<template v-if="tab == 'webpageHits'">{{texts.webpagesText}} ({{webCount ? webCount : 0}})</template>
<template v-if="tab == 'documentHits'">{{texts.documentText}} ({{documentCount ? documentCount : 0}})</template>
<template v-if="tab == 'courseHits1'">{{texts.coursesText}} ({{courseCount ? courseCount : 0}})</template>
<template v-if="tab == 'programHits1'">{{texts.programText}} ({{programCount ? programCount : 0}})</template>
<template v-if="tab == 'personHits'">{{texts.personText}} ({{personCount ? personCount : 0}})</template>
</button>
</div>
<div class="col-12">
<transition name="fade" mode="out-in">
<component
:promotedPost="this.promotedPost"
:dateLanguage="texts.dateLanguage"
:resultShowText="texts.resultShowText"
:resultHitsText="texts.resultHitsText"
:sortByText="texts.sortByText"
:relevancyText="texts.relevancyText"
:dateText="texts.dateText"
:showMoreText="texts.showMoreText"
:pickAreaText="texts.pickAreaText"
:pickAreaAllText="texts.pickAreaAllText"
:moreFiltersText="texts.moreFiltersText"
:selectedComponent="selected"
:courseAreaText="texts.courseAreaText"
:courseProgressionText="texts.courseProgressionText"
:courseStudyformText="texts.courseStudyformText"
:courseStudyPaceText="texts.courseStudyPaceText"
:courseStatusText="texts.courseStatusText"
:courseLevelText="texts.courseLevelText"
:courseTermStartText="texts.courseTermStartText"
:courseStudyLocationText="texts.courseStudyLocationText"
:courseStatusBadgeText="texts.courseStatusBadgeText"
:applicationOpenText="texts.applicationOpenText"
:applicationClosedText="texts.applicationClosedText"
:applicationLateText="texts.applicationLateText"
:applicationCanceledText="texts.applicationCanceledText"
:educationOccasionText="texts.educationOccasionText"
:educationOccasionsText="texts.educationOccasionsText"
:pickDepartmentText="texts.pickDepartmentText"
:pickDepartmentAllText="texts.pickDepartmentAllText"
:pickLocationText="texts.pickLocationText"
:pickLocationAllText="texts.pickLocationAllText"
:pickResearchCenterText="texts.pickResearchCenterText"
:pickResearchCenterAllText="texts.pickResearchCenterAllText"
:pickSubjectText="texts.pickSubjectText"
:pickSubjectAllText="texts.pickSubjectAllText"
:pickTitleText="texts.pickTitleText"
:pickTitleAllText="texts.pickTitleAllText"
:noHitsTitleText="texts.noHitsTitleText"
:noHitsSubText="texts.noHitsSubText"
:publishedText="texts.publishedText"
:noHitsDescriptionText="texts.noHitsDescriptionText"
@passSpellChecks="this.updateSpellChecks"
@addedMeta="this.setMetaFacet" v-if="this.req" :is="selected" :fetchUrl="this.fetchFreeTextUrl" :query="this.userInput" :request="this.req"></component>
</transition>
</div>
</div>
</div>
`
});
//Tab Components
Vue.component("allHits", {
props: [
"request",
"query",
"fetchUrl",
"resultShowText",
"resultHitsText",
"sortByText",
"relevancyText",
"dateText",
"showMoreText",
"noHitsTitleText",
"noHitsSubText",
"noHitsDescriptionText",
"dateLanguage",
"publishedText",
"selectedComponent",
"promotedPost"
],
data() {
return {
localRequest: JSON.parse(JSON.stringify(this.request)),
userQuery: JSON.parse(JSON.stringify(this.query)),
loading: false,
hits: [],
hasSearched: false,
sortOrder: "",
spellChecks: [],
totalHits: 0,
noHitsTitle: this.noHitsTitleText,
noHitsSub: this.noHitsSubText,
noHitsDescription: this.noHitsDescriptionText,
dateLang: this.dateLanguage,
published: this.publishedText
};
},
mounted() {
this.localRequest.query.querytext = this.userQuery;
this.localRequest.query.mainfacet = "";
if (this.fetchUrl) {
this.fetchData(this.fetchUrl, this.localRequest);
}
},
watch: {
query: function(newVal, oldVal) {
if (this.userQuery && newVal && newVal.length > 0) {
this.localRequest.query.querytext = newVal;
if (this.fetchUrl) {
this.fetchData(this.fetchUrl, this.localRequest);
}
}
}
},
methods: {
changeSortOrder(val) {
this.sortOrder = val;
this.localRequest.query.sortorder = val;
if (this.fetchUrl) {
this.fetchData(this.fetchUrl, this.localRequest);
}
},
fetchMore() {
let num = Number(this.localRequest.query.take);
num += 10;
this.localRequest.query.take = num;
this.$emit("addedMeta", "All", "", num);
if (this.fetchUrl) {
this.fetchData(this.fetchUrl, this.localRequest);
}
},
async fetchData(url, req) {
try {
this.loading = true;
const res = await axios.post(url, req);
let data = res.data.d;
this.spellChecks = data.Spellchecks;
this.sendSpellChecksToParent(data.Spellchecks);
this.hits = data.SearchHits;
this.totalHits = data.TotalNrOfHits;
this.hasSearched = true;
this.loading = false;
} catch (error) {
this.loading = false;
throw Error(error);
}
},
sendSpellChecksToParent(val) {
this.$emit("passSpellChecks", val);
}
},
template: `
<div class="vld-parent d-flex flex-column mt-5">
<vloading :color="'#404040'" :is-full-page="false" :active.sync="loading"></vloading>
<total-hits-date-relevancy
:resultShowText="this.resultShowText"
:resultHitsText="this.resultHitsText"
:sortByText="this.sortByText"
:relevancyText="this.relevancyText"
:dateText="this.dateText"
v-if="this.hits.length > 0" @sorting="this.changeSortOrder" :sortOrder="this.sortOrder" :totalHits="this.hits.length" :showDateOrRelevancy="true"></total-hits-date-relevancy>
<transition name="fade" mode="out-in">
<hits-looper :promotedPost="this.promotedPost" :publishedText="published" :dateLanguage="dateLang" key="1" v-if="this.hits.length > 0" :hits="this.hits"></hits-looper>
<no-hits
:selectedComponent="this.selectedComponent"
:noHitsTitleText="noHitsTitle"
:noHitsSubText="noHitsSub"
:noHitsDescriptionText="noHitsDescription"
key="2" v-if="this.hits.length < 1 && this.hasSearched" :spellChecks="this.spellChecks"></no-hits>
</transition>
<transition name="fade" mode="out-in">
<div class="d-flex mt-2 mb-5 flex-row align-items-center justify-content-center" v-if="this.hits.length < this.totalHits">
<button @click="fetchMore" class="button-small">
{{this.showMoreText}}
</button>
</div>
</transition>
</div>
`
});
Vue.component("webpageHits", {
props: [
"request",
"query",
"fetchUrl",
"resultShowText",
"selectedComponent",
"resultHitsText",
"sortByText",
"relevancyText",
"dateText",
"showMoreText",
"noHitsTitleText",
"noHitsSubText",
"noHitsDescriptionText",
"dateLanguage",
"publishedText"
],
data() {
return {
localRequest: JSON.parse(JSON.stringify(this.request)),
userQuery: JSON.parse(JSON.stringify(this.query)),
loading: false,
hits: [],
hasSearched: false,
spellChecks: [],
sortOrder: "",
totalHits: 0,
noHitsTitle: this.noHitsTitleText,
noHitsSub: this.noHitsSubText,
noHitsDescription: this.noHitsDescriptionText,
dateLang: this.dateLanguage,
published: this.publishedText
};
},
mounted() {
this.localRequest.query.querytext = this.userQuery;
this.localRequest.query.mainfacet = "65227|Webbsidor|-1|False";
if (this.fetchUrl) {
this.fetchData(this.fetchUrl, this.localRequest);
}
},
watch: {
query: function(newVal, oldVal) {
if (newVal && newVal.length > 0) {
this.localRequest.query.querytext = newVal;
if (this.fetchUrl) {
this.fetchData(this.fetchUrl, this.localRequest);
}
}
}
},
methods: {
changeSortOrder(val) {
this.sortOrder = val;
this.localRequest.query.sortorder = val;
if (this.fetchUrl) {
this.fetchData(this.fetchUrl, this.localRequest);
}
},
fetchMore() {
let num = Number(this.localRequest.query.take);
num += 10;
this.localRequest.query.take = num;
let webFacet = encodeURI("65227|Webbsidor|-1|False");
this.$emit("addedMeta", webFacet, "", num);
if (this.fetchUrl) {
this.fetchData(this.fetchUrl, this.localRequest);
}
},
async fetchData(url, req) {
try {
this.loading = true;
const res = await axios.post(url, req);
let data = res.data.d;
this.hits = data.SearchHits;
this.totalHits = data.TotalNrOfHits;
this.spellChecks = data.Spellchecks;
this.sendSpellChecksToParent(data.Spellchecks);
this.hasSearched = true;
this.loading = false;
} catch (error) {
this.loading = false;
throw Error(error);
}
},
sendSpellChecksToParent(val) {
this.$emit("passSpellChecks", val);
}
},
template: `
<div class="vld-parent d-flex flex-column mt-5">
<vloading :color="'#404040'" :is-full-page="false" :active.sync="loading"></vloading>
<total-hits-date-relevancy
:resultShowText="this.resultShowText"
:resultHitsText="this.resultHitsText"
:sortByText="this.sortByText"
:relevancyText="this.relevancyText"
:dateText="this.dateText"
v-if="this.hits.length > 0" @sorting="this.changeSortOrder" :sortOrder="this.sortOrder" :totalHits="this.hits.length" :showDateOrRelevancy="true"></total-hits-date-relevancy>
<transition name="fade" mode="out-in">
<hits-looper :publishedText="published" :dateLanguage="dateLang" key="1" v-if="this.hits.length > 0" :hits="this.hits"></hits-looper>
<no-hits
:selectedComponent="this.selectedComponent"
:noHitsTitleText="noHitsTitle"
:noHitsSubText="noHitsSub"
:noHitsDescriptionText="noHitsDescription"
key="2" v-if="this.hits.length < 1 && this.hasSearched" :spellChecks="this.spellChecks"></no-hits>
</transition>
<transition name="fade" mode="out-in">
<div class="d-flex mt-2 mb-5 flex-row align-items-center justify-content-center" v-if="this.hits.length < this.totalHits">
<button @click="fetchMore" class="button-small">
{{this.showMoreText}}
</button>
</div>
</transition>
</div>
`
});
Vue.component("documentHits", {
props: [
"request",
"query",
"fetchUrl",
"resultShowText",
"resultHitsText",
"sortByText",
"relevancyText",
"dateText",
"showMoreText",
"noHitsTitleText",
"noHitsSubText",
"noHitsDescriptionText",
"dateLanguage",
"publishedText",
"selectedComponent"
],
data() {
return {
localRequest: JSON.parse(JSON.stringify(this.request)),
userQuery: JSON.parse(JSON.stringify(this.query)),
loading: false,
hits: [],
hasSearched: false,
sortOrder: "",
spellChecks: [],
totalHits: 0,
noHitsTitle: this.noHitsTitleText,
noHitsSub: this.noHitsSubText,
dateLang: this.dateLanguage,
noHitsDescription: this.noHitsDescriptionText,
published: this.publishedText
};
},
mounted() {
this.localRequest.query.querytext = this.userQuery;
this.localRequest.query.mainfacet = "65227|Dokument|0|False";
if (this.fetchUrl) {
this.fetchData(this.fetchUrl, this.localRequest);
}
},
watch: {
query: function(newVal, oldVal) {
if (newVal && newVal.length > 0) {
this.localRequest.query.querytext = newVal;
if (this.fetchUrl) {
this.fetchData(this.fetchUrl, this.localRequest);
}
}
}
},
methods: {
changeSortOrder(val) {
this.sortOrder = val;
this.localRequest.query.sortorder = val;
if (this.fetchUrl) {
this.fetchData(this.fetchUrl, this.localRequest);
}
},
fetchMore() {
let num = Number(this.localRequest.query.take);
num += 10;
this.localRequest.query.take = num;
let docFacet = encodeURI("65227|Dokument|0|False");
this.$emit("addedMeta", docFacet, "", num);
if (this.fetchUrl) {
this.fetchData(this.fetchUrl, this.localRequest);
}
},
async fetchData(url, req) {
try {
this.loading = true;
const res = await axios.post(url, req);
let data = res.data.d;
this.hits = data.SearchHits;
this.spellChecks = data.Spellchecks;
this.sendSpellChecksToParent(data.Spellchecks);
this.totalHits = data.TotalNrOfHits;
this.hasSearched = true;
this.loading = false;
} catch (error) {
this.loading = false;
throw Error(error);
}
},
sendSpellChecksToParent(val) {
this.$emit("passSpellChecks", val);
}
},
template: `
<div class="vld-parent d-flex flex-column mt-5">
<vloading :color="'#404040'" :is-full-page="false" :active.sync="loading"></vloading>
<total-hits-date-relevancy
:resultShowText="this.resultShowText"
:resultHitsText="this.resultHitsText"
:sortByText="this.sortByText"
:relevancyText="this.relevancyText"
:dateText="this.dateText"
v-if="this.hits.length > 0" @sorting="this.changeSortOrder" :sortOrder="this.sortOrder" :totalHits="this.hits.length" :showDateOrRelevancy="true"></total-hits-date-relevancy>
<transition name="fade" mode="out-in">
<hits-looper :publishedText="published" :dateLanguage="dateLang" key="1" v-if="this.hits.length > 0" :hits="this.hits"></hits-looper>
<no-hits
:selectedComponent="this.selectedComponent"
:noHitsTitleText="noHitsTitle"
:noHitsSubText="noHitsSub"
:noHitsDescriptionText="noHitsDescription"
key="2" v-if="this.hits.length < 1 && this.hasSearched" :spellChecks="this.spellChecks"></no-hits>
</transition>
<transition name="fade" mode="out-in">
<div class="d-flex mt-2 mb-5 flex-row align-items-center justify-content-center" v-if="this.hits.length < this.totalHits">
<button @click="fetchMore" class="button-small">
{{this.showMoreText}}
</button>
</div>
</transition>
</div>
`
});
Vue.component("programHits1", {
props: [
"request",
"query",
"fetchUrl",
"resultShowText",
"resultHitsText",
"sortByText",
"relevancyText",
"dateText",
"showMoreText",
"selectedComponent",
"pickAreaText",
"pickAreaAllText",
"moreFiltersText",
"courseAreaText",
"courseProgressionText",
"courseStudyformText",
"courseStudyPaceText",
"courseStatusText",
"courseStatusBadgeText",
"courseLevelText",
"courseTermStartText",
"courseStudyLocationText",
"applicationOpenText",
"applicationClosedText",
"applicationLateText",
"applicationCanceledText",
"educationOccasionText",
"educationOccasionsText",
"noHitsTitleText",
"noHitsSubText",
"noHitsDescriptionText"
],
data() {
return {
localRequest: JSON.parse(JSON.stringify(this.request)),
userQuery: JSON.parse(JSON.stringify(this.query)),
loading: false,
hits: [],
filters: [],
areas: [],
hasSearched: false,
isOpen: false,
sortOrder: "",
spellChecks: [],
totalHits: 0,
activeFilters: [],
currentDate: Date.now(),
metafacets: [],
showMore: this.showMoreText,
courseArea: this.courseAreaText,
courseProgression: this.courseProgressionText,
courseStudyform: this.courseStudyformText,
courseStudyPace: this.courseStudyPaceText,
courseStatus: this.courseStatusText,
courseStatusBadge: this.courseStatusBadgeText,
courseLevel: this.courseLevelText,
courseTermStart: this.courseTermStartText,
courseStudyLocation: this.courseStudyLocationText,
applicationOpen: this.applicationOpenText,
applicationClosed: this.applicationClosedText,
applicationLate: this.applicationLateText,
applicationCanceled: this.applicationCanceledText,
educationOccasion: this.educationOccasionText,
educationOccasions: this.educationOccasionsText,
noHitsTitle: this.noHitsTitleText,
noHitsSub: this.noHitsSubText,
noHitsDescription: this.noHitsDescriptionText
};
},
mounted() {
this.localRequest.query.querytext = this.userQuery;
this.localRequest.query.sortorder = "";
this.localRequest.query.mainfacet = "65227|Program|1|False";
if (this.fetchUrl) {
this.fetchData(this.fetchUrl, this.localRequest);
}
if (this.localRequest) {
if (this.localRequest.query.metafacets.length > 0) {
this.activeFilters = this.localRequest.query.metafacets;
}
}
},
watch: {
query: function(newVal, oldVal) {
if (newVal && newVal.length > 0) {
this.localRequest.query.querytext = newVal;
if (this.fetchUrl) {
this.fetchData(this.fetchUrl, this.localRequest);
}
}
}
},
computed: {
accordionClasses: function() {
return {
"is-closed": !this.isOpen,
"is-primary": this.isOpen,
"is-dark": !this.isOpen
};
}
},
methods: {
convertApplicationDeadLineDates(items) {
items.forEach(element => {
if (element._source !== null) {
if (element._source.ProgramOccasions.length > 0) {
element._source.ProgramOccasions.map(occasion => {
if (typeof occasion.ApplicationDeadLine === "string") {
let closedDate = moment(occasion.ApplicationClosed).toDate();
let deadLineDate = moment(
occasion.ApplicationDeadLine
).toDate();
occasion.ApplicationClosed = closedDate;
occasion.ApplicationDeadLine = deadLineDate;
}
});
}
}
});
},
checkIfCourseIsAvailable(items) {
items.map(x => {
if (x._source && x._source.ProgramOccasions.length > 0) {
x._source.ProgramOccasions.map(occasion => {
if (
this.currentDate < occasion.ApplicationDeadLine &&
this.currentDate < occasion.ApplicationClosed &&
!occasion.Canceled
) {
x.HasOpenCourses = true;
}
if (
this.currentDate > occasion.ApplicationDeadLine &&
this.currentDate < occasion.ApplicationClosed &&
!occasion.Canceled
) {
x.HasOpenCourses = true;
}
if (
this.currentDate > occasion.ApplicationClosed &&
!occasion.Canceled
) {
x.HasClosedCourses = true;
}
if (occasion.Canceled) {
x.HasClosedCourses = true;
}
});
}
});
},
toggleAccordion: function() {
this.isOpen = !this.isOpen;
},
fetchMore() {
let num = Number(this.localRequest.query.take);
num += 10;
this.localRequest.query.take = num;
this.assignNewMetaAndFetch(this.localRequest.query.metafacets);
},
removeStringFromArray(arr, value) {
let index = arr.indexOf(value);
arr.map(v => {
if (v.includes(value)) {
arr.splice(index, 1);
}
});
},
async assignNewMetaAndFetch(val) {
let mainfacet = this.localRequest.query.mainfacet;
let take = this.localRequest.query.take;
let querytext = this.localRequest.query.querytext;
this.metafacets = val;
this.localRequest.query.metafacets = val;
await this.$emit("addedMeta", mainfacet, querytext, val, Number(take))
this.fetchData(this.fetchUrl, this.localRequest);
},
async addMetaFacets(val, isArea, isTake) {
if(isArea) {
let metafacet = val.target.value
if(metafacet === 'allAreas') {
let metafacetsWithoutAreas = this.localRequest.query.metafacets.filter(x => !x.includes('Area|'));
this.assignNewMetaAndFetch(metafacetsWithoutAreas)
} else {
let metafacetsWithArea = _.xor(this.localRequest.query.metafacets, [metafacet])
this.assignNewMetaAndFetch(metafacetsWithArea)
}
} else if(isTake){
this.assignNewMetaAndFetch(this.localRequest.query.metafacets)
} else {
let new_metafacets = _.xor(this.localRequest.query.metafacets, [val])
this.assignNewMetaAndFetch(new_metafacets)
}
},
async fetchData(url, req) {
try {
this.loading = true;
const res = await axios.post(url, req);
let data = res.data.d;
this.hits = data.SearchHits;
this.totalHits = data.TotalNrOfHits;
this.spellChecks = data.Spellchecks;
this.sendSpellChecksToParent(data.Spellchecks);
this.convertApplicationDeadLineDates(this.hits);
this.checkIfCourseIsAvailable(this.hits);
const obj = data.MetaDataFacets;
const { Area, ...objWithoutStatus } = obj;
if (obj.Area) {
this.areas = obj.Area;
}
if (objWithoutStatus) {
this.filters = objWithoutStatus;
}
this.hasSearched = true;
this.loading = false;
} catch (error) {
this.loading = false;
throw Error(error);
}
},
sendSpellChecksToParent(val) {
this.$emit("passSpellChecks", val);
}
},
template: `
<div class="vld-parent d-flex flex-column mt-5">
<vloading :color="'#404040'" :is-full-page="false" :active.sync="loading"></vloading>
<div class="row" v-if="this.hits.length > 0">
<div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="d-flex w-100 flex-row flex-wrap" v-if="filters">
<div class="searchall-accordion" :class="accordionClasses">
<div class="searchall-accordion-header d-flex flex-row align-items-center" >
<div class="d-flex flex-fill align-items-center">
<select @change="addMetaFacets($event, 'Area')" class="select-css main" v-if="areas">
<option disabled="disabled" selected="selected">{{this.pickAreaText}}</option>
<option value="allAreas">{{this.pickAreaAllText}}</option>
<option :selected="localRequest.query.metafacets.includes(area.Term)" :value="area.Term" v-for="area in areas">{{area.Text}}</option>
</select>
</div>
<div class="d-flex flex-row justify-content-end">
<button @click="toggleAccordion" class="button-none d-flex flex-row align-items-center">
<transition name="fade" mode="out-in">
<p v-if="!isOpen" class="d-flex flex-row align-items-center mb-0">
{{this.moreFiltersText}} <span class="material-icons">keyboard_arrow_down</span>
</p>
<p v-else class="d-flex flex-row align-items-center mb-0">
{{this.moreFiltersText}} <span class="material-icons">keyboard_arrow_up</span>
</p>
</transition>
</button>
</div>
</div>
<div class="searchall-accordion-body">
<div class="searchall-accordion-content d-flex flex-row flex-wrap">
<div class="d-flex flex-column mr-4 mb-xs" v-for="(value, name, index) in filters">
<h4>
<template v-if="name == 'Area'">{{courseArea}}</template>
<template v-if="name == 'Studyform'">{{courseStudyform}}</template>
<template v-if="name == 'StudyPace'">{{courseStudyPace}}</template>
<template v-if="name == 'Status'">{{courseStatus}}</template>
<template v-if="name == 'Level'">{{courseLevel}}</template>
<template v-if="name == 'TermStart'">{{courseTermStart}}</template>
<template v-if="name == 'StudyLocation'">{{courseStudyLocation}}</template>
</h4>
<div class="d-flex flex-row flex-wrap">
<button v-for="(option, index) in value" :key="index" :class="{'selected': localRequest.query.metafacets.includes(option.Term)}" @click="addMetaFacets(option.Term)" class="button-small mr-2 mb-2">
<template v-if="name !== 'Status'">
{{option.Text}}
</template>
<template v-else>{{courseStatusBadge}}</template>
<template v-if="name == 'StudyPace'">%</template>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<total-hits-date-relevancy
:resultShowText="this.resultShowText"
:resultHitsText="this.resultHitsText"
:sortByText="this.sortByText"
:relevancyText="this.relevancyText"
:dateText="this.dateText"
v-if="this.hits.length > 0" :totalHits="this.hits.length" :showDateOrRelevancy="false"></total-hits-date-relevancy>
<transition name="fade" mode="out-in">
<programs-looper
:applicationOpenText="applicationOpen"
:applicationClosedText="applicationClosed"
:applicationLateText="applicationLate"
:applicationCanceledText="applicationCanceled"
:educationOccasionText="educationOccasion"
:educationOccasionsText="educationOccasions"
key="1" v-if="this.hits.length > 0" :hits="this.hits"></programs-looper>
<no-hits
:selectedComponent="this.selectedComponent"
:noHitsTitleText="noHitsTitle"
:noHitsSubText="noHitsSub"
:noHitsDescriptionText="noHitsDescription"
key="2" v-if="this.hits.length < 1 && this.hasSearched" :spellChecks="this.spellChecks"></no-hits>
</transition>
<transition name="fade" mode="out-in">
<div class="d-flex mt-2 mb-5 flex-row align-items-center justify-content-center" v-if="this.hits.length < this.totalHits">
<button @click="fetchMore" class="button-small">
{{showMore}}
</button>
</div>
</transition>
</div>
`
});
Vue.component("courseHits1", {
props: [
"request",
"query",
"fetchUrl",
"resultShowText",
"resultHitsText",
"sortByText",
"relevancyText",
"dateText",
"showMoreText",
"pickAreaText",
"pickAreaAllText",
"moreFiltersText",
"selectedComponent",
"courseAreaText",
"courseProgressionText",
"courseStudyformText",
"courseStudyPaceText",
"courseStatusText",
"courseStatusBadgeText",
"courseLevelText",
"courseTermStartText",
"courseStudyLocationText",
"noHitsTitleText",
"noHitsSubText",
"noHitsDescriptionText"
],
data() {
return {
localRequest: JSON.parse(JSON.stringify(this.request)),
userQuery: JSON.parse(JSON.stringify(this.query)),
loading: false,
hits: [],
filters: [],
areas: [],
hasSearched: false,
isOpen: false,
sortOrder: "",
spellChecks: [],
totalHits: 0,
activeFilters: [],
metafacets: [],
currentDate: Date.now(),
showMore: this.showMoreText,
courseArea: this.courseAreaText,
courseProgression: this.courseProgressionText,
courseStudyform: this.courseStudyformText,
courseStudyPace: this.courseStudyPaceText,
courseStatus: this.courseStatusText,
courseStatusBadge: this.courseStatusBadgeText,
courseLevel: this.courseLevelText,
courseTermStart: this.courseTermStartText,
courseStudyLocation: this.courseStudyLocationText,
noHitsTitle: this.noHitsTitleText,
noHitsSub: this.noHitsSubText,
noHitsDescription: this.noHitsDescriptionText
};
},
mounted() {
this.localRequest.query.querytext = this.userQuery;
this.localRequest.query.sortorder = "";
this.localRequest.query.mainfacet = "65227|Kurser|1|False";
if (this.fetchUrl) {
this.fetchData(this.fetchUrl, this.localRequest);
}
if (this.localRequest) {
if (this.localRequest.query.metafacets.length > 0) {
this.activeFilters = this.localRequest.query.metafacets;
}
}
},
watch: {
query: function(newVal, oldVal) {
if (newVal && newVal.length > 0) {
this.localRequest.query.querytext = newVal;
if (this.fetchUrl) {
this.fetchData(this.fetchUrl, this.localRequest);
}
}
}
},
computed: {
accordionClasses: function() {
return {
"is-closed": !this.isOpen,
"is-primary": this.isOpen,
"is-dark": !this.isOpen
};
}
},
methods: {
convertApplicationDeadLineDates(items) {
items.forEach(element => {
if (element._source !== null) {
if (element._source.ProgramOccasions.length > 0) {
element._source.ProgramOccasions.map(occasion => {
if (typeof occasion.ApplicationDeadLine === "string") {
let closedDate = moment(occasion.ApplicationClosed).toDate();
let deadLineDate = moment(
occasion.ApplicationDeadLine
).toDate();
occasion.ApplicationClosed = closedDate;
occasion.ApplicationDeadLine = deadLineDate;
}
});
}
}
});
},
checkIfCourseIsAvailable(items) {
items.map(x => {
if (x._source && x._source.ProgramOccasions.length > 0) {
x._source.ProgramOccasions.map(occasion => {
if (
this.currentDate < occasion.ApplicationDeadLine &&
this.currentDate < occasion.ApplicationClosed &&
!occasion.Canceled
) {
x.HasOpenCourses = true;
}
if (
this.currentDate > occasion.ApplicationDeadLine &&
this.currentDate < occasion.ApplicationClosed &&
!occasion.Canceled
) {
x.HasOpenCourses = true;
}
if (
this.currentDate > occasion.ApplicationClosed &&
!occasion.Canceled
) {
x.HasClosedCourses = true;
}
if (occasion.Canceled) {
x.HasClosedCourses = true;
}
});
}
});
},
toggleAccordion: function() {
this.isOpen = !this.isOpen;
},
fetchMore() {
let num = Number(this.localRequest.query.take);
num += 10;
this.localRequest.query.take = num;
this.assignNewMetaAndFetch(this.localRequest.query.metafacets);
},
removeStringFromArray(arr, value) {
let index = arr.indexOf(value);
arr.map(v => {
if (v.includes(value)) {
arr.splice(index, 1);
}
});
},
async assignNewMetaAndFetch(val) {
let mainfacet = this.localRequest.query.mainfacet;
let take = this.localRequest.query.take;
let querytext = this.localRequest.query.querytext;
this.metafacets = val;
this.localRequest.query.metafacets = val;
await this.$emit("addedMeta", mainfacet, querytext, val, Number(take))
this.fetchData(this.fetchUrl, this.localRequest);
},
async addMetaFacets(val, isArea, isTake) {
if(isArea) {
let metafacet = val.target.value
if(metafacet === 'allAreas') {
let metafacetsWithoutAreas = this.localRequest.query.metafacets.filter(x => !x.includes('Area|'));
this.assignNewMetaAndFetch(metafacetsWithoutAreas)
} else {
let metafacetsWithArea = _.xor(this.localRequest.query.metafacets, [metafacet])
this.assignNewMetaAndFetch(metafacetsWithArea)
}
} else if(isTake){
this.assignNewMetaAndFetch(this.localRequest.query.metafacets)
} else {
let new_metafacets = _.xor(this.localRequest.query.metafacets, [val])
this.assignNewMetaAndFetch(new_metafacets)
}
},
async fetchData(url, req) {
try {
this.loading = true;
const res = await axios.post(url, req);
let data = res.data.d;
this.hits = data.SearchHits;
this.totalHits = data.TotalNrOfHits;
this.spellChecks = data.Spellchecks;
this.sendSpellChecksToParent(data.Spellchecks);
this.convertApplicationDeadLineDates(this.hits);
this.checkIfCourseIsAvailable(this.hits);
const obj = data.MetaDataFacets;
const { Area, Subject, ...objWithoutStatus } = obj;
if (obj.Area) {
this.areas = obj.Area;
}
if (objWithoutStatus) {
this.filters = objWithoutStatus;
}
this.hasSearched = true;
this.loading = false;
} catch (error) {
this.loading = false;
throw Error(error);
}
},
sendSpellChecksToParent(val) {
this.$emit("passSpellChecks", val);
}
},
template: `
<div class="vld-parent d-flex flex-column mt-5">
<vloading :color="'#404040'" :is-full-page="false" :active.sync="loading"></vloading>
<div class="row" v-if="this.hits.length > 0">
<div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="d-flex w-100 flex-row flex-wrap" v-if="filters">
<div class="searchall-accordion" :class="accordionClasses">
<div class="searchall-accordion-header d-flex flex-row align-items-center" >
<div class="d-flex flex-fill align-items-center">
<select @change="addMetaFacets($event, 'Area')" class="select-css main" v-if="areas">
<option disabled="disabled" selected="selected">{{this.pickAreaText}}</option>
<option value="allAreas">{{this.pickAreaAllText}}</option>
<option :selected="localRequest.query.metafacets.includes(area.Term)" :value="area.Term" v-for="area in areas">{{area.Text}}</option>
</select>
</div>
<div class="d-flex flex-row justify-content-end">
<button @click="toggleAccordion" class="button-none d-flex flex-row align-items-center">
<transition name="fade" mode="out-in">
<p v-if="!isOpen" class="d-flex flex-row align-items-center mb-0">
{{this.moreFiltersText}} <span class="material-icons">keyboard_arrow_down</span>
</p>
<p v-else class="d-flex flex-row align-items-center mb-0">
{{this.moreFiltersText}} <span class="material-icons">keyboard_arrow_up</span>
</p>
</transition>
</button>
</div>
</div>
<div class="searchall-accordion-body">
<div class="searchall-accordion-content d-flex flex-row flex-wrap">
<div class="d-flex flex-column mr-4 mb-xs" v-for="(value, name, index) in filters">
<h4>
<template v-if="name == 'Area'">{{courseArea}}</template>
<template v-if="name == 'Progression'">{{courseProgression}}</template>
<template v-if="name == 'Studyform'">{{courseStudyform}}</template>
<template v-if="name == 'StudyPace'">{{courseStudyPace}}</template>
<template v-if="name == 'Status'">{{courseStatus}}</template>
<template v-if="name == 'Level'">{{courseLevel}}</template>
<template v-if="name == 'TermStart'">{{courseTermStart}}</template>
<template v-if="name == 'StudyLocation'">{{courseStudyLocation}}</template>
</h4>
<div class="d-flex flex-row flex-wrap">
<button v-for="(option, index) in value" :key="index" :class="{'selected': localRequest.query.metafacets.includes(option.Term)}" @click="addMetaFacets(option.Term)" class="button-small mr-2 mb-2">
<template v-if="name == 'Status'">
{{courseStatusBadge}}
</template>
<template v-if="name !== 'Status'">{{option.Text}}</template>
<template v-if="name == 'StudyPace'">%</template>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<total-hits-date-relevancy
:resultShowText="this.resultShowText"
:resultHitsText="this.resultHitsText"
:sortByText="this.sortByText"
:relevancyText="this.relevancyText"
:dateText="this.dateText"
v-if="this.hits.length > 0" :totalHits="this.hits.length" :showDateOrRelevancy="false"></total-hits-date-relevancy>
<transition name="fade" mode="out-in">
<courses-looper key="1" v-if="this.hits.length > 0" :hits="this.hits"></courses-looper>
<no-hits
:selectedComponent="this.selectedComponent"
:noHitsTitleText="noHitsTitle"
:noHitsSubText="noHitsSub"
:noHitsDescriptionText="noHitsDescription"
key="2" v-if="this.hits.length < 1 && this.hasSearched" :spellChecks="this.spellChecks"></no-hits>
</transition>
<transition name="fade" mode="out-in">
<div class="d-flex mt-2 mb-5 flex-row align-items-center justify-content-center" v-if="this.hits.length < this.totalHits">
<button @click="fetchMore" class="button-small">
{{showMore}}
</button>
</div>
</transition>
</div>
`
});
Vue.component("personHits", {
props: [
"request",
"query",
"fetchUrl",
"selectedComponent",
"resultShowText",
"resultHitsText",
"sortByText",
"relevancyText",
"dateText",
"showMoreText",
"dateLanguage",
"pickDepartmentText",
"pickDepartmentAllText",
"pickLocationText",
"pickLocationAllText",
"pickResearchCenterText",
"pickResearchCenterAllText",
"pickSubjectText",
"pickSubjectAllText",
"pickTitleText",
"pickTitleAllText",
"noHitsTitleText",
"noHitsSubText",
"noHitsDescriptionText"
],
data() {
return {
localRequest: JSON.parse(JSON.stringify(this.request)),
userQuery: JSON.parse(JSON.stringify(this.query)),
loading: false,
hits: [],
filters: [],
hasSearched: false,
spellChecks: [],
sortOrder: "",
totalHits: 0,
activeFilters: [],
pickDepartment: this.pickDepartmentText,
pickDepartmentAll: this.pickDepartmentAllText,
pickLocation: this.pickLocationText,
pickLocationAll: this.pickLocationAllText,
pickResearchCenter: this.pickResearchCenterText,
pickResearchCenterAll: this.pickResearchCenterAllText,
pickSubject: this.pickSubjectText,
pickSubjectAll: this.pickSubjectAllText,
pickTitle: this.pickTitleText,
pickTitleAll: this.pickTitleAllText,
dateLang: this.dateLanguage,
noHitsTitle: this.noHitsTitleText,
noHitsSub: this.noHitsSubText,
noHitsDescription: this.noHitsDescriptionText
};
},
mounted() {
this.localRequest.query.querytext = this.userQuery;
this.localRequest.query.sortorder = "";
this.localRequest.query.mainfacet = "65227|Personer|2|False";
if (this.fetchUrl) {
this.fetchData(this.fetchUrl, this.localRequest);
}
if (this.localRequest) {
if (this.localRequest.query.metafacets.length > 0) {
this.activeFilters = this.localRequest.query.metafacets;
}
}
},
watch: {
query: function(newVal, oldVal) {
if (newVal && newVal.length > 0) {
this.localRequest.query.querytext = newVal;
if (this.fetchUrl) {
this.fetchData(this.fetchUrl, this.localRequest);
}
}
}
},
methods: {
fetchMore() {
let num = Number(this.localRequest.query.take);
num += 10;
this.localRequest.query.take = num;
let personFacet = encodeURI("65227|Personer|2|False");
this.$emit("addedMeta", personFacet, "", num);
if (this.fetchUrl) {
this.fetchData(this.fetchUrl, this.localRequest);
}
},
removeStringFromArray(arr, value) {
let index = arr.indexOf(value);
arr.map(v => {
if (v.includes(value)) {
arr.splice(index, 1);
}
});
},
pushMetaDataFacet(val) {
if (
![
"allDepartments",
"allLocations",
"allResearchCenters",
"allSubjects",
"allTitles"
].includes(val)
) {
this.activeFilters.push(val);
this.localRequest.query.metafacets.push(val);
this.fetchData(this.fetchUrl, this.localRequest);
}
},
pickFilter(event, name) {
let value = event.target.value;
let personFacet = encodeURI("65227|Personer|2|False");
if (value == "allDepartments") {
this.removeStringFromArray(this.activeFilters, "Department|");
this.removeStringFromArray(
this.localRequest.query.metafacets,
"Department|"
);
this.fetchData(this.fetchUrl, this.localRequest);
}
if (value == "allLocations") {
this.removeStringFromArray(this.activeFilters, "Location|");
this.removeStringFromArray(
this.localRequest.query.metafacets,
"Location|"
);
this.fetchData(this.fetchUrl, this.localRequest);
}
if (value == "allResearchCenters") {
this.removeStringFromArray(this.activeFilters, "ResearchCenter|");
this.removeStringFromArray(
this.localRequest.query.metafacets,
"ResearchCenter|"
);
this.fetchData(this.fetchUrl, this.localRequest);
}
if (value == "allSubjects") {
this.removeStringFromArray(this.activeFilters, "Subject|");
this.removeStringFromArray(
this.localRequest.query.metafacets,
"Subject|"
);
this.fetchData(this.fetchUrl, this.localRequest);
}
if (value == "allTitles") {
this.removeStringFromArray(this.activeFilters, "Title|");
this.removeStringFromArray(
this.localRequest.query.metafacets,
"Title|"
);
this.fetchData(this.fetchUrl, this.localRequest);
}
if (name == "Department") {
this.$emit(
"addedMeta",
personFacet,
value,
Number(this.localRequest.query.take)
);
this.removeStringFromArray(this.activeFilters, "Department|");
this.removeStringFromArray(
this.localRequest.query.metafacets,
"Department|"
);
this.pushMetaDataFacet(value);
}
if (name == "Location") {
this.$emit(
"addedMeta",
personFacet,
value,
Number(this.localRequest.query.take)
);
this.removeStringFromArray(this.activeFilters, "Location|");
this.removeStringFromArray(
this.localRequest.query.metafacets,
"Location|"
);
this.pushMetaDataFacet(value);
}
if (name == "ResearchCenter") {
this.$emit(
"addedMeta",
personFacet,
value,
Number(this.localRequest.query.take)
);
this.removeStringFromArray(this.activeFilters, "ResearchCenter|");
this.removeStringFromArray(
this.localRequest.query.metafacets,
"ResearchCenter|"
);
this.pushMetaDataFacet(value);
}
if (name == "Subject") {
this.$emit(
"addedMeta",
personFacet,
value,
Number(this.localRequest.query.take)
);
this.removeStringFromArray(this.activeFilters, "Subject|");
this.removeStringFromArray(
this.localRequest.query.metafacets,
"Subject|"
);
this.pushMetaDataFacet(value);
}
if (name == "Title") {
this.$emit(
"addedMeta",
personFacet,
value,
Number(this.localRequest.query.take)
);
this.removeStringFromArray(this.activeFilters, "Title|");
this.removeStringFromArray(
this.localRequest.query.metafacets,
"Title|"
);
this.pushMetaDataFacet(value);
}
},
async fetchData(url, req) {
try {
this.loading = true;
const res = await axios.post(url, req);
let data = res.data.d;
this.hits = data.SearchHits;
this.totalHits = data.TotalNrOfHits;
this.spellChecks = data.Spellchecks;
const obj = data.MetaDataFacets;
const {
RoomNumber,
AreaOfResponsibility,
...objWithoutRoomAndArea
} = obj;
if (objWithoutRoomAndArea) {
this.filters = objWithoutRoomAndArea;
}
this.hasSearched = true;
this.loading = false;
} catch (error) {
this.loading = false;
throw Error(error);
}
}
},
template: `
<div class="vld-parent d-flex flex-column mt-5">
<vloading :color="'#404040'" :is-full-page="false" :active.sync="loading"></vloading>
<div class="row" v-if="this.hits.length > 0">
<div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="d-flex w-100 flex-row flex-wrap" v-if="filters">
<div class="d-flex flex-column mr-4 mb-xs" v-for="(value, name, index) in filters">
<h4>
<template v-if="name == 'Department'">{{pickDepartment}}</template>
<template v-if="name == 'Location'">{{pickLocation}}</template>
<template v-if="name == 'ResearchCenter'">{{pickResearchCenter}}</template>
<template v-if="name == 'Subject'">{{pickSubject}}</template>
<template v-if="name == 'Title'">{{pickTitle}}</template>
</h4>
<select class="select-css small" @change="pickFilter($event, name)">
<option value="allDepartments" v-if="name == 'Department'">{{pickDepartmentAll}}</option>
<option value="allLocations" v-if="name == 'Location'">{{pickLocationAll}}</option>
<option value="allResearchCenters" v-if="name == 'ResearchCenter'">{{pickResearchCenterAll}}</option>
<option value="allSubjects" v-if="name == 'Subject'">{{pickSubjectAll}}</option>
<option value="allTitles" v-if="name == 'Title'">{{pickTitleAll}}</option>
<option :selected="activeFilters.includes(option.Term)" :value="option.Term" v-for="(option, index) in value" :key="index">
{{option.Text}}
</option>
</select>
</div>
</div>
</div>
</div>
<total-hits-date-relevancy
:resultShowText="this.resultShowText"
:resultHitsText="this.resultHitsText"
:sortByText="this.sortByText"
:relevancyText="this.relevancyText"
:dateText="this.dateText"
v-if="this.hits.length > 0" :totalHits="this.hits.length" :showDateOrRelevancy="false"></total-hits-date-relevancy>
<transition name="fade" mode="out-in">
<hits-looper :dateLanguage="dateLang" key="1" v-if="this.hits.length > 0" :hits="this.hits"></hits-looper>
<no-hits
:selectedComponent="this.selectedComponent"
:noHitsTitleText="noHitsTitle"
:noHitsSubText="noHitsSub"
:noHitsDescriptionText="noHitsDescription"
key="2" v-if="this.hits.length < 1 && this.hasSearched" :spellChecks="this.spellChecks"></no-hits>
</transition>
<transition name="fade" mode="out-in">
<div class="d-flex mt-2 mb-5 flex-row align-items-center justify-content-center" v-if="this.hits.length < this.totalHits">
<button @click="fetchMore" class="button-small">
{{this.showMoreText}}
</button>
</div>
</transition>
</div>
`
});
//End Tab Components
// No Hits Component
Vue.component("no-hits", {
props: [
"spellChecks",
"noHitsTitleText",
"noHitsSubText",
"noHitsDescriptionText",
"selectedComponent"
],
data() {
return {
noHitsTitle: this.noHitsTitleText,
noHitsSub: this.noHitsSubText,
noHitsDescription: this.noHitsDescriptionText
};
},
computed: {
theMainFacet: function() {
let allFacet = encodeURI("All");
let webFacet = encodeURI("65227|Webbsidor|-1|False");
let docFacet = encodeURI("65227|Dokument|0|False");
let courseFacet = encodeURI("65227|Kurser|1|False");
let programFacet = encodeURI("65227|Program|1|False");
let personFacet = encodeURI("65227|Personer|2|False");
if (this.selectedComponent == "allHits") {
return allFacet;
} else if (this.selectedComponent == "webpageHits") {
return webFacet;
} else if (this.selectedComponent == "documentHits") {
return docFacet;
} else if (this.selectedComponent == "courseHits1") {
return courseFacet;
} else if (this.selectedComponent == "programHits1") {
return programFacet;
} else if (this.selectedComponent == "personHits") {
return personFacet;
} else {
return "All";
}
}
},
template: `
<div class="row mt-5 mb-5">
<div class="col-md-10 offset-md-1 col-lg-10 offset-lg-2 has-border">
<h2 class="heading-level-3" v-html="noHitsTitle"></h2>
<div class="d-flex flex-row flex-wrap mb-4">
<p v-html="noHitsSub" v-if="this.spellChecks.length > 0"></p><p v-if="this.spellChecks.length > 0">:</p>
<ul class="d-flex flex-row flex-wrap list-unstyled" v-if="this.spellChecks.length > 0">
<li class="ml-2 mr-2" v-for="spellCheck in this.spellChecks">
<a :href="'?MainFacet=' + theMainFacet + '&querytext=' + spellCheck">{{spellCheck}}</a>
</li>
</ul>
</div>
<p v-html="noHitsDescription"></p>
</div>
</div>
`
});
// End No Hits Component
// Show Total Hits and Sort by Date or Relevancy
Vue.component("total-hits-date-relevancy", {
props: [
"totalHits",
"showDateOrRelevancy",
"sortOrder",
"resultShowText",
"resultHitsText",
"sortByText",
"relevancyText",
"dateText"
],
methods: {
changeSortOrder(val) {
this.$emit("sorting", val);
}
},
template: `
<div class="row">
<div class="col-md-10 offset-md-1 col-lg-10 offset-lg-2">
<div class="d-flex w-100 flex-row flex-wrap align-items-center totalhits">
<div class="d-flex flex-row align-items-center mr-auto" v-if="this.totalHits">
<p class="mb-0">{{this.resultShowText}} <strong>{{this.totalHits}}</strong> {{this.resultHitsText}}</p>
</div>
<div class="d-flex flex-row align-items-center sortbar" v-if="this.showDateOrRelevancy">
<p class="mb-0">{{this.sortByText}}: </p>
<button :class="{'selected': !this.sortOrder.includes('date') }" class="button-small ml-2 mr-2" @click="changeSortOrder('')">{{this.relevancyText}}</button>
<button :class="{'selected': this.sortOrder.includes('date') }" class="button-small" @click="changeSortOrder('date')">{{this.dateText}}</button>
</div>
</div>
</div>
</div>
`
});
//End Show Total Hits and Sort by Date or Relevancy
// Loop Available Hits
Vue.component("hits-looper", {
props: ["hits", "dateLanguage", "publishedText", "promotedPost"],
data() {
return {
dateLang: this.dateLanguage,
published: this.publishedText
};
},
filters: {
getUrlOfBreadcrumb: function(value) {
if (!value) return "";
value = value.toString();
return value.split("|")[1];
},
getNameOfBreadcrumb: function(value) {
if (!value) return "";
value = value.toString();
return value.split("|")[0];
}
},
template: `
<ul class="list-unstyled">
<li class="search-all-article-container is--promoted row" v-if="this.promotedPost && this.promotedPost.Url" >
<article class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="row">
<div class="col-12 col-md-4 mb-xs" v-if="this.promotedPost.IllustratingImage237Url || this.promotedPost.IllustratingImage120Url || this.promotedPost.IllustratingImageUrl">
<a v-if="this.promotedPost.Url" :href="this.promotedPost.Url" >
<img :src="this.promotedPost.IllustratingImage237Url || this.promotedPost.IllustratingImage120Url || this.promotedPost.IllustratingImageUrl" :alt="this.promotedPost.Title" />
</a>
</div>
<div :class="[this.promotedPost.IllustratingImage237Url || this.promotedPost.IllustratingImage120Url || this.promotedPost.IllustratingImageUrl ? 'col-12 col-md-8' : 'col-12']">
<a :href="this.promotedPost.Url">
<h3 class="heading-level-3" v-if="this.promotedPost.Title" v-html="this.promotedPost.Title"></h3>
<p class="mb-0" v-if="this.promotedPost.Content" v-html="this.promotedPost.Content"></p>
</a>
<div class="d-flex flex-row flex-wrap hits-breadcrumbs mt-xs" v-if="this.promotedPost.BreadcrumbList && this.promotedPost.BreadcrumbList.length > 0">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item" v-for="(link, index) in this.promotedPost.BreadcrumbList" :key="index">
<a :href="link | getUrlOfBreadcrumb">{{link | getNameOfBreadcrumb}}</a>
</li>
</ol>
</nav>
</div>
</div>
</div>
</article>
</li>
<li class="search-all-article-container row" v-for="(hit, index) in this.hits" :key="hit.Id">
<article class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="row" v-if="hit.MetaData && hit.MetaData.PersonalImage && hit.MetaData.PersonalImage.StringValue">
<div class="col-12 col-md-auto">
<a :href="hit.Url">
<div class="img-circle" v-bind:style='{ backgroundImage: "url(" + hit.MetaData.PersonalImage.StringValue + ")"}'/>
</a>
</div>
<div class="col-12 col-md-10">
<a :href="hit.Url">
<h3 class="heading-level-3" v-if="hit.Title" v-html="hit.Title"></h3>
<div class="d-flex flex-row flex-wrap mb-xxs" v-if="hit.ContentDataAll.length > 3">
<small v-if="!['Sida på miun.se', 'Page on miun.se', 'Sida på medarbetarportalen.se', 'Page on medarbetarportalen.se'].includes(hit.ContentDataAll)" v-html="hit.ContentDataAll"></small>
</div>
<p class="mb-0" v-html="hit.Content"></p>
</a>
</div>
</div>
<div v-else class="row">
<div class="col-12">
<a :href="hit.Url">
<h3 class="heading-level-3" v-if="hit.Title" v-html="hit.Title"></h3>
<div class="d-flex flex-row flex-wrap mb-xxs" v-if="hit.ContentDataAll && hit.ContentDataAll.length > 0">
<small v-if="!['Sida på miun.se', 'Page on miun.se', 'Sida på medarbetarportalen.se', 'Page on medarbetarportalen.se'].includes(hit.ContentDataAll)" v-html="hit.ContentDataAll"></small>
<small v-if="hit.SearchPublishDate && !['Sida på miun.se', 'Page on miun.se', 'Sida på medarbetarportalen.se', 'Page on medarbetarportalen.se', 'Kursplan', 'Syllabus'].includes(hit.ContentDataAll)"></small>
</div>
<p class="mb-0" v-if="hit.Content" v-html="hit.Content"></p>
<div class="d-flex flex-row flex-wrap mt-xs" v-if="hit.SearchPublishDate && !['Kursplan', 'Syllabus'].includes(hit.ContentDataAll)">
<small><template v-if="published">{{published}}</template><template v-if="published && hit.SearchPublishDate">:</template> <time >{{hit.SearchPublishDate | momentalize(dateLang)}}</time></small>
</div>
</a>
<div class="d-flex flex-row flex-wrap hits-breadcrumbs" v-if="hit.BreadcrumbList && hit.BreadcrumbList.length > 0">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item" v-for="(link, index) in hit.BreadcrumbList" :key="index">
<a :href="link | getUrlOfBreadcrumb">{{link | getNameOfBreadcrumb}}</a>
</li>
</ol>
</nav>
</div>
</div>
</div>
</article>
</li>
</ul>
`
});
// End Loop Available Hits
// Loop Available Program Hits
Vue.component("programs-looper", {
props: [
"hits",
"applicationOpenText",
"applicationClosedText",
"applicationLateText",
"applicationCanceledText",
"educationOccasionText",
"educationOccasionsText"
],
data() {
return {
currentDate: Date.now(),
applicationOpen: this.applicationOpenText,
applicationClosed: this.applicationClosedText,
applicationLate: this.applicationLateText,
applicationCanceled: this.applicationCanceledText,
educationOccasion: this.educationOccasionText,
educationOccasions: this.educationOccasionsText
};
},
template: `
<ul class="list-unstyled">
<li class="search-all-article-container row" v-for="(item, index) in this.hits" :key="item.Id">
<bulma-accordion class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<bulma-accordion-item :class="{'show-icon': item._source && item._source.ProgramOccasions && item._source.ProgramOccasions.length > 0}">
<div class="d-flex flex-column" slot="title">
<a :href="item.Url">
<h3 v-html="item.Title" class="heading-level-3">
</h3>
</a>
<div class="d-flex flex-row flex-wrap">
<div class="hits-block d-flex flex-row align-items-center">
Program
</div>
<div class="hits-block d-flex flex-row align-items-center" v-if="item.MetaData && item.MetaData.Points && item.MetaData.Points.StringValue.length > 0">
<p>{{ item.MetaData.Points.StringValue }} hp</p>
</div>
<div class="hits-block d-flex flex-row align-items-center" v-if="item.MetaData && item.MetaData.Level && item.MetaData.Level.StringValue.length > 0">
<p>{{ item.MetaData.Level.StringValue }}</p>
</div>
<div class="hits-block d-flex flex-row flex-wrap align-items-center" v-if="item._source && item._source.ProgramOccasions.length > 0">
<p class="d-flex flex-row flex-wrap align-items-center" v-if="item._source.ProgramOccasions.length == 1">
<span class="circle--green" v-if="item.HasOpenCourses"></span>
<span class="circle--grey" v-else-if="item.HasClosedCourses"></span>
{{item._source.ProgramOccasions.length}} {{educationOccasion}}
</p>
<p class="d-flex flex-row flex-wrap align-items-center" v-else>
<span class="circle--green" v-if="item.HasOpenCourses"></span>
<span class="circle--grey" v-else-if="item.HasClosedCourses"></span>
{{item._source.ProgramOccasions.length}} {{educationOccasions}}</p>
</div>
</div>
</div>
<i slot="icon-closed" class="material-icons">keyboard_arrow_up</i>
<i slot="icon-open" class="material-icons">keyboard_arrow_down</i>
<div class="high d-flex flex-column" slot="content" v-if="item._source && item._source.ProgramOccasions && item._source.ProgramOccasions.length > 0">
<div v-if="item._source && item._source.ProgramOccasions && item._source.ProgramOccasions.length > 0" class="hits-occasions d-flex flex-column flex-wrap" v-for="occasion in item._source.ProgramOccasions">
<div class="d-flex flex-row flex-wrap aling-items-center w-100">
<strong v-if="occasion.Orientations && occasion.Orientations.length > 0">{{occasion.Orientations[0].Name}}</strong>
</div>
<div class="d-flex flex-row flex-wrap w-100">
<p>{{occasion.TermStart}}</p>
<p>{{occasion.StudyLocation}}</p>
<p>{{occasion.StudyPace}}</p>
<a :href="item.Url" class="status-link d-flex flex-row align-items-center" v-if="currentDate < occasion.ApplicationDeadLine && currentDate < occasion.ApplicationClosed && !occasion.Canceled">
<span class="circle--green"></span> {{applicationOpen}}
</a>
<a :href="item.Url" class="status-link d-flex flex-row align-items-center" v-if="currentDate > occasion.ApplicationDeadLine && currentDate < occasion.ApplicationClosed && !occasion.Canceled">
<span class="circle--green"></span> {{applicationLate}}
</a>
<a :href="'https://www.antagning.se/se/search?period=' + occasion.TermStartAbbreviation.slice(0,2) + '+' + occasion.TermStartAbbreviation.slice(2, 6) + '&freeText=' + occasion.RegistrationCode" class="status-link d-flex flex-row align-items-center" v-if="currentDate > occasion.ApplicationClosed && !occasion.Canceled">
<span class="circle--grey"></span> {{applicationClosed}}
</a>
<a :href="'https://www.antagning.se/se/search?period=' + occasion.TermStartAbbreviation.slice(0,2) + '+' + occasion.TermStartAbbreviation.slice(2, 6) + '&freeText=' + occasion.RegistrationCode" class="status-link d-flex flex-row align-items-center" v-if="occasion.Canceled">
<span class="circle--grey"></span> {{applicationCanceled}}
</a>
</div>
</div>
</div>
</bulma-accordion-item>
</bulma-accordion>
</li>
</ul>
`
});
// End Loop Available Program Hits
// Loop Available Hits
Vue.component("courses-looper", {
props: ["hits"],
template: `
<ul class="list-unstyled">
<li class="search-all-article-container row" v-for="(hit, index) in this.hits" :key="hit.Id">
<article class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="row">
<div class="col-12">
<a :href="hit.Url">
<h3 class="heading-level-3 mb-0" v-if="hit.Title" v-html="hit.Title"></h3>
<div class="d-flex flex-row flex-wrap">
<p class="mb-0 mr-2" v-if="Object.keys(hit.MetaData).length < 1" v-html="hit.ContentDataAll"></p>
<p class="mb-0 mr-2" v-if="hit.MetaData && hit.MetaData.Level && hit.MetaData.Level.StringValue">{{hit.MetaData.Level.StringValue}}</p>
<p class="mb-0 mr-2" v-if="hit.MetaData && hit.MetaData.Points && hit.MetaData.Points.StringValue">{{hit.MetaData.Points.StringValue}} hp</p>
</div>
</a>
</div>
</div>
</article>
</li>
</ul>
`
});
// End Loop Available Hits
// Loop Query AutoComplete Hits
Vue.component("autocomplete-hits", {
props: ["hits", "isLoading", "selectedComponent"],
methods: {
hideAutoComplete() {
this.$emit("hideAutoComplete");
}
},
computed: {
theMainFacet: function() {
let allFacet = encodeURI("All");
let webFacet = encodeURI("65227|Webbsidor|-1|False");
let docFacet = encodeURI("65227|Dokument|0|False");
let courseFacet = encodeURI("65227|Kurser|1|False");
let programFacet = encodeURI("65227|Program|1|False");
let personFacet = encodeURI("65227|Personer|2|False");
if (this.selectedComponent == "allHits") {
return allFacet;
} else if (this.selectedComponent == "webpageHits") {
return webFacet;
} else if (this.selectedComponent == "documentHits") {
return docFacet;
} else if (this.selectedComponent == "courseHits1") {
return courseFacet;
} else if (this.selectedComponent == "programHits1") {
return programFacet;
} else if (this.selectedComponent == "personHits") {
return personFacet;
} else {
return "All";
}
}
},
directives: {
ClickOutside
},
template: `
<div class="autocomplete-hits d-flex flex-column d-none d-md-flex" v-click-outside="hideAutoComplete">
<vloading :height="32" :width="32" :color="'#404040'" :is-full-page="false" :active.sync="this.isLoading"></vloading>
<transition-group tag="ul" name="fade" mode="out-in" class="list-unstyled mb-0">
<a :keyup.enter="hideAutoComplete" @click="hideAutoComplete" v-for="(hit, index) in this.hits" :key="index + hit.Query" :href="'?MainFacet=' + theMainFacet + '&querytext=' + hit.Query" >{{hit.Query | capitalize}}</a>
</transition-group>
</div>
`
});
// End Loop Query AutoComplete Hits
//Spellcheck component
Vue.component("spellcheckscomponent", {
props: ["translation", "hits", "selectedComponent"],
data() {
return {
text: this.translation,
selected: this.selectedComponent
};
},
computed: {
theMainFacet: function() {
let allFacet = encodeURI("All");
let webFacet = encodeURI("65227|Webbsidor|-1|False");
let docFacet = encodeURI("65227|Dokument|0|False");
let courseFacet = encodeURI("65227|Kurser|1|False");
let programFacet = encodeURI("65227|Program|1|False");
let personFacet = encodeURI("65227|Personer|2|False");
if (this.selectedComponent == "allHits") {
return allFacet;
} else if (this.selectedComponent == "webpageHits") {
return webFacet;
} else if (this.selectedComponent == "documentHits") {
return docFacet;
} else if (this.selectedComponent == "courseHits1") {
return courseFacet;
} else if (this.selectedComponent == "programHits1") {
return programFacet;
} else if (this.selectedComponent == "personHits") {
return personFacet;
} else {
return "All";
}
}
},
template: `
<div class="row">
<div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="d-flex flex-row flex-wrap">
{{text}}:
<ul class="list-unstyled mb-0 d-flex flex-row flex-wrap">
<li class="ml-2 mr-2" v-for="(hit, index) in this.hits">
<a :href="'?MainFacet=' + theMainFacet + '&querytext=' + hit">{{hit}}</a>
</li>
</ul>
</div>
</div>
</div>
`
});
.search-all-page {
h3 strong {
font-family: "Lato Bold";
font-weight: inherit;
font-size: inherit;
}
.totalhits{
margin-top: $md-space;
margin-bottom: $xs-space;
}
.hits-breadcrumbs{
.breadcrumb{
margin-top: 6px;
margin-bottom: 0px;
background-color: transparent;
padding: 0px;
.breadcrumb-item{
&::before{
color: #404040;
}
a{
font-size: 14px;
color: $blue;
}
&.active{
font-size: 14px;
color: $blue;
}
}
}
}
.sortbar {
@include media-breakpoint-down(sm) {
margin-top: $xs-space;
margin-bottom: $xs-space;
}
}
.search--input--container {
position: relative;
overflow: visible;
.autocomplete-hits {
position: absolute;
top: 60px;
left: 0;
right: 0;
background: white;
z-index: 9999999999;
box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.15);
ul {
width: 100%;
a {
display: flex;
flex-direction: row;
padding-left: 25px;
padding-right: 25px;
height: 50px;
align-items: center;
cursor: pointer;
color: $dark-grey;
font-size: 16px;
line-height: 19px;
&:hover {
background-color: #e7f1f8;
a {
text-decoration: underline;
}
}
&:focus {
background-color: #e7f1f8;
}
}
li {
display: flex;
flex-direction: row;
padding-left: 25px;
padding-right: 25px;
height: 50px;
align-items: center;
cursor: pointer;
a {
display: flex;
flex-direction: row;
padding-left: 25px;
padding-right: 25px;
height: 50px;
align-items: center;
cursor: pointer;
color: $dark-grey;
font-size: 16px;
line-height: 19px;
}
}
}
}
}
.has-border {
border-top: 1px solid $grey-border !important;
padding-top: $sm-space;
}
.hits-block {
margin-right: $xs-space;
p {
margin-bottom: 0px;
font-family: Lato;
font-style: normal;
font-size: 16px;
line-height: 24px;
}
}
.circle--green {
width: 10px;
height: 10px;
background: #27ae60;
border-radius: 50%;
margin-right: 5px;
}
.circle--orange {
width: 10px;
height: 10px;
background: orange;
border-radius: 50%;
margin-right: 5px;
}
.circle--grey {
width: 10px;
height: 10px;
background: $dark-grey;
opacity: 0.4;
border-radius: 50%;
margin-right: 5px;
}
.accordion {
a {
&.status-link {
color: $dark-grey;
}
}
.card {
border-left: 0px solid;
border-right: 0px solid;
background-color: #fff;
border-bottom: 0px solid $grey-border;
color: #4a4a4a;
max-width: 100%;
position: relative;
border: 0px solid !important;
.accordion-body {
height: 0;
overflow: hidden;
.card-content {
background-color: transparent;
transition: all 0.3s ease;
.hits-occasions {
background-color: $bg-grey;
border-top: 1px solid $grey-border;
padding: $xs-space;
margin-top: 5px;
margin-bottom: 5px;
&:first-child {
padding-top: $xs-space;
}
&:last-child {
padding-bottom: $xs-space;
}
p {
margin-right: $xs-space;
margin-bottom: 0px;
padding: 0;
&:last-child {
margin-right: 0px;
}
}
}
}
.card-footer {
background-color: transparent;
border-top: 0px solid $grey-border;
align-items: stretch;
display: flex;
&.is-hidden {
display: none !important;
}
}
}
.card-header {
background-color: transparent;
align-items: stretch;
display: flex;
transition: all 0.3s ease;
padding-left: 0px;
padding-right: 0px;
border-bottom: 0px solid #fff;
padding-top: $sm-space;
padding-bottom: $sm-space;
.card-header-title {
align-items: center;
color: #363636;
display: flex;
flex-grow: 1;
font-family: "Lato Bold";
padding: 0px;
margin-bottom: 0px;
p {
margin-bottom: 0px;
}
}
}
.card-header-icon {
align-items: center;
cursor: pointer;
display: flex;
justify-content: center;
padding: 0.75rem;
margin-bottom: 0px;
.icon {
align-items: center;
display: inline-flex;
justify-content: center;
height: 0.9rem;
width: 0.9rem;
}
}
}
}
.circle--green {
width: 10px;
height: 10px;
background: #27ae60;
border-radius: 50%;
margin-right: 5px;
}
.circle--orange {
width: 10px;
height: 10px;
background: orange;
border-radius: 50%;
margin-right: 5px;
}
.circle--grey {
width: 10px;
height: 10px;
background: $dark-grey;
opacity: 0.4;
border-radius: 50%;
margin-right: 5px;
}
.searchall-accordion {
width: 100%;
.select-css {
&.main {
width: 445px;
padding-left: 25px;
padding-right: 50px;
@include media-breakpoint-down(md) {
width: 100%;
}
}
}
}
.searchall-accordion-header {
cursor: pointer;
}
.searchall-accordion-body {
padding: 0;
max-height: 150em;
overflow: hidden;
transition: 0.3s ease all;
}
.is-closed .searchall-accordion-body {
max-height: 0;
}
.searchall-accordion-content {
padding-top: 30px;
}
.vld-parent {
min-height: 150px;
}
.vld-overlay {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
align-items: center;
display: none;
justify-content: center;
overflow: hidden;
z-index: 1;
}
.vld-overlay.is-active {
display: flex
}
.vld-overlay.is-full-page {
z-index: 999;
position: fixed
}
.vld-overlay .vld-background {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
background: #fff;
opacity: 0.5;
}
.vld-overlay .vld-icon,
.vld-parent {
position: relative
}
button {
&.button-small {
font-family: "Lato";
font-weight: inherit;
}
}
.search-all-article-container {
border-top: 1px solid $grey-border;
&.is--promoted{
background-color: $light-blue;
.breadcrumb{
margin-top: 0px;
}
}
.card {
.card-header-icon {
display: none;
}
&.show-icon {
.card-header-icon {
display: block;
}
}
}
article {
padding-top: $sm-space;
padding-bottom: $sm-space;
a {
color: $dark-grey;
h3 {
color: $dark-grey;
strong {
font-family: "Lato Bold";
font-weight: inherit;
font-size: inherit;
}
}
}
small {
opacity: 0.6;
font-size: 14px;
font-family: "Lato";
line-height: 150%;
}
time {
font-size: 14px;
font-family: "Lato";
line-height: 150%;
text-transform: capitalize;
}
p {
strong {
font-family: "Lato Bold";
font-weight: inherit;
font-size: inherit;
}
}
.img-circle {
height: 80px;
width: 80px;
background-position: center;
background-size: cover;
border: 1px solid $grey-border;
border-radius: 50%;
margin-bottom: $xs-space;
}
}
}
}
There are no notes for this item.