feat(spaces/projects): add validation on space/project creation

bimdata · Jan 29, 2021 · 5fa2b68 · 5fa2b68
1 parent 48893c9
commit 5fa2b68
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 12 deletions.
diff --git a/src/components/project-creation-card/ProjectCreationCard.scss b/src/components/project-creation-card/ProjectCreationCard.scss
@@ -32,6 +32,7 @@
     width: 100%;
     height: 100%;
     padding: $spacing-unit;
+    padding-top: 32px;
 
     &__title {
       position: absolute;

diff --git a/src/components/project-creation-card/ProjectCreationCard.vue b/src/components/project-creation-card/ProjectCreationCard.vue
@@ -21,6 +21,8 @@
           class="creation-form__input"
           :placeholder="$t('Projects.ProjectCreationCard.inputName')"
           v-model="newProject.name"
+          :error="error"
+          :errorMessage="errorMessage"
         />
         <BIMDataButton fill radius color="primary"
           class="creation-form__submit-btn"
@@ -66,14 +68,22 @@ export default {
 
     const loading = ref(false);
     const nameInput = ref(null);
-    const newProject = reactive({ name: '' });
 
+    const newProject = reactive({ name: '' });
+    const error = ref(false);
+    const errorMessage = ref('');
     const createProject = () => {
-      loading.value = true;
-      create(currentSpace.value, newProject).then(() => {
-        loading.value = false;
-        closeCreationForm();
-      });
+      if (newProject.name) {
+        loading.value = true;
+        create(currentSpace.value, newProject).then(() => {
+          loading.value = false;
+          closeCreationForm();
+        });
+      } else {
+        nameInput.value.focus();
+        error.value = true;
+        errorMessage.value = 'You must provide a name for the project !';
+      }
     };
 
     const showCreationForm = ref(false);
@@ -82,12 +92,16 @@ export default {
       () => setTimeout(() => nameInput.value.focus(), 400)
     };
     const closeCreationForm = () => {
-      showCreationForm.value = false;
       newProject.name = '';
+      error.value = false;
+      errorMessage.value = '';
+      showCreationForm.value = false;
     };
 
     return {
       // References
+      error,
+      errorMessage,
       loading,
       nameInput,
       newProject,

diff --git a/src/components/space-creation-card/SpaceCreationCard.scss b/src/components/space-creation-card/SpaceCreationCard.scss
@@ -1,4 +1,5 @@
 .space-creation-card {
+  position: relative;
   width: $platform-space-card-width;
   height: $platform-space-card-height;
   box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
@@ -25,6 +26,10 @@
           color: $color-primary;
           &--square {
             border-color: $color-primary;
+            background-color: $color-primary;
+          }
+          &--text {
+            margin-bottom: 0;
           }
         }
       }

diff --git a/src/components/space-creation-card/SpaceCreationCard.vue b/src/components/space-creation-card/SpaceCreationCard.vue
@@ -18,6 +18,8 @@
           <BIMDataInput ref="nameInput"
             :placeholder="$t('Spaces.SpaceCreationCard.inputName')"
             v-model="newSpace.name"
+            :error="error"
+            :errorMessage="errorMessage"
           />
           <BIMDataButton fill radius color="primary"
             @click="createSpace">
@@ -57,16 +59,27 @@ export default {
     const loading = ref(false);
     const nameInput = ref(null);
     const newSpace = reactive({ name: '' });
+    const error = ref(false);
+    const errorMessage = ref('');
 
     const createSpace = () => {
-      loading.value = true;
-      create(newSpace).then(() => {
-        loading.value = false;
-        close();
-      });
+      if (newSpace.name) {
+        loading.value = true;
+        create(newSpace).then(() => {
+          loading.value = false;
+          close();
+        });
+      } else {
+        nameInput.value.focus();
+        error.value = true;
+        errorMessage.value = 'You must provide a name for the space !';
+      }
     };
     
     const close = () => {
+      newSpace.name = '';
+      error.value = false;
+      errorMessage.value = '';
       emit('close');
     };
 
@@ -76,6 +89,8 @@ export default {
 
     return {
       // References
+      error,
+      errorMessage,
       loading,
       nameInput,
       newSpace,