ZoteroVueClient.vue 7.05 KB
Newer Older
Jerome Chauveau's avatar
Jerome Chauveau committed
1
<template>
2
    <div class="zotero-vue-client">
3
4
5
6
7
        <h2>Zotero Client <a role="button"
                             v-if="isConfigEditable"
                             @click="isConfigVisible=!isConfigVisible"
                             title="Afficher/masquer la configuration"></a>
        </h2>
Jerome Chauveau's avatar
Jerome Chauveau committed
8
9
10
11
12
13
14
15
16
17
18
        <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>
19
                <input v-model="groupOrUserId"/>
Jerome Chauveau's avatar
Jerome Chauveau committed
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
            </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>&#128269;</span>
            </button>
        </div>
        <progress v-if="isFetching"/>

        <template v-if="entries">
37
38
39
40
41
42
43
            <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>
Jerome Chauveau's avatar
Jerome Chauveau committed
44
45
46
            </div>
            <div class="zotero-entries">
                <ul>
47
48
49
50
                    <li class="zotero-entry"
                        v-for="entry in entries"
                        @click="entrySelected(entry.key)"
                        :key="'entry-' + entry.key">
51
52
53
54
55
                        <ul>
                            <li class="zotero-title">{{entry.data.title}}</li>
                            <li class="zotero-type">{{entry.data.itemType}}</li>
                            <li class="zotero-item-key">{{entry.key}}</li>
                        </ul>
Jerome Chauveau's avatar
Jerome Chauveau committed
56
57
58
59
60
61
62
63
64
65
66
67
                    </li>
                </ul>
            </div>
        </template>

    </div>
</template>

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

    export default {
68
        name: 'ZoteroVueClient',
69
70
71
72
        props: {
            defaultId : String,
            defaultType : {
                type : String,
73
                default : 'users'
74
75
76
77
78
79
80
81
82
83
84
85
            },
            options : {
                type: Object,
                default: function() {
                    return {
                        editableConfig: true,
                        pageLength: 5,
                        format: 'tei'
                    }
                }
            }
        },
Jerome Chauveau's avatar
Jerome Chauveau committed
86
87
        data() {
            return {
88
89
                type: this.defaultType,
                groupOrUserId: this.defaultId,
Jerome Chauveau's avatar
Jerome Chauveau committed
90
91
                entries: null,
                isFetching: false,
92
                isConfigEditable : this.options.editableConfig,
93
                isConfigVisible: false,
Jerome Chauveau's avatar
Jerome Chauveau committed
94
95
                start:0,
                currentPage:1,
96
                pageLength: this.options.pageLength,
Jerome Chauveau's avatar
Jerome Chauveau committed
97
                nbResults: 0,
98
99
                textQuery : "",
                format : this.options.format
Jerome Chauveau's avatar
Jerome Chauveau committed
100
101
102
103
104
105
106
107
108
109
110
111
112

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

            canQuery : function(){
                return this.textQuery && this.textQuery.trim() !== ''
            }
        },
        methods: {
113
114
115
            doQuery(reset=true) {
                if(reset)
                    this.currentPage = 1;
Jerome Chauveau's avatar
Jerome Chauveau committed
116
117
                this.isFetching = true;
                this.entries = null;
118
                let library = new Zotero.Library(this.type, this.groupOrUserId);
Jerome Chauveau's avatar
Jerome Chauveau committed
119
120
121
122
123
124
125
126
127
128
                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 --;
129
                this.doQuery(false);
Jerome Chauveau's avatar
Jerome Chauveau committed
130
131
132
133
134
            },

            nextPage(){
                this.start += this.pageLength;
                this.currentPage ++;
135
                this.doQuery(false);
136
137
138
            },

            entrySelected(entryKey){
139
                let suffix = this.type + 's' +'/' + this.groupOrUserId + '/items/' + entryKey
140
                fetch('https://api.zotero.org/'
141
142
143
144
145
146
147
148
149
150
151
                    + suffix + '?format=' + this.format)
                    .then(response => response.text()).then(entry => {
                        console.log()
                        this.$emit(
                            'entry-selected',
                            {
                                key: entryKey,
                                url : 'http://zotero.org/' + suffix,
                                serialized :entry
                            })
                })
Jerome Chauveau's avatar
Jerome Chauveau committed
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
            }
        }


    }
</script>

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

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

169
170
171
172
    h2 a:hover {
        color : darkgray;
    }

Jerome Chauveau's avatar
Jerome Chauveau committed
173
174
175
176
177
178
179
180
181
    a[role=button], button{
        cursor: pointer;
    }

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

182
183
184
185
186
187
188
189
190
191
192
    .results-and-pager{
        margin-top : 15px;
        display: flex;
        justify-content: center;
        font-size: 1.2em;
    }

    .zotero-pager{
        margin-left: 30px;
    }

Jerome Chauveau's avatar
Jerome Chauveau committed
193
194
195
196
197
198
199
    .next-prev-btn{
        display: inline-block;
        margin-left: 15px;
        margin-right: 15px;
    }

    .zotero-entries ul{
200
        list-style-type: none;
201
202
        margin-bottom : 15px;
        padding-left: 15px;
Jerome Chauveau's avatar
Jerome Chauveau committed
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
    }

    .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;
219
        font-size: 0.8em;
Jerome Chauveau's avatar
Jerome Chauveau committed
220
221
222
223
224
225
    }

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

226
227
228
229
230
231
232
    .next-prev-btn {
        visibility: hidden;
    }
    .next-prev-btn.active{
        visibility: visible;
    }

233
234
235
236
237
238
239
240
241
    .zotero-entry{
        margin-bottom: 25px;
        font-size: 0.9em;
    }
    .zotero-entry:hover{
        background-color: #ededed;
        cursor: pointer;
    }

242
243
244
245
246
247
248
249
250
251
    .zotero-entry ul{
        list-style-type: none;
    }

    .zotero-type{
        color: #888;
    }

    .zotero-title{
        font-style: italic;
252
253
        font-weight: 600;

254
255
256
257
258
    }

    .zotero-item-key{
        font-size: 0.7em;
    }
Jerome Chauveau's avatar
Jerome Chauveau committed
259
260

</style>