TomatoPHP
Join CommunityGitHubDiscord
  • ๐Ÿš€Overview
  • ๐Ÿ…Support
  • ๐ŸคContributing
  • ๐Ÿ›ฃ๏ธScreenshots
  • Get Started
    • ๐Ÿ”ฅEnvironment Setup
      • ๐Ÿ’ฟConfiguring the server
      • ๐Ÿ“กInstall Valet
      • ๐ŸŽŸ๏ธInstall PHPMyAdmin
    • ๐Ÿš€Install
    • โœจStart Your First CRUD
  • Tomato Admin
    • ๐Ÿš€Get Started
    • ๐Ÿง Install
    • ๐Ÿ›—Generate CRUD
    • ๐Ÿ‘“Slots
    • ๐ŸŒ‰Widgets
    • ๐Ÿ“–Menus
    • ๐Ÿ”Requests
      • ๐Ÿ”Index Request
      • ๐Ÿ”JSON Request
      • ๐Ÿ”Get Request
      • ๐Ÿ”Store Request
      • ๐Ÿ”Update Request
      • ๐Ÿ”Destroy Request
    • ๐ŸŽนInputs
      • ๐Ÿ”†Rich Text Editor
      • ๐Ÿ“žPhone Editor
      • ๐Ÿ–Œ๏ธColor Switcher
      • ๐Ÿ”Inputs Repeater
      • ๐Ÿ’งDraggable
      • ๐Ÿ‘จโ€๐Ÿ’ปCode Editor
      • โšกSelect Input
      • ๐Ÿ”šSubmit
      • ๐ŸงพItems
      • ๐Ÿ”Search
      • ๐ŸšIcon
    • ๐Ÿ—œ๏ธComponents
      • ๐Ÿ”—Relation Manager
      • ๐ŸงŠContainer
      • ๐Ÿ‘๏ธView Row
      • ๐ŸŒ‰Widget
      • ๐Ÿ”˜Button
      • ๐Ÿ“–Menu
      • ๐Ÿ‘พTooltip
      • ยฉ๏ธยฉ๏ธ Clipboard
      • ๐Ÿ›ฃ๏ธSlider
      • โ„น๏ธAction Buttons
      • ๐Ÿ…Application Logo
      • ๐Ÿ”ฝDropdown
      • โธ๏ธPaginator
    • ๐Ÿ“‘Table
      • โœ…Bulk Actions
      • ๐Ÿ—„๏ธFilters
      • ๐Ÿฆ˜Slots
    • ๐Ÿ”“Jetstream & Fortify
    • ๐Ÿ†•Upgrade
  • Tomato PHP
    • ๐Ÿš€Get Started
    • ๐ŸŽนUse
  • Plugins
    • ๐Ÿ”ŒGet Started
    • ๐Ÿ—๏ธCreate New Plugin
    • ๐Ÿ”“Tomato Roles
      • ๐Ÿ“Use
      • ๐Ÿ”Developer Gate
      • ๐Ÿ—๏ธRegister Permission
      • ๐Ÿ’ฝConfig
    • ๐ŸŒŽTomato Locations
      • ๐Ÿ”APIs
    • โš™๏ธTomato Settings
      • ๐Ÿ“Use
      • ๐Ÿ’ฝConfig
    • ๐Ÿ””Tomato Notifications
      • ๐Ÿ“Use
      • ๐Ÿ—๏ธNotification Service
      • ๐Ÿ’ฝConfig
      • ๐Ÿ”APIs
    • ๐Ÿ”ทTomato Category
      • ๐Ÿ“Use
      • ๐Ÿ’ฝConfig
      • ๐Ÿ”APIs
    • โœจTomato Forms
      • ๐Ÿ“Use
      • ๐Ÿ’ฝConfig
      • ๐Ÿ”APIs
    • ๐Ÿ“–Tomato Menus
      • ๐Ÿ“Use
      • ๐Ÿ’ฝConfig
    • ๐Ÿ‘จโ€๐Ÿ’ผTomato CRM
      • ๐Ÿ“Use
      • ๐Ÿ—๏ธAuth Builder
      • ๐Ÿ”ฅEvents
      • ๐Ÿ’ฝConfig
      • ๐Ÿ”APIs
    • ๐Ÿ’ณTomato Wallet
      • ๐Ÿ“Use
      • ๐Ÿ—‚๏ธPayment Methods
      • ๐Ÿ’ฝConfig
      • ๐Ÿ”APIs
    • ๐Ÿ“ƒTomato CMS
      • ๐Ÿ“Use
      • ๐Ÿ’ฝConfig
    • ๐ŸŽงTomato Support
      • ๐Ÿ“Use
      • ๐Ÿ’ฝConfig
      • ๐Ÿ”APIs
    • ๐Ÿ‘œTomato Products
      • ๐Ÿ’ฟConfig
      • ๐ŸŒ†Screenshots
    • ๐Ÿ’ฏTomato Coupons
      • ๐Ÿ’ฟConfig
      • ๐ŸŒ†Screenshots
    • ๐Ÿš€Tomato Orders
      • ๐Ÿ’ฟConfig
      • ๐ŸŒ†Screenshots
    • ๐Ÿ›๏ธTomato Ecommerce
      • ๐ŸŽญInstall E-commerce Theme
      • ๐Ÿ’ฟConfig
      • ๐ŸŒ†Screenshots
    • ๐Ÿš›Tomato Inventory
      • ๐Ÿ’ฟConfig
    • ๐ŸงพTomato POS
      • ๐Ÿ’ฟConfig
    • ๐Ÿ“„Tomato Invoices
      • ๐Ÿ’ฟConfig
    • ๐ŸฌTomato Subscription
      • ๐Ÿ“Use
      • ๐Ÿ’ฝConfig
    • ๐ŸงชTomato Dusk
      • ๐Ÿ“Use
      • ๐Ÿ’ฟConfig
      • ๐ŸŒ†Screenshots
    • โš”๏ธTomato Chat
      • ๐Ÿ—๏ธSetup
      • ๐Ÿ“Use
      • ๐Ÿ’ฝConfig
    • ๐Ÿ“ฑTomato Flutter
      • ๐Ÿ“Use
      • ๐ŸงฒGenerate CRUD
      • ๐Ÿš€Change Endpoint
      • โฉTomato Froms
      • ๐Ÿ›ฃ๏ธScreenshots
    • ๐Ÿ—๏ธTomato Builder
      • ๐Ÿง Install
      • ๐Ÿ–๏ธUse
      • ๐ŸŒ†Screenshots
      • ๐Ÿ’ฟConfig
    • ๐Ÿ—๏ธTomato Sections
      • ๐Ÿ’ฟConfig
    • ๐ŸŽญTomato Themes
      • ๐Ÿ‚Create New Theme
      • ๐Ÿ—๏ธTheme Builder
      • ๐Ÿ›๏ธInstall E-commerce Theme
      • ๐Ÿ’ฟConfig
    • ๐Ÿ“ Tomato Eddy
      • ๐Ÿ’ฟConfig
    • ๐Ÿ‘จโ€๐Ÿ’ปTomato User Activities
      • ๐Ÿ’ฟConfig
    • ๐Ÿ‘จโ€๐Ÿ’ผTomato PMS
    • โœ…Tomato Tasks
    • โŒ›Tomato Timer
    • โœˆ๏ธTomato API
    • ๐ŸšฆTomato Figma
    • ๐ŸŒŸTomato SaaS
    • ๐Ÿ”คTomato Translations
    • ๐Ÿ‘จโ€๐Ÿ’ปTomato Artisan
    • ๐ŸŽ’Tomato Backup
    • ๐Ÿ“‚Tomato Browser
    • ๐Ÿ“•Tomato Logs
  • Helpers
    • ๐Ÿ•Laravel Console Helpers
    • ๐Ÿ“ฝ๏ธLaravel Agora
    • ๐Ÿ’ฟLaravel Package Generator
  • Filament
    • ๐ŸŒŽTry Plugins
    • ๐Ÿ‘จโ€๐ŸญFilament Users
      • ๐Ÿ›ฃ๏ธScreenshots
      • ๐Ÿ—๏ธInstallation
      • ๐Ÿ›ก๏ธIntegration
      • ๐Ÿ’ผUse Facade Class
      • ๐Ÿ“ขPublish Assets
    • ๐ŸŒŽFilament Translations
      • ๐Ÿ›ฃ๏ธScreenshots
      • ๐Ÿ—๏ธInstallation
      • ๐Ÿ‡ช๐Ÿ‡ฌLanguage Switcher
      • ๐Ÿ‘จโ€๐Ÿ’ปCommand Line
      • ๐Ÿ”งQueue
      • ๐Ÿ”˜Buttons
      • ๐Ÿค–AI Integration
      • ๐ŸŒ Import & Export
      • ๐Ÿ“ขPublish Assets
    • โš™๏ธFilament Settings Hub
      • ๐Ÿ›ฃ๏ธScreenshots
      • ๐Ÿ—๏ธInstallation
      • โ–ถ๏ธUsage
      • ๐Ÿ“ขPublish Assets
    • ๐Ÿ”Filament Menus
      • ๐Ÿ—๏ธInstallation
      • ๐Ÿ›ฃ๏ธScreenshots
      • โฉUse as Filament Navigation
      • โฏ๏ธUse as a Livewire Component
      • ๐Ÿ“ขPublish Assets
    • ๐Ÿ†ŽFilament Types
      • ๐Ÿ›ฃ๏ธScreenshots
      • ๐Ÿ—๏ธInstallation
      • โฏ๏ธRegister New Type
      • ๐ŸŽนUse Type Helper
      • ๐Ÿ”„Use Type Column
      • ๐Ÿ“ขPublish Assets
    • ๐Ÿ”ŒFilament Plugins
      • ๐Ÿ›ฃ๏ธScreenshots
      • ๐Ÿ—๏ธInstallation
      • โฏ๏ธUsage
      • ยฎ๏ธยฎ๏ธ List your package on the plugins list
      • ๐Ÿ“ถUse Selected Module in your panel
      • ๐Ÿ‚Get Only Current Panel Plugins
      • ๐Ÿ›‘Stop Auto Discover Module Resources
      • ๐ŸŽธStop Using Plugins UI
      • ๐Ÿ“ขPublish Assets
    • ๐Ÿฆ„Filament Icons
      • ๐Ÿ›ฃ๏ธScreenshots
      • ๐Ÿ—๏ธInstallation
      • โฏ๏ธUsage
      • ๐Ÿช„Add Custom Icons
      • ๐Ÿ“ขPublish Assets
    • ๐Ÿ—บ๏ธFilament Locations
      • ๐Ÿ›ฃ๏ธScreenshots
      • ๐Ÿ—๏ธInstallation
      • ๐Ÿ“ขPublish Assets
    • ๐Ÿ“ขFilament Alerts
      • ๐Ÿ›ฃ๏ธScreenshots
      • ๐Ÿ—๏ธInstallation
      • โฏ๏ธUsage
      • ๐Ÿ”ฅFirebase Integration
      • ๐Ÿ”—Slack Integration
      • ๐Ÿ”—Discord Integration
      • โš™๏ธAPI
      • ๐Ÿ“ขPublish Assets
    • ๐Ÿฆธโ€โ™‚๏ธFilament Accounts
      • ๐Ÿ›ฃ๏ธScreenshots
      • ๐Ÿ—๏ธInstallation
      • โฏ๏ธUsage
      • ๐ŸŽ‡Use Accounts as SaaS Panel
      • ๐ŸซUse Account Column
      • ๐Ÿ””Use Notifications
      • ๐Ÿ—บ๏ธUse Account Locations
      • ๐Ÿ…ฐ๏ธUse Filament Types
      • ๐Ÿ”Use Filament Impersonate
      • ๐ŸขHow to use a builder
      • โœŒ๏ธCustom validation
      • ๐Ÿ†•Attach New Field
      • ๐ŸŽŒAttach Relation
      • ๐Ÿ”˜Attach Table Button
      • ๐Ÿ›Auth Events
      • โš™๏ธAPIs
    • ๐Ÿ’ฐFilament Wallet
      • ๐Ÿ›ฃ๏ธScreenshots
      • ๐Ÿ—๏ธInstallation
      • โฏ๏ธUsage
      • ๐ŸFilament Accounts Integration
      • ๐Ÿ“ขPublish Assets
    • โœจFilament Splade
      • ๐Ÿ›ฃ๏ธScreenshots
      • ๐Ÿ—๏ธInstallation
      • โฏ๏ธUsage
      • ๐Ÿ“ขPublish Assets
    • ๐Ÿ”Filament Developer Gate
      • ๐Ÿ›ฃ๏ธScreenshots
      • ๐Ÿ—๏ธInstallation
      • โฏ๏ธUsage
      • ๐Ÿ“ขPublish Assets
    • ๐Ÿ›๏ธFilament Helpers
      • ๐Ÿ—๏ธInstallation
      • โฏ๏ธUsing
    • ๐Ÿ‘จโ€๐Ÿ’ปFilament Artisan
      • ๐Ÿ›ฃ๏ธScreenshots
      • ๐Ÿ—๏ธInstallation
      • ๐Ÿƒโ€โ™‚๏ธRunning command
      • โš™๏ธConfiguration
      • ๐Ÿ“ขPublish Assets
    • ๐Ÿ“‚Filament Browser
      • ๐Ÿ›ฃ๏ธScreenshots
      • ๐Ÿ—๏ธInstallation
      • ๐Ÿ“ขPublish Assets
    • ๐Ÿ”ฅFilament FCM
      • ๐Ÿ—๏ธInstallation
      • โฏ๏ธUsage
      • ๐Ÿ“ขPublish Assets
    • ๐Ÿ–Š๏ธFilament CMS
      • ๐Ÿ›ฃ๏ธScreenshots
      • ๐Ÿ—๏ธInstallation
      • โฏ๏ธCustom Type
      • โฏ๏ธCustom Author Type
      • ๐Ÿ“บYoutube Integration
      • ๐ŸฉBehance Integration
      • ๐ŸŽญTheme Manager
      • ๐ŸจPage Builder
      • ๐Ÿ”กForm Builder
      • ๐Ÿ“ขPublish Assets
    • ๐Ÿ”—Filament API
      • ๐Ÿ›ฃ๏ธScreenshots
      • ๐Ÿ—๏ธInstallation
      • โฏ๏ธUsage
      • ๐Ÿ“ขPublish Assets
    • ๐Ÿ‘œFilament Ecommerce
      • ๐Ÿ›ฃ๏ธScreenshots
      • ๐Ÿ—๏ธInstallation
      • ๐ŸŽUse Coupon Service
      • ๐Ÿ“ขPublish Assets
    • ๐Ÿ”šFilament Twilio
      • ๐Ÿ—๏ธInstallation
      • โฏ๏ธUsing
      • ๐Ÿ“ขPublish Assets
    • โš”๏ธFilament Discord
      • ๐Ÿ›ฃ๏ธScreenshot
      • ๐Ÿ—๏ธInstallation
      • โฏ๏ธUsing
      • ๐Ÿฆธโ€โ™‚๏ธSend to Selected User
      • โšกAllow Discord Error Logger
      • ๐Ÿ“ขPublish Assets
    • ๐Ÿ†ŽFilament Translation Component
      • ๐Ÿ›ฃ๏ธScreenshot
      • ๐Ÿ—๏ธInstallation
      • โฏ๏ธUsing
      • ๐Ÿ“ขPublish Assets
    • ๐Ÿ“’Filament Notes
      • ๐Ÿ›ฃ๏ธScreenshot
      • ๐Ÿ—๏ธInstallation
      • โฏ๏ธUsing
      • ๐Ÿ“ขPublish Assets
    • ๐Ÿ“ผFilament Media Manager
      • ๐Ÿ›ฃ๏ธScreenshots
      • ๐Ÿ—๏ธInstallation
      • โฏ๏ธUse Component
      • ๐Ÿ…ฐ๏ธAdd Custom Type
      • ๐Ÿ“‚Allow Sub Folders
      • ๐Ÿฆธโ€โ™‚๏ธAllow User Access
      • ๐ŸŽ‡Folders API
      • ๐Ÿ“ขPublish Assets
    • ๐Ÿ’ณFilament Withdrawals
      • ๐Ÿ›ฃ๏ธScreenshots
      • ๐Ÿ—๏ธInstallation
      • โฏ๏ธCustom Author Type
      • ๐Ÿ”กForm Builder
      • ๐Ÿ“ขPublish Assets
    • ๐ŸงพFilament POS
      • ๐ŸŒ„Screenshots
      • ๐Ÿ—๏ธInstallation
      • ๐Ÿ“ขPublish Assets
  • Learn
    • ๐Ÿ›๏ธBuild E-Commerce
    • ๐Ÿ™Task To Get Start
    • ๐Ÿ”ดUse Github
    • ๐Ÿ”ฅDeploy Laravel App Using GitHub Actions
      • ๐ŸฏInstall Cloudpanel
      • ๐Ÿ”“Link Cloudflare
      • ๐Ÿ”ƒClone Repo
      • ๐ŸŽ‡Workflow
      • ๐Ÿฆ•Deploy Script
    • ๐Ÿฆ„Awesome TailwindCSS
    • ๐Ÿ’ปTerminal
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
  1. Tomato Admin
  2. Inputs

