90 lines
2.0 KiB
Vue
90 lines
2.0 KiB
Vue
<template>
|
|
<div>
|
|
<header class="sticky top-0 z-10 border-b bg-white px-5 pt-2.5">
|
|
<Breadcrumbs
|
|
:items="[{ label: 'Settings', route: { name: 'SettingsScreen' } }]"
|
|
/>
|
|
<Tabs :tabs="tabs" class="-mb-px pl-0.5" />
|
|
</header>
|
|
<div class="mx-auto max-w-4xl py-5">
|
|
<router-view />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Tabs from '@/components/Tabs.vue';
|
|
|
|
export default {
|
|
name: 'AccountSettings',
|
|
pageMeta() {
|
|
return {
|
|
title: 'Settings - Profile'
|
|
};
|
|
},
|
|
components: {
|
|
Tabs
|
|
},
|
|
computed: {
|
|
tabs() {
|
|
let tabRoute = subRoute => `/settings/${subRoute}`;
|
|
let tabs = [
|
|
{ label: 'Profile', route: 'profile' },
|
|
{
|
|
label: 'Team',
|
|
route: 'team',
|
|
condition: () =>
|
|
$account.user.name === $account.team.user ||
|
|
$account.user.user_type === 'System User'
|
|
},
|
|
{ label: 'Developer', route: 'developer' },
|
|
{ label: 'Partner', route: 'partner' }
|
|
].filter(tab => (tab.condition ? tab.condition() : true));
|
|
|
|
return tabs.map(tab => {
|
|
return {
|
|
...tab,
|
|
route: tabRoute(tab.route)
|
|
};
|
|
});
|
|
},
|
|
pageSubtitle() {
|
|
const { user, team } = this.$account;
|
|
let subtitle = '';
|
|
|
|
if (!user || !team) {
|
|
return subtitle;
|
|
}
|
|
|
|
if (team.name !== user.name) {
|
|
if (team.team_title) subtitle += `Team: ${team.team_title}`;
|
|
else subtitle += `Team: ${team.name}`;
|
|
subtitle += ` · Member: ${user.name} `;
|
|
} else {
|
|
subtitle += `<span>${team.name}</span> `;
|
|
}
|
|
|
|
if (team.jerp_partner) {
|
|
subtitle += `· <span>JERP Partner</span>`;
|
|
}
|
|
|
|
let userTeamMember = team.team_members.filter(
|
|
member => member.user === user.name
|
|
);
|
|
|
|
if (userTeamMember.length > 0) {
|
|
userTeamMember = userTeamMember[0];
|
|
const memberSince = this.$date(userTeamMember.creation).toLocaleString({
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric'
|
|
});
|
|
subtitle += `· <span>Member since ${memberSince}</span>`;
|
|
}
|
|
|
|
return subtitle;
|
|
}
|
|
}
|
|
};
|
|
</script>
|