mirror of
https://github.com/Einundzwanzig-Podcast/einundzwanzig-portal.git
synced 2025-12-13 06:56:48 +00:00
front-end article submission form added
This commit is contained in:
HolgerHatGarKeineNode
30
resources/views/components/input/filepond.blade.php
Normal file
30
resources/views/components/input/filepond.blade.php
Normal file
@@ -0,0 +1,30 @@
|
||||
<div
|
||||
wire:ignore
|
||||
x-data
|
||||
x-init="
|
||||
FilePond.registerPlugin(
|
||||
FilePondPluginImagePreview,
|
||||
FilePondPluginImageExifOrientation,
|
||||
FilePondPluginFileValidateSize,
|
||||
FilePondPluginImageEdit
|
||||
);
|
||||
FilePond.setOptions({
|
||||
labelIdle: '{{ 'Drag & Drop Deiner Dateien oder <span class="filepond--label-action"> in Ordner suchen </span>' }}',
|
||||
allowMultiple: {{ isset($attributes['multiple']) ? 'true' : 'false' }},
|
||||
server: {
|
||||
process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
|
||||
@this.upload('{{ $attributes['wire:model'] }}', file, load, error, progress)
|
||||
},
|
||||
revert: (filename, load) => {
|
||||
@this.removeUpload('{{ $attributes['wire:model'] }}', filename, load)
|
||||
},
|
||||
load: (source, load, error, progress, abort, headers) => {
|
||||
@this.load('{{ $attributes['wire:model'] }}', load, error, progress, abort, headers)
|
||||
},
|
||||
},
|
||||
});
|
||||
FilePond.create($refs.input);
|
||||
"
|
||||
>
|
||||
<input type="file" x-ref="input" name="{{ $attributes['name'] }}">
|
||||
</div>
|
||||
60
resources/views/components/input/simple-mde.blade.php
Normal file
60
resources/views/components/input/simple-mde.blade.php
Normal file
@@ -0,0 +1,60 @@
|
||||
<div
|
||||
wire:ignore
|
||||
x-data="{
|
||||
value: @entangle($attributes->wire('model')).defer,
|
||||
init() {
|
||||
let editor = new EasyMDE({
|
||||
element: this.$refs.editor,
|
||||
lineNumbers: true,
|
||||
uploadImage: false,
|
||||
{{-- imageMaxSize: 1024 * 1024 * 10,--}}
|
||||
{{-- imageUploadFunction: (file, onSuccess, onError) => {--}}
|
||||
{{-- @this.upload('images', file, (uploadedFilename) => {--}}
|
||||
{{-- const currentImage = @this.get('currentImage');--}}
|
||||
{{-- const temporaryUrls = @this.get('temporaryUrls');--}}
|
||||
{{-- onSuccess(temporaryUrls[currentImage]);--}}
|
||||
{{-- @this.set('currentImage', currentImage + 1)--}}
|
||||
{{-- }, () => {--}}
|
||||
{{-- // Error callback.--}}
|
||||
{{-- }, (event) => {--}}
|
||||
{{-- // Progress callback.--}}
|
||||
{{-- // event.detail.progress contains a number between 1 and 100 as the upload progresses.--}}
|
||||
{{-- })--}}
|
||||
{{-- },--}}
|
||||
showIcons: [
|
||||
'heading',
|
||||
'heading-smaller',
|
||||
'heading-bigger',
|
||||
'heading-1',
|
||||
'heading-2',
|
||||
'heading-3',
|
||||
'code',
|
||||
'table',
|
||||
'quote',
|
||||
'strikethrough',
|
||||
'unordered-list',
|
||||
'ordered-list',
|
||||
'clean-block',
|
||||
'horizontal-rule',
|
||||
'undo',
|
||||
'redo',
|
||||
//'upload-image',
|
||||
],
|
||||
})
|
||||
|
||||
editor.value(this.value)
|
||||
|
||||
editor.codemirror.on('change', () => {
|
||||
this.value = editor.value()
|
||||
})
|
||||
},
|
||||
}"
|
||||
class="w-full"
|
||||
>
|
||||
<textarea x-ref="editor"></textarea>
|
||||
<style>
|
||||
.EasyMDEContainer {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
@@ -13,8 +13,6 @@
|
||||
<!-- Fonts -->
|
||||
@googlefonts
|
||||
<!-- Scripts -->
|
||||
<link rel="stylesheet" href="{{ asset('vendor/jvector/jquery-jvectormap-2.0.5.css') }}" type="text/css"
|
||||
media="screen"/>
|
||||
<script src="{{ asset('dist/jquery.js') }}"></script>
|
||||
<script src="{{ asset('vendor/jvector/jquery-jvectormap-2.0.5.min.js') }}"></script>
|
||||
<script src="{{ asset('vendor/jvector/maps/world-mill.js') }}"></script>
|
||||
@@ -38,6 +36,9 @@
|
||||
<x-comments::scripts/>
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" href="{{ asset('vendor/jvector/jquery-jvectormap-2.0.5.css') }}" type="text/css"
|
||||
media="screen"/>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
|
||||
<x-comments::styles/>
|
||||
<x-embed-styles />
|
||||
@livewireStyles
|
||||
@@ -111,5 +112,6 @@
|
||||
@livewireScripts
|
||||
<!-- ProductLift SDK - Include it only once -->
|
||||
<script defer src="https://bitcoin.productlift.dev/widgets_sdk"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -9,6 +9,14 @@
|
||||
<div>
|
||||
<img class="h-32 object-cover" src="{{ asset('img/einundzwanzig-news-colored.png') }}" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<x-button
|
||||
:href="route('news.form')"
|
||||
primary>
|
||||
<i class="fa fa-thin fa-plus"></i>
|
||||
{{ __('Submit news articles') }}
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto mt-2 grid max-w-lg gap-5 lg:max-w-none lg:grid-cols-3">
|
||||
|
||||
|
||||
101
resources/views/livewire/news/form/news-article-form.blade.php
Normal file
101
resources/views/livewire/news/form/news-article-form.blade.php
Normal file
@@ -0,0 +1,101 @@
|
||||
<div class="container p-4 mx-auto bg-21gray my-2">
|
||||
|
||||
<div class="pb-5 flex flex-row justify-between">
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-200">{{ __('News Article') }}</h3>
|
||||
<div class="flex flex-row space-x-2 items-center">
|
||||
<div>
|
||||
<x-button :href="route('article.overview', ['country' => null])">
|
||||
<i class="fa fa-thin fa-arrow-left"></i>
|
||||
{{ __('Back') }}
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="space-y-8 divide-y divide-gray-700 pb-24">
|
||||
<div class="space-y-8 divide-y divide-gray-700 sm:space-y-5">
|
||||
<div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
|
||||
|
||||
<x-input.group :for="md5('libraryItem.lecturer_id')" :label="__('Author')">
|
||||
<x-select
|
||||
:clearable="false"
|
||||
wire:model="libraryItem.lecturer_id"
|
||||
:searchable="true"
|
||||
:async-data="[
|
||||
'api' => route('api.lecturers.index'),
|
||||
'method' => 'GET', // default is GET
|
||||
]"
|
||||
:template="[
|
||||
'name' => 'user-option',
|
||||
'config' => ['src' => 'image']
|
||||
]"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
/>
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('image')" :label="__('Main picture')">
|
||||
<div class="py-4">
|
||||
@if ($image)
|
||||
<div class="text-gray-200">{{ __('Preview') }}:</div>
|
||||
<img class="h-48 object-contain" src="{{ $image->temporaryUrl() }}">
|
||||
@endif
|
||||
</div>
|
||||
<input class="text-gray-200" type="file" wire:model="image">
|
||||
@error('image') <span class="text-red-500">{{ $message }}</span> @enderror
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('libraryItem.main_image_caption')" :label="__('Main image caption')">
|
||||
<x-input autocomplete="off" wire:model.debounce="libraryItem.main_image_caption"
|
||||
:placeholder="__('Main image caption')"
|
||||
:cornerHint="__('Ex: Photo by Timothy Vollmer/ CC BY')"/>
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('libraryItem.name')" :label="__('Title')">
|
||||
<x-input autocomplete="off" wire:model.debounce="libraryItem.name"
|
||||
:placeholder="__('Title')"/>
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('libraryItem.subtitle')" :label="__('Subtitle')">
|
||||
<x-input autocomplete="off" wire:model.debounce="libraryItem.subtitle"
|
||||
:placeholder="__('Subtitle')"/>
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('libraryItem.excerpt')" :label="__('Excerpt')">
|
||||
<x-textarea autocomplete="off" wire:model.debounce="libraryItem.excerpt"
|
||||
:placeholder="__('Excerpt')"/>
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('libraryItem.language_code')" :label="__('Language Code')">
|
||||
<x-select
|
||||
:clearable="false"
|
||||
wire:model="libraryItem.language_code"
|
||||
:options="collect(config('languages.languages'))->map(fn($value, $key) => ['id' => $key, 'name' => $value])->toArray()"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
/>
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('libraryItem.value')" :label="__('Article as Markdown')">
|
||||
<span
|
||||
class="text-amber-500 text-xs py-2">{{ __('For images in Markdown, please use eg. Imgur or another provider.') }}</span>
|
||||
<x-input.simple-mde wire:model.defer="libraryItem.value"/>
|
||||
@error('libraryItem.value') <span class="text-red-500 py-2">{{ $message }}</span> @enderror
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('libraryItem.read_time')" :label="__('Time to read')">
|
||||
<x-inputs.number min="1" autocomplete="off" wire:model.debounce="libraryItem.read_time"
|
||||
:placeholder="__('Time to read')" :hint="__('How many minutes to read?')"/>
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('meetupEvent.link')" label="">
|
||||
<x-button primary wire:click="save">
|
||||
<i class="fa fa-thin fa-save"></i>
|
||||
{{ __('Save') }}
|
||||
</x-button>
|
||||
</x-input.group>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
Reference in New Issue
Block a user