keanu-weblite/src/components/ReportRoomDialog.vue

<template>
  <v-dialog
    v-model="showDialog"
    class="ma-0 pa-0"
    :width="$vuetify.display.smAndUp ? '688px' : '95%'"
  >
    <div class="dialog-content text-center">
      <h2 class="dialog-title">{{ $t("room_info.report") }}</h2>
      <div class="dialog-text">{{ $t("room_info.report_info") }}</div>
      <v-text-field v-model="reason" :label="$t('room_info.report_reason')"></v-text-field>
      <v-container fluid>
        <v-row cols="12">
          <v-col cols="6">
            <v-btn
              id="btn-back"
              variant="flat"
              block
              class="text-button"
              @click="showDialog = false"
              >{{ $t("menu.cancel") }}</v-btn
            >
          </v-col>
          <v-col cols="6" align="center">
            <v-btn
              id="btn-report"
              color="red"
              variant="flat"
              block
              class="filled-button"
              @click.stop="onReport()"
              >{{ $t("room_info.report") }}</v-btn
            >
          </v-col>
        </v-row>
      </v-container>
    </div>
  </v-dialog>
</template>
<script>
import RoomDialogBase from "./RoomDialogBase.vue";

export default {
  name: "ReportRoomDialog",
  extends: RoomDialogBase,
  data() {
    return {
      reason: ""
    };
  },

  methods: {
    onReport() {
      const events = this.room.getLiveTimeline().getEvents();
      if (events && events.length > 0) {
        const eventId = events[events.length - 1].getId();
        // const path = utils.encodeUri("/rooms/$roomId/report", {
        //     $roomId: this.room.roomId,
        // });
        // this.$matrix.matrixClient.http.authedRequest("POST", path, undefined, { reason: this.reason }, { prefix: "/_matrix/client/v3"})
        this.$matrix.matrixClient.reportEvent(this.room.roomId, eventId, -100, this.reason)
        .then(() => {
          this.showDialog = false;
        })
        .catch((err) => {
          console.log("Error reporting", err);
        });
      }
    },
  },
};
</script>

<style lang="scss">
@use "@/assets/css/chat.scss" as *;
</style>