Skip to content

Commit 148f573

Browse files
s-lights-light
committed
add filter buttons + fix layout
1 parent 91558a1 commit 148f573

File tree

2 files changed

+92
-85
lines changed

2 files changed

+92
-85
lines changed

‎src/pages/MKS_Parts.vue‎

Lines changed: 25 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,23 @@
66
<!-- class="col-auto" -->
77
<!-- -->
88
<!-- <div class="scroll-wrapper col"> -->
9-
<div>
10-
<q-input rounded outlined v-model="searchText" label="Suche:"> </q-input>
9+
<div class="row wrap justify-start items-stretch content-start">
10+
<q-input class="col-grow" rounded outlined v-model="searchText" label="Suche:">
11+
</q-input>
12+
<q-btn-toggle
13+
rounded
14+
outlined
15+
v-model="filter_by_type"
16+
clearable
17+
:options="[
18+
{ label: 'Controller', value: 'controller' },
19+
{ label: 'input', value: 'input' },
20+
{ label: 'output', value: 'output' },
21+
{ label: 'shield', value: 'shield' },
22+
]"
23+
/>
1124
</div>
12-
<ul class="card-wrapper row items-stretch">
25+
<ul class="card-wrapper row">
1326
<li
1427
v-for="(mks_item, mks_item_name) in mks_items_filtered"
1528
:key="mks_item_name"
@@ -44,96 +57,25 @@ import PartOverview from 'src/components/PartOverview.vue'
4457
4558
import { useMDContentStore } from 'src/stores/mdContent'
4659
47-
4860
const mdContent = useMDContentStore()
4961
console.log('mdContent', mdContent)
5062
const mks_welcome = mdContent.mks.welcome
5163
const mks_parts = shallowRef(mdContent.mks.parts)
5264
const mks_parts_sorted = shallowRef(mdContent.mks.parts_sorted)
5365
console.log('mks_parts_sorted', mks_parts_sorted)
5466
55-
56-
// const mks_items_sorted = computed(() => {
57-
// // const checkKey = (key) => key.includes('ino') || key.includes('main')
58-
// console.log(mks_parts.value);
59-
// // const entries = Object.entries(mks_parts.value)
60-
// // // console.log('entries', entries)
61-
// // // const firstEntries = entries.filter(([key]) => checkKey(key))
62-
// // // // console.log('firstEntries', firstEntries)
63-
// // // const otherEntries = entries.filter(([key]) => !checkKey(key))
64-
// // // console.log('otherEntries', otherEntries)
65-
// // otherEntries.sort(([a], [b]) => a.localeCompare(b))
66-
// // const sortedEntries = [...firstEntries, ...otherEntries]
67-
// // // console.log('sortedEntries', sortedEntries)
68-
// // files.value = Object.fromEntries(sortedEntries)
69-
70-
// const result = {
71-
// ...getObjItemsWithSearchTextInReadme(mks_parts.value),
72-
// // ...mks_parts.value
73-
// }
74-
// return result
75-
// })
76-
77-
// const check_searchTextInReadme = (readme, item_name) => {
78-
// return (
79-
// item_name?.toLowerCase().includes(searchText.value.toLowerCase()) ||
80-
// readme.content.toLowerCase().includes(searchText.value.toLowerCase()) ||
81-
// readme.data?.tags?.join(", ").toLowerCase().includes(searchText.value.toLowerCase())
82-
// );
83-
// };
84-
const check_searchTextInReadme = (readme, item_name) => {
85-
return (
86-
item_name?.toLowerCase().includes(searchText.value.toLowerCase()) ||
87-
readme.content_text.toLowerCase().includes(searchText.value.toLowerCase()) ||
88-
// TODO: find a better way to search for text in rendered output..
89-
readme.data?.tags?.join(', ').toLowerCase().includes(searchText.value.toLowerCase())
90-
)
91-
}
92-
93-
const getObjItemsWithSearchTextInReadme = (obj) => {
94-
const result = {}
95-
for (const [item_name, item] of Object.entries(obj)) {
96-
// console.log(`item_name`, item_name, `item`, item)
97-
if (check_searchTextInReadme(item, item_name)) {
98-
result[item_name] = item
99-
}
100-
}
101-
return result
102-
}
67+
const filter_by_type = ref('')
68+
const searchText = ref('')
69+
const search_in_content = ref(false)
10370
10471
const mks_items_filtered = computed(() => {
105-
// const result = {};
106-
// for (const [mks_item_name, mks_item] of Object.entries(mks_tags.value)) {
107-
// console.log(`mks_item_name`, mks_item_name, `mks_item`, fn_item);
108-
// // only include in result if search text is somewhere in the content..
109-
// // check bauteile
110-
// // const bauteile_includes = getObjItemsWithSearchTextInReadme(mks_parts.);
111-
// // // console.log("bauteile_includes", bauteile_includes);
112-
// // console.log("Object.keys(bauteile_includes)", Object.keys(bauteile_includes));
113-
114-
// // if (
115-
// // check_searchTextInReadme(fn_item.readme, fn_name) ||
116-
// // Object.keys(bauteile_includes).length > 0
117-
// // ) {
118-
// if (
119-
// check_searchTextInReadme(fn_item.readme, fn_name)
120-
// ) {
121-
// result[fn_name] = fn_item;
122-
// }
123-
// }
124-
125-
const result = {
126-
// ...getObjItemsWithSearchTextInReadme(mks_tags.value),
127-
// ...getObjItemsWithSearchTextInReadme(mks_parts.value),
128-
...getObjItemsWithSearchTextInReadme(mks_parts_sorted.value),
129-
// ...mks_parts_sorted,
130-
}
131-
// console.log('mks_items_filtered', result)
132-
return result
72+
return mdContent.parts_filtered({
73+
by_searchText: searchText.value,
74+
by_material_type: filter_by_type.value,
75+
in_content: search_in_content.value,
76+
})
13377
})
13478
135-
const searchText = ref('')
136-
13779
// $q.notify('Message')
13880
13981
// const $q = useQuasar();
@@ -160,7 +102,7 @@ const searchText = ref('')
160102
flex-direction: row;
161103
flex-wrap: wrap;
162104
justify-content: flex-start;
163-
align-content: stretch;
105+
align-content: flex-start;
164106
align-items: stretch;
165107
li
166108
margin: 0

