IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2026-01-20 20:01:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Simple Implementation In Stroybook Of SearchInput

Browse Source 
By the way, I added *~ to .gitignore, which are the backups of emacs editor.
See the Storybook of SearchInput.
Problems:
* I found no way to separate the heading of the search results from the first item. Do we have to write a complete new component for this?
* The incoming data must by sorted by type before passed to the component. I added keys searchType and firstType, to identify the type (post/user) (may be as a locale) and to know when I have to place the heading.
This commit is contained in:
Moriz Wahl 2019-11-17 00:01:44 +01:00
parent 6475458fe8
commit 8758bc9e42
2 changed files with 104 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
webapp/components/SearchInput/SearchInput.story.js
View File

@ -5,62 +5,100 @@ import helpers from '~/storybook/helpers'
helpers.init()
export const results = {
posts: [
{
id: 'de100841-2336-4b01-a574-f1bd2c0b262a',
slug: 'user-post-by-jenny',
label: 'User Post by Jenny',
value: 'User Post by Jenny',
shoutedCount: 0,
createdAt: '2019-11-13T03:03:16.155Z',
author: {
id: 'u3',
name: 'Jenny Rostock',
slug: 'jenny-rostock',
},
export const results = [
{
id: 'de100841-2336-4b01-a574-f1bd2c0b262a',
searchType: 'Contributions',
firstType: true,
slug: 'user-post-by-jenny',
label: 'User Post by Jenny',
value: 'User Post by Jenny',
shoutedCount: 0,
createdAt: '2019-11-13T03:03:16.155Z',
author: {
id: 'u3',
name: 'Jenny Rostock',
slug: 'jenny-rostock',
},
{
id: 'f48f00a0-c412-432f-8334-4276a4e15d1c',
slug: 'eum-quos-est-molestiae-enim-magni-consequuntur-sed-commodi-eos',
label: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
value: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
shoutedCount: 0,
createdAt: '2019-11-13T03:00:45.478Z',
author: {
id: 'u6',
name: 'Louie',
slug: 'louie',
},
},
{
id: 'f48f00a0-c412-432f-8334-4276a4e15d1c',
searchType: 'Contributions',
firstType: false,
slug: 'eum-quos-est-molestiae-enim-magni-consequuntur-sed-commodi-eos',
label: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
value: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
shoutedCount: 0,
createdAt: '2019-11-13T03:00:45.478Z',
author: {
id: 'u6',
name: 'Louie',
slug: 'louie',
},
{
id: 'p7',
slug: 'this-is-post-7',
label: 'This is post #7',
value: 'This is post #7',
shoutedCount: 1,
createdAt: '2019-11-13T03:00:23.098Z',
author: {
id: 'u6',
name: 'Louie',
slug: 'louie',
},
},
{
id: 'p7',
searchType: 'Contributions',
firstType: false,
slug: 'this-is-post-7',
label: 'This is post #7',
value: 'This is post #7',
shoutedCount: 1,
createdAt: '2019-11-13T03:00:23.098Z',
author: {
id: 'u6',
name: 'Louie',
slug: 'louie',
},
{
id: 'p12',
slug: 'this-is-post-12',
label: 'This is post #12',
value: 'This is post #12',
shoutedCount: 0,
createdAt: '2019-11-13T03:00:23.098Z',
author: {
id: 'u6',
name: 'Louie',
slug: 'louie',
},
},
{
id: 'p12',
searchType: 'Contributions',
firstType: false,
slug: 'this-is-post-12',
label: 'This is post #12',
value: 'This is post #12',
shoutedCount: 0,
createdAt: '2019-11-13T03:00:23.098Z',
author: {
id: 'u6',
name: 'Louie',
slug: 'louie',
},
],
}
},
{
id: 'u1',
firstType: true,
searchType: 'Users',
name: 'Peter Lustig',
label: 'Peter Lustig',
slug: 'peter-lustig',
},
{
id: 'cdbca762-0632-4564-b646-415a0c42d8b8',
searchType: 'Users',
firstType: false,
name: 'Herbert Schultz',
label: 'Herbert Schultz',
slug: 'herbert-schultz',
},
{
id: 'u2',
searchType: 'Users',
firstType: false,
name: 'Bob der Baumeister',
label: 'Bob der Baumeister',
slug: 'bob-der-baumeister',
},
{
id: '7b654f72-f4da-4315-8bed-39de0859754b',
searchType: 'Users',
firstType: false,
name: 'Tonya Mohr',
label: 'Tonya Mohr',
slug: 'tonya-mohr',
},
]
storiesOf('Search Input', module)
.addDecorator(withA11y)
@ -69,7 +107,7 @@ storiesOf('Search Input', module)
components: { SearchInput },
store: helpers.store,
data: () => ({
results: results.posts,
results: results,
}),
template: `
<search-input

14
webapp/components/SearchInput/SearchInput.vue
View File

@ -37,7 +37,10 @@
@click.capture.native="isOpen = true"
>
<template slot="option" slot-scope="{ option }">
<ds-flex>
<ds-flex v-if="option.firstType" class="search-option-heading">
<ds-text>{{ option.searchType }}</ds-text>
</ds-flex>
<ds-flex v-if="option.searchType === 'Contributions'">
<ds-flex-item class="search-option-label">
<ds-text>{{ option.label | truncate(70) }}</ds-text>
</ds-flex-item>
@ -65,6 +68,11 @@
</ds-flex>
</ds-flex-item>
</ds-flex>
<ds-flex v-if="option.searchType === 'Users'">
<ds-flex-item class="search-option-label">
<ds-text>{{ option.label | truncate(70) }}</ds-text>
</ds-flex-item>
</ds-flex>
</template>
</ds-select>
</div>
@ -265,5 +273,9 @@ export default {
.control {
width: 100%;
}
.search-option-heading {
font-weight: bold;
margin-bottom: 1em;
}
}
</style>