Skip to content

[フォーム][データベース] 表示順をつまんで移動(ドラック＆ドロップ)できるように対応 #2182

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Apr 28, 2025
Merged

[フォーム][データベース] 表示順をつまんで移動(ドラック＆ドロップ)できるように対応 #2182

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a0396ca
change: フォーム＞項目詳細設定＞選択肢の設定, 表示順をつまんで移動(ドラック＆ドロップ)できるように対応
akagane99 Apr 23, 2025
dd496c2
change: データベース＞項目詳細設定＞選択肢の設定, 表示順をつまんで移動(ドラック＆ドロップ)できるように対応
akagane99 Apr 23, 2025
91d3626
change: フォーム＞項目設定, 表示順をつまんで移動(ドラック＆ドロップ)できるように対応
akagane99 Apr 25, 2025
e0ada93
change: フォーム＞項目設定, 表示順をつまんで移動(ドラック＆ドロップ)できるように対応2
akagane99 Apr 25, 2025
b64b934
change: データベース＞項目設定, 表示順をつまんで移動(ドラック＆ドロップ)できるように対応
akagane99 Apr 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 61 additions & 2 deletions app/Plugins/User/Databases/DatabasesPlugin.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,8 @@ public function getPublicFunctions()
'addPref',
'search',
'indexCount',
'updateSelectSequenceAll',
'updateColumnSequenceAll',
];
return $functions;
}
Expand All @@ -136,9 +138,10 @@ public function declareRole()
$role_check_table["input"] = array('posts.create', 'posts.update');
$role_check_table["publicConfirm"] = array('posts.create', 'posts.update');
$role_check_table["publicStore"] = array('posts.create', 'posts.update');
$role_check_table["trendWords"] = array('frames.edit');

$role_check_table["trendWords"] = array('frames.edit');
$role_check_table["addPref"] = array('buckets.addColumn');
$role_check_table['updateSelectSequenceAll'] = ['buckets.upColumnSequence', 'buckets.downColumnSequence'];
$role_check_table['updateColumnSequenceAll'] = ['buckets.upColumnSequence', 'buckets.downColumnSequence'];
return $role_check_table;
}

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

/**
* つまんで移動した項目の表示順を更新
*/
public function updateColumnSequenceAll($request, $page_id, $frame_id)
{
DB::beginTransaction();
try {
foreach ($request->column_ids_order as $key => $column_id) {
$column = DatabasesColumns::where('id', $column_id)->first();
if ($column) {
// display_sequenceを1から順に全項目を振り直し
$column->display_sequence = $key + 1;
$column->save();
}
}

DB::commit();
} catch (\Exception $e) {
DB::rollBack();
throw $e;
}

$message = '項目の表示順を更新しました。';

// 編集画面を呼び出す
return $this->editColumn($request, $page_id, $frame_id, $request->databases_id, $message, null);
}

/**
* 項目に紐づく詳細設定の更新
*/
Expand Down Expand Up @@ -2974,6 +3005,34 @@ public function updateSelectSequence($request, $page_id, $frame_id)
return $this->editColumnDetail($request, $page_id, $frame_id, $request->column_id, $message, null);
}

/**
* つまんで移動した選択肢の表示順を更新
*/
public function updateSelectSequenceAll($request, $page_id, $frame_id)
{
DB::beginTransaction();
try {
foreach ($request->select_ids_order as $key => $select_id) {
$select = DatabasesColumnsSelects::where('id', $select_id)->first();
if ($select) {
// display_sequenceを1から順に全選択肢を振り直し
$select->display_sequence = $key + 1;
$select->save();
}
}

DB::commit();
} catch (\Exception $e) {
DB::rollBack();
throw $e;
}

$message = '選択肢の表示順を更新しました。';

// 編集画面を呼び出す
return $this->editColumnDetail($request, $page_id, $frame_id, $request->column_id, $message, null);
}

/**
* 項目に紐づく選択肢の削除
*/
Expand Down
64 changes: 62 additions & 2 deletions app/Plugins/User/Forms/FormsPlugin.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@
use App\Utilities\Token\TokenUtils;

