ZoteroVueClient.vue 6.43 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
                    <li class="zotero-entry"
                        v-for="entry in entries"
49
                        @click="entrySelected(entry)"
50
                        :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
            },
            options : {
                type: Object,
                default: function() {
                    return {
                        editableConfig: true,
80
                        pageLength: 5
81
82
83
84
                    }
                }
            }
        },
Jerome Chauveau's avatar
Jerome Chauveau committed
85
86
        data() {
            return {
87
88
                type: this.defaultType,
                groupOrUserId: this.defaultId,
Jerome Chauveau's avatar
Jerome Chauveau committed
89
90
                entries: null,
                isFetching: false,
91
                isConfigEditable : this.options.editableConfig,
92
                isConfigVisible: false,
Jerome Chauveau's avatar
Jerome Chauveau committed
93
94
                start:0,
                currentPage:1,
95
                pageLength: this.options.pageLength,
Jerome Chauveau's avatar
Jerome Chauveau committed
96
                nbResults: 0,
97
98
                textQuery : "",
                format : this.options.format
Jerome Chauveau's avatar
Jerome Chauveau committed
99
100
101
102
103
104
105
106
107
108
109
110
111

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

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

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

137
138
            entrySelected(entry){
                this.$emit('entry-selected',entry)
Jerome Chauveau's avatar
Jerome Chauveau committed
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
            }
        }


    }
</script>

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

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

156
157
158
159
    h2 a:hover {
        color : darkgray;
    }

Jerome Chauveau's avatar
Jerome Chauveau committed
160
161
162
163
164
165
166
167
168
    a[role=button], button{
        cursor: pointer;
    }

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

169
170
171
172
173
174
175
176
177
178
179
    .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
180
181
182
183
184
185
186
    .next-prev-btn{
        display: inline-block;
        margin-left: 15px;
        margin-right: 15px;
    }

    .zotero-entries ul{
187
        list-style-type: none;
188
189
        margin-bottom : 15px;
        padding-left: 15px;
Jerome Chauveau's avatar
Jerome Chauveau committed
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
    }

    .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;
206
        font-size: 0.8em;
Jerome Chauveau's avatar
Jerome Chauveau committed
207
208
209
210
211
212
    }

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

213
214
215
216
217
218
219
    .next-prev-btn {
        visibility: hidden;
    }
    .next-prev-btn.active{
        visibility: visible;
    }

220
221
222
223
224
225
226
227
228
    .zotero-entry{
        margin-bottom: 25px;
        font-size: 0.9em;
    }
    .zotero-entry:hover{
        background-color: #ededed;
        cursor: pointer;
    }

229
230
231
232
233
234
235
236
237
238
    .zotero-entry ul{
        list-style-type: none;
    }

    .zotero-type{
        color: #888;
    }

    .zotero-title{
        font-style: italic;
239
240
        font-weight: 600;

241
242
243
244
245
    }

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

</style>