resources/assets/js/components/PortfolioSettings.vue
<template>
<div class="portfolio-settings px-3">
<div v-if="loading" class="d-flex justify-content-center align-items-center py-5">
<b-spinner variant="primary" />
</div>
<div v-else class="row justify-content-center mb-5 pb-5">
<div class="col-12 col-md-8 bg-dark py-2 rounded">
<ul class="nav nav-pills nav-fill">
<li v-for="(tab, index) in tabs" class="nav-item" :class="{ disabled: index !== 0 && !settings.active}">
<span v-if="index !== 0 && !settings.active" class="nav-link">{{ tab }}</span>
<a v-else class="nav-link" :class="{ active: tab === tabIndex }" href="#" @click.prevent="toggleTab(tab)">{{ tab }}</a>
</li>
</ul>
</div>
<transition name="slide-fade">
<div v-if="tabIndex === 'Configure'" class="col-12 col-md-8 bg-dark mt-3 py-2 rounded" key="0">
<div v-if="!user.statuses_count" class="alert alert-danger">
<p class="mb-0 small font-weight-bold">You don't have any public posts, once you share public posts you can enable your portfolio.</p>
</div>
<div class="d-flex justify-content-between align-items-center py-2">
<div class="setting-label">
<p class="lead mb-0">Portfolio Enabled</p>
<p class="small mb-0 text-muted">You must enable your portfolio before you or anyone can view it.</p>
</div>
<div class="setting-switch mt-n1">
<b-form-checkbox v-model="settings.active" name="check-button" size="lg" switch :disabled="!user.statuses_count" />
</div>
</div>
<hr>
<div class="d-flex justify-content-between align-items-center py-2">
<div class="setting-label" style="max-width: 50%;">
<p class="mb-0">Portfolio Source</p>
<p class="small mb-0 text-muted">Choose how you want to populate your portfolio, select Most Recent posts to automatically update your portfolio with recent posts or Curated Posts to select specific posts for your portfolio.</p>
</div>
<div class="ml-3">
<b-form-select v-model="settings.profile_source" :options="profileSourceOptions" :disabled="!user.statuses_count" />
</div>
</div>
</div>
<div v-else-if="tabIndex === 'Curate'" class="col-12 col-md-8 mt-3 py-2 px-0" key="1">
<div v-if="!recentPostsLoaded" class="d-flex align-items-center justify-content-center py-5 my-5">
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<p class="text-muted">Loading recent posts...</p>
</div>
</div>
<template v-else>
<div class="mt-n2 mb-4">
<p class="text-muted small">Select up to 100 photos from your 100 most recent posts. You can only select public photo posts, videos are not supported at this time.</p>
<div class="d-flex align-items-center justify-content-between">
<p class="font-weight-bold mb-0">Selected {{ selectedRecentPosts.length }}/100</p>
<div>
<button
class="btn btn-link font-weight-bold mr-3 text-decoration-none"
:disabled="!selectedRecentPosts.length"
@click="clearSelected">
Clear selected
</button>
<button
class="btn btn-primary py-0 font-weight-bold"
style="width: 150px;"
:disabled="!canSaveCurated"
@click="saveCurated()">
<template v-if="!isSavingCurated">Save</template>
<b-spinner v-else small />
</button>
</div>
</div>
</div>
<div class="d-flex justify-content-between align-items-center">
<span @click="recentPostsPrev">
<i :class="prevClass" />
</span>
<div class="row flex-grow-1 mx-2">
<div v-for="(post, index) in recentPosts.slice(rpStart, rpStart + 9)" class="col-12 col-md-4 mb-1 p-1">
<div class="square user-select-none" @click.prevent="toggleRecentPost(post.id)">
<transition name="fade">
<img
:key="post.id"
:src="getPreviewUrl(post)"
width="100%"
height="300"
style="overflow: hidden;object-fit: cover;"
:draggable="false"
loading="lazy"
onerror="this.src='/storage/no-preview.png';this.onerror=null;"
class="square-content pr-1">
</transition>
<div v-if="selectedRecentPosts.indexOf(post.id) !== -1" style="position: absolute;right: -5px;bottom:-5px;">
<div class="selected-badge">{{ selectedRecentPosts.indexOf(post.id) + 1 }}</div>
</div>
</div>
</div>
</div>
<span @click="recentPostsNext()">
<i :class="nextClass" />
</span>
</div>
</template>
</div>
<div v-else-if="tabIndex === 'Customize'" class="col-12 mt-3 py-2" key="2">
<div class="row">
<div class="col-12 col-md-6">
<div v-for="setting in customizeSettings" class="card bg-dark mb-5">
<div class="card-header">{{ setting.title }}</div>
<div class="list-group bg-dark">
<div v-for="item in setting.items" class="list-group-item">
<div class="d-flex justify-content-between align-items-center py-2">
<div class="setting-label">
<p class="mb-0">{{ item.label }}</p>
<p v-if="item.description" class="small text-muted mb-0">{{ item.description }}</p>
</div>
<div class="setting-switch mt-n1">
<b-form-checkbox
v-model="settings[item.model]"
name="check-button"
size="lg"
switch
:disabled="item.requiredWithTrue && !settings[item.requiredWithTrue]" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card bg-dark mb-5">
<div class="card-header">Portfolio</div>
<div class="list-group bg-dark">
<div class="list-group-item">
<div class="d-flex justify-content-between align-items-center py-2">
<div class="setting-label">
<p class="mb-0">Layout</p>
</div>
<div>
<b-form-select v-model="settings.profile_layout" :options="profileLayoutOptions" />
</div>
</div>
</div>
<div v-if="settings.profile_source === 'custom'" class="list-group-item">
<div class="d-flex justify-content-between align-items-center py-2">
<div class="setting-label">
<p class="mb-0">Order</p>
</div>
<div>
<b-form-select
v-model="settings.feed_order"
:options="profileLayoutFeedOrder" />
</div>
</div>
</div>
<div class="list-group-item">
<div class="d-flex justify-content-between align-items-center py-2">
<div class="setting-label">
<p class="mb-0">Color Scheme</p>
</div>
<div>
<b-form-select
v-model="settings.color_scheme"
:options="profileLayoutColorSchemeOptions"
:disabled="settings.color_scheme === 'custom'"
@change="updateColorScheme" />
</div>
</div>
</div>
<div class="list-group-item">
<div class="d-flex justify-content-between align-items-center py-2">
<div class="setting-label">
<p class="mb-0">Background Color</p>
</div>
<b-col sm="2">
<b-form-input
v-model="settings.background_color"
debounce="1000"
type="color"
@change="updateBackgroundColor" />
<b-button
v-if="!['#000000', null].includes(settings.background_color)"
variant="link"
@click="resetBackgroundColor">
Reset
</b-button>
</b-col>
</div>
</div>
<div class="list-group-item">
<div class="d-flex justify-content-between align-items-center py-2">
<div class="setting-label">
<p class="mb-0">Text Color</p>
</div>
<b-col sm="2">
<b-form-input
v-model="settings.text_color"
debounce="1000"
type="color"
@change="updateTextColor" />
<b-button
v-if="!['#d4d4d8', null].includes(settings.text_color)"
variant="link"
@click="resetTextColor">
Reset
</b-button>
</b-col>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else-if="tabIndex === 'Share'" class="col-12 col-md-8 bg-dark mt-3 py-2 rounded" key="3">
<div class="py-2">
<p class="text-muted">Portfolio URL</p>
<p class="lead mb-0"><a :href="settings.url">{{ settings.url }}</a></p>
</div>
</div>
</transition>
</div>
</div>
</template>
<script type="text/javascript">
export default {
data() {
return {
loading: true,
tabIndex: "Configure",
tabs: [
"Configure",
"Customize",
"View Portfolio"
],
user: undefined,
settings: undefined,
recentPostsLoaded: false,
rpStart: 0,
recentPosts: [],
recentPostsPage: undefined,
selectedRecentPosts: [],
isSavingCurated: false,
canSaveCurated: false,
customizeSettings: [],
skipWatch: false,
profileSourceOptions: [
{ value: null, text: 'Please select an option', disabled: true },
{ value: 'recent', text: 'Most recent posts' },
],
profileLayoutOptions: [
{ value: null, text: 'Please select an option', disabled: true },
{ value: 'grid', text: 'Grid' },
{ value: 'masonry', text: 'Masonry' },
{ value: 'album', text: 'Album' },
],
profileLayoutColorSchemeOptions: [
{ value: null, text: 'Please select an option', disabled: true },
{ value: 'light', text: 'Light mode' },
{ value: 'dark', text: 'Dark mode' },
{ value: 'custom', text: 'Custom color scheme', disabled: true },
],
profileLayoutFeedOrder: [
{ value: 'oldest', text: 'Oldest first' },
{ value: 'recent', text: 'Recent first' }
]
}
},
computed: {
prevClass() {
return this.rpStart === 0 ?
"fa fa-arrow-circle-left fa-3x text-dark" :
"fa fa-arrow-circle-left fa-3x text-muted cursor-pointer";
},
nextClass() {
return this.rpStart > (this.recentPosts.length - 9) ?
"fa fa-arrow-circle-right fa-3x text-dark" :
"fa fa-arrow-circle-right fa-3x text-muted cursor-pointer";
},
},
watch: {
settings: {
deep: true,
immediate: true,
handler: function(o, n) {
if(this.loading || this.skipWatch) {
return;
}
if(!n.show_timestamp) {
this.settings.show_link = false;
}
this.updateSettings();
}
}
},
mounted() {
this.fetchUser();
},
methods: {
fetchUser() {
axios.get('/api/v1/accounts/verify_credentials')
.then(res => {
this.user = res.data;
if(res.data.statuses_count > 0) {
this.profileSourceOptions = [
{ value: null, text: 'Please select an option', disabled: true },
{ value: 'recent', text: 'Most recent posts' },
{ value: 'custom', text: 'Curated posts' },
];
} else {
setTimeout(() => {
this.settings.active = false;
this.settings.profile_source = 'recent';
this.tabIndex = 'Configure';
}, 1000);
}
})
axios.post(this.apiPath('/api/portfolio/self/settings.json'))
.then(res => {
this.settings = res.data;
this.updateTabs();
if(res.data.metadata && res.data.metadata.posts) {
this.selectedRecentPosts = res.data.metadata.posts;
}
if(res.data.color_scheme != 'dark') {
if(res.data.color_scheme === 'light') {
this.updateBackgroundColor('#ffffff');
} else {
if(res.data.hasOwnProperty('background_color')) {
this.updateBackgroundColor(res.data.background_color);
}
if(res.data.hasOwnProperty('text_color')) {
this.updateTextColor(res.data.text_color);
}
}
}
})
.then(() => {
this.initCustomizeSettings();
})
.then(() => {
const url = new URL(window.location);
if(url.searchParams.has('tab')) {
let tab = url.searchParams.get('tab');
let tabs = this.settings.profile_source === 'custom' ?
['curate', 'customize', 'share'] :
['customize', 'share'];
if(tabs.indexOf(tab) !== -1) {
this.toggleTab(tab.slice(0, 1).toUpperCase() + tab.slice(1));
}
}
})
.then(() => {
setTimeout(() => {
this.loading = false;
}, 500);
})
},
apiPath(path) {
return path;
},
toggleTab(idx) {
if(idx === 'Curate' && !this.recentPostsLoaded) {
this.loadRecentPosts();
}
this.tabIndex = idx;
this.rpStart = 0;
if(idx == 'Configure') {
const url = new URL(window.location);
url.searchParams.delete('tab');
window.history.pushState({}, '', url);
} else if (idx == 'View Portfolio') {
this.tabIndex = 'Configure';
window.location.href = `https://${window._portfolio.domain}${window._portfolio.path}/${this.user.username}`;
return;
} else {
const url = new URL(window.location);
url.searchParams.set('tab', idx.toLowerCase());
window.history.pushState({}, '', url);
}
},
updateTabs() {
if(this.settings.profile_source === 'custom') {
this.tabs = [
"Configure",
"Curate",
"Customize",
"View Portfolio"
];
} else {
this.tabs = [
"Configure",
"Customize",
"View Portfolio"
];
}
},
updateSettings(silent = false) {
if(this.skipWatch) {
return;
}
axios.post(this.apiPath('/api/portfolio/self/update-settings.json'), this.settings)
.then(res => {
this.updateTabs();
if(!silent) {
this.$bvToast.toast(`Your settings have been successfully updated!`, {
variant: 'dark',
title: 'Settings Updated',
autoHideDelay: 2000,
appendToast: false
})
}
})
},
loadRecentPosts() {
axios.get('/api/v1/accounts/' + this.user.id + '/statuses?only_media=1&media_types=photo&limit=100&_pe=1')
.then(res => {
if(res.data.length) {
this.recentPosts = res.data.filter(p => ['photo', 'photo:album'].includes(p.pf_type) && p.visibility === "public");
}
})
.then(() => {
setTimeout(() => {
this.recentPostsLoaded = true;
}, 500);
})
},
toggleRecentPost(id) {
if(this.selectedRecentPosts.indexOf(id) == -1) {
if(this.selectedRecentPosts.length === 100) {
return;
}
this.selectedRecentPosts.push(id);
} else {
this.selectedRecentPosts = this.selectedRecentPosts.filter(i => i !== id);
}
this.canSaveCurated = true;
},
recentPostsPrev() {
if(this.rpStart === 0) {
return;
}
this.rpStart = this.rpStart - 9;
},
recentPostsNext() {
if(this.rpStart > (this.recentPosts.length - 9)) {
return;
}
this.rpStart = this.rpStart + 9;
},
clearSelected() {
this.selectedRecentPosts = [];
},
saveCurated() {
this.isSavingCurated = true;
event.currentTarget?.blur();
axios.post('/api/portfolio/self/curated.json', {
ids: this.selectedRecentPosts
})
.then(res => {
this.isSavingCurated = false;
this.$bvToast.toast(`Your curated posts have been updated!`, {
variant: 'dark',
title: 'Portfolio Updated',
autoHideDelay: 2000,
appendToast: false
})
})
.catch(err => {
this.isSavingCurated = false;
this.$bvToast.toast(`An error occured while attempting to update your portfolio, please try again later and contact an admin if this problem persists.`, {
variant: 'dark',
title: 'Error',
autoHideDelay: 2000,
appendToast: false
})
})
},
initCustomizeSettings() {
this.customizeSettings = [
{
title: "Post Settings",
items: [
{
label: "Show Captions",
model: "show_captions"
},
{
label: "Show License",
model: "show_license"
},
{
label: "Show Location",
model: "show_location"
},
{
label: "Show Timestamp",
model: "show_timestamp"
},
{
label: "Link to Post",
description: "Add link to timestamp to view the original post url, requires show timestamp to be enabled",
model: "show_link",
requiredWithTrue: "show_timestamp"
}
]
},
{
title: "Profile Settings",
items: [
{
label: "Show Avatar",
model: "show_avatar"
},
{
label: "Show Bio",
model: "show_bio"
},
{
label: "Show View Profile Button",
model: "show_profile_button"
},
{
label: "Enable RSS Feed",
description: "Enable your RSS feed with the 10 most recent portfolio items",
model: "rss_enabled"
},
{
label: "Show RSS Feed Button",
model: "show_rss_button",
requiredWithTrue: "rss_enabled"
},
]
},
]
},
updateBackgroundColor(e) {
this.skipWatch = true;
let rs = document.querySelector(':root');
rs.style.setProperty('--body-bg', e);
if(e !== '#000000' && e !== '#ffffff') {
this.settings.color_scheme = 'custom';
}
this.$nextTick(() => {
this.skipWatch = false;
});
},
updateTextColor(e) {
this.skipWatch = true;
let rs = document.querySelector(':root');
rs.style.setProperty('--text-color', e);
if(e !== '#d4d4d8') {
this.settings.color_scheme = 'custom';
}
this.$nextTick(() => {
this.skipWatch = false;
});
},
resetBackgroundColor() {
this.skipWatch = true;
this.$nextTick(() => {
this.updateBackgroundColor('#000000');
this.settings.color_scheme = 'dark';
this.settings.background_color = '#000000';
this.updateSettings(true);
setTimeout(() => {
this.skipWatch = false;
}, 1000);
});
},
resetTextColor() {
this.skipWatch = true;
this.$nextTick(() => {
this.updateTextColor('#d4d4d8');
this.settings.color_scheme = 'dark';
this.settings.text_color = '#d4d4d8';
this.updateSettings(true);
setTimeout(() => {
this.skipWatch = false;
}, 1000);
});
},
updateColorScheme(e) {
if(e === 'light') {
this.updateBackgroundColor('#ffffff');
}
if(e === 'dark') {
this.updateBackgroundColor('#000000');
}
},
getPreviewUrl(post) {
let media = post.media_attachments[0];
if(!media) { return '/storage/no-preview.png'; }
if(media.preview_url && !media.preview_url.endsWith('/no-preview.png')) {
return media.preview_url;
}
return media.url;
}
}
}
</script>