gestion event de sélection, passage de paramètre au composant, readme (760a97f6) · Commits · Jérôme Chauveau / zotero-vue-client

.env

0 → 100644

+2 −0

Changes for .env: 2 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		VUE_APP_APP_NAME=Zotero Client
		VUE_APP_URL_PATH=/zotero-vue-client/

README.md

+23 −0

Changes for README.md: 23 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		@@ -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

+13 −2

Changes for src/App.vue: 13 added lines, 2 removed lines.
Original line number	Diff line number	Diff line
		<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

+66 −11

Changes for src/components/ZoteroQueryComponent.vue: 66 added lines, 11 removed lines.
Original line number	Diff line number	Diff line
		<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()">ᐸ</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{

src/config/config.js

0 → 100644

+7 −0

Changes for src/config/config.js: 7 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		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