SunnyBoy

Oh it worked but I switched to Medium Editor instead later! 😊

Thanks!

It Worked! 🥳Never thought it would be this simple! 🤓🤩😲 Thanks @snapey 👍🙏🙌

Livewire component

...
<div class="form-group" wire:ignore>
    <label class="col-form-label">Description</label>
    <textarea wire:model.defer="content.about.description" class="editable form__description">
        {!! $content['about']['description'] !!}
    </textarea>
</div>
...

JavaScript code

var editor = new MediumEditor('.editable');
editor.subscribe('blur', function (event, editable) {
    @this.set('content.about.description', editor.getContent());
});

With this working now I could easily recommend Medium Editor as a perfect WYSIWYG editor for Livewire projects.

It Worked! 🥳Never thought it would be this simple! 🤓🤩😲 Thanks @snapey 👍🙏🙌

Livewire component

...
<div class="form-group" wire:ignore>
    <label class="col-form-label">Description</label>
    <textarea wire:model.defer="content.about.description" class="editable form__description">
        {!! $content['about']['description'] !!}
    </textarea>
</div>
...

JavaScript code

var editor = new MediumEditor('.editable');
editor.subscribe('blur', function (event, editable) {
    @this.set('content.about.description', editor.getContent());
});

With this working now I could easily recommend Medium Editor as a perfect WYSIWYG editor for Livewire projects.

I am trying to use Medium Editor with Livewire but not able to retrieve the data from the textarea. fyi It works fine without the editor but when i try with it then no data.

<div class="form-group" wire:ignore>
    <label class="col-form-label">Description</label>
    <textarea wire:model.defer="content.about.description" class="editable form__description">
        {!! $content['about']['description'] !!}
    </textarea>
</div>

Not sure how to handle this with JavaScript. No, i am not using Alphine.js but could consider if required.

I have played a bit with Trix and Summernote and they work ok with Livewire but have some conflicts with their toolbars. So preference is Medium Editor.

@oussamasid Are you able to save the text with Bold Italics and all those bells and whistles that come with the Trix coz for me nothing works except it all saves as a plain text. So I see no point of using a wysiwyg editor rather plain textarea tag which works fine! LOL

Let me know if work for you!

MY BAD! seems the issue was with me using Livewire... forgot to add the following.

protected $paginationTheme = 'bootstrap';

MY BAD! seems the issue was with me using Livewire... forgot to add the following.

protected $paginationTheme = 'bootstrap';

Not sure what am i missing here but have tried both laravel ui and fortify as well with bootstrap 4 scaffolding everything seems to work (as per what i need) but unfortunately Pagination did not. At least based on what's in Laravel 8 doc.

use Illuminate\Pagination\Paginator;

public function boot()
{
    Paginator::useBootstrap();
}

I see the tailwind classes on view source. Any idea how to fix this???

Today i encounter the same issue. @luka did you figure out what was the issue??? Please share if so. Thanks

@rodrigo.pedra thanks for the help! Appreciated 👏👏👏

Ya this works but what you say make complete sense! Thanks

'strict' => false,

@sinnbeck you are awesome!!! 🤩😎👊

Not sure what's the issue whit this query? It works just fine in local environment (with mysql v8.0.21) but doesn't work on shared hosting with (mysql 5.6). @snapey Any suggestions????

$query = DB::table('campaigns')
    ->join('categories', 'campaigns.category_id', '=', 'categories.id')
    ->leftJoin('donations', 'campaigns.id', '=', 'donations.campaign_id')
    ->select(
        'campaigns.id',
        'campaigns.title',
        'categories.name',
        'campaigns.status',
        'campaigns.user_id',
        DB::raw('SUM(donations.donation_amount) as donation_amount')
    )
    ->groupBy('campaigns.id');

getting this error not sure why??? Is there something I need to know?

