1
1
<script setup>
2
- import { searchStore } from ' ../../store/store.js'
2
+ import { searchStore , registerStore , schemaStore } from ' ../../store/store.js'
3
3
</script >
4
4
5
5
<template >
@@ -11,96 +11,104 @@ import { searchStore } from '../../store/store.js'
11
11
<template #icon >
12
12
<Magnify :size =" 20" />
13
13
</template >
14
- Zoek snel in het voor uw beschikbare federatieve netwerk<br >
15
- <NcTextField class =" searchField"
16
- :value.sync =" searchStore.search"
17
- label =" Zoeken" />
18
- <NcNoteCard v-if =" searchStore.searchError" type =" error" >
19
- <p >{{ searchStore.searchError }}</p >
20
- </NcNoteCard >
14
+ <NcSelect v-bind =" registerOptions"
15
+ v-model =" selectedRegister"
16
+ input-label =" Registratie"
17
+ :loading =" registerLoading" />
18
+ <NcSelect v-bind =" schemaOptions"
19
+ v-model =" selectedSchema"
20
+ input-label =" Schema"
21
+ :loading =" schemaLoading"
22
+ :disabled =" !selectedRegister?.id" />
21
23
</NcAppSidebarTab >
22
- <NcAppSidebarTab id =" settings-tab" name =" Catalogi" :order =" 2" >
24
+
25
+ <NcAppSidebarTab id =" upload-tab" name =" Upload" :order =" 2" >
23
26
<template #icon >
24
- <DatabaseOutline :size =" 20" />
27
+ <Upload :size =" 20" />
25
28
</template >
26
- <NcCheckboxRadioSwitch v-for =" (catalogiItem, i) in catalogiStore.catalogiList"
27
- :key =" `${catalogiItem}${i}`"
28
- type =" switch"
29
- :checked.sync =" searchStore.catalogi[catalogiItem.id]" >
30
- {{ catalogiItem.title || 'Geen titel' }}
31
- </NcCheckboxRadioSwitch >
29
+ <NcButton type =" primary" >
30
+ Upload
31
+ </NcButton >
32
32
</NcAppSidebarTab >
33
- <NcAppSidebarTab id =" share-tab" name =" Publicatie typen" :order =" 3" >
33
+
34
+ <NcAppSidebarTab id =" download-tab" name =" Download" :order =" 3" >
34
35
<template #icon >
35
- <FileTreeOutline :size =" 20" />
36
+ <Download :size =" 20" />
36
37
</template >
37
- <NcCheckboxRadioSwitch v-for =" (metaData, i) in metadataStore.metaDataList"
38
- :key =" `${metaData}${i}`"
39
- type =" switch"
40
- :checked.sync =" searchStore.metadata[metaData.id]" >
41
- {{ metaData.title || 'Geen titel' }}
42
- </NcCheckboxRadioSwitch >
38
+ <NcButton type =" primary" >
39
+ Download
40
+ </NcButton >
43
41
</NcAppSidebarTab >
44
42
</NcAppSidebar >
45
43
</template >
46
44
<script >
47
45
48
- import { NcAppSidebar , NcAppSidebarTab , NcTextField , NcNoteCard , NcCheckboxRadioSwitch } from ' @nextcloud/vue'
46
+ import { NcAppSidebar , NcAppSidebarTab , NcSelect , NcButton } from ' @nextcloud/vue'
49
47
import Magnify from ' vue-material-design-icons/Magnify.vue'
50
- import DatabaseOutline from ' vue-material-design-icons/DatabaseOutline.vue'
51
- import FileTreeOutline from ' vue-material-design-icons/FileTreeOutline.vue'
52
- import { debounce } from ' lodash'
48
+ import Upload from ' vue-material-design-icons/Upload.vue'
49
+ import Download from ' vue-material-design-icons/Download.vue'
53
50
54
51
export default {
55
52
name: ' SearchSideBar' ,
56
53
components: {
57
54
NcAppSidebar,
58
55
NcAppSidebarTab,
59
- NcTextField,
60
- NcCheckboxRadioSwitch,
61
- // Icons
62
- Magnify,
63
- DatabaseOutline,
64
- FileTreeOutline,
65
- },
66
- props: {
67
- search: {
68
- type: String ,
69
- required: true ,
70
- },
71
- metadata: {
72
- type: Object ,
73
- required: true ,
74
- },
75
- catalogi: {
76
- type: Object ,
77
- required: true ,
78
- },
56
+ NcSelect,
57
+ NcButton,
79
58
},
80
59
data () {
81
60
return {
82
- starred: false ,
61
+ registerLoading: false ,
62
+ selectedRegister: null ,
63
+ schemaLoading: false ,
64
+ selectedSchema: null ,
83
65
}
84
66
},
67
+ computed: {
68
+ // when registerList is filled, make a options object for NcSelect
69
+ registerOptions () {
70
+ return {
71
+ options: registerStore .registerList .map (register => ({
72
+ label: register .title ,
73
+ id: register .id ,
74
+ })),
75
+ }
76
+ },
77
+ // when schemaList is filled, make a options object for NcSelect based on the selected register
78
+ schemaOptions () {
79
+ const fullSelectedRegister = registerStore .registerList .find (register => register .id === (this .selectedRegister ? .id || Symbol (' no selected register' )))
80
+ if (! fullSelectedRegister) return []
81
+
82
+ return {
83
+ options: schemaStore .schemaList
84
+ .filter (schema => fullSelectedRegister .schemas .includes (schema .id ))
85
+ .map (schema => ({
86
+ label: schema .title ,
87
+ id: schema .id ,
88
+ })),
89
+ }
90
+ },
91
+ },
85
92
watch: {
86
- search: ' debouncedSearch' ,
87
- metadata: {
88
- handler () {
89
- this .debouncedSearch ()
90
- },
91
- deep: true ,
93
+ // when the selected register changes clear the selected schema
94
+ selectedRegister (newValue ) {
95
+ this .selectedSchema = null
92
96
},
93
- catalogi: {
94
- handler () {
95
- this .debouncedSearch ()
96
- },
97
- deep: true ,
97
+ // when selectedSchema changes, search for objects with the selected register and schema as filters
98
+ selectedSchema (newValue ) {
99
+ if (newValue? .id ) {
100
+ searchStore .searchObjects ({
101
+ register: this .selectedRegister ? .id ,
102
+ schema: this .selectedSchema ? .id ,
103
+ })
104
+ }
98
105
},
99
106
},
100
- methods: {
101
- debouncedSearch: debounce (function () {
102
- searchStore .getSearchResults ()
103
- }, 500 ),
107
+ mounted () {
108
+ this .registerLoading = true
109
+ this .schemaLoading = true
110
+ registerStore .refreshRegisterList ().finally (() => (this .registerLoading = false ))
111
+ schemaStore .refreshSchemaList ().finally (() => (this .schemaLoading = false ))
104
112
},
105
113
}
106
114
< / script>
0 commit comments