WS members feature

deep9c · Jul 7, 2017 · bcb3080 · bcb3080
1 parent e619a1f
commit bcb3080
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 10 deletions.
diff --git a/src/components/Comments.vue b/src/components/Comments.vue
@@ -25,7 +25,8 @@
         </ul>
         <form class="form-inline" role="form">
             <div class="form-group">
-                <input class="form-control" type="text" id="box" style="width: 300px; height: 20px" placeholder="Your comments" v-model="newcomment" v-on:focus='textboxFocus($event)' v-on:blur='textboxBlur($event)'/>
+                <input class="form-control" type="text" id="box" style="width: 300px; height: 20px" placeholder="Your comments" 
+                    v-model="newcomment" v-on:focus='textboxFocus($event)' v-on:blur='textboxBlur($event)'/>
             </div>
             <div class="form-group">
                 <!-- <button class="btn btn-default" v-on:click='submit($event)'>Add</button> -->
@@ -85,7 +86,7 @@
 
 			textboxFocus(e){
 				$(e.currentTarget).animate({
-    				width: '150px',
+    				width: '300px',
     				height: '100px'
   				}, 500, function() {
     			// Animation complete.
@@ -94,7 +95,7 @@
 
 			textboxBlur(e){
 				$(e.currentTarget).animate({
-     				width: '100px',
+     				width: '300px',
      				height: '20px'
    				}, 500, function() {
      			// Animation complete.

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
@@ -12,7 +12,7 @@
                     <a id="menu-toggle" href="#" class="glyphicon glyphicon-align-justify btn-menu toggle" v-on:click="toggleMenu($event)">
                         <i class="fa fa-bars"></i>
                     </a>
-            <a href="#">OneTask</a>
+                    <a href="#">OneTask</a>
                 </div>
       </div>
       <div id="navbar" class="collapse navbar-collapse">

diff --git a/src/components/Tasks.vue b/src/components/Tasks.vue
@@ -14,7 +14,8 @@
     							-->
 
     							<div class="list-group">
-    							<todo v-on:delete-todo="deleteTodo" v-on:complete-todo="completeTodo" v-for="(todo,index) in tasks.tasks" 
+    							<todo v-on:delete-todo="deleteTodo" v-on:complete-todo="completeTodo" v-on:edit-todo="editTodo" 
+    								v-for="(todo,index) in tasks.tasks" 
       								v-bind:todo="todo" :key="index" :todo.sync="todo" v-on:select-task="selectTask">      
   								</todo>
   								<!-- todo.sync used for completeTodo function to work -->
@@ -113,11 +114,44 @@
     		deleteTodo(todo) {
       			const todoIndex = this.tasks.tasks.indexOf(todo);
       			this.tasks.tasks.splice(todoIndex, 1);
+      			var updateTaskInputs = {
+      				operation: 'delete',
+      				workspaceid: this.selectedWsId,
+      				projectid: this.selectedProj._id,
+    				taskid: todo._id,
+    			};
+      			api.updateTask(updateTaskInputs)
+    				.then((resp)=>{
+    					console.log('updateTask resp');
+    				});
+    		},
+
+    		editTodo(todo) {
+      			console.log("editTodo() called");    			
+    			var updateTaskInputs = {
+    				operation: 'update',
+    				taskid: todo._id,
+    				title: todo.title,
+    				description: todo.description
+    			};
+    			api.updateTask(updateTaskInputs)
+    				.then((resp)=>{
+    					console.log('updateTask resp');
+    				});
     		},
 
     		completeTodo(todo){
     			console.log("completeTodo() called");
     			this.tasks.tasks[this.tasks.tasks.indexOf(todo)].status = 'completed'; 
+    			var updateTaskInputs = {
+    				operation: 'update',
+    				taskid: todo._id,
+    				status: 'completed'
+    			};
+    			api.updateTask(updateTaskInputs)
+    				.then((resp)=>{
+    					console.log('updateTask resp');
+    				});
     		},
 		},
 

diff --git a/src/components/Todo.vue b/src/components/Todo.vue
@@ -24,9 +24,7 @@
 
           <span class='badge' v-on:click="showForm">
             <i class='edit icon'></i>
-          </span>
-
-
+          </span>              
     </a>
 
     <!-- form is visible when we are in editing mode -->
@@ -41,7 +39,7 @@
           <input type='text' v-model="todo.description" >
         </div>
         <div class='ui two button attached buttons'>
-          <button class='ui basic blue button' v-on:click="hideForm">
+          <button class='ui basic blue button' v-on:click="hideForm(todo)">
             Close X
           </button>
         </div>
@@ -65,8 +63,9 @@ export default {
     showForm() {
       this.isEditing = true;
     },
-    hideForm() {
+    hideForm(todo) {
       this.isEditing = false;
+      this.$emit('edit-todo', todo);
     },
     deleteTodo(todo) {
       this.$emit('delete-todo', todo);

diff --git a/src/components/WorkspaceMembers.vue b/src/components/WorkspaceMembers.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class='ui basic content center aligned segment'>
+    <button v-on:click="openForm" v-show="!isCreating">
+      <i class='glyphicon glyphicon-plus'></i>
+    </button>
+    <div class='ui centered card' v-show="isCreating">
+      <div class='content'>
+        <div class='ui form'>
+          <div class='field'>
+            <label>Username</label>
+            <input v-model="usernameText" type='text' ref='title' defaultValue="">
+          </div>          
+          <div class='ui two button attached buttons'>
+            <button class='ui basic blue button' v-on:click="addMember">
+              Create
+            </button>
+            <button class='ui basic red button' v-on:click="closeForm">
+              Cancel
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import api from '../utils/api'
+
+export default {
+  name: 'WorkspaceMembers',
+
+  data() {
+    return {
+      usernameText: '',      
+      isCreating: false,
+    };
+  },
+
+  props: {      
+      selectedWs: {
+        type: Object,
+        required: true,
+      },      
+    },
+
+  methods: {
+    openForm() {
+      //console.log("open form");
+      this.isCreating = true;
+    },
+    closeForm() {
+      this.isCreating = false;
+    },
+    addMember() {
+      //console.log("send form " + this.usernameText.length);
+      //take WSID from prop; take userid as input; call Node... Node will respond 404 NotFound is user doesnt exist; or the user details if 200 Success
+      if (this.usernameText.length > 0) {
+        const name = this.usernameText;
+        /*this.$emit('add-project', {
+          name,
+        });*/
+
+        var addWorkspaceMemberInputs = {
+          wsid: this.selectedWs._id,
+          userid: this.usernameText
+        }
+        api.addWorkspaceMember(addWorkspaceMemberInputs)
+          .then((resp)=>{
+            console.log('addWorkspaceMember response');
+          });
+
+
+        this.usernameText='';
+      }
+      this.isCreating = false;
+    },
+  },
+};
+</script>
diff --git a/src/utils/api.js b/src/utils/api.js
@@ -100,6 +100,15 @@ export default {
       return axios.post(nodeurl + '/api/task', createTaskInputs);
     },
 
+    updateTask(updateTaskInputs){
+      return axios.put(nodeurl + '/api/task', updateTaskInputs);
+    },
+
+    /*deleteTask(deleteTaskInputs){
+      console.log('deleteTaskInputs:- ' + JSON.stringify(deleteTaskInputs));
+      return axios.delete(nodeurl + '/api/task', deleteTaskInputs);
+    },*/
+
     getComments(taskId){
       return axios.get(nodeurl + '/api/comment/' + taskId);
     },