Items

PreviousSubmitNextSearch

Last updated 1 year ago

Was this helpful?

items component can be used on your invoice like a Inputs Repeater but it's support calculation operations for qty and price and total and vat.

you can use it like this

<x-tomato-items :options="['item'=>'', 'price'=>0, 'discount'=>0, 'tax'=>0, 'qty'=>1,'total'=>0, 'options' =>(object)[]]" name="items">
    <div class="grid-cols-12 gap-4 border-b py-4 my-4 hidden lg:grid">
        <div class="col-span-4">
            {{__('Item')}}
        </div>
        <div>
            {{__('Price')}}
        </div>
        <div>
            {{__('Discount')}}
        </div>
        <div>
            {{__('Tax')}}
        </div>
        <div>
            {{__('QTY')}}
        </div>
        <div class="col-span-2">
            {{__('Total')}}
        </div>
    </div>
    <div class="block border-b py-4 mb-4 lg:hidden">
        {{__('Items')}}
    </div>
    <div class="flex flex-col gap-4">
        <div class="grid grid-cols-12 gap-4" v-for="(item, key) in items.main">
            <div class="col-span-12 lg:col-span-4 flex justify-between gap-4">
                <x-tomato-search
                    @change="
                                items.main[key].price = items.main[key].item?.price;
                                items.main[key].discount = items.main[key].item?.discount;
                                items.main[key].tax = items.main[key].item?.vat;
                                items.updateTotal(key)
                            "
                    :remote-url="route('admin.orders.product')"
                    option-label="name?.{{app()->getLocale()}}"
                    remote-root="data"
                    v-model="items.main[key].item"
                    placeholder="{{__('Select Item')}}"
                    label="{{__('Product')}}"
                />
            </div>
            <x-splade-input
                class="col-span-12 lg:col-span-1"
                type="number"
                placeholder="Price"
                v-model="items.main[key].price"
                @input="items.updateTotal(key)"
            />
            <x-splade-input
                class="col-span-12 lg:col-span-1"
                type="number"
                placeholder="Item Name"
                v-model="items.main[key].discount"
                @input="items.updateTotal(key)"
            />
            <x-splade-input
                disabled
                class="col-span-12 lg:col-span-1"
                type="number"
                placeholder="Tax"
                v-model="items.main[key].tax"
                @input="items.updateTotal(key, data.discount_type)"
            />
            <x-splade-input
                class="col-span-12 lg:col-span-1"
                type="number"
                placeholder="QTY"
                v-model="items.main[key].qty"
                @input="items.updateTotal(key)"
            />
            <x-splade-input
                disabled
                class="col-span-12 lg:col-span-2"
                type="text"
                placeholder="Item Name"
                v-model="items.main[key].total"
                @input="items.updateTotal(key)"
            />
            <button @click.prevent="items.addItem" class="col-span-12 lg:col-span-1 filament-button inline-flex items-center justify-center py-1 gap-1 font-medium rounded-lg border transition-colors focus:outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset dark:focus:ring-offset-0 min-h-[2.25rem] px-4 text-sm shadow-sm focus:ring-white filament-page-button-action bg-primary-600 hover:bg-primary-500 focus:bg-primary-700 focus:ring-offset-primary-700 text-white border-transparent">
                <i class="bx bx-plus"></i>
            </button>
            <button @click.prevent="items.removeItem(item)" class="col-span-12 lg:col-span-1 filament-button inline-flex items-center justify-center py-1 gap-1 font-medium rounded-lg border transition-colors focus:outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset dark:focus:ring-offset-0 min-h-[2.25rem] px-4 text-sm shadow-sm focus:ring-white filament-page-button-action bg-danger-600 hover:bg-danger-500 focus:bg-danger-700 focus:ring-offset-danger-700 text-white border-transparent">
                <i class="bx bx-trash"></i>
            </button>
            <div class="col-span-12 lg:col-span-4" v-if="items.main[key].item.has_options" v-for="(option, optionIndex) in items.main[key].item.product_metas[0].value">
                <div>
                    <label for="">
                        @{{ optionIndex.charAt(0).toUpperCase() + optionIndex.slice(1) }}
                    </label>
                    <x-splade-select class="w-full" v-model="items.main[key].options[optionIndex]">
                        <option v-for="(value, valueIndex) in option" :value="value">
                            @{{ value.charAt(0).toUpperCase() + value.slice(1) }}
                        </option>
                    </x-splade-select>
                </div>
            </div>
        </div>
        <div v-if="form.errors.inventory"
             class="text-danger-500 mt-2 text-xs font-chakra flex gap-2 mb-[6px]">
            <p v-text="form.errors.inventory"> </p>
        </div>
    </div>
    <div class="flex flex-col gap-4 mt-4">
        <div class="flex justify-between gap-4 py-4 border-b">
            <div>
                {{__('Tax')}}
            </div>
            <div>
                @{{ items.tax }}
            </div>
        </div>
        <div class="flex justify-between gap-4 py-4 border-b">
            <div>
                {{__('Sub Total')}}
            </div>
            <div>
                @{{ items.price }}
            </div>
        </div>
        <div class="flex justify-between gap-4 py-4 border-b">
            <div>
                {{__('Discount')}}
            </div>
            <div>
                @{{ items.discount }}
            </div>
        </div>
        <div class="flex justify-between gap-4 py-4 border-b">
            <div>
                {{__('Total')}}
            </div>
            <div>
                @{{ items.total }}
            </div>
        </div>
    </div>
</x-tomato-items>
๐ŸŽน
๐Ÿงพ