From 95b830ee1a09dabb12f8cfd027998a912b282dae Mon Sep 17 00:00:00 2001
From: Nazar Kanaev <nkanaev@live.com>
Date: Fri, 26 Jun 2020 12:25:59 +0100
Subject: [PATCH] basic feed management ui

---
 template/index.html                | 80 ++++++++++++++++++++++--------
 template/static/images/folder.svg  |  1 +
 template/static/images/trash-2.svg |  1 +
 template/static/javascripts/app.js | 15 +++++-
 4 files changed, 76 insertions(+), 21 deletions(-)
 create mode 100644 template/static/images/folder.svg
 create mode 100644 template/static/images/trash-2.svg

diff --git a/template/index.html b/template/index.html
index d1c3ce5..6b7109e 100644
--- a/template/index.html
+++ b/template/index.html
@@ -95,34 +95,74 @@
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="card-header px-0">
+                        <button type="button"
+                                class="close mr-3"
+                                @click="settingsShow = false">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
                         <ul class="nav nav-tabs card-header-tabs mx-0 px-3">
                             <li class="nav-item">
-                                <a class="nav-link" href="#" :class="{active: settings=='new'}" @click.prevent="settings='new'">New Feed</a>
+                                <a class="nav-link" href="#" :class="{active: settings=='create'}" @click.prevent="settings='create'">New Feed</a>
                             </li>
                             <li class="nav-item">
                                 <a class="nav-link" href="#" :class="{active: settings=='manage'}" @click.prevent="settings='manage'">Manage Feeds</a>
                             </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#" :class="{active: settings=='import'}" @click.prevent="settings='import'">Import/Export</a>
+                            </li>
                         </ul>
                     </div>
-                    <div class="modal-body" v-if="settings=='new'">
-                        <label for="feed-url">URL</label>
-                        <input id="feed-url" type="text" class="form-control">
-                        <label for="feed-folder" class="mt-3">Folder</label>
-                        <select class="form-control" id="feed-folder">
-                            <option value=""></option>
-                            <option :value="folder.id" v-for="folder in folders">{{ folder.title }}</option>
-                        </select>
-                        <button class="btn btn-block btn-outline-secondary mt-3" type="button">Add</button>
-                    </div>
-                    <div class="modal-body" v-if="settings=='manage'">
-                        manage ui
-                    </div>
-                    <div class="modal-footer">
-                        <button type="button"
-                                class="close mr--3"
-                                @click="settingsShow = false">
-                            <span aria-hidden="true">&times;</span>
-                        </button>
+                    <div class="modal-body">
+                        <div v-if="settings=='create'">
+                            <label for="feed-url">URL</label>
+                            <input id="feed-url" type="text" class="form-control">
+                            <label for="feed-folder" class="mt-3">Folder</label>
+                            <select class="form-control" id="feed-folder">
+                                <option value=""></option>
+                                <option :value="folder.id" v-for="folder in folders">{{ folder.title }}</option>
+                            </select>
+                            <button class="btn btn-block btn-outline-secondary mt-3" type="button">Add</button>
+                        </div>
+                        <div v-else-if="settings=='manage'">
+                            <div v-for="folder in foldersWithFeeds">
+                                <p><strong>{{ folder.title || "Uncategorized" }}</strong></p>
+                                <div v-for="feed in folder.feeds">
+                                    {{ feed.title }}
+
+                                    <div class="dropdown d-inline-block">
+                                        <button class="btn btn-link dropdown-toggle" @click="settingsManageDropdown='feed:'+feed.id">
+                                            <img src="./static/images/folder.svg">
+                                        </button>
+                                        <div class="dropdown-menu show py-0 overflow-hidden"
+                                             style="top: 0; left: 0; position: absolute; transform: translate3d(0px, 38px, 0px);"
+                                             v-if="settingsManageDropdown=='feed:'+feed.id">
+                                            <a href="#" class="dropdown-item px-3"
+                                               @click.prevent="moveFeed(feed, null)" v-if="feed.folder_id">---</a>
+                                            <a href="#" class="dropdown-item px-3"
+                                               v-if="folder.id != feed.folder_id"
+                                               v-for="folder in folders"
+                                               @click.prevent="moveFeed(feed, folder)">
+                                                {{ folder.title }}
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <button class="btn btn-link">
+                                        <img src="./static/images/trash-2.svg">
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="mt-4">
+                                <label for="">New Folder</label>
+                                <div class="input-group mb-3">
+                                    <input type="text" class="form-control" v-model="newFolderTitle">
+                                    <div class="input-group-append">
+                                        <button class="btn btn-outline-secondary" @click="newFolderCreate()">Add</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-else-if="settings=='import'">
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/template/static/images/folder.svg b/template/static/images/folder.svg
new file mode 100644
index 0000000..134458b
--- /dev/null
+++ b/template/static/images/folder.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
\ No newline at end of file
diff --git a/template/static/images/trash-2.svg b/template/static/images/trash-2.svg
new file mode 100644
index 0000000..f24d55b
--- /dev/null
+++ b/template/static/images/trash-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
\ No newline at end of file
diff --git a/template/static/javascripts/app.js b/template/static/javascripts/app.js
index d1fd256..c250a9a 100644
--- a/template/static/javascripts/app.js
+++ b/template/static/javascripts/app.js
@@ -32,7 +32,9 @@ var vm = new Vue({
       ],
       'itemSelected': null,
       'settingsShow': false,
-      'settings': 'new'
+      'settings': 'manage',
+      'settingsManageDropdown': null,
+      'newFolderTitle': null,
     }
   },
   computed: {
@@ -89,6 +91,17 @@ var vm = new Vue({
       var d = new Date(timestamp_s * 1000)
       return d.getDate() + '/' + d.getMonth() + '/' + d.getFullYear()
     },
+    moveFeed: function(feed, folder) {
+      feed.folder_id = folder ? folder.id : null
+      this.settingsManageDropdown = null
+    },
+    newFolderCreate: function() {
+      this.folders.push({
+        id: Math.random() * 10000,
+        title: this.newFolderTitle,
+        is_expanded: true,
+      })
+    },
   }
 })
 vm.settingsShow = true