Skip to content

Commit 248a1e4

Browse files
sifferhanssifferhans
committed
feat(page-editor): add and remove elements
1 parent 0b20d64 commit 248a1e4

2 files changed

Lines changed: 192 additions & 278 deletions

File tree

‎components/page-editor/PageEditorElement.vue‎

Lines changed: 168 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,19 @@
22
import type { DiscoverCollectionElement } from "@bcc-code/bmm-sdk-fetch";
33
44
defineProps<{
5-
title: string;
65
element: DiscoverCollectionElement;
76
}>();
7+
8+
defineEmits(["add", "remove"]);
9+
10+
const elementTypes = computed(() => Object.values(PageEditorElementTypes));
11+
12+
const elementTypeName = (type: string) => {
13+
return type
14+
.split("-")
15+
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
16+
.join(" ");
17+
};
818
</script>
919
<template>
1020
<div
@@ -15,9 +25,29 @@ defineProps<{
1525
class="drag-handle cursor-ns-resize text-label-4"
1626
/>
1727
<div class="grid w-full grid-cols-[auto_1fr] gap-y-2">
18-
<div class="flex gap-4">
19-
<select></select>
20-
<p class="type-subtitle-2 col-span-full text-label-3">{{ title }}</p>
28+
<div class="col-span-full flex gap-4">
29+
<select
30+
v-model="element.type"
31+
class="type-subtitle-2 rounded-md bg-background-1 px-2 py-1 text-label-3"
32+
>
33+
<option v-for="type in elementTypes" :key="type" :value="type">
34+
{{ elementTypeName(type) }}
35+
</option>
36+
</select>
37+
<button
38+
class="type-subtitle-2 ml-auto flex items-center gap-1 text-label-4"
39+
@click="$emit('add')"
40+
>
41+
<NuxtIcon name="icon.add" />
42+
Add after
43+
</button>
44+
<button
45+
class="type-subtitle-2 flex items-center gap-1 text-label-4"
46+
@click="$emit('remove')"
47+
>
48+
<NuxtIcon name="icon.close.small" />
49+
Delete
50+
</button>
2151
</div>
2252

2353
<!-- Standard fields -->
@@ -73,9 +103,140 @@ defineProps<{
73103
/>
74104
</PageEditorFieldset>
75105

76-
<!-- Custom fields -->
77-
<PageEditorFieldset v-if="$slots.default" title="Other">
78-
<slot />
106+
<!-- Type-specific fields -->
107+
<PageEditorFieldset title="Other">
108+
<template v-if="element.type === PageEditorElementTypes.Message">
109+
<PageEditorInput
110+
label="English Text"
111+
:element
112+
v-model="element.messageEn"
113+
/>
114+
<PageEditorInput
115+
label="Norwegian Text"
116+
:element
117+
v-model="element.messageNb"
118+
/>
119+
</template>
120+
<template v-if="element.type === PageEditorElementTypes.Header">
121+
<PageEditorInput label="Title" v-model="element.title" />
122+
<PageEditorInput
123+
label="Server Translation"
124+
v-model="element.serverTranslation"
125+
/>
126+
</template>
127+
<template v-if="element.type === PageEditorElementTypes.ProjectBox">
128+
<PageEditorInput label="Podcast ID" v-model="element.id" />
129+
</template>
130+
<template v-if="element.type === PageEditorElementTypes.PodcastTile">
131+
<PageEditorInput label="Podcast ID" v-model="element.id" />
132+
<PageEditorInput label="Color" type="color" v-model="element.color" />
133+
</template>
134+
<template v-if="element.type === PageEditorElementTypes.Playlists">
135+
<PageEditorInput
136+
label="Number of Playlists"
137+
type="number"
138+
v-model="element.count"
139+
/>
140+
</template>
141+
<template v-if="element.type === PageEditorElementTypes.Audiobooks">
142+
<PageEditorInput
143+
label="Number of Audiobooks"
144+
type="number"
145+
v-model="element.count"
146+
/>
147+
</template>
148+
<template v-if="element.type === PageEditorElementTypes.Events">
149+
<PageEditorInput
150+
label="Number of Events"
151+
type="number"
152+
v-model="element.count"
153+
/>
154+
</template>
155+
<template v-if="element.type === PageEditorElementTypes.Track">
156+
<PageEditorInput label="Track ID" v-model="element.id" />
157+
</template>
158+
<template
159+
v-if="element.type === PageEditorElementTypes.RecommendPrevious"
160+
>
161+
<PageEditorInput label="ID" v-model="element.id" :element />
162+
</template>
163+
<template v-if="element.type === PageEditorElementTypes.RecentMessages">
164+
<PageEditorInput
165+
label="Number of Messages"
166+
type="number"
167+
v-model="element.count"
168+
/>
169+
</template>
170+
<template v-if="element.type === PageEditorElementTypes.RecentSongs">
171+
<PageEditorInput
172+
label="Number of Songs"
173+
type="number"
174+
v-model="element.count"
175+
/>
176+
</template>
177+
<template v-if="element.type === PageEditorElementTypes.Contributor">
178+
<PageEditorInput label="Contributor ID" v-model="element.id" />
179+
</template>
180+
<template v-if="element.type === PageEditorElementTypes.Podcasts">
181+
<PageEditorInput
182+
label="Count"
183+
type="number"
184+
v-model="element.count"
185+
/>
186+
</template>
187+
<template v-if="element.type === PageEditorElementTypes.Music">
188+
<PageEditorInput
189+
label="Count"
190+
type="number"
191+
v-model="element.count"
192+
/>
193+
</template>
194+
<template
195+
v-if="element.type === PageEditorElementTypes.TrackCollection"
196+
>
197+
<PageEditorInput label="Track Collection ID" v-model="element.id" />
198+
</template>
199+
<template
200+
v-if="element.type === PageEditorElementTypes.FavoritePlaylists"
201+
>
202+
<PageEditorInput
203+
label="Count"
204+
type="number"
205+
v-model="element.count"
206+
/>
207+
</template>
208+
<template v-if="element.type === PageEditorElementTypes.Podcast">
209+
<PageEditorInput label="Podcast ID" v-model="element.id" />
210+
</template>
211+
<template v-if="element.type === PageEditorElementTypes.Album">
212+
<PageEditorInput label="Album ID" v-model="element.id" />
213+
</template>
214+
<template v-if="element.type === PageEditorElementTypes.Playlist">
215+
<PageEditorInput label="Playlist ID" v-model="element.id" />
216+
</template>
217+
<template
218+
v-if="element.type === PageEditorElementTypes.TopTrackCollections"
219+
>
220+
<PageEditorInput
221+
label="Number of Collections"
222+
type="number"
223+
v-model="element.count"
224+
/>
225+
</template>
226+
<template
227+
v-if="element.type === PageEditorElementTypes.UserLanguagePlaylists"
228+
>
229+
<PageEditorInput
230+
label="Number of Playlists"
231+
type="number"
232+
v-model="element.count"
233+
/>
234+
</template>
235+
<template
236+
v-if="element.type === PageEditorElementTypes.PlaylistsForTag"
237+
>
238+
<PageEditorInput label="Tag" v-model="element.tag" />
239+
</template>
79240
</PageEditorFieldset>
80241
</div>
81242
</div>

0 commit comments

Comments
 (0)