Feature: Add board creation

+ Refactor form-error settings and reset function

pinry-spa/src/components/BoardEdit.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="board-modal">
+    <form action="">
+      <div class="modal-card" style="width: auto">
+        <header class="modal-card-head">
+          <p class="modal-card-title">Board Create</p>
+        </header>
+        <section class="modal-card-body">
+              <b-field label="Name"
+                       :type="form.name.type"
+                       :message="form.name.error">
+                <b-input
+                  type="text"
+                  v-model="form.name.value"
+                  placeholder="board name"
+                  maxlength="128"
+                  >
+                </b-input>
+              </b-field>
+        </section>
+        <footer class="modal-card-foot">
+          <button class="button" type="button" @click="$parent.close()">Close</button>
+          <button
+            @click="createBoard"
+            class="button is-primary">Create Board
+          </button>
+        </footer>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import API from './api';
+import formUtils from './utils/form';
+
+const fields = ['name'];
+
+export default {
+  name: 'BoardEditModal',
+  data() {
+    const model = formUtils.fromFields(fields);
+    return {
+      form: model.form,
+      helper: model,
+    };
+  },
+  methods: {
+    createBoard() {
+      const self = this;
+      const promise = API.Board.create(this.form.name.value);
+      promise.then(
+        (resp) => {
+          self.$emit('boardCreated', resp);
+          self.$parent.close();
+        },
+        (resp) => {
+          Object.entries(resp.data).forEach(
+            (errorTuple) => {
+              const [key, error] = errorTuple;
+              let msg;
+              if (Array.isArray(error)) {
+                [msg] = error;
+              } else {
+                msg = error;
+              }
+              this.helper.markFieldAsDanger(key, msg);
+            },
+          );
+        },
+      );
+    },
+  },
+};
+</script>

pinry-spa/src/components/LoginForm.vue

@@ -43,40 +43,24 @@
 
 <script>
 import api from './api';
+import form from './utils/form';
+
+const fields = ['username', 'password'];
 
 export default {
   name: 'LoginForm',
   data() {
-    return {
-      username: {
-        value: null,
-        error: null,
-        type: null,
-      },
-      password: {
-        value: null,
-        error: null,
-        type: null,
-      },
-    };
+    return form.createFormModel(fields);
   },
   methods: {
     resetStatus() {
-      this.resetField('username');
-      this.resetField('password');
-    },
-    resetField(fieldName) {
-      this[fieldName].type = 'is-info';
-      this[fieldName].error = null;
-    },
-    markFieldAsDanger(fieldName, errorMsg) {
-      this[fieldName].error = errorMsg;
-      this[fieldName].type = 'is-danger';
+      form.FormHelper(this, fields).resetAllFields();
     },
     doLogin() {
       this.resetStatus();
       const self = this;
       const promise = api.User.logIn(self.username.value, self.password.value);
+      const helper = form.FormHelper(self);
       promise.then(
         (user) => {
           self.$emit('login.succeed', user);
@@ -84,10 +68,10 @@ export default {
         },
         (resp) => {
           if (resp.data.username) {
-            self.markFieldAsDanger('username', resp.data.username);
+            helper.markFieldAsDanger('username', resp.data.username);
           }
           if (resp.data.password) {
-            self.markFieldAsDanger('password', resp.data.password);
+            helper.markFieldAsDanger('password', resp.data.password);
           }
         },
       );

pinry-spa/src/components/PHeader.vue

@@ -33,6 +33,7 @@
                   Pin
                 </a>
                 <a
+                  @click="createBoard"
                   class="navbar-item">
                   Board
                 </a>
@@ -141,6 +142,9 @@ export default {
     createPin() {
       modals.openPinCreate(this, this.onPinCreated);
     },
+    createBoard() {
+      modals.openBoardCreate(this);
+    },
     signUp() {
       modals.openSignUp(this, this.onSignUpSucceed);
     },

pinry-spa/src/components/api.js

@@ -3,6 +3,28 @@ import storage from './utils/storage';
 
 const API_PREFIX = '/api/v2/';
 
+const Board = {
+  create(name) {
+    const url = `${API_PREFIX}boards/`;
+    const data = { name };
+    return new Promise(
+      (resolve, reject) => {
+        axios.post(url, data).then(
+          (resp) => {
+            if (resp.status !== 201) {
+              reject(resp);
+            }
+            resolve(resp.data);
+          },
+          (error) => {
+            reject(error.response);
+          },
+        );
+      },
+    );
+  },
+};
+
 const Pin = {
   create(jsonData) {
     const url = `${API_PREFIX}pins/`;
@@ -192,6 +214,7 @@ const User = {
 
 export default {
   Pin,
+  Board,
   fetchPin,
   fetchPins,
   fetchPinsForBoard,

pinry-spa/src/components/modals.js

@@ -1,6 +1,7 @@
 import PinCreateModal from './pin_create/PinCreateModal.vue';
 import LoginForm from './LoginForm.vue';
 import SignUpForm from './SignUpForm.vue';
+import BoardEdit from './BoardEdit.vue';
 
 
 function openPinCreate(vm, onCreate) {
@@ -16,6 +17,16 @@ function openPinCreate(vm, onCreate) {
   );
 }
 
+function openBoardCreate(vm) {
+  vm.$buefy.modal.open(
+    {
+      parent: vm,
+      component: BoardEdit,
+      hasModalCard: true,
+    },
+  );
+}
+
 function openLogin(vm, onSucceed) {
   vm.$buefy.modal.open({
     parent: vm,
@@ -39,6 +50,7 @@ function openSignUp(vm, onSignUpSucceed) {
 }
 
 export default {
+  openBoardCreate,
   openPinCreate,
   openLogin,
   openSignUp,

pinry-spa/src/components/utils/form.js

@@ -0,0 +1,52 @@
+
+function createFormModel(fields) {
+  const form = {};
+  fields.forEach(
+    (fieldName) => {
+      form[fieldName] = {
+        value: null,
+        error: null,
+        type: null,
+      };
+    },
+  );
+  return form;
+}
+
+
+function FormHelper(form, fields = []) {
+  const self = form;
+  function resetField(fieldName) {
+    self[fieldName].type = 'is-info';
+    self[fieldName].error = null;
+  }
+  function markFieldAsDanger(fieldName, errorMsg) {
+    self[fieldName].error = errorMsg;
+    self[fieldName].type = 'is-danger';
+  }
+  function resetAllFields() {
+    fields.forEach(
+      (fieldName) => {
+        resetField(fieldName);
+      },
+    );
+  }
+  return {
+    form,
+    fields,
+    markFieldAsDanger,
+    resetField,
+    resetAllFields,
+  };
+}
+
+function fromFields(fields) {
+  const form = createFormModel(fields);
+  return FormHelper(form, fields);
+}
+
+export default {
+  createFormModel,
+  FormHelper,
+  fromFields,
+};