SQLSTATE[42000]: Syntax error or access violation: 1055 'mysql_db.campaigns.title' isn't in GROUP BY (SQL: select `campaigns`.`id`, `campaigns`.`title`, `categories`.`name`, `campaigns`.`status`, `campaigns`.`user_id`, SUM(donations.donation_amount) as donation_amount from `campaigns` inner join `categories` on `campaigns`.`category_id` = `categories`.`id` left join `donations` on `campaigns`.`id` = `donations`.`campaign_id` where `campaigns`.`user_id` = 4 group by `campaigns`.`id`)

@mariojg Is there any document for onix? How to setup or configure???

@snapey Thanks for elaborating! Appreciated 🙏

Thanks @snapey you have always been kind and help, in-fact was thinking about you while writing... lol

This is pretty close to what i got

dd(json_decode($page['region'])->about_us_title);

Here is mine

json_decode($request['regions'], true)['about_us_title'];

Thanks!

Yes it's one row... yes you are right json_decode() is what i was looking

@sinnbeck I already tried that also collect($page['regions']) but the issue here seems to be the value for the key regions is a string, as you can see in the result below. I guess we need to parse this string value somehow and make it a json obj.

$obj = (object) $page['regions'];

Result

{#1527
  +"regions": "{"about_us_title":"<h2 class=\"heading__title\">\n    Hello World\n</h2>","about_us_content":"<p>\n    Lorem ipsom dolor sit amet consectetur adipisicing elit.\n</p>"}"
}

How to display the values based on its key?

following is what i get in Post request,

$page = $request->all();

dd($page['regions']);

// Output
"{
    "about_us_title":"<h1>Hello World!</h1>",
    "about_us_content":"<p>\n Lorem ipsum dolor sit amet consectetur adipisicing elit. \n</p>"
}"

What I want is as following, but not sure how to parse

{!! $obj->about_us_title !!}

// Expected Result
// Hello World!
. . .

{!! $obj->about_us_content !!}

// Expected Result
// Lorem ipsum dolor sit amet consectetur adipisicing elit. 

It's all in there what one would need, I have to look into my archive and probably upload it to github or something if you still looking.

@snapey my bad found the issue! It was the model name! Grrrr!

@snapey But for some reason its not able to store the record getting following error:

SQLSTATE[42S22]: Column not found: 1054 Unknown column 'start_date_time' in 'field list' (SQL: insert into `campaigns` (`user_id`, `title`, `description`, `start_date_time`, `finish_date_time`, `venue`, `organizer`, `email`, `phone`, `image`, `updated_at`, `created_at`) values (2, Sea Surfing, <p>Test</p>, 2020-09-05 16:05:00, 2020-11-07 16:05:00, Chicago, IL, SunnyBoy, [email protected], 5879669661, 1597702955.jpeg, 2020-08-17 22:22:35, 2020-08-17 22:22:35))

EventsController

    public function store(EventRequest $request)
    {
        $event                   = new Campaign;
        $event->user_id          = auth()->id();
        $event->title            = $request->title;
        $event->description      = $request->description;
        $event->start_date_time  = Carbon::parse($request->start_date_time)->format('Y-m-d H:i:s');
        $event->finish_date_time = Carbon::parse($request->finish_date_time)->format('Y-m-d H:i:s');
        $event->venue            = $request->venue;
        $event->organizer        = $request->organizer;
        $event->email            = $request->email;
        $event->phone            = $request->phone;

        if ($request->hasFile('image_file')) {
            $newImage = time() . '.' . $request->image_file->extension();
            $request->image_file->storeAs('images/events', $newImage);
            $event->image = $newImage;
        }
        $event->save();

        toast('Event created successfully!', 'success');

        return redirect()->route('events.index');
    }

Migration

Schema::create('events', function (Blueprint $table) {
    $table->id();
    $table->unsignedBigInteger('user_id');
    $table->string('image');
    $table->string('title');
    $table->text('description');
    $table->dateTime('start_date_time');
    $table->dateTime('finish_date_time');
    $table->string('venue');
    $table->string('organizer');
    $table->string('email');
    $table->string('phone');
    $table->timestamps();
});

