Support reporting both rooms and individual events

src/components/ReportRoomOrEventDialog.vue

@@ -0,0 +1,67 @@
+<template>
+  <v-dialog v-model="showDialog" class="ma-0 pa-0" :width="$vuetify.display.smAndUp ? '688px' : '95%'"
+    scroll-strategy="none">
+    <div class="dialog-content text-center">
+      <h2 class="dialog-title">{{ $t("room_info.report") }}</h2>
+      <div class="dialog-text">{{ (eventId == null) ? $t("room_info.report_info") : $t("room_info.report_event_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: "ReportRoomOrEventDialog",
+  extends: RoomDialogBase,
+  props: {
+    // If eventId == null then report Room, otherwise report this event
+    eventId: {
+      type: String,
+      default: function () {
+        return null;
+      },
+    },
+  },
+  data() {
+    return {
+      reason: ""
+    };
+  },
+
+  methods: {
+    onReport() {
+      let promise = undefined;
+      if (this.eventId) {
+        promise = this.$matrix.matrixClient.reportEvent(this.room.roomId, this.eventId, -100, this.reason)
+      }
+      else {
+        promise = this.$matrix.matrixClient.reportRoom(this.room.roomId, this.reason);
+      }
+      promise.then(() => {
+        this.showDialog = false;
+      })
+        .catch((err) => {
+          console.log("Error reporting", err);
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@use "@/assets/css/chat.scss" as *;
+</style>