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

start clipboard

Browse source
This commit is contained in:
Andy Bunce 2017-09-17 22:11:04 +01:00
parent 7081c4446c
commit 29d2a5556d
2 changed files with 74 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
src/vue-poc/features/collection/files.vue
View file

@ -15,12 +15,12 @@
</v-breadcrumbs-item> </v-breadcrumbs-item>
</v-breadcrumbs> </v-breadcrumbs>
</v-toolbar-title> </v-toolbar-title>
<v-btn v-if="clipboard" @click="clipboard=null" icon><v-icon>content_paste</v-icon></v-btn>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn v-if="selCount" @click="selectNone">Sel:{{selCount}}</v-btn> <v-btn v-if="selection.length" @click="selectNone">S: {{selection.length}}</v-btn>
<v-text-field v-if="!selCount" prepend-icon="search" label="Filter..." v-model="q" type="search" <v-text-field v-if="!selection.length" prepend-icon="search" label="Filter..." v-model="q" type="search"
hide-details single-line @keyup.enter="setfilter"></v-text-field> hide-details single-line @keyup.enter="setfilter"></v-text-field>
<v-toolbar-items v-if="!selCount"> <v-toolbar-items v-if="!selection.length">
<v-btn icon v-for="b in buttons" :key="b.icon" @click="action(b)"> <v-btn icon v-for="b in buttons" :key="b.icon" @click="action(b)">
<v-avatar> <v-avatar>
@ -29,13 +29,13 @@
</v-btn> </v-btn>
</v-toolbar-items> </v-toolbar-items>
<v-toolbar-items v-if="selCount"> <v-toolbar-items v-if="selection.length">
<v-btn icon v-for="b in selopts" :key="b.icon" @click="action(b)"> <v-btn icon v-for="b in selopts" :key="b.icon" @click="action(b)">
<v-icon v-text="b.icon"></v-icon> <v-icon v-text="b.icon"></v-icon>
</v-btn> </v-btn>
</v-toolbar-items> </v-toolbar-items>
<v-menu offset-y v-if="selCount"> <v-menu offset-y v-if="selection.length">
<v-btn icon slot="activator"> <v-btn icon slot="activator">
<v-icon>more_vert</v-icon> <v-icon>more_vert</v-icon>
</v-btn> </v-btn>
@ -61,8 +61,9 @@
<v-subheader inset > <v-subheader inset >
<span >Folders ({{ xfolders.length }})</span> <span >Folders ({{ xfolders.length }})</span>
</v-subheader> </v-subheader>
<v-list-tile v-for="item in xfolders" v-bind:key="item.name" @click="folder(item)" avatar > <v-list-tile v-for="item in xfolders" v-bind:key="item.name"
<v-list-tile-avatar > v-model="item.selected" @click="folder(item)" avatar >
<v-list-tile-avatar @click.prevent.stop="item.selected =! item.selected ">
<v-icon v-bind:class="[item.iconClass]">{{ itemIcon(item) }}</v-icon> <v-icon v-bind:class="[item.iconClass]">{{ itemIcon(item) }}</v-icon>
</v-list-tile-avatar> </v-list-tile-avatar>
<v-list-tile-content > <v-list-tile-content >
@ -102,7 +103,7 @@
<v-navigation-drawer left persistent v-model="showInfo" :disable-route-watcher="true"> <v-navigation-drawer left persistent v-model="showInfo" :disable-route-watcher="true">
<v-card flat tile> <v-card flat tile>
<v-toolbar > <v-toolbar >
<v-card-title >{{ selected && selected.name }}</v-card-title> <v-card-title >{{ selection[0] && selection[0].name }}</v-card-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn flat icon @click="showInfo = false"><v-icon>highlight_off</v-icon></v-btn> <v-btn flat icon @click="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
</v-toolbar> </v-toolbar>
@ -128,22 +129,22 @@
q: "", q: "",
busy: false, busy: false,
showInfo: false, showInfo: false,
selected: [], clipboard: null,
buttons: [ buttons: [
{method: this.todo, icon: "view_quilt"}, {method: this.todo, icon: "view_quilt"},
{method: this.add, icon: "add"}, {method: this.add, icon: "add"},
{method: this.load, icon: "refresh"}, {method: this.load, icon: "refresh"},
{method: this.todo, icon: "sort"}, {method: this.todo, icon: "sort"},
{method: this.selectAll, icon: "select_all"} {method: this.selectAll, icon: "select_all"}
], ],
selopts: [ selopts: [
{method: this.todo, icon: "delete"}, {method: this.todo, icon: "delete"},
{method: this.todo, icon: "content_copy"}, {method: this.clip, icon: "content_copy"},
{method: this.todo, icon: "content_cut"}, {method: this.clip, icon: "content_cut"},
{method: this.todo, icon: "text_format"}, {method: this.todo, icon: "text_format"},
{method: this.todo, icon: "info"}, {method: this.todo, icon: "info"},
{method: this.todo, icon: "share"} {method: this.todo, icon: "share"}
] ]
} }
}, },
methods:{ methods:{
@ -169,9 +170,12 @@ selopts: [
}); });
}, },
action(b){ action(b){
b.method(b.icon) b.method(b.icon)
}, },
clip(icon){
this.clipboard=icon
},
add(){ add(){
alert("add") alert("add")
}, },
@ -180,11 +184,10 @@ selopts: [
this.$router.push({ query: {url:this.url,q:this.q }}) this.$router.push({ query: {url:this.url,q:this.q }})
}, },
info(item){ info(item){
this.selected=item
this.showInfo=true this.showInfo=true
}, },
invoke(){ invoke(){
HTTP.post("eval/invoke",Qs.stringify({path:this.url+this.selected.name})) HTTP.post("eval/invoke",Qs.stringify({path:this.url+this.selection[0].name}))
.then(r=>{ .then(r=>{
var job=r.data.job var job=r.data.job
console.log(r.data) console.log(r.data)
@ -195,7 +198,8 @@ selopts: [
alert("todo: " + icon) alert("todo: " + icon)
}, },
itemIcon(item){ itemIcon(item){
return item.selected?"check_circle":"folder" if(item.selected) return "check_circle"
else return (item.type=="folder")?"folder":"insert_drive_file"
}, },
selectAll(){ selectAll(){
this.items.forEach(item=>{item.selected=true}) this.items.forEach(item=>{item.selected=true})
@ -222,8 +226,8 @@ selopts: [
) )
return a return a
}, },
selCount(){ selection(){
return this.items.reduce((acc,item)=>{return acc+(item.selected?1:0)},0) return this.items.filter(item=>{return item.selected} )
} }
}, },
watch:{ watch:{

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

@ -1,4 +1,4 @@
// generated 2017-09-17T17:24:08.963+01:00 // generated 2017-09-17T22:10:03.752+01:00
Vue.component('qd-fullscreen',{template:` Vue.component('qd-fullscreen',{template:`
<a @click="toggle()" href="javascript:void(0);" title="Fullscreen toggle"> <a @click="toggle()" href="javascript:void(0);" title="Fullscreen toggle">
<v-icon>{{ fullscreenIcon }}</v-icon> <v-icon>{{ fullscreenIcon }}</v-icon>
@ -442,11 +442,11 @@ Vue.filter('round', function(value, decimals) {
</v-breadcrumbs-item> </v-breadcrumbs-item>
</v-breadcrumbs> </v-breadcrumbs>
</v-toolbar-title> </v-toolbar-title>
<v-btn v-if="clipboard" @click="clipboard=null" icon=""><v-icon>content_paste</v-icon></v-btn>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn v-if="selCount" @click="selectNone">Sel:{{selCount}}</v-btn> <v-btn v-if="selection.length" @click="selectNone">S: {{selection.length}}</v-btn>
<v-text-field v-if="!selCount" prepend-icon="search" label="Filter..." v-model="q" type="search" hide-details="" single-line="" @keyup.enter="setfilter"></v-text-field> <v-text-field v-if="!selection.length" prepend-icon="search" label="Filter..." v-model="q" type="search" hide-details="" single-line="" @keyup.enter="setfilter"></v-text-field>
<v-toolbar-items v-if="!selCount"> <v-toolbar-items v-if="!selection.length">
<v-btn icon="" v-for="b in buttons" :key="b.icon" @click="action(b)"> <v-btn icon="" v-for="b in buttons" :key="b.icon" @click="action(b)">
<v-avatar> <v-avatar>
@ -455,13 +455,13 @@ Vue.filter('round', function(value, decimals) {
</v-btn> </v-btn>
</v-toolbar-items> </v-toolbar-items>
<v-toolbar-items v-if="selCount"> <v-toolbar-items v-if="selection.length">
<v-btn icon="" v-for="b in selopts" :key="b.icon" @click="action(b)"> <v-btn icon="" v-for="b in selopts" :key="b.icon" @click="action(b)">
<v-icon v-text="b.icon"></v-icon> <v-icon v-text="b.icon"></v-icon>
</v-btn> </v-btn>
</v-toolbar-items> </v-toolbar-items>
<v-menu offset-y="" v-if="selCount"> <v-menu offset-y="" v-if="selection.length">
<v-btn icon="" slot="activator"> <v-btn icon="" slot="activator">
<v-icon>more_vert</v-icon> <v-icon>more_vert</v-icon>
</v-btn> </v-btn>
@ -487,8 +487,8 @@ Vue.filter('round', function(value, decimals) {
<v-subheader inset=""> <v-subheader inset="">
<span>Folders ({{ xfolders.length }})</span> <span>Folders ({{ xfolders.length }})</span>
</v-subheader> </v-subheader>
<v-list-tile v-for="item in xfolders" v-bind:key="item.name" @click="folder(item)" avatar=""> <v-list-tile v-for="item in xfolders" v-bind:key="item.name" v-model="item.selected" @click="folder(item)" avatar="">
<v-list-tile-avatar> <v-list-tile-avatar @click.prevent.stop="item.selected =! item.selected ">
<v-icon v-bind:class="[item.iconClass]">{{ itemIcon(item) }}</v-icon> <v-icon v-bind:class="[item.iconClass]">{{ itemIcon(item) }}</v-icon>
</v-list-tile-avatar> </v-list-tile-avatar>
<v-list-tile-content> <v-list-tile-content>
@ -528,7 +528,7 @@ Vue.filter('round', function(value, decimals) {
<v-navigation-drawer left="" persistent="" v-model="showInfo" :disable-route-watcher="true"> <v-navigation-drawer left="" persistent="" v-model="showInfo" :disable-route-watcher="true">
<v-card flat="" tile=""> <v-card flat="" tile="">
<v-toolbar> <v-toolbar>
<v-card-title>{{ selected &amp;&amp; selected.name }}</v-card-title> <v-card-title>{{ selection[0] &amp;&amp; selection[0].name }}</v-card-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn flat="" icon="" @click="showInfo = false"><v-icon>highlight_off</v-icon></v-btn> <v-btn flat="" icon="" @click="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
</v-toolbar> </v-toolbar>
@ -553,22 +553,22 @@ Vue.filter('round', function(value, decimals) {
q: "", q: "",
busy: false, busy: false,
showInfo: false, showInfo: false,
selected: [], clipboard: null,
buttons: [ buttons: [
{method: this.todo, icon: "view_quilt"}, {method: this.todo, icon: "view_quilt"},
{method: this.add, icon: "add"}, {method: this.add, icon: "add"},
{method: this.load, icon: "refresh"}, {method: this.load, icon: "refresh"},
{method: this.todo, icon: "sort"}, {method: this.todo, icon: "sort"},
{method: this.selectAll, icon: "select_all"} {method: this.selectAll, icon: "select_all"}
], ],
selopts: [ selopts: [
{method: this.todo, icon: "delete"}, {method: this.todo, icon: "delete"},
{method: this.todo, icon: "content_copy"}, {method: this.clip, icon: "content_copy"},
{method: this.todo, icon: "content_cut"}, {method: this.clip, icon: "content_cut"},
{method: this.todo, icon: "text_format"}, {method: this.todo, icon: "text_format"},
{method: this.todo, icon: "info"}, {method: this.todo, icon: "info"},
{method: this.todo, icon: "share"} {method: this.todo, icon: "share"}
] ]
} }
}, },
methods:{ methods:{
@ -594,9 +594,12 @@ selopts: [
}); });
}, },
action(b){ action(b){
b.method(b.icon) b.method(b.icon)
}, },
clip(icon){
this.clipboard=icon
},
add(){ add(){
alert("add") alert("add")
}, },
@ -605,11 +608,10 @@ selopts: [
this.$router.push({ query: {url:this.url,q:this.q }}) this.$router.push({ query: {url:this.url,q:this.q }})
}, },
info(item){ info(item){
this.selected=item
this.showInfo=true this.showInfo=true
}, },
invoke(){ invoke(){
HTTP.post("eval/invoke",Qs.stringify({path:this.url+this.selected.name})) HTTP.post("eval/invoke",Qs.stringify({path:this.url+this.selection[0].name}))
.then(r=>{ .then(r=>{
var job=r.data.job var job=r.data.job
console.log(r.data) console.log(r.data)
@ -620,7 +622,8 @@ selopts: [
alert("todo: " + icon) alert("todo: " + icon)
}, },
itemIcon(item){ itemIcon(item){
return item.selected?"check_circle":"folder" if(item.selected) return "check_circle"
else return (item.type=="folder")?"folder":"insert_drive_file"
}, },
selectAll(){ selectAll(){
this.items.forEach(item=>{item.selected=true}) this.items.forEach(item=>{item.selected=true})
@ -647,8 +650,8 @@ selopts: [
) )
return a return a
}, },
selCount(){ selection(){
return this.items.reduce((acc,item)=>{return acc+(item.selected?1:0)},0) return this.items.filter(item=>{return item.selected} )
} }
}, },
watch:{ watch:{