create folder

server/handlers.go

@@ -47,11 +47,32 @@ func StatusHandler(rw http.ResponseWriter, req *http.Request) {
 	})
 }
 
+type NewFolder struct {
+	Title string `json:"title"`
+}
+
 func FolderListHandler(rw http.ResponseWriter, req *http.Request) {
 	if req.Method == "GET" {
 		list := db(req).ListFolders()
 		fmt.Println(list)
 		json.NewEncoder(rw).Encode(list)
+	} else if req.Method == "POST" {
+		var body NewFolder
+		if err := json.NewDecoder(req.Body).Decode(&body); err != nil {
+			log.Print(err)
+			rw.WriteHeader(http.StatusBadRequest)
+			return
+		}
+		if len(body.Title) == 0 {
+			rw.WriteHeader(http.StatusBadRequest)
+			writeJSON(rw, map[string]string{"error": "Folder title missing."})
+			return
+		}
+		folder := db(req).CreateFolder(body.Title)
+		rw.WriteHeader(http.StatusCreated)
+		json.NewEncoder(rw).Encode(folder)
+	} else {
+		rw.WriteHeader(http.StatusMethodNotAllowed)
 	}
 }
 

template/index.html

@@ -152,13 +152,15 @@
                     </div>
                 </div>
                 <div class="mt-5">
-                    <label for="settings-new-folder">New Folder</label>
+                    <form action="" @submit.prevent="createFolder(event)">
-                    <div class="input-group">
+                        <label for="settings-new-folder">New Folder</label>
-                        <input id="settings-new-folder" type="text" class="form-control" v-model="newFolderTitle">
+                        <div class="input-group">
-                        <div class="input-group-append">
+                            <input id="settings-new-folder" type="text" class="form-control" name="title">
-                            <button class="btn btn-outline-secondary" @click="newFolderCreate()">Add</button>
+                            <div class="input-group-append">
+                                <button class="btn btn-outline-secondary" type="submit">Add</button>
+                            </div>
                         </div>
-                    </div>
+                    </form>
                 </div>
             </div>
             <div v-else-if="settings=='import'">

template/static/javascripts/api.js

@@ -29,6 +29,9 @@
       list: function() {
         return api('get', '/api/folders').then(json)
       },
+      create: function(data) {
+        return api('post', '/api/folders', data).then(json)
+      },
     }
   }
 })()

template/static/javascripts/app.js

@@ -27,7 +27,6 @@ var vm = new Vue({
       'items': [], 
       'itemSelected': null,
       'settings': 'manage',
-      'newFolderTitle': null,
       'loading': {newfeed: 0},
     }
   },
@@ -76,11 +75,12 @@ var vm = new Vue({
     moveFeed: function(feed, folder) {
       feed.folder_id = folder ? folder.id : null
     },
-    newFolderCreate: function() {
+    createFolder: function(event) {
-      this.folders.push({
+      var form = event.target
-        id: Math.random() * 10000,
+      var data = {'title': form.querySelector('input[name=title]').value}
-        title: this.newFolderTitle,
+      var vm = this
-        is_expanded: true,
+      api.folders.create(data).then(function(result) {
+        vm.folders.push(result)
       })
     },
     renameFeed: function(feed) {