Admin Layout

Olobase Admin iskeletini indridiğinizde projeniz önceden oluşturulmuş varsayılan admin layout'u ile başlatılacaktır. Bu layout'un .vue şablonu src/layout/Admin.vue dosyasında bulunur ve src/routes/admin.js içindeki kimlik doğrulamalı rotaya aşağıdaki şekilde bağlanır:

src/router/admin.js

import AdminLayout from "@/layouts/Admin";
//...
export default {
  path: "/",
  name: "home",
  redirect: "/dashboard",
  component: AdminLayout,
  meta: {
    title: i18n.t("routes.home"),
  },
  children: [
    //...
  ],
};

Main Layout

Her bölge için bir slota sahip özelleştirilebilir ana düzeni VaLayout olarak adlandırılmıştır.

Menü Bağlantıları

Aşağıdaki bağlantılar bölümüne bakın.

AppBar

Varsayılan VAppBar uygulama başlığını, başlık menülerini, doğrudan kaynak oluşturma bağlantılarını, genel yenileme eylemini, profil menüsünü içerir. Profil kullanıcısı açılır menüsü misafir modunda görünmez.

Kaynak Bağlantıları

Mevcut kullanıcının izinleri varsa, eylem bağlantıları oluşturma kayıtlı kaynaklarınızdan otomatik olarak oluşturulacaktır.

Yeniden Yükleme Tuşu

Yeniden yükleme tuşu, veri sağlayıcınızdan (örneğin getList, getOne veya getMany) gelen her listeleme çağrısını dinamik olarak yeniler. Manuel bir tıklama ile içerik yeni bir listeleme çağrısı gönderir. Bu tuş sadece listeleme sayfalarında gözükür.

VaAppBar:sidebar

Vuetify VNavigationDrawer bileşeni ile hiyerarşik menüye sahip varsayılan özelleştirilebilir bölümdür. Bu bölüm VaAppBar bileşeni içerisinde yer alır.

packages/admin/src/components/layout/AppBar.vue

src/layout/Admin.vue

<template>
  <v-app>
    <va-layout 
      v-if="authenticatedUser"
    >
      <template #appbar>
        <va-app-bar
          :key="getCurrentLocale"
          color="primary"
          density="compact"
          :header-menu="getHeaderMenu"
          sidebar-color="white"
        >
          <template v-slot:logo>
            <div class="mb-1" style="letter-spacing: 1px;">logo</div>
          </template>

          <template v-slot:avatar>
            <v-avatar v-if="avatarExists" size="24px">
              <v-img 
                :src="getAvatar"
                alt="Avatar"
              ></v-img>
            </v-avatar>
            <v-icon v-else>mdi-account-circle</v-icon>
          </template>

          <template v-slot:profile>
            <v-card min-width="300">
              <v-list nav>
                <v-list-item 
                   v-if="getFullname"
                  :prepend-avatar="getAvatar"
                >
                  <div class="list-item-content">
                    <v-list-item-title class="title">{{ getFullname }}</v-list-item-title>
                    <v-list-item-subtitle v-if="getEmail">{{ getEmail }}</v-list-item-subtitle>
                  </div>
                </v-list-item>
                <v-divider></v-divider>
                <v-card flat>
                  <v-card-text style="padding:9px">
                    <v-list-item
                      v-for="(item, index) in getProfileMenu"
                      :key="index"
                      link
                      :to="item.link"
                      @click="item.logout ? logout() : null"
                      class=" mt-2"
                    >
                      <template v-slot:prepend>
                        <v-icon>{{ item.icon }}</v-icon>
                      </template>
                      <v-list-item-title>{{ item.text }}</v-list-item-title>
                    </v-list-item>
                  </v-card-text>
                </v-card>
              </v-list>
            </v-card>
          </template>
        </va-app-bar>
      </template>

      <template #header>
        <va-breadcrumbs />
      </template>

      <template #aside>
        <va-aside />
      </template>

      <template #footer>
        <va-footer 
          :key="getCurrentLocale" 
          :menu="getFooterMenu"
        >
          <span style="font-size:13px">&copy; 2023</span>
        </va-footer>
      </template>
    </va-layout>
  </v-app>
</template>

<script>
import isEmpty from "lodash/isEmpty"
import { useDisplay } from "vuetify";
import { mapActions } from "vuex";
import Trans from "@/i18n/translation";

