apb/vue-poc
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

search and select

Browse source
This commit is contained in:
Andy Bunce 2017-09-10 22:45:24 +01:00
parent 1da5adc834
commit 823ff0af78
8 changed files with 232 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/vue-poc/cxan.xml
View file

@ -2,8 +2,8 @@
<abstract>vue-poc test of vue.js. </abstract>
<author id="abunce">Andy Bunce</author>
<maintainer id="abunce">Andy Bunce</maintainer>
<home></home>
<category id="libs">Library</category>
<home>https://github.com/apb2006/vue-poc</home>
<category id="apps">Application</category>
<tag>vue</tag>
<tag>basex</tag>
</package>

0
src/vue-poc/history.xml → src/vue-poc/data/vue-poc/history.xml
View file

2
src/vue-poc/expath-pkg.xml
View file

@ -2,7 +2,7 @@
abbrev="vue-poc" version="0.0.4" spec="1.0">
<title>vue-poc test of vue.js.</title>
<dependency name="ace" version="1.2.7" />
<dependency name="vuetify" version="0.14.8" />
<dependency name="vuetify" version="0.15.2" />
<dependency name="vue" version="2.4.1" />
<dependency name="vue-router" version="2.5.3" />
<dependency name="google-material" version="0.0.0" />

59
src/vue-poc/features/search.vue
View file

@ -1,8 +1,31 @@
<!DOCTYPE html>
<template id="search">
<v-container fluid>
<v-text-field label="Search..." v-model="q"></v-text-field>
<v-alert warning value="true">TODO</v-alert>
<v-alert warning value="true">Not finished</v-alert>
<v-text-field label="Search..." v-model="q" v-on:keyup="send"></v-text-field>
<v-progress-linear v-if="busy" v-bind:indeterminate="true" ></v-progress-linear>
<v-layout>
<v-flex>
<v-list v-if="!busy" two-line subheader>
<v-list-tile v-for="(item,index) in results" v-bind:key="item.uri"
:to="item.uri" v-model="selected[index]" avatar >
<v-list-tile-avatar @click.prevent.stop="select(index)">
<v-icon v-text="icon(index)"></v-icon>
</v-list-tile-avatar>
<v-list-tile-content >
<v-list-tile-title>{{ index }} {{ item.title }}</v-list-tile-title>
<v-list-tile-sub-title>{{ item.uri }}</v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn icon ripple >
<v-icon class="grey--text text--lighten-1">info</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
</v-list>
</v-flex>
</v-layout>
</v-container>
</template>
@ -10,11 +33,41 @@
data: function(){
return {
q: this.$route.query.q,
results: []
results: [],
busy: false,
selected: []
}
},
methods:{
get() {
this.busy= true
console.log("q",this.q)
HTTP.get('search',{params:{q:this.q}})
.then((res) => {
this.busy=false
this.results = res.data.items;
this.selected=[false,true]
});
},
send(e){
if(e.keyCode==13){
this.get()
}
},
icon(index){
return this.selected[index]?"check_circle":"search"
},
search(item){
alert(item.title)
},
select(index){
this.$set(this.selected,index,!this.selected[index])
//alert(index)
}
},
created:function(){
console.log("Serch",this.$route.query.q)
this.get()
}
}
</script>

87
src/vue-poc/models.gen.xqm
View file

@ -1,9 +1,10 @@
(: entity access maps
: auto generated from xml files in entities folder at: 2017-09-05T14:36:25.45+01:00
: auto generated from xml files in entities folder at: 2017-09-08T12:06:30.901+01:00
:)
module namespace entity = 'quodatum.models.generated';
import module namespace cfg = "quodatum:media.image.configure" at "features/images/config.xqm";declare namespace h='urn:quodatum:vue-poc.history';
declare namespace xqdoc='http://www.xqdoc.org/1.0';
declare namespace c='http://www.w3.org/ns/xproc-step';
declare variable $entity:list:=map {
@ -92,7 +93,89 @@ declare variable $entity:list:=map {
} },
"data": function() as element(h:event)*
{ doc("history.xml")/h:history/h:event[h:file] },
{ doc("vue-poc/history.xml")/h:history/h:event[h:file] },
"views": map{
}
},
"query": map{
"name": "query",
"description": "An replx query",
"access": map{
"created": function($_ as element()) as xs:string {$_/created },
"id": function($_ as element()) as xs:string {$_/@id },
"query": function($_ as element()) as xs:string {$_/query },
"result": function($_ as element()) as xs:string {$_/substring(result,0,1000) },
"resultlength": function($_ as element()) as xs:integer {$_/string-length(result) } },
"filter": function($item,$q) as xs:boolean{
some $e in ( ) satisfies
fn:contains($e,$q, 'http://www.w3.org/2005/xpath-functions/collation/html-ascii-case-insensitive')
},
"json": map{
"created": function($_ as element()) as element(created)? {
(: xs:string :)
fn:data($_/created)!element created { .}
},
"id": function($_ as element()) as element(id)? {
(: xs:string :)
fn:data($_/@id)!element id { .}
},
"query": function($_ as element()) as element(query)? {
(: xs:string :)
fn:data($_/query)!element query { .}
},
"result": function($_ as element()) as element(result)? {
(: xs:string :)
fn:data($_/substring(result,0,1000))!element result { .}
},
"resultlength": function($_ as element()) as element(resultlength)? {
(: xs:integer :)
fn:data($_/string-length(result))!element resultlength { attribute type {'number'}, .}
} },
"data": function() as element(query)*
{ collection("replx/queries")/query
},
"views": map{
'filter': 'name description'
}
},
"search-result": map{
"name": "search-result",
"description": "About a search result.",
"access": map{
"sref": function($_ as element()) as xs:string {$_/"app.item.index({'name':'benchx'})" },
"title": function($_ as element()) as xs:string {$_/title },
"type": function($_ as element()) as xs:string {$_/type },
"uri": function($_ as element()) as xs:string {$_/uri } },
"filter": function($item,$q) as xs:boolean{
some $e in ( ) satisfies
fn:contains($e,$q, 'http://www.w3.org/2005/xpath-functions/collation/html-ascii-case-insensitive')
},
"json": map{
"sref": function($_ as element()) as element(sref)? {
(: xs:string :)
fn:data($_/"app.item.index({'name':'benchx'})")!element sref { .}
},
"title": function($_ as element()) as element(title)? {
(: xs:string :)
fn:data($_/title)!element title { .}
},
"type": function($_ as element()) as element(type)? {
(: xs:string :)
fn:data($_/type)!element type { .}
},
"uri": function($_ as element()) as element(uri)? {
(: xs:string :)
fn:data($_/uri)!element uri { .}
} },
"data": function() as element(search)*
{ () },
"views": map{

2
src/vue-poc/models/filehistory.xml
View file

@ -27,5 +27,5 @@
<views>
</views>
<iconclass>fa fa-calendar</iconclass>
<data type="element(h:event)">doc("history.xml")/h:history/h:event[h:file]</data>
<data type="element(h:event)">doc("vue-poc/history.xml")/h:history/h:event[h:file]</data>
</entity>

71
src/vue-poc/static/app-gen.js
View file

@ -1,4 +1,4 @@
// generated 2017-09-07T22:40:46.775+01:00
// generated 2017-09-10T22:43:59.216+01:00
Vue.component('qd-fullscreen',{template:`
<a @click="toggle()" href="javascript:void(0);" title="Fullscreen toggle">
<v-icon>{{ fullscreenIcon }}</v-icon>
@ -2090,19 +2090,71 @@ repository todo
);
const Search=Vue.extend({template:`
<v-container fluid="">
<v-text-field label="Search..." v-model="q"></v-text-field>
<v-alert warning="" value="true">TODO</v-alert>
<v-alert warning="" value="true">Not finished</v-alert>
<v-text-field label="Search..." v-model="q" v-on:keyup="send"></v-text-field>
<v-progress-linear v-if="busy" v-bind:indeterminate="true"></v-progress-linear>
<v-layout>
<v-flex>
<v-list v-if="!busy" two-line="" subheader="">
<v-list-tile v-for="(item,index) in results" v-bind:key="item.uri" :to="item.uri" v-model="selected[index]" avatar="">
<v-list-tile-avatar @click.prevent.stop="select(index)">
<v-icon v-text="icon(index)"></v-icon>
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>{{ index }} {{ item.title }}</v-list-tile-title>
<v-list-tile-sub-title>{{ item.uri }}</v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn icon="" ripple="">
<v-icon class="grey--text text--lighten-1">info</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
</v-list>
</v-flex>
</v-layout>
</v-container>
`,
data: function(){
return {
q: this.$route.query.q,
results: []
results: [],
busy: false,
selected: []
}
},
methods:{
get() {
this.busy= true
console.log("q",this.q)
HTTP.get('search',{params:{q:this.q}})
.then((res) => {
this.busy=false
this.results = res.data.items;
this.selected=[false,true]
});
},
send(e){
if(e.keyCode==13){
this.get()
}
},
icon(index){
return this.selected[index]?"check_circle":"search"
},
search(item){
alert(item.title)
},
select(index){
this.$set(this.selected,index,!this.selected[index])
//alert(index)
}
},
created:function(){
console.log("Serch",this.$route.query.q)
this.get()
}
}
@ -3075,11 +3127,12 @@ router.beforeEach((to, from, next) => {
created(){
console.log("create-----------")
var that=this
Vue.config.errorHandler = function (err, vm, info) {
// handle error
// `info` is a Vue-specific error info, e.g. which lifecycle hook
console.error(err, vm, info);
this.showAlert("vue error:\n"+err)
that.showAlert("vue error:\n"+err)
alert("vue error");
};
// Add a response interceptor
@ -3144,13 +3197,13 @@ Vue.use(Auth);
// read and write settings
// https://vuejs.org/v2/guide/state-management.html
var settings = {
debug: true,
debug: false,
getItem (key) {
if (this.debug) console.log('getItem',key);
return new Promise((resolve, reject) => {
localforage.getItem(key)
.then((value) => {
console.log('GET setting', key,value);
//console.log('GET setting', key,value);
resolve(value)
}).catch((err) => {
console.log('GET failed');
@ -3163,7 +3216,7 @@ var settings = {
return new Promise((resolve, reject) => {
localforage.setItem(key, value)
.then((value) => {
console.log('SET ',key, value);
//console.log('SET ',key, value);
return new Promise((resolve, reject) => {resolve(value);})
}).catch((err) => {
console.log('set failed');
@ -3237,7 +3290,5 @@ const Fullscreen={
}) }
};
Vue.use(Fullscreen);
Vue.use(Vuetify);
new Vuepoc().$mount('#app')

29
src/vue-poc/vue-api2.xqm
View file

@ -6,7 +6,9 @@
module namespace vue-api = 'quodatum:vue.api';
import module namespace rest = "http://exquery.org/ns/restxq";
import module namespace session = "http://basex.org/modules/session";
import module namespace entity = 'quodatum.models.generated' at "models.gen.xqm";
import module namespace dice = 'quodatum.web.dice/v4' at "lib/dice.xqm";
import module namespace web = 'quodatum.web.utils4' at "lib/webutils.xqm";
declare namespace c="http://www.w3.org/ns/xproc-step";
@ -26,7 +28,29 @@ declare
};
(:~
: Returns a query result.
: Returns search results
:)
declare
%rest:path("/vue-poc/api/search")
%rest:query-param("q", "{$q}")
%rest:produces("application/json")
%output:method("json")
function vue-api:search($q )
{
let $entity:=$entity:list("search-result")
let $items:=(<search>
<title>No search yet: {$q} </title>
<uri>database?url=%2F</uri>
</search>,
<search>
<title>soon</title>
<uri>ping</uri>
</search>)
return dice:response($items,$entity,web:dice())
};
(:~
: Returns test list for select.
:)
declare
%rest:path("/vue-poc/api/test-select")
@ -44,7 +68,6 @@ function vue-api:test-select($q )
(:~
: Returns wadl.
:)