Layout e-lisingweb-admin

<template>
  <v-app id="app" dark>
    <v-navigation-drawer
      color="#0F4E96"
      v-model="drawer"
      :mini-variant="miniVariant"
      :clipped="clipped"
      fixed
      app
    >
      <v-list>
        <v-list-item to="/admin/manage/contract" router exact>
          <v-list-item-action>
            <v-icon color="white">mdi-clipboard-text-outline</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title class="white--text" v-text="`ข้อมูลสัญญา`" />
          </v-list-item-content>
        </v-list-item>

        <v-list-item @click="$auth.logout()" router exact>
          <v-list-item-action>
            <v-icon color="white">mdi-logout</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title class="white--text" v-text="`ออกจากระบบ`" />
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-app-bar :clipped-left="clipped" fixed app>
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
      <!-- <v-btn icon @click.stop="miniVariant = !miniVariant">
        <v-icon>mdi-{{ `chevron-${miniVariant ? "right" : "left"}` }}</v-icon>
      </v-btn> -->
      <!-- <v-btn icon @click.stop="clipped = !clipped">
        <v-icon>mdi-application</v-icon>
      </v-btn> -->
      <!-- <v-btn icon @click.stop="fixed = !fixed">
        <v-icon>mdi-minus</v-icon>
      </v-btn> -->
      <v-toolbar-title>
        <v-img
          :src="require('~/assets/images/logo.png')"
          max-width="200"
        ></v-img>
      </v-toolbar-title>
      <v-spacer />
      <!-- <v-btn
        icon
        @click.stop="rightDrawer = !rightDrawer"
      >
        <v-icon>mdi-menu</v-icon>
      </v-btn> -->
    </v-app-bar>
    <v-main>
      <v-container>
        <Nuxt />
      </v-container>
    </v-main>
    <!-- <v-navigation-drawer
      v-model="rightDrawer"
      :right="right"
      temporary
      fixed
    >
      <v-list>
        <v-list-item @click.native="right = !right">
          <v-list-item-action>
            <v-icon light>
              mdi-repeat
            </v-icon>
          </v-list-item-action>
          <v-list-item-title>Switch drawer (click me)</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer> -->
    <v-footer :absolute="!fixed" app>
      <span>&copy; {{ new Date().getFullYear() }}</span>
    </v-footer>

    <v-speed-dial
      v-model="fab"
      :top="top"
      :bottom="bottom"
      :right="right"
      :left="left"
      :direction="direction"
      :open-on-hover="hover"
      :transition="transition"
    >
      <template v-slot:activator>
        <v-btn v-model="fab" color="blue darken-2" dark fab>
          <v-icon v-if="fab"> mdi-close </v-icon>
          <v-icon v-else> mdi-apps </v-icon>
        </v-btn>
      </template>
      <!-- <v-btn fab dark small color="green">
        <v-icon>mdi-pencil</v-icon>
      </v-btn>
      <v-btn fab dark small color="indigo">
        <v-icon>mdi-plus</v-icon>
      </v-btn>
      <v-btn fab dark small color="red">
        <v-icon>mdi-delete</v-icon>
      </v-btn> -->

      <v-btn
        fab
        dark
        small
        color="green"
        title="ส่งอีกครั้ง"
        @click="openDialog()"
      >
        <v-icon>mdi-send</v-icon>
      </v-btn>
    </v-speed-dial>

    <!-- <SnackBar></SnackBar> -->
    <v-snackbar
      v-model="snackbar"
      :color="snackbarStatus === 'success' ? `green` : `red`"
    >
      {{ snackbarText }}
      <template v-slot:action="{ attrs }">
        <v-btn color="#fff" text v-bind="attrs" @click="snackbar = false">
          ปิด
        </v-btn>
      </template>
    </v-snackbar>

    <DialogPersistent
      :dialogOption.sync="dialogData"
      @onResponseFromDialogPersistent="runSignAgain"
    ></DialogPersistent>
  </v-app>
</template>

<script>
import DialogPersistent from "~/components/global/DialogPersistent";
import SnackBar from "~/components/global/SnackBar";

export default {
  name: "DefaultLayout",
  middleware: "authenticated",
  components: {
    DialogPersistent,
    SnackBar,
  },
  head() {
    return {
      link: [
        {
          rel: "stylesheet",
          href: require("~/assets/css/hint.min.css"),
        },
      ],
    };
  },

  data() {
    return {
      //* dialog
      dialogData: {},

      //* snackbar
      snackbar: false,
      snackbarText: "",
      snackbarStatus: "",

      //* sidebar
      clipped: false,
      drawer: true,
      fixed: false,
      miniVariant: false,
      right: true,
      rightDrawer: false,
      title: "Vuetify.js",
      //* Speed dial
      direction: "top",
      fab: false,
      fling: false,
      hover: true,
      tabs: null,
      top: false,
      right: true,
      bottom: true,
      left: false,
      transition: "slide-y-reverse-transition",
    };
  },
  created() {
    //https://dev.to/viniciuskneves/watch-for-vuex-state-changes-2mgj
    this.unsubscribe = this.$store.subscribe((mutation, state) => {
      if (mutation.type === "request/SET_SERVER_ONLINE") {

        if (!state["request"]?.serverOnline?.status) {
          this.snackbarStatus = "error";
          this.snackbarText = state["request"].serverOnline.message;
          this.snackbar = true;
        }
      }

      if (mutation.type === "admin/SET_SNACKBAR") {

        if (Object.keys(state["admin"].snackbar).length > 0) {

          this.snackbarStatus = state["admin"].snackbar.status ?? "error";
          this.snackbarText = state["admin"].snackbar.message;
          this.snackbar = true;
        }
      }
    });
  },
  beforeDestroy() {
    this.unsubscribe();
  },
  methods: {
    openDialog() {
      this.dialogData = {
        status: true,
        title: "ยืนยัน",
        content: "ส่งเอกสารที่ Sign ไม่สำเร็จอีกครั้ง",
      };
    },
    async runSignAgain(obj) {
      if (!obj.status) {
        return;
      }

      try {
        const res = await this.$axios.$get(`/api/esignature/processrunsign`);

        if (!res.success) {
          this.$store.commit("admin/SET_SNACKBAR", {
            status: "error",
            message: res.message,
          });
          return;
        }

        this.$store.commit("admin/SET_SNACKBAR", {
          status: "success",
          message: res.message,
        });

        return;
      } catch (error) {
        this.$store.commit("admin/SET_SNACKBAR", {
          status: "error",
          message: error.message,
        });
        console.log("runSignAgain error", error.message);
      }
    },
  },
  watch: {
    top(val) {
      this.bottom = !val;
    },
    right(val) {
      this.left = !val;
    },
    bottom(val) {
      this.top = !val;
    },
    left(val) {
      this.right = !val;
    },
  },
};
</script>

<style>
/* This is for documentation purposes and will not be needed in your application */
#app .v-speed-dial {
  z-index: 9999;
  position: fixed;
}

#app .v-btn--floating {
  position: relative;
}
</style>