Create basic Person component + collect data by getter
This commit is contained in:
27
components/Person/index.vue
Normal file
27
components/Person/index.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<router-link
|
||||
class="person flex items-center cursor-pointer p-3 mb-2 rounded bg-gray-300 hover:bg-gray-400"
|
||||
:to="`/people/${person.id}`"
|
||||
tag="article"
|
||||
>
|
||||
<span class="mr-2 text-xl font-bold">{{
|
||||
person.gender === "Female" ? "♀" : "♂"
|
||||
}}</span>
|
||||
<h4>{{ person.name }}</h4>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Person",
|
||||
props: {
|
||||
person: {
|
||||
type: Object,
|
||||
default: {},
|
||||
required: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped></style>
|
||||
@@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="py-4 flex flex-col lg:flex-row items-center lg:items-start">
|
||||
<div
|
||||
class="py-4 flex flex-col lg:flex-row items-center lg:items-start justify-center"
|
||||
>
|
||||
<article
|
||||
class="mb-4 flex flex-col justify-between bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
|
||||
class="mb-4 inline-flex flex-col justify-between bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
|
||||
>
|
||||
<header class="p-4 rounded-t-md">
|
||||
<h1>
|
||||
@@ -26,27 +28,33 @@
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<aside class="w-full lg:ml-4">
|
||||
<aside class="lg:inline-flex lg:ml-4">
|
||||
<section
|
||||
class="p-4 mb-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
|
||||
class="p-4 lg:mr-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
|
||||
>
|
||||
<h3 class="font-medium text-lg">People</h3>
|
||||
<div>{{ film.people }}</div>
|
||||
<h3 class="font-medium text-lg mb-4">People</h3>
|
||||
<ul v-if="people.length">
|
||||
<li :key="person.id" v-for="person in people">
|
||||
<Person :person="person" />
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="p-4 mb-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
|
||||
<!-- <section
|
||||
v-if="Object.keys(film.vehicles).length"
|
||||
class="p-4 lg:mr-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
|
||||
>
|
||||
<h3 class="font-medium text-lg">Vehicles</h3>
|
||||
<h3 class="font-medium text-lg mb-4">Vehicles</h3>
|
||||
<div>{{ film.vehicles }}</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="p-4 mb-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
|
||||
v-if="Object.keys(film.locations).length"
|
||||
class="p-4 lg:mr-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
|
||||
>
|
||||
<h3 class="font-medium text-lg">Locations</h3>
|
||||
<div>{{ film.locations }}</div>
|
||||
</section>
|
||||
</section> -->
|
||||
</aside>
|
||||
</div>
|
||||
</template>
|
||||
@@ -56,6 +64,9 @@ import { mapGetters } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "Film",
|
||||
components: {
|
||||
Person: () => import("@/components/Person")
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
titleTemplate: `%s - ${this.film.title}`
|
||||
@@ -72,14 +83,12 @@ export default {
|
||||
await store.dispatch("films/getFilm", params.id);
|
||||
},
|
||||
computed: {
|
||||
people() {
|
||||
return this.$store.getters["people/getPeopleByFilmId"](this.film.id);
|
||||
},
|
||||
...mapGetters({
|
||||
film: "films/film"
|
||||
})
|
||||
},
|
||||
async mounted() {
|
||||
await this.$store.dispatch("films/getPeople");
|
||||
await this.$store.dispatch("films/getVehicles");
|
||||
await this.$store.dispatch("films/getLocations");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -9,22 +9,15 @@ export const mutations = {
|
||||
},
|
||||
setFilm: (state, film) => {
|
||||
state.film = film;
|
||||
},
|
||||
setPeople: (state, people) => {
|
||||
state.film.people = people;
|
||||
},
|
||||
setVehicles: (state, vehicles) => {
|
||||
state.film.vehicles = vehicles;
|
||||
},
|
||||
setLocations: (state, locations) => {
|
||||
state.film.locations = locations;
|
||||
}
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
async getList({ commit }) {
|
||||
try {
|
||||
const films = await this.$axios.$get("/api/films");
|
||||
const films = await this.$axios.$get(
|
||||
"/api/films?fields=id,title,release_date,director,description,rt_score"
|
||||
);
|
||||
commit("setList", films);
|
||||
} catch (e) {
|
||||
throw Error(`API Error occurred: ${e.message}`);
|
||||
@@ -32,77 +25,13 @@ export const actions = {
|
||||
},
|
||||
async getFilm({ commit }, id) {
|
||||
try {
|
||||
const film = await this.$axios.$get(`/api/films/${id}`);
|
||||
const film = await this.$axios.$get(
|
||||
`/api/films/${id}?fields=id,title,release_date,director,description,rt_score`
|
||||
);
|
||||
commit("setFilm", film);
|
||||
} catch (e) {
|
||||
throw Error(`API Error occurred: ${e.message}`);
|
||||
}
|
||||
},
|
||||
async getPeople({ commit, dispatch, state }) {
|
||||
let people = {};
|
||||
try {
|
||||
if (state.film.people[0].split("/")[4] !== "") {
|
||||
const promises = state.film.people.map(async person => {
|
||||
const id = person.split("/")[4];
|
||||
return await dispatch(
|
||||
"people/getPerson",
|
||||
{
|
||||
id: id,
|
||||
callback: true
|
||||
},
|
||||
{ root: true }
|
||||
);
|
||||
});
|
||||
people = await Promise.all(promises);
|
||||
}
|
||||
commit("setPeople", people);
|
||||
} catch (e) {
|
||||
throw Error(`API Error occurred: ${e.message}`);
|
||||
}
|
||||
},
|
||||
async getVehicles({ commit, dispatch, state }) {
|
||||
let vehicles = {};
|
||||
try {
|
||||
if (state.film.vehicles[0].split("/")[4] !== "") {
|
||||
const promises = state.film.vehicles.map(async vehicle => {
|
||||
const id = vehicle.split("/")[4];
|
||||
return await dispatch(
|
||||
"vehicles/getVehicle",
|
||||
{
|
||||
id: id,
|
||||
callback: true
|
||||
},
|
||||
{ root: true }
|
||||
);
|
||||
});
|
||||
vehicles = await Promise.all(promises);
|
||||
}
|
||||
commit("setVehicles", vehicles);
|
||||
} catch (e) {
|
||||
throw Error(`API Error occurred: ${e.message}`);
|
||||
}
|
||||
},
|
||||
async getLocations({ commit, dispatch, state }) {
|
||||
let locations = {};
|
||||
try {
|
||||
if (state.film.locations[0].split("/")[4] !== "") {
|
||||
const promises = state.film.locations.map(async location => {
|
||||
const id = location.split("/")[4];
|
||||
return await dispatch(
|
||||
"locations/getLocation",
|
||||
{
|
||||
id: id,
|
||||
callback: true
|
||||
},
|
||||
{ root: true }
|
||||
);
|
||||
});
|
||||
locations = await Promise.all(promises);
|
||||
}
|
||||
commit("setLocations", locations);
|
||||
} catch (e) {
|
||||
throw Error(`API Error occurred: ${e.message}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -1,18 +1,31 @@
|
||||
export const state = () => ({
|
||||
list: [],
|
||||
person: {}
|
||||
});
|
||||
|
||||
export const mutations = {
|
||||
setList: (state, people) => {
|
||||
state.list = people;
|
||||
},
|
||||
setPerson: (state, person) => {
|
||||
state.person = person;
|
||||
}
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
async getPerson({ commit }, { id, callback = false }) {
|
||||
async getList({ commit }) {
|
||||
try {
|
||||
const people = await this.$axios.$get(
|
||||
"/api/people?fields=id,name,gender,age,eye_color,hair_color,films"
|
||||
);
|
||||
commit("setList", people);
|
||||
} catch (e) {
|
||||
throw Error(`API Error occurred: ${e.message}`);
|
||||
}
|
||||
},
|
||||
async getPerson({ commit }, id) {
|
||||
try {
|
||||
const person = await this.$axios.$get(`/api/people/${id}`);
|
||||
if (callback) return person;
|
||||
commit("setPerson", person);
|
||||
} catch (e) {
|
||||
throw Error(`API Error occurred: ${e.message}`);
|
||||
@@ -21,5 +34,11 @@ export const actions = {
|
||||
};
|
||||
|
||||
export const getters = {
|
||||
person: state => state.person
|
||||
list: state => state.list,
|
||||
person: state => state.person,
|
||||
getPeopleByFilmId: state => id => {
|
||||
return state.list.filter(person =>
|
||||
person.films.find(film => film.split("/")[4] === id)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user