logout

Author: rockstarr-programmerr

src/components/HelloWorld.vue

@@ -0,0 +1,61 @@
+<template>
+  <v-avatar
+    :color="user.avatar !== null ? 'white' : backgroundColor"
+    v-bind="$attrs"
+  >
+    <v-img
+      v-if="user.avatar !== null"
+      :src="user.avatar"
+      :alt="user.name"
+    >
+      <template #placeholder>
+        <v-row
+          class="fill-height ma-0"
+          justify="center"
+          align="center"
+        >
+          <v-progress-circular
+            indeterminate
+            color="primary"
+          ></v-progress-circular>
+        </v-row>
+      </template>
+    </v-img>
+    <span
+      v-else
+      class="white--text"
+      :style="{ fontSize }"
+    >
+      {{ user.name.charAt(0) }}
+    </span>
+  </v-avatar>
+</template>
+
+<script lang="ts">
+import { User } from '@/interfaces/user'
+import { Vue, Component, Prop } from 'vue-property-decorator'
+import { mapGetters } from 'vuex'
+
+@Component({
+  computed: {
+    ...mapGetters({
+      user: 'account/loggedInUser'
+    })
+  }
+})
+export default class KLAvatar extends Vue {
+  @Prop({ type: String, default: 'secondary' }) readonly backgroundColor!: string
+
+  user!: User
+
+  get fontSize (): string {
+    let imgSize: number | string = this.$attrs.size || '48'
+    imgSize = parseInt(imgSize) * 0.5
+    return imgSize.toString() + 'px'
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/components/KLAvatar.vue

@@ -0,0 +1,54 @@
+<template>
+  <v-dialog
+    v-model="localValue"
+    width="500"
+  >
+    <v-card>
+      <v-card-title>
+        Please confirm
+      </v-card-title>
+      <v-card-text>
+        <slot></slot>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn
+          text
+          @click="$emit('cancel')"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          color="primary"
+          depressed
+          :loading="loading"
+          @click="$emit('confirm')"
+        >
+          Confirm
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+@Component
+export default class KLDialogConfirm extends Vue {
+  @Prop(Boolean) readonly value!: boolean
+  @Prop(Boolean) readonly loading!: boolean
+
+  get localValue (): boolean {
+    return this.value
+  }
+
+  set localValue (value: boolean) {
+    this.$emit('input', value)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/components/KLDialogConfirm.vue

@@ -75,47 +75,27 @@
         </v-tabs>
 
         <router-view v-if="classroomFound" class="mt-5"></router-view>
-      </div>
-    </v-container>
 
-    <v-dialog
-      v-model="confirmDelete"
-      width="500"
-    >
-      <v-card>
-        <v-card-title>
-          Please confirm
-        </v-card-title>
-        <v-card-text>
-          <p>
-            You are deleting classroom <strong>{{ classroom.name }}</strong>.
-          </p>
-          <div class="error--text">
-            <v-icon color="error">
-              mdi-alert-outline
-            </v-icon>
-            This cannot be undone!
+        <KLDialogConfirm
+          v-model="confirmDelete"
+          :loading="deleting"
+          @confirm="deleteClassroom"
+          @cancel="confirmDelete = false"
+        >
+          <div>
+            <p>
+              You are deleting classroom <strong>{{ classroom.name }}</strong>.
+            </p>
+            <div class="error--text">
+              <v-icon color="error">
+                mdi-alert-outline
+              </v-icon>
+              This cannot be undone!
+            </div>
           </div>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn
-            text
-            @click="confirmDelete = false"
-          >
-            Cancel
-          </v-btn>
-          <v-btn
-            color="primary"
-            depressed
-            :loading="deleting"
-            @click="deleteClassroom"
-          >
-            Confirm
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
+        </KLDialogConfirm>
+      </div>
+    </v-container>
   </LayoutDefault>
 </template>
 
@@ -125,10 +105,12 @@ import { unexpectedExc } from '@/utils'
 import { Vue, Component } from 'vue-property-decorator'
 import { mapMutations, mapState } from 'vuex'
 import LayoutDefault from './LayoutDefault.vue'
+import KLDialogConfirm from '@/components/KLDialogConfirm.vue'
 
 @Component({
   components: {
-    LayoutDefault
+    LayoutDefault,
+    KLDialogConfirm
   },
   computed: {
     ...mapState('classroom', {

src/layouts/LayoutClassroomTeacher.vue

@@ -24,9 +24,17 @@
         <router-link
           v-else
           :to="{ name: 'MyInfo' }"
-          class="white--text"
+          class="white--text user-info"
         >
-          {{ user.name }}
+          <v-btn
+            large
+            text
+          >
+            <KLAvatar size="40"></KLAvatar>
+            <span class="ml-3">
+              {{ user.name }}
+            </span>
+          </v-btn>
         </router-link>
       </div>
     </v-app-bar>
@@ -57,15 +65,25 @@
 import { User } from '@/interfaces/user'
 import { Vue, Component } from 'vue-property-decorator'
 import { mapGetters } from 'vuex'
+import KLAvatar from '@/components/KLAvatar.vue'
 
 @Component({
   computed: {
     ...mapGetters({
       user: 'account/loggedInUser'
     })
+  },
+  components: {
+    KLAvatar
   }
 })
 export default class LayoutDefault extends Vue {
   user!: User
 }
 </script>
+
+<style lang="scss" scoped>
+.user-info {
+  text-decoration: none;
+}
+</style>