Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

İnertiajs reload sorunu

programmer1453

Merhabalar, İnertia js te Kullanıcı ekleme veya güncellemeden sonra sayfayı tekrar yüklemek istiyorum ama tekrar yüklenmiyor, yardımcı olabilir misiniz ?
İnertia js:

const saveUser = () => {
  if (form.id) {
    form.put(route("user.update", { id: form.id }));
  } else {
    form.post(route("user.store"));
  }
  closeModal();
};

Store

 try {
            DB::beginTransaction();
            if ($request->hasFile('photo')) {
                $content = $request->photo;

                $extension = $content->getClientOriginalExtension();
                $uuid = Str::uuid();
                $fileName = $uuid . '.' . $extension;

                $uploaded_file = Storage::putFileAs('user', $content, $fileName);
            }
            $user = User::create([
                'email' => $request->email,
                'name' => $request->name,
                'password' => Hash::make($request->password),
                'photo' => isset($uploaded_file) ? $uploaded_file : null
            ]);
            $role = Role::find($request->role);
            $user->assignRole($role->name);
            DB::commit();
            return redirect()->route('user.index')->with('message', 'About Me info updated');
        } catch (Exception $e) {
            DB::rollback();
        }

Update

try {
            DB::beginTransaction();
            $user = User::find($id);
            if ($user->photo && Storage::exists($user->photo)) {
                Storage::delete($user->photo);
            }
            if ($request->hasFile('photo')) {
                $content = $request->photo;

                $extension = $content->getClientOriginalExtension();
                $uuid = Str::uuid();
                $fileName = $uuid . '.' . $extension;

                $uploaded_file = Storage::putFileAs('user', $content, $fileName);
            }
            $user = User::find($id);
            $user->update([
                'email' => $request->email,
                'name' => $request->name,
                'password' => Hash::make($request->password),
                'photo' => isset($uploaded_file) ? $uploaded_file : null
            ]);
            $role = Role::find($request->role);
            $user->assignRole($role->name);
            DB::commit();
            return Redirect::route('user.index')->with(['message' => 'New user successfully created']);
        } catch (Exception $e) {
            DB::rollback();
        }

aghabalaguluzade

programmer1453 Buna bakabilirsiniz
https://inertiajs.com/partial-reloads

mgsmus

programmer1453 Tekrar yüklenmeme olayını tam açıklamamışsınız ama belki sayfa yükleniyordur ama mesaj gözükmüyordur, o yüzden yüklenmediğini düşünüyor olabilirsiniz.

programmer1453

mgsmus
Bir kullanıcı eklendikten sonra tabloya yeni veri dolmuyor, sayfayı manuel yenileyince veriyi görüyorum

aghabalaguluzade

programmer1453 vue tarafını tümüyle paylaşa bilirmisiniz

programmer1453

aghabalaguluzade

<script setup>
import { Head, Link, useForm, usePage, router } from "@inertiajs/vue3";
import axios from "axios";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import SearchArea from "@/Components/SearchArea.vue";
import Modal from "@/Components/Modal.vue";
import Table from "@/Components/Table.vue";
import Pagination from "@/Components/Pagination.vue";
import { ref, reactive } from "vue";
import { computed } from "vue";
import { __, useCan } from "@/Modules/general";
const showModal = ref(false);

const roles = reactive(usePage().props.roles);
const users = reactive(usePage().props.users);

const search = (payload) => {
  router.get(route("user.index"), {
    search: payload,
  });
  console.log(payload);
};
const saveUser = () => {
  if (form.id) {
    form.put(route("user.update", { id: form.id }));
  } else {
    form.post(route("user.store"));
  }
  closeModal();
  router.reload({ only: ['users'] })
};

const newItem = () => {
  form.reset();
  showModal.value = true;
};
const closeModal = () => {
  form.reset();
  showModal.value = false;
};

const form = useForm({
  id: null,
  email: "",
  name: "",
  password: "",
  photo: "",
  role: "",
});

const fields = [
  { key: "id", name: __("Id") },
  { key: "photo", name: __("Fotoğraf") },
  { key: "name", name: __("Adı") },
  { key: "email", name: __("E-Posta") },
  { key: "role", name: __("Rolü") },
];
const formatedItems = computed(() => {
  let items = [];
  users.data.forEach((item, index) => {
    items.push({
      id: item.id,
      name: item.name,
      photo: item.photo,
      email: item.email,
      role: item.roles.map((role) => role.name).join(", "),
    });
  });
  return items;
});
const editUser = (payload) => {
  form.reset();
  axios
    .post(route("user.show"), {
      id: payload,
    })
    .then((response) => {
      let data = response.data.data;
      form.id = data.id;
      form.photo = data.photo;
      form.name = data.name;
      form.photo = data.photo;
      form.email = data.email;
      form.role = data.roles[0].id;
      showModal.value = true;
    });
};
const deleteUser = (payload) => {
  router.delete(route("user.delete", { id: payload }));
};
</script>