‎src/stores/mdContent.js‎

Lines changed: 67 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import about from '../content_md/about.js'
88
// import demo from '../content_md/demo.js'
99
// console.log('mksContent', mksContent)
1010

11-
1211
const sort_materialtype = (entries) => {
1312
// material_type
1413
// - controller
@@ -135,6 +134,52 @@ const mks_items_sorted = (mks_parts_raw) => {
135134
// return sortedEntries
136135
}
137136

137+
const filter_with_text = (item, item_name, searchText, searchInContent = false) => {
138+
// TODO: find a better way to search for text in rendered output..
139+
// readme.content.toLowerCase().includes(searchText.value.toLowerCase()) ||
140+
return (
141+
item_name?.toLowerCase().includes(searchText.toLowerCase()) ||
142+
(searchInContent
143+
? item.content_text.toLowerCase().includes(searchText.toLowerCase())
144+
: false) ||
145+
item.excerpt.toLowerCase().includes(searchText.toLowerCase()) ||
146+
item.meta.tags?.join(', ').toLowerCase().includes(searchText.toLowerCase()) ||
147+
item.meta.material_short_descr?.toLowerCase().includes(searchText.toLowerCase()) ||
148+
item.data?.tags?.join(', ').toLowerCase().includes(searchText.toLowerCase())
149+
)
150+
}
151+
152+
const filterObjItemsWithSearchText = (obj, searchText, searchInContent) => {
153+
const result = {}
154+
for (const [item_name, item] of Object.entries(obj)) {
155+
// console.log(`item_name`, item_name, `item`, item)
156+
if (filter_with_text(item, item_name, searchText, searchInContent)) {
157+
result[item_name] = item
158+
}
159+
}
160+
return result
161+
}
162+
163+
const filterByMaterialType = (obj, by_material_type) => {
164+
// console.log(`obj`, obj)
165+
// console.log(`by_material_type`, by_material_type)
166+
if (by_material_type && by_material_type != '') {
167+
// console.log('filter!')
168+
const result = {}
169+
for (const [item_name, item] of Object.entries(obj)) {
170+
// console.log(`item_name`, item_name, `item`, item)
171+
// console.log(`item.meta.material_type`, item.meta.material_type)
172+
if (item.meta.material_type == by_material_type) {
173+
result[item_name] = item
174+
}
175+
}
176+
return result
177+
} else {
178+
// console.log('skip')
179+
return obj
180+
}
181+
}
182+
138183
export const useMDContentStore = defineStore('MDContent', {
139184
state: () => ({
140185
mks: {
@@ -148,7 +193,27 @@ export const useMDContentStore = defineStore('MDContent', {
148193
// demo: demo,
149194
// abbr: {abbr:mksAbbrLoad()},
150195
}),
151-
getters: {},
196+
getters: {
197+
// parts_sorted: (state) => mks_items_sorted(state.parts),
198+
// parts_filtered_by_material_type: (state) => {
199+
// // https://pinia.vuejs.org/core-concepts/getters.html#Passing-arguments-to-getters
200+
// return (userId) => this.parts_sorted.find((part) => user.id === userId)
201+
// mks_items_sorted(state.parts)
202+
// },
203+
parts_filtered: (state) => {
204+
// https://pinia.vuejs.org/core-concepts/getters.html#Passing-arguments-to-getters
205+
return (filterObj) => {
206+
return filterByMaterialType(
207+
filterObjItemsWithSearchText(
208+
state.mks.parts_sorted,
209+
filterObj.by_searchText ? filterObj.by_searchText : '',
210+
filterObj.in_content ? filterObj.in_content : false,
211+
),
212+
filterObj.by_material_type,
213+
)
214+
}
215+
},
216+
},
152217
actions: {},
153218
})
154219

0 commit comments

Comments
 (0)