Skip to content
Snippets Groups Projects
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
No related branches found
No related tags found
No related merge requests found
.env 0 → 100644
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="results-title">Résultats <span class="results-count">{{nbResults}}</span></div>
<div class="zotero-pager">Page <div class="zotero-pager">Page
<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 !== 1}" @click="previousPage()">&#5176;</a>
<span>{{currentPage}}/{{getTotalPages}}</span> <span>{{currentPage}}/{{getTotalPages}}</span>
<a role="button" class="next-prev-btn" :class="{'active': currentPage !== getTotalPages}" @click="nextPage()">&#5171;</a> <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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment