Skip to content

Commit 081a0ff

Browse files
shanehsushanehsu
committed
更新
1 parent 40b32a2 commit 081a0ff

File tree

8 files changed

+346
-99
lines changed

8 files changed

+346
-99
lines changed

‎.idea/PHP.iml‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/modules.xml‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/php.xml‎

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎admin/categories.php‎

Lines changed: 252 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,104 @@
1111
<link rel="stylesheet" type="text/css" href="../styles/style.css">
1212
<script src="../scripts/jquery-2.2.2.js"></script>
1313
<script src="../semantic/semantic.js"></script>
14-
14+
1515
<style>
1616
</style>
1717

1818
<script>
19+
var defaultResponseParser = function(response) {
20+
// 伺服器回傳資料，檢查是否成功
21+
if (response['success']) {
22+
return response['results']
23+
} else {
24+
return $.Deferred().reject(response['reason'])
25+
}
26+
}
1927
// 載入資料
2028
function load() {
21-
$.get('category_ajax.php').then(function(response) {
22-
// 伺服器回傳資料，檢查是否成功
23-
if (response['success']) {
24-
return response['results']
25-
} else {
26-
return $.Deferred().reject(response['reason'])
27-
}
28-
}).then(function(results) {
29-
console.dir(results)
30-
}).fail(function(reason) {
31-
console.error(reason)
32-
$('#load-error-modal').modal('show');
29+
return new Promise(function(resolve, reject) {
30+
$('#segment').addClass('loading')
31+
$.get('category_ajax.php').then(defaultResponseParser).then(function(results) {
32+
// 摺疊成多層
33+
// 先找出 Root
34+
var roots = results.filter(function(category) {
35+
return category.parent == null
36+
})
37+
38+
console.dir(roots)
39+
40+
// 工具程式
41+
var findChildren = function(id) {
42+
children = []
43+
var children = results.filter(function(category) {
44+
return category.parent == id
45+
})
46+
47+
for (var child of children) {
48+
child.children = findChildren(child.id)
49+
// child.depth = child.children.reduce(function(max, val) {
50+
// return Math.max(val.depth + 1, max);
51+
// }, 1)
52+
}
53+
54+
return children
55+
}
56+
57+
for (var root of roots) {
58+
root.children = findChildren(root.id)
59+
// root.depth = root.children.reduce(function(max, val) {
60+
// return Math.max(val.depth + 1, max)
61+
// }, 1)
62+
}
63+
64+
$('#content').data(results);
65+
66+
return roots
67+
}).then(function(roots) {
68+
var body = $('#content')
69+
70+
var htmlForElement = function(element, forwardDepth) {
71+
var markup = `<tr data-id="${element.id}">`
72+
if (forwardDepth > 0) {
73+
markup += `<td colspan=${forwardDepth}></td>`
74+
}
75+
markup += `<td style="width: ${25 * (3 - forwardDepth)}%;"colspan=${3 - forwardDepth}>${element.name}</td>
76+
<td>${element.itemCount}</td>
77+
<td><div class="ui icon buttons">
78+
<button onclick="action(this, 'add')" class="basic green ui button">
79+
<i class="plus icon"></i>
80+
</button>
81+
<button onclick="action(this, 'edit')" class="basic yellow ui button">
82+
<i class="edit icon"></i>
83+
</button>
84+
<button onclick="action(this, 'remove')" class="basic red ui button">
85+
<i class="remove icon"></i>
86+
</button>
87+
</div></td>
88+
</tr>`;
89+
90+
return element.children.reduce(function(accu, child) {
91+
return accu + htmlForElement(child, forwardDepth + 1)
92+
}, markup);
93+
}
94+
95+
body.empty()
96+
97+
for (var root of roots) {
98+
body.append($(htmlForElement(root, 0)))
99+
}
100+
101+
$('body div.ui.container').append($(`<div class="ui segment"><pre id="json"></pre></div>`))
102+
$('#json').append(JSON.stringify(roots, null, 4))
103+
104+
$('#segment').removeClass('loading')
105+
$('#operation-success-modal').modal('hide')
106+
107+
resolve()
108+
}).fail(function(reason) {
109+
$('#load-error-modal').modal('show')
110+
reject(reason)
111+
})
33112
})
34113
}
35114

@@ -55,13 +134,129 @@ function load() {
55134

56135
// 按下取消的 Callback
57136
onDeny: function() {
58-
// 應該在表格顯示畫面
137+
// TODO 應該在表格顯示畫面
59138
}
60139

61140
})
62141

142+
$('#add-or-edit-category-modal').modal({
143+
transition: 'drop',
144+
onShow: function() {
145+
var host = $('#add-or-edit-category-modal')
146+
// 從自我資料讀取設定
147+
var operation = host.data().operation
148+
149+
switch (operation) {
150+
case 'add':
151+
host.find('div.header').text('新分類')
152+
break
153+
case 'edit':
154+
host.find('div.header').text('編輯分類')
155+
break
156+
}
157+
},
158+
onApprove: function() {
159+
var host = $('#add-or-edit-category-modal')
160+
// 從自我資料讀取設定
161+
var operation = host.data().operation
162+
switch (operation) {
163+
case 'add':
164+
if (host.find('input').val() == '') {
165+
$('#operation-failed-modal').data().message = '請輸入新分類名稱'
166+
$('#operation-failed-modal').modal('show')
167+
} else {
168+
var id = host.data().parent
169+
var payload = {
170+
action: 'insert',
171+
name: host.find('input').val()
172+
}
173+
if (id) {
174+
payload.parent = id
175+
}
176+
$.ajax({
177+
url: 'category_ajax.php',
178+
method: 'POST',
179+
data: JSON.stringify(payload),
180+
contentType: 'application/json; charset=utf-8',
181+
beforeSend: function() {
182+
host.find('div.approve').addClass('loading')
183+
}
184+
}).then(defaultResponseParser).then(function() {
185+
load().then(function() {
186+
host.find('div.approve').removeClass('loading')
187+
host.modal('hide')
188+
$('#operation-success-modal').modal('show')
189+
})
190+
}).fail(function() {
191+
$('#operation-failed-modal').modal('show')
192+
})
193+
}
194+
break
195+
case 'edit':
196+
alert('TODO: edit with AJAX')
197+
break
198+
}
199+
200+
return false
201+
}
202+
})
203+
204+
$('#remove-category-modal').modal({
205+
transition: 'drop',
206+
onApprove: function() {
207+
var host = $('#remove-category-modal')
208+
var id = host.data().id
209+
210+
var payload = {
211+
action: 'delete',
212+
id: id
213+
}
214+
215+
$.ajax({
216+
url: 'category_ajax.php',
217+
method: 'POST',
218+
data: JSON.stringify(payload),
219+
contentType: 'application/json; charset=utf-8',
220+
}).then(defaultResponseParser).then(function() {
221+
load()
222+
$('#operation-success-modal').modal('show')
223+
}).fail(function() {
224+
$('#operation-failed-modal').modal('show')
225+
})
226+
}
227+
})
228+
$('#operation-success-modal').modal({
229+
transition: 'drop'
230+
})
231+
$('#operation-failed-modal').modal({
232+
transition: 'drop'
233+
})
63234
load();
64235
})
236+
237+
function action(element, operation) {
238+
var id = $(element).closest('tr').data('id')
239+
240+
switch (operation) {
241+
case 'add':
242+
var modal = $('#add-or-edit-category-modal')
243+
modal.data().operation = 'add'
244+
modal.data().parent = id
245+
modal.modal('show')
246+
break
247+
case 'edit':
248+
var modal = $('#add-or-edit-category-modal')
249+
modal.data().operation = 'edit';
250+
modal.data().id = id
251+
modal.modal('show')
252+
break
253+
case 'remove':
254+
var modal = $('#remove-category-modal')
255+
modal.data().id = id
256+
modal.modal('show')
257+
break
258+
}
259+
}
65260
</script>
66261
</head>
67262
<body>
@@ -76,13 +271,13 @@ function load() {
76271
分類
77272
</h1>
78273

79-
<div class="basic ui segment">
80-
<table class="ui celled structured table">
274+
<div id="segment" class="basic loading ui segment">
275+
<table style="" class="ui celled structured table">
81276
<thead id="header">
82277
<tr>
83-
<th colspan="3" style="width: 45%">名稱</th>
84-
<th style="width: 25%;">產品數量</th>
85-
<th style="width: 30%;">動作</th>
278+
<th colspan="3" style="width: 75%">名稱</th>
279+
<th style="width: 10%;">產品</th>
280+
<th style="width: 15%; min-width: 15em;">編輯</th>
86281
</tr>
87282
</thead>
88283
<tbody id="content">
@@ -104,5 +299,43 @@ function load() {
104299
<div class="ui blue approve button">重新載入</div>
105300
</div>
106301
</div>
302+
<div id="add-or-edit-category-modal" class="ui small modal">
303+
<div class="header"></div>
304+
<div class="content">
305+
<form class="ui form">
306+
<div class="required field">
307+
<label>分類名稱</label>
308+
<input type="text" name="name" placeholder="分類名稱">
309+
</div>
310+
</form>
311+
</div>
312+
<div class="actions">
313+
<div id="" class="approve ui green button">新增</div>
314+
</div>
315+
</div>
316+
<div id="remove-category-modal" class="ui basic small modal">
317+
<h2 class="ui red icon header">
318+
<i class="remove icon"></i>
319+
<div style="padding-left: 0;" class="content">刪除分類</div>
320+
</h2>
321+
<div class="centered content">
322+
<p>確定刪除此分類嗎？</p>
323+
</div>
324+
<div class="actions">
325+
<div class="ui red approve button">確定</div>
326+
</div>
327+
</div>
328+
<div id="operation-success-modal" class="ui small modal">
329+
<h2 class="ui green icon header">
330+
<i class="checkmark icon"></i>
331+
<div style="padding-left: 0;" class="content">操作成功</div>
332+
</h2>
333+
</div>
334+
<div id="operation-failed-modal" class="ui small modal">
335+
<h2 class="ui red icon header">
336+
<i class="warning icon"></i>
337+
<div style="padding-left: 0;" class="content">操作錯誤</div>
338+
</h2>
339+
</div>
107340
</body>
108341
</html>

‎admin/category_ajax.php‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@
1212
// header('Content-Type: application/json');
1313
// echo json_encode($result);
1414

15+
// Mock Delay for 3 Seconds
16+
sleep(3);
17+
1518
switch ($_SERVER['REQUEST_METHOD']) {
1619
case 'GET':
1720
// 取得所有分類

0 commit comments

Comments
 (0)