front-end article submission form added

2025-12-11 06:46:47 +00:00 · 2023-02-09 22:09:00 +01:00
parent 4d3a3788db
commit 10e5126975
27 changed files with 1599 additions and 17 deletions
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,5 +1,8 @@
 import './bootstrap'

+// Import the plugin styles
+import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
+
 import Alpine    from 'alpinejs'
 import collapse  from '@alpinejs/collapse'
 import intersect from '@alpinejs/intersect'
--- a/resources/lang/de.json
+++ b/resources/lang/de.json
@@ -583,7 +583,7 @@
    "Changes": "",
    "Exception": "",
    "Action Happened At": "",
-    "Action": "",
+    "Action": "Aktion",
    "CSV (.csv)": "",
    "Excel (.xlsx)": "",
    "Filename": "",
@@ -634,8 +634,8 @@
    "Here you can see all events of :name.": "Hier siehst du alle Kurs-Termine von :name.",
    "This is the introduction text that is shown on the landing page.": "Das ist der Einführungstext, der auf der Landing-Page angezeigt wird.",
    "This is the subtitle on the landing page.": "Das ist der Untertitel auf der Landing-Page des Dozenten.",
-    "Subtitle": "Untertitel auf der Landing-Page",
-    "Intro": "Intro auf der Landing-Page",
+    "Subtitle": "Untertitel",
+    "Intro": "Intro",
    "This lecturer has not yet written an introduction.": "Dieser Dozent hat noch keine Einführung geschrieben.",
    "If your city is not listed, please create it first.": "Wenn deine Stadt nicht aufgeführt ist, erstelle sie bitte zuerst.",
    "You get a point when you log in.": "Du bekommst einen Punkt, wenn du dich einloggst.",
@@ -731,5 +731,11 @@
    "On this map you can see bookcases that have been orange pilled. You can also click on a marker to go to the search result.": "Auf dieser Karte kannst du sehen, wo sich georangepillte Bücher befinden. Du kannst auch auf einen Marker klicken, um zum Suchergebnis zu gelangen.",
    "Community": "Community",
    "This is the community that the meetup belongs to. If a community is not listed, please contact the administrator.": "Dies ist die Community, der das Meetup angehört. Wenn eine Community nicht aufgeführt ist, kontaktiere bitte den Administrator.",
-    "World Map": "Weltkarte"
+    "World Map": "Weltkarte",
+    "Submit news articles": "Artikel einreichen",
+    "News Article": "News-Artikel",
+    "Author": "Autor",
+    "Ex: Photo by Timothy Vollmer\/ CC BY": "Zum Beispiel: Foto von Timothy Vollmer\/ CC BY",
+    "Article as Markdown": "Artikel als Markdown",
+    "For images in Markdown, please use eg. Imgur or another provider.": "Für Bilder in Markdown, benutze bitte z.B. Imgur oder einen anderen Anbieter."
 }
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -726,5 +726,11 @@
    "On this map you can see bookcases that have been orange pilled. You can also click on a marker to go to the search result.": "",
    "Community": "",
    "This is the community that the meetup belongs to. If a community is not listed, please contact the administrator.": "",
-    "World Map": ""
+    "World Map": "",
+    "Submit news articles": "",
+    "News Article": "",
+    "Author": "",
+    "Ex: Photo by Timothy Vollmer\/ CC BY": "",
+    "Article as Markdown": "",
+    "For images in Markdown, please use eg. Imgur or another provider.": ""
 }
--- a/resources/lang/es.json
+++ b/resources/lang/es.json
@@ -726,5 +726,11 @@
    "On this map you can see bookcases that have been orange pilled. You can also click on a marker to go to the search result.": "",
    "Community": "",
    "This is the community that the meetup belongs to. If a community is not listed, please contact the administrator.": "",
-    "World Map": ""
+    "World Map": "",
+    "Submit news articles": "",
+    "News Article": "",
+    "Author": "",
+    "Ex: Photo by Timothy Vollmer\/ CC BY": "",
+    "Article as Markdown": "",
+    "For images in Markdown, please use eg. Imgur or another provider.": ""
 }
--- a/resources/lang/fr.json
+++ b/resources/lang/fr.json
@@ -727,5 +727,11 @@
    "On this map you can see bookcases that have been orange pilled. You can also click on a marker to go to the search result.": "",
    "Community": "",
    "This is the community that the meetup belongs to. If a community is not listed, please contact the administrator.": "",
-    "World Map": ""
+    "World Map": "",
+    "Submit news articles": "",
+    "News Article": "",
+    "Author": "",
+    "Ex: Photo by Timothy Vollmer\/ CC BY": "",
+    "Article as Markdown": "",
+    "For images in Markdown, please use eg. Imgur or another provider.": ""
 }
--- a/resources/lang/hr.json
+++ b/resources/lang/hr.json
@@ -727,5 +727,11 @@
    "On this map you can see bookcases that have been orange pilled. You can also click on a marker to go to the search result.": "",
    "Community": "",
    "This is the community that the meetup belongs to. If a community is not listed, please contact the administrator.": "",
-    "World Map": ""
+    "World Map": "",
+    "Submit news articles": "",
+    "News Article": "",
+    "Author": "",
+    "Ex: Photo by Timothy Vollmer\/ CC BY": "",
+    "Article as Markdown": "",
+    "For images in Markdown, please use eg. Imgur or another provider.": ""
 }
--- a/resources/lang/it.json
+++ b/resources/lang/it.json
@@ -727,5 +727,11 @@
    "On this map you can see bookcases that have been orange pilled. You can also click on a marker to go to the search result.": "",
    "Community": "",
    "This is the community that the meetup belongs to. If a community is not listed, please contact the administrator.": "",
-    "World Map": ""
+    "World Map": "",
+    "Submit news articles": "",
+    "News Article": "",
+    "Author": "",
+    "Ex: Photo by Timothy Vollmer\/ CC BY": "",
+    "Article as Markdown": "",
+    "For images in Markdown, please use eg. Imgur or another provider.": ""
 }
--- a/resources/lang/mk.json
+++ b/resources/lang/mk.json
@@ -727,5 +727,11 @@
    "On this map you can see bookcases that have been orange pilled. You can also click on a marker to go to the search result.": "",
    "Community": "",
    "This is the community that the meetup belongs to. If a community is not listed, please contact the administrator.": "",
-    "World Map": ""
+    "World Map": "",
+    "Submit news articles": "",
+    "News Article": "",
+    "Author": "",
+    "Ex: Photo by Timothy Vollmer\/ CC BY": "",
+    "Article as Markdown": "",
+    "For images in Markdown, please use eg. Imgur or another provider.": ""
 }
--- a/resources/lang/pl.json
+++ b/resources/lang/pl.json
@@ -727,5 +727,11 @@
    "On this map you can see bookcases that have been orange pilled. You can also click on a marker to go to the search result.": "",
    "Community": "",
    "This is the community that the meetup belongs to. If a community is not listed, please contact the administrator.": "",
-    "World Map": ""
+    "World Map": "",
+    "Submit news articles": "",
+    "News Article": "",
+    "Author": "",
+    "Ex: Photo by Timothy Vollmer\/ CC BY": "",
+    "Article as Markdown": "",
+    "For images in Markdown, please use eg. Imgur or another provider.": ""
 }
--- a/resources/lang/pt.json
+++ b/resources/lang/pt.json
@@ -727,5 +727,11 @@
    "On this map you can see bookcases that have been orange pilled. You can also click on a marker to go to the search result.": "",
    "Community": "",
    "This is the community that the meetup belongs to. If a community is not listed, please contact the administrator.": "",
-    "World Map": ""
+    "World Map": "",
+    "Submit news articles": "",
+    "News Article": "",
+    "Author": "",
+    "Ex: Photo by Timothy Vollmer\/ CC BY": "",
+    "Article as Markdown": "",
+    "For images in Markdown, please use eg. Imgur or another provider.": ""
 }
--- a/resources/lang/tr.json
+++ b/resources/lang/tr.json
@@ -701,5 +701,11 @@
    "On this map you can see bookcases that have been orange pilled. You can also click on a marker to go to the search result.": "",
    "Community": "",
    "This is the community that the meetup belongs to. If a community is not listed, please contact the administrator.": "",
-    "World Map": ""
+    "World Map": "",
+    "Submit news articles": "",
+    "News Article": "",
+    "Author": "",
+    "Ex: Photo by Timothy Vollmer\/ CC BY": "",
+    "Article as Markdown": "",
+    "For images in Markdown, please use eg. Imgur or another provider.": ""
 }
--- a/resources/views/components/input/filepond.blade.php
+++ b/resources/views/components/input/filepond.blade.php
@@ -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>
--- a/resources/views/components/input/simple-mde.blade.php
+++ b/resources/views/components/input/simple-mde.blade.php
@@ -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>
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -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>
--- a/resources/views/livewire/news/article-overview.blade.php
+++ b/resources/views/livewire/news/article-overview.blade.php
@@ -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">

--- a/resources/views/livewire/news/form/news-article-form.blade.php
+++ b/resources/views/livewire/news/form/news-article-form.blade.php
@@ -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>