refactor(board): rename ecology-prefixed vars to board-prefixed, remove duplicate count div
- Renamed ecologyTagOptions, ecologyFilterTags, ecologyTagLabel → board* throughout refs, computed, helpers, and template - Removed .filter-bar div (duplicate count display) - Updated pageSubtitle to use filteredSuggestions.length so subtitle reflects active tag filtering
This commit is contained in:
parent
f43fff0ba0
commit
3e5cedb1a6
1 changed files with 19 additions and 44 deletions
|
|
@ -1,20 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<PageShell title="Board" :subtitle="pageSubtitle">
|
<PageShell title="Board" :subtitle="pageSubtitle">
|
||||||
<!-- Filter Bar -->
|
|
||||||
<div class="filter-bar">
|
|
||||||
<span class="filter-count">{{ filteredSuggestions.length }} connection{{ filteredSuggestions.length === 1 ? '' : 's' }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Tags Drawer Toggle -->
|
<!-- Tags Drawer Toggle -->
|
||||||
<div v-if="ecologyTagOptions.length > 0" class="tags-drawer-toggle">
|
<div v-if="boardTagOptions.length > 0" class="tags-drawer-toggle">
|
||||||
<button type="button" class="drawer-btn" @click="showTagsDrawer = !showTagsDrawer">
|
<button type="button" class="drawer-btn" @click="showTagsDrawer = !showTagsDrawer">
|
||||||
Tags...
|
Tags...
|
||||||
<span v-if="ecologyFilterTags.length > 0" class="tag-count-badge">{{ ecologyFilterTags.length }}</span>
|
<span v-if="boardFilterTags.length > 0" class="tag-count-badge">{{ boardFilterTags.length }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Tags Drawer -->
|
<!-- Tags Drawer -->
|
||||||
<div v-if="showTagsDrawer && ecologyTagOptions.length > 0" class="tags-drawer">
|
<div v-if="showTagsDrawer && boardTagOptions.length > 0" class="tags-drawer">
|
||||||
<div class="skills-bar">
|
<div class="skills-bar">
|
||||||
<span class="tag-label">Topics:</span>
|
<span class="tag-label">Topics:</span>
|
||||||
<button
|
<button
|
||||||
|
|
@ -22,18 +17,18 @@
|
||||||
:key="tag.slug"
|
:key="tag.slug"
|
||||||
type="button"
|
type="button"
|
||||||
class="skill-tag"
|
class="skill-tag"
|
||||||
:class="{ active: ecologyFilterTags.includes(tag.slug) }"
|
:class="{ active: boardFilterTags.includes(tag.slug) }"
|
||||||
@click="toggleTag(tag.slug)"
|
@click="toggleTag(tag.slug)"
|
||||||
>
|
>
|
||||||
{{ tag.label }}
|
{{ tag.label }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="ecologyTagOptions.length > 10"
|
v-if="boardTagOptions.length > 10"
|
||||||
type="button"
|
type="button"
|
||||||
class="more-btn"
|
class="more-btn"
|
||||||
@click="showAllTags = !showAllTags"
|
@click="showAllTags = !showAllTags"
|
||||||
>
|
>
|
||||||
{{ showAllTags ? 'Show less' : `+${ecologyTagOptions.length - 10} more` }}
|
{{ showAllTags ? 'Show less' : `+${boardTagOptions.length - 10} more` }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -97,7 +92,7 @@
|
||||||
:key="match.tagSlug"
|
:key="match.tagSlug"
|
||||||
class="match-row"
|
class="match-row"
|
||||||
>
|
>
|
||||||
<span class="match-tag">{{ ecologyTagLabel(match.tagSlug) }}</span>
|
<span class="match-tag">{{ boardTagLabel(match.tagSlug) }}</span>
|
||||||
<span class="match-states">
|
<span class="match-states">
|
||||||
<span class="match-you">You: {{ stateLabel(match.yourState) }}</span>
|
<span class="match-you">You: {{ stateLabel(match.yourState) }}</span>
|
||||||
<span class="match-sep">·</span>
|
<span class="match-sep">·</span>
|
||||||
|
|
@ -149,8 +144,8 @@ const { trackGoal, isComplete } = useOnboarding()
|
||||||
// ---- State ----
|
// ---- State ----
|
||||||
const suggestions = ref([])
|
const suggestions = ref([])
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const ecologyTagOptions = ref([])
|
const boardTagOptions = ref([])
|
||||||
const ecologyFilterTags = ref([])
|
const boardFilterTags = ref([])
|
||||||
const copiedHandle = ref(null)
|
const copiedHandle = ref(null)
|
||||||
const showAllTags = ref(false)
|
const showAllTags = ref(false)
|
||||||
const showTagsDrawer = ref(false)
|
const showTagsDrawer = ref(false)
|
||||||
|
|
@ -170,8 +165,8 @@ const craftTagLabel = (slug) => {
|
||||||
return found ? found.label : slug
|
return found ? found.label : slug
|
||||||
}
|
}
|
||||||
|
|
||||||
const ecologyTagLabel = (slug) => {
|
const boardTagLabel = (slug) => {
|
||||||
const found = ecologyTagOptions.value.find((t) => t.slug === slug)
|
const found = boardTagOptions.value.find((t) => t.slug === slug)
|
||||||
if (found) return found.label
|
if (found) return found.label
|
||||||
const fallback = cooperativeTagOptions.value.find((t) => t.slug === slug)
|
const fallback = cooperativeTagOptions.value.find((t) => t.slug === slug)
|
||||||
return fallback ? fallback.label : slug
|
return fallback ? fallback.label : slug
|
||||||
|
|
@ -197,7 +192,7 @@ const capitalize = (str) => {
|
||||||
|
|
||||||
// ---- Computed ----
|
// ---- Computed ----
|
||||||
const visibleTagOptions = computed(() =>
|
const visibleTagOptions = computed(() =>
|
||||||
showAllTags.value ? ecologyTagOptions.value : ecologyTagOptions.value.slice(0, 10)
|
showAllTags.value ? boardTagOptions.value : boardTagOptions.value.slice(0, 10)
|
||||||
)
|
)
|
||||||
|
|
||||||
const hasNoTopics = computed(() => {
|
const hasNoTopics = computed(() => {
|
||||||
|
|
@ -207,24 +202,24 @@ const hasNoTopics = computed(() => {
|
||||||
})
|
})
|
||||||
|
|
||||||
const filteredSuggestions = computed(() => {
|
const filteredSuggestions = computed(() => {
|
||||||
if (ecologyFilterTags.value.length === 0) return suggestions.value
|
if (boardFilterTags.value.length === 0) return suggestions.value
|
||||||
return suggestions.value.filter((s) =>
|
return suggestions.value.filter((s) =>
|
||||||
s.matchingTags.some((m) => ecologyFilterTags.value.includes(m.tagSlug))
|
s.matchingTags.some((m) => boardFilterTags.value.includes(m.tagSlug))
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
const pageSubtitle = computed(() => {
|
const pageSubtitle = computed(() => {
|
||||||
const count = suggestions.value.length
|
const count = filteredSuggestions.value.length
|
||||||
return `${count} connection${count === 1 ? '' : 's'}`
|
return `${count} connection${count === 1 ? '' : 's'}`
|
||||||
})
|
})
|
||||||
|
|
||||||
// ---- Tag toggle ----
|
// ---- Tag toggle ----
|
||||||
const toggleTag = (slug) => {
|
const toggleTag = (slug) => {
|
||||||
const idx = ecologyFilterTags.value.indexOf(slug)
|
const idx = boardFilterTags.value.indexOf(slug)
|
||||||
if (idx > -1) {
|
if (idx > -1) {
|
||||||
ecologyFilterTags.value.splice(idx, 1)
|
boardFilterTags.value.splice(idx, 1)
|
||||||
} else {
|
} else {
|
||||||
ecologyFilterTags.value.push(slug)
|
boardFilterTags.value.push(slug)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -254,7 +249,7 @@ const loadBoard = async () => {
|
||||||
// Build ecology tag options from user's own topics
|
// Build ecology tag options from user's own topics
|
||||||
const allCoopTags = cooperativeTagOptions.value
|
const allCoopTags = cooperativeTagOptions.value
|
||||||
const myTopicSlugs = (memberData.value?.board?.topics || []).map((t) => t.tagSlug)
|
const myTopicSlugs = (memberData.value?.board?.topics || []).map((t) => t.tagSlug)
|
||||||
ecologyTagOptions.value = myTopicSlugs.length
|
boardTagOptions.value = myTopicSlugs.length
|
||||||
? allCoopTags.filter((t) => myTopicSlugs.includes(t.slug))
|
? allCoopTags.filter((t) => myTopicSlugs.includes(t.slug))
|
||||||
: allCoopTags
|
: allCoopTags
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
|
@ -307,21 +302,6 @@ onMounted(async () => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* ---- FILTER BAR ---- */
|
|
||||||
.filter-bar {
|
|
||||||
padding: 16px 24px;
|
|
||||||
border-bottom: 1px dashed var(--border);
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-count {
|
|
||||||
font-size: 11px;
|
|
||||||
color: var(--text-faint);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---- TAGS DRAWER ---- */
|
/* ---- TAGS DRAWER ---- */
|
||||||
.tags-drawer-toggle {
|
.tags-drawer-toggle {
|
||||||
padding: 8px 24px;
|
padding: 8px 24px;
|
||||||
|
|
@ -610,11 +590,6 @@ onMounted(async () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.filter-bar {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: stretch;
|
|
||||||
padding: 14px 20px;
|
|
||||||
}
|
|
||||||
.skills-bar {
|
.skills-bar {
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue