Windy/lsky-pro
1
0
Fork 0
mirror of https://github.com/lsky-org/lsky-pro.git synced 2025-01-09 04:19:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ 相册编辑功能

Browse Source
This commit is contained in:
Wisp X 2021-12-26 14:26:12 +08:00
parent 6a4a57aa65
commit 8b584b54e4
3 changed files with 35 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/Http/Controllers/User/AlbumController.php
View File

@ -32,4 +32,16 @@ class AlbumController extends Controller
}
return $this->error('创建失败');
}
public function update(AlbumRequest $request): Response
{
/** @var User $user */
$user = Auth::user();
$album = $user->albums()->find($request->route('id'));
if (is_null($album)) {
return $this->error('不存在的相册');
}
$album->update(array_filter($request->validated()));
return $this->success('修改成功');
}
}

32
resources/views/images.blade.php
View File

@ -82,7 +82,7 @@
<div id="albums-container" class="flex flex-col justify-center items-center w-full p-3 space-y-2">
<div id="album-add" class="flex flex-col w-full hidden border rounded p-2">
<p class="error-message text-white p-2 mb-2 text-sm bg-red-500 rounded hidden"></p>
<form class="w-full space-y-2" action="{{ route('user.album.create') }}">
<form class="w-full space-y-2" action="/user/albums">
<input type="text" class="w-full rounded px-2.5 py-1.5 text-sm border-0 bg-gray-200" name="name" placeholder="请输入名称">
<textarea class="w-full resize-y rounded-md text-sm border-0 bg-gray-200" name="intro" placeholder="请输入简介"></textarea>
</form>
@ -93,7 +93,7 @@
<script type="text/html" id="albums-item-tpl">
<a href="javascript:void(0)" data-id="__id__" title="__intro__" class="albums-item flex justify-between items-center group px-2 h-7 rounded w-full bg-gray-100 text-gray-800 hover:bg-blue-300 hover:text-white">
<span class="text-sm truncate w-[80%]">__name__</span>
<span class="text-sm truncate w-[80%] name">__name__</span>
<div class="flex items-center justify-center space-x-1 hidden group-hover:block">
<span class="update"><i class="fas fa-edit text-xs"></i></span>
<span class="delete"><i class="fas fa-trash-alt text-xs text-red-400"></i></span>
@ -105,9 +105,9 @@
<script type="text/html" id="album-update-tpl">
<div id="album-edit" data-id="__id__" class="flex flex-col w-full border rounded p-2">
<p class="error-message text-white p-2 mb-2 text-sm bg-red-500 rounded hidden"></p>
<form class="w-full space-y-2" action="{{ route('user.album.create') }}">
<input type="text" class="w-full rounded px-2.5 py-1.5 text-sm border-0 bg-gray-200" placeholder="请输入名称" value="__name__">
<textarea class="w-full resize-y rounded-md text-sm border-0 bg-gray-200" placeholder="请输入简介">__intro__</textarea>
<form class="w-full space-y-2" action="/user/albums/__id__">
<input type="text" class="w-full rounded px-2.5 py-1.5 text-sm border-0 bg-gray-200" placeholder="请输入名称" name="name" value="__name__">
<textarea class="w-full resize-y rounded-md text-sm border-0 bg-gray-200" name="intro" placeholder="请输入简介">__intro__</textarea>
</form>
<a href="javascript:void(0)" class="w-full py-1 px-2 bg-indigo-500 text-white text-sm text-center tracking-wider font-semibold rounded-md">确认修改</a>
</div>
@ -270,7 +270,7 @@
if (selectedId !== $item.data('id')) {
$item.after($('#album-update-tpl').html()
.replace(/__id__/g, $item.data('id'))
.replace(/__name__/g, $item.find('>span').text())
.replace(/__name__/g, $item.find('>span').html())
.replace(/__intro__/g, $item.attr('title'))
);
}
@ -287,18 +287,30 @@
let $form = $(this).siblings('form');
axios.post($form.attr('action'), $form.serialize()).then(response => {
let $errorMessage = $albums.find(CREATE_ID + ' .error-message').html('').hide();
if (response.status) {
if (response.data.status) {
$form.get(0).reset();
resetAlbums()
} else {
$errorMessage.html('<i class="fas fa-exclamation-circle"></i> ' + response.message).show();
$errorMessage.html('<i class="fas fa-exclamation-circle"></i> ' + response.data.message).show();
}
})
});
});
// confirm update
$albums.off('click', UPDATE_ID + ' a').on('click', UPDATE_ID + ' a', function (e) {
console.log(111)
let $form = $(this).siblings('form');
axios.put($form.attr('action'), $form.serialize()).then(response => {
let $errorMessage = $albums.find(UPDATE_ID + ' .error-message').html('').hide();
if (response.data.status) {
let $editContainer = $(this).closest(UPDATE_ID);
$albums.find(`>a[data-id=${$editContainer.data('id')}]`)
.attr('title', $form.find('textarea').val())
.find('.name').text($form.find('input').val());
$editContainer.remove();
} else {
$errorMessage.html('<i class="fas fa-exclamation-circle"></i> ' + response.data.message).show();
}
});
});
});
}

1
routes/web.php
View File

@ -27,6 +27,7 @@ Route::group(['middleware' => ['auth']], function () {
Route::get('images', [ImageController::class, 'images'])->name('user.images');
Route::get('albums', [AlbumController::class, 'albums'])->name('user.albums');
Route::post('albums', [AlbumController::class, 'create'])->name('user.album.create');
Route::put('albums/{id}', [AlbumController::class, 'update'])->name('user.album.update');
});
});