Skip to content

Instantly share code, notes, and snippets.

@elinardo10

elinardo10/AddMidiasModal.vue

Last active July 15, 2019 18:54
Show Gist options
  • Save elinardo10/02c84c1199356945b0a63182fd5bcaac to your computer and use it in GitHub Desktop.
Save elinardo10/02c84c1199356945b0a63182fd5bcaac to your computer and use it in GitHub Desktop.
Download ZIP
Raw
_id.vue
<template>
<div>
<v-tabs
v-model="langSelected"
centered
color="primary"
dark
icons-and-text
>
<v-tabs-slider color="yellow" />
<v-tab
v-for="lang in languages"
:key="lang.id"
>
{{ lang.name }}
</v-tab>
<v-tab-item
v-for="lang of languages"
:key="lang.id"
>
<v-card flat>
<v-container grid-list-md>
<v-layout wrap>
<v-flex xs12 sm6>
<v-text-field
v-model="lang.meta.name"
label="Nome do Hotel"
:error-messages="errors.name"
:rules="nameRules"
outline
/>
</v-flex>
<v-flex xs12 sm6>
<v-text-field
v-model="lang.meta.address"
label="Endereço"
:error-messages="errors.address"
outline
/>
</v-flex>
<v-flex xs12 sm12>
<v-textarea
v-model="lang.meta.description"
label="Descrição"
:error-messages="errors.description"
>
<template v-slot:label>
<div>
Descrição do Hotel<small>(Obrigatório)</small>
</div>
</template>
</v-textarea>
</v-flex>
</v-layout>
<v-divider />
<v-layout wrap>
<v-toolbar card color="white">
<v-text-field
v-model="search"
flat
solo
prepend-icon="search"
placeholder="Busque por um hoteis"
hide-details
class="hidden-sm-and-down"
/>
<v-btn
class="letra-button-normal"
round
color="primary"
@click="addRow()"
>
<v-icon>add</v-icon> <strong> Quartos</strong>
</v-btn>
</v-toolbar>
<v-divider />
<v-data-table
:headers="complex.headers"
:items="lang.room"
:search="search"
:rows-per-page-items="[5,10,25,{text:'Todos','value':-1}]"
rows-per-page-text="Itens por paginas"
no-results-text="Nenhum resultado encontrado"
class="elevation-1"
item-key="id"
:loading="loading"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.id }}</td>
<td>
<v-flex xs12 sm6>
<v-text-field
v-model="props.item.type"
:error-messages="errors.type"
/>
</v-flex>
</td>
<td>
<v-flex xs12 sm6>
<v-text-field
v-model.number="props.item.price"
:error-messages="errors.type"
/>
</v-flex>
</td>
<v-flex xs12 sm12>
<v-textarea
v-model="props.item.description"
label="Descrição do quarto"
:error-messages="errors.description"
>
<template v-slot:label>
<div>
Descrição do Quarto <small>(Obrigatório)</small>
</div>
</template>
</v-textarea>
</v-flex>
<td>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-btn
flat
icon
dark
color="primary"
small
@click="saveRoom(props.item)"
v-on="on"
>
<v-icon>{{ props.item.id ? 'edit' : 'save' }}</v-icon>
</v-btn>
</template>
<span> {{ props.item.id ? 'Atualizar' : 'Salvar' }}</span>
</v-tooltip>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-btn
flat
icon
dark
color="error"
small
@click="deleteRoom(props.item.id)"
v-on="on"
>
<v-icon>delete</v-icon>
</v-btn>
</template>
<span>deletar</span>
</v-tooltip>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-btn
flat
icon
dark
color="blue"
small
v-on="on"
@click="addMedias(props.item)"
>
<v-icon>add_photo_alternate</v-icon>
</v-btn>
</template>
<span>Adicionar Imagens</span>
</v-tooltip>
</td>
</template>
<template
slot="pageText"
slot-scope="item"
>
{{ item.pageStart }} - {{ item.pageStop }} de {{ item.itemsLength }}
</template>
</v-data-table><!--fecha table !-->
</v-layout>
<v-divider />
<v-card-actions>
<v-spacer />
<v-btn
round
color="primary"
:loading="loading"
@click="saveAll()"
>
Salvar
</v-btn>
</v-card-actions>
</v-container>
</v-card>
</v-tab-item>
</v-tabs>
<v-dialog v-model="openMediasModal" max-width="900px" @keydown.esc="openMediasModal = false">
<add-media-modal
v-if="openMediasModal"
:medias="mediaSelected"
:room="roomSelected"
@closeAddMedias="openMediasModal = false"
/>
</v-dialog>
</div>
</template>
<script>
import AddMediaModal from '~/components/hotels/room/AddMediaModal.vue';
import { mapMutations } from 'vuex';
// import { cloneDeep } from 'lodash';
export default {
middleware: 'auth',
name: 'HotelAddMetas',
components: {
AddMediaModal
},
data() {
return {
id: this.$route.params.id,
hotel: [],
mediaSelected: [],
roomSelected: {},
openMediasModal: false,
loading: false,
nameRules: [
v => !!v || 'O hotel precisa de um título'
],
languages: [],
langSelected: 0,
errors: {},
search: '',
complex: {
headers: [
{
text: 'id',
value: 'id',
sortable: false
},
{
text: 'Tipo de Quarto',
value: 'type'
},
{
text: 'Preço',
value: 'price'
},
{
text: 'Descrição',
value: 'description'
},
{
text: 'Ações',
value: '',
sortable: false
}
]
}
};
},
computed: {
// aqui eu defino no meu language_id no methods "save"
selectedLanguage() {
return this.languages[this.langSelected];
}
},
created() {
this.fetchHotel(this.id);
},
methods: {
fetchHotel(id) {
this.$axios.get(`hotels/${id}`, this.hotel).then((response) => {
this.hotel = response.data.data;
this.fetchLanguages();
console.log(this.hotel);
})
.catch((error) => {
this.errors = error.response.data.data.errors;
});
},
addMedias(room) {
this.openMediasModal = true;
this.mediaSelected = room.medias;
this.roomSelected = room;
console.log(this.mediaSelected);
console.log('room selected:' + this.roomSelected);
},
addRow() {
this.selectedLanguage.room.push({ type: '', price: '', description: '' });
console.log(this.selectedLanguage.room);
},
saveRoom(room) {
room.id ? this.updateRoom(room) : this.createRoom(room);
},
createRoom(room) {
console.log(room);
const data = {
type: room.type,
price: room.price,
description: room.description,
language_id: this.selectedLanguage.id,
};
this.loading = true;
this.$axios.post(`hotels/${this.id}/rooms`, data).then((response) => {
this.data = response.data.data;
this.setSnack('Dados salvos com sucesso!');
this.$router.push({ name: 'hotels-id', params: { id: this.id } });
this.$emit('add', this.data);
this.loading = false;
console.log(this.data);
})
.catch((error) => {
this.loading = false;
this.setSnack('error');
this.errors = error.response.data.errors;
});
},
updateRoom(room) {
const data = {
type: room.type,
price: room.price,
description: room.description,
language_id: room.language.id,
};
this.loading = true;
this.$axios.put(`hotels/${this.id}/rooms/${room.id}`, data).then((response) => {
this.data = response.data.data;
this.setSnack('Dados salvos com sucesso!');
this.loading = false;
console.log(this.data);
})
.catch((error) => {
this.loading = false;
this.setSnack('error');
this.errors = error.response.data.errors;
});
},
deleteRoom(id) {
if (confirm('Tem certeza que deseja excluir este Quarto?')) {
const index = this.selectedLanguage.room.indexOf(id);
this.selectedLanguage.room.splice(index, 1);
this.$axios.delete(`hotels/${this.id}/rooms/${id}`).then((response) => {
// this.$router.push({ name: 'users' });
this.setSnack('Quarto deletado com sucesso!');
})
.catch((error) => {
this.setSnack('error');
this.errors = error.response.data.errors;
this.loading = false;
});
}
},
fetchLanguages() {
this.$axios.get('languages', this.languages).then((response) => {
this.languages = response.data.data;
console.log(response.data.data);
this.languages.forEach((language) => {
const meta = this.hotel.metas.find(obj => obj.language.id === language.id) || {};
this.$set(language, 'meta', meta.id ? meta : { title: '', address: '', description: '' });
const room = this.hotel.rooms.filter(obj => obj.language.id === language.id);
this.$set(language, 'room', room);
});
/*
this.languages.forEach((language) => {
const meta = this.metas.filter(meta => meta.language_id === language.id);
language.meta = meta.length ? meta[0] : { title: '', address: '', description: '' };
});
*/
// console.log(this.languages);
setTimeout(() => {
this.loading = false;
}, 1000);
})
.catch((error) => {
this.errors = error.response.data.data.errors;
this.loading = false;
});
},
saveMetas() {
const data = {
...this.metas,
name: this.selectedLanguage.meta.name,
address: this.selectedLanguage.meta.address,
description: this.selectedLanguage.meta.description,
language_id: this.selectedLanguage.id,
// hotel_id: this.id
};
this.loading = true;
this.$axios.post(`hotels/${this.id}/metas`, data).then((response) => {
this.data = response.data.data;
this.setSnack('Dados salvos com sucesso!');
this.$emit('add', this.data);
this.loading = false;
console.log(this.data);
})
.catch((error) => {
this.loading = false;
this.setSnack('error');
this.errors = error.response.data.errors;
});
},
saveAll() {
this.saveMetas();
},
...mapMutations({
setSnack: 'snackbar/setSnack'
}),
}
};
</script>
Raw
AddMidiasModal.vue
<template>
<v-card>
<v-card-title>
<v-subheader>
<span class="headline">Imagens do Quarto</span>
</v-subheader>
<v-spacer />
<v-btn
icon
color="error"
flat
@click="close"
>
<v-icon>close</v-icon>
</v-btn>
</v-card-title>
<v-divider />
<v-container grid-list-md>
<v-layout wrap>
<v-flex
v-for="media in medias"
:key="media.id"
xs4
d-flex
>
<v-card flat tile class="d-flex">
<v-hover>
<v-img
slot-scope="{ hover }"
:src="media.url"
:lazy-src="media.url"
aspect-ratio="1"
class="grey lighten-2"
>
<template v-slot:placeholder>
<v-layout
fill-height
align-center
justify-center
ma-0
>
<v-progress-circular indeterminate color="grey lighten-5" />
</v-layout>
</template>
<v-btn
v-if="hover"
icon
color="error"
flat
@click="deleteMedia(media.id)"
>
<v-icon>delete</v-icon>
</v-btn>
</v-img>
</v-hover>
</v-card>
</v-flex>
</v-layout>
</v-container>
<v-divider />
<v-card-actions>
<v-spacer />
<v-btn
round
color="primary"
:loading="loading"
@click="save"
>
Salvar
</v-btn>
</v-card-actions>
</v-card>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
middleware: 'auth',
name: 'AddMediaModal',
props: {
// eslint-disable-next-line vue/require-default-prop
medias: { type: Array },
room: { type: Object, required: true }
},
data() {
return {
errors: {},
loading: false,
};
},
created() {
console.log('minha props na modal:' + this.medias);
},
methods: {
save() {
const data = {
...this.user,
};
this.loading = true;
this.$axios.post(`register`, data).then((response) => {
this.data = response.data.data;
this.setSnack('Dados salvos com sucesso!');
this.$emit('add', this.data);
this.loading = false;
console.log(this.data);
})
.catch((error) => {
this.setSnack('error');
this.errors = error.response.data.errors;
this.loading = false;
});
},
close() {
this.$emit('closeAddMedias');
},
deleteMedia(id) {
console.log(id);
if (confirm('Tem certeza que deseja excluir essa imagem?')) {
const index = this.medias.indexOf(id);
this.medias.splice(index, 1);
this.$axios.delete(`room/${this.room.id}/medias/${id}`).then((response) => {
// this.$router.push({ name: 'users' });
this.setSnack('imagem deletada com sucesso!');
})
.catch((error) => {
this.setSnack('error');
this.errors = error.response.data.errors;
this.loading = false;
});
}
},
...mapMutations({
setSnack: 'snackbar/setSnack'
}),
}
};
</script>
@tiagomatosweb
Copy link

tiagomatosweb commented Jun 11, 2019 •
edited by elinardo10
Loading 

{
   [
    { 
      "id": 1, 
      "name": "English",
      "meta": { 
        "title": "Title in English",
        "address": "Address",
        "description": "Description"
      },
      "rooms": [
        { 
          "name": "Room name in Enlighs",
          "description": "Room description in English"
        }
      ]
    },
    { 
      "id": 1, 
      "name": "Portuguese",
      "meta": { 
        "title": "",
        "address": "",
        "description": ""
      },
      "rooms": []
    },
    { 
      "id": 1, 
      "name": "Espanhol",
      "meta": { 
        "title": "Título em Espanhol",
        "address": "",
        "description": ""
      },
      "rooms": [
        { 
          "name": "Room 1",
          "description": "descrição"
        },
        { 
          "name": "2",
          "description": "Descricao"
        }
      ]
    }
  ]
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment