Skip to content

Instantly share code, notes, and snippets.

@jongravois

jongravois/user-profile.blade.php

Created April 22, 2020 16:41
Show Gist options
  • Save jongravois/2834a049042e4d7759d8c67bcd27a393 to your computer and use it in GitHub Desktop.
Save jongravois/2834a049042e4d7759d8c67bcd27a393 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
user-profile.blade.php
<div class="p-4">
<div class="mt-8 flex ">
<div class="container mx-auto">
<div class="flex px-10">
<div class="w-1/4 rounded-lg p-4 border border-silver-400">
<div class="text-center mb-4">
<img class="rounded-lg"
src="{{$user->avatar_path}}">
</div>
<div class="mb-4">
<div class="text-3xl font-medium">
{{$user->name}}
</div>
<div class="text-xl text-grey-800 font-light">
{{$user->title}}
</div>
<div class="text-grey-800 font-light">
{{($user->office ? $user->office->display : null)}}: {{($user->departments ? implode(', ', collect($user->departments)->pluck('display')->all()) : null)}}
</div>
</div>
<div class="text-left py-4 mb-4 border-b">
<div class="mb-2 flex items-center mr-2">
@svg('solid/envelope', 'text-grey-700 mr-2')
<a href="#" class="no-underline text-sm text-grey-800">
{{$user->email}}
</a>
</div>
<div class="mb-2 flex items-center mr-2">
@svg('solid/phone', 'text-grey-700 mr-2')
<a href="#" class="no-underline text-sm text-grey-800">
{{$user->extension}}
</a>
</div>
<div class="mb-2 flex items-center mr-2">
@svg('uam/skype', 'text-grey-700 mr-2')
<a href="#" class="no-underline text-sm text-grey-800">
{{$user->skype}}
</a>
</div>
</div>
</div>
<div class="w-3/4 ml-4 mt-2">
<div class="flex items-center font-thin text-grey-700 text-sm border-b">
<div class="p-4 cursor-pointer border-b-2 font-normal text-grey-800 {{ $tab === 'profile' ? 'border-orange-500' : 'border-silver-500'}}"
wire:click="tabber('profile')">
Profile
</div>
<div class="p-4 cursor-pointer border-b-2 font-normal text-grey-800 flex items-center {{ $tab === 'prefs' ? 'border-orange-500' : 'border-silver-500'}}"
wire:click="tabber('prefs')">
Preferences
</div>
<div class="p-4 cursor-pointer border-b-2 font-normal text-grey-800 flex items-center {{ $tab === 'tickets' ? 'border-orange-500' : 'border-silver-500'}}"
wire:click="tabber('tickets')">
<div>
Help Desk Tickets
</div>
<div class="rounded-full bg-grey-300 font-semibold text-xxs ml-1 p-1">
41
</div>
</div>
<div class="p-4 cursor-pointer border-b-2 font-normal text-grey-800 flex items-center {{ $tab === 'activity' ? 'border-orange-500' : 'border-silver-500'}}"
wire:click="tabber('activity')">
<div>
Activity
</div>
<div class="rounded-full bg-grey-300 font-semibold text-xxs ml-1 p-1">
6
</div>
</div>
<div class="p-4 cursor-pointer border-b-2 font-normal text-grey-800 flex items-center {{ $tab === 'tasks' ? 'border-orange-500' : 'border-silver-500'}}"
wire:click="tabber('tasks')">
<div>
Tasks
</div>
<div class="rounded-full bg-grey-300 font-semibold text-xxs ml-1 p-1">
15
</div>
</div>
</div>
@if($tab === 'profile')
<div class="mt-2">
<form wire:submit.prevent="updateProfile">
<div class="flex mb-4">
<div class="w-1/3">
<label class="tw-label">Badge <span class="text-xs">(i.e., MEM000000)</span></label>
<input type="text" class="tw-input"
wire:model="badge">
</div>
<div class="w-1/3">
<label class="tw-label">First Name</label>
<input type="text" class="tw-input"
wire:model="first_name">
</div>
<div class="w-1/3">
<label class="tw-label">Last Name</label>
<input type="text" class="tw-input"
wire:model="last_name">
</div>
</div>
<div class="flex mb-4">
<div class="w-1/3">
<label class="tw-label">Email <span class="text-xs">(will also be username)</span></label>
<input type="text" class="tw-input"
wire:model="email">
</div>
<div class="w-1/3">
<label class="tw-label">Title</label>
<input type="text" class="tw-input"
wire:model="title">
</div>
<div class="w-1/3">
<label class="tw-label">Location</label>
<select name="office_id" class="tw-select"
wire:model="office_id">
@foreach($offices as $office)
<option value="{{$office->id}}">
{{$office->display}}
</option>
@endforeach
</select>
</div>
</div>
<div class="flex mb-4">
<div class="w-1/3">
<label class="tw-label">Extension</label>
<input type="text" class="tw-input"
wire:model="extension">
</div>
<div class="w-1/3">
<label class="tw-label">Company Cell / DirectLine</label>
<input type="text" class="tw-input"
wire:model="direct_line">
</div>
<div class="w-1/3">
<label class="tw-label">Skype</label>
<input type="text" class="tw-input"
wire:model="skype">
</div>
</div>
<div class="flex mb-8">
<div class="w-1/3">
<label class="tw-label">Birthday <span class="text-xs">(Can use current year)</span></label>
<input type="date" class="tw-input"
wire:model="dob">
</div>
<div class="w-1/3">
<label class="tw-label">Employment Start Date</label>
<input type="date" class="tw-input"
wire:model="anniversary">
</div>
<div class="w-1/3">
<label class="tw-label">Manager</label>
<select name="manager_id" class="tw-select"
wire:model="manager_id">
<option value="">Select...</option>
@foreach($managers as $man)
<option value="{{$man->id}}">
{{$man->name}}
</option>
@endforeach
</select>
</div>
</div>
<div class="w-full flex justify-center">
<button type="submit"
class="tw-button bg-blue-500 text-white hover:bg-blue-800">
<span class="uppercase">update</span>
</button>
</div>
</form>
</div>
@endif
@if($tab === 'prefs')
@endif
@if($tab === 'tickets')
@endif
@if($tab === 'activity')
@endif
@if($tab === 'tasks')
@endif
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment