Skip to content

Commit ef9d077

Browse files
Roy SivanRoy Sivan
Roy Sivan
authored and
Roy Sivan
committed
Edit Posts Rework
1 parent ffc105f commit ef9d077

File tree

6 files changed

+131
-49
lines changed

6 files changed

+131
-49
lines changed

‎assets/js/angular_app.js

Lines changed: 64 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,87 @@
1+
"use strict";
12
var reang;
3+
var $ = jQuery;
24
reang = angular.module('reang', ['ngResource'])
35
.filter('to_trusted', ['$sce', function($sce) {
46
return function(text) {
57
return $sce.trustAsHtml(text);
68
};
79
}])
810
.factory('Posts', function($resource) {
9-
return $resource(ajaxInfo.json_url + 'posts/:id', {
10-
id: '@id'
11-
});
11+
return $resource(ajaxInfo.json_url + 'posts/:ID?_wp_json_nonce='+ajaxInfo.nonce, {
12+
ID: '@ID'
13+
},{
14+
'update': { method:'PUT' }
15+
});
1216
})
1317
.controller( 'reang_controller', ['$rootScope', '$scope', 'Posts', function($rootScope, $scope, Posts){
14-
Posts.query({}, function(res){
15-
$scope.posts = res;
16-
});
18+
$scope.getPosts = function(){
19+
Posts.query({}, function(res){
20+
$scope.posts = res;
21+
});
22+
}
23+
24+
$scope.getPosts();
25+
26+
27+
$('body').on('click', '.edit_post', function(e) {
28+
var post_id = $(this).data('id');
29+
console.log(post_id);
30+
31+
Posts.get({ID:post_id}, function(res){
32+
$scope.editPost = res;
33+
})
34+
35+
})
36+
37+
$scope.savePost = function() {
38+
console.log('saving..', $scope.editPost);
39+
$scope.editPost.content_raw = $scope.editPost.content;
40+
Posts.update($scope.editPost, function(res){
41+
$scope.getPosts();
42+
$('#editPost').modal('hide');
43+
})
44+
}
45+
1746
}])
18-
.directive('reactposts', function() {
47+
.directive('reactposts', function($rootScope) {
1948
return {
2049
restrict: 'E',
2150
scope: { data: '=', id: '@' },
2251
link: function($scope,elm,attrs) {
2352
$scope.$watch('data', function(n,o){
2453
if( n && n.length ) {
25-
React.render(
54+
$rootScope.react_app = React.render(
2655
React.createElement(APP, {data:$scope.data}),
2756
elm[0]
2857
)
2958
}
30-
})
59+
});
3160
}
3261
}
33-
});
62+
})
63+
.controller( 'editPostCtrl', ['$rootScope', '$scope', 'Posts', function($rootScope, $scope, Posts){
64+
console.log('editing..');
65+
66+
$('body').on('click', '.edit_post', function(e) {
67+
var post_id = $(this).data('id');
68+
console.log(post_id);
69+
70+
Posts.get({ID:post_id}, function(res){
71+
$scope.editPost = res;
72+
})
73+
74+
})
75+
76+
$scope.savePost = function() {
77+
console.log('saving..', $scope.editPost);
78+
$scope.editPost.content_raw = $scope.editPost.content;
79+
Posts.update($scope.editPost, function(res){
80+
Posts.query({}, function(res){
81+
$rootScope.react_app.data = res;
82+
$('#editPost').modal('hide');
83+
console.log( $rootScope.react_app.data );
84+
})
85+
})
86+
}
87+
}]);

‎build/js/react_app_js.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
var $ = jQuery;
2+
3+
var Post = React.createClass({
4+
displayName: "Post",
5+
editPost: function () {
6+
$('#editPost').modal('show');
7+
},
8+
render: function () {
9+
return React.createElement(
10+
"article",
11+
null,
12+
React.createElement(
13+
"h3",
14+
null,
15+
this.props.title
16+
),
17+
React.createElement("div", { dangerouslySetInnerHTML: { __html: this.props.content } }),
18+
React.createElement(
19+
"button",
20+
{ onClick: this.editPost, "data-id": this.props.ID, className: "edit_post" },
21+
"edit post"
22+
)
23+
);
24+
}
25+
});
26+
27+
var APP = React.createClass({
28+
displayName: "APP",
29+
render: function () {
30+
if (this.props && this.props.data.length) {
31+
var posts = this.props.data.map(function (post) {
32+
return React.createElement(Post, post);
33+
});
34+
35+
return React.DOM.div(null, posts);
36+
}
37+
}
38+
});

‎build/js/scripts.js

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎functions.php

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,15 @@ function __react_ang_scripts() {
1313

1414
wp_localize_script( 'react_ang_main', 'ajaxInfo',
1515
array(
16-
'json_url' => get_bloginfo('wpurl').'/wp-json/',
16+
'json_url' => get_bloginfo('wpurl').'/wp-json/',
17+
'nonce' => wp_create_nonce( 'wp_json' ),
1718
'template_directory' => get_template_directory_uri()
1819
)
1920
);
2021

21-
wp_enqueue_script( 'react_app', get_template_directory_uri().'/build/js/react_app.js', array( 'react_ang_main' ), null, true );
22-
wp_enqueue_script( 'scripts', get_template_directory_uri().'/build/js/scripts.js', array( 'react_ang_main' ), null, true );
22+
wp_enqueue_script( 'react_app', get_template_directory_uri().'/build/js/react_app_js.js', array( 'react_ang_main' ), null, true );
23+
wp_enqueue_script( 'bootstrap', get_template_directory_uri().'/build/js/bootstrap.js', array( 'jquery' ), null, true );
24+
wp_enqueue_script( 'scripts', get_template_directory_uri().'/build/js/scripts.js', array( 'bootstrap' ), null, true );
2325

2426
wp_enqueue_style( 'styles', get_template_directory_uri().'/build/css/styles.css', array(), null, 'all' );
2527

‎header.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,4 @@
1313
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
1414
<![endif]-->
1515
</head>
16-
<body <?php body_class(); ?>>
16+
<body <?php body_class(); ?> ng-app="reang">

‎index.php

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,30 @@
22

33
<div class="container">
44
<div class="row">
5-
<div class="col-sm-12" ng-app="reang" ng-controller="reang_controller">
5+
<div class="col-sm-12" ng-controller="reang_controller">
66
<reactposts data="posts" id="test"></reactposts>
7+
<!-- EDIT MODAL -->
8+
<div class="modal fade" id="editPost" tabindex="-1" role="dialog" aria-labelledby="editPost" aria-hidden="true" >
9+
<div class="modal-dialog">
10+
<div class="modal-content">
11+
<div class="modal-header">
12+
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
13+
<h4 class="modal-title text-center" id="myModalLabel">Edit Post</h4>
14+
</div>
15+
<div class="modal-body">
16+
<form ng-submit="savePost()">
17+
<div class="form-group">
18+
<input ng-model="editPost.title" class="form-control" />
19+
</div>
20+
<div class="form-group">
21+
<textarea ng-model="editPost.content" class="form-control" rows="10"></textarea>
22+
</div>
23+
<button type="submit" class="btn btn-default">Save Post</button>
24+
</form>
25+
</div>
26+
</div>
27+
</div>
28+
</div>
729
</div>
830
</div>
931
</div>

0 commit comments

Comments
 (0)