72 lines
2.2 KiB
Vue
72 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import SortDropdown from "../SortDropdown.vue";
|
|
import type { ProfileSortKey, ProfileSummary } from "../../types/browser";
|
|
|
|
defineProps<{
|
|
profiles: ProfileSummary[];
|
|
sortKey: ProfileSortKey;
|
|
openProfileError: string;
|
|
browserId: string;
|
|
isOpeningProfile: (browserId: string, profileId: string) => boolean;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
"update:sortKey": [value: ProfileSortKey];
|
|
openProfile: [browserId: string, profileId: string];
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<section class="content-section">
|
|
<div v-if="openProfileError" class="inline-error">
|
|
{{ openProfileError }}
|
|
</div>
|
|
|
|
<div class="sort-bar">
|
|
<SortDropdown
|
|
:model-value="sortKey"
|
|
label="Sort by"
|
|
:options="[
|
|
{ label: 'Name', value: 'name' },
|
|
{ label: 'Email', value: 'email' },
|
|
{ label: 'Profile ID', value: 'id' },
|
|
]"
|
|
@update:model-value="emit('update:sortKey', $event as ProfileSortKey)"
|
|
/>
|
|
</div>
|
|
|
|
<div v-if="profiles.length" class="stack-list">
|
|
<article v-for="profile in profiles" :key="profile.id" class="profile-card">
|
|
<div class="profile-avatar">
|
|
<img
|
|
v-if="profile.avatarDataUrl"
|
|
:src="profile.avatarDataUrl"
|
|
:alt="`${profile.name} avatar`"
|
|
/>
|
|
<span v-else>{{ profile.avatarLabel }}</span>
|
|
</div>
|
|
<div class="profile-body">
|
|
<div class="profile-topline">
|
|
<h4>{{ profile.name }}</h4>
|
|
<div class="profile-actions">
|
|
<button
|
|
class="card-action-button"
|
|
:disabled="isOpeningProfile(browserId, profile.id)"
|
|
type="button"
|
|
@click="emit('openProfile', browserId, profile.id)"
|
|
>
|
|
{{ isOpeningProfile(browserId, profile.id) ? "Opening..." : "Open" }}
|
|
</button>
|
|
<span class="badge neutral">{{ profile.id }}</span>
|
|
</div>
|
|
</div>
|
|
<p class="profile-email">{{ profile.email || "No email found" }}</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div v-else class="empty-card">
|
|
<p>No profile directories were found for this browser.</p>
|
|
</div>
|
|
</section>
|
|
</template>
|