@metano/quasar_rest_auth 1.0.1

package/components/header/HeaderUser.vue

@@ -0,0 +1,210 @@
+
+<template>
+  <div>
+    <q-dialog
+        v-model="showRegistarEntidade"
+        persistent
+        :maximized="maximizedToggle"
+        full-height
+      >
+      <RegistarEntidade />
+    </q-dialog>
+    <q-dialog v-model="pergunta" persistent class="row">
+        <q-card style="width: 400px;" flat>
+
+          <q-card-section class="row ">
+            <label class="text-h6 text-grey-9 text-center">
+              {{tdc('De qual deseja sair')}}
+            </label>
+          </q-card-section>
+          <q-separator />
+
+          <q-card-actions class="row" >
+            <q-btn flat   class="col-12" color="primary"  @click="pergunta = false, User.logout(User.Entidade?.id)" > {{tdc(User.Entidade?.nome)}}</q-btn>
+          </q-card-actions>
+
+          <q-card-actions class="row" >
+            <q-btn flat   class="col-12" color="primary"  @click="pergunta = false, User.logout('x')" > {{tdc(User?.TipoEntidade?.nome)}}</q-btn>
+          </q-card-actions>
+          <q-separator/>
+          <q-card-actions class="row" >
+            <q-btn  class="col-12" flat v-close-popup>{{tdc('Cancelar')}}</q-btn>
+          </q-card-actions>
+        </q-card>
+
+    </q-dialog>
+
+    <q-btn round flat>
+      <q-avatar class="" size="45px" :class="$q.dark.isActive ? 'bg-white' : 'bg-white'" >
+        <img  :src="User?.perfil" >
+        <q-card-actions align="center" v-if="User" flat>
+          <div class="text-h6 text-gry-8 row text-center">{{User?.username}}</div>
+        </q-card-actions>
+        <q-separator />
+        <q-menu flat  square  fit :offset="[130, 5]"  >
+          <q-card class="my-card"  style="width:270px;"  flat bordered square  >
+            <q-card-actions class="text-center row" v-if="User">
+              <div class=" col-12">
+                <q-avatar class="" size="120px"  >
+                  <img   :src="User?.perfil" >
+                </q-avatar>
+              </div>
+              <div class=" text-center col-12 text-grey-9 text-h6">
+                {{User?.username}}
+              </div>
+            </q-card-actions>
+            <q-separator  v-if="User" />
+            <q-expansion-item
+                v-if="User.data"
+                dense
+                group="group"
+                :label="User?.Entidade?.nome || tdc('Entidade') "
+                header-class=" text-grey-9"
+                v-model="entidadeClosed"
+              >
+                <q-separator />
+                <q-item dense clickable v-if="User.TipoEntidade?.crair_entidade"   :to="{name:'add_entidade_self', params:{}}"  >
+                  <q-item-section>
+                    <center><q-item-label overline class="text-blue"> {{ tdc('Registar Entidade')}}</q-item-label> </center>
+                  </q-item-section>
+                </q-item>
+                <q-item dense clickable v-for="entidade in User?.Entidades" :key="entidade?.id" @click=" entidadeClosed = false, sucursalClosed = true, User.selectEntidade(entidade)">
+                  <q-item-section>
+                    <center><q-item-label overline> {{ tdc((entidade?.nome))}}</q-item-label> </center>
+                  </q-item-section>
+                </q-item>
+              </q-expansion-item>
+
+              <q-expansion-item
+                v-if="User.data"
+                dense
+                group="group"
+                :label="User?.Sucursal?.nome || tdc('Sucursal') "
+                header-class=" text-grey-9"
+                v-model="sucursalClosed"
+              >
+                <q-separator />
+                <q-item dense clickable v-for="sucursal in User?.Sucursals" :key="sucursal?.id"   @click=" sucursalClosed = false, User.selectSucursal(sucursal)">
+                  <q-item-section>
+                    <center><q-item-label overline> {{ tdc(sucursal?.nome)}}</q-item-label> </center>
+                  </q-item-section>
+                </q-item>
+              </q-expansion-item>
+
+            <q-btn dense  flat  size="" @click="sucursalClosed = false" color="grey" :label="tdc(User.perfilSplint(User.Grupo?.name)) " style="width: 100%; border-color: transparent;">
+              <q-menu fit>
+                <q-list dense   class="rounded-borders" style="min-width: 100px" >
+                  <q-item clickable v-close-popup  @click="User.selectGrupo({id:'1', name:'Hóspede'})"  >
+                    <q-item-section>
+                      <q-item-label overline> {{tdc('Hóspede')}}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+
+                  <q-item clickable v-close-popup @click="User.selectGrupo(grupo)" v-ripple v-for=" grupo in User.Grupos" :key="grupo.id">
+                    <q-item-section>
+                      <q-item-label overline> {{ tdc(User.perfilSplint(grupo.name))}}</q-item-label>
+
+                    </q-item-section>
+
+                  </q-item>
+
+                </q-list>
+              </q-menu>
+            </q-btn>
+            <q-card-actions align="around" v-if="User.data">
+              <q-btn  icon="settings" dense size=""  :to="{name:'userDetails', params:{'user_id': User?.id}}" flat color="secondary" class="">{{tdc('Definições')}}</q-btn>
+              <q-btn  icon="logout" dense size="" flat color="red" @click="pergunta = !pergunta">{{tdc('Sair')}}</q-btn>
+            </q-card-actions>
+
+            <q-card-actions align="around" v-else>
+              <q-btn  icon="person_add" dense size="" :to="{name:'registarUser'}" flat color="primary" class="" :label="tdc('Registar')" />
+              <q-btn  icon="login" dense size="" :to="{name:'login'}" flat color="secondary" class="" >{{tdc('login')}}</q-btn>
+            </q-card-actions>
+            <q-separator color="primary" dense size="xs" />
+          </q-card>
+
+        </q-menu>
+      </q-avatar>
+      <q-tooltip :class="$q.dark.isActive ? 'bg-transparent' : 'bg-primary'" v-if="User">{{User?.username }} </q-tooltip>
+      <q-tooltip :class="$q.dark.isActive ? 'bg-transparent' : 'bg-primary'" v-else>{{tdc('Hóspede')}}</q-tooltip>
+    </q-btn>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { tdc } from '../../boot/app'
+import { getStorage } from '../../boot/base'
+import { UserStore } from '../../stores/AuthStore'
+import RegistarEntidade from './RegistarEntidade.vue'
+
+export default defineComponent({
+  name: 'HeaderUser',
+  components: { RegistarEntidade },
+
+  setup () {
+    const User = UserStore()
+    return { User, tdc }
+  },
+
+  data () {
+    return {
+      sucursalClosed: false,
+      entidadeClosed: false,
+      pergunta: false,
+      showRegistarEntidade: false,
+    }
+  },
+
+  watch: {
+    'User.Grupo' (val) {
+      if (!val) return
+      if (this.$route.name !== 'wellcome') {
+        this.$router.push({ name: 'home' })
+      }
+    },
+
+    'User.isLogout' (val) {
+      if (!val) return
+      if (this.User.Entidade){
+        this.$router.push({ name: 'login' , query: { entidade: this.User.Entidade.id}})
+      }
+      this.$router.push({ name: 'login' })
+    }
+  },
+
+  methods: {
+    startSessionWatcher () {
+      this._sessionInterval = setInterval(this.User.checkSession, 1 * 60 * 1000)
+    }
+  },
+  beforeUnmount () {
+
+  },
+
+  async mounted () {
+
+    this.sucursalClosed = false
+
+    /* ---------- LEITURA SEGURA ---------- */
+    this.User.Entidade = this.User.safeParse(getStorage('c', 'userEntidade'))
+    this.User.Sucursals = this.User.safeParse(getStorage('c', 'userSucursals'))
+    this.User.Entidades = this.User.safeParse(getStorage('c', 'userEntidades'))
+    this.User.Sucursal = this.User.safeParse(getStorage('c', 'userSucursal'))
+    this.User.Grupo   = this.User.safeParse(getStorage('c', 'userGrupo'))
+    this.User.Grupos   = this.User.safeParse(getStorage('c', 'userGrupos'))
+    this.User.Permicoes = this.User.safeParse(getStorage('l', 'userPermicoes'))
+
+    this.User.data   = this.User.safeParse(getStorage('c', 'user'))
+    this.User.access   = getStorage('c', 'access')
+    this.User.refresh   = getStorage('c', 'refresh')
+
+    this.User.RightTop   = ('' + getStorage('c', 'right_top')).toLowerCase() === 'true'
+    this.User.LeftTop   = ('' + getStorage('c', 'left_top')).toLowerCase() === 'true'
+    
+    await this.User.getEntidades()
+
+    this.startSessionWatcher()
+  }
+})
+</script>

