Finish tagging

public/js/title.js

@@ -255,12 +255,22 @@ const bulkProgress = (action, el) => {
 
 const tagsComponent = () => {
 	return {
-		tags: tags,
+		loading: true,
+		tags: [],
 		newTag: '',
 		inputShown: false,
+		tid: $('.upload-field').attr('data-title-id'),
+		load() {
+			const url = `${base_url}api/tags/${this.tid}`;
+			this.request(url, 'GET', (data) => {
+				this.tags = data.tags;
+				this.loading = false;
+			});
+		},
 		add() {
 			const tag = this.newTag.trim();
-			this.request(tag, 'PUT', () => {
+			const url = `${base_url}api/tags/${this.tid}/${encodeURIComponent(tag)}`;
+			this.request(url, 'PUT', () => {
 				this.tags.push(tag);
 				this.newTag = '';
 			});
@@ -271,7 +281,8 @@ const tagsComponent = () => {
 		},
 		rm(event) {
 			const tag = event.currentTarget.id.split('-')[0];
-			this.request(tag, 'DELETE', () => {
+			const url = `${base_url}api/tags/${this.tid}/${encodeURIComponent(tag)}`;
+			this.request(url, 'DELETE', () => {
 				const idx = this.tags.indexOf(tag);
 				if (idx < 0) return;
 				this.tags.splice(idx, 1);
@@ -285,9 +296,10 @@ const tagsComponent = () => {
 				});
 			}
 		},
-		request(tag, method, cb) {
+		buildURL(tid, tag) {
-			const tid = $('.upload-field').attr('data-title-id');
+
-			const url = `${base_url}api/tags/${tid}/${encodeURIComponent(tag)}`;
+		},
+		request(url, method, cb) {
 			$.ajax({
 					url: url,
 					method: method,
@@ -295,7 +307,7 @@ const tagsComponent = () => {
 				})
 				.done(data => {
 					if (data.success)
-						cb();
+						cb(data);
 					else {
 						alert('danger', data.error);
 					}

src/routes/api.cr

@@ -160,6 +160,12 @@ class APIRouter < Router
       "ids" => "$strAry",
     }
 
+    Koa.object "tagsResult", {
+      "success" => "boolean",
+      "tags"    => "$strAry?",
+      "error"   => "string?",
+    }
+
     Koa.describe "Returns a page in a manga entry"
     Koa.path "tid", desc: "Title ID"
     Koa.path "eid", desc: "Entry ID"
@@ -685,6 +691,27 @@ class APIRouter < Router
       end
     end
 
+    Koa.describe "Gets the tags of a title"
+    Koa.path "tid", desc: "A title ID"
+    Koa.response 200, ref: "$tagsResult"
+    get "/api/tags/:tid" do |env|
+      begin
+        title = (@context.library.get_title env.params.url["tid"]).not_nil!
+        tags = title.tags
+
+        send_json env, {
+          "success" => true,
+          "tags"    => tags,
+        }.to_json
+      rescue e
+        @context.error e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
     Koa.describe "Adds a new tag to a title"
     Koa.path "tid", desc: "A title ID"
     Koa.response 200, ref: "$result"

src/routes/main.cr

@@ -132,13 +132,25 @@ class MainRouter < Router
         titles = sort_titles titles, sort_opt, username
         percentage = titles.map &.load_percentage username
 
-        layout "tags"
+        layout "tag"
       rescue e
         @context.error e
         env.response.status_code = 404
       end
     end
 
+    get "/tags" do |env|
+      tags = Storage.default.list_tags
+      encoded_tags = tags.map do |t|
+        URI.encode_www_form t, space_to_plus: false
+      end
+      counts = tags.map do |t|
+        Storage.default.get_tag_titles(t).size
+      end
+
+      layout "tags"
+    end
+
     get "/api" do |env|
       render "src/views/api.html.ecr"
     end

src/views/components/tags.html.ecr

@@ -1,12 +1,9 @@
-<script>
+<div class="uk-margin" x-data="tagsComponent()" x-cloak x-init="load()">
-  const tags = JSON.parse('<%= tags.to_json %>');
-</script>
-<div class="uk-margin" x-data="tagsComponent()" x-cloak>
   <p class="uk-text-meta" @selectstart.prevent>
   <span style="position:relative; bottom:3px; margin-right:5px;">Tags: </span>
   <template x-for="tag in tags" :key="tag">
     <span class="uk-label uk-label-primary" style="padding:2px 5px; margin:0 5px 5px 5px; text-transform:none;">
-      <a class="uk-link-reset" @click="rm($event)" :id="`${tag}-rm`"><span uk-icon="close" style="margin-right: 5px; position: relative; bottom: 1.5px;"></span></a><a class="uk-link-reset" x-text="tag" :href="`<%= base_url %>tags/${tag}`"></a>
+      <a class="uk-link-reset" @click="rm($event)" :id="`${tag}-rm`"><span uk-icon="close" style="margin-right: 5px; position: relative; bottom: 1.5px;"></span></a><a class="uk-link-reset" x-text="tag" :href="`<%= base_url %>tags/${encodeURIComponent(tag)}`"></a>
     </span>
   </template>
   <a class="uk-link-reset" style="position:relative; bottom:3px;" :uk-icon="inputShown ? 'close' : 'plus'" @click="toggleInput($nextTick)"></a>

src/views/tag.html.ecr

@@ -0,0 +1,30 @@
+<h2 class=uk-title>Tag: <%= tag %></h2>
+<p class="uk-text-meta"><%= titles.size %> <%= titles.size > 1 ? "titles" : "title" %> tagged</p>
+<div class="uk-grid-small" uk-grid>
+  <div class="uk-margin-bottom uk-width-3-4@s">
+    <form class="uk-search uk-search-default">
+      <span uk-search-icon></span>
+      <input class="uk-search-input" type="search" placeholder="Search">
+    </form>
+  </div>
+  <div class="uk-margin-bottom uk-width-1-4@s">
+    <% hash = {
+      "auto" => "Auto",
+      "time_modified" => "Date Modified",
+      "progress" => "Progress"
+    } %>
+    <%= render_component "sort-form" %>
+  </div>
+</div>
+<div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
+  <% titles.each_with_index do |item, i| %>
+    <% progress = percentage[i] %>
+    <%= render_component "card" %>
+  <% end %>
+</div>
+
+<% content_for "script" do %>
+  <%= render_component "dots-scripts" %>
+  <script src="<%= base_url %>js/search.js"></script>
+  <script src="<%= base_url %>js/sort-items.js"></script>
+<% end %>

src/views/tags.html.ecr

@@ -1,30 +1,8 @@
-<h2 class=uk-title>Tag: <%= tag %></h2>
+<h2 class=uk-title>Tags</h2>
-<p class="uk-text-meta"><%= titles.size %> titles tagged</p>
+<p class="uk-text-meta"><%= tags.size %> <%= tags.size > 1 ? "tags" : "tag" %> found</p>
-<div class="uk-grid-small" uk-grid>
-  <div class="uk-margin-bottom uk-width-3-4@s">
-    <form class="uk-search uk-search-default">
-      <span uk-search-icon></span>
-      <input class="uk-search-input" type="search" placeholder="Search">
-    </form>
-  </div>
-  <div class="uk-margin-bottom uk-width-1-4@s">
-    <% hash = {
-      "auto" => "Auto",
-      "time_modified" => "Date Modified",
-      "progress" => "Progress"
-    } %>
-    <%= render_component "sort-form" %>
-  </div>
-</div>
-<div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
-  <% titles.each_with_index do |item, i| %>
-    <% progress = percentage[i] %>
-    <%= render_component "card" %>
-  <% end %>
-</div>
 
-<% content_for "script" do %>
+<% tags.zip(encoded_tags, counts).each do |tag, encoded, count| %>
-  <%= render_component "dots-scripts" %>
+  <span class="uk-label uk-label-primary" style="padding:2px 5px; margin:0 5px 5px 5px; text-transform:none;">
-  <script src="<%= base_url %>js/search.js"></script>
+    <a class="uk-link-reset" href="<%= base_url %>tags/<%= encoded %>"><%= tag %> (<%= count %> <%= count > 1 ? "titles" : "title" %>)</a>
-  <script src="<%= base_url %>js/sort-items.js"></script>
+  </span>
 <% end %>

src/views/title.html.ecr

@@ -33,8 +33,9 @@
   <li class="uk-disabled"><a><%= title.display_name %></a></li>
 </ul>
 <p class="uk-text-meta"><%= title.content_label %> found</p>
-<% tags = title.tags %>
+
 <%= render_component "tags" %>
+
 <div class="uk-grid-small" uk-grid>
   <div class="uk-margin-bottom uk-width-3-4@s">
     <form class="uk-search uk-search-default">