Еще один Баг в FilamentPHP: Не обновляется значение поля DateTimeField

Если потребуется подтянуть данные в форму, без перезагрузки страницы - пользуемся примером:

Forms\Components\DateTimePicker::make('broken_at')
  ->prefixAction(
    Action::make('updateLocation')
      ->icon('heroicon-c-arrow-path')
      ->action(function (Proxy $record, EditProxy $livewire, DateTimePicker $component) {
        $record->recheck(update: true);
        $livewire->refreshFormData(['broken_at']);
    })
)

Этот пример показывает, что можно у поля добавить кнопку, при нажатии на которую оно будет изменено и сразу подтянется из базы данных, отобразится в форме и автоматом сохранится.

Но!
В случае с DateTime - должна происходить сериализация объекта в строку нужного формата.
Этого не происходит, данные в базе сохраняются, с ними можно работать, но само значение в поле становится пустым, это баг.
Я за реверсил логику refreshFormData, разобрался, как форматируется этот тип данных при классической работе с формой.
Пока не пофиксят, после изменения данных достаточно вручную отформатировать значение и подставить в форму, используя инъекцию компонента формы.
В данном случае нужно заменить:

$livewire->refreshFormData(['broken_at']);

На следующую конструкцию:

if ($record->broken_at == null) {
  $livewire->data['broken_at'] = null;
} else {
  $livewire->data['broken_at'] = $record->broken_at->format($component->getFormat());
}

Таким образом мы вручную заменяем значение в форме на акуальное, с корректным форматированием, при этом учитываем, что значение может быть null, чтобы избежать непредвиденных ошибок.

Готово!

А еще записал подробное видео, с рзабором этой фишки на реальном проекте!
▶️ YouTube

Кстати нейросети хоть и прижились уже, делают классные иллюстрации
Но такие простые ошибки, в основном в тексте - приходится править руками в фотошопе)

Пример до и после прикрепляю.

Пока в Photoshop не работает генеративное заполнение (Generative fill) в РФ, в opensource редакторе Krita есть неплохое решение на базе Stable Diffusion

Даже превью функционала есть

При этом не обязательно иметь мощную видеокарту.
Можно воспользоваться онлайн сервисом от самого разработчика, с бесплатными токенами на генерацию, или дешево взять в аренду видеокарту на vast.ai, и самостоятельно поднять Stable Diffusion со своей моделью, и просто указать в настройках адрес сервера.

Я поиграться чисто поставил, и покреативил на последнем изображении: почистил от мусора, убрал сигарету и немного увеличил холст, но получилось только с рамками, пока не стал разбираться.

До смотрим в прикрпленном сообщении, результат в прикрепленном изображении

Кстати если видеокарта есть - легко настраивается всё (но можно и на процессоре)

Но на моем MacBook air с M1 - генерация дико медленная,о все же работает если чай сходить попить пока инференс проиходит 😁
За то без лимитов и без интернета

Типизированные Датаклассы-модели данных в TypeScript

Появились сложности в работе с Playwright на Python
А в JS api - есть подходящие экспериментальные функции для работы с запросами
Да и с аснихронностью работать мне гораздо приятнее в JS

И первое же, с чем я столкнулся - в Python есть шикарнейшая библиотека Pydantic, а на крайний случай, для работы с данным - предустановленные dataclasses
В JS же такого счастья нет, в виде удобного определения моделей данных, с возможностью добавить к ним методы и вычисляемые значения

Я перепробовал около 10 вариантов, привлек ChatGPT 4o
Ничего не вышло, но я вынес из этого много мыслей и с небольшим перерывом смог реализовать довольно неплохой интерфейс
Самая главная проблема во всех, даже самых крутых интерфейсах - наршуение принципа DRY, так как приходилось определять и properties у модели, и задавать еще дополнительно схему входных данных.

Сейчас достаточно только properties указать и конструктор, в typescript это можно сделать без повторений, через shorthand constructor. (см скрин)
Реализовано это через реверс метода конструктора, чтобы получить список именованных аргументов, а вторая функция извлекает из объекта значения в нужном порядке и переает их в конструктор.
Решение довольно неплохое, ведь нужна имплементация **kwargs из python, чтобы пробросить объект как именованные аргументы функции, но такого в JS нет, хотя решение все же нашлось)

Например, получая данные по api - мы просто передаем их в fromJSON или fromObject метод:

async function getRandomProxy() {
  const res = await this._api.get(`/proxy/random`);
  return Proxy.fromObject(res.data);
}

А определение модели датакласса смотрим на скрине.
Нигде не выкладывал, если понадобится кому - писать в комменты.