STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

gallery support

Browse Source
This commit is contained in:
James Collins
2023-07-18 18:35:58 +10:00
parent 64ef8e9acd
commit ef4efe723f
18 changed files with 447 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/Conductors/ArticleConductor.php
View File

@@ -32,13 +32,14 @@ class ArticleConductor extends Conductor
*
* @var string[]
*/
protected $includes = ['attachments', 'user'];
protected $includes = ['attachments', 'user', 'gallery'];
/**
* Run a scope query on the collection before anything else.
*
* @param Builder $builder The builder in use.
* @return void
*/
public function scope(Builder $builder): void
{
@@ -127,6 +128,19 @@ class ArticleConductor extends Conductor
});
}
/**
* Include Gallery Field.
*
* @param Model $model Them model.
* @return mixed The model result.
*/
public function includeGallery(Model $model)
{
return $model->gallery()->get()->map(function ($item) {
return MediaConductor::includeModel(request(), 'gallery', $item->media);
});
}
/**
* Include User Field.
*

2
app/Conductors/MediaConductor.php
View File

@@ -2,9 +2,9 @@
namespace App\Conductors;
use App\Models\User;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Foundation\Auth\User;
class MediaConductor extends Conductor
{

7
app/Conductors/UserConductor.php
View File

@@ -39,14 +39,17 @@ class UserConductor extends Conductor
{
$user = auth()->user();
$data = $model->toArray();
$limit = $this->fields($model);
// echo 'USER--' . implode(',', $limit) . "\n";
if ($user === null || ($user->hasPermission('admin/users') === false && strcasecmp($user->id, $model->id) !== 0)) {
$fields = ['id', 'display_name'];
$data = arrayLimitKeys($data, $fields);
$limit = ['id', 'display_name'];
} else {
$data['permissions'] = $user->permissions;
}
$data = arrayLimitKeys($data, $limit);
return $data;
}

92
app/Http/Controllers/Api/ApiController.php
View File

@@ -24,9 +24,13 @@ class ApiController extends Controller
* @param array $data Response data.
* @param integer $respondCode Response status code.
* @param array $headers Response headers.
* @return JsonResponse
*/
public function respondJson(array $data, int $respondCode = HttpResponseCodes::HTTP_OK, array $headers = []): JsonResponse
{
public function respondJson(
array $data,
int $respondCode = HttpResponseCodes::HTTP_OK,
array $headers = []
): JsonResponse {
return response()->json($data, $respondCode, $headers);
}
@@ -34,9 +38,11 @@ class ApiController extends Controller
* Return forbidden message
*
* @param string $message Response message.
* @return JsonResponse
*/
public function respondForbidden(string $message = 'You do not have permission to access the resource.'): JsonResponse
{
public function respondForbidden(
string $message = 'You do not have permission to access the resource.'
): JsonResponse {
return response()->json(['message' => $message], HttpResponseCodes::HTTP_FORBIDDEN);
}
@@ -44,6 +50,7 @@ class ApiController extends Controller
* Return forbidden message
*
* @param string $message Response message.
* @return JsonResponse
*/
public function respondNotFound(string $message = 'The resource was not found.'): JsonResponse
{
@@ -54,6 +61,7 @@ class ApiController extends Controller
* Return too large message
*
* @param string $message Response message.
* @return JsonResponse
*/
public function respondTooLarge(string $message = 'The request entity is too large.'): JsonResponse
{
@@ -61,7 +69,9 @@ class ApiController extends Controller
}
/**
* Return no content
* Return no content.
*
* @return JsonResponse
*/
public function respondNoContent(): JsonResponse
{
@@ -69,7 +79,19 @@ class ApiController extends Controller
}
/**
* Return created
* Return no content
*
* @return JsonResponse
*/
public function respondNotImplmeneted(): JsonResponse
{
return response()->json([], HttpResponseCodes::HTTP_NOT_IMPLEMENTED);
}
/**
* Return created.
*
* @return JsonResponse
*/
public function respondCreated(): JsonResponse
{
@@ -77,7 +99,9 @@ class ApiController extends Controller
}
/**
* Return accepted
* Return accepted.
*
* @return JsonResponse
*/
public function respondAccepted(): JsonResponse
{
@@ -89,9 +113,12 @@ class ApiController extends Controller
*
* @param string $message Error message.
* @param integer $responseCode Resource code.
* @return JsonResponse
*/
public function respondError(string $message, int $responseCode = HttpResponseCodes::HTTP_UNPROCESSABLE_ENTITY): JsonResponse
{
public function respondError(
string $message,
int $responseCode = HttpResponseCodes::HTTP_UNPROCESSABLE_ENTITY
): JsonResponse {
return response()->json([
'message' => $message
], $responseCode);
@@ -102,9 +129,12 @@ class ApiController extends Controller
*
* @param array $errors Error messages.
* @param integer $responseCode Resource code.
* @return JsonResponse
*/
public function respondWithErrors(array $errors, int $responseCode = HttpResponseCodes::HTTP_UNPROCESSABLE_ENTITY): JsonResponse
{
public function respondWithErrors(
array $errors,
int $responseCode = HttpResponseCodes::HTTP_UNPROCESSABLE_ENTITY
): JsonResponse {
$keys = array_keys($errors);
$error = $errors[$keys[0]];
@@ -122,17 +152,20 @@ class ApiController extends Controller
/**
* Return resource data
*
* @param array|Model|Collection $data Resource data.
* @param array $options Respond options.
* @param array|Model|Collection $data Resource data.
* @param array $options Respond options.
* @param callable|null $validationFn Optional validation function to check the data before responding.
* @return JsonResponse
*/
protected function respondAsResource(
mixed $data,
array $options = [],
$validationFn = null
): JsonResponse {
$isCollection = $options['isCollection'] ?? false;
$appendData = $options['appendData'] ?? null;
$resourceName = $options['resourceName'] ?? null;
$isCollection = ($options['isCollection'] ?? false);
$appendData = ($options['appendData'] ?? null);
$resourceName = ($options['resourceName'] ?? '');
$transformResourceName = ($options['transformResourceName'] ?? true);
$respondCode = ($options['respondCode'] ?? HttpResponseCodes::HTTP_OK);
if ($data === null || ($data instanceof Collection && $data->count() === 0)) {
@@ -146,11 +179,11 @@ class ApiController extends Controller
}
}
if (is_null($resourceName) === true || empty($resourceName) === true) {
if (empty($resourceName) === true) {
$resourceName = $this->resourceName;
}
if (is_null($resourceName) === true || empty($resourceName) === true) {
if (empty($resourceName) === true) {
$resourceName = get_class($this);
$resourceName = substr($resourceName, (strrpos($resourceName, '\\') + 1));
$resourceName = substr($resourceName, 0, strpos($resourceName, 'Controller'));
@@ -163,15 +196,14 @@ class ApiController extends Controller
} elseif (is_array($data) === true) {
$dataArray = $data;
} elseif ($data instanceof Model) {
$is_multiple = false;
$dataArray = $data->toArray();
}
$resource = [];
if ($isCollection === true) {
$resource = [Str::plural($resourceName) => $dataArray];
$resource = [$transformResourceName === true ? Str::plural($resourceName) : $resourceName => $dataArray];
} else {
$resource = [Str::singular($resourceName) => $dataArray];
$resource = [$transformResourceName === true ? Str::singular($resourceName) : $resourceName => $dataArray];
}
if ($appendData !== null) {
@@ -180,4 +212,22 @@ class ApiController extends Controller
return response()->json($resource, $respondCode);
}
/**
* Get the Controller Model Class name.
*
* @return string
*/
public function getModelClass(): string
{
$controllerClass = static::class;
$modelName = 'App\\Models\\' . Str::replaceLast('Controller', '', Str::afterLast($controllerClass, '\\'));
if (class_exists($modelName) === false) {
return $modelName;
}
return $modelName;
}
}

49
app/Http/Controllers/Api/ArticleController.php
View File

@@ -8,6 +8,8 @@ use App\Enum\HttpResponseCodes;
use App\Http\Requests\ArticleRequest;
use App\Models\Media;
use App\Models\Article;
use App\Models\Gallery;
use App\Traits\HasGallery;
use Illuminate\Http\JsonResponse;
use Carbon\Exceptions\InvalidFormatException;
use Illuminate\Contracts\Container\BindingResolutionException;
@@ -17,6 +19,9 @@ use Illuminate\Http\Request;
class ArticleController extends ApiController
{
use HasGallery;
/**
* ApplicationController constructor.
*/
@@ -73,14 +78,19 @@ class ArticleController extends ApiController
public function store(ArticleRequest $request)
{
if (ArticleConductor::creatable() === true) {
$article = Article::create($request->all());
$article = Article::create($request->except('gallery'));
if ($request->has('gallery') === true) {
$article->galleryAddMany($request->get('gallery'));
}
return $this->respondAsResource(
ArticleConductor::model($request, $article),
['respondCode' => HttpResponseCodes::HTTP_CREATED]
);
} else {
return $this->respondForbidden();
}
}//end if
}
/**
@@ -93,7 +103,12 @@ class ArticleController extends ApiController
public function update(ArticleRequest $request, Article $article)
{
if (ArticleConductor::updatable($article) === true) {
$article->update($request->all());
if ($request->has('gallery') === true) {
$article->gallery()->delete();
$article->galleryAddMany($request->get('gallery'));
}
$article->update($request->except('gallery'));
return $this->respondAsResource(ArticleConductor::model($request, $article));
}
@@ -122,11 +137,8 @@ class ArticleController extends ApiController
* @param Request $request The user request.
* @param Article $article The article model.
* @return JsonResponse Returns the article attachments.
* @throws InvalidFormatException
* @throws BindingResolutionException
* @throws InvalidCastException
*/
public function getAttachments(Request $request, Article $article): JsonResponse
public function attachmentIndex(Request $request, Article $article): JsonResponse
{
if (ArticleConductor::viewable($article) === true) {
$medium = $article->attachments->map(function ($attachment) {
@@ -145,13 +157,11 @@ class ArticleController extends ApiController
* @param Request $request The user request.
* @param Article $article The article model.
* @return JsonResponse The response.
* @throws BindingResolutionException
* @throws MassAssignmentException
*/
public function storeAttachment(Request $request, Article $article): JsonResponse
public function attachmentStore(Request $request, Article $article): JsonResponse
{
if (ArticleConductor::updatable($article) === true) {
if ($request->has("medium") && Media::find($request->medium)) {
if ($request->has("medium") === true && Media::find($request->medium) !== null) {
$article->attachments()->create(['media_id' => $request->medium]);
return $this->respondCreated();
}
@@ -167,10 +177,9 @@ class ArticleController extends ApiController
*
* @param Request $request The user request.
* @param Article $article The related model.
* @throws BindingResolutionException
* @throws MassAssignmentException
* @return JsonResponse
*/
public function updateAttachments(Request $request, Article $article): JsonResponse
public function attachmentUpdate(Request $request, Article $article): JsonResponse
{
if (ArticleConductor::updatable($article) === true) {
$mediaIds = $request->attachments;
@@ -183,7 +192,7 @@ class ArticleController extends ApiController
// Delete attachments that are not in $mediaIds
foreach ($attachments as $attachment) {
if (!in_array($attachment->media_id, $mediaIds)) {
if (in_array($attachment->media_id, $mediaIds) === false) {
$attachment->delete();
}
}
@@ -193,13 +202,13 @@ class ArticleController extends ApiController
$found = false;
foreach ($attachments as $attachment) {
if ($attachment->media_id == $mediaId) {
if ($attachment->media_id === $mediaId) {
$found = true;
break;
}
}
if (!$found) {
if ($found === false) {
$article->attachments()->create(['media_id' => $mediaId]);
}
}
@@ -215,9 +224,9 @@ class ArticleController extends ApiController
* @param Request $request The user request.
* @param Article $article The model.
* @param Media $medium The attachment medium.
* @throws BindingResolutionException
* @return JsonResponse
*/
public function deleteAttachment(Request $request, Article $article, Media $medium): JsonResponse
public function attachmentDelete(Request $request, Article $article, Media $medium): JsonResponse
{
if (ArticleConductor::updatable($article) === true) {
$attachments = $article->attachments;
@@ -231,7 +240,7 @@ class ArticleController extends ApiController
}
}
if ($deleted) {
if ($deleted === true) {
// Attachment was deleted successfully
return $this->respondNoContent();
} else {

8
app/Http/Controllers/Api/EventController.php
View File

@@ -117,7 +117,7 @@ class EventController extends ApiController
* @param Event $event The event model.
* @return JsonResponse Returns the event attachments.
*/
public function getAttachments(Request $request, Event $event): JsonResponse
public function attachmentIndex(Request $request, Event $event): JsonResponse
{
if (EventConductor::viewable($event) === true) {
$medium = $event->attachments->map(function ($attachment) {
@@ -137,7 +137,7 @@ class EventController extends ApiController
* @param Event $event The event model.
* @return JsonResponse The response.
*/
public function storeAttachment(Request $request, Event $event): JsonResponse
public function attachmentStore(Request $request, Event $event): JsonResponse
{
if (EventConductor::updatable($event) === true) {
if ($request->has("medium") === true && Media::find($request->medium) !== null) {
@@ -157,7 +157,7 @@ class EventController extends ApiController
* @param Request $request The user request.
* @param Event $event The related model.
*/
public function updateAttachments(Request $request, Event $event): JsonResponse
public function attachmentUpdate(Request $request, Event $event): JsonResponse
{
if (EventConductor::updatable($event) === true) {
$mediaIds = $request->attachments;
@@ -204,7 +204,7 @@ class EventController extends ApiController
* @param Event $event The model.
* @param Media $medium The attachment medium.
*/
public function deleteAttachment(Request $request, Event $event, Media $medium): JsonResponse
public function attachmentDelete(Request $request, Event $event, Media $medium): JsonResponse
{
if (EventConductor::updatable($event) === true) {
$attachments = $event->attachments;

7
app/Models/Article.php
View File

@@ -2,15 +2,18 @@
namespace App\Models;
use App\Traits\HasGallery;
use App\Traits\Uuids;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;
use Illuminate\Database\Eloquent\Relations\MorphMany;
class Article extends Model
{
use HasFactory;
use Uuids;
use HasGallery;
/**
* The attributes that are mass assignable.
@@ -29,6 +32,8 @@ class Article extends Model
/**
* Get the article user
*
* @return Illuminate\Database\Eloquent\Relations\BelongsTo
*/
public function user(): BelongsTo
{
@@ -37,6 +42,8 @@ class Article extends Model
/**
* Get all of the article's attachments.
*
* @return Illuminate\Database\Eloquent\Relations\MorphMany
*/
public function attachments(): MorphMany
{

45
app/Models/Gallery.php Normal file
View File

@@ -0,0 +1,45 @@
<?php
namespace App\Models;
use App\Traits\Uuids;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;
use Illuminate\Database\Eloquent\Relations\MorphTo;
class Gallery extends Model
{
use HasFactory;
use Uuids;
/**
* The attributes that are mass assignable.
*
* @var array<int, string>
*/
protected $fillable = [
'media_id',
];
/**
* Get gallery addendum model.
*
* @return Illuminate\Database\Eloquent\Relations\MorphTo Addenum model.
*/
public function addendum(): MorphTo
{
return $this->morphTo();
}
/**
* Get the media for this item.
*
* @return Illuminate\Database\Eloquent\Relations\BelongsTo The media model.
*/
public function media(): BelongsTo
{
return $this->belongsTo(Media::class);
}
}

25
app/Providers/RouteServiceProvider.php
View File

@@ -61,28 +61,27 @@ class RouteServiceProvider extends ServiceProvider
Route::macro('apiAddendumResource', function ($addendum, $uri, $controller) {
$singularUri = Str::singular($uri);
$pluralAddendumLC = strtolower(Str::plural($addendum));
$pluralAddendumTC = ucfirst($pluralAddendumLC);
$singularAddendumTC = Str::singular($pluralAddendumTC);
$signularAddendum = Str::singular((strtolower($addendum)));
$pluralAddendum = Str::plural($signularAddendum);
Route::get("$uri/{{$singularUri}}/{{$pluralAddendumLC}}", [$controller, "get{{$pluralAddendumTC}}"])
->name("{{$singularUri}}.{{$pluralAddendumLC}}.index");
Route::get("{$uri}/{{$singularUri}}/{$pluralAddendum}", [$controller, "{$signularAddendum}Index"])
->name("{$singularUri}.{$signularAddendum}.index");
Route::post("$uri/{{$singularUri}}/{{$pluralAddendumLC}}", [$controller, "store{{$singularAddendumTC}}"])
->name("{{$singularUri}}.{{$pluralAddendumLC}}.store");
Route::post("{$uri}/{{$singularUri}}/{$pluralAddendum}", [$controller, "{$signularAddendum}Store"])
->name("{$singularUri}.{$signularAddendum}.store");
Route::match(
['put', 'patch'],
"$uri/{{$singularUri}}/{{$pluralAddendumLC}}",
[$controller, "update{{$pluralAddendumTC}}"]
"{$uri}/{{$singularUri}}/{$pluralAddendum}",
[$controller, "{$signularAddendum}Update"]
)
->name("{{$singularUri}}.{{$pluralAddendumLC}}.update");
->name("{$singularUri}.{$signularAddendum}.update");
Route::delete(
"$uri/{{$singularUri}}/{{$pluralAddendumLC}}/{medium}",
[$controller,"delete{{$singularAddendumTC}}"]
"{$uri}/{{$singularUri}}/{$pluralAddendum}/{medium}",
[$controller,"{$signularAddendum}Delete"]
)
->name("{{$singularUri}}.{{$pluralAddendumLC}}.destroy");
->name("{$singularUri}.{$signularAddendum}.destroy");
});
}
}

63
app/Traits/HasGallery.php Normal file
View File

@@ -0,0 +1,63 @@
<?php
namespace App\Traits;
use App\Models\Media;
use Illuminate\Database\Eloquent\Relations\MorphMany;
trait HasGallery
{
/**
* Boot function from Laravel.
*
* @return void
*/
protected static function bootHasGallery(): void
{
static::deleting(function ($model) {
$model->gallery()->delete();
});
}
/**
* Add multiple gallery items to the model.
*
* @param array|string $ids The media ids to add.
* @param string $delimiter The split delimiter if $ids is a string.
* @param boolean $allowDuplicates Whether to allow duplicate media IDs or not.
* @return void
*/
public function galleryAddMany(array|string $ids, string $delimiter = ',', bool $allowDuplicates = false): void
{
if (is_array($ids) === false) {
$ids = explode($delimiter, $ids);
}
$ids = array_map('trim', $ids);
$existingIds = $this->gallery()->pluck('media_id')->toArray();
$galleryItems = [];
foreach ($ids as $id) {
if ($allowDuplicates === false && in_array($id, $existingIds) === true) {
continue;
}
$media = Media::find($id);
if ($media !== null) {
$galleryItems[] = ['media_id' => $id];
}
}
$this->gallery()->createMany($galleryItems);
}
/**
* Get the article's gallery.
*
* @return Illuminate\Database\Eloquent\Relations\MorphMany The gallery items
*/
public function gallery(): MorphMany
{
return $this->morphMany(\App\Models\Gallery::class, 'addendum');
}
}

32
database/migrations/2023_07_16_095623_create_galleries_table.php Normal file
View File

@@ -0,0 +1,32 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('galleries', function (Blueprint $table) {
$table->uuid('id')->primary();
$table->uuid('media_id');
$table->uuidMorphs('addendum');
$table->timestamps();
$table->foreign('media_id')->references('id')->on('media')->onDelete('cascade');
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('galleries');
}
};

157
resources/js/components/SMImageGallery.vue
View File

@@ -1,17 +1,53 @@
<template>
<div class="image-gallery" ref="gallery">
<div
:class="[
'flex',
'gap-4',
'my-4',
'select-none',
props.showEditor
? ['overflow-auto']
: ['flex-wrap', 'flex-justify-center'],
]">
<div
class="image-gallery-item"
v-for="(image, index) in images"
v-for="(image, index) in modelValue"
class="flex flex-col flex-justify-center relative sm-gallery-item p-1"
:key="index">
<img
:src="image as string"
class="image-gallery-image"
@click="showModal(index)" />
:src="mediaGetVariantUrl(image as Media, 'small')"
class="max-h-40 max-w-40 cursor-pointer"
@click="showGalleryModal(index)" />
<div
class="absolute rounded-5 bg-white -top-0.25 -right-0.25 hidden cursor-pointer item-delete"
@click="handleRemoveItem(image.id)">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 block"
viewBox="0 0 24 24">
<path
d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"
fill="rgba(185,28,28,1)" />
</svg>
</div>
</div>
<div v-if="props.showEditor" class="flex flex-col flex-justify-center">
<div
class="flex flex-col flex-justify-center flex-items-center h-23 w-40 cursor-pointer bg-gray-300 text-gray-800 hover:text-gray-600"
@click="handleAddToGallery">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-15 w-15"
viewBox="0 0 24 24">
<title>Add image</title>
<path
d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z"
fill="currentColor" />
</svg>
</div>
</div>
</div>
<div
v-if="showModalImage !== null"
v-if="props.showEditor == false && showModalImage !== null"
:class="[
'image-gallery-modal',
{ 'image-gallery-modal-buttons': showButtons },
@@ -20,7 +56,7 @@
@mousemove="handleModalUpdateButtons"
@mouseleave="handleModalUpdateButtons">
<img
:src="images[showModalImage] as string"
:src="mediaGetVariantUrl(modelValue[showModalImage] as Media)"
class="image-gallery-modal-image" />
<div
class="image-gallery-modal-prev"
@@ -28,26 +64,46 @@
<div
class="image-gallery-modal-next"
@click.stop="handleModalNextImage"></div>
<div class="image-gallery-modal-close" @click="hideModal">&times;</div>
<div class="image-gallery-modal-close" @click="hideModal">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
viewBox="0 0 24 24">
<title>Close</title>
<path
d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
fill="currentColor" />
</svg>
</div>
</div>
</template>
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from "vue";
import { Media } from "../helpers/api.types";
import { mediaGetVariantUrl } from "../helpers/media";
import { openDialog } from "./SMDialog";
import SMDialogMedia from "./dialogs/SMDialogMedia.vue";
const emits = defineEmits(["update:modelValue"]);
const props = defineProps({
images: {
modelValue: {
type: Array,
default: () => [],
required: true,
},
showEditor: {
type: Boolean,
default: false,
required: false,
},
});
const gallery = ref(null);
const showModalImage = ref(null);
let showButtons = ref(false);
let mouseMoveTimeout = null;
const showModal = (index) => {
const showGalleryModal = (index) => {
showModalImage.value = index;
document.addEventListener("keydown", handleKeyDown);
};
@@ -87,7 +143,7 @@ const handleModalPrevImage = () => {
if (showModalImage.value > 0) {
showModalImage.value--;
} else {
showModalImage.value = props.images.length - 1;
showModalImage.value = props.modelValue.length - 1;
}
}
};
@@ -96,7 +152,7 @@ const handleModalNextImage = () => {
handleModalUpdateButtons();
if (showModalImage.value !== null) {
if (showModalImage.value < props.images.length - 1) {
if (showModalImage.value < props.modelValue.length - 1) {
showModalImage.value++;
} else {
showModalImage.value = 0;
@@ -104,6 +160,33 @@ const handleModalNextImage = () => {
}
};
const handleAddToGallery = async () => {
let result = await openDialog(SMDialogMedia, {
allowUpload: true,
multiple: true,
});
if (result) {
const mediaResult = result as Media[];
let newValue = props.modelValue;
let galleryIds = new Set(newValue.map((item) => item.id));
mediaResult.forEach((item) => {
if (!galleryIds.has(item.id)) {
newValue.push(item);
galleryIds.add(item.id);
}
});
emits("update:modelValue", newValue);
}
};
const handleRemoveItem = async (id: string) => {
const newList = props.modelValue.filter((item) => item.id !== id);
emits("update:modelValue", newList);
};
onMounted(() => {
document.addEventListener("keydown", handleKeyDown);
});
@@ -114,30 +197,30 @@ onBeforeUnmount(() => {
</script>
<style lang="scss">
.image-gallery {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
// .image-gallery {
// display: grid;
// grid-template-columns: 1fr 1fr;
// gap: 15px;
.image-gallery-image {
cursor: pointer;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
}
// .image-gallery-image {
// cursor: pointer;
// max-width: 100%;
// max-height: 100%;
// object-fit: contain;
// }
// }
@media (min-width: 768px) {
.image-gallery {
grid-template-columns: 1fr 1fr 1fr;
}
}
// @media (min-width: 768px) {
// .image-gallery {
// grid-template-columns: 1fr 1fr 1fr;
// }
// }
@media (min-width: 1024px) {
.image-gallery {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
// @media (min-width: 1024px) {
// .image-gallery {
// grid-template-columns: 1fr 1fr 1fr 1fr;
// }
// }
.image-gallery-modal {
position: fixed;
@@ -268,4 +351,8 @@ onBeforeUnmount(() => {
}
}
}
.sm-gallery-item:hover .item-delete {
display: block;
}
</style>

12
resources/js/components/dialogs/SMDialogMedia.vue
View File

@@ -357,18 +357,6 @@
"
small
class="bg-white bg-op-90 w-full h-full" />
<div
class="absolute border-1 border-1 rounded-5 bg-white -top-1.5 -right-1.5 hidden item-delete"
@click="handleRemoveItem(item.id)">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 block"
viewBox="0 0 24 24">
<path
d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"
fill="rgba(185,28,28,1)" />
</svg>
</div>
</div>
</li>
</ul>

1
resources/js/helpers/api.types.ts
View File

@@ -96,6 +96,7 @@ export interface Article {
content: string;
publish_at: string;
hero: Media;
gallery: Array<Media>;
attachments: Array<Media>;
}

18
resources/js/views/Article.vue
View File

@@ -36,7 +36,12 @@
>
</div>
<SMHTML :html="article.content" />
<SMAttachments :attachments="article.attachments || []" />
<SMImageGallery
v-if="article.gallery.length > 0"
:model-value="article.gallery" />
<SMAttachments
v-if="article.attachments.length > 0"
:attachments="article.attachments || []" />
</div>
</template>
</template>
@@ -54,6 +59,7 @@ import { userHasPermission } from "../helpers/utils";
import SMLoading from "../components/SMLoading.vue";
import SMPageStatus from "../components/SMPageStatus.vue";
import SMHTML from "../components/SMHTML.vue";
import SMImageGallery from "../components/SMImageGallery.vue";
const applicationStore = useApplicationStore();
@@ -61,8 +67,18 @@ const applicationStore = useApplicationStore();
* The article data.
*/
let article: Ref<Article> = ref({
id: "",
created_at: "",
updated_at: "",
title: "",
slug: "",
user_id: "",
user: { display_name: "" },
content: "",
publish_at: "",
hero: {},
gallery: [],
attachments: [],
});
/**

2
resources/js/views/Blog.vue
View File

@@ -137,7 +137,7 @@ watch(
() => articlesPage.value,
() => {
handleLoad();
}
},
);
handleLoad();

26
resources/js/views/dashboard/ArticleEdit.vue
View File

@@ -38,6 +38,15 @@
class="mb-8"
v-model:model-value="form.controls.content.value" />
</div>
<div class="mb-8">
<h3>Gallery</h3>
<p class="small">
{{ gallery.length }} image{{
gallery.length != 1 ? "s" : ""
}}
</p>
<SMImageGallery show-editor v-model:model-value="gallery" />
</div>
<SMInputAttachments v-model:model-value="attachments" />
<div class="flex flex-justify-end">
<input
@@ -70,6 +79,7 @@ import SMPageStatus from "../../components/SMPageStatus.vue";
import { userHasPermission } from "../../helpers/utils";
import SMSelectImage from "../../components/SMSelectImage.vue";
import SMLoading from "../../components/SMLoading.vue";
import SMImageGallery from "../../components/SMImageGallery.vue";
const route = useRoute();
const router = useRouter();
@@ -78,6 +88,7 @@ let pageError = ref(200);
const authors = ref({});
const attachments = ref([]);
const pageHeading = route.params.id ? "Edit Article" : "Create Article";
const gallery = ref([]);
const form = reactive(
Form({
@@ -85,12 +96,12 @@ const form = reactive(
slug: FormControl("", And([Required(), Min(6)])),
publish_at: FormControl(
route.params.id ? "" : new SMDate("now").format("d/M/yy h:mm aa"),
DateTime()
DateTime(),
),
hero: FormControl(),
user_id: FormControl(userStore.id),
content: FormControl(),
})
}),
);
const updateSlug = async () => {
@@ -164,8 +175,10 @@ const loadData = async () => {
attachments.value = (data.article.attachments || []).map(
function (attachment) {
return attachment.id.toString();
}
},
);
gallery.value = data.article.gallery;
} else {
pageError.value = 404;
}
@@ -183,11 +196,12 @@ const handleSubmit = async () => {
title: form.controls.title.value,
slug: form.controls.slug.value,
publish_at: new SMDate(
form.controls.publish_at.value as string
form.controls.publish_at.value as string,
).format("yyyy/MM/dd HH:mm:ss", { utc: true }),
user_id: form.controls.user_id.value,
content: form.controls.content.value,
hero: form.controls.hero.value.id,
gallery: gallery.value.map((item) => item.id),
};
let article_id = "";
@@ -280,7 +294,7 @@ const attachmentAdd = async (event) => {
},
progress: (progressEvent) =>
event.attachment.setUploadProgress(
(progressEvent.loaded * progressEvent.total) / 100
(progressEvent.loaded * progressEvent.total) / 100,
),
});
@@ -292,7 +306,7 @@ const attachmentAdd = async (event) => {
event.preventDefault();
alert(
err.response?.data?.message ||
"An unexpected server error occurred"
"An unexpected server error occurred",
);
}
}

4
routes/api.php
View File

@@ -44,10 +44,10 @@ Route::apiResource('media', MediaController::class);
Route::get('media/{medium}/download', [MediaController::class, 'download']);
Route::apiResource('articles', ArticleController::class);
Route::apiAddendumResource('attachment', 'articles', ArticleController::class);
Route::apiAddendumResource('attachments', 'articles', ArticleController::class);
Route::apiResource('events', EventController::class);
Route::apiAddendumResource('attachment', 'events', EventController::class);
Route::apiAddendumResource('attachments', 'events', EventController::class);
Route::get('/events/{event}/users', [EventController::class, 'userList']);
Route::post('/events/{event}/users', [EventController::class, 'userAdd']);