完成分类的编辑

2017-02-25 23:10:27 +08:00 · 2017-02-25 23:10:27 +08:00 · 066d955f43
parent 6a8f3ddddc
commit 066d955f43
7 changed files with 184 additions and 13 deletions
--- a/database/db.js
+++ b/database/db.js
@ -299,7 +299,7 @@ db.getUser = function(username) {

 db.getTags = function(user_id) {
    console.log('getTags');
-    var sql = "SELECT t.*, tb.cnt FROM `tags` as t LEFT OUTER JOIN ( SELECT `tag_id`, COUNT(tag_id) as cnt FROM tags_bookmarks GROUP BY tag_id ) tb ON t.id = tb.tag_id WHERE t.user_id = '" + user_id + "' ORDER BY last_use DESC";
+    var sql = "SELECT t.id, t.user_id, t.name, DATE_FORMAT(t.last_use, '%Y-%m-%d %H:%i:%s') as last_use, t.sort, tb.cnt FROM `tags` as t LEFT OUTER JOIN ( SELECT `tag_id`, COUNT(tag_id) as cnt FROM tags_bookmarks GROUP BY tag_id ) tb ON t.id = tb.tag_id WHERE t.user_id = '" + user_id + "' ORDER BY t.last_use DESC";

    return new Promise(function(resolve, reject) {
        client.query(sql, (err, result) => {
@ -312,6 +312,21 @@ db.getTags = function(user_id) {
    });
 };

+db.updateTag = function(tag) {
+    console.log('updateTag');
+    var sql = "UPDATE `tags` SET `name`='" + tag.name + "' WHERE (`id`='" + tag.id + "')";
+    console.log(sql);
+    return new Promise(function(resolve, reject) {
+        client.query(sql, (err, result) => {
+            if (err) {
+                reject(err);
+            } else {
+                resolve(result.affectedRows);
+            }
+        });
+    });
+};
+
 db.getTagsByIds = function(tagIds) {
    var sql = "SELECT * FROM `tags` WHERE id in(" + (tagIds.toString() || ("-1")) + ") GROUP BY id"; // 如果是空的，那查一个不存在的就行了。
    console.log('db getTagsByIds = ', sql);
--- a/public/scripts/controllers/bookmarks-controller.js
+++ b/public/scripts/controllers/bookmarks-controller.js
@ -180,6 +180,5 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
                left: left + width - 10,
            })
        }
-
    }
 }]);
--- a/public/scripts/controllers/tags-controller.js
+++ b/public/scripts/controllers/tags-controller.js
@ -1,4 +1,4 @@
-app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', 'bookmarkService', 'pubSubService', function($scope, $filter, $window, $stateParams, bookmarkService, pubSubService) {
+app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$timeout', 'bookmarkService', 'pubSubService', function($scope, $filter, $window, $stateParams, $timeout, bookmarkService, pubSubService) {
    console.log("Hello tagsCtr...", $stateParams);
    getTags({});

@ -12,6 +12,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', 'book
    $scope.currentPage = 1;
    $scope.inputPage = '';
    $scope.currentTagId = ($stateParams && $stateParams.tagId) || '';
