treii28
Trying to modify filament form fields from custom Livewire Field component.
First I create a rather bare-bones extension of 'Field' that points to a blade template:
fetchGoogle is just a promise based series of steps that first gets my API key, then downloads the google.maps api code using the key, then launches my initializeMap function.
The map code works fine, but I don't know how to handle the 'click' listener or how to grab any of the resulting details back in filament to update the form:
The Filament Step form schema is rather basic:
the 'afterStateUpdated code never seems to run, so I'm not sure how to update the lat and lng fields using the map click. Any help is appreciated.
4 replies
Cascading form is losing set value
Just clicking to 'edit' a record seems to work ok - all values are set and options lists are reduced accordingly.
It's an issue because eventually I would like to go the other way as well (i.e. if you set 'instance' it will look up what zone and continent those are in and set those fields) so a user can either narrow down the list first-to-third select list, or can go through the long list in the third field to set all three simultaneously.
As soon as the state of Continent changes, it replaces the options in 'zones' which loses it's value even if the already-set zone was in the new reduces option list. That then triggers a change in instance near as i can tell again losing it's value.
2 replies
Run a javascript function when table is redrawn
I never did get a response of a valid 'livewire is ready' type event, but the code i posted seems to work for most use cases by just waiting a second-a-half after the page is loaded to set the refresh triggers.
I'm using the morph.updated event to run the code I needed to run.
12 replies
Create Comment - where to inject parent ID?
kk with the help of github copilot, I figured out that I could set a ->default() in the relationmanager:
Forms\Components\TextInput::make('order_item_id')
->default(function () {
$ownerRecord = $this->getOwnerRecord();
return $ownerRecord ? $ownerRecord->id : null;
})
->numeric(),
5 replies
Create Comment - where to inject parent ID?
OK, I was able to figure out the form is defined in the relation manager (and presumably i could call my getSchema from the resource manager if desired)
But still need to know how to get the order_id in that context, and I will also need to get the user id. (I tried using Filament::auth()->id but that din't seem to fill in any value)
5 replies
Create Comment - where to inject parent ID?
Also, I assume that modal pop-over should have form fields. I have a statoc form method defined in the OrderCommentResource and even pulled the schema array out to a static getSchema() method, but it doesn't seem to be getting picked up by the model.
5 replies
Run a javascript function when table is redrawn
I ran into another issue along the way in that my breadcrumbs and action buttons vanished as soon as I loaded the javascript using a custom ->getHeader() call to load a view with the script tags.
It turned out the index.blade was looking for a non-null return from ->getHeader() with a elseif to display any output of ->getHeadings()
I ended up having to track down the index.blade.php and pull out the second condition for ->getHeadings() and add it to my custom header template to get those to show up. There didn't seem to be any way built into filamentphp to get the default header items in a custom template short of repeating that code. Ugly IMHO. that sub-portion should be sub-templated so you can load it when needed without repeating code. (that's going to be an nightmare if they update anything)
12 replies
Run a javascript function when table is redrawn
My solution seems to work for the time being. But I would still like to know what I can use in the filament/livewire startup to trigger setting up the listener when they are done loading. Using the setTimeout method is cludgy at best and can potentially fail if something in the loading doesn't finish within the timeout period.
12 replies
Adding CSS to table group label/name
Furthermore, I might want to change it up on different view pages. The project I'm playing with to learn more about filament has three primary categorizations. Think of them as 'people', 'locations' and 'items'. Each item relates to a location. Each person can relate to items. So one list might have 'items by location', another 'items by person'. Still another way of viewing it might be to group by 'items related to people' than group those 'items by location' under each person.
To make things more visually consistent, I might want to make location names Yellow, people names Green, items names Blue for example. So that regardless which is higher or lower in the heirarchy on any given page/view, the colors match so you can quickly pick out which is which.
The point being, it will vary by page. Theming 'group heading' sitewide won't achieve this. An ability to specify a color or typeface in the group definition for each page would.
7 replies
Adding CSS to table group label/name
OK, but I'm not interested in changing the CSS for the entire website. I don't think this is a theme related issue. I have a single page that lays thing out using the groups. But there seems to be no way to tinker with the styling of the group heading that I can find. I just want those headings modified on this particular page.
I know I can probably create a custom page and re-cycle the original template to add my own styling. I was just surprised I didn't see anything that would let you do anything more than specify what the group name would come from. There's no way to style that outside of theming the entire site or overriding the entire behavior? Seriously??
7 replies
text list form field? (is there any kind of contrib/repository for custom components?)
More detail:
I have a field in a form/database that could probably be handled via a hasMany relation, but it's really little more than a fancy 'notes' section to the given record allowing me to create a bullet-list of details about that record.
Since the values in the list vary greatly by context, I'm just using a text field and filling it with what amounts to the inner contents of a json array:
"Item one", "Another items", "Something else"
Currently, I'm not even formatting it for display or anything so I'm not parsing it out into an array anywhere, but just showing it as text. But this also means I'm entering the values and formatting them manually.
I know how I could build a javascript pop-over to allow parsing and entering the values from a browser in javascript and have it achieve the necessary formatting as a syntactically parsable json array, but I'm wondering if anyone has ever built anything like this already before I go trying to figure out how to shoe-horn such functionality into filament and livewire.
But this also got me to wondering if there were already collections of custom components already out there in internet land for things like form input fields, table display fields, infolist fields, etc. (I've already customized a table and a infolist field to trigger javascript for formatting a value with a tooltip popover using a third party library.)
Getting this particular field to work how I envision it to work is more of a learning task as the project I'm working on is pretty much a sandbox project to learn more about setting up filament. (I decided to build a tool to track the items I need on various toons in warcraft classic) The field in question is notes on 'sources' for the given object. Mostly I'm using it for the boss names for drops, npc names for quests, but it might also include things like items you need to collect.
3 replies
Run a javascript function when table is redrawn
I think I found one in that list with morph.updated, but as mentioned, couldn't get livewire.load event to trigger. So instead I used a window onload with a 3 second set-timeout which seems to work for the time being.
var rooTimeout = null;
function refreshOnlyOnce() {
if(rooTimeout)
clearTimeout(rooTimeout);
rooTimeout = setTimeout(doRefresh, 1000);
}
function doRefresh() {
console.log('refreshing wowhead tooltips');
WH.Tooltips.refreshLinks();
}
window.onload = function() {
setTimeout(function() {
Livewire.hook('morph.updated', ({ el, component }) => {
refreshOnlyOnce()
})
}, 3000)
};
12 replies
Run a javascript function when table is redrawn
part of the problem seems to be that all the examples I find say to use an event listener for livewire.load but adding a console log inside just the outer function of that, the liverwire.load even never seems to trigger so any events I try to add within it never even get created.
12 replies
Nesting Breadcrumbs?
(FYI: I already found a reference to getBreadcrumb but couldn't find any documentation on it. Searching the filament documentation using their website's search function only gives a references to 'getBreadcrumbs' [plural] is no public. I am considering switching to another platform because of how lacking the documentation is and how poor getting reasonably timed help is - that answer is not helping)
6 replies