create new folder

This commit is contained in:
Nazar Kanaev 2020-08-10 17:02:13 +01:00
parent efec1335f5
commit 1b70c880a8
2 changed files with 39 additions and 19 deletions

View File

@ -244,8 +244,11 @@
<form action="" @submit.prevent="createFeed(event)" class="mt-4"> <form action="" @submit.prevent="createFeed(event)" class="mt-4">
<label for="feed-url">URL</label> <label for="feed-url">URL</label>
<input id="feed-url" name="url" type="url" class="form-control" required autocomplete="off" :readonly="feedNewChoice.length > 0"> <input id="feed-url" name="url" type="url" class="form-control" required autocomplete="off" :readonly="feedNewChoice.length > 0">
<label for="feed-folder" class="mt-3">Folder</label> <label for="feed-folder" class="mt-3 d-block">
<select class="form-control" id="feed-folder" name="folder_id"> Folder
<a href="#" class="float-right text-decoration-none" @click.prevent="createNewFeedFolder()">new folder</a>
</label>
<select class="form-control" id="feed-folder" name="folder_id" ref="newFeedFolder">
<option value=""></option> <option value=""></option>
<option :value="folder.id" v-for="folder in folders">{{ folder.title }}</option> <option :value="folder.id" v-for="folder in folders">{{ folder.title }}</option>
</select> </select>
@ -305,16 +308,20 @@
<b-dropdown-item @click.prevent="renameFeed(feed)">Rename</b-dropdown-item> <b-dropdown-item @click.prevent="renameFeed(feed)">Rename</b-dropdown-item>
<b-dropdown-divider v-if="folders.length"></b-dropdown-divider> <b-dropdown-divider v-if="folders.length"></b-dropdown-divider>
<b-dropdown-header v-if="folders.length">Move to...</b-dropdown-header> <b-dropdown-header v-if="folders.length">Move to...</b-dropdown-header>
<b-dropdown-item <b-dropdown-item @click="moveFeed(feed, null)" v-if="feed.folder_id">
v-if="folder.id != feed.folder_id" <span class="text-muted">---</span>
v-for="folder in folders" </b-dropdown-item>
@click.prevent="moveFeed(feed, folder)"> <b-dropdown-item-button
v-if="folder.id != feed.folder_id"
v-for="folder in folders"
@click="moveFeed(feed, folder)">
<span class="icon mr-1">{% inline "folder.svg" %}</span>
{{ folder.title }} {{ folder.title }}
</b-dropdown-item> </b-dropdown-item-button>
<b-dropdown-item <b-dropdown-item-button @click="moveFeedToNewFolder(feed)">
@click.prevent="moveFeed(feed, null)" v-if="feed.folder_id"> <span class="text-muted icon mr-1">{% inline "plus.svg" %}</span>
<span class="text-muted">Uncategorized</span> <span class="text-muted">New Folder</span>
</b-dropdown-item> </b-dropdown-item-button>
<b-dropdown-divider></b-dropdown-divider> <b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item class="dropdown-danger" <b-dropdown-item class="dropdown-danger"
@click.prevent="deleteFeed(feed)"> @click.prevent="deleteFeed(feed)">

View File

@ -307,7 +307,7 @@ var vm = new Vue({
return query return query
}, },
refreshFeeds: function() { refreshFeeds: function() {
Promise return Promise
.all([api.folders.list(), api.feeds.list()]) .all([api.folders.list(), api.feeds.list()])
.then(function(values) { .then(function(values) {
vm.folders = values[0] vm.folders = values[0]
@ -362,13 +362,26 @@ var vm = new Vue({
feed.folder_id = folder_id feed.folder_id = folder_id
}) })
}, },
createFolder: function(event) { moveFeedToNewFolder: function(feed) {
var form = event.target var title = prompt('Enter folder name:')
var titleInput = form.querySelector('input[name=title]') if (!title) return
var data = {'title': titleInput.value} api.folders.create({'title': title}).then(function(folder) {
api.folders.create(data).then(function(result) { api.feeds.update(feed.id, {folder_id: folder.id}).then(function() {
vm.folders.push(result) vm.refreshFeeds()
titleInput.value = '' })
})
},
createNewFeedFolder: function() {
var title = prompt('Enter folder name:')
if (!title) return
api.folders.create({'title': title}).then(function(result) {
vm.refreshFeeds().then(function() {
vm.$nextTick(function() {
if (vm.$refs.newFeedFolder) {
vm.$refs.newFeedFolder.value = result.id
}
})
})
}) })
}, },
renameFolder: function(folder) { renameFolder: function(folder) {