Laravel 9 / InertiaJS / Vue || Correctly Configuring Accessor to Translate Table Value to String

287 Views Asked by At

I am new to Laravel / Inertia / Vue but not necessarily to PHP or JS, so forgive me if this isn't the most informed question.

I've asked a similar question before, but this is a new attempt to rectify it using an Accessor on the attribute so I felt like starting a new conversation. It was suggested I use an enumerator but I think an accessor on the model might be the most fitting way to handle this. Feel free to correct me if I'm wrong.

Essentially, I have a field in a DB called StatusID (I can't change this) but it's an integer value. I want it to be translated to a string value when it's accessed by Eloquent. I don't care about it being an integer in my controller, but I just want it to enter Inertia as a string value rather than an int.

Controller

<?php

namespace App\Http\Controllers;

use Inertia\Inertia;
use Illuminate\Http\Request;
use App\Models\eRequester\Requisition;
use App\Models\eRequester\ProjectManager;

class RequisitionController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return Inertia::render('Requisition/Index',[
                'requisitions' => Requisition::with(
                    'lines:RequisitionLineID,ItemID,Description,ProjectNumber,RequisitionID',
                    'owner:UserID,UserName,FirstName,LastName')
                    ->latest()
                    ->where('StatusID','!=','2')
                    ->limit(15)
                    ->select('RequisitionID','Title','UserID','StatusID') // << This value, StatusID
                    ->get(),
                'projectmanagers' => ProjectManager::where('AttributeID','siica3')
                    ->orWhere('AttributeID','ckwca7')
                    ->orWhere('AttributeID','orica3')
                    ->get(),
                'companies' => [
                    ['CompanyID' => '3', 'CompanyName' => 'Spitzer'],
                    ['CompanyID' => '2', 'CompanyName' => 'Curtis Kelly'],
                    ['CompanyID' => '4', 'CompanyName' => 'Orizon']],
            ]);
    }

}

Model (function on the model)

  protected function StatusID(): Attribute
    {
        $statusDescription = [
            "0" => "Incomplete",
            "1" => "Unsubmitted",
            "2" => "Cancelled",
            "3" => "Rejected",
            "4" => "Waiting",
            "5" => "Request Info",
            "6" => "Approved",
            "7" => "Posted",
            "8" => "Partially Received",
            "9" => "Closed",
            "10" => "Require Change",
            "11" => "Resubmitted for Post Approval Routing",
            "12" => "Edited (Post Approval)",
            "13" => "Fully Received",
            "14" => "Posted - On Hold"
        ];

        return Attribute::make(
            get: fn ($value) => $statusDescription[$value],
        );
        
    }

Vue

  <div class="p-4 border-2 mb-4 rounded-lg">
        <div class="text-white font-bold uppercase flex justify-between">
            <span class="">
                
            <a target="_BLANK" :href="'{redacted}/req/review.aspx?reqid=' + req.RequisitionID">
                <button class="bg-white hover:bg-blue-200 text-black font-bold py-0 px-2 mr-2 mb-2 rounded transition-all">
                    {{ req.RequisitionID }}
                </button></a>
                    {{ req.Title }}
            </span>
            <span>
                {{ req.StatusID }}
            </span>

I've tried several different configurations to have it hit this accessor but I'm kind of poking around in the dark.

From what I understand, when it hits Vue it should already be translated to a string, which it isn't at the moment (image)

enter image description here

What could I be doing wrong? I have a feeling it might be something to do with the StatusID camel case resolving to something like status_id (which is incorrect) and I don't know how to manually set that value if it's protected, etc.

Also, feel free to yell at me if I should have asked this question as an addendum on my previous question. I rarely ask questions on here and I don't want to be ruffling feathers.

Thanks, Alex

0

There are 0 best solutions below