Por: Juan Andrés Núñez
Juan Andrés Núñez - juanwmedia

Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.

  • Vamos a añadir la funcionalidad de editar las salas de conversación en VueTalk.
  • Comenzaremos añadiendo un getter y un par de actions en nuestro módulo rooms en Vuex.
  • Las dos primeras funciones sirve para obtener la sala de conversación que queremos actualizar.
const getters = {
    ...
    // Method style
  getRoom: state => id => {
    return state.rooms.find(room => room.id === id);
  }
};

const actions = {
    ...
    async getRoom(context, roomID) {
      return await db
        .collection("rooms")
        .doc(roomID)
        .get();
    },
}
  • Con el getter buscamos la sala en el estado local y, en el caso de no encontrarse, lo buscamos en Cloud Firestore con la acción del mismo nombre.
  • Ahora podemos updateRoom para gestionar el proceso de actualización de la sala que estemos editando.
async updateRoom(context, { roomId, name, description, image }) {
  const roomData = {};

  if (name) {
    roomData.name = name;
  }
  if (description) {
    roomData.description = description;
  }

  roomData.image = image;

  await db
    .collection("rooms")
    .doc(roomId)
    .update(roomData);
},
  • Con lo referente al estado listo, es el momento de crear la vista UpdateRoom.vue que nos permitiría editar la sala de conversación.
  • En ella y a través de created buscamos la información de la sala de conversación haciendo uso de getRoom. Además conectamos el método local updateRoom con la acción que tiene el mismo indentificador.
<script>
export default {
  name: "EditRoom",
  async created() {
    try {
      let room = this.$store.getters["rooms/getRoom"](this.id);
      if (!room) {
        room = await this.$store.dispatch("rooms/getRoom", this.id);
        if (!room.exists) throw new Error("Could not find room");
        room = room.data();
      }
      this.room = room;
    } catch (error) {
      console.error(error.message);
      this.$toast.error(error.message);
      this.$router.push({ name: "home" });
    }
  },
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isLoading: false,
      room: null,
    };
  },
  methods: {
    async updateRoom() {
      this.isLoading = true;
      try {
        await this.$store.dispatch("rooms/updateRoom", {
          roomID: this.id,
          name: this.room.name,
          description: this.room.description
        });
        this.$toast.success("Room data updated");
      } catch (error) {
        console.error(error.message);
        this.$toast.error(error.message);
      } finally {
        this.isLoading = false;
      }
    }
  },
  computed: {
    hasDataChanged() {
      return this.room.name || this.room.description;
    }
  }
};
</script>
  • Llega el momento de añadir nueva ruta al enrutador.
{
  path: "/update/:id",
  name: "update",
  props: true,
  component: UpdateRoom,
  meta: {
    requiresAuth: true
  }

  • Y hacer utilizable añadiendo un botón en el componente RoomsComponent.vue y que sólo es visible para el administrador de cada sala.
<div class="content">
  {{ room.description }}
</div>
<nav class="buttons is-right">
  <router-link
    :to="{ name: 'update', params: { id: room.id } }"
    v-if="room.adminUid === $store.getters['user/getUserUid']"
    class="button is-small"
    >Edit</router-link
  >
</nav>

Presentación


Firebase Auth


Cloud Firestore 🔥


Cloud Storage 🗄


No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue