gorb/frontend
4
0
Fork 0
Code Issues 7 Pull requests 3 Projects Releases Packages 1 Wiki Activity Actions

feat: convert links with hashes to buttons with filter var, and loop through buttons to create

Browse source
This commit is contained in:
SauceyRed 2025-07-12 18:56:14 +02:00
parent edb6c01b52
commit 010964f188
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7
2 changed files with 19 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

10
components/Me/FriendsList.vue
View file

@ -3,16 +3,16 @@
<!-- we aren't checking for the #all hash, since this is the default and fallback one -->
<p v-if="props.variant === '#online'" style="text-align: left;">Online – {{ "N/A" }}</p>
<p v-else-if="props.variant === '#pending'" style="text-align: left;">Friend Requests – {{ "N/A" }}</p>
<p v-else style="text-align: left;">Friends – {{ friends?.length || "N/A" }}</p>
<p v-if="props.variant === 'online'" style="text-align: left;">Online – 0</p>
<p v-else-if="props.variant === 'pending'" style="text-align: left;">Friend Requests – 0</p>
<p v-else style="text-align: left;">Friends – {{ friends?.length || 0 }} (N/A Online)</p>
<div id="friends-list">
<div v-if="props.variant === '#online'">
<div v-if="props.variant === 'online'">
Not Implemented
</div>
<div v-else-if="props.variant === '#pending'">
<div v-else-if="props.variant === 'pending'">
Not Implemented
</div>

24
pages/me/friends.vue
View file

@ -3,15 +3,12 @@
<DirectMessagesSidebar />
<div id="friends-page-content">
<div id="navigation-bar">
<NuxtLink class="friends-sub-page-button" @click.prevent="updateHash('all')">All Friends</NuxtLink>
<NuxtLink class="friends-sub-page-button" @click.prevent="updateHash('online')">Online</NuxtLink>
<NuxtLink class="friends-sub-page-button" @click.prevent="updateHash('pending')">Pending</NuxtLink>
<NuxtLink class="friends-sub-page-button friend-primary-button" @click.prevent="updateHash('addfriend')">Add Friend</NuxtLink>
<Button v-for="button of buttons" :text="button.label" variant="normal" :callback="button.updateFilter" />
</div>
<div>
<AddFriend v-if="windowHash == '#addfriend'"></AddFriend>
<FriendsList v-else :variant="windowHash"></FriendsList>
<AddFriend v-if="filter == 'add'"></AddFriend>
<FriendsList v-else :variant="filter"></FriendsList>
</div>
</div>
@ -22,12 +19,19 @@
import AddFriend from '~/components/Me/AddFriend.vue';
import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
import FriendsList from '~/components/Me/FriendsList.vue';
import Button from '~/components/UserInterface/Button.vue';
let windowHash = ref(window.location.hash)
const buttons = [
{ label: "All Friends", updateFilter: () => updateFilter('all'), variant: "neutral" },
{ label: "Online", updateFilter: () => updateFilter('online'), variant: "neutral" },
{ label: "Pending", updateFilter: () => updateFilter('pending'), variant: "neutral" },
{ label: "Add Friend", updateFilter: () => updateFilter('add'), variant: "primary" },
]
function updateHash(newHash: string) {
window.location.hash = newHash
windowHash.value = `#${newHash}`;
let filter = ref("all");
function updateFilter(newFilter: string) {
filter.value = newFilter;
}
</script>