isotop test

index.php

@@ -64,6 +64,8 @@ if (!isset($_SESSION['loggedin'])) {
 	<script src="https://unpkg.com/vue@next"></script>
 	<script src="./script/js/vue-search-block.js"></script>
 
+	<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
+
 	<style>
 		.row {
 			margin-top: -15px;
@@ -751,7 +753,32 @@ if (!isset($_SESSION['loggedin'])) {
 	<script>vm.mount('.body');</script>
 
 	<script>
+		var $isotope_project = $('.project_button').isotope({
+			itemSelector: '.project'
+		});
+
+		var filters = {};
+
+		$('.filter_for_project').on( 'click', '.button', function() {
+			var $this = $(this);
+			// get group key
+			var $buttonGroup = $this.parents('.button-group');
+			var filterGroup = $buttonGroup.attr('data-filter-group');
+			// set filter for group
+			filters[ filterGroup ] = $this.attr('data-filter');
+			// combine filters
+			var filterValue = concatValues( filters );
+			// set filter for Isotope
+			$isotope_project.isotope({ filter: filterValue });
+		});
 
+		function concatValues( obj ) {
+			var value = '';
+			for ( var prop in obj ) {
+				value += obj[ prop ];
+			}
+			return value;
+		}
 	</script>
 
 </body>

script/js/vue-search-block.js

@@ -41,6 +41,8 @@ $.ajax({
     console.log(error);
 });
 
+project_list = project_list_add_category_name(project_list, category_list);
+
 const vm = Vue.createApp({});
 
 vm.component('search-block', {
@@ -67,30 +69,28 @@ vm.component('search-block', {
                     </div>
                 </div>
 
-                <div class="filter_for_search">
-                    <div class="ui-group">
-                        <ul class="button-group nav nav-pills nav-pills-primary" data-filter-group="project">
-                            <li style="padding: 10px 15px;">
-                                <label>專案類別:</label>
-                            </li>
-                            <li class="active">
-                                <a class="button" data-filter="">any</a>
-                            </li>
-                            <filter-project-button v-for="item in project_list" v-bind:category_id="item.category_id" v-bind:object="item.project_name"></filter-project-button>
-                        </ul>
-                    </div>
+                <div class="ui-group project_button">
+                    <ul class="button-group nav nav-pills nav-pills-primary" data-filter-group="project">
+                        <li style="padding: 10px 15px;">
+                            <label>專案類別:</label>
+                        </li>
+                        <li class="active">
+                            <a class="button" data-filter="">any</a>
+                        </li>
+                        <filter-project-button v-for="item in project_list" v-bind:category_id="item.category_id" v-bind:object="item"></filter-project-button>
+                    </ul>
+                </div>
 
-                    <div class="ui-group">
-                        <ul class="button-group nav nav-pills nav-pills-primary" data-filter-group="type">
-                            <li style="padding: 10px 15px;">
-                                <label>文件類別:</label>
-                            </li>
-                            <li class="active">
-                                <a class="button" data-filter="">any</a>               
-                            </li>
-                            <filter-button v-for="item in type_list" v-bind:object="item.type_name"></filter-button>
-                        </ul>
-                    </div>
+                <div class="ui-group">
+                    <ul class="button-group nav nav-pills nav-pills-primary" data-filter-group="type">
+                        <li style="padding: 10px 15px;">
+                            <label>文件類別:</label>
+                        </li>
+                        <li class="active">
+                            <a class="button" data-filter="">any</a>               
+                        </li>
+                        <filter-button v-for="item in type_list" v-bind:object="item.type_name"></filter-button>
+                    </ul>
                 </div>
             </div>
         </section>`
@@ -110,51 +110,34 @@ vm.component('filter-button', {
 });
 
 vm.component('filter-project-button', {
-    template: `<li><a class="button" v-bind:data-filter="addDot">{{object}}</a></li>`,
-    props: ["category_id", "object"],
-    methods: {
-        addClass(class_name) {
-            return class_name + " " + this.category_id;
-        }
+    template: `<li><a v-bind:class="addClass" v-bind:data-filter="addDot">{{object.project_name}}</a></li>`,
+    props: {
+        object: {
+            project_name: String,
+            category_name: String
+        },
     },
     computed: {
+        addClass() {
+            return "button project " + this.object.category_name;
+        },
         addDot() {
             return "." + this.object;
         }
-    },
+    }
 });
 
-// var $isotope_project = $('.filter_for_search').isotope({
-//     itemSelector: '.project'
-//   });
-
-// var filters = {};
-
-// $('.filter_for_project').on( 'click', '.button', function() {
-//     var $this = $(this);
-//     // get group key
-//     var $buttonGroup = $this.parents('.button-group');
-//     var filterGroup = $buttonGroup.attr('data-filter-group');
-//     // set filter for group
-//     filters[ filterGroup ] = $this.attr('data-filter');
-//     // combine filters
-//     var filterValue = concatValues( filters );
-//     // set filter for Isotope
-//     $isotope_project.isotope({ filter: filterValue });
-//   });
-
-// function concatValues( obj ) {
-//     var value = '';
-//     for ( var prop in obj ) {
-//         value += obj[ prop ];
-//     }
-//     return value;
-// }
-
 function get_object_value_to_list(obj, key) {
     value_list = [];
     for(i=0; i<obj.length; i++){
         value_list.push(obj[i][key]);
     }
     return value_list
+}
+
+function project_list_add_category_name(p_list, c_list) {
+    for(i=0; i<p_list.length; i++) {
+        Object.assign(p_list[i], c_list[p_list[i]['category_id']-1]);
+    }
+    return p_list;
 }