ZoteroQueryComponent.vue 6.62 KB
Newer Older
Jerome Chauveau's avatar
Jerome Chauveau committed
1
2
<template>
    <div class="zotero-query-component">
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
68
                    </li>
                </ul>
            </div>
        </template>

    </div>
</template>

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

    export default {
        name: 'ZoteroQueryComponent',
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
113
114
115

            }
        },
        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;
116
                let library = new Zotero.Library(this.type, this.groupOrUserId);
Jerome Chauveau's avatar
Jerome Chauveau committed
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
                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();
134
135
136
137
138
139
            },

            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)})
Jerome Chauveau's avatar
Jerome Chauveau committed
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
            }
        }


    }
</script>

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

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

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

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

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

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

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

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

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

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

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

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

    .zotero-type{
        color: #888;
    }

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

242
243
244
245
246
    }

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

</style>