SAE_riot/components/app.riot

<app>
    <nav>
        <a href="#"><i class="fa-solid fa-house"></i></a>
        <a if={authUser} href="#/favoris/">Favoris</a>
        <a if={!authUser} href="#/login/"><i class="fa-solid fa-user"></i></a>
        <a if={authUser} href="#" onclick={() => Logout()}><i class="fa-solid fa-right-from-bracket"></i></a>
    </nav>

    <router base={base}>
        <route path="(#)?">
            <form onsubmit="{search}">
                <select name="type">
      <option value="release">Release</option>
      <option value="master">Master</option>
      <option value="artist">Artist</option>
    </select>
                <input type="text" name="query" placeholder="Rechercher..." />
                <button type="submit">Rechercher</button>
            </form>

            <!-- Pagination -->
            <div class="pagination" if={searchs.pagination && searchs.pagination.pages > 1}>
            <button 
                onclick={() => this.changePage(searchs.pagination.page - 1)}
                disabled={searchs.pagination.page === 1}>
                ◀ Précédent
            </button>

            <span>Page {searchs.pagination.page} / {searchs.pagination.pages}</span>

            <button 
                onclick={() => this.changePage(searchs.pagination.page + 1)}
                disabled={searchs.pagination.page === searchs.pagination.pages}>
                Suivant ▶
            </button>
            </div>

            <div if="{searchs.items.length > 0}">
                <h3>Résultats ({searchs.pagination.items} résultats trouvés)</h3>
                <div class="results-grid">
                    <div class="card" each="{item in searchs.items}">
                        <!-- Afficher l'étoile avec la musique immédiatement -->
                        <a if={authUser && this.searchs.type !== "artist"} onclick={() => item.isFavorite ? this.removeFavoris(item.id, item.type) : this.addFavoris(item.id, item.type)}>
                            <button><i class={item.isFavorite ? "fa-solid fa-star" : "fa-regular fa-star"}></i></button>
                        </a>
                        <a href={ "#/release-details/" + item.type + "/" + item.id}>
                            {item.title}
                            <img src="{item.cover_image}" alt="cover" />
                            <div if="{item.type !=='artist' } ">
                                <p>{item.year}</p>
                                <footer>{item.community.want}<i class="fa-solid fa-check"></i> {item.community.have}<i class="fa-regular fa-heart"></i></footer>
                            </div>
                        </a>
                        <a if={this.searchs.type === "release"} href={"#/release-details/master/" + item.master_id}><button>master</button></a>
                    </div>
                </div>
            </div>
        </route>

        <route path="#/release-details/:type/:id">
            <release-details Type={route.params.type} Id={route.params.id}></release-details>
        </route>
        <route path="#/favoris">
            <favorites></favorites>
        </route>
        <route path="#/login">
            <login></login>
        </route>
        <route path="#/register">
            <register></register>
        </route>
    </router>


    <script>
        export default {
            base: 'https://dwarves.iut-fbleau.fr/~felix-vi/SAE_riot/',
            route: 'search',
            authUser: null,
            searchs: {
                items: [],
                pagination: [],
                type: "release",
                query: ""
            },

            async search(e, page = 1) {
                if (e) e.preventDefault();

                const type = e?.target?.type?.value || this.searchs.type;
                const query = e?.target?.query?.value || this.searchs.query;

                const result = await window.discogsearch(query, type, page);

                const favoritePromises = result.results.map(item => window.isFavorite(item.id, item.type));
                const favoritesResults = await Promise.all(favoritePromises);

                const enrichedItems = result.results.map((item, index) => ({
                    ...item,
                    isFavorite: favoritesResults[index]
                }));

                this.searchs.items = enrichedItems;
                this.searchs.pagination = result.pagination;
                this.searchs.query = query;
                this.searchs.type = type;

                this.update();
                },

            changePage(page) {
                this.search(null, page);
                this.update();
            },

            async onMounted() {
                observeAuthState(async user => {
                    this.authUser = user;
                    this.update();
                });
                this.search(null, 1);
                this.update();
            },

            addFavoris(id, type) {
                window.favorite(id, type);
                this.searchs.items = this.searchs.items.map(item =>
                    item.id === id ? { ...item, isFavorite: true } : item
                );
                this.update();
            },

            async removeFavoris(id, type) {
                await window.removeFavorite(id, type);
                this.searchs.items = this.searchs.items.map(item =>
                    item.id === id ? { ...item, isFavorite: false } : item
                );
                this.update();
            },

            Logout(){
                window.logout()
                this.update();
            }
        }
    </script>

    <style>
        #view {
            padding: 1rem;
            max-width: 1200px;
            margin: auto;
        }

        form {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        form select,
        form input {
            padding: 0.6rem;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 1rem;
        }

        form button {
            background-color: #1976d2;
            color: white;
            padding: 0.6rem 1.2rem;
            border: none;
            border-radius: 6px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        form button:hover {
            background-color: #125aa3;
        }

        .results-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 1rem;
            padding: 1rem;
        }

        .card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
            padding: 1rem;
            text-align: center;
            transition: transform 0.2s ease;
        }

        .card:hover {
            transform: translateY(-4px);
        }

        .card img {
            width: 100%;
            border-radius: 6px;
            margin-bottom: 0.5rem;
        }

        .card h4 {
            font-size: 1.1rem;
            margin: 0.5rem 0;
        }

        footer {
            display: flex;
            justify-content: space-around;
            font-size: 0.9rem;
            color: #666;
            margin-top: 0.5rem;
        }

        .card a i.fa-star {
            color: #fbc02d;
            font-size: 1.3rem;
            transition: transform 0.2s ease;
        }

        .card a i.fa-star:hover {
            transform: scale(1.2);
        }

        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .pagination button {
            background-color: #1976d2;
            color: white;
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .pagination button:hover {
            background-color: #125aa3;
        }

        nav {
            background-color: #1976d2;
            padding: 1rem;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        nav a {
            margin: 0 10px;
            color: white;
            text-decoration: none;
        }

    </style>
</app>