Initial commit (1865d5a9) · Commits · Jérôme Chauveau / zotero-vue-client

package.json

+1 −0

Changes for package.json: 1 added line, 0 removed lines.
Original line number	Diff line number	Diff line
		@@ -9,6 +9,7 @@
		},
		"dependencies": {
		"core-js": "^3.6.5",
		"libzotero": "^0.1.13",
		"vue": "^3.0.0"
		},
		"devDependencies": {

src/App.vue

+11 −6

Changes for src/App.vue: 11 added lines, 6 removed lines.
Original line number	Diff line number	Diff line
		<template>
		<img alt="Vue logo" src="./assets/logo.png">
		<HelloWorld msg="Welcome to Your Vue.js App"/>
		<zotero-query-component/>
		</template>

		<script>
		import HelloWorld from './components/HelloWorld.vue'
		import ZoteroQueryComponent from "./components/ZoteroQueryComponent";

		export default {
		name: 'App',
		components: {
		HelloWorld
		ZoteroQueryComponent
		}
		}
		</script>
		@@ -19,8 +18,14 @@ export default {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
		}


		.zotero-query-component {
		width: 600px;
		margin: auto;
		}


		</style>

src/assets/logo.png

deleted100644 → 0

−6.69 KiB

Loading image diff...

src/components/HelloWorld.vue

deleted100644 → 0

+0 −58

Changes for src/components/HelloWorld.vue: 0 added lines, 58 removed lines.
Original line number	Diff line number	Diff line
		<template>
		<div class="hello">
		<h1>{{ msg }}</h1>
		<p>
		For a guide and recipes on how to configure / customize this project,<br>
		check out the
		<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
		</p>
		<h3>Installed CLI Plugins</h3>
		<ul>
		<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
		<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
		</ul>
		<h3>Essential Links</h3>
		<ul>
		<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
		<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
		<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
		<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
		<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
		</ul>
		<h3>Ecosystem</h3>
		<ul>
		<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
		<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
		<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
		<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
		<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
		</ul>
		</div>
		</template>

		<script>
		export default {
		name: 'HelloWorld',
		props: {
		msg: String
		}
		}
		</script>

		<!-- Add "scoped" attribute to limit CSS to this component only -->
		<style scoped>
		h3 {
		margin: 40px 0 0;
		}
		ul {
		list-style-type: none;
		padding: 0;
		}
		li {
		display: inline-block;
		margin: 0 10px;
		}
		a {
		color: #42b983;
		}
		</style>

src/components/ZoteroQueryComponent.vue

0 → 100644

+161 −0

Changes for src/components/ZoteroQueryComponent.vue: 161 added lines, 0 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">⚙</a></h2>
		<div class="zotero-config-pane" v-if="isConfigVisible">
		<div>
		<label>Type de collection</label>
		<select v-model="type">
		<option value="group">Group</option>
		<option value="user">User</option>
		</select>
		</div>

		<div>
		<label>Identifiant de "{{type}}"</label>
		<input v-model="groupOrUserID"/>
		</div>

		<div>
		<label>Résultats par page</label>
		<input type="number" v-model="pageLength"/>
		</div>

		</div>
		<div>
		<input v-model="textQuery"/>
		<button class="zotero-query-btn" @click="doQuery()" :disabled="!canQuery">
		<span>🔍</span>
		</button>
		</div>
		<progress v-if="isFetching"/>

		<template v-if="entries">
		<h3>Résultats <span class="results-count">{{nbResults}}</span></h3>
		<div class="zotero-pager">
		<a role="button" class="next-prev-btn" @click="previousPage()">ᐸ</a>
		<span>{{currentPage}}/{{getTotalPages}}</span>
		<a role="button" class="next-prev-btn" @click="nextPage()">ᐳ</a>
		</div>
		<div class="zotero-entries">
		<ul>
		<li v-for="entry in entries" :key="'entry-' + entry.key">
		{{entry.key}}
		</li>
		</ul>
		</div>
		</template>

		</div>
		</template>

		<script>
		const Zotero = require('libzotero');

		export default {
		name: 'ZoteroQueryComponent',
		props: {},
		data() {
		return {
		type: 'group',
		groupOrUserID: '427575',
		entries: null,
		isFetching: false,
		isConfigVisible: true,
		start:0,
		currentPage:1,
		pageLength: 10,
		nbResults: 0,
		textQuery : ""

		}
		},
		computed: {
		getTotalPages : function(){
		return Math.ceil(this.nbResults / this.pageLength)
		},

		canQuery : function(){
		return this.textQuery && this.textQuery.trim() !== ''
		}
		},
		methods: {
		doQuery() {
		this.isFetching = true;
		this.entries = null;
		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;
		this.isFetching = false;
		})
		},

		previousPage(){
		this.start -= this.pageLength;
		this.currentPage --;
		this.doQuery();
		},

		nextPage(){
		this.start += this.pageLength;
		this.currentPage ++;
		this.doQuery();
		}
		}


		}
		</script>

		<!-- Add "scoped" attribute to limit CSS to this component only -->
		<style scoped>
		* {
		--input-height: 34px;
		}

		input, button, select {
		height: var(--input-height);
		}

		h1 {}
		a[role=button], button{
		cursor: pointer;
		}

		label{
		display: inline-block;
		width: 200px;
		}

		.next-prev-btn{
		display: inline-block;
		margin-left: 15px;
		margin-right: 15px;
		}

		.zotero-entries ul{
		list-style-type: square;
		}

		.results-count{
		font-size: 0.8em;
		}
		.results-count:before{
		content: ' (';
		}
		.results-count:after{
		content: ') ';
		}

		.zotero-config-pane{
		background-color: gainsboro;
		padding:15px;
		margin-bottom: 15px;
		}

		.zotero-query-btn{
		margin-left: 15px;
		}


		</style>