use App\Enums\Bs4TextColor;
use App\Enums\CsvCharacterCode;
use App\Enums\FormAccessLimitType;
use App\Enums\FormColumnType;
use App\Enums\FormMode;
Expand All @@ -58,7 +57,8 @@
*
* フォームの作成＆データ収集用プラグイン。
*
* @author 永原　篤 <nagahara@opensource-workshop.jp>, 井上 雅人 <inoue@opensource-workshop.jp / masamasamasato0216@gmail.com>
* @author 永原　篤 <nagahara@opensource-workshop.jp>
* @author 井上 雅人 <inoue@opensource-workshop.jp / masamasamasato0216@gmail.com>
* @author 牟田口 満 <mutaguchi@opensource-workshop.jp>
* @copyright OpenSource-WorkShop Co.,Ltd. All Rights Reserved
* @category フォーム・プラグイン
Expand Down Expand Up @@ -113,6 +113,8 @@ public function getPublicFunctions()
'copyForm',
'downloadCsvAggregate',
'registerOtherPlugins',
'updateSelectSequenceAll',
'updateColumnSequenceAll',
];
return $functions;
}
Expand All @@ -136,6 +138,8 @@ public function declareRole()
$role_check_table["aggregate"] = ['role_article'];
$role_check_table["downloadCsvAggregate"] = ['role_article'];
$role_check_table["registerOtherPlugins"] = ['role_article'];
$role_check_table['updateSelectSequenceAll'] = ['buckets.upColumnSequence', 'buckets.downColumnSequence'];
$role_check_table['updateColumnSequenceAll'] = ['buckets.upColumnSequence', 'buckets.downColumnSequence'];
return $role_check_table;
}

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

/**
* つまんで移動した項目の表示順を更新
*/
public function updateColumnSequenceAll($request, $page_id, $frame_id)
{
DB::beginTransaction();
try {
foreach ($request->column_ids_order as $key => $column_id) {
$column = FormsColumns::where('id', $column_id)->first();
if ($column) {
// display_sequenceを1から順に全項目を振り直し
$column->display_sequence = $key + 1;
$column->save();
}
}

DB::commit();
} catch (\Exception $e) {
DB::rollBack();
throw $e;
}

$message = '項目の表示順を更新しました。';

// 編集画面を呼び出す
return $this->editColumn($request, $page_id, $frame_id, $request->forms_id, $message, null);
}

/**
* 項目に紐づく詳細情報の更新
*/
Expand Down Expand Up @@ -2378,6 +2410,34 @@ public function updateSelectSequence($request, $page_id, $frame_id)
return $this->editColumnDetail($request, $page_id, $frame_id, $request->column_id, $message, null);
}

/**
* つまんで移動した選択肢の表示順を更新
*/
public function updateSelectSequenceAll($request, $page_id, $frame_id)
{
DB::beginTransaction();
try {
foreach ($request->select_ids_order as $key => $select_id) {
$select = FormsColumnsSelects::where('id', $select_id)->first();
if ($select) {
// display_sequenceを1から順に全選択肢を振り直し
$select->display_sequence = $key + 1;
$select->save();
}
}

DB::commit();
} catch (\Exception $e) {
DB::rollBack();
throw $e;
}

$message = '選択肢の表示順を更新しました。';

// 編集画面を呼び出す
return $this->editColumnDetail($request, $page_id, $frame_id, $request->column_id, $message, null);
}

/**
* 項目に紐づく選択肢の削除
*/
Expand Down
28 changes: 22 additions & 6 deletions resources/views/plugins/user/databases/default/databases_edit.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,10 +110,12 @@ function submit_display_sequence(column_id, display_sequence, display_sequence_o

<div class="table-responsive">
{{-- 項目の一覧 --}}
<table class="table table-hover table-sm">
<table class="table table-hover table-sm" id="sortable-columns">
<thead class="thead-light">
<tr>
<th class="text-center text-nowrap">表示順</th>
<th class="text-center text-nowrap">
表示順 <a class="fas fa-info-circle" data-toggle="tooltip" data-html="true" title="<i class='fa-solid fa-grip-vertical'></i> をつまんで移動(ドラック＆ドロップ)すると表示順を変更できます。"></a>
</th>
<th class="text-center text-nowrap" style="min-width: 165px;">項目名</th>
<th class="text-center text-nowrap" style="min-width: 165px;">型</th>
<th class="text-center text-nowrap">必須</th>
Expand All @@ -128,21 +130,35 @@ function submit_display_sequence(column_id, display_sequence, display_sequence_o
<th class="text-center text-nowrap">削除</th>
</tr>
</thead>
<tbody>
{{-- 更新用の行 --}}
@foreach($columns as $column)
@include('plugins.user.databases.default.databases_edit_row')
<tbody>
@include('plugins.user.databases.default.databases_edit_row')
</tbody>
@endforeach

<tfoot>
{{-- 新規登録用の行 --}}
<tr class="thead-light">
<th colspan="9">【項目の追加行】</th>
</tr>
@include('plugins.user.databases.default.databases_edit_row_add')
</tbody>
</tfoot>
</table>
</div>

<script>
// ドラック＆ドロップで表示順変更
let el = document.getElementById('sortable-columns');
new Sortable(el, {
handle: '.sortable-handle',
animation: 150,
onUpdate: function (evt) {
database_columns.action = "{{url('/')}}/plugin/databases/updateColumnSequenceAll/{{$page->id}}/{{$frame_id}}#frame-{{$frame_id}}";
database_columns.submit();
},
});
</script>

{{-- ボタンエリア --}}
<div class="text-center mt-3 mt-md-0">
{{-- キャンセルボタン --}}
Expand Down
6 changes: 6 additions & 0 deletions resources/views/plugins/user/databases/default/databases_edit_row.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,12 @@
<tr>
{{-- 表示順 --}}
<td nowrap>
{{-- つまんで移動 --}}
<button type="button" class="btn btn-default text-secondary p-1 sortable-handle">
<i class="fa-solid fa-grip-vertical"></i>
</button>
<input type="hidden" name="column_ids_order[]" value="{{ $column->id }}">

{{-- 上移動 --}}
<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')">
<i class="fas fa-arrow-up"></i>
Expand Down
43 changes: 35 additions & 8 deletions resources/views/plugins/user/databases/default/databases_edit_row_detail.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,11 @@ function submit_update_column_detail() {
database_column_detail.action = "{{url('/')}}/plugin/databases/updateColumnDetail/{{$page->id}}/{{$frame_id}}#frame-{{$frame_id}}";
database_column_detail.submit();
}

$(function () {
// ツールチップ有効化
$('[data-toggle="tooltip"]').tooltip()
})
</script>

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

<div class="table-responsive">
<table class="table table-hover table-sm">
<table class="table table-hover table-sm mb-0">
<thead class="thead-light">
{{-- 選択項目の一覧 --}}
<tr>
@if (count($selects) > 0)
<th class="text-center" nowrap>表示順</th>
<th class="text-center" nowrap>
表示順 <a class="fas fa-info-circle" data-toggle="tooltip" data-html="true" title="<i class='fa-solid fa-grip-vertical'></i> をつまんで移動(ドラック＆ドロップ)すると表示順を変更できます。"></a>
</th>
<th class="text-center" nowrap>選択肢名</th>
<th class="text-center" nowrap>更新</th>
<th class="text-center" nowrap>削除</th>
@endif
</tr>
</thead>
<tbody>
<tbody id="sortable-selects">
{{-- 更新用の行 --}}
@foreach($selects as $select)
<tr @if (isset($select->hide_flag)) class="table-secondary" @endif>
<tr>
{{-- 表示順操作 --}}
<td class="text-center" nowrap>
{{-- 表示順操作 --}}
{{-- つまんで移動 --}}
<button type="button" class="btn btn-default text-secondary p-1 sortable-handle">
<i class="fa-solid fa-grip-vertical"></i>
</button>
<input type="hidden" name="select_ids_order[]" value="{{ $select->id }}">

{{-- 上移動 --}}
<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')">
<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')">
<i class="fas fa-arrow-up"></i>
</button>

{{-- 下移動 --}}
<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')">
<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')">
<i class="fas fa-arrow-down"></i>
</button>
</td>
Expand Down Expand Up @@ -229,7 +242,8 @@ class="btn btn-danger cc-font-90 text-nowrap"
</td>
</tr>
@endforeach

</tbody>
<tbody>
<tr class="thead-light">
<th colspan="7">【選択肢の追加行】</th>
</tr>
Expand Down Expand Up @@ -271,6 +285,19 @@ class="btn btn-danger cc-font-90 text-nowrap"
</div>
</div>
</div>

<script>
// ドラック＆ドロップで表示順変更
let el = document.getElementById('sortable-selects');
new Sortable(el, {
handle: '.sortable-handle',
animation: 150,
onUpdate: function (evt) {
database_column_detail.action = "{{url('/')}}/plugin/databases/updateSelectSequenceAll/{{$page->id}}/{{$frame_id}}#frame-{{$frame_id}}";
database_column_detail.submit();
},
});
</script>
@endif

@if ($column->column_type == DatabaseColumnType::time)
Expand Down
Loading