forked from 2pm.tech/traqtor
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
3.2 KiB
Vue
114 lines
3.2 KiB
Vue
<template>
|
|
<q-page class="flex flex-center">
|
|
<q-btn
|
|
round
|
|
stack
|
|
flat
|
|
style="width: 240px; height: 240px"
|
|
@click="showTextLoading"
|
|
>
|
|
<q-icon name="folder_open" size="5em" />
|
|
<div>Open workspace</div>
|
|
</q-btn>
|
|
<q-dialog
|
|
v-model="bar2"
|
|
persistent
|
|
transition-show="flip-down"
|
|
transition-hide="flip-up"
|
|
>
|
|
<q-card style="min-width: 25vw">
|
|
<q-bar>
|
|
Select workspace folder
|
|
<q-space />
|
|
<q-btn dense flat icon="close" v-close-popup>
|
|
<q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
|
|
</q-btn>
|
|
</q-bar>
|
|
|
|
<q-card-section class="q-pa-none" v-show="!loading">
|
|
<transition
|
|
appear
|
|
enter-active-class="animated fadeIn"
|
|
leave-active-class="animated fadeOut"
|
|
>
|
|
<div>
|
|
<q-scroll-area
|
|
dark
|
|
class="bg-dark text-white rounded-borders"
|
|
style="height: 205px; min-width: 300px"
|
|
>
|
|
<q-list flat separator v-show="!loading">
|
|
<q-item
|
|
clickable
|
|
v-ripple
|
|
v-for="dir in dirList"
|
|
:key="dir.name"
|
|
@click="listDir(dir.path)"
|
|
>
|
|
<q-item-section side v-if="dir.back === true">
|
|
<q-icon name="chevron_left" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label>{{ dir.name }}</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-icon name="chevron_right" v-if="dir.back !== true" />
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-scroll-area>
|
|
</div>
|
|
</transition>
|
|
</q-card-section>
|
|
<q-card-section v-if="loading" style="min-height: 205px">
|
|
<q-inner-loading :showing="loading" style="min-height: 50px">
|
|
<q-spinner-gears size="50px" />
|
|
</q-inner-loading>
|
|
</q-card-section>
|
|
<q-separator />
|
|
<q-card-actions align="right">
|
|
<q-btn flat>select</q-btn>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
</q-page>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "PageIndex",
|
|
data() {
|
|
return {
|
|
dirList: [],
|
|
bar2: false,
|
|
loading: false,
|
|
};
|
|
},
|
|
methods: {
|
|
showTextLoading() {
|
|
this.bar2 = true;
|
|
this.listDir();
|
|
},
|
|
listDir(currentDir) {
|
|
var self = this;
|
|
self.loading = true;
|
|
this.$api
|
|
.get("file-manager/list-dir", { params: { path: currentDir } })
|
|
.then((response) => {
|
|
self.loading = false;
|
|
const back = [{ name: "Back", path: currentDir + "/..", back: true }];
|
|
self.dirList = back.concat(response.data);
|
|
})
|
|
.catch(() => {
|
|
this.$q.notify({
|
|
color: "negative",
|
|
position: "top",
|
|
message: "Loading failed",
|
|
icon: "report_problem",
|
|
});
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|