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

updates

Browse Source
This commit is contained in:
James Collins
2023-04-22 21:18:07 +10:00
parent 84bfd3cda2
commit a663e2bd56
22 changed files with 384 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/Http/Controllers/Api/MediaController.php
View File

@@ -8,6 +8,7 @@ use App\Http\Requests\MediaRequest;
use App\Models\Media;
use Illuminate\Http\Request;
use Illuminate\Support\Carbon;
use Illuminate\Support\Facades\Log;
use Laravel\Sanctum\PersonalAccessToken;
class MediaController extends ApiController
@@ -119,19 +120,36 @@ class MediaController extends ApiController
if (MediaConductor::updatable($medium) === true) {
$file = $request->file('file');
if ($file !== null) {
if ($file->getSize() > Media::maxUploadSize()) {
return $this->respondTooLarge();
if ($file->isValid() !== true) {
switch ($file->getError()) {
case UPLOAD_ERR_INI_SIZE:
case UPLOAD_ERR_FORM_SIZE:
return $this->respondTooLarge();
case UPLOAD_ERR_PARTIAL:
return $this->respondWithErrors(['file' => 'The file upload was interrupted.']);
default:
return $this->respondWithErrors(['file' => 'An error occurred uploading the file to the server.']);
}
}
if ($medium->updateFile($file) === false) {
if ($file->getSize() > Media::getMaxUploadSize()) {
return $this->respondTooLarge();
}
}
$medium->update($request->all());
if ($file !== null) {
try {
$medium->updateWithUploadedFile($file);
} catch (\Exception $e) {
return $this->respondWithErrors(
['file' => 'The file could not be stored on the server'],
['file' => $e->getMessage()],
HttpResponseCodes::HTTP_INTERNAL_SERVER_ERROR
);
}
}//end if
}
$medium->update($request->all());
return $this->respondAsResource(MediaConductor::model($request, $medium));
}//end if

16
app/Jobs/StoreUploadedFileJob.php
View File

@@ -44,11 +44,12 @@ class StoreUploadedFileJob implements ShouldQueue
*/
protected $replaceExisting;
/**
* Create a new job instance.
*
* @param Media $media The media model.
* @param string $filePath The uploaded file.
* @param Media $media The media model.
* @param string $filePath The uploaded file.
* @param boolean $replaceExisting Replace existing files.
* @return void
*/
@@ -74,31 +75,30 @@ class StoreUploadedFileJob implements ShouldQueue
$this->media->save();
if (strlen($this->uploadedFilePath) > 0) {
if (Storage::disk($storageDisk)->exists($fileName) == false || $this->replaceExisting == true) {
if (Storage::disk($storageDisk)->exists($fileName) === false || $this->replaceExisting === true) {
Storage::disk($storageDisk)->putFileAs('/', new SplFileInfo($this->uploadedFilePath), $fileName);
Log::info("uploading file {$storageDisk} / {$fileName} / {$this->uploadedFilePath}");
} else {
Log::info("file {$fileName} already exists in {$storageDisk} / {$this->uploadedFilePath}. Not replacing file and using local {$fileName} for variants.");
}
} else {
if (Storage::disk($storageDisk)->exists($fileName) == true) {
if (Storage::disk($storageDisk)->exists($fileName) === true) {
Log::info("file {$fileName} already exists in {$storageDisk} / {$this->uploadedFilePath}. No local {$fileName} for variants, downloading from CDN.");
$readStream = Storage::disk($storageDisk)->readStream($fileName);
$tempFilePath = tempnam(sys_get_temp_dir(), 'download-');
$writeStream = fopen($tempFilePath, 'w');
while (!feof($readStream)) {
while (feof($readStream) !== true) {
fwrite($writeStream, fread($readStream, 8192));
}
fclose($readStream);
fclose($writeStream);
$this->uploadedFilePath = $tempFilePath;
} else {
$errorStr = "cannot upload file {$storageDisk} / {$fileName} / {$this->uploadedFilePath} as temp file is empty";
Log::info($errorStr);
throw new \Exception($errorStr);
}
}
}//end if
if (strpos($this->media->mime_type, 'image/') === 0) {
$this->media->status = "Optimizing image";
@@ -160,7 +160,7 @@ class StoreUploadedFileJob implements ShouldQueue
}//end if
} else {
Log::info("variant {$variantName} already exists for file {$fileName}");
}
}//end if
}//end foreach
// Set missing variants to the largest available variant

