Skip to content

Commit 5fb6172

Browse files
akagane99akagane99
authored
Merge pull request #2182 from opensource-workshop/dev/sortable
[フォーム][データベース] 表示順をつまんで移動(ドラック＆ドロップ)できるように対応
2 parents ba1342a + b64b934 commit 5fb6172

File tree

9 files changed

+268
-38
lines changed

9 files changed

+268
-38
lines changed

‎app/Plugins/User/Databases/DatabasesPlugin.php‎

Lines changed: 61 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,8 @@ public function getPublicFunctions()
111111
'addPref',
112112
'search',
113113
'indexCount',
114+
'updateSelectSequenceAll',
115+
'updateColumnSequenceAll',
114116
];
115117
return $functions;
116118
}
@@ -136,9 +138,10 @@ public function declareRole()
136138
$role_check_table["input"] = array('posts.create', 'posts.update');
137139
$role_check_table["publicConfirm"] = array('posts.create', 'posts.update');
138140
$role_check_table["publicStore"] = array('posts.create', 'posts.update');
139-
$role_check_table["trendWords"] = array('frames.edit');
140-
141+
$role_check_table["trendWords"] = array('frames.edit');
141142
$role_check_table["addPref"] = array('buckets.addColumn');
143+
$role_check_table['updateSelectSequenceAll'] = ['buckets.upColumnSequence', 'buckets.downColumnSequence'];
144+
$role_check_table['updateColumnSequenceAll'] = ['buckets.upColumnSequence', 'buckets.downColumnSequence'];
142145
return $role_check_table;
143146
}
144147

@@ -2626,6 +2629,34 @@ public function updateColumnSequence($request, $page_id, $frame_id)
26262629
return $this->editColumn($request, $page_id, $frame_id, $request->databases_id, $message, null);
26272630
}
26282631

2632+
/**
2633+
* つまんで移動した項目の表示順を更新
2634+
*/
2635+
public function updateColumnSequenceAll($request, $page_id, $frame_id)
2636+
{
2637+
DB::beginTransaction();
2638+
try {
2639+
foreach ($request->column_ids_order as $key => $column_id) {
2640+
$column = DatabasesColumns::where('id', $column_id)->first();
2641+
if ($column) {
2642+
// display_sequenceを1から順に全項目を振り直し
2643+
$column->display_sequence = $key + 1;
2644+
$column->save();
2645+
}
2646+
}
2647+
2648+
DB::commit();
2649+
} catch (\Exception $e) {
2650+
DB::rollBack();
2651+
throw $e;
2652+
}
2653+
2654+
$message = '項目の表示順を更新しました。';
2655+
2656+
// 編集画面を呼び出す
2657+
return $this->editColumn($request, $page_id, $frame_id, $request->databases_id, $message, null);
2658+
}
2659+
26292660
/**
26302661
* 項目に紐づく詳細設定の更新
26312662
*/
@@ -2974,6 +3005,34 @@ public function updateSelectSequence($request, $page_id, $frame_id)
29743005
return $this->editColumnDetail($request, $page_id, $frame_id, $request->column_id, $message, null);
29753006
}
29763007

3008+
/**
3009+
* つまんで移動した選択肢の表示順を更新
3010+
*/
3011+
public function updateSelectSequenceAll($request, $page_id, $frame_id)
3012+
{
3013+
DB::beginTransaction();
3014+
try {
3015+
foreach ($request->select_ids_order as $key => $select_id) {
3016+
$select = DatabasesColumnsSelects::where('id', $select_id)->first();
3017+
if ($select) {
3018+
// display_sequenceを1から順に全選択肢を振り直し
3019+
$select->display_sequence = $key + 1;
3020+
$select->save();
3021+
}
3022+
}
3023+
3024+
DB::commit();
3025+
} catch (\Exception $e) {
3026+
DB::rollBack();
3027+
throw $e;
3028+
}
3029+
3030+
$message = '選択肢の表示順を更新しました。';
3031+
3032+
// 編集画面を呼び出す
3033+
return $this->editColumnDetail($request, $page_id, $frame_id, $request->column_id, $message, null);
3034+
}
3035+
29773036
/**
29783037
* 項目に紐づく選択肢の削除
29793038
*/

