Nova 4 Custom Resource Tool

Nova araçlarına benzer şekilde, kaynak araçları da inanılmaz derecede özelleştirilebilir ve esas olarak, tamamen sizin kontrolünüz altında olan ve işlemlerinizi kolaylaştıran tek dosyalı bir Vue bileşenine sahiptir. Bu sayede, uygulamanızı geliştirirken, ihtiyaç duyduğunuz özellikler ve işlevler üzerinde tam kontrol sağlar ve iş akışlarınızı daha verimli hale getirir. Bu, geliştiricilerin daha hızlı ve daha esnek şekilde çalışmasına imkan tanır ve projelerin daha başarılı sonuçlar elde etmesine yardımcı olur.

php artisan nova:resource-tool netz/user-custom-view

nova-components/UserCustomView/resources/js/components/Tool.vue

<template>
  <div class="overflow-hidden overflow-x-auto relative">
    <table
      v-if="users.length > 0"
      class="w-full divide-y divide-gray-100 dark:divide-gray-700"
      data-testid="user-table"
    >
      <thead>
        <tr class="divide-x divide-gray-100 dark:divide-gray-700">
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
            ID
          </th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
            Name
          </th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
            Email
          </th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
        <tr
          v-for="(user, index) in users"
          :key="`${user.id}-items-${index}`"
          class="divide-x divide-gray-100 dark:divide-gray-700"
        >
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
            {{ user.id }}
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
            {{ user.name }}
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
            {{ user.email }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>


<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
    };
  },
  mounted() {
    this.getUsers();
  },
  methods: {
    async getUsers() {
      try {
        const response = await axios.get('/nova-api/users');
        this.users = response.data.resources.map((resource) => {
          return {
            id: resource.fields.find(field => field.attribute === 'id').value,
            name: resource.fields.find(field => field.attribute === 'name').value,
            email: resource.fields.find(field => field.attribute === 'email').value,
          };
        });
      } catch (error) {
        console.error('Error fetching customers:', error);
      }
    },
  },
};
</script>

app/Nova/User.php

public function fields(NovaRequest $request)
    {
        return [
            ID::make()->sortable(),

            Gravatar::make()->maxWidth(50),

            Text::make('Name'),

            Text::make('Email')
                ->sortable()
                ->rules('required', 'email', 'max:254')
                ->creationRules('unique:users,email')
                ->updateRules('unique:users,email,{{resourceId}}'),

            Password::make('Password')
                ->onlyOnForms()
                ->creationRules('required', Rules\Password::defaults())
                ->updateRules('nullable', Rules\Password::defaults()),

            UserCustomView::make(),
        ];
    }