Commit 317ea561 authored by erlendoeien's avatar erlendoeien
Browse files

Refactor to components

parent ab4b8c30
<template>
<teleport to="head"><title>Movie room</title></teleport>
<div>
<nav>
<span v-if="loginName">
<!-- Movies shall be the logo -->
<router-link to="/movies"> <img :src="logo" /></router-link> |
<span><font-awesome-icon icon="user" /> {{ loginName }}</span> |
<router-link to="/wishlist">Wishlist</router-link> |
<button @click="signOut">Log out</button>
</span>
</nav>
<Navbar :loginName="loginName" :signOut="signOut" />
<router-view />
</div>
</template>
<script setup lang="ts">
import { useCurrentUser } from "./hooks";
import logo from "./assets/favicon-32x32.png";
import Navbar from "./components/Navbar.vue";
const { signOut, loginName } = useCurrentUser();
</script>
......@@ -27,8 +16,5 @@ const { signOut, loginName } = useCurrentUser();
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
<template>
<button
class="border-slate-600 hover:scale-110 border-2 px-2 py-1 rounded-md hover:bg-slate-300 hover:border-slate-300 hover:text-slate-900"
>
<slot />
</button>
</template>
<template>
<Button @click="onClick"
><font-awesome-icon class="hover:scale-125 icon" size="lg" :icon="icon" /><slot
/></Button>
</template>
<script setup lang="ts">
import { toRefs } from "@vue/reactivity";
interface IIconButtonProps {
icon: string;
onClick(): void;
//TODO: Pass along Font-awesome-icon props
}
const props = defineProps<IIconButtonProps>();
const { icon, onClick } = toRefs(props);
</script>
<style>
.icon:hover {
color: red;
}
</style>
<template>
<nav class="flex flex-row bg-slate-900 justify-between text-white items-center space-x-6 py-2 px-6">
<template v-if="loginName">
<div class="flex-grow ">
<router-link to="/movies"> <img :src="logo" width="64" /></router-link>
</div>
<div class="flex flex-row space-x-2 items-center">
<font-awesome-icon icon="user" />
<p>{{ loginName }}</p>
</div>
<div class="hover:scale-110">
<router-link
to="/wishlist"
class="border-2 bg-white hover:bg-slate-600 hover:border-slate-600 rounded-md px-2 py-1"
><font-awesome-icon color="#dc2626" icon="heart" size="lg"
/></router-link>
</div>
<div>
<Button @click="signOut">Log out</Button>
</div>
</template>
</nav>
</template>
<script setup lang="ts">
import { toRefs } from "@vue/reactivity";
import logo from "../assets/logo_192x192.png";
import Button from "./Button.vue";
interface INavbarProps {
loginName: string;
signOut(): void;
}
const props = defineProps<INavbarProps>();
const { loginName, signOut } = toRefs(props);
</script>
<style>
</style>
......@@ -4,6 +4,7 @@
<div>
<div v-if="movies.length === 0">
<h3>Loading...</h3>
<font-awesome-icon icon="spinner" spin />
</div>
<table v-else>
<thead>
......@@ -16,7 +17,7 @@
<td>{{ movie.title }}</td>
<td>{{ movie.year }}</td>
<td>{{ movie.genre }}</td>
<td><button @click="addWish(movie.id)">WISHLIST</button></td>
<td><IconButton icon="heart" :onClick="() => addWish(movie.id)"/></td>
</tr>
</table>
</div>
......@@ -24,6 +25,7 @@
<script setup lang="ts">
import { useWishlistMovies, useMovies, useWishlist, useMatchedMovies } from "../hooks";
import IconButton from "../components/IconButton.vue";
const { movies } = useMovies();
const { wishlist, addWish } = useWishlist();
......@@ -36,7 +38,6 @@ const { searchQuery, moviesMatchingSearchQuery: filteredMovies } =
div {
display: flex;
flex-direction: column;
margin: auto;
}
table,
th,
......
......@@ -15,13 +15,14 @@
<td>{{ movie.title }}</td>
<td>{{ movie.year }}</td>
<td>{{ movie.genre }}</td>
<td><button @click="deleteWish(movie.id)">WISHLIST</button></td>
<td><IconButton :onClick="() => deleteWish(movie.id)" icon="heart-broken" /></td>
</tr>
</table>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { useWishlistMovies, useMovies, useWishlist } from "../hooks";
import IconButton from "../components/IconButton.vue";
const { movies } = useMovies();
const { wishlist, deleteWish, isEmpty } = useWishlist();
......@@ -29,5 +30,4 @@ const { wishlistFilteredMovies: filteredMovies } = useWishlistMovies(movies, wis
const router = useRouter();
const redirect = () => router.push({ name: "movies" });
// console.log("No wishes", isEmpty.value);
</script>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment