inertia.js(react) + survey.js - 5: 細々としたところとか設定変更とか

2023年10月8日 09:58

breadcrumbの設定

今せっかくbreadcrumbの機能があるのに何も設定されていないので、やってみよう。

Breadcrumbs::for('surveys.index', function(BreadcrumbTrail $trail)
{
    $trail->push(__('Surveys'), route('surveys.index'));
});
Breadcrumbs::for('surveys.create', function(BreadcrumbTrail $trail)
{
    $trail->parent('surveys.index');
    $trail->push(__('Create'), route('surveys.create'));
});

続いてプレビュー

Breadcrumbs::for('surveys.show', function(BreadcrumbTrail $trail, Survey $survey)
{
    $trail->parent('surveys.index');
    $trail->push(__('Preview'), route('surveys.show', $survey));
});

surveyのタイトルを与える

まあこれは単純にDBのタイトルを与えておけばよさそう。

resources/js/Pages/Surveys/Show.jsx

  return (
    <AuthenticatedLayout
      user={auth.user}
      header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">{surveyModel.title}</h2>}
    >
      <Head title={surveyModel.title} />

日本語にする

このへんやね。これは単純にbackendの出力を __() で囲ってるだけ

    public function previewStore(Request $request, Survey $survey): RedirectResponse
    {
        $request->session()->put('preview_data', $request->all());

        return redirect(route('surveys.show', $survey))
            ->with(['success' => __('Preview data received')]);
    }
    public function previewDestroy(Request $request, Survey $survey)
    {
        $request->session()->forget('preview_data');

        return redirect(route('surveys.show', $survey))
            ->with(['success' => __('Preview data destroyed')]);
    }

lang/ja.json に定義を追加

    "Delete Preview Data": "プレビューデーターを削除する",

    "Preview data received": "プレビューデーターを受け取りました",
    "Preview data destroyed": "プレビューデーターを削除しました",

設定の変更

ちゅーかこれはまんま基本的にはeditである。なんでそのようにrouteを向けとこう。

<SecondaryButton href={route('surveys.edit', survey.id)}>
  <VscSettingsGear className="mr-2" /> {t('Settings')}
</SecondaryButton>

SecondaryButtonのコンポーネントもhrefの場合はaタグというか実際にはLinkにするようにしておいた

import { Link } from '@inertiajs/react';

export default function SecondaryButton({
  type = 'button', className = '', disabled, children, href, ...props
}) {
  const buttonClass = `inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${disabled ? 'opacity-25 cursor-not-allowed' : ''} ${className}`;

  const handleClick = (e) => {
    if (disabled) {
      e.preventDefault();
    }
  };

  if (href) {
    return (
      <Link
        href={href}
        className={buttonClass}
        onClick={handleClick}
        {...props}
      >
        {children}
      </Link>
    );
  }

  return (
    <button
      {...props}
      type={type}
      className={buttonClass}
      disabled={disabled}
      onClick={handleClick}
    >
      {children}
    </button>
  );
}

SurveyController@edit

    public function edit(Survey $survey): Response
    {
        return Inertia::render('Surveys/Edit', [
            'survey' => $survey,
        ]);
    }

Editでは質問セットを変更することはないので、これでok

で、まずはほぼほほCreateをコピってok

% cp resources/js/Pages/Surveys/Create.jsx resources/js/Pages/Surveys/Edit.jsx

これを改変していく

import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import {
  Head, useForm, usePage,
} from '@inertiajs/react';
import { useLaravelReactI18n } from 'laravel-react-i18n';

import InputError from '@/Components/InputError';
import InputLabel from '@/Components/InputLabel';
import PrimaryButton from '@/Components/PrimaryButton';
import TextInput from '@/Components/TextInput';

export default function SurveyEdit({ auth, survey }) {
  const { t } = useLaravelReactI18n();

  const {
    data, setData, put, errors, processing, recentlySuccessful,
  } = useForm({
    title: survey.title,
    description: survey.description,
  });

  const updateSetting = (key, value) => {
    setData('settings', {
      ...data.settings,
      [key]: value,
    });
  };

  const submit = (e) => {
    e.preventDefault();

    put(route('surveys.update', survey.id));
  };

  return (
    <AuthenticatedLayout
      user={auth.user}
      header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">{t('Settings')}</h2>}
    >
      <Head title={t('Settings')} />
      <div className="py-12">
        <div className="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
          <div className="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
            <div>
              <div>
                <InputLabel htmlFor="title" value={t('Title')} />

                <TextInput
                  id="title"
                  className="mt-1 block w-full"
                  value={data.title}
                  onChange={(e) => setData('title', e.target.value)}
                  onSubmit={submit}
                />

                <InputError className="mt-2" message={errors.title} />
              </div>

              <div className="mt-3">
                <InputLabel htmlFor="description" value={t('Description')} />

                <TextInput
                  id="description"
                  className="mt-1 block w-full"
                  value={data.description}
                  onChange={(e) => setData('description', e.target.value)}
                  onSubmit={submit}
                />

                <InputError className="mt-2" message={errors.description} />
              </div>


              <form onSubmit={submit} className="mt-6 space-y-6">
                <div className="flex items-center gap-4">
                  <PrimaryButton disabled={processing}>{t('Save')}</PrimaryButton>
                </div>
              </form>
            </div>

          </div>
        </div>
      </div>
    </AuthenticatedLayout>

  );
}

Controller

    public function update(Request $request, Survey $survey): RedirectResponse
    {
        $data = $request->all();
        $survey->update($data);
        return redirect(route('surveys.index', $survey))
            ->with(['success' => __('Survey Settings Updated')]);

    }

という具合で変更できる。

次回

次回は設定の詳細を変更できるようにしよう。