Forem: Muath Alsowadi

How to solve bootstrap datepicker in modal

Muath Alsowadi — Mon, 13 Feb 2023 21:57:08 +0000

How to solve bootstrap datepicker in modal

Simply wrap your datepicker code in bootstrap's modal shown event.

$('#your-modal').on('shown.bs.modal', function() {
  $('.your-date-input').datepicker({});
});

::: tip
Here is an full example Bootstrap DatePicker in Modal
:::

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

<style>
    /* Optional: has to be larger than 1050 */
    .datepicker {
      z-index: 1600 !important;
    }
    /* Optional: in case your body is less than datapicker height */
    .modal-body {
        height: 200px;
    }
</style>

<div class="well">
  <button type="button" id="add">Add</button>
</div>
<div id="myModal" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4></h4>
      </div>
      <div class="modal-body">
      </div>
    </div>
  </div>
</div>

$('#myModal').on('shown.bs.modal', function() {
  $('.input-group.date').datepicker({
    format: "dd/mm/yyyy",
    startDate: "01-01-2015",
    endDate: "01-01-2020",
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true,
    container: '#myModal modal-body'
  });
});

$("[id=add]").click(function() {
  $("#myModal .modal-header h4").html("Request for Change");
  $("#myModal .modal-body").html('<form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">Date Required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="DateRequired"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div></form>');
  $("#myModal").modal("show");
});

Laravel Nested Eager Loading on Polymorphic Relationships

Muath Alsowadi — Mon, 13 Feb 2023 21:40:53 +0000

Laravel Nested Eager Loading on Polymorphic Relationships

Sometimes you need to eager load different relationships depending on the type of model on a polymorphic relationship.

For example: you have two type of users seller and buyer, the eager load relationship for seller is the product and the eager load relationship for buyer is the order.

First setup the Models.

class Seller extends Model
{
    public function products()
    {
        return $this->hasMany(Product::class);
    }
}

class Buyer extends Model
{
    public function orders()
    {
        return $this->hasMany(Order::class);
    }
}

class Profile extends Model
{
    public function user()
    {
        return $this->morphTo();
    }
}

Then load the relations like the following:

Profile:with('user', function (MorphTo $morphTo) {
    // Eager load the products for seller.
    // Eager load the orders for buyer 👇
    $morphTo->morphWith([
        Seller::class => ['products'],
        Buyer::class => ['orders'],
    ]);
})->get();

How to Change Default Laravel Breeze "email" to "id" in login

Muath Alsowadi — Thu, 24 Nov 2022 09:14:19 +0000

In my case I want to change email to id
modify the exported App\Http\Requests\Auth\LoginRequest from breeze as following:

<?php

namespace App\Http\Requests\Auth;

use Illuminate\Auth\Events\Lockout;
use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\RateLimiter;
use Illuminate\Support\Str;
use Illuminate\Validation\ValidationException;

class LoginRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'id' => ['required', 'string'],
            'password' => ['required', 'string'],
        ];
    }

    /**
     * Attempt to authenticate the request's credentials.
     *
     * @return void
     *
     * @throws \Illuminate\Validation\ValidationException
     */
    public function authenticate()
    {
        $this->ensureIsNotRateLimited();

        if (! Auth::attempt($this->only('id', 'password'), $this->boolean('remember'))) {
            RateLimiter::hit($this->throttleKey());

            throw ValidationException::withMessages([
                'id' => trans('auth.failed'),
            ]);
        }

        RateLimiter::clear($this->throttleKey());
    }

    /**
     * Ensure the login request is not rate limited.
     *
     * @return void
     *
     * @throws \Illuminate\Validation\ValidationException
     */
    public function ensureIsNotRateLimited()
    {
        if (! RateLimiter::tooManyAttempts($this->throttleKey(), 5)) {
            return;
        }

        event(new Lockout($this));

        $seconds = RateLimiter::availableIn($this->throttleKey());

        throw ValidationException::withMessages([
            'id' => trans('auth.throttle', [
                'seconds' => $seconds,
                'minutes' => ceil($seconds / 60),
            ]),
        ]);
    }

    /**
     * Get the rate limiting throttle key for the request.
     *
     * @return string
     */
    public function throttleKey()
    {
        return Str::transliterate(Str::lower($this->input('id')).'|'.$this->ip());
    }
}

Note: you need to change the input name on blade as following

<!-- Email Address Become Id -->
            <div>
                <x-input-label for="id" :value="__('Email')" />
                <x-text-input id="id" class="block mt-1 w-full" type="text" name="id" :value="old('id')" required autofocus />
                <x-input-error :messages="$errors->get('id')" class="mt-2" />
            </div>

With Laravel Package you can create instance real-time validation for your input in blade.

Muath Alsowadi — Sun, 04 Sep 2022 07:10:33 +0000

Installation

Install the package by using composer:

composer require yemeni-open-source/blade-realtime-input

Basic Usage

The <input> tag:

<x-realtime-input::strings name="username" rules="required|min:5" />

The <select> tag:

<x-realtime-input::options 
    rules="in:usd,yer"
    class="btn btn-default custom-select"
    name="currency" id="currency"
    >
    <option value="usd">USD</option>
    <option value="yer" selected>YER</option>
    <option value="sar">SAR</option>
</x-realtime-input::options>

Advance Usage

You can add id, class , type or other HTML attributes to your input like following

<x-realtime-input::strings
    rules="required|min:5"
    name="username"
    id="user"
    class="form-control"
    />

You can add array name like following

<x-realtime-input::strings
    name="username[]"
    rules="required|min:5"
    id="user"
    class="form-control"
    />

Localization

The library works as you familiar with laravel validator you can read laravel validation localization.