diff --git a/.env b/.env
new file mode 100644
index 0000000000000000000000000000000000000000..7ad6586f2ae69b399af257aaf8723ddf77422318
--- /dev/null
+++ b/.env
@@ -0,0 +1,2 @@
+VUE_APP_APP_NAME=Zotero Client
+VUE_APP_URL_PATH=/zotero-vue-client/
diff --git a/README.md b/README.md
index e993e6cc39274547be9e9ac8f49f1c6075a8406e..5e2cb21f44c0311d2eb483c2f53a6701ca80694b 100644
--- a/README.md
+++ b/README.md
@@ -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/).
diff --git a/src/App.vue b/src/App.vue
index 7b69698e70628c1bb876f6893c85fc3de2786d84..42e734c980a6eabebb053f9a3ab1115a9cf50fb3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,25 @@
<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>
diff --git a/src/components/ZoteroQueryComponent.vue b/src/components/ZoteroQueryComponent.vue
index 574c62b7fd2d24221e6054d0fa1e72ac78852888..d1aed273ce1d884a6f307e9132d3bc4177caa18e 100644
--- a/src/components/ZoteroQueryComponent.vue
+++ b/src/components/ZoteroQueryComponent.vue
@@ -1,6 +1,10 @@
<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="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',
- 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{
diff --git a/src/config/config.js b/src/config/config.js
new file mode 100644
index 0000000000000000000000000000000000000000..9a73fc015aee499d1a004dc1539e124d50c3f8d3
--- /dev/null
+++ b/src/config/config.js
@@ -0,0 +1,7 @@
+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