spatie form packages

This commit is contained in:
Ranjan 2024-04-07 13:43:06 +05:45
parent cfd2147536
commit 4f34db3381
7 changed files with 403 additions and 24 deletions

View File

@ -5,7 +5,6 @@ namespace Modules\Employee\Http\Controllers;
use App\Http\Controllers\Controller; use App\Http\Controllers\Controller;
use Illuminate\Http\RedirectResponse; use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request; use Illuminate\Http\Request;
use Illuminate\Http\Response;
class EmployeeController extends Controller class EmployeeController extends Controller
{ {
@ -22,7 +21,8 @@ class EmployeeController extends Controller
*/ */
public function create() public function create()
{ {
return view('employee::create'); $data['title'] = 'Create Employee';
return view('employee::create', $data);
} }
/** /**

View File

@ -0,0 +1,26 @@
@extends('layouts.app')
@section('content')
<div class="page-content">
<div class="container-fluid">
<!-- start page title -->
@include('layouts.partials.breadcrumb', ['title' => $title])
<!-- end page title -->
<form action="{{ route('employee.store') }}" class="needs-validation" novalidate method="post">
@csrf
@include('employee::partials.action')
</form>
<!--end row-->
</div>
<!-- container-fluid -->
</div>
@endsection
@push('js')
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
@endpush

View File

@ -14,8 +14,7 @@
<div class="row g-2"> <div class="row g-2">
<div class="col-sm-4"> <div class="col-sm-4">
<div class="search-box"> <div class="search-box">
<input type="text" class="form-control" id="searchMemberList" <input type="text" class="form-control" id="searchMemberList" placeholder="Search for name...">
placeholder="Search for name or designation...">
<i class="ri-search-line search-icon"></i> <i class="ri-search-line search-icon"></i>
</div> </div>
</div> </div>
@ -23,8 +22,8 @@
<div class="col-sm-auto ms-auto"> <div class="col-sm-auto ms-auto">
<div class="list-grid-nav hstack gap-1"> <div class="list-grid-nav hstack gap-1">
<button class="btn btn-success addMembers-modal" data-bs-toggle="modal" <a class="btn btn-success" href="{{ route('employee.create') }}"><i
data-bs-target="#addmemberModal"><i class="ri-add-fill me-1 align-bottom"></i> Create Employee</button> class="ri-add-fill me-1 align-bottom"></i> Create Employee</a>
</div> </div>
</div> </div>
@ -221,13 +220,8 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div><!-- end col --> </div><!-- end col -->
</div> </div>

View File

@ -0,0 +1,279 @@
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Personal Details</h4>
</div>
<div class="card-body row">
<div class="col-md-4">
{{ html()->label('First name')->class('form-label') }}
{{ html()->text('first_name')->class('form-control')->placeholder('Enter First Name')->required() }}
</div>
<div class="col-md-4">
{{ html()->label('Middle name')->class('form-label') }}
{{ html()->text('middle_name')->class('form-control')->placeholder('Enter Middle Name') }}
</div>
<div class="col-md-4">
<label class="form-label" for="project-title-input">Project Title</label>
<input type="text" class="form-control" id="project-title-input" placeholder="Enter project title">
</div>
<div class="col-md-4">
<label class="form-label" for="project-thumbnail-img">Thumbnail Image</label>
<input class="form-control" id="project-thumbnail-img" type="file"
accept="image/png, image/gif, image/jpeg">
</div>
</div>
<!-- end card body -->
</div>
<!-- end card -->
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Attached files</h5>
</div>
<div class="card-body">
<div>
<p class="text-muted">Add Attached files here.</p>
<div class="dropzone dz-clickable">
<div class="dz-message needsclick">
<div class="mb-3">
<i class="display-4 text-muted ri-upload-cloud-2-fill"></i>
</div>
<h5>Drop files here or click to upload.</h5>
</div>
</div>
<ul class="list-unstyled mb-0" id="dropzone-preview">
</ul>
<!-- end dropzon-preview -->
</div>
</div>
</div>
<!-- end card -->
<div class="mb-4 text-start">
<button type="submit" class="btn btn-danger w-sm">Delete</button>
<button type="submit" class="btn btn-secondary w-sm">Draft</button>
<button type="submit" class="btn btn-success w-sm">Create</button>
</div>
</div>
<!-- end col -->
<div class="col-lg-4">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Privacy</h5>
</div>
<div class="card-body">
<div>
<label for="choices-privacy-status-input" class="form-label">Status</label>
<div class="choices" data-type="select-one" tabindex="0" role="listbox" aria-haspopup="true"
aria-expanded="false">
<div class="choices__inner"><select class="form-select choices__input" data-choices=""
data-choices-search-false="" id="choices-privacy-status-input" hidden="" tabindex="-1"
data-choice="active">
<option value="Private" data-custom-properties="[object Object]">Private</option>
</select>
<div class="choices__list choices__list--single">
<div class="choices__item choices__item--selectable" data-item="" data-id="1" data-value="Private"
data-custom-properties="[object Object]" aria-selected="true">Private</div>
</div>
</div>
<div class="choices__list choices__list--dropdown" aria-expanded="false">
<div class="choices__list" role="listbox">
<div id="choices--choices-privacy-status-input-item-choice-1"
class="choices__item choices__item--choice is-selected choices__item--selectable is-highlighted"
role="option" data-choice="" data-id="1" data-value="Private" data-select-text="Press to select"
data-choice-selectable="" aria-selected="true">Private</div>
<div id="choices--choices-privacy-status-input-item-choice-2"
class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice=""
data-id="2" data-value="Public" data-select-text="Press to select" data-choice-selectable="">
Public</div>
<div id="choices--choices-privacy-status-input-item-choice-3"
class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice=""
data-id="3" data-value="Team" data-select-text="Press to select" data-choice-selectable="">Team
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end card body -->
</div>
<!-- end card -->
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Tags</h5>
</div>
<div class="card-body">
<div class="mb-3">
<label for="choices-categories-input" class="form-label">Categories</label>
<div class="choices" data-type="select-one" tabindex="0" role="listbox" aria-haspopup="true"
aria-expanded="false">
<div class="choices__inner"><select class="form-select choices__input" data-choices=""
data-choices-search-false="" id="choices-categories-input" hidden="" tabindex="-1"
data-choice="active">
<option value="Designing" data-custom-properties="[object Object]">Designing</option>
</select>
<div class="choices__list choices__list--single">
<div class="choices__item choices__item--selectable" data-item="" data-id="1"
data-value="Designing" data-custom-properties="[object Object]" aria-selected="true">Designing
</div>
</div>
</div>
<div class="choices__list choices__list--dropdown" aria-expanded="false">
<div class="choices__list" role="listbox">
<div id="choices--choices-categories-input-item-choice-1"
class="choices__item choices__item--choice is-selected choices__item--selectable is-highlighted"
role="option" data-choice="" data-id="1" data-value="Designing"
data-select-text="Press to select" data-choice-selectable="" aria-selected="true">Designing</div>
<div id="choices--choices-categories-input-item-choice-2"
class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice=""
data-id="2" data-value="Development" data-select-text="Press to select"
data-choice-selectable="">Development</div>
</div>
</div>
</div>
</div>
<div>
<label for="choices-text-input" class="form-label">Skills</label>
<div class="choices" data-type="text" aria-haspopup="true" aria-expanded="false">
<div class="choices__inner"><input class="form-control choices__input" id="choices-text-input"
data-choices="" data-choices-limit="Required Limit" placeholder="Enter Skills" type="text"
value="UI/UX,Figma,HTML,CSS,Javascript,C#,Nodejs" hidden="" tabindex="-1"
data-choice="active">
<div class="choices__list choices__list--multiple">
<div class="choices__item choices__item--selectable" data-item="" data-id="1"
data-value="UI/UX" data-custom-properties="[object Object]" aria-selected="true">UI/UX</div>
<div class="choices__item choices__item--selectable" data-item="" data-id="2"
data-value="Figma" data-custom-properties="[object Object]" aria-selected="true">Figma</div>
<div class="choices__item choices__item--selectable" data-item="" data-id="3" data-value="HTML"
data-custom-properties="[object Object]" aria-selected="true">HTML</div>
<div class="choices__item choices__item--selectable" data-item="" data-id="4" data-value="CSS"
data-custom-properties="[object Object]" aria-selected="true">CSS</div>
<div class="choices__item choices__item--selectable" data-item="" data-id="5"
data-value="Javascript" data-custom-properties="[object Object]" aria-selected="true">Javascript
</div>
<div class="choices__item choices__item--selectable" data-item="" data-id="6" data-value="C#"
data-custom-properties="[object Object]" aria-selected="true">C#</div>
<div class="choices__item choices__item--selectable" data-item="" data-id="7"
data-value="Nodejs" data-custom-properties="[object Object]" aria-selected="true">Nodejs</div>
</div><input type="search" name="search_terms" class="choices__input choices__input--cloned"
autocomplete="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list"
aria-label="null">
</div>
<div class="choices__list choices__list--dropdown" aria-expanded="false"></div>
</div>
</div>
</div>
<!-- end card body -->
</div>
<!-- end card -->
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Members</h5>
</div>
<div class="card-body">
<div class="mb-3">
<label for="choices-lead-input" class="form-label">Team Lead</label>
<div class="choices" data-type="select-one" tabindex="0" role="listbox" aria-haspopup="true"
aria-expanded="false">
<div class="choices__inner"><select class="form-select choices__input" data-choices=""
data-choices-search-false="" id="choices-lead-input" hidden="" tabindex="-1"
data-choice="active">
<option value="Brent Gonzalez" data-custom-properties="[object Object]">Brent Gonzalez</option>
</select>
<div class="choices__list choices__list--single">
<div class="choices__item choices__item--selectable" data-item="" data-id="1"
data-value="Brent Gonzalez" data-custom-properties="[object Object]" aria-selected="true">Brent
Gonzalez</div>
</div>
</div>
<div class="choices__list choices__list--dropdown" aria-expanded="false">
<div class="choices__list" role="listbox">
<div id="choices--choices-lead-input-item-choice-1"
class="choices__item choices__item--choice is-selected choices__item--selectable is-highlighted"
role="option" data-choice="" data-id="1" data-value="Brent Gonzalez"
data-select-text="Press to select" data-choice-selectable="" aria-selected="true">Brent Gonzalez
</div>
<div id="choices--choices-lead-input-item-choice-2"
class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice=""
data-id="2" data-value="Darline Williams" data-select-text="Press to select"
data-choice-selectable="">Darline Williams</div>
<div id="choices--choices-lead-input-item-choice-3"
class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice=""
data-id="3" data-value="Ellen Smith" data-select-text="Press to select"
data-choice-selectable="">Ellen Smith</div>
<div id="choices--choices-lead-input-item-choice-4"
class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice=""
data-id="4" data-value="Jeffrey Salazar" data-select-text="Press to select"
data-choice-selectable="">Jeffrey Salazar</div>
<div id="choices--choices-lead-input-item-choice-5"
class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice=""
data-id="5" data-value="Mark Williams" data-select-text="Press to select"
data-choice-selectable="">Mark Williams</div>
<div id="choices--choices-lead-input-item-choice-6"
class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice=""
data-id="6" data-value="Sylvia Wright" data-select-text="Press to select"
data-choice-selectable="">Sylvia Wright</div>
</div>
</div>
</div>
</div>
<div>
<label class="form-label">Team Members</label>
<div class="avatar-group">
<a href="javascript: void(0);" class="avatar-group-item material-shadow" data-bs-toggle="tooltip"
data-bs-trigger="hover" data-bs-placement="top" aria-label="Brent Gonzalez"
data-bs-original-title="Brent Gonzalez">
<div class="avatar-xs">
<img src="assets/images/users/avatar-3.jpg" alt="" class="rounded-circle img-fluid">
</div>
</a>
<a href="javascript: void(0);" class="avatar-group-item material-shadow" data-bs-toggle="tooltip"
data-bs-trigger="hover" data-bs-placement="top" data-bs-original-title="Sylvia Wright">
<div class="avatar-xs">
<div class="avatar-title rounded-circle bg-secondary">
S
</div>
</div>
</a>
<a href="javascript: void(0);" class="avatar-group-item material-shadow" data-bs-toggle="tooltip"
data-bs-trigger="hover" data-bs-placement="top" aria-label="Ellen Smith"
data-bs-original-title="Ellen Smith">
<div class="avatar-xs">
<img src="assets/images/users/avatar-4.jpg" alt="" class="rounded-circle img-fluid">
</div>
</a>
<a href="javascript: void(0);" class="avatar-group-item material-shadow" data-bs-toggle="tooltip"
data-bs-trigger="hover" data-bs-placement="top" data-bs-original-title="Add Members">
<div class="avatar-xs" data-bs-toggle="modal" data-bs-target="#inviteMembersModal">
<div class="avatar-title fs-16 rounded-circle bg-light text-primary border border-dashed">
+
</div>
</div>
</a>
</div>
</div>
</div>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!-- end col -->
</div>

View File

@ -13,6 +13,7 @@
"laravel/tinker": "^2.8", "laravel/tinker": "^2.8",
"laravel/ui": "^4.5", "laravel/ui": "^4.5",
"nwidart/laravel-modules": "^11.0", "nwidart/laravel-modules": "^11.0",
"spatie/laravel-html": "^3.7",
"spatie/laravel-permission": "^6.4", "spatie/laravel-permission": "^6.4",
"yoeunes/toastr": "^2.3" "yoeunes/toastr": "^2.3"
}, },

80
composer.lock generated
View File

@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically" "This file is @generated automatically"
], ],
"content-hash": "8382101c555e42e8fbbf188fa8b7b1c6", "content-hash": "6dc3e011b2ee18ecf5f0987aba384f2b",
"packages": [ "packages": [
{ {
"name": "barryvdh/laravel-debugbar", "name": "barryvdh/laravel-debugbar",
@ -3675,6 +3675,84 @@
], ],
"time": "2023-11-08T05:53:05+00:00" "time": "2023-11-08T05:53:05+00:00"
}, },
{
"name": "spatie/laravel-html",
"version": "3.7.0",
"source": {
"type": "git",
"url": "https://github.com/spatie/laravel-html.git",
"reference": "df15763c190954ee46a74e0bf5b4b5bbf2e1f170"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/spatie/laravel-html/zipball/df15763c190954ee46a74e0bf5b4b5bbf2e1f170",
"reference": "df15763c190954ee46a74e0bf5b4b5bbf2e1f170",
"shasum": ""
},
"require": {
"illuminate/http": "^10.0|^11.0",
"illuminate/support": "^10.0|^11.0",
"php": "^8.2"
},
"require-dev": {
"mockery/mockery": "^1.3",
"orchestra/testbench": "^8.0|^9.0",
"pestphp/pest": "^2.34"
},
"type": "library",
"extra": {
"laravel": {
"providers": [
"Spatie\\Html\\HtmlServiceProvider"
],
"aliases": {
"Html": "Spatie\\Html\\Facades\\Html"
}
}
},
"autoload": {
"files": [
"src/helpers.php"
],
"psr-4": {
"Spatie\\Html\\": "src"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Sebastian De Deyne",
"email": "sebastian@spatie.be",
"homepage": "https://spatie.be",
"role": "Developer"
},
{
"name": "Freek Van der Herten",
"email": "freek@spatie.be",
"homepage": "https://spatie.be",
"role": "Developer"
}
],
"description": "A fluent html builder",
"homepage": "https://github.com/spatie/laravel-html",
"keywords": [
"html",
"spatie"
],
"support": {
"source": "https://github.com/spatie/laravel-html/tree/3.7.0"
},
"funding": [
{
"url": "https://spatie.be/open-source/support-us",
"type": "custom"
}
],
"time": "2024-03-23T11:28:29+00:00"
},
{ {
"name": "spatie/laravel-permission", "name": "spatie/laravel-permission",
"version": "6.4.0", "version": "6.4.0",

View File

@ -194,6 +194,7 @@ return [
// App\Providers\BroadcastServiceProvider::class, // App\Providers\BroadcastServiceProvider::class,
App\Providers\EventServiceProvider::class, App\Providers\EventServiceProvider::class,
App\Providers\RouteServiceProvider::class, App\Providers\RouteServiceProvider::class,
Spatie\Html\HtmlServiceProvider::class,
], ],