‎app/Plugins/User/Forms/FormsPlugin.php‎

Lines changed: 62 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@
3636
use App\Utilities\Token\TokenUtils;
3737

3838
use App\Enums\Bs4TextColor;
39-
use App\Enums\CsvCharacterCode;
4039
use App\Enums\FormAccessLimitType;
4140
use App\Enums\FormColumnType;
4241
use App\Enums\FormMode;
@@ -58,7 +57,8 @@
5857
*
5958
* フォームの作成＆データ収集用プラグイン。
6059
*
61-
* @author 永原　篤 <[email protected]>, 井上 雅人 <[email protected] / [email protected]>
60+
* @author 永原　篤 <[email protected]>
61+
* @author 井上 雅人 <[email protected] / [email protected]>
6262
* @author 牟田口 満 <[email protected]>
6363
* @copyright OpenSource-WorkShop Co.,Ltd. All Rights Reserved
6464
* @category フォーム・プラグイン
@@ -113,6 +113,8 @@ public function getPublicFunctions()
113113
'copyForm',
114114
'downloadCsvAggregate',
115115
'registerOtherPlugins',
116+
'updateSelectSequenceAll',
117+
'updateColumnSequenceAll',
116118
];
117119
return $functions;
118120
}
@@ -136,6 +138,8 @@ public function declareRole()
136138
$role_check_table["aggregate"] = ['role_article'];
137139
$role_check_table["downloadCsvAggregate"] = ['role_article'];
138140
$role_check_table["registerOtherPlugins"] = ['role_article'];
141+
$role_check_table['updateSelectSequenceAll'] = ['buckets.upColumnSequence', 'buckets.downColumnSequence'];
142+
$role_check_table['updateColumnSequenceAll'] = ['buckets.upColumnSequence', 'buckets.downColumnSequence'];
139143
return $role_check_table;
140144
}
141145

@@ -2148,6 +2152,34 @@ public function updateColumnSequence($request, $page_id, $frame_id)
21482152
return $this->editColumn($request, $page_id, $frame_id, $request->forms_id, $message, null);
21492153
}
21502154

2155+
/**
2156+
* つまんで移動した項目の表示順を更新
2157+
*/
2158+
public function updateColumnSequenceAll($request, $page_id, $frame_id)
2159+
{
2160+
DB::beginTransaction();
2161+
try {
2162+
foreach ($request->column_ids_order as $key => $column_id) {
2163+
$column = FormsColumns::where('id', $column_id)->first();
2164+
if ($column) {
2165+
// display_sequenceを1から順に全項目を振り直し
2166+
$column->display_sequence = $key + 1;
2167+
$column->save();
2168+
}
2169+
}
2170+
2171+
DB::commit();
2172+
} catch (\Exception $e) {
2173+
DB::rollBack();
2174+
throw $e;
2175+
}
2176+
2177+
$message = '項目の表示順を更新しました。';
2178+
2179+
// 編集画面を呼び出す
2180+
return $this->editColumn($request, $page_id, $frame_id, $request->forms_id, $message, null);
2181+
}
2182+
21512183
/**
21522184
* 項目に紐づく詳細情報の更新
21532185
*/
@@ -2378,6 +2410,34 @@ public function updateSelectSequence($request, $page_id, $frame_id)
23782410
return $this->editColumnDetail($request, $page_id, $frame_id, $request->column_id, $message, null);
23792411
}
23802412

2413+
/**
2414+
* つまんで移動した選択肢の表示順を更新
2415+
*/
2416+
public function updateSelectSequenceAll($request, $page_id, $frame_id)
2417+
{
2418+
DB::beginTransaction();
2419+
try {
2420+
foreach ($request->select_ids_order as $key => $select_id) {
2421+
$select = FormsColumnsSelects::where('id', $select_id)->first();
2422+
if ($select) {
2423+
// display_sequenceを1から順に全選択肢を振り直し
2424+
$select->display_sequence = $key + 1;
2425+
$select->save();
2426+
}
2427+
}
2428+
2429+
DB::commit();
2430+
} catch (\Exception $e) {
2431+
DB::rollBack();
2432+
throw $e;
2433+
}
2434+
2435+
$message = '選択肢の表示順を更新しました。';
2436+
2437+
// 編集画面を呼び出す
2438+
return $this->editColumnDetail($request, $page_id, $frame_id, $request->column_id, $message, null);
2439+
}
2440+
23812441
/**
23822442
* 項目に紐づく選択肢の削除
23832443
*/

