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
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/).
<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>
......
<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="groupOrUserID"/>
<input v-model="groupOrUserId"/>
</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="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()">&#5176;</a>
<span>{{currentPage}}/{{getTotalPages}}</span>
<a role="button" class="next-prev-btn" :class="{'active': currentPage !== getTotalPages}" @click="nextPage()">&#5171;</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',
groupOrUserID: '427575',
type: this.defaultType,
groupOrUserId: 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.groupOrUserID);
let library = new Zotero.Library(this.type, this.groupOrUserId);
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: square;
list-style-type: none;
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{
......
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