package/components/header/RegistarEntidade.vue

@@ -0,0 +1,309 @@
+
+<template>
+  <div>
+    <q-dialog v-model="pergunta" persistent class="row">
+        <q-card style="width: 400px;" flat>
+
+          <q-card-section class="row ">
+            <label class="text-h6 text-grey-9 text-center">
+              {{tdc('De qual deseja sair')}}
+            </label>
+          </q-card-section>
+          <q-separator />
+
+          <q-card-actions class="row" >
+            <q-btn flat   class="col-12" color="primary" type="submit" @click="logout(User?.Entidade?.id)" > {{tdc(User?.Entidade?.nome)}}</q-btn>
+          </q-card-actions>
+
+          <q-card-actions class="row" >
+            <q-btn flat   class="col-12" color="primary" type="submit" @click="logout('x')" > {{tdc(User?.TipoEntidade?.nome)}}</q-btn>
+          </q-card-actions>
+          <q-separator/>
+          <q-card-actions class="row" >
+            <q-btn  class="col-12" flat v-close-popup>{{tdc('Cancelar')}}</q-btn>
+          </q-card-actions>
+        </q-card>
+
+    </q-dialog>
+
+    <q-btn round flat>
+      <q-avatar class="" size="45px" :class="$q.dark.isActive ? 'bg-white' : 'bg-white'" >
+        <img  v-if="UserPessoa" :src="User?.perfil?.url" >
+        <img  v-else src="https://awsacademy.instructure.com/images/messages/avatar-50.png" >
+        <q-card-actions align="center" v-if="User" flat>
+          <div class="text-h6 text-gry-8 row text-center">{{User?.username}}</div>
+        </q-card-actions>
+        <q-separator />
+        <q-menu flat  square  fit :offset="[130, 5]"  >
+          <q-card class="my-card"  style="width:270px;"  flat bordered square  >
+            <q-card-actions class="text-center row" v-if="User">
+              <div class=" col-12">
+                <q-avatar class="" size="120px"  >
+                  <img  v-if="User" :src="User?.perfil?.url" >
+                  <img  v-else src="https://awsacademy.instructure.com/images/messages/avatar-50.png" >
+                </q-avatar>
+              </div>
+              <div class=" text-center col-12 text-grey-9 text-h6">
+                {{User?.username}}
+              </div>
+            </q-card-actions>
+            <q-separator  v-if="User" />
+            <q-expansion-item
+                v-if="User"
+                dense
+                group="group"
+                :label="tdc('Entidade') "
+                header-class=" text-grey-9"
+                :caption="UserEntidade?.nome"
+              >
+                <q-separator />
+                <q-item dense clickable v-if="User?.TipoEntidade?.crair_entidade"   :to="{name:'add_entidade_self', params:{}}"  >
+                  <q-item-section>
+                    <center><q-item-label overline class="text-blue"> {{ tdc('Registar Entidade')}}</q-item-label> </center>
+                  </q-item-section>
+                </q-item>
+                <q-item dense clickable v-for="entidade in User?.Entidades" :key="entidade?.id" @click="selectEntidade(entidade)">
+                  <q-item-section>
+                    <center><q-item-label overline> {{ tdc((entidade?.nome))}}</q-item-label> </center>
+                  </q-item-section>
+                </q-item>
+              </q-expansion-item>
+
+              <q-expansion-item
+                v-if="User?.Entidade"
+                dense
+                group="group"
+                :label="tdc('Sucursal') "
+                header-class=" text-grey-9"
+                :caption="User?.Sucursal?.nome"
+                default-opened
+                v-model="sucursalClosed"
+              >
+                <q-separator />
+                <q-item dense clickable v-for="sucursal in User?.Sucursals" :key="sucursal?.id"   @click="selectSucursal(sucursal)">
+                  <q-item-section>
+                    <center><q-item-label overline> {{ tdc(sucursal?.nome)}}</q-item-label> </center>
+                  </q-item-section>
+                </q-item>
+              </q-expansion-item>
+
+            <q-btn dense  flat  size="" @click="sucursalClosed = false" color="grey" :label="tdc(perfilSplint(User?.Grupo?.name)) " style="width: 100%; border-color: transparent;">
+              <q-menu fit>
+                <q-list dense   class="rounded-borders" style="min-width: 100px" >
+                  <q-item clickable v-close-popup v-if="'domain'=='domain'" @click="selectGroup({id:'1', name:'Hóspede'})"  >
+                    <q-item-section>
+                      <q-item-label overline> {{tdc('Hóspede')}}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                  <q-item clickable v-close-popup v-else @click="selectGroup({id:'1', name:'Hóspede'})"  >
+                    <q-item-section>
+                      <q-item-label overline> {{tdc('Hóspede')}}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+
+                  <q-item clickable v-close-popup @click="selectGroup(grupo)" v-ripple v-for=" grupo in User.Grupos" :key="grupo.id">
+                    <q-item-section>
+                      <q-item-label overline> {{ tdc(perfilSplint(grupo.name))}}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+
+            <q-btn v-show="User" style="width: 100%; border-color: transparent;"  icon="settings" dense size=""  :to="{name:'userDetails', params:{'user_id': User?.id}}" flat color="secondary" class="">{{tdc('Definições')}}</q-btn>
+            <q-btn v-show="User" style="width: 100%; border-color: transparent;"  icon="logout" dense size="" flat color="red" @click="modal_pergunta">{{tdc('Sair')}}</q-btn>
+
+            <q-btn v-show="!User"  style="width: 100%; border-color: transparent;" dense size="" :to="{name:'registarUser'}" flat color="primary" class="" :label="tdc('Registar')" />
+            <q-btn v-show="!User"  style="width: 100%; border-color: transparent;" dense size="" :to="{name:'login'}" flat color="secondary" class="" >{{tdc('login')}}</q-btn>
+
+            <q-separator color="primary" dense size="xs" />
+          </q-card>
+
+        </q-menu>
+      </q-avatar>
+      <q-tooltip :class="$q.dark.isActive ? 'bg-transparent' : 'bg-primary'" v-if="User">{{User?.username }} </q-tooltip>
+      <q-tooltip :class="$q.dark.isActive ? 'bg-transparent' : 'bg-primary'" v-else>{{tdc('Hóspede')}}</q-tooltip>
+    </q-btn>
+  </div>
+</template>
+
+<script>
+
+import { defineComponent } from 'vue'
+import { HTTPAuth, url } from '../../boot/api'
+import { tdc } from '../../boot/app'
+import { deleteStorage, getStorage, setStorage } from '../../boot/base'
+import { UserStore } from '../../stores/AuthStore'
+
+export default defineComponent({
+  name: 'RegistarEntidade',
+  components: {
+
+  },
+
+  setup () {
+    const User = UserStore()
+    return { User }
+  },
+
+  data () {
+    return {
+      tdc: tdc,
+      sucursalClosed: true,
+      pergunta: false,
+      selectSucursalModal: false,
+    }
+  },
+
+  methods: {
+
+    perfilSplint (datax) {
+      try {
+        const vare = datax.split('_')
+        if (vare[1] != null) {
+          return vare[1]
+        } else {
+          return vare[0]
+        }
+      } catch (err) {
+        return null
+      }
+    },
+
+    /* --------------------- SELECT ENTIDADE --------------------- */
+    selectEntidade (entidade) {
+      setStorage('c', 'userEntidade', JSON.stringify(entidade), 365)
+
+      if (this.User) this.User.Entidade = JSON.parse(getStorage('c', 'userEntidade'))
+
+      this.selectSucursalModal = false
+      this.getUserSucursals()
+      this.getEntidadeModulos()
+      this.sucursalClosed = true
+    },
+
+    /* --------------------- SELECT SUCURSAL --------------------- */
+    selectSucursal (sucursal) {
+      setStorage('c', 'userSucursal', JSON.stringify(sucursal), 365)
+
+      if (this.User) this.User.Sucursal = JSON.parse(getStorage('c', 'userSucursal'))
+
+      this.selectSucursalModal = false
+      this.getUserPerfils()
+      this.sucursalClosed = false
+    },
+
+    /* --------------------- GET USER SUCURSALS --------------------- */
+    async getUserSucursals () {
+      this.spiner = true
+
+      if (getStorage('c', 'userEntidade') !== null) {
+        try {
+          await HTTPAuth.get(url({ type: 'u', url: 'auth/usuarios/' + this.User?.id + '/userSucursals/', params: {} }))
+            .then(res => {
+              setStorage('c', 'userSucursals', JSON.stringify(res.data), 365)
+
+              if (this.User) this.User.Sucursals = res.data
+            })
+            .catch(err => console.log(err))
+        } catch (error) {
+          console.log(error.message)
+        }
+      }
+    },
+
+    /* --------------------- GET USER PERFILS --------------------- */
+    async getUserPerfils () {
+      try {
+        await HTTPAuth.get(url({ type: 'u', url: 'auth/usuarios/' + this.User?.id + '/userPerfils/', params: {} }))
+          .then(res => {
+            setStorage('c', 'userPerfils', JSON.stringify(res.data), 365)
+
+            if (this.User) this.User.Grupos = res.data
+          })
+          .catch(err => console.log(err))
+      } catch (error) {
+        console.log(error.message)
+      }
+    },
+
+    /* --------------------- SELECT GROUP --------------------- */
+    async selectGroup (group) {
+      setStorage('c', 'userGrupo', JSON.stringify(group), 365)
+
+      if (this.User) this.User.Grupo = group
+
+      await this.getUserPermicoes()
+      this.$router.push({ name: 'home', params: {} })
+    },
+
+    /* --------------------- GET USER PERMISSOES --------------------- */
+    async getUserPermicoes () {
+      if (getStorage('c', 'userSucursal') !== null) {
+        try {
+          await HTTPAuth.get(url({ type: 'u', url: 'auth/usuarios/' + this.User?.data?.id + '/userPermicoes/', params: {} }))
+            .then(res => {
+              setStorage('l', 'userPermicoes', JSON.stringify(res.data), 365)
+
+              if (this.User) this.User.Permicoes = res.data
+            })
+            .catch(err => console.log(err))
+        } catch (error) {
+          console.log(error.message)
+        }
+      }
+    },
+
+    /* --------------------- GET ENTIDADE MODULOS --------------------- */
+    async getEntidadeModulos () {
+      if (getStorage('c', 'userEntidade') !== null) {
+        try {
+          await HTTPAuth.get(url({ type: 'u', url: 'auth/entidades/' + this.User?.Entidade.id + '/modulos/', params: {} }))
+            .then(res => {
+              setStorage('c', 'entidadeModulos', JSON.stringify(res.data), 365)
+
+              if (this.User) this.User.EntidadeModulos = res.data
+            })
+            .catch(err => console.log(err))
+        } catch (error) {
+          console.log(error.message)
+        }
+      }
+    }
+  },
+
+  mounted () {
+    const storedUser = getStorage('c', 'user')
+
+    if (storedUser) {
+      try {
+        if (this.User) this.User.data = JSON.parse(storedUser)
+      } catch (err) {
+        console.error('Erro ao fazer JSON.parse(user):', err)
+        if (this.User) this.User.data = { id: '1', username: 'Gest' }
+      }
+    } else {
+      if (this.User) this.User.data = { id: '1', username: 'Gest' }
+    }
+
+    if (this.User) {
+      const ent = getStorage('c', 'userEntidade')
+      const suc = getStorage('c', 'userSucursal')
+      const gru = getStorage('c', 'userGrupo')
+
+      try {
+        this.User.Entidade = ent ? JSON.parse(ent) : null
+        this.User.Sucursal = suc ? JSON.parse(suc) : null
+        this.User.Grupo = gru ? JSON.parse(gru) : null
+      } catch (err) {
+        console.error('Erro ao parsear entidades/grupo:', err)
+      }
+
+      if (!this.User?.Grupo?.id) {
+        // this.getEntidades()
+      }
+    }
+  }
+})
+</script>
+

package/gitignore

@@ -0,0 +1,3 @@
+/node_modules/
+/files/
+/.project/

package/help

@@ -0,0 +1,9 @@
+npm login --auth-type=legacy
+npm whoami
+
+
+npm version patch   # 1.0.1
+npm version minor   # 1.1.0
+npm version major   # 2.0.0
+
+npm publish --access public

package/index.js

@@ -0,0 +1,9 @@
+export * from './stores/auth.js'
+export * from './stores/settings.js'
+export * from './boot/axios.js'
+
+
+import MainLayout from './layouts/MainLayout.vue'
+import AuthLayout from './layouts/AuthLayout.vue'
+export { MainLayout, AuthLayout}
+

package/layouts/AuthLayout.vue

@@ -0,0 +1,74 @@
+<template>
+  <q-layout view="hHh lpR fFf">
+    <q-header bordered :class="$q.dark.isActive ? 'bg-dark text-white' : 'bg-primary text-white'">
+      <q-toolbar class="no-wrap q-px-md">
+        <HeaderBrand />
+        <q-space />
+        <HeaderDarkModeToggle />
+        <HeaderFullScreen />
+        <HeaderLanguage />
+        <Servicos />
+      </q-toolbar>
+    </q-header>
+
+    <q-page-container class="">
+      <router-view :showing="Load.count === 0" />
+      <q-inner-loading :showing="Load.count !== 0">
+        <q-spinner-gears size="80px" color="primary" />
+      </q-inner-loading>
+    </q-page-container>
+
+    <Rodape />
+
+    <q-page-scroller position="bottom-right" :scroll-offset="50" :offset="[18, -10]">
+      <q-btn icon="keyboard_arrow_up" color="primary" round />
+    </q-page-scroller>
+  </q-layout>
+</template>
+
+<script>
+/* -------------------- IMPORT STORES -------------------- */
+
+import { AuthStore, LoadStore, UserStore } from '../stores/AuthStore'
+
+/* -------------------- IMPORT COMPONENTS -------------------- */
+import HeaderBrand from '../components/header/HeaderBrand.vue'
+import HeaderDarkModeToggle from '../components/header/HeaderDarkModeToggle.vue'
+import HeaderLanguage from '../components/header/HeaderLanguage.vue'
+import HeaderFullScreen from '../components/header/HeaderFullScreen.vue'
+import Servicos from '../components/header/HeaderServices.vue'
+import Rodape from '../components/footer/MainFooter.vue'
+
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  components: {
+    HeaderBrand,
+    HeaderDarkModeToggle,
+    HeaderLanguage,
+    HeaderFullScreen,
+    Servicos,
+    Rodape,
+  },
+  setup() {
+    const Auth = AuthStore()
+    const User = UserStore()
+    const Load = LoadStore()
+    return {
+      Auth,
+      User,
+      Load,
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+
+  mounted() {},
+
+  methods: {},
+})
+</script>
+
+<style></style>