Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Jerome Chauveau
zotero-vue-client
Commits
760a97f6
Commit
760a97f6
authored
Dec 09, 2020
by
Jerome Chauveau
Browse files
gestion event de sélection, passage de paramètre au composant, readme
parent
c73e3801
Changes
5
Hide whitespace changes
Inline
Side-by-side
.env
0 → 100644
View file @
760a97f6
VUE_APP_APP_NAME=Zotero Client
VUE_APP_URL_PATH=/zotero-vue-client/
README.md
View file @
760a97f6
...
...
@@ -20,5 +20,28 @@ yarn build
yarn lint
```
## component usage example
```
<zotero-query-component :default-id="1234" @entrySelected="selectedEntryCallback"/>
```
where default-id is a group or user id (https://www.zotero.org/support/dev/web_api/v3/basics)
Another example with custom options :
```
<zotero-query-component
:default-id="1234"
:options="{
pageLength: 10,
editableConfig: false,
format: 'json'
}"
@entrySelected="selectedEntryCallback"/>
```
available formats : https://www.zotero.org/support/dev/web_api/v3/basics#export_formats
### Customize configuration
See
[
Configuration Reference
](
https://cli.vuejs.org/config/
)
.
src/App.vue
View file @
760a97f6
<
template
>
<zotero-query-component/>
<zotero-query-component
:default-id=
"groupOrUserId"
@
entrySelected=
"selectedEntry"
/>
</
template
>
<
script
>
import
ZoteroQueryComponent
from
"
./components/ZoteroQueryComponent
"
;
import
config
from
'
./config/config
'
;
export
default
{
name
:
'
App
'
,
components
:
{
ZoteroQueryComponent
},
data
(){
return
{
groupOrUserId
:
config
.
USER_GROUP_ID
}
},
methods
:
{
selectedEntry
(
e
){
alert
(
e
)
}
}
}
</
script
>
...
...
src/components/ZoteroQueryComponent.vue
View file @
760a97f6
<
template
>
<div
class=
"zotero-query-component"
>
<h2>
Zotero Client
<a
role=
"button"
@
click=
"isConfigVisible=!isConfigVisible"
title=
"Afficher/masquer la configuration"
>
⚙
</a></h2>
<h2>
Zotero Client
<a
role=
"button"
v-if=
"isConfigEditable"
@
click=
"isConfigVisible=!isConfigVisible"
title=
"Afficher/masquer la configuration"
>
⚙
</a>
</h2>
<div
class=
"zotero-config-pane"
v-if=
"isConfigVisible"
>
<div>
<label>
Type de collection
</label>
...
...
@@ -12,7 +16,7 @@
<div>
<label>
Identifiant de "
{{
type
}}
"
</label>
<input
v-model=
"groupOrUserI
D
"
/>
<input
v-model=
"groupOrUserI
d
"
/>
</div>
<div>
...
...
@@ -30,15 +34,20 @@
<progress
v-if=
"isFetching"
/>
<template
v-if=
"entries"
>
<h3>
Résultats
<span
class=
"results-count"
>
{{
nbResults
}}
</span></h3>
<div
class=
"zotero-pager"
>
Page
<a
role=
"button"
class=
"next-prev-btn"
:class=
"
{'active': currentPage !== 1}" @click="previousPage()">
ᐸ
</a>
<span>
{{
currentPage
}}
/
{{
getTotalPages
}}
</span>
<a
role=
"button"
class=
"next-prev-btn"
:class=
"
{'active': currentPage !== getTotalPages}" @click="nextPage()">
ᐳ
</a>
<div
class=
"results-and-pager"
>
<div
class=
"results-title"
>
Résultats
<span
class=
"results-count"
>
{{
nbResults
}}
</span></div>
<div
class=
"zotero-pager"
>
Page
<a
role=
"button"
class=
"next-prev-btn"
:class=
"
{'active': currentPage !== 1}" @click="previousPage()">
ᐸ
</a>
<span>
{{
currentPage
}}
/
{{
getTotalPages
}}
</span>
<a
role=
"button"
class=
"next-prev-btn"
:class=
"
{'active': currentPage !== getTotalPages}" @click="nextPage()">
ᐳ
</a>
</div>
</div>
<div
class=
"zotero-entries"
>
<ul>
<li
class=
"zotero-entry"
v-for=
"entry in entries"
:key=
"'entry-' + entry.key"
>
<li
class=
"zotero-entry"
v-for=
"entry in entries"
@
click=
"entrySelected(entry.key)"
:key=
"'entry-' + entry.key"
>
<ul>
<li
class=
"zotero-title"
>
{{
entry
.
data
.
title
}}
</li>
<li
class=
"zotero-type"
>
{{
entry
.
data
.
itemType
}}
</li>
...
...
@@ -57,19 +66,37 @@
export
default
{
name
:
'
ZoteroQueryComponent
'
,
props
:
{},
props
:
{
defaultId
:
String
,
defaultType
:
{
type
:
String
,
default
:
'
group
'
},
options
:
{
type
:
Object
,
default
:
function
()
{
return
{
editableConfig
:
true
,
pageLength
:
5
,
format
:
'
tei
'
}
}
}
},
data
()
{
return
{
type
:
'
group
'
,
groupOrUserI
D
:
'
427575
'
,
type
:
this
.
defaultType
,
groupOrUserI
d
:
this
.
defaultId
,
entries
:
null
,
isFetching
:
false
,
isConfigEditable
:
this
.
options
.
editableConfig
,
isConfigVisible
:
false
,
start
:
0
,
currentPage
:
1
,
pageLength
:
10
,
pageLength
:
this
.
options
.
pageLength
,
nbResults
:
0
,
textQuery
:
""
textQuery
:
""
,
format
:
this
.
options
.
format
}
},
...
...
@@ -86,7 +113,7 @@
doQuery
()
{
this
.
isFetching
=
true
;
this
.
entries
=
null
;
let
library
=
new
Zotero
.
Library
(
this
.
type
,
this
.
groupOrUserI
D
);
let
library
=
new
Zotero
.
Library
(
this
.
type
,
this
.
groupOrUserI
d
);
library
.
loadItems
({
start
:
this
.
start
,
limit
:
this
.
pageLength
,
q
:
this
.
textQuery
}).
then
((
response
)
=>
{
this
.
entries
=
response
.
data
;
this
.
nbResults
=
response
.
totalResults
;
...
...
@@ -104,6 +131,12 @@
this
.
start
+=
this
.
pageLength
;
this
.
currentPage
++
;
this
.
doQuery
();
},
entrySelected
(
entryKey
){
fetch
(
'
https://api.zotero.org/
'
+
this
.
type
+
'
s
'
+
'
/
'
+
this
.
groupOrUserId
+
'
/items/
'
+
entryKey
+
'
?format=
'
+
this
.
format
)
.
then
(
response
=>
response
.
text
()).
then
(
entry
=>
{
this
.
$emit
(
'
entry-selected
'
,
entry
)})
}
}
...
...
@@ -134,6 +167,17 @@
width
:
200px
;
}
.results-and-pager
{
margin-top
:
15px
;
display
:
flex
;
justify-content
:
center
;
font-size
:
1.2em
;
}
.zotero-pager
{
margin-left
:
30px
;
}
.next-prev-btn
{
display
:
inline-block
;
margin-left
:
15px
;
...
...
@@ -141,7 +185,7 @@
}
.zotero-entries
ul
{
list-style-type
:
squar
e
;
list-style-type
:
non
e
;
margin-bottom
:
15px
;
padding-left
:
15px
;
}
...
...
@@ -174,6 +218,15 @@
visibility
:
visible
;
}
.zotero-entry
{
margin-bottom
:
25px
;
font-size
:
0.9em
;
}
.zotero-entry
:hover
{
background-color
:
#ededed
;
cursor
:
pointer
;
}
.zotero-entry
ul
{
list-style-type
:
none
;
}
...
...
@@ -184,6 +237,8 @@
.zotero-title
{
font-style
:
italic
;
font-weight
:
600
;
}
.zotero-item-key
{
...
...
src/config/config.js
0 → 100644
View file @
760a97f6
var
config
=
{
USER_GROUP_ID
:
process
.
env
.
VUE_APP_DEFAULT_USER_GROUP_ID
,
API_KEY
:
process
.
env
.
VUE_APP_ZOTERO_API_KEY
,
}
module
.
exports
=
config
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment