Skip to content

Commit 5054a88

Browse files
Max-HutschenreiterMax-Hutschenreiter
committed
refactor away some static functions
Add Image Upload to Trix fields Add Spatie Image Library
1 parent 5e13c65 commit 5054a88

File tree

23 files changed

+400
-91
lines changed

23 files changed

+400
-91
lines changed

‎composer.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,12 @@
1717
],
1818
"require": {
1919
"php": ">7.1",
20-
"illuminate/support": "^8.0"
20+
"illuminate/support": "^8.0",
21+
"spatie/laravel-medialibrary": "^9.0.0"
2122
},
2223
"require-dev": {
2324
"orchestra/testbench": "^6.0",
25+
"phpstan/phpstan": "^1.2",
2426
"phpunit/phpunit": "^9.0"
2527
},
2628
"autoload": {

‎config/config.php‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,10 @@
6868
'bigint unsigned' => \the42coders\TLAP\Fields\NumberField::class,
6969
],
7070
'name' => [
71+
'id' => \the42coders\TLAP\Fields\ReadOnlyField::class,
72+
'created_at' => \the42coders\TLAP\Fields\ReadOnlyField::class,
73+
'updated_at' => \the42coders\TLAP\Fields\ReadOnlyField::class,
74+
'deleted_at' => \the42coders\TLAP\Fields\ReadOnlyField::class,
7175
'pw' => \the42coders\TLAP\Fields\PasswordField::class,
7276
'password' => \the42coders\TLAP\Fields\PasswordField::class,
7377
],
@@ -81,4 +85,9 @@
8185
],
8286
],
8387

88+
'datatableDontDisplay' => [
89+
'type' => ['text'],
90+
'name' => ['deleted_at'],
91+
],
92+
8493
];

‎public/css/tlap.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8546,10 +8546,18 @@ body {
85468546
background-color: #edf2f9;
85478547
}
85488548

8549+
.nav {
8550+
padding-top: 2rem;
8551+
}
8552+
85498553
.nav a {
85508554
color: #212529;
85518555
}
85528556

8557+
.nav .nav-item {
8558+
padding-left: 1rem;
8559+
}
8560+
85538561
.nav-pills .nav-link.active,
85548562
.nav-pills .show > .nav-link {
85558563
background-color: white;

‎public/js/tlap.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37324,6 +37324,61 @@ $.ajaxSetup({
3732437324
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
3732537325
}
3732637326
});
37327+
addEventListener("trix-attachment-add", function (event) {
37328+
if (event.attachment.file) {
37329+
uploadFileAttachment(event.attachment);
37330+
}
37331+
});
37332+
37333+
function uploadFileAttachment(attachment) {
37334+
uploadFile(attachment.file, setProgress, setAttributes);
37335+
37336+
function setProgress(progress) {
37337+
attachment.setUploadProgress(progress);
37338+
}
37339+
37340+
function setAttributes(attributes) {
37341+
attachment.setAttributes(attributes);
37342+
}
37343+
}
37344+
37345+
function uploadFile(file, progressCallback, successCallback) {
37346+
var formData = createFormData(file);
37347+
var xhr = new XMLHttpRequest();
37348+
xhr.open("POST", base_url + 'trix-upload', true);
37349+
xhr.setRequestHeader('X-CSRF-TOKEN', getMeta('csrf-token'));
37350+
xhr.upload.addEventListener("progress", function (event) {
37351+
var progress = event.loaded / event.total * 100;
37352+
progressCallback(progress);
37353+
});
37354+
xhr.addEventListener("load", function (event) {
37355+
var attributes = {
37356+
url: xhr.responseText,
37357+
href: xhr.responseText + "?content-disposition=attachment"
37358+
};
37359+
successCallback(attributes);
37360+
});
37361+
xhr.send(formData);
37362+
}
37363+
37364+
function createFormData(file) {
37365+
var data = new FormData();
37366+
data.append("Content-Type", file.type);
37367+
data.append("file", file);
37368+
return data;
37369+
}
37370+
37371+
function getMeta(metaName) {
37372+
var metas = document.getElementsByTagName('meta');
37373+
37374+
for (var i = 0; i < metas.length; i++) {
37375+
if (metas[i].getAttribute('name') === metaName) {
37376+
return metas[i].getAttribute('content');
37377+
}
37378+
}
37379+
37380+
return '';
37381+
}
3732737382
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! jquery */ "./node_modules/jquery/src/jquery.js"), __webpack_require__(/*! jquery */ "./node_modules/jquery/src/jquery.js")))
3732837383

3732937384
/***/ }),

‎resources/js/tlap.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,63 @@ $.ajaxSetup({
1515
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
1616
}
1717
});
18+
19+
addEventListener("trix-attachment-add", function(event) {
20+
if (event.attachment.file) {
21+
uploadFileAttachment(event.attachment)
22+
}
23+
})
24+
25+
function uploadFileAttachment(attachment) {
26+
uploadFile(attachment.file, setProgress, setAttributes)
27+
28+
function setProgress(progress) {
29+
attachment.setUploadProgress(progress)
30+
}
31+
32+
function setAttributes(attributes) {
33+
attachment.setAttributes(attributes)
34+
}
35+
}
36+
37+
function uploadFile(file, progressCallback, successCallback) {
38+
var formData = createFormData(file);
39+
var xhr = new XMLHttpRequest();
40+
41+
xhr.open("POST", base_url + 'trix-upload', true);
42+
xhr.setRequestHeader( 'X-CSRF-TOKEN', getMeta( 'csrf-token') );
43+
44+
xhr.upload.addEventListener("progress", function(event) {
45+
var progress = event.loaded / event.total * 100
46+
progressCallback(progress)
47+
})
48+
49+
xhr.addEventListener("load", function(event) {
50+
var attributes = {
51+
url: xhr.responseText,
52+
href: xhr.responseText + "?content-disposition=attachment"
53+
}
54+
successCallback(attributes)
55+
})
56+
57+
xhr.send(formData)
58+
}
59+
60+
function createFormData(file) {
61+
var data = new FormData()
62+
data.append("Content-Type", file.type)
63+
data.append("file", file)
64+
return data
65+
}
66+
67+
function getMeta(metaName) {
68+
const metas = document.getElementsByTagName('meta');
69+
70+
for (let i = 0; i < metas.length; i++) {
71+
if (metas[i].getAttribute('name') === metaName) {
72+
return metas[i].getAttribute('content');
73+
}
74+
}
75+
76+
return '';
77+
}

‎resources/sass/tlap.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,13 @@ body{
1111
}
1212

1313
.nav{
14+
padding-top: 2rem;
1415
a{
1516
color: #212529;
1617
}
18+
.nav-item{
19+
padding-left: 1rem;
20+
}
1721
}
1822

1923
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{

‎resources/views/datatable/datatable.blade.php‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"processing": true,
66
"serverSide": true,
77
"ajax": {
8-
"url": "{{ route('tlap.datatable', ['models' => $TLAPModel::getModelPluralName()]) }}",
8+
"url": "{{ route('tlap.datatable', ['models' => $TLAPModel->getModelPluralName()]) }}",
99
@if(!empty($model))
1010
"data": {
1111
"ids": {{ $model->$relation()->pluck('id') }}
@@ -20,21 +20,21 @@
2020
}
2121
],
2222
"columns": [
23-
@foreach($TLAPModel::getDatatableFields() as $fieldName)
23+
@foreach($TLAPModel->getDatatableFields() as $fieldName)
2424
{ "data": "{{ $fieldName }}", "title": "{{ $fieldName }}" },
2525
@endforeach
2626
{"data": "",
2727
render : function(data, type, row) {
2828
console.log(row);
2929
return '' +
30-
'<a href="/admin/{{ $TLAPModel::getModelPluralName() }}/'+row.id+'/show" class="show"><i class="bi bi-eye"></i></a> ' +
31-
'<a href="/admin/{{ $TLAPModel::getModelPluralName() }}/'+row.id+'/edit" class="show"><i class="bi bi-pencil-square"></i></a> ' +
32-
'<a href="/admin/{{ $TLAPModel::getModelPluralName() }}/'+row.id+'/delete" class="show"><i class="bi bi-trash"></i></a>' +
30+
'<a href="/admin/{{ $TLAPModel->getModelPluralName() }}/'+row.id+'/show" class="show"><i class="bi bi-eye"></i></a> ' +
31+
'<a href="/admin/{{ $TLAPModel->getModelPluralName() }}/'+row.id+'/edit" class="show"><i class="bi bi-pencil-square"></i></a> ' +
32+
'<a href="/admin/{{ $TLAPModel->getModelPluralName() }}/'+row.id+'/delete" class="show"><i class="bi bi-trash"></i></a>' +
3333
''
3434
3535
} },
3636
],
37-
'order': [[1, 'asc']]
37+
'order': [[0, 'desc']]
3838
});
3939
});
4040
</script>

‎resources/views/forms/image_upload.blade.php‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<div class="mb-3 col-md-{{ $field->col ?? '12' }}">
2+
<label for="{{ $field->name }}" class="form-label">{{ $field->label ?? $field->name }}</label>
3+
<input class="form-control @error($field->name) is-invalid @enderror" type="file" id="{{ $field->name }}" name="{{ $field->name }}" onchange="preview()" @if(old($field->name)) value="{{ old($field->name) }}" @else value="{{ $value }}" @endif>
4+
@if(isset($field->description))
5+
<p class="mt-2 text-sm text-gray-500">
6+
{{ $field->description }}
7+
</p>
8+
@endif
9+
@error($field->name)
10+
<p class="invalid-feedback" id="{{ $field->name }}-error">{{ $message }}</p>
11+
@enderror
12+
<img id="frame_{{ $field->name }}" src="" class="img-fluid" style="border-radius: 10px; margin-top: 20px;"/>
13+
</div>
14+
<script>
15+
function preview() {
16+
frame_{{ $field->name }}.src = URL.createObjectURL(event.target.files[0]);
17+
}
18+
</script>

‎resources/views/forms/read_only.blade.php‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div class="mb-3 col-md-{{ $field->col ?? '12' }}">
2+
<label for="{{ $field->name }}" class="form-label">{{ $field->label ?? $field->name }}</label>
3+
<input type="text" class="form-control @error($field->name) is-invalid @enderror" id="{{ $field->name }}" name="{{ $field->name }}" placeholder="{{ $field->label ?? $field->name }}" aria-describedby="{{ $field->name }}-error"
4+
@if(old($field->name)) value="{{ old($field->name) }}" @else value="{{ $value }}" @endif readonly>
5+
@if(isset($field->description))
6+
<p class="mt-2 text-sm text-gray-500">
7+
{{ $field->description }}
8+
</p>
9+
@endif
10+
@error($field->name)
11+
<p class="invalid-feedback" id="{{ $field->name }}-error">{{ $message }}</p>
12+
@enderror
13+
</div>

‎resources/views/layouts/admin.blade.php‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,9 @@
3131
</div>
3232
</div>
3333
</div>
34+
<script>
35+
var base_url = '{{ url('').'/'.config('tlap.path').'/' }}';
36+
</script>
3437
@yield('scripts')
3538
</body>
3639
</html>

0 commit comments

Comments
 (0)