Kaynaklar (Resources)

Resource, Olobase Admin tarafından yönetilebilen, yani created/read/updated/deleted gibi belirli bir sunucu varlığı anlamına gelir. Kaynaklar tüm bu CRUD işlemlerine izin veren geçerli bir API uç noktasına karşılık gelmelidir. Takip eden kod örneği, daha önce görüldüğü gibi Olobase Admin constructor metoduna gönderilmesi gereken beklenen yapının bir örneğini temsil eder:

src/resources/index.js

export default [
  {
    name: "users",
    icon: "mdi-account",
    label: "name",
    routes: ["list"],
    permissions: ["admin"],
  },
  {
    name: "userss",
    icon: "mdi-alien",
    label: "name",
    translatable: true,
    permissions: ["admin", "anotherrole"],
  },
  {
    name: "users-children",
    icon: "mdi-baby-carriage",
    label: "name",
    except: ["delete"],
  },
];

Resource Nesne Yapısı

Bir kaynak nesnesi bu yapıya uymalıdır:

Label

Label özelliği bir dize veya işlev alabilir ve varsayılan olarak label özelliğine eşittir. Bir kullanıcı kaynağının adı olarak, hedeflenen kaynağın geçerli bir özelliğini temsil eden basit durum için dize kullanın. Tam kaynak API nesnesini alan basit bir geri çağırma olan bir işlevin kullanılması, (r) => ${r.title} (${r.isbn}) gibi daha karmaşık özellik birleşimini döndürmenize olanak tanır.

Bu etiket, her CRUD sayfasını gösterme ve düzenlemenin yanı sıra tüm referans tabanlı alanlar ve girişler (VaReferenceField, VaReferenceArrayField, VaAutocompleteInput, VaSelectInput, VaRadioGroupInput) için varsayılan sayfa başlığı olarak kullanılacaktır.

Actions

Eylemler için listele / show / create / edit / delete arasında seçim yapmalısınız. Hiçbir eylem veya istisna ayarlanmadıysa, 5 işlemin tümü varsayılan olarak etkindir. Kaldırılan tüm eylemler tüm crud sayfalarına yansıtılacak ve Vue Router da buna göre uyarlanacaktır. Örneğin, ["show"] dışında bir ayar yaparsanız, rotayı gösterme devre dışı bırakılır ve ilgili kaynakla ilişkilendirilen tüm gösteri eylemleri (çoğunlukla düğmeler) devre dışı bırakılır.

Eylemleri Engellemek

API Uç Noktalarını Yeniden Kullanın

Aynı arka uç kaynağı API uç noktasını farklı kaynaklar için mükemmel bir şekilde yeniden kullanabilirsiniz. Yalnızca aktif kaynakları gösteren bir birinci grup crud sayfalarını ve yalnızca arşivlenmiş olanları gösteren ayrı bir ikinci crud sayfaları grubunu hayal edin. Bunun için api özelliğini kullanın. Kaynak deposu modülündeki API varsayılan temel yolunu geçersiz kılacaktır. Daha sonra src/resources/{name-1} ve src/resources/{name-2} içindeki her CRUD sayfası aynı API uç noktasını kullanacaktır.

Takip eden örneğe gözatın:

export default [
  {
    name: "users",
    icon: "mdi-account",
    label: "name",
    routes: ["list"],
    permissions: ["admin"],
  },
  {
    name: "archived-users",
    api: "users",
    icon: "mdi-account",
    label: "name",
    routes: ["list"],
    permissions: ["admin"],
  },
];

Yukarıdaki konfigürasyon ile archived-users kaynağı, users kaynağıyla aynı API uç noktalarını yeniden kullanabilecek.

Resource CRUD Sayfaları ve API Modülleri