<template>
  <AuthenticatedLayout
    :title="__('Kullanıcılar')"
    :class="{ 'blur-background': showModal }"
  >
    <Head :title="__('Kullanıcılar')" />
    <div class="container-fluid">
      <SearchArea
        @search="search($event)"
        @newItem="newItem()"
        :new-item-button-text="__('Kullanıcı Ekle')"
      />
      <Table
        :fields="fields"
        :items.sync="formatedItems"
        :canDelete="'delete user'"
        :canEdit="'edit user'"
        @edit="editUser($event)"
        @delete="deleteUser($event)"
      >
      </Table>
      <Pagination :links="users.links" />
    </div>
    <Modal :show.sync="showModal" @save="saveUser()" @close="closeModal()">
      <form submit.prevent="submitUser">
        <div class="col-12 text-center d-flex justify-content-center" v-if="form.photo">
          <img :src="form.photo" alt="image" class="img-fluid avatar-xl rounded" />
        </div>
        <div class="mb-3">
          <label for="example-fileinput" class="form-label">{{ __("Fotoğraf") }}</label>
          <input
            @input:change="form.photo"
            required
            type="file"
            id="example-fileinput"
            class="form-control"
          />
        </div>
        <div class="mb-3">
          <label for="name" class="form-label">{{ __("Adı") }}</label>
          <input
            class="form-control"
            type="text"
            v-model="form.name"
            required
            id="name"
          />
          <InputError class="mt-2" :message="form.errors.name" />
        </div>
        <div class="mb-3">
          <label for="emailaddress" class="form-label">{{ __("E Posta Adresi") }}</label>
          <input
            v-model="form.email"
            class="form-control"
            type="email"
            id="emailaddress"
            required
          />
          <InputError class="mt-2" :message="form.errors.email" />
        </div>

        <div class="mb-3">
          <label for="password" class="form-label">{{ __("Şifre") }}</label>
          <input
            class="form-control"
            type="password"
            v-model="form.password"
            required
            id="password"
          />
          <InputError class="mt-2" :message="form.errors.password" />
        </div>
        <div class="mb-3">
          <label for="example-select" class="form-label">{{ __("Rolü") }}</label>
          <select
            v-model="form.role"
            class="form-select"
            id="example-select"
            required
            name="role"
          >
            <option v-for="role in roles" :value="role.id">{{ role.name }}</option>
          </select>
        </div>
      </form>
    </Modal>
  </AuthenticatedLayout>
</template>

aghabalaguluzade

programmer1453

@submit.prevent="submitUser"

kullanın

const form = useForm({
  id: null,
  email: "",
  name: "",
  password: "",
  photo: "",
  role: "",
});

router.reload({
  only: ["users"],
  preserveState: true,
});

ayrıca bunu yukarı çıkartın. Başka bir şey gelmedi aklıma.

programmer1453

aghabalaguluzade
Maalesef olmadı

programmer1453

aghabalaguluzade konsol > ağ da istek atıldığını görüyorum ama sayfada herhangi bir değişiklik olmuyor

aghabalaguluzade

programmer1453 Aslında çalışması gerek

                   return redirect()->route('users')->with('success', 'User Created');

let submit = () => {
        form.post("/users");
    };

son olarak link olarak verin belki routeta problem yaşıyordur.

Ayrıca store da

            return redirect()->route('user.index')->with(['message' => 'New user successfully created']);

yazın

programmer1453

aghabalaguluzade
Sorun
const users = ref(usePage().props.users); buranın güncellenmemesi

const formatedItems = computed(() => {
  let items = [];
  users.value.forEach((item, index) => {
    items.push({
      id: item.id,
      name: item.name,
      photo: item.photo,
      email: item.email,
      role: item.roles.map((role) => role.name).join(", "),
    });
  });
  return items;
});

bu yapıdan

const formatedItems = computed(() => {
  let items = [];
  usePage().props.users.data.forEach((item, index) => {
    items.push({
      id: item.id,
      name: item.name,
      photo: item.photo,
      email: item.email,
      role: item.roles.map((role) => role.name).join(", "),
    });
  });
  return items;
});

buna çevirince tabloda ki veriler güncellendi