Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Symfony UX Autocompleteとかいう
顧客が本当に必要だったもの

Symfony UX Autocompleteとかいう
顧客が本当に必要だったもの

PHPerのための「Symfonyを語り合う」PHP TechCafe のLT資料です。
https://rakus.connpass.com/event/285602/

同様の内容をブログ記事としても公開済みです。
https://zenn.dev/ttskch/articles/dc3c09b71f73d4

Takashi Kanemoto

June 27, 2023
Tweet

More Decks by Takashi Kanemoto

Other Decks in Programming

Transcript

  1. /
    29
    Symfony UX Autocomplete

    2
    023
    /
    06
    /
    2 7
    #PHPTechCafe @ttskch
    1

    View Slide



  2. Kannade



    PHP 11


    Zenn Symfony

    @ttskch

    View Slide

  3. /
    29
    symfony/form
    3

    FormType ⾒


    TextType TextareaType ChoiceType EntityType

    View Slide

  4. /
    29
    DB


    EntityType
    4

    View Slide

  5. /
    29
    $builder


    ->add('user', EntityType::class, [


    'class' => User::class,


    'placeholder' => 'બ୒͍ͯͩ͘͠͞',


    ])


    ;
    5
    EntityType

    View Slide

  6. /
    29
    EntityType
    6

    View Slide

  7. /
    29
    EntityType
    7

    View Slide

  8. /
    29
    EntityType N+
    1
    8
    __toString() ⾒
    N+
    1

    View Slide

  9. /
    29
    class User


    {


    // ...


    public function __toString(): string


    {


    return sprintf('%s %s', $this->team, $this->name);


    }


    }
    9
    EntityType N+
    1

    View Slide

  10. /
    29
    EntityType N+
    1
    10

    View Slide

  11. /
    29
    EntityType N+
    1
    11
    User


    View Slide

  12. /
    29
    Doctrine


    Doctrine JOIN



    EntityType N+
    1
    12

    View Slide

  13. /
    29
    13
    EntityType JOIN

    View Slide

  14. /
    29
    $builder


    ->add('user', EntityType::class, [


    'class' => User::class,


    'placeholder' => 'બ୒͍ͯͩ͘͠͞',


    'query_builder' => function (UserRepository $repository) {


    return $repository->createQueryBuilder('u')


    ->leftJoin('u.team', 't')


    ->addSelect('t')


    ;


    },


    ])


    ;
    14

    View Slide

  15. /
    29
    15


    1 🙆

    View Slide

  16. /
    29
    16
    N+
    1




    Select
    2
    selectize.js JavaScript



    View Slide

  17. /
    29
    17
    Symfony UX Autocomplete

    View Slide

  18. /
    29
    Symfony UX
    18
    PHP JavaScript


    Symfony UI


    View Slide

  19. /
    29
    Symfony UX Autocomplete
    19
    Symfony UX 1


    EntityType ChoiceType




    View Slide

  20. /
    29
    Symfony UX Autocomplete
    20
    Symfony UX 1


    EntityType ChoiceType




    View Slide

  21. /
    29
    #[AsEntityAutocompleteField]


    class UserAutocompleteField extends AbstractType


    {


    public function configureOptions(OptionsResolver $resolver): void


    {


    $resolver->setDefaults([


    'class' => User::class,


    'placeholder' => 'ݕࡧ͍ͯͩ͘͠͞',


    ]);


    }


    public function getParent(): string


    {


    return ParentEntityAutocompleteType::class;


    }


    }
    21
    🙏


    FormType

    View Slide

  22. /
    29
    $builder


    ->add('user', UserAutocompleteField::class)


    ;
    22
    🙏
    🙆

    View Slide

  23. /
    29
    23
    💡

    View Slide

  24. /
    29
    24

    View Slide

  25. /
    29
    25
    User
    API Symfony UX Autocomplete


    API

    View Slide

  26. /
    29
    26
    JavaScript Tom Select


    Tom Select FormType


    ⾒ JavaScript

    Tom Select

    🙏

    View Slide

  27. /
    29
    27
    Symfony UX Autocomplete Symfony UI






    N+
    1
    Autocomplete

    N+
    1
    10



    View Slide

  28. /
    29
    🐙
    28
    https://github.com/ ttskch/symfony-ux-autocomplete-example

    View Slide

  29. /
    29
    29
    Thanks!
    @ttskch

    View Slide