Еще один Баг в 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);
}

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

Получилось портировать на Python, возможно переписывать на TypeScript буду потом проект, вся логика на Python уже готова, быстрее портировать было.

Плюс для решения капчи буду подключать мою, обученную выше, нейросеть.
Сейчас просто ставлю на паузу и вручную ее решаю)
А делать это точно на python нужно, сейчас это будет сделать проще, чем с nodejs

Как у Python - куча приятных фишек, так и под TS...