Any idea??? Thanks!

Got it!

Carbon::parse($request->start_date_time)->format('Y-m-d H:i:s');

Any further suggestions???

How to convert something like "2020-09-04T16:58" to "2020-09-0416:58:00" using Carbon Date Format?

Did you find the solution??? i got something similar happening with Nice Select (https://hernansartorio.com/jquery-nice-select/).

@apexleo i saw that too... thanks for sharing though!

@snapey SWEET!!! It works like a charm! Thanks a bunch! 😍😍😍

Yes, not sure where to even start... first day i started and tried to help someone share a link from Livewire docs itself and i got the msg "Account on Hold"... LOL 😂😂😂

After browsing for sometime all i could get to Messages -> New Message where it says Add User (And how would I know who to write, anyways msged Caleb but no response).

So pls let me know if there is some secret door??? Hahaha Also let the community know that there might be ppl like trying the same!!!!

THANKS!!!

Hi, Has anyone got this working? I want to use Livewire but hate the fact that the forum seems not open for ALL. Or may be i could't find a way to post my issue at least... anyways coming back to the topic. I am using https://github.com/realrashid/sweet-alert package in my project now after implementing Livewire its a shame that i can't use it as easily as i though. or is there something that i am missing??? Please advice!

@geordiejackson this is new to me I didn't quite get how it would work without relationship... but again Laravel was doing its magic using withCount('likes'). I am getting the results! Thanks

Well i am looking for a list of campaigns in desc order based on the popularity (most liked first and least at the end).

What would be the optimized way of writing an eloquent orm query to display a list of all active Campaigns in desc order based on the popularity (most liked first and least at the end).

Campaigns Table Schema

Schema::create('campaigns', function (Blueprint $table) {
    $table->id();
    $table->string('image')->nullable();
    $table->string('title');
    $table->unsignedBigInteger('category_id');
    $table->enum('status', ['active', 'pending', 'inactive'])->default('pending');
    $table->unsignedBigInteger('user_id');
    $table->timestamps();
});

Likes Table Schema

Schema::create('likes', function (Blueprint $table) {
    $table->id();
    $table->unsignedBigInteger('user_id');
    $table->unsignedBigInteger('campaign_id');
    $table->boolean('status');
    $table->timestamps();
});

Looking for an optimized solution below is my imperfect sql query!!! 😆😆😆 Thanks!

SELECT campaigns.*, COUNT(*) 
FROM campaigns 
INNER JOIN likes 
ON campaigns.id = likes.campaign_id 
GROUP BY campaigns.id
ORDER BY 2 ASC;

@kkhicher1 thanks again for the prompt response, but what you are suggesting regarding the base64 is equivalent to what i already did using event.target.result

$('#file_preview').attr('src', e.target.result); 

Anyways... what i "was" seeking was how to set our input's 'files' property on drop event which i have figured out.

Here is the missing piece of the puzzle:

$('.upload-area').on('drop', function (e) {
    e.stopPropagation();
    e.preventDefault();
    $(this).removeClass("dragover");

    var files = e.originalEvent.dataTransfer.files;

    if (files && files.length) {

        // we set our input's 'files' property
        $('#file')[0].files = files;

    }

    readFile(files[0]);

});

THANKS ALL

@kkhicher1 thanks again for the prompt response, but what you are suggesting regarding the base64 is equivalent to what i already did using event.target.result

$('#file_preview').attr('src', e.target.result); 

Anyways... what i "was" seeking was how to set our input's 'files' property on drop event which i have figured out.

Here is the missing piece of the puzzle:

$('.upload-area').on('drop', function (e) {
    e.stopPropagation();
    e.preventDefault();
    $(this).removeClass("dragover");

    var files = e.originalEvent.dataTransfer.files;

    if (files && files.length) {

        // we set our input's 'files' property
        $('#file')[0].files = files;

    }

    readFile(files[0]);

});

THANKS ALL

Thanks @kkhicher1, this is all good only if i get the file in my request then into the controller. Bigger issue is I am not able to get the file itself.

Inside Controller i'm getting false when the upload is done using drag and drop. While this returns tru when i use select. So the issue is on drag and drop the input field "image_file" is is not getting set. <input type="file" name="image_file" id="file" accept="image/*"> OR is it something that i 'm missing???

dd(request()->hasFile('image_file'));

I have been tying to work it out since last couple of days... and finally hope i would get some answers from the lavarel community.

While working my Laravel project where I am trying to upload an image (single image) using either drag & drop or select.

NOTE: I have a placeholder image which i want to use it as a dropzone, and also the size may vary depending on where i want to use. Now I should be able to drop an image on this placeholder image. On drop or select the new image replaces the placeholder image (this part i am able to achieve) but when i am trying to submit the form if I have drop a file it won't get to the controller. But when i select the file i am good.

Here is what i have done so far... Can any one let me know what is wrong with the drag & drop method for submitting... the only issue i can think of is the <input type="file"> is not able to set the value when when file is dropped.

Here is my blade form

<form class="form" action="{{ route('categories.store') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group row">
                        <label for="category" class="col-sm-4 col-form-label">Category</label>
                        <div class="col-sm-8">
                            <input id="category" type="text" class="form-control @error('category') is-invalid @enderror" name="category" value="{{ old('category') }}">
                            @error('category')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="slug" class="col-sm-4 col-form-label">Slug</label>
                        <div class="col-sm-8">
                            <input id="slug" type="text" class="form-control @error('slug') is-invalid @enderror" name="slug" value="{{ old('slug') }}">
                            @error('slug')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="order" class="col-sm-4 col-form-label">Display Order</label>
                        <div class="col-sm-8">
                            <input id="order" type="number" class="form-control" name="order" value="{{ old('order') }}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="status" class="col-sm-4 col-form-label">Status</label>
                        <div class="col-sm-8">
                            <select id="status" class="form-control form__select" name="status">
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="file" class="col-sm-4 col-form-label">Upload Image</label>
                        <div class="col-sm-8">
                            <div class="upload-area" id="uploadfile">
                                {{-- <h1>Drag and Drop file here<br/>Or<br/>Click to select file</h1> --}}
                                <img class="img-fluid" src="{{ asset('img/640x480.png') }}" height="200px" id="file_preview" alt="img" />
                            </div>
                            <input type="file" name="file" id="file">
                            @error('file')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-12">
                            <button type="submit" class="form__submit">Save</button>
                        </div>
                    </div>
                </form>

style.css

.upload-area{
    width: 42%;
    border: 2px solid lightgray;
    border-radius: 3px;
    text-align: left;
    overflow: auto;
}

.upload-area:hover{
    cursor: pointer;
}

.upload-area h1{
    text-align: center;
    font-weight: normal;
    font-family: sans-serif;
    line-height: 50px;
    color: darkslategray;
}

#file{
    opacity: 0;
}

and finally my JavaScript

 // On File Drop
        $('.upload-area').on('drop', function (e) {
            e.stopPropagation();
            e.preventDefault();
            $(this).removeClass("dragover");
   
            var file = e.originalEvent.dataTransfer.files[0];
            readFile(file);

            var fd = new FormData();
            fd.append('file', file[0]);
            // uploadData(fd);
        });

        // Open file selector on div click
        $("#uploadfile").click(function () {
            $("#file").click();
        });

        // file selected
        $("#file").change(function () {
            var file = $('#file')[0].files[0];
            readFile(file);
        });


    function readFile(file) {

        var reader = new FileReader();
        reader.onload = function (e) {
            $('#file_preview').attr('src', e.target.result);
        };
        reader.readAsDataURL(file);
    }