chris
/
pixelfed
forked from mirror/pixelfed
1
0
Fork 0
Code Pull Requests Activity
pixelfed/resources/assets/js/components/SearchResults.vue

508 lines
17 KiB
Vue
Raw Normal View History

Add SearchResults vue component
2019-02-22 20:51:17 +00:00
<template>
<div class="container">
Add wip SearchResults component
2019-02-27 07:04:53 +00:00
<div v-if="loading" class="pt-5 text-center">
<div class="spinner-border" role="status">
some English strings improvements Signed-off-by: Marcin Mikołajczak <me@m4sk.in>
2019-02-28 13:03:25 +00:00
<span class="sr-only">Loading…</span>
Add wip SearchResults component
2019-02-27 07:04:53 +00:00
</div>
</div>
<div v-if="networkError" class="pt-5 text-center">
<p class="lead font-weight-lighter">An error occured, results could not be loaded.<br> Please try again later.</p>
</div>
Update SearchResults.vue, improve layout
2020-03-25 03:10:19 +00:00
<div v-if="!loading && !networkError" class="mt-5">
<div v-if="analysis == 'all'" class="row">
<div class="col-12 mb-5">
<p class="h5 font-weight-bold text-dark">Showing results for <i>{{query}}</i></p>
<hr>
</div>
<div class="col-md-3">
<div class="mb-4">
<p class="text-secondary small font-weight-bold">HASHTAGS <span class="pl-1 text-lighter">({{results.hashtags.length}})</span></p>
Add wip SearchResults component
2019-02-27 07:04:53 +00:00
</div>
Update SearchResults.vue, improve layout
2020-03-25 03:10:19 +00:00
<div v-if="results.hashtags.length">
<a v-for="(hashtag, index) in results.hashtags" class="mb-2 result-card" :href="buildUrl('hashtag', hashtag)">
<div class="pb-3">
<div class="media align-items-center py-2 pr-3">
<span class="d-inline-flex align-items-center justify-content-center border rounded-circle mr-3" style="width: 50px;height: 50px;">
<i class="fas fa-hashtag text-muted"></i>
</span>
<div class="media-body text-truncate">
<p class="mb-0 text-truncate text-dark font-weight-bold" data-toggle="tooltip" :title="hashtag.value">
#{{hashtag.value}}
</p>
<p v-if="hashtag.count > 2" class="mb-0 small font-weight-bold text-muted text-uppercase">
{{hashtag.count}} posts
</p>
</div>
</div>
</div>
</a>
Add wip SearchResults component
2019-02-27 07:04:53 +00:00
</div>
Update SearchResults.vue, improve layout
2020-03-25 03:10:19 +00:00
<div v-else>
<div class="border py-3 text-center font-weight-bold">No results found</div>
Add wip SearchResults component
2019-02-27 07:04:53 +00:00
</div>
</div>
Update SearchResults.vue, improve layout
2020-03-25 03:10:19 +00:00
<div class="col-md-5">
<div class="mb-4">
<p class="text-secondary small font-weight-bold">PROFILES <span class="pl-1 text-lighter">({{results.profiles.length}})</span></p>
</div>
<div v-if="results.profiles.length">
<a v-for="(profile, index) in results.profiles" class="mb-2 result-card" :href="buildUrl('profile', profile)">
<div class="pb-3">
<div class="media align-items-center py-2 pr-3">
<img class="mr-3 rounded-circle border" :src="profile.avatar" width="50px" height="50px">
<div class="media-body">
<p class="mb-0 text-truncate text-dark font-weight-bold" data-toggle="tooltip" :title="profile.value">
{{profile.value}}
</p>
<p class="mb-0 small font-weight-bold text-muted text-uppercase">
{{profile.entity.post_count}} Posts
</p>
</div>
<div class="ml-3">
<a v-if="profile.entity.following" class="btn btn-primary btn-sm font-weight-bold text-uppercase py-0" :href="buildUrl('profile', profile)">Following</a>
<a v-else class="btn btn-outline-primary btn-sm font-weight-bold text-uppercase py-0" :href="buildUrl('profile', profile)">View</a>
</div>
</div>
</div>
</a>
</div>
<div v-else>
<div class="border py-3 text-center font-weight-bold">No results found</div>
</div>
Add wip SearchResults component
2019-02-27 07:04:53 +00:00
</div>
Update SearchResults.vue, improve layout
2020-03-25 03:10:19 +00:00
<div class="col-md-4">
<div class="mb-4">
<p class="text-secondary small font-weight-bold">STATUSES <span class="pl-1 text-lighter">({{results.statuses.length}})</span></p>
</div>
<div v-if="results.statuses.length">
<a v-for="(status, index) in results.statuses" class="mr-2 result-card" :href="buildUrl('status', status)">
<img :src="status.thumb" width="90px" height="90px" class="mb-2">
</a>
</div>
<div v-else>
<div class="border py-3 text-center font-weight-bold">No results found</div>
</div>
Add wip SearchResults component
2019-02-27 07:04:53 +00:00
</div>
Update SearchResults.vue, improve layout
2020-03-25 03:10:19 +00:00
</div>
<div v-else-if="analysis == 'hashtag'" class="row">
<div class="col-12 mb-5">
<p class="h5 font-weight-bold text-dark">Showing results for <i>{{query}}</i></p>
<hr>
</div>
<div class="col-md-6 offset-md-3">
<div class="mb-4">
<p class="text-secondary small font-weight-bold">HASHTAGS <span class="pl-1 text-lighter">({{results.hashtags.length}})</span></p>
</div>
<div v-if="results.hashtags.length">
<a v-for="(hashtag, index) in results.hashtags" class="mb-2 result-card" :href="buildUrl('hashtag', hashtag)">
<div class="pb-3">
<div class="media align-items-center py-2 pr-3">
<span class="d-inline-flex align-items-center justify-content-center border rounded-circle mr-3" style="width: 50px;height: 50px;">
<i class="fas fa-hashtag text-muted"></i>
</span>
<div class="media-body">
<p class="mb-0 text-truncate text-dark font-weight-bold" data-toggle="tooltip" :title="hashtag.value">
#{{hashtag.value}}
</p>
<p v-if="hashtag.count > 2" class="mb-0 small font-weight-bold text-muted text-uppercase">
{{hashtag.count}} posts
</p>
</div>
</div>
Update SearchResults component
2019-04-02 03:27:10 +00:00
</div>
Update search results, fix status grid
2019-07-08 03:17:47 +00:00
</a>
</div>
Update SearchResults.vue, improve layout
2020-03-25 03:10:19 +00:00
<div v-else>
<div class="border py-3 text-center font-weight-bold">No results found</div>
</div>
Add wip SearchResults component
2019-02-27 07:04:53 +00:00
</div>
Update SearchResults.vue, improve layout
2020-03-25 03:10:19 +00:00
</div>
<div v-else-if="analysis == 'profile'" class="row">
<div class="col-12 mb-5">
<p class="h5 font-weight-bold text-dark">Showing results for <i>{{query}}</i></p>
<hr>
</div>
<div class="col-md-6 offset-md-3">
<div class="mb-4">
<p class="text-secondary small font-weight-bold">PROFILES <span class="pl-1 text-lighter">({{results.profiles.length}})</span></p>
</div>
<div v-if="results.profiles.length">
<div v-for="(profile, index) in results.profiles" class="card mb-4">
<div class="card-header p-0 m-0">
<div style="width: 100%;height: 140px;background: #0070b7"></div>
</div>
<div class="card-body">
<div class="text-center mt-n5 mb-4">
<img class="rounded-circle p-1 border mt-n4 bg-white shadow" :src="profile.entity.thumb" width="90px" height="90px;" onerror="this.onerror=null;this.src='/storage/avatars/default.png';">
</div>
<p class="text-center lead font-weight-bold mb-1">{{profile.value}}</p>
<p class="text-center text-muted small text-uppercase mb-4"><!-- 2 followers --></p>
<div class="d-flex justify-content-center">
<button v-if="profile.entity.following" type="button" class="btn btn-outline-secondary btn-sm py-1 px-4 text-uppercase font-weight-bold mr-3" style="font-weight: 500">Following</button>
<a class="btn btn-primary btn-sm py-1 px-4 text-uppercase font-weight-bold" :href="buildUrl('profile',profile)" style="font-weight: 500">View Profile</a>
</div>
</div>
</div>
</div>
<div v-else>
<div class="border py-3 text-center font-weight-bold">No results found</div>
</div>
Update SearchResults component
2019-04-02 03:27:10 +00:00
</div>
Add wip SearchResults component
2019-02-27 07:04:53 +00:00
</div>
Update SearchResults.vue, improve layout
2020-03-25 03:10:19 +00:00
<div v-else-if="analysis == 'webfinger'" class="row">
<div class="col-12 mb-5">
<p class="h5 font-weight-bold text-dark">Showing results for <i>{{query}}</i></p>
<hr>
<div class="col-md-6 offset-md-3">
<div v-for="(profile, index) in results.profiles" class="card mb-2">
<div class="card-header p-0 m-0">
<div style="width: 100%;height: 140px;background: #0070b7"></div>
</div>
<div class="card-body">
<div class="text-center mt-n5 mb-4">
<img class="rounded-circle p-1 border mt-n4 bg-white shadow" :src="profile.entity.thumb" width="90px" height="90px;" onerror="this.onerror=null;this.src='/storage/avatars/default.png';">
</div>
<p class="text-center lead font-weight-bold mb-1">{{profile.value}}</p>
<p class="text-center text-muted small text-uppercase mb-4"><!-- 2 followers --></p>
<div class="d-flex justify-content-center">
<!-- <button v-if="profile.entity.following" type="button" class="btn btn-outline-secondary btn-sm py-1 px-4 text-uppercase font-weight-bold mr-3" style="font-weight: 500">Unfollow</button> -->
<!-- <button v-else type="button" class="btn btn-primary btn-sm py-1 px-4 text-uppercase font-weight-bold mr-3" style="font-weight: 500">Follow</button> -->
<a class="btn btn-primary btn-sm py-1 px-4 text-uppercase font-weight-bold" :href="'/i/web/profile/_/' + profile.entity.id" style="font-weight: 500">View Profile</a>
</div>
</div>
</div>
</div>
</div>
</div>
Update SearchController
2020-04-22 05:42:52 +00:00
<div v-else-if="analysis == 'remote'" class="row">
<div class="col-12 mb-5">
<p class="h5 font-weight-bold text-dark">Showing results for <i>{{query}}</i></p>
<hr>
</div>
<div v-if="results.profiles.length" class="col-md-6 offset-3">
<a v-for="(profile, index) in results.profiles" class="mb-2 result-card" :href="buildUrl('profile', profile)">
<div class="pb-3">
<div class="media align-items-center py-2 pr-3">
<img class="mr-3 rounded-circle border" :src="profile.entity.thumb" width="50px" height="50px" onerror="this.onerror=null;this.src='/storage/avatars/default.png';">
<div class="media-body">
<p class="mb-0 text-truncate text-dark font-weight-bold" data-toggle="tooltip" :title="profile.value">
{{profile.value}}
</p>
<p class="mb-0 small font-weight-bold text-muted text-uppercase">
{{profile.entity.post_count}} Posts
</p>
</div>
<div class="ml-3">
<a v-if="profile.entity.following" class="btn btn-primary btn-sm font-weight-bold text-uppercase py-0" :href="buildUrl('profile', profile)">Following</a>
<a v-else class="btn btn-outline-primary btn-sm font-weight-bold text-uppercase py-0" :href="buildUrl('profile', profile)">View</a>
</div>
</div>
</div>
</a>
</div>
<div v-if="results.statuses.length" class="col-md-6 offset-3">
<a v-for="(status, index) in results.statuses" class="mr-2 result-card" :href="buildUrl('status', status)">
<img :src="status.thumb" width="90px" height="90px" class="mb-2" onerror="this.onerror=null;this.src='/storage/no-preview.png';">
</a>
</div>
</div>
<div v-else-if="analysis == 'remotePost'" class="row">
<div class="col-12 mb-5">
<p class="h5 font-weight-bold text-dark">Showing results for <i>{{query}}</i></p>
<hr>
</div>
<div class="col-md-6 offset-md-3">
<div v-if="results.statuses.length">
<div v-for="(status, index) in results.statuses" class="card mb-4 shadow-none border">
<div class="card-header p-0 m-0">
<div style="width: 100%;height: 200px;background: #fff">
<div class="pt-4 text-center">
<img :src="status.thumb" class="img-fluid border" style="max-height: 140px;">
</div>
</div>
</div>
<div class="card-body">
<div class="mt-n4 mb-2">
<div class="media">
<img class="rounded-circle p-1 mr-2 border mt-n3 bg-white shadow" src="/storage/avatars/default.png" width="70px" height="70px;" onerror="this.onerror=null;this.src='/storage/avatars/default.png';">
<div class="media-body pt-3">
<p class="font-weight-bold mb-0">{{status.username}}</p>
</div>
<div class="float-right pt-3">
<p class="small mb-0 text-muted">{{status.timestamp}}</p>
</div>
</div>
</div>
<p class="text-center mb-3 lead" v-html="status.caption"></p>
<!-- <p class="text-center text-muted small text-uppercase mb-4">2 likes</p> -->
<!-- <div class="d-flex justify-content-center">
<a class="btn btn-primary btn-sm py-1 px-4 text-uppercase font-weight-bold" :href="status.url" style="font-weight: 500">View Post</a>
</div> -->
</div>
<div class="card-footer">
<a class="btn btn-primary btn-block font-weight-bold rounded-0" :href="status.url">View Post</a>
</div>
</div>
</div>
<div v-else>
<div class="border py-3 text-center font-weight-bold">No results found</div>
</div>
</div>
</div>
Update SearchResults.vue, improve layout
2020-03-25 03:10:19 +00:00
<div v-else class="col-12">
<p class="text-center text-muted lead font-weight-bold">No results found</p>
</div>
Add wip SearchResults component
2019-02-27 07:04:53 +00:00
</div>
Add SearchResults vue component
2019-02-22 20:51:17 +00:00
</div>
</template>
<style type="text/css" scoped>
Update SearchResults.vue, improve layout
2020-03-25 03:10:19 +00:00
.result-card {
text-decoration: none;
}
.result-card .media:hover {
background: #EDF2F7;
}
@media (min-width: 1200px) {
.container {
max-width: 995px;
}
}
Add SearchResults vue component
2019-02-22 20:51:17 +00:00
</style>
<script type="text/javascript">
export default {
Update SearchResults component
2019-04-02 03:27:10 +00:00
props: ['query', 'profileId'],
Add wip SearchResults component
2019-02-27 07:04:53 +00:00
data() {
return {
loading: true,
networkError: false,
results: {
hashtags: [],
profiles: [],
statuses: []
},
filters: {
hashtags: true,
profiles: true,
statuses: true
Update SearchResults.vue, improve layout
2020-03-25 03:10:19 +00:00
},
analysis: 'profile',
Add wip SearchResults component
2019-02-27 07:04:53 +00:00
}
},
beforeMount() {
Update SearchResults.vue, improve layout
2020-03-25 03:10:19 +00:00
this.bootSearch();
Add wip SearchResults component
2019-02-27 07:04:53 +00:00
},
mounted() {
Update SearchResults component
2019-04-02 03:48:20 +00:00
$('.search-bar input').val(this.query);
Add wip SearchResults component
2019-02-27 07:04:53 +00:00
},
methods: {
Update SearchResults.vue, improve layout
2020-03-25 03:10:19 +00:00
bootSearch() {
let lexer = this.searchLexer();
this.analysis = lexer;
this.fetchSearchResults();
},
Add wip SearchResults component
2019-02-27 07:04:53 +00:00
fetchSearchResults() {
Update SearchController
2020-04-22 05:42:52 +00:00
if(this.analysis == 'remote') {
let term = this.query;
let parsed = new URL(term);
if(parsed.host === window.location.host) {
window.location.href = term;
return;
}
}
Update SearchResults.vue, improve layout
2020-03-25 03:10:19 +00:00
this.searchContext(this.analysis);
Add wip SearchResults component
2019-02-27 07:04:53 +00:00
},
Update SearchResults component
2019-04-02 03:27:10 +00:00
Update SearchResults
2019-08-23 03:49:20 +00:00
followProfile(profile, index) {
Update SearchResults.vue
2019-08-23 00:25:53 +00:00
this.loading = true;
Update SearchResult component
2019-04-08 20:20:31 +00:00
axios.post('/i/follow', {
Update SearchResults.vue
2019-08-23 00:25:53 +00:00
item: profile.entity.id
Update SearchResult component
2019-04-08 20:20:31 +00:00
}).then(res => {
Update SearchResults
2019-08-23 03:49:20 +00:00
if(profile.entity.local == true) {
this.fetchSearchResults();
return;
} else {
this.loading = false;
this.results.profiles[index].entity.follow_request = true;
return;
}
Add limits to Following
2019-06-02 02:18:21 +00:00
}).catch(err => {
if(err.response.data.message) {
swal('Error', err.response.data.message, 'error');
}
Update SearchResult component
2019-04-08 20:20:31 +00:00
});
Update SearchResults component
2019-04-02 03:27:10 +00:00
},
Update SearchResults.vue, improve layout
2020-03-25 03:10:19 +00:00
searchLexer() {
let q = this.query;
if(q.startsWith('#')) {
return 'hashtag';
}
if((q.match(/@/g) || []).length == 2) {
return 'webfinger';
}
Update SearchResults, fix remote post bug
2020-04-22 05:58:22 +00:00
if(q.startsWith('@')) {
Update SearchResults.vue, improve layout
2020-03-25 03:10:19 +00:00
return 'profile';
}
if(q.startsWith('https://')) {
return 'remote';
}
return 'all';
},
buildUrl(type = 'hashtag', obj) {
switch(type) {
case 'hashtag':
return obj.url + '?src=search';
break;
case 'profile':
if(obj.entity.local == true) {
return obj.url;
}
return '/i/web/profile/_/' + obj.entity.id;
break;
default:
return obj.url + '?src=search';
break;
}
},
searchContext(type) {
switch(type) {
case 'all':
axios.get('/api/search', {
params: {
'q': this.query,
'src': 'metro',
'v': 1,
'scope': 'all'
}
}).then(res => {
let results = res.data;
this.results.hashtags = results.hashtags ? results.hashtags : [];
this.results.profiles = results.profiles ? results.profiles : [];
this.results.statuses = results.posts ? results.posts : [];
this.loading = false;
}).catch(err => {
this.loading = false;
console.log(err);
this.networkError = true;
});
break;
Update SearchController
2020-04-22 05:42:52 +00:00
case 'remote':
axios.get('/api/search', {
params: {
'q': this.query,
'src': 'metro',
'v': 1,
'scope': 'remote'
}
}).then(res => {
let results = res.data;
this.results.hashtags = results.hashtags ? results.hashtags : [];
this.results.profiles = results.profiles ? results.profiles : [];
this.results.statuses = results.posts ? results.posts : [];
if(this.results.profiles.length) {
this.analysis = 'profile';
}
if(this.results.statuses.length) {
this.analysis = 'remotePost';
}
this.loading = false;
}).catch(err => {
this.loading = false;
console.log(err);
this.networkError = true;
});
break;
Update SearchResults.vue, improve layout
2020-03-25 03:10:19 +00:00
case 'hashtag':
axios.get('/api/search', {
params: {
'q': this.query.slice(1),
'src': 'metro',
'v': 1,
'scope': 'hashtag'
}
}).then(res => {
let results = res.data;
this.results.hashtags = results.hashtags ? results.hashtags : [];
this.results.profiles = results.profiles ? results.profiles : [];
this.results.statuses = results.posts ? results.posts : [];
this.loading = false;
}).catch(err => {
this.loading = false;
console.log(err);
this.networkError = true;
});
break;
case 'profile':
axios.get('/api/search', {
params: {
'q': this.query,
'src': 'metro',
'v': 1,
'scope': 'profile'
}
}).then(res => {
let results = res.data;
this.results.hashtags = results.hashtags ? results.hashtags : [];
this.results.profiles = results.profiles ? results.profiles : [];
this.results.statuses = results.posts ? results.posts : [];
this.loading = false;
}).catch(err => {
this.loading = false;
console.log(err);
this.networkError = true;
});
break;
case 'webfinger':
axios.get('/api/search', {
params: {
'q': this.query,
'src': 'metro',
'v': 1,
'scope': 'webfinger'
}
}).then(res => {
let results = res.data;
this.results.hashtags = [];
this.results.profiles = results.profiles;
this.results.statuses = [];
this.loading = false;
}).catch(err => {
this.loading = false;
console.log(err);
this.networkError = true;
});
break;
default:
this.loading = false;
this.networkError = true;
break;
}
}
Add wip SearchResults component
2019-02-27 07:04:53 +00:00
}
Add SearchResults vue component
2019-02-22 20:51:17 +00:00
}
some English strings improvements Signed-off-by: Marcin Mikołajczak <me@m4sk.in>
2019-02-28 13:03:25 +00:00
</script>