+    $scope.edit = true;

    pubSubService.subscribe('MenuCtr.tags', $scope, function(event, data) {
        console.log('subscribe MenuCtr.tags', data);
@ -108,10 +109,65 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', 'book
        toastr.warning('功能暂未实现。。。', "警告");
    }

+    $scope.toggleMode = function() {
+        $scope.edit = !$scope.edit;
+        if (!$scope.edit) {
+            getTags({});
+        }
+        setTimeout(updateEditPos, 100);
+    }
+
+    $scope.editTag = function(tag) {
+        if (tag.name == "未分类") {
+            toastr.warning('这个是系统默认分类，暂时不允许更新！', "警告");
+            return;
+        }
+        tag.oldName = tag.name;
+        tag.edit = true;
+    }
+    $scope.updateTag = function(tag) {
+        tag.edit = false;
+        var params = {
+            id: tag.id,
+            name: tag.name,
+        }
+
+        bookmarkService.updateTag(params)
+            .then((data) => {
+                if (data.retCode == 0) {
+                    toastr.success(tag.name + ' 更新成功！', "提示");
+                } else {
+                    toastr.error(tag.name + ' 更新失败！错误提示：' + data.msg, "提示");
+                    $scope.backTag(tag);
+                }
+            })
+            .catch((err) => {
+                toastr.error(tag.name + ' 更新失败！错误提示：' + err, "提示");
+                $scope.backTag(tag);
+            });
+    }
+
+    $scope.delTag = function(tag) {
+        if (tag.name == "未分类") {
+            toastr.warning('这个是系统默认分类，暂时不允许删除！', "警告");
+            return;
+        }
+    }
+
+    $scope.backTag = function(tag) {
+        tag.edit = false;
+        tag.name = tag.oldName;
+    }
+
    function getTags(params) {
        bookmarkService.getTags(params)
            .then((data) => {
-                $scope.tags = data
+                $scope.tags = []
+                data.forEach((tag) => {
+                    tag.edit = false;
+                    tag.oldName = tag.name;
+                    $scope.tags.push(tag);
+                })

                if (!$scope.currentTagId && $scope.tags.length > 0) {
                    $scope.currentTagId = $scope.tags[0].id;
@ -131,4 +187,20 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', 'book
            index: 1
        });
    }
+
+    // TODO: 我要将编辑按钮固定在容器的右上角
+    $(window).resize(updateEditPos);
+    setTimeout(updateEditPos, 100);
+
+    function updateEditPos() {
+        var top = $('.js-tags').offset().top;
+        var left = $('.js-tags').offset().left;
+        var width = $('.js-tags').width();
+        // console.log('js-edit position update', top+10, left+width-10)
+        $('.js-edit').offset({
+            top: top + 10,
+            left: left + width - 10,
+        })
+    }
+
 }]);
--- a/public/scripts/services/bookmark-service.js
+++ b/public/scripts/services/bookmark-service.js
@ -221,6 +221,19 @@ app.factory('bookmarkService', ['$http', '$q', function($http, $q) {
                });
            return def.promise;
        },
+        updateTag: function(params) {
+            var def = $q.defer();
+            $http.post('/api/updateTag/', {
+                    params: params
+                })
+                .success(function(data) {
+                    def.resolve(data);
+                })
+                .error(function(data) {
+                    def.reject('updateTag error');
+                });
+            return def.promise;
+        },
        getAdvices: function getAdvices(params) {
            var def = $q.defer();
            $http.get('/api/advices/', {
--- a/public/views/tags.html
+++ b/public/views/tags.html
@ -1,5 +1,5 @@
-<div class="ui segment">
-    <div class="ui container">
+<div class="ui segment js-tags">
+    <div class="ui container" ng-show="!edit">
        <div class="ui grid">
            <div class="two wide column" ng-class="" ng-mouseover="" ng-mouseleave="" ng-repeat="tag in tags">
                <div class="ui small label" ng-class="{green:tag.bookmarkClicked}" ng-click="getBookmarks(tag.id, 1)">
@ -9,15 +9,43 @@
            </div>
        </div>
    </div>
+    <div class="ui container" ng-show="edit">
+        <p>操作说明：拖拽分类即可进行排序</p>
+        <div class="ui six stackable cards">
+            <div class="card" ng-repeat="tag in tags">
+                <div class="content">
+                    <div class="header" ng-if="!tag.edit">{{ tag.name }}</div>
+                    <div class="ui large fluid transparent input" style="height:19px;" ng-if="tag.edit">
+                        <input type="text" ng-model="tag.name" style="font-size:18px;" id="tag{{tag.id}}">
+                        <i class="checkmark icon" style="cursor:pointer;" ng-click="updateTag(tag)" title="更新分类"></i>
+                        <i class="mail forward icon" style="cursor:pointer;" ng-click="backTag(tag)" title="放弃更新"></i>
+                    </div>
+                </div>
+                <div class="content" style="cursor: move">
+                    <div class="description">
+                        <p>书签：{{ tag.cnt }}个</p>
+                        <p>{{ tag.last_use }}</p>
+                    </div>
+                </div>
+                <div class="extra content">
+                    <img class="ui mini spaced image right floated" style="width:16px;height:16px;margin:0 5px" ng-src="./images/delete.png" ng-click="delTag(tag)" title="删除分类">
+                    <label for="tag{{tag.id}}" ng-show="!tag.edit">
+                        <img class="ui mini spaced image right floated" style="width:16px;height:16px;margin:0 5px" ng-src="./images/edit-bookmark.png" ng-click="editTag(tag)" title="编辑分类">
+                    </label>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div style="width:22px;height:22px;" class="js-edit" ng-click="toggleMode()" title="{{edit ? '退出编辑模式' : '点我进入编辑模式'}}"><img class="ui ui middle aligned tiny image" ng-src="./images/{{ edit ? 'back' : 'edit'}}.png"></div>
 </div>
 <div class="ui huge text centered inline loader" ng-class="{active:loadBookmarks, disabled: !loadBookmarks}">
    正在加载中...</div>
-<table class="ui celled table" ng-if="bookmarkCount > 0" style="margin-top:-14px;" ng-show="!loadBookmarks">
+<table class="ui celled table" ng-if="bookmarkCount > 0" style="margin-top:-14px;" ng-show="!loadBookmarks && !edit">
    <thead>
        <tr>
            <th>标题</th>
            <th>链接</th>
-            <th style="width:90px;">点击次数</th>
+            <th style=" width:90px;">点击次数</th>
            <th style="width:100px;">创建日期</th>
            <th style="width:100px;">最后点击</th>
            <th style="width:150px;">分类</th>
--- a/routes/api.js
+++ b/routes/api.js
@ -614,18 +614,61 @@ api.post('/addTags', function(req, res) {
        .catch((err) => console.log('addTags err', err));
 });

-api.post('/getArticle', function(req, response) {
+api.post('/updateTag', function(req, res) {
+    console.log('hello updateTag', JSON.stringify(req.query), JSON.stringify(req.body));
+    if (!req.session.user) {
+        res.send(401);
+        return;
+    }
+    var tag = req.body.params;
+    var userId = req.session.user.id;
+
+    db.getTags(userId)
+        .then((tags) => {
+            for (var i = 0; i < tags.length; i++) {
+                if (tags[i].id != tag.id && tags[i].name == tag.name) {
+                    return Promise.resolve(-1);
+                }
+            }
+            return db.updateTag(tag);
+        })
+        .then((affectedRows) => {
+            var msg = "";
+            if (affectedRows == -1) {
+                msg += " 您已经有这个分类了，不允许更新";
+            } else if (affectedRows == 0) {
+                msg += " 更新失败";
+            } else if (affectedRows == 1) {
+                msg = " 更新成功";
+            } else {
+                msg += " 更新失败";
+            }
+            res.json({
+                retCode: (affectedRows == 1) ? 0 : 1,
+                msg: msg,
+            })
+        })
+        .catch((err) => {
+            console.log('addTags err', err);
+            res.json({
+                retCode: 1,
+                msg: tag.name + " 更新失败: " + JSON.stringify(err),
+            })
+        });
+});
+
+api.post('/getArticle', function(req, res) {
    var params = req.body.params;
    var url = params.url;
    var requestId = params.requestId || 0;
    read(url, function(err, article, meta) {
        console.log(article.title || 'Get title failed');
        if (requestId == 0) {
-            response.json({
+            res.json({
                title: article.title || '',
            });
-        } else if(requestId == 1) {
-            response.json({
+        } else if (requestId == 1) {
+            res.json({
                content: article.content,
            });
        }
--- a/schema.sql
+++ b/schema.sql
@ -24,7 +24,7 @@ CREATE TABLE `bookmarks` (
  `click_count` smallint DEFAULT 1,         -- 总共点击次数
  `created_at` datetime DEFAULT now(),      -- 创建时间
  `last_click` datetime DEFAULT now(),      -- 最后一次点击时间
-  `snap_state` tinyint(8) DEFAULT '0',      -- -1：获取成功。0，1，2：获取快照次数。当前天+31：今天不再获取该网页快照
+  `snap_state` tinyint(8) DEFAULT 0,        -- -1：获取成功。0，1，2：获取快照次数。当前天+31：今天不再获取该网页快照
  PRIMARY KEY (`id`),
  KEY `userIdIdx` (`user_id`)
 );
@ -36,6 +36,7 @@ CREATE TABLE `tags` (
  `user_id` int(11) NOT NULL,               -- 用户id
  `name` varchar(32) NOT NULL,              -- 标签
  `last_use` datetime DEFAULT now(),        -- 最后使用标签的时间
+  `sort` tinyint(8) DEFAULT 0,             -- 书签排序
  PRIMARY KEY (`id`),
  KEY `userIdIdx` (`user_id`)
 );