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

.env

+VUE_APP_APP_NAME=Zotero Client
+VUE_APP_URL_PATH=/zotero-vue-client/

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/).

src/App.vue

 <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

 <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()">&#5176;</a>
-                <span>{{currentPage}}/{{getTotalPages}}</span>
-                <a role="button" class="next-prev-btn" :class="{'active': currentPage !== getTotalPages}" @click="nextPage()">&#5171;</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()">&#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{

src/config/config.js

+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