Reto:
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
import { mapActions } from 'vuex';
export default {
created() {
this.fethServices();
},
methods: {
...mapActions({ fethServices: 'FETCH_SERVICES'}),
},
}
</script>
<style lang="postcss" src="./assets/tailwind.postcss"></style>
<style lang="css" src="./assets/main.css"></style>
Store.js
...
actions: {
...
FETCH_SERVICES: ({ state, commit }) => new Promise((resolve) => {
const instance = firebase.database().ref('services');
instance.once('value', (snapshot) => {
const services = snapshot.val();
Object.keys(services).forEach((serviceId) => {
const service = services[serviceId];
const data = {
item: service,
id: serviceId,
resource: 'services',
};
commit('SET_ITEM', data);
});
resolve(Object.values(state.rooms));
});
}),
...
}
...
getters: {
...
services: state => state.services,
...
}
filters/Id2service.js
import store from '../store';
const id2Serive = {};
const { services } = store.state;
id2Serive.install = function id2s(Vue) {
Vue.filter('id-to-service', (val) => {
if (services[val]) {
return services[val].name;
}
return val;
});
};
export default id2Serive;
CreateHousePage.vue
<template>
<page-layout>
<section class="py-4 bg-teal-dark">
<div class="container">
<form class="form">
<div class="form__field relative">
<i class="input-icon material-icons absolute text-grey-darker">search</i>
<input
class="input__search"
id="where"
type="text"
placeholder="Mexico City, Mexico">
</div>
</form>
</div>
</section>
<section class="section__create py-6">
<div class="container">
<h1 class="text-3x1"> Publish a new rooms</h1>
<form>
<div class="mb-4">
<label class="input__label">Title</label>
<input
v-model="publication.title"
class="input__field" type="text" placeholder="Bruce Wayne">
</div>
<div class="mb-4">
<label class="input__label">Description</label>
<textarea
v-model="publication.description"
class="input__field" rows="10" placeholder="Bruce Wayne"></textarea>
</div>
<div class="mb-4">
<label class="input__label">Feacture Image</label>
<input
v-model="publication.feacturedImage"
class="input__field"
type="text" placeholder="https://images.unsplash.com/photo-1560681610-68f081d2e7dd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80">
</div>
<div class="mb-4">
<label class="input__label">Servicios</label>
<button v-for="(service, id) in services" :key="id"
@click.prevent="addService(id)"
class="font-semibold py-3 px-6 mr-4 rounded"
:class="isActive(id) ? 'bg-blue-dark':'bg-blue-light'">
{{ service.name }}
</button>
</div>
<div class="mb-4 text-right">
<button
@click.prevent="save"
class="w-full bg-yellow-dark text-yellow-darker font-semibold py-3 px-6 rounded">
Publish
</button>
</div>
</form>
</div>
</section>
</page-layout>
</template>
<script>
import { mapGetters } from 'vuex';
import PageLayout from '@/layouts/PageLayout.vue';
export default {
name: 'CreateHousePage',
data() {
return {
publication: {
title: '',
description: '',
feacturedImage: '',
services: {},
},
};
},
components: {
PageLayout,
},
computed: {
...mapGetters(['services']),
},
methods: {
save() {
const {
title,
description,
services,
feacturedImage,
} = this.publication;
const room = {
title,
description,
services,
featured_image: feacturedImage,
publishedAt: Date.now(),
};
this.$store.dispatch('CREATE_ROOM', room);
},
addService(serviceId) {
if (this.publication.services[serviceId]) {
this.$delete(this.publication.services, serviceId);
} else {
const id = JSON.parse(JSON.stringify(serviceId));
this.$set(this.publication.services, id, id);
}
},
isActive(serviceId) {
if (this.publication.services[serviceId]) {
return true;
}
return false;
},
},
};
</script>
-
Formulario:
-
HouseCard:
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?