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.total} résultats trouvés)</h3>
                <div class="results-grid">
                    <div class="card" each="{item in searchs.items}">
                        <a if={authUser}  onclick={() => item.isFavorite ? this.removeFavoris(item.id) : this.addFavoris(item.id)}><button><i class={item.isFavorite ? "fa-solid fa-star" : "fa-regular fa-star"}></i></button></a>
                        <a href={ "#/release-details/" + 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>
                    </div>
                </div>
            </div>
        </route>

        <route path="#/release-details/:id">
            <release-details releaseid={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,
            favoritesIds: [],
            searchs: {
                items: [],
                pagination: [],
                type: null,
            },

            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;
                if (!query) return;

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

                const enrichedItems = [];
                for (const item of result.results) {
                    const isFav = await window.isFavorite(item.id);
                    enrichedItems.push({ ...item, isFavorite: isFav }); // évite de muter directement item
                }

                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();
                });
            },

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

                this.update();
            },

            async removeFavoris(id) {
                await window.removeFavorite(id);

                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;
        }
        
        .results-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
        }
        
        .card {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: center;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        footer {
            justify-content: space-between;
            align-items: center;
        }
        
        img {
            width: 100%;
            height: auto;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        
        h4 {
            font-size: 1rem;
            margin: 5px 0;
        }
        
        a {
            text-decoration: none;
            color: #007bff;
        }
        
        nav {
            display: flex;
            justify-content: space-around;
            background: #1976d2;
            padding: 1rem;
        }
        
        button {
            color: white;
            background-color: #2196f3;
            border: none;
            font-weight: bold;
            cursor: pointer;
            padding: 0.5em 1em;
            border-radius: 5px;
            margin: 0.5em;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #1769aa;
            text-decoration: none;
        }
        
        nav {
            background-color: #1976d2;
            padding: 1rem;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            margin-bottom: 2rem;
        }
        
        nav a {
            margin: 0 10px;
            color: white;
            text-decoration: none;
        }
    </style>
</app>