rooms create as dialog.

client/src/components/RoomsCreate.vue

@@ -62,9 +62,9 @@
       <v-btn
         color="gray darken-1"
         text
-        @click="Clear"
+        @click="Close"
       >
-        Clear
+        Close
       </v-btn>
       <v-btn
         color="green"
@@ -96,12 +96,13 @@ export default class RoomsCreate extends Vue {
       await this.$store.dispatch('ROOMS_CREATE', this.data)
     } finally {
       this.loading = false
+      this.$emit('finished', true)
     }
   }
 
-  Clear() {
+  Close() {
     this.data = {}
+    this.$emit('finished', true)
   }
-
 }
 </script>

client/src/views/Home.vue

@@ -1,21 +1,49 @@
 <template>
   <v-container>
-    <v-btn @click="LoadRooms" class="mb-3" color="green" icon><v-icon>mdi-refresh</v-icon></v-btn>
+    <v-row>
+      <v-col>
+        <v-btn @click="LoadRooms" class="mb-3" color="green" icon><v-icon>mdi-refresh</v-icon></v-btn>
+      </v-col>
+      <v-col class="text-right">
+        <v-dialog
+          v-model="dialog"
+          persistent
+          max-width="600px"
+        >
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn
+              v-bind="attrs"
+              v-on="on"
+              color="success"
+              dark
+            >
+              + Add new
+            </v-btn>
+          </template>
+
+          <RoomsCreate @finished="dialog = false" />
+        </v-dialog>
+      </v-col>
+    </v-row>
 
     <RoomsList :loading="loading" />
+  
   </v-container>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import RoomsList from '@/components/RoomsList.vue'
+import RoomsCreate from '@/components/RoomsCreate.vue'
 
 @Component({
   components: {
-    RoomsList
+    RoomsList,
+    RoomsCreate,
   }
 })
 export default class Home extends Vue {
+  private dialog = false
   private loading = false
 
   async LoadRooms() {