Setup data in NewSmile, add ProgressBar

2 files changed, 34 insertions, 3 deletions

diff --git a/client/src/main.js b/client/src/main.js
index 13ce79d..76a71b3 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -3,11 +3,14 @@ import App from './App.vue';
 import router from './router'
 
 import PrimeVue from 'primevue/config';
+import ToastService from 'primevue/toastservice';
 import Menubar from 'primevue/menubar';
 import Divider from 'primevue/divider';
 import InputText from 'primevue/inputtext';
 import Button from 'primevue/button';
 import Card from 'primevue/card';
+import Toast from 'primevue/toast';
+import ProgressBar from 'primevue/progressbar';
 
 import 'primevue/resources/themes/lara-dark-blue/theme.css';
 import 'primevue/resources/primevue.min.css';
@@ -18,10 +21,13 @@ const app = createApp(App);
 app.use(router);
 
 app.use(PrimeVue);
+app.use(ToastService);
 app.component('Divider', Divider);
 app.component('Menubar', Menubar);
 app.component('InputText', InputText);
 app.component('Button', Button);
 app.component('Card', Card);
+app.component('Toast', Toast);
+app.component('ProgressBar', ProgressBar);
 
 app.mount('#app');
diff --git a/client/src/views/NewSmile.vue b/client/src/views/NewSmile.vue
index 4a5e700..aaa3e44 100644
--- a/client/src/views/NewSmile.vue
+++ b/client/src/views/NewSmile.vue
@@ -14,16 +14,41 @@
       </div>
       <div class="col-12 md:col-6 flex align-items-center justify-content-center">
         <div class="p-inputgroup">
-          <Button icon="pi pi-user-plus" />
-          <InputText placeholder="Name" />
-          <Button label="Create" class="p-button-success" />
+          <InputText v-model="name" placeholder="Name" />
+          <Button @click="createSmile"
+                  icon="pi pi-user-plus" label="Create" class="p-button-success" />
         </div>
       </div>
     </div>
+    <ProgressBar v-if="showProgress" mode="indeterminate" style="height: .4em;" />
   </div>
+
+  <Toast />
 </div>
 </template>
 
+<script>
+export default {
+    data() {
+        return {
+            name: '',
+            showProgress: false
+        }
+    },
+    methods: {
+        createSmile() {
+            if (this.name === '') {
+                this.$toast.add({severity:'warn', summary: 'Invalid Name',
+                                 detail:'Empty', life: 2000});
+                return;
+            }
+            this.showProgress = true;
+            console.log('Name', this.name);
+        }
+    }
+}
+</script>
+
 <style scoped>
 #subtitle {
     font-size: 1.5rem;