68
app/Models/Media.php
View File

@@ -206,7 +206,7 @@ class Media extends Model
*/
public function getUrlAttribute()
{
if(isset($this->attributes['name'])) {
if (isset($this->attributes['name']) === true) {
$url = config("filesystems.disks.$this->storage.url");
return "$url/$this->name";
}
@@ -247,6 +247,28 @@ class Media extends Model
* @return null|Media The result or null if not successful.
*/
public static function createFromUploadedFile(Request $request, UploadedFile $file)
{
$request->merge([
'title' => $request->get('title', ''),
'name' => '',
'size' => 0,
'mime_type' => '',
'status' => '',
]);
$mediaItem = $request->user()->media()->create($request->all());
$mediaItem->updateWithUploadedFile($file);
return $mediaItem;
}
/**
* Update Media with UploadedFile data.
*
* @param Illuminate\Http\UploadedFile $file The file.
* @return null|Media The media item.
*/
public function updateWithUploadedFile(UploadedFile $file)
{
if ($file === null || $file->isValid() !== true) {
throw new \Exception('The file is invalid.', self::INVALID_FILE_ERROR);
@@ -261,34 +283,40 @@ class Media extends Model
throw new \Exception('The file name already exists in storage.', self::FILE_NAME_EXISTS_ERROR);
}
$request->merge([
'title' => $request->get('title', $name),
'name' => $name,
'size' => $file->getSize(),
'mime_type' => $file->getMimeType(),
'status' => 'Processing media',
]);
// remove file if there is an existing entry in this medium item
if (strlen($this->name) > 0 && strlen($this->storage) > 0) {
Storage::disk($this->storage)->delete($this->name);
foreach ($this->variants as $variantName => $fileName) {
Storage::disk($this->storage)->delete($fileName);
}
$mediaItem = $request->user()->media()->create($request->all());
try {
$temporaryFilePath = tempnam(sys_get_temp_dir(), 'upload');
$temporaryDirectoryPath = dirname($temporaryFilePath);
$file->move($temporaryDirectoryPath, basename($temporaryFilePath));
} catch (\Exception $e) {
throw new \Exception('Could not temporarily store file. ' . $e->getMessage(), self::TEMP_FILE_ERROR);
$this->name = '';
$this->variants = [];
}
if (strlen($this->title) === 0) {
$this->title = $name;
}
$this->name = $name;
$this->size = $file->getSize();
$this->mime_type = $file->getMimeType();
$this->status = 'Processing media';
$this->save();
$temporaryFilePath = tempnam(sys_get_temp_dir(), 'upload');
copy($file->path(), $temporaryFilePath);
try {
StoreUploadedFileJob::dispatch($mediaItem, $temporaryFilePath)->onQueue('media');
StoreUploadedFileJob::dispatch($this, $temporaryFilePath)->onQueue('media');
} catch (\Exception $e) {
$mediaItem->delete();
$mediaItem = null;
$this->status = 'Error';
$this->save();
throw $e;
}//end try
return $mediaItem;
return $this;
}
/**

14
composer.lock generated
View File

@@ -62,16 +62,16 @@
},
{
"name": "aws/aws-sdk-php",
"version": "3.263.14",
"version": "3.268.16",
"source": {
"type": "git",
"url": "https://github.com/aws/aws-sdk-php.git",
"reference": "7a6a43fad8899e3be3c46471fa3802331620e36b"
"reference": "b59134c9ca64dcb9de6f7dbbcb9d5a75ed665a98"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/7a6a43fad8899e3be3c46471fa3802331620e36b",
"reference": "7a6a43fad8899e3be3c46471fa3802331620e36b",
"url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/b59134c9ca64dcb9de6f7dbbcb9d5a75ed665a98",
"reference": "b59134c9ca64dcb9de6f7dbbcb9d5a75ed665a98",
"shasum": ""
},
"require": {
@@ -151,9 +151,9 @@
"support": {
"forum": "https://forums.aws.amazon.com/forum.jspa?forumID=80",
"issues": "https://github.com/aws/aws-sdk-php/issues",
"source": "https://github.com/aws/aws-sdk-php/tree/3.263.14"
"source": "https://github.com/aws/aws-sdk-php/tree/3.268.16"
},
"time": "2023-04-20T18:21:44+00:00"
"time": "2023-04-21T21:37:05+00:00"
},
{
"name": "brick/math",
@@ -9508,5 +9508,5 @@
"php": "^8.0.2"
},
"platform-dev": [],
"plugin-api-version": "2.1.0"
"plugin-api-version": "2.3.0"
}

5
config/filesystems.php
View File

@@ -31,10 +31,7 @@ return [
'disks' => [
'local' => [
'driver' => 'local',
'root' => storage_path('app/uploads'),
'throw' => false,
'url' => env('STORAGE_LOCAL_URL'),
'public' => true,
'root' => storage_path('app'),
],
'cdn' => [

40
package-lock.json generated
View File

@@ -475,9 +475,9 @@
}
},
"node_modules/@eslint/js": {
"version": "8.38.0",
"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.38.0.tgz",
"integrity": "sha512-IoD2MfUnOV58ghIHCiil01PcohxjbYR/qCxsoC+xNgUwh1EY8jOOrYmu3d3a71+tJJ23uscEV4X2HJWMsPJu4g==",
"version": "8.39.0",
"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.39.0.tgz",
"integrity": "sha512-kf9RB0Fg7NZfap83B3QOqOGg9QmD9yBudqQXzzOtn3i4y7ZUXe5ONeW34Gwi+TxhH4mvj72R1Zc300KUMa9Bng==",
"dev": true,
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -729,9 +729,9 @@
"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
},
"node_modules/@types/node": {
"version": "18.15.12",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.12.tgz",
"integrity": "sha512-Wha1UwsB3CYdqUm2PPzh/1gujGCNtWVUYF0mB00fJFoR4gTyWTDPjSm+zBF787Ahw8vSGgBja90MkgFwvB86Dg=="
"version": "18.15.13",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.13.tgz",
"integrity": "sha512-N+0kuo9KgrUQ1Sn/ifDXsvg0TTleP7rIy4zOBGECxAljqvqfqpTfzx0Q1NUedOixRMBfe2Whhb056a42cWs26Q=="
},
"node_modules/@types/semver": {
"version": "7.3.13",
@@ -1607,9 +1607,9 @@
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001480",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001480.tgz",
"integrity": "sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ==",
"version": "1.0.30001481",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001481.tgz",
"integrity": "sha512-KCqHwRnaa1InZBtqXzP98LPg0ajCVujMKjqKDhZEthIpAsJl/YEIa3YvXjGXPVqzZVguccuu7ga9KOE1J9rKPQ==",
"funding": [
{
"type": "opencollective",
@@ -1936,9 +1936,9 @@
"dev": true
},
"node_modules/electron-to-chromium": {
"version": "1.4.368",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.368.tgz",
"integrity": "sha512-e2aeCAixCj9M7nJxdB/wDjO6mbYX+lJJxSJCXDzlr5YPGYVofuJwGN9nKg2o6wWInjX6XmxRinn3AeJMK81ltw==",
"version": "1.4.369",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.369.tgz",
"integrity": "sha512-LfxbHXdA/S+qyoTEA4EbhxGjrxx7WK2h6yb5K2v0UCOufUKX+VZaHbl3svlzZfv9sGseym/g3Ne4DpsgRULmqg==",
"peer": true
},
"node_modules/emoji-regex": {
@@ -2032,15 +2032,15 @@
}
},
"node_modules/eslint": {
"version": "8.38.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.38.0.tgz",
"integrity": "sha512-pIdsD2jwlUGf/U38Jv97t8lq6HpaU/G9NKbYmpWpZGw3LdTNhZLbJePqxOXGB5+JEKfOPU/XLxYxFh03nr1KTg==",
"version": "8.39.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.39.0.tgz",
"integrity": "sha512-mwiok6cy7KTW7rBpo05k6+p4YVZByLNjAZ/ACB9DRCu4YDRwjXI01tWHp6KAUWelsBetTxKK/2sHB0vdS8Z2Og==",
"dev": true,
"dependencies": {
"@eslint-community/eslint-utils": "^4.2.0",
"@eslint-community/regexpp": "^4.4.0",
"@eslint/eslintrc": "^2.0.2",
"@eslint/js": "8.38.0",
"@eslint/js": "8.39.0",
"@humanwhocodes/config-array": "^0.11.8",
"@humanwhocodes/module-importer": "^1.0.1",
"@nodelib/fs.walk": "^1.2.8",
@@ -2050,7 +2050,7 @@
"debug": "^4.3.2",
"doctrine": "^3.0.0",
"escape-string-regexp": "^4.0.0",
"eslint-scope": "^7.1.1",
"eslint-scope": "^7.2.0",
"eslint-visitor-keys": "^3.4.0",
"espree": "^9.5.1",
"esquery": "^1.4.2",
@@ -3473,9 +3473,9 @@
}
},
"node_modules/rollup": {
"version": "3.20.6",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.20.6.tgz",
"integrity": "sha512-2yEB3nQXp/tBQDN0hJScJQheXdvU2wFhh6ld7K/aiZ1vYcak6N/BKjY1QrU6BvO2JWYS8bEs14FRaxXosxy2zw==",
"version": "3.20.7",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.20.7.tgz",
"integrity": "sha512-P7E2zezKSLhWnTz46XxjSmInrbOCiul1yf+kJccMxT56vxjHwCbDfoLbiqFgu+WQoo9ij2PkraYaBstgB2prBA==",
"bin": {
"rollup": "dist/bin/rollup"
},

BIN
public/uploadabiwAz Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

2
resources/css/utils.scss
View File

@@ -114,7 +114,7 @@
}
.flex-row-reverse {
flex-direction: row-reverse;
flex-direction: row-reverse !important;
}
.flex-column {

7
resources/js/components/SMButton.vue
View File

@@ -8,6 +8,7 @@
props.size,
{ 'button-block': block },
{ 'button-dropdown': dropdown },
{ 'button-loading': loading },
]"
ref="buttonRef"
:style="{ minWidth: minWidth }"
@@ -146,8 +147,10 @@ if (props.form !== undefined) {
watch(
() => props.form.loading(),
(newValue) => {
loading.value = newValue;
disabled.value = newValue;
if (buttonType === "submit") {
loading.value = newValue;
}
}
);
}
@@ -265,7 +268,7 @@ const handleClickItem = (item: string) => {
&:disabled,
&.primary:disabled {
background-color: var(--base-color-dark);
background-color: var(--base-color-dark) !important;
box-shadow: none;
}

58
resources/js/components/SMImage.vue Normal file
View File

@@ -0,0 +1,58 @@
<template>
<div class="image">
<SMLoading v-if="imgLoaded == false && imgError == false" />
<img
v-if="imgError == false"
:src="src"
@load="imgLoaded = true"
@error="imgError = true" />
<div v-if="imgError == true" class="image-error">
<ion-icon name="alert-circle-outline"></ion-icon>
<p>Error loading image</p>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import SMLoading from "./SMLoading.vue";
defineProps({
src: {
type: String,
required: true,
},
});
const imgLoaded = ref(false);
const imgError = ref(false);
</script>
<style lang="scss">
.image {
display: flex;
flex-basis: 300px;
img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
border-radius: 8px;
}
.image-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
ion-icon {
font-size: 300%;
}
p {
margin: 0;
}
}
}
</style>

49
resources/js/components/SMLoading.vue
View File

@@ -1,6 +1,9 @@
<template>
<div class="loading-container">
<SMLoadingIcon v-bind="{ large: props.large }" />
<div :class="['loading-background', { overlay: props.overlay }]">
<div :class="{ 'loading-box': props.overlay }">
<SMLoadingIcon v-bind="{ large: props.large }" />
<p v-if="props.text" class="loading-text">{{ props.text }}</p>
</div>
</div>
</template>
@@ -13,14 +16,54 @@ const props = defineProps({
default: false,
required: false,
},
text: {
type: String,
default: "",
required: false,
},
overlay: {
type: Boolean,
default: false,
required: false,
},
});
</script>
<style lang="scss">
.loading-container {
.loading-background {
display: flex;
flex-grow: 1;
align-items: center;
justify-content: center;
&.overlay {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 10000;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.loading-box {
background-color: #fff;
padding: 48px 48px 16px 48px;
border-radius: 10px;
box-shadow: var(--base-shadow);
.loading-text {
font-size: 150%;
}
}
}
</style>

39
resources/js/components/SMTable.vue
View File

@@ -17,17 +17,11 @@
:data-title="header['text']"
:key="`item-row-${index}-${header['value']}`">
<template v-if="slots[`item-${header['value']}`]">
<slot
:name="`item-${header['value']}`"
v-bind="item as any">
<slot :name="`item-${header['value']}`" v-bind="item">
</slot>
</template>
<template v-else>
{{
header["value"]
.split(".")
.reduce((item, key) => item[key], item)
}}
{{ getItemValue(item, header["value"]) }}
</template>
</td>
</tr>
@@ -57,6 +51,22 @@ const slots = useSlots();
const handleRowClick = (item) => {
emits("rowClick", item);
};
const getItemValue = (data: unknown, key: string): string => {
if (typeof data === "object" && data !== null) {
return key.split(".").reduce((item, key) => item[key], data);
}
return "";
};
const hasClassLong = (text: unknown): boolean => {
if (typeof text == "string") {
return text.length >= 35;
}
return false;
};
</script>
<style lang="scss">
@@ -81,6 +91,10 @@ const handleRowClick = (item) => {
td {
font-size: 85%;
background-color: #fff;
&.long {
font-size: 75%;
}
}
tbody {
@@ -127,16 +141,19 @@ const handleRowClick = (item) => {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding: 8px 12px 8px 50%;
padding: 8px 12px 8px 40%;
white-space: normal;
text-align: left;
&:before {
position: absolute;
padding: 8px 12px;
display: flex;
align-items: center;
padding-left: 12px;
top: 0;
bottom: 0;
left: 0;
width: 45%;
width: 35%;
white-space: nowrap;
text-align: left;
font-weight: 600;

4
resources/js/components/SMToast.vue
View File

@@ -122,11 +122,11 @@ onMounted(() => {
}
}
&.success .sm-toast-inner {
&.success .toast-inner {
border-left-color: var(--success-color);
}
&.danger .sm-toast-inner {
&.danger .toast-inner {
border-left-color: var(--danger-color);
}
}

2
resources/js/components/dialogs/SMDialogConfirm.vue
View File

@@ -1,6 +1,6 @@
<template>
<SMFormCard>
<h1>{{ props.title }}</h1>
<h3>{{ props.title }}</h3>
<p v-html="computedSanitizedText"></p>
<SMFormFooter>
<template #left>

11
resources/js/helpers/api.ts
View File

@@ -71,6 +71,8 @@ export const api = {
options.headers["Authorization"] = `Bearer ${userStore.token}`;
}
options.method = options.method.toUpperCase() || "GET";
if (options.body && typeof options.body === "object") {
if (options.body instanceof FormData) {
if (
@@ -82,6 +84,11 @@ export const api = {
// remove the "Content-Type" key from the headers object
delete options.headers["Content-Type"];
}
if (options.method != "POST") {
options.body.append("_method", options.method);
options.method = "POST";
}
} else if (
options.body instanceof Blob ||
options.body instanceof ArrayBuffer
@@ -94,7 +101,9 @@ export const api = {
}
if (
(options.method.toUpperCase() || "GET") == "POST" &&
(options.method == "POST" ||
options.method == "PUT" ||
options.method == "PATCH") &&
options.progress
) {
const xhr = new XMLHttpRequest();

2
resources/js/helpers/form.ts
View File

@@ -167,7 +167,7 @@ type FormControlSetValidation = (
type FormControlIsValid = () => boolean;
export interface FormControlObject {
value: string;
value: unknown;
validate: () => Promise<ValidationResult>;
validation: FormControlValidation;
clearValidations: FormControlClearValidations;

22
resources/js/helpers/utils.ts
View File

@@ -3,19 +3,23 @@ import { extractFileNameFromUrl } from "./url";
/**
* Tests if an object or string is empty.
*
* @param {object|string} objOrString The object or string.
* @param {unknown} value The object or string.
* @returns {boolean} If the object or string is empty.
*/
export const isEmpty = (objOrString: unknown): boolean => {
if (objOrString == null) {
return true;
} else if (typeof objOrString === "string") {
return objOrString.length == 0;
export const isEmpty = (value: unknown): boolean => {
if (typeof value === "string") {
return value.trim().length === 0;
} else if (
typeof objOrString == "object" &&
Object.keys(objOrString).length === 0
value instanceof File ||
value instanceof Blob ||
value instanceof Map ||
value instanceof Set
) {
return true;
return value.size === 0;
} else if (value instanceof FormData) {
return [...value.entries()].length === 0;
} else if (typeof value === "object") {
return !value || Object.keys(value).length === 0;
}
return false;

12
resources/js/helpers/validate.ts
View File

@@ -1,8 +1,9 @@
import { bytesReadable } from "../helpers/types";
import { SMDate } from "./datetime";
import { isEmpty } from "../helpers/utils";
export interface ValidationObject {
validate: (value: any) => Promise<ValidationResult>;
validate: (value: unknown) => Promise<ValidationResult>;
}
export interface ValidationResult {
@@ -744,9 +745,9 @@ export function Required(
return {
...options,
validate: function (value: string): Promise<ValidationResult> {
validate: function (value: unknown): Promise<ValidationResult> {
return Promise.resolve({
valid: value.length > 0,
valid: !isEmpty(value),
invalidMessages: [
typeof this.invalidMessage === "string"
? this.invalidMessage
@@ -831,8 +832,11 @@ export function FileSize(
return {
...options,
validate: function (value: File): Promise<ValidationResult> {
const isValid =
value instanceof File ? value.size < options.size : true;
return Promise.resolve({
valid: value.size < options.size,
valid: isValid,
invalidMessages: [
typeof this.invalidMessage === "string"
? this.invalidMessage

6
resources/js/views/Workshops.vue
View File

@@ -40,7 +40,10 @@
<div
class="thumbnail"
:style="{
backgroundImage: `url('${event.hero.url}')`,
backgroundImage: `url('${mediaGetVariantUrl(
event.hero,
'medium'
)}')`,
}">
<div :class="['banner', event['bannerType']]">
{{ event["banner"] }}
@@ -87,6 +90,7 @@ import SMToolbar from "../components/SMToolbar.vue";
import { api } from "../helpers/api";
import { Event, EventCollection } from "../helpers/api.types";
import { SMDate } from "../helpers/datetime";
import { mediaGetVariantUrl } from "../helpers/media";
import SMMastHead from "../components/SMMastHead.vue";
import SMContainer from "../components/SMContainer.vue";
import SMNoItems from "../components/SMNoItems.vue";

129
resources/js/views/dashboard/MediaEdit.vue
View File

@@ -7,6 +7,13 @@
<SMContainer class="flex-grow-1">
<SMLoading v-if="pageLoading" large />
<SMForm v-else :model-value="form" @submit="handleSubmit">
<SMRow>
<SMColumn class="media-container">
<!-- <div class="media-container"> -->
<SMImage :src="imageUrl" />
<!-- </div> -->
</SMColumn>
</SMRow>
<SMRow>
<SMColumn>
<SMInput control="file" type="file" />
@@ -61,12 +68,15 @@
<SMInput type="textarea" control="description" />
</SMColumn>
</SMRow>
<SMRow class="px-2 justify-content-space-between">
<SMRow
class="px-2 flex-row-reverse justify-content-space-between">
<SMButton type="submit" label="Save" :form="form" />
<SMButton
:form="form"
v-if="route.params.id"
type="danger"
label="Delete"
@click="handleDelete" />
<SMButton type="submit" label="Save" />
</SMRow>
</SMForm>
</SMContainer>
@@ -74,13 +84,13 @@
</template>
<script setup lang="ts">
import { computed, reactive, ref } from "vue";
import { computed, reactive, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { api } from "../../helpers/api";
import { Form, FormControl } from "../../helpers/form";
import { bytesReadable } from "../../helpers/types";
import { And, FileSize, Required } from "../../helpers/validate";
import { Media, MediaResponse } from "../../helpers/api.types";
import { MediaResponse } from "../../helpers/api.types";
import { openDialog } from "../../components/SMDialog";
import DialogConfirm from "../../components/dialogs/SMDialogConfirm.vue";
import SMButton from "../../components/SMButton.vue";
@@ -89,6 +99,9 @@ import SMInput from "../../components/SMInput.vue";
import SMMastHead from "../../components/SMMastHead.vue";
import SMLoading from "../../components/SMLoading.vue";
import { toTitleCase } from "../../helpers/string";
import { useToastStore } from "../../store/ToastStore";
import SMColumn from "../../components/SMColumn.vue";
import SMImage from "../../components/SMImage.vue";
const route = useRoute();
const router = useRouter();
@@ -116,6 +129,8 @@ const fileData = reactive({
user: {},
});
const imageUrl = ref("");
const handleLoad = async () => {
if (route.params.id) {
try {
@@ -142,6 +157,8 @@ const handleLoad = async () => {
: toTitleCase(data.medium.status);
fileData.dimensions = data.medium.dimensions;
imageUrl.value = fileData.url;
} catch (err) {
pageError.value = err.status;
}
@@ -152,51 +169,74 @@ const handleLoad = async () => {
const handleSubmit = async () => {
try {
let res = null;
// let data = {
// title: formData.title.value,
// slug: formData.slug.value,
// user_id: formData.user_id.value,
// content: formData.content.value
// }
form.loading(true);
let submitData = new FormData();
// if(route.params.id) {
// res = await axios.put(`posts/${route.params.id}`, data);
// } else {
// res = await axios.post(`posts`, data);
// }
let submitFormData = new FormData();
if (form.file.value instanceof File) {
submitFormData.append("file", form.file.value);
// add file if there is one
if (form.controls.file.value instanceof File) {
submitData.append("file", form.controls.file.value);
}
submitFormData.append("permission", form.permission.value);
submitData.append("title", form.controls.title.value as string);
submitData.append(
"permission",
form.controls.permission.value as string
);
submitData.append(
"description",
form.controls.description.value as string
);
await api.post({
url: "/media",
body: submitFormData,
headers: {
"Content-Type": "multipart/form-data",
},
progress: (progressEvent) =>
(formLoadingMessage.value = `Uploading Files ${Math.floor(
(progressEvent.loaded / progressEvent.total) * 100
)}%`),
if (route.params.id) {
await api.put({
url: "/media/{id}",
params: {
id: route.params.id,
},
body: submitData,
headers: {
"Content-Type": "multipart/form-data",
},
});
} else {
await api.post({
url: "/media",
body: submitData,
headers: {
"Content-Type": "multipart/form-data",
},
// progress: (progressEvent) =>
// (formLoadingMessage.value = `Uploading Files ${Math.floor(
// (progressEvent.loaded / progressEvent.total) * 100
// )}%`),
});
}
useToastStore().addToast({
title: route.params.id ? "Media Updated" : "Media Created",
content: route.params.id
? "The media item has been updated."
: "The media item been created.",
type: "success",
});
form.message("Your details have been updated", "success");
} catch (err) {
form.apiErrors(err);
router.push({ name: "dashboard-media-list" });
} catch (error) {
console.log(error);
useToastStore().addToast({
title: "Server error",
content: "An error occurred saving the media.",
type: "danger",
});
} finally {
form.loading(false);
}
form.loading(false);
};
const handleDelete = async (item: Media) => {
const handleDelete = async () => {
let result = await openDialog(DialogConfirm, {
title: "Delete File?",
text: `Are you sure you want to delete the file <strong>${item.title}</strong>?`,
text: `Are you sure you want to delete the file <strong>${form.controls.title.value}</strong>?`,
cancel: {
type: "secondary",
label: "Cancel",
@@ -209,7 +249,7 @@ const handleDelete = async (item: Media) => {
if (result) {
try {
await api.delete(`media/${item.id}`);
await api.delete(`media/${route.params.id}`);
router.push({ name: "media" });
} catch (error) {
pageError.value = error.status;
@@ -223,3 +263,14 @@ const computedFileSize = computed(() => {
handleLoad();
</script>
<style lang="scss">
.page-dashboard-media-edit {
.media-container {
max-height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>

10
resources/js/views/dashboard/MediaList.vue
View File

@@ -39,6 +39,11 @@
<template #item-size="item">
{{ bytesReadable(item.size) }}
</template>
<template #item-title="item"
>{{ item.title }}<br /><span class="small"
>({{ item.name }})</span
></template
>
<template #item-actions="item">
<SMButton
label="Edit"
@@ -86,7 +91,7 @@ const itemsPerPage = 25;
const itemsPage = ref(parseInt((route.query.page as string) || "1"));
const headers = [
{ text: "Name", value: "title", sortable: true },
{ text: "Title (Name)", value: "title", sortable: true },
{ text: "Size", value: "size", sortable: true },
{ text: "Uploaded By", value: "user.display_name", sortable: true },
{ text: "Actions", value: "actions" },
@@ -257,7 +262,8 @@ handleLoad();
<style lang="scss">
.page-dashboard-media-list {
.table tr {
td:first-of-type {
td:first-of-type,
td:nth-of-type(2) {
word-break: break-all;
}

1
resources/js/views/dashboard/PostEdit.vue
View File

@@ -241,7 +241,6 @@ const handleSubmit = async () => {
router.push({ name: "dashboard-post-list" });
} catch (error) {
console.log(error);
form.apiErrors(error);
}
};