Olobase Admin'in gerekli tüm CRUD rotalarını ve API eylem yapılarını yeniden oluşturması için yukarıdaki kaynak bilgileri temel olarak yeterlidir. Her CRUD rotası ${ResourceName}${Action} adlı bir bileşeni arar. Ve 4 eylem sayfası desteklenir: List, Show, Create ve Edit. Bu nedenle, users adı verilen belirli bir kaynak ve bir oluşturma rotası için Olobase Admin, UsersCreate sayfa bileşenini arar. Bulunamazsa 404 hata sayfasına geri döner. Bu yüzden tek yapmanız gereken, tüm CRUD kaynak sayfalarınızı bu bileşen adlandırma kuralını göz önünde bulundurarak kaydetmektir. Bu sıkıcı görevi kolaylaştırmak için, src/plugins/loader.js dosyası bu dosyaları içe aktararak src/resourcesdizini içindeki tüm .vue dosyalarını arar ve bunlara uygun bir bileşen adı vererek ana Vue örneğine otomatik olarak kaydeder. Bu nedenle sadece bir kaynak klasörü içindeki her eylem için kaynağın adını alacak bir .vue bileşeni oluşturmanız yeterlidir.

Users kaynaklarına bir örnek:

resources
├── users-children (Kaynak bilgisinin veya adının kebap case formatı)
│   ├── Create.vue
│   ├── Edit.vue
│   ├── Form.vue (Hem Create.vue hem de Edit.vue görünümleri için yeniden kullanılan form bileşeni)
│   ├── List.vue
│   └── Show.vue
│
├── users (Bunun için doğrudan listeleme özelliğini kullandığımız için burada Create.vue veya Edit.vue dosyalarına gerek yok)
│   ├── Form.vue
│   ├── List.vue
│   └── Show.vue
│
└── index.js (Yukarıda görüldüğü gibi kaynaklar dosya tanımlayıcısı)

Bileşik Adı

Aksiyon Eşleme

Devam ettirilecek bazı hızlı tablolar (örnek olarak users-children kaynak adını alıyoruz).

Aksiyon Rotası ve API Eşleme

Aksiyon Bileşen Eşleme

Enjekte Edilen Özellikler (Props)

Kolay yeniden kullanım için her CRUD sayfasına aşağıdaki aksesuarlar eklenir:

Link Yardımcıları

Uygulamanıza, özellikle kenar çubuğuna, kaynak sayfalarını listelemeye veya oluşturmaya işaret eden bazı bağlantılar yerleştirmeniz gerekebilir. Bunun için, sizin için bu formatı oluşturacak getResourceLink() ve getResourceLinks() yardımcı metotlarını kullanabilirsiniz. Ayrıca bu yardımcılar, bu kaynağın bu özel eylemi için mevcut kullanıcıların izinlerini test edecek ve başarısız olursa false değerini döndürecektir.

Takip eden kod örneği, kaynak simgesinin yanı sıra yerelleştirilmiş kaynak etiketiyle birlikte kullanıcı sayfası listesine bir bağlantı nesnesi döndürecektir. Bu işlevi, bir bağlantı nesnesi olduğu için geçerli herhangi bir layout menüsü desteğine yerleştirmeniz yeterlidir. Yanlış bir menü oluşturulmayacağı için izinlerle uğraşmanıza veya null testi eklemenize gerek yok.

[
  //...
  this.admin.getResourceLink("users"),
  //...
]

Aynı anda birçok kaynak bağlantısı oluşturmak için getResourceLinks()'i kullanın. Bu metot yalnızca kullanıcıların kaynak eylemi izinlerine sahip olduğu bağlantılar getirecektir.

[
  //...
  ...this.admin.getResourceLinks([
    "publishers",
    "authors",
    "books",
    "reviews",
  ]),
  //...
]

Bu yardımcılar için, oluşturulan varsayılanı geçersiz kılacak kaynak adı yerine tam bağlantı nesnesini iletebilirsiniz. Örneğin bu kod, kullanıcı oluşturma sayfasına artı simgesi ve metin olarak "Create new user" içeren yeni bir bağlantı oluşturacaktır:

[
  //...
  this.admin.getResourceLink({ name: "users", action: "create", icon: "mdi-plus", text: "Create new user" }),
  //...
]

The getResourceLinks() helper also supports a hierarchical menu in the following form:

[
  //...
  ...admin.getResourceLinks([
    {
      icon: "mdi-globe-model",
      text: "Publishers",
      expanded: true,
      children: [
        admin.getResourceLink({ name: "publishers", icon: "mdi-view-list", text: "List" }),
        admin.getResourceLink({ name: "publishers", icon: "mdi-plus", text: "Create" }),
      ],
    },
    "authors",
    "books",
    "reviews",
  ]),
  //...
]