export default {
  name: "App",
  inject: ["admin"],
  data() {
    return {
      authenticatedUser: null,
    };
  },
  async created() {
    /**
     * Set default locale
     */
    const lang = Trans.guessDefaultLocale();
    if (lang && Trans.supportedLocales.includes(lang)) { // assign browser language
      await Trans.switchLanguage(lang);
    }
    /**
     * Check user is authenticated
     */
    this.authenticatedUser = await this.checkAuth();
    if (! this.authenticatedUser) {
      this.$router.push({name: "login"});
    } else {
      // 
      // Please do not remove it, it periodically updates the session lifetime.
      // Thus, as long as the user's browser is open, the user logged in to the application,
      // otherwise the session will be closed when the ttl period expires.
      // 
      this.admin.http.post('/auth/session', { update: 1 }); 
    }
  },
  computed: {
    avatarExists() {
      let base64Image = this.$store.getters["auth/getAvatar"];
      if (base64Image == "undefined" || base64Image == "null" || isEmpty(base64Image)) { 
        return false;
      }
      return true;
    },
    getAvatar() {
      let base64Image = this.$store.getters["auth/getAvatar"]; 
      if (base64Image == "undefined" || base64Image == "null" || isEmpty(base64Image)) { 
        return this.admin.getConfig().avatar.base64; // default avatar image
      }
      return base64Image;
    },
    getEmail() {
      return this.$store.getters["auth/getEmail"];
    },
    getFullname() {
      return this.$store.getters["auth/getFullname"];
    },
    getCurrentLocale() {
      return this.$store.getters[`getLocale`];
    },
    getHeaderMenu() {
      return [];
    },
    getProfileMenu() {
      return [
        {
          icon: "mdi-account",
          text:  this.$t("va.account"),
          link: "/account",
        },
        {
          icon: "mdi-key-variant",
          text: this.$t("va.changePassword"),
          link: "/password",
        },
        {
          icon: "mdi-logout",
          text: this.$t("va.logout"),
          logout: true,
        },
      ];
    },
    getFooterMenu() {
      return [
        {
          href: "https://oloma.dev/end-user-license-agreement",
          text: this.$t("menu.terms"),
        },
      ]
    }
  },
  methods: {
    ...mapActions({
      checkAuth: "auth/checkAuth",
    }),
    logout() {
      this.$store.dispatch("auth/logout");
    },
  },
};</script>

VaAppBar:logo

VaAppBar layout logo ve navbar-logo olmak üzere iki ayrı slot içerisinden logo eklemenize izin verir.

<template v-slot:logo>
  <div class="mb-1" style="letter-spacing: 1px;">logo</div>
</template>

Header bölümündeki logo ya alternatif olarak navbar-logo slotu ile navigasyon üzerinde de logo ekleyebilirsiniz.

<template v-slot:navbar-logo>
  <div class="navbar-logo ml-14">
    <img src="/src/assets/logo/navbar-logo.png" border="0" />
  </div>
</template>

VaAppBar:header-buttons

VaAppBar layout header-buttons slotunu kullanarak kendi tuşlarınızı oluşturabilirsiniz.

<template v-slot:header-buttons>
  <v-btn
    icon
    small
  >
    <v-badge :color="yellow" dot>
      <v-icon>mdi-cart-outline</v-icon>
    </v-badge>
  </v-btn>
  <v-btn v-if="!authenticatedUser" :to="{ name: 'login' }">{{ $t("menu.login") }}</v-btn>
</template>

Footer

Bu alan VFooter bileşeni içinde bazı kurumsal bilgilerin gösterilmesini sağlayan altbilgi alanıdır.

Slotlar

Breadcrumbs

Breadcrumb'lar için v-breadcrumbs bileşenini kullananarak geçerli rotadan otomatik olarak hiyerarşik bağlantılar oluşturur.

Aside

Bağlamsallaştırılmış bazı ek bilgiler koyduğunuz özelleştirilebilir alandır. Herhangi bir bağlamda, herhangi bir yerden içerik entegrasyonu için VaAsideLayout bileşeni kullanılır.

olobase-demo-ui/src/resources/Companies/List.vue

<template>
  <div>
    <va-aside-layout 
      :title="asideTitle"
    >
      <companies-form
        v-if="action !== 'show'"
        :id="id"
        :item="item"
        @saved="onSaved"
      ></companies-form>
    </va-aside-layout>
    <va-list 
      class="mb-0" 
      @action="onAction"
      :filters="filters"
      :fields="fields"
      :items-per-page="50"
      disable-create-redirect
    >
      <va-data-table-server
        row-show
        disable-show
        disable-create-redirect
        disable-edit-redirect
        @item-action="onAction"
      >
      </va-data-table-server>
    </va-list>
   </div>
</template>

Daha fazla detay için demo uygulamamızdaki companies modülüne gözatın.

Menü Bağlantıları

Gezinmeyi destekleyen bileşenlere yerleştirilebilecek tüm gezinme menüleri, bir bağlantıyı temsil eden basit bir nesne dizisidir. Gezinmeyi destekleyen bileşenler; header, profile, sidebar ve footer menü olmak üzere toplam 4 farklı bileşenden oluşur.

Aşağıdaki gibi basit bir menü dizisini bu bileşenlere göndererek menüler oluşturulur.

[
  {
    icon: "mdi-account",
    text: this.$t("menu.profile"),
    link: "/profile",
  },
  {
    icon: "mdi-settings",
    text: this.$t("menu.settings"),
    link: "/settings",
  },
]

Sidebar menu örneği:

src/_nav.js

export default  {

  build: async function(t, admin) {

    return [
      {
        icon: "mdi-view-dashboard-outline",
        text: t("menu.dashboard"),
        link: "/dashboard",
      },
      {
        icon: "mdi-cart-variant",
        text: t("menu.plans"),
        children: [
          {
            icon: "circle",
            text: t("menu.subscriptions"),
            link: "/subscriptions",
          },
          {
            icon: "circle",
            text: t("menu.services"),
            link: "/services",
          },
        ]
      },
    ];

  } // end func

} // end class

Menüyü yetkilere göre dinamik olarak oluşturmak için ilgili belgeye gözatın.

Nesne bağlantı yapısı: