开始写搜索界面，将搜索条件从书签页面移到了搜索界面

public/index.html

@@ -41,6 +41,7 @@
         <script src="/scripts/controllers/tags-controller.js"></script>
         <script src="/scripts/controllers/menus-controller.js"></script>
         <script src="/scripts/controllers/edit-controller.js"></script>
+        <script src="/scripts/controllers/search-controller.js"></script>
         <script src="/scripts/externe/semantic.min.js"></script>
         <script src="/scripts/externe/calendar.min.js"></script>
     </body>

public/scripts/app-angular.js

@@ -10,15 +10,17 @@ app.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
             url: '/bookmarks',
             templateUrl: '/views/bookmarks.html',
             params: {
-                foo: null,
-                bar: null,
                 showStyle: 'navigate',
             },
             controller: 'bookmarksCtr'
         })
-        .state('addBookmark', {
+        .state('search', {
-            url: '/addBookmark',
+            url: '/search',
-            templateUrl: '/views/addBookmark.html',
+            templateUrl: '/views/search.html',
+            params: {
+                searchWord: null,
+            },
+            controller: 'searchCtr'
         })
         .state('tags', {
             url: '/tags',

public/scripts/controllers/menus-controller.js

@@ -3,8 +3,7 @@ app.controller('menuCtr', ['$scope', '$stateParams', '$state', 'pubSubService',
     $scope.login = false; /**< 是否登陆 */
     $scope.selectLoginIndex = 0; /**< 默认登陆之后的选择的菜单索引，下表从 0 开始 */
     $scope.selectNotLoginIndex = 0; /**< 默认未登陆之后的选择的菜单索引，下表从 0 开始 */
-    $scope.keyword = ''; /**< 搜索关键字 */
+    $scope.searchWord = ''; /**< 搜索关键字 */
-    $scope.showSearch = false;
     // 防止在登陆的情况下，在浏览器里面直接输入url，这时候要更新菜单选项
     pubSubService.subscribe('Common.menuActive', $scope, function(event, params) {
         console.log("subscribe Common.menuActive", params)
@@ -42,24 +41,7 @@ app.controller('menuCtr', ['$scope', '$stateParams', '$state', 'pubSubService',
      * @desc 点击搜索按钮搜索书签
      */
     $scope.searchBookmarks = function() {
-        console.log('searchBookmarks clicked...');
+        updateMenuActive($scope.selectLoginIndex = 0);
-        pubSubService.publish('MenuCtr.searchBookmarks', {
-            'keyword': $scope.keyword
-        });
-        $scope.selectLoginIndex = 0;
-    }
-
-    /**
-     * @func
-     * @desc 点击下拉列表详情搜索
-     * @warn 不要使用$('js-checkbox-search').checkbox('is checked')去取，因为dom元素还没更新的。。。
-     */
-    $scope.searchDetail = function() {
-        $scope.showSearch = !$scope.showSearch;
-        console.log('searchDetail ', $scope.showSearch)
-        pubSubService.publish('MenuCtr.searchDetail', {
-            'showSearch': $scope.showSearch,
-        });
     }
 
     $scope.updateShowStyle = function(showStyle) {
@@ -94,7 +76,6 @@ app.controller('menuCtr', ['$scope', '$stateParams', '$state', 'pubSubService',
     // 元素构造完成之后，开始使用jquery初始化
     $scope.$on('elementRenderFinished', function(elementRenderFinishedEvent) {
         console.log('menus elementRenderFinished')
-        $scope.showSearch = $('.js-checkbox-search').checkbox('is checked');
         $('.js-bookmark-dropdown').dropdown({
             action: 'hide',
         });

public/scripts/controllers/search-controller.js

@@ -0,0 +1,79 @@
+app.controller('searchCtr', ['$scope', '$state', '$stateParams', '$filter', '$window', '$timeout', 'bookmarkService', 'pubSubService', function($scope, $state, $stateParams, $filter, $window, $timeout, bookmarkService, pubSubService) {
+    console.log("Hello searchCtr...", $stateParams);
+    $scope.bookmarks = []; // 书签数据
+    $scope.showSearch = true; // 搜索对话框
+    $scope.searchWord = ($stateParams && $stateParams.searchWord) || ''
+    $scope.dateBegin = '';
+    $scope.dateEnd = '';
+    $scope.clickCount = '';
+    $scope.username = '';
+    $scope.userRange = '';
+
+    searchBookmarks($stateParams);
+
+    $scope.delBookmark = function(bookmarkId) {
+        var params = {
+            id: bookmarkId
+        }
+        bookmarkService.delBookmark(params)
+            .then((data) => $("#" + bookmarkId).remove())
+            .catch((err) => {
+                console.log('delBookmark err ', err)
+            });
+    }
+    $scope.editBookmark = function(bookmarkId) {
+        pubSubService.publish('bookmarksCtr.editBookmark', {
+            'bookmarkId': bookmarkId
+        });
+    }
+
+    $scope.detailBookmark = function(bookmarkId) {
+
+    }
+
+    $scope.search = function() {
+        console.log('search..', $scope.searchWord, $scope.dateBegin, $scope.clickCount, $scope.username, $scope.userRange)
+    }
+
+    function searchBookmarks(params) {
+        bookmarkService.searchBookmarks(params)
+            .then((data) => {
+                $scope.bookmarks = data;
+                pubSubService.publish('Common.menuActive', {
+                    login: true,
+                    index: 0
+                });
+            })
+            .catch((err) => console.log('getBookmarks err', err));
+    }
+
+    $scope.$on('elementRenderFinished', function(elementRenderFinishedEvent) {
+        $('.ui.dropdown').dropdown();
+        $('.ui.calendar.js-date-begin').calendar({
+            type: 'date',
+            formatter: {
+                date: function(date, settings) {
+                    if (!date) return '';
+                    var day = date.getDate();
+                    var month = date.getMonth() + 1;
+                    var year = date.getFullYear();
+                    return year + '/' + month + '/' + day;
+                }
+            },
+            endCalendar: $('.ui.calendar.js-date-end')
+        });
+        $('.ui.calendar.js-date-end').calendar({
+            type: 'date',
+            formatter: {
+                date: function(date, settings) {
+                    if (!date) return '';
+                    var day = date.getDate();
+                    var month = date.getMonth() + 1;
+                    var year = date.getFullYear();
+                    return year + '/' + month + '/' + day;
+                }
+            },
+            startCalendar: $('.ui.calendar.js-date-begin')
+        });
+    });
+}]);

public/scripts/services/bookmark-service.js

@@ -83,6 +83,20 @@ app.factory('bookmarkService', ['$http', '$q', function($http, $q) {
                 });
             return def.promise;
         },
+        searchBookmarks: function(params) {
+            var def = $q.defer();
+
+            $http.get('/api/searchBookmarks/', {
+                    params: params
+                })
+                .success(function(data) {
+                    def.resolve(data);
+                })
+                .error(function(data, status) {
+                    def.reject('searchBookmarks error');
+                });
+            return def.promise;
+        },
         getBookmark: function(params) {
             var def = $q.defer();
 

public/views/bookmarks.html

@@ -1,49 +1,3 @@
-<div class="ui small menu js-search-detail" ng-show="showSearch" ng-repeat="justSureRendered in [1]" on-finish-render-filters>
-    <div class="ui dropdown item">
-        <div class="text">搜索范围</div>
-        <i class="dropdown icon"></i>
-        <div class="menu">
-            <div class="item">自己书签</div>
-            <div class="item">全站书签</div>
-        </div>
-    </div>
-    <div class="item" style="width:136px;">
-        <div class="ui calendar js-date-begin">
-            <div class="ui transparent input left icon">
-                <i class="calendar icon"></i>
-                <input type="text" placeholder="开始日期">
-            </div>
-        </div>
-    </div>
-    <div class="item" style="width:136px;">
-        <div class="ui calendar js-date-end">
-            <div class="ui transparent input left icon">
-                <i class="calendar icon"></i>
-                <input type="text" placeholder="结束日期">
-            </div>
-        </div>
-    </div>
-    <div class="ui dropdown item">
-        <div class="text">点击次数</div>
-        <i class="dropdown icon"></i>
-        <div class="menu">
-            <div class="item">大于</div>
-            <div class="item">小于</div>
-        </div>
-    </div>
-    <div class="ui item transparent icon input" style="width:120px;">
-        <input class="prompt" type="text" ng-model="keyword" placeholder="点击次数">
-    </div>
-    <div class="ui item transparent icon input" style="width:120px;">
-        <input class="prompt" type="text" ng-model="keyword" placeholder="用户账号">
-    </div>
-    <div class="ui item transparent icon input" style="width:160px;">
-        <input type="text" placeholder="标题，链接，分类">
-    </div>
-    <div class="right item">
-        <div class="ui button">搜索</div>
-    </div>
-</div>
 <div class="ui segment" ng-if="showStyle === 'navigate'">
     <div class="ui container" ng-repeat="tag in bookmarks" ng-init="tagIndex=$index">
         <div class="ui grid">

public/views/menus.html

@@ -25,30 +25,22 @@
                             <label>卡片</label>
                         </div>
                     </div>
-                    <div class="divider"></div>
-                    <div class="header">搜索选项</div>
-                    <div class="item">
-                        <div class="ui checkbox js-checkbox-search" ng-click="searchDetail()">
-                            <input type="checkbox">
-                            <label>显示详细搜索</label>
-                        </div>
-                    </div>
                 </div>
             </div>
         </a>
         <div class="right menu">
             <div class="ui category right search item">
                 <div class="ui transparent icon input">
-                    <input class="prompt" type="text" ng-model="keyword" placeholder="标题，链接，分类...">
+                    <input class="prompt" type="text" ng-model="searchWord" placeholder="标题，链接，分类...">
-                    <i class="search link icon" ng-click="searchBookmarks()" ui-sref="bookmarks({foo: 'fooVal1', bar: 'barVal1'})"></i>
+                    <i class="search link icon" ng-click="searchBookmarks()" ui-sref="search({searchWord:searchWord})" ui-sref-opts="{reload: true}"></i>
                 </div>
                 <div class="results"></div>
             </div>
             <div class="item">
-                <div class="ui button" ng-click="showAddBookmarkMoadl()" ui-sref="bookmarks">添加书签</div>
+                <i class="add square icon" title="添加书签" ng-click="showAddBookmarkMoadl()" ui-sref="bookmarks"></i>
             </div>
             <div class="item">
-                <div class="ui button" ng-click="logout()">退出</div>
+                <i class="sign out icon" title="退出登陆" ng-click="logout()"></i>
             </div>
         </div>
     </div>

public/views/search.html

@@ -0,0 +1,109 @@
+<div class="ui small menu js-search-detail" ng-show="showSearch" ng-repeat="justSureRendered in [1]" on-finish-render-filters>
+    <div class="ui dropdown item">
+        <div class="text">搜索范围</div>
+        <i class="dropdown icon"></i>
+        <div class="menu">
+            <div class="item">自己书签</div>
+            <div class="item">全站书签</div>
+        </div>
+    </div>
+    <div class="item" style="width:136px;">
+        <div class="ui calendar js-date-begin">
+            <div class="ui transparent input left icon">
+                <i class="calendar icon"></i>
+                <input type="text" placeholder="开始日期" ng-model="dateBegin">
+            </div>
+        </div>
+    </div>
+    <div class="item" style="width:136px;">
+        <div class="ui calendar js-date-end">
+            <div class="ui transparent input left icon">
+                <i class="calendar icon"></i>
+                <input type="text" placeholder="结束日期" ng-model="dateEnd">
+            </div>
+        </div>
+    </div>
+    <div class="ui dropdown item">
+        <div class="text">点击次数</div>
+        <i class="dropdown icon"></i>
+        <div class="menu">
+            <div class="item">大于</div>
+            <div class="item">小于</div>
+        </div>
+    </div>
+    <div class="ui item transparent icon input" style="width:120px;">
+        <input class="prompt" type="text" placeholder="点击次数" ng-model="clickCount">
+    </div>
+    <div class="ui item transparent icon input" style="width:120px;">
+        <input class="prompt" type="text" placeholder="用户账号" ng-model="username">
+    </div>
+    <div class="ui item transparent icon input" style="width:160px;">
+        <input type="text" placeholder="标题，链接，分类" ng-model="searchWord">
+    </div>
+    <div class="right menu">
+        <div class="item">
+            <i class="search icon" title="搜索" ng-click="search()"></i>
+        </div>
+        <div class="item" ng-click="showSearch = !showSearch">
+            <i class="space shuttle icon" title="隐藏搜索工具"></i>
+        </div>
+    </div>
+</div>
+<table class="ui celled table">
+    <thead>
+        <tr>
+            <th>标题</th>
+            <th>链接</th>
+            <th style="width:90px;">点击次数</th>
+            <th style="width:100px;">创建日期</th>
+            <th style="width:100px;">最后点击</th>
+            <th style="width:150px;">分类</th>
+            <th style="width:105px;">操作</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr ng-repeat="bookmark in bookmarks" id="{{ bookmark.id }}">
+            <td>
+                <img class="ui ui middle aligned tiny image" src="http://www.google.com/s2/favicons?domain={{bookmark.url}}" style="width:16px;height:16px">
+                <span ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{bookmark.title}}">
+                    {{ bookmark.title }}
+                </span>
+            </td>
+            <td ng-click="jumpToUrl(bookmark.url, bookmark.id)">
+                <span title="{{bookmark.url}}">{{ bookmark.url }}</span>
+            </td>
+            <td>{{ bookmark.click_count }}</td>
+            <td>{{ bookmark.created_at }}</td>
+            <td>{{ bookmark.last_click }}</td>
+            <td>
+                <div class="ui label" ng-repeat="tag in bookmark.tags" tag-id="{{ tag.id }}">
+                    {{ tag.name }}
+                </div>
+            </td>
+            <td>
+                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 5px" ng-src="./images/delete.png" ng-click="delBookmark(bookmark.id)">
+                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 5px" ng-src="./images/edit-bookmark.png" ng-click="editBookmark(bookmark.id)">
+                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 5px" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark.id)">
+            </td>
+        </tr>
+    </tbody>
+    <tfoot>
+        <tr>
+            <th colspan="7">
+                <div class="ui right floated pagination menu">
+                    <a class="icon item">
+                        <i class="left chevron icon"></i>
+                    </a>
+                    <a class="item">1</a>
+                    <a class="item">2</a>
+                    <a class="item">3</a>
+                    <a class="item">4</a>
+                    <a class="icon item">
+                        <i class="right chevron icon"></i>
+                    </a>
+                </div>
+            </th>
+        </tr>
+    </tfoot>
+</table>
+<p>这是搜索页面</p>

routes/api.js

@@ -209,6 +209,47 @@ api.get('/bookmarks', function(req, res) {
     }
 });
 
+api.get('/searchBookmarks', function(req, res) {
+    console.log('hello bookmarks', JSON.stringify(req.query), req.session.username);
+    if (!req.session.username) {
+        res.send(401);
+        return;
+    }
+    var bookmarks = [];
+    var tagsBookmarks = [];
+    var userId = '1';
+    db.getBookmarksTable(userId)
+        .then((bms) => {
+            bookmarks = bms;
+            var bookmarkIds = bookmarks.map((bookmark) => bookmark.id);
+            return db.getTagsBookmarks(bookmarkIds);
+        })
+        .then((tbs) => {
+            tagsBookmarks = tbs;
+            return db.getTags(userId);
+        })
+        .then((tags) => {
+            var data = [];
+            // 获取每个书签的所有分类标签
+            bookmarks.forEach(function(bookmark) {
+                var bookmarkTags = [];
+                tagsBookmarks.forEach(function(tb) {
+                    if (tb.bookmark_id == bookmark.id) {
+                        tags.forEach(function(tag) {
+                            if (tb.tag_id == tag.id) {
+                                bookmarkTags.push(tag)
+                            }
+                        })
+                    }
+                });
+                bookmark.tags = bookmarkTags;
+                data.push(bookmark);
+            })
+            res.json(data);
+        })
+        .catch((err) => console.log('bookmarks table or card err', err))
+});
+
 api.get('/tags', function(req, res) {
     if (!req.session.username) {
         res.send(401);