‎resources/views/plugins/user/databases/default/databases_edit.blade.php‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -110,10 +110,12 @@ function submit_display_sequence(column_id, display_sequence, display_sequence_o
110110

111111
<div class="table-responsive">
112112
{{-- 項目の一覧 --}}
113-
<table class="table table-hover table-sm">
113+
<table class="table table-hover table-sm" id="sortable-columns">
114114
<thead class="thead-light">
115115
<tr>
116-
<th class="text-center text-nowrap">表示順</th>
116+
<th class="text-center text-nowrap">
117+
表示順 <a class="fas fa-info-circle" data-toggle="tooltip" data-html="true" title="<i class='fa-solid fa-grip-vertical'></i> をつまんで移動(ドラック＆ドロップ)すると表示順を変更できます。"></a>
118+
</th>
117119
<th class="text-center text-nowrap" style="min-width: 165px;">項目名</th>
118120
<th class="text-center text-nowrap" style="min-width: 165px;">型</th>
119121
<th class="text-center text-nowrap">必須</th>
@@ -128,21 +130,35 @@ function submit_display_sequence(column_id, display_sequence, display_sequence_o
128130
<th class="text-center text-nowrap">削除</th>
129131
</tr>
130132
</thead>
131-
<tbody>
132133
{{-- 更新用の行 --}}
133134
@foreach($columns as $column)
134-
@include('plugins.user.databases.default.databases_edit_row')
135+
<tbody>
136+
@include('plugins.user.databases.default.databases_edit_row')
137+
</tbody>
135138
@endforeach
136-
139+
<tfoot>
137140
{{-- 新規登録用の行 --}}
138141
<tr class="thead-light">
139142
<th colspan="9">【項目の追加行】</th>
140143
</tr>
141144
@include('plugins.user.databases.default.databases_edit_row_add')
142-
</tbody>
145+
</tfoot>
143146
</table>
144147
</div>
145148

149+
<script>
150+
// ドラック＆ドロップで表示順変更
151+
let el = document.getElementById('sortable-columns');
152+
new Sortable(el, {
153+
handle: '.sortable-handle',
154+
animation: 150,
155+
onUpdate: function (evt) {
156+
database_columns.action = "{{url('/')}}/plugin/databases/updateColumnSequenceAll/{{$page->id}}/{{$frame_id}}#frame-{{$frame_id}}";
157+
database_columns.submit();
158+
},
159+
});
160+
</script>
161+
146162
{{-- ボタンエリア --}}
147163
<div class="text-center mt-3 mt-md-0">
148164
{{-- キャンセルボタン --}}

‎resources/views/plugins/user/databases/default/databases_edit_row.blade.php‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@
1010
<tr>
1111
{{-- 表示順 --}}
1212
<td nowrap>
13+
{{-- つまんで移動 --}}
14+
<button type="button" class="btn btn-default text-secondary p-1 sortable-handle">
15+
<i class="fa-solid fa-grip-vertical"></i>
16+
</button>
17+
<input type="hidden" name="column_ids_order[]" value="{{ $column->id }}">
18+
1319
{{-- 上移動 --}}
1420
<button type="button" class="btn btn-default btn-xs p-1" @if ($loop->first) disabled @endif onclick="javascript:submit_display_sequence({{ $column->id }}, {{ $column->display_sequence }}, 'up')">
1521
<i class="fas fa-arrow-up"></i>

‎resources/views/plugins/user/databases/default/databases_edit_row_detail.blade.php‎

Lines changed: 35 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,11 @@ function submit_update_column_detail() {
7979
database_column_detail.action = "{{url('/')}}/plugin/databases/updateColumnDetail/{{$page->id}}/{{$frame_id}}#frame-{{$frame_id}}";
8080
database_column_detail.submit();
8181
}
82+
83+
$(function () {
84+
// ツールチップ有効化
85+
$('[data-toggle="tooltip"]').tooltip()
86+
})
8287
</script>
8388

8489
<form action="" id="database_column_detail" name="database_column_detail" method="POST" class="form-horizontal">
@@ -174,31 +179,39 @@ function submit_update_column_detail() {
174179
@endif
175180

176181
<div class="table-responsive">
177-
<table class="table table-hover table-sm">
182+
<table class="table table-hover table-sm mb-0">
178183
<thead class="thead-light">
179184
{{-- 選択項目の一覧 --}}
180185
<tr>
181186
@if (count($selects) > 0)
182-
<th class="text-center" nowrap>表示順</th>
187+
<th class="text-center" nowrap>
188+
表示順 <a class="fas fa-info-circle" data-toggle="tooltip" data-html="true" title="<i class='fa-solid fa-grip-vertical'></i> をつまんで移動(ドラック＆ドロップ)すると表示順を変更できます。"></a>
189+
</th>
183190
<th class="text-center" nowrap>選択肢名</th>
184191
<th class="text-center" nowrap>更新</th>
185192
<th class="text-center" nowrap>削除</th>
186193
@endif
187194
</tr>
188195
</thead>
189-
<tbody>
196+
<tbody id="sortable-selects">
190197
{{-- 更新用の行 --}}
191198
@foreach($selects as $select)
192-
<tr @if (isset($select->hide_flag)) class="table-secondary" @endif>
199+
<tr>
200+
{{-- 表示順操作 --}}
193201
<td class="text-center" nowrap>
194-
{{-- 表示順操作 --}}
202+
{{-- つまんで移動 --}}
203+
<button type="button" class="btn btn-default text-secondary p-1 sortable-handle">
204+
<i class="fa-solid fa-grip-vertical"></i>
205+
</button>
206+
<input type="hidden" name="select_ids_order[]" value="{{ $select->id }}">
207+
195208
{{-- 上移動 --}}
196-
<button type="button" class="btn btn-default btn-xs p-1" @if ($loop->first) disabled @endif onclick="javascript:submit_display_sequence({{ $select->id }}, {{ $select->display_sequence }}, 'up')">
209+
<button type="button" class="btn btn-default p-1" @if ($loop->first) disabled @endif onclick="javascript:submit_display_sequence({{ $select->id }}, {{ $select->display_sequence }}, 'up')">
197210
<i class="fas fa-arrow-up"></i>
198211
</button>
199212

200213
{{-- 下移動 --}}
201-
<button type="button" class="btn btn-default btn-xs p-1" @if ($loop->last) disabled @endif onclick="javascript:submit_display_sequence({{ $select->id }}, {{ $select->display_sequence }}, 'down')">
214+
<button type="button" class="btn btn-default p-1" @if ($loop->last) disabled @endif onclick="javascript:submit_display_sequence({{ $select->id }}, {{ $select->display_sequence }}, 'down')">
202215
<i class="fas fa-arrow-down"></i>
203216
</button>
204217
</td>
@@ -229,7 +242,8 @@ class="btn btn-danger cc-font-90 text-nowrap"
229242
</td>
230243
</tr>
231244
@endforeach
232-
245+
</tbody>
246+
<tbody>
233247
<tr class="thead-light">
234248
<th colspan="7">【選択肢の追加行】</th>
235249
</tr>
@@ -271,6 +285,19 @@ class="btn btn-danger cc-font-90 text-nowrap"
271285
</div>
272286
</div>
273287
</div>
288+
289+
<script>
290+
// ドラック＆ドロップで表示順変更
291+
let el = document.getElementById('sortable-selects');
292+
new Sortable(el, {
293+
handle: '.sortable-handle',
294+
animation: 150,
295+
onUpdate: function (evt) {
296+
database_column_detail.action = "{{url('/')}}/plugin/databases/updateSelectSequenceAll/{{$page->id}}/{{$frame_id}}#frame-{{$frame_id}}";
297+
database_column_detail.submit();
298+
},
299+
});
300+
</script>
274301
@endif
275302

276303
@if ($column->column_type == DatabaseColumnType::time)

0 commit comments

Comments
 (0)