Commit 760a97f6 authored by Jerome Chauveau's avatar Jerome Chauveau
Browse files

gestion event de sélection, passage de paramètre au composant, readme

parent c73e3801
VUE_APP_APP_NAME=Zotero Client
VUE_APP_URL_PATH=/zotero-vue-client/
...@@ -20,5 +20,28 @@ yarn build ...@@ -20,5 +20,28 @@ yarn build
yarn lint 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 ### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/). See [Configuration Reference](https://cli.vuejs.org/config/).
<template> <template>
<zotero-query-component/> <zotero-query-component :default-id="groupOrUserId" @entrySelected="selectedEntry"/>
</template> </template>
<script> <script>
import ZoteroQueryComponent from "./components/ZoteroQueryComponent"; import ZoteroQueryComponent from "./components/ZoteroQueryComponent";
import config from './config/config';
export default { export default {
name: 'App', name: 'App',
components: { components: {
ZoteroQueryComponent ZoteroQueryComponent
},
data(){
return {
groupOrUserId: config.USER_GROUP_ID
}
},
methods : {
selectedEntry(e){
alert(e)
}
} }
} }
</script> </script>
......
<template> <template>
<div class="zotero-query-component"> <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 class="zotero-config-pane" v-if="isConfigVisible">
<div> <div>
<label>Type de collection</label> <label>Type de collection</label>
...@@ -12,7 +16,7 @@ ...@@ -12,7 +16,7 @@
<div> <div>
<label>Identifiant de "{{type}}"</label> <label>Identifiant de "{{type}}"</label>
<input v-model="groupOrUserID"/> <input v-model="groupOrUserId"/>
</div> </div>
<div> <div>
...@@ -30,15 +34,20 @@ ...@@ -30,15 +34,20 @@
<progress v-if="isFetching"/> <progress v-if="isFetching"/>
<template v-if="entries"> <template v-if="entries">
<h3>Résultats <span class="results-count">{{nbResults}}</span></h3> <div class="results-and-pager">
<div class="zotero-pager">Page <div class="results-title">Résultats <span class="results-count">{{nbResults}}</span></div>
<a role="button" class="next-prev-btn" :class="{'active': currentPage !== 1}" @click="previousPage()">&#5176;</a> <div class="zotero-pager">Page
<span>{{currentPage}}/{{getTotalPages}}</span> <a role="button" class="next-prev-btn" :class="{'active': currentPage !== 1}" @click="previousPage()">&#5176;</a>
<a role="button" class="next-prev-btn" :class="{'active': currentPage !== getTotalPages}" @click="nextPage()">&#5171;</a> <span>{{currentPage}}/{{getTotalPages}}</span>
<a role="button" class="next-prev-btn" :class="{'active': currentPage !== getTotalPages}" @click="nextPage()">&#5171;</a>
</div>
</div> </div>
<div class="zotero-entries"> <div class="zotero-entries">
<ul> <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> <ul>
<li class="zotero-title">{{entry.data.title}}</li> <li class="zotero-title">{{entry.data.title}}</li>
<li class="zotero-type">{{entry.data.itemType}}</li> <li class="zotero-type">{{entry.data.itemType}}</li>
...@@ -57,19 +66,37 @@ ...@@ -57,19 +66,37 @@
export default { export default {
name: 'ZoteroQueryComponent', name: 'ZoteroQueryComponent',
props: {}, props: {
defaultId : String,
defaultType : {
type : String,
default : 'group'
},
options : {
type: Object,
default: function() {
return {
editableConfig: true,
pageLength: 5,
format: 'tei'
}
}
}
},
data() { data() {
return { return {
type: 'group', type: this.defaultType,
groupOrUserID: '427575', groupOrUserId: this.defaultId,
entries: null, entries: null,
isFetching: false, isFetching: false,
isConfigEditable : this.options.editableConfig,
isConfigVisible: false, isConfigVisible: false,
start:0, start:0,
currentPage:1, currentPage:1,
pageLength: 10, pageLength: this.options.pageLength,
nbResults: 0, nbResults: 0,
textQuery : "" textQuery : "",
format : this.options.format
} }
}, },
...@@ -86,7 +113,7 @@ ...@@ -86,7 +113,7 @@
doQuery() { doQuery() {
this.isFetching = true; this.isFetching = true;
this.entries = null; this.entries = null;
let library = new Zotero.Library(this.type, this.groupOrUserID); let library = new Zotero.Library(this.type, this.groupOrUserId);
library.loadItems({start: this.start, limit: this.pageLength, q: this.textQuery}).then((response)=>{ library.loadItems({start: this.start, limit: this.pageLength, q: this.textQuery}).then((response)=>{
this.entries = response.data; this.entries = response.data;
this.nbResults = response.totalResults; this.nbResults = response.totalResults;
...@@ -104,6 +131,12 @@ ...@@ -104,6 +131,12 @@
this.start += this.pageLength; this.start += this.pageLength;
this.currentPage ++; this.currentPage ++;
this.doQuery(); 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 @@ ...@@ -134,6 +167,17 @@
width: 200px; 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{ .next-prev-btn{
display: inline-block; display: inline-block;
margin-left: 15px; margin-left: 15px;
...@@ -141,7 +185,7 @@ ...@@ -141,7 +185,7 @@
} }
.zotero-entries ul{ .zotero-entries ul{
list-style-type: square; list-style-type: none;
margin-bottom : 15px; margin-bottom : 15px;
padding-left: 15px; padding-left: 15px;
} }
...@@ -174,6 +218,15 @@ ...@@ -174,6 +218,15 @@
visibility: visible; visibility: visible;
} }
.zotero-entry{
margin-bottom: 25px;
font-size: 0.9em;
}
.zotero-entry:hover{
background-color: #ededed;
cursor: pointer;
}
.zotero-entry ul{ .zotero-entry ul{
list-style-type: none; list-style-type: none;
} }
...@@ -184,6 +237,8 @@ ...@@ -184,6 +237,8 @@
.zotero-title{ .zotero-title{
font-style: italic; font-style: italic;
font-weight: 600;
} }
.zotero-item-key{ .zotero-item-key{
......
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
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment