<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>
