Merge pull request #14 from tomatophp/develop

update social links crud

Modules/CircleXO/App/Http/Controllers/ProfileController.php

@@ -198,6 +198,73 @@ public function updateInfo(Request $request)
         return redirect()->back();
     }
 
+    public function socialStore(Request $request)
+    {
+        $request->validate([
+            "name" => "required|string",
+            "link" => "required|string|url|max:255",
+            "label" => "required|string|max:255"
+        ]);
+
+        $account = auth('accounts')->user();
+        $social = $account->meta('social');
+        $social[] = [
+            'name' => $request->get('name'),
+            'link' => $request->get('link'),
+            'label' => $request->get('label'),
+        ];
+        $account->meta('social', $social);
+
+        Toast::success('Social account added successfully')->autoDismiss(2);
+        return redirect()->back();
+    }
+
+    public function socialEdit($network)
+    {
+        $network = collect(auth('accounts')->user()->meta('social'))->where('name', $network)->first();
+        return view('circle-xo::profile.edit.social-edit', compact('network'));
+    }
+
+    public function socialUpdate(Request $request, $network)
+    {
+        $request->validate([
+            "name" => "required|string",
+            "link" => "required|string|url|max:255",
+            "label" => "required|string|max:255"
+        ]);
+
+        $account = auth('accounts')->user();
+        $social = $account->meta('social');
+        foreach ($social as $key=>$item){
+            if($item['name'] === $network){
+                $social[$key] = [
+                    'name' => $request->get('name'),
+                    'link' => $request->get('link'),
+                    'label' => $request->get('label'),
+                ];
+            }
+        }
+        $account->meta('social', $social);
+
+        Toast::success('Social account updated successfully')->autoDismiss(2);
+        return redirect()->back();
+    }
+
+    public function socialDestroy(Request $request, $network)
+    {
+        $account = auth('accounts')->user();
+        $social = $account->meta('social');
+        foreach ($social as $key=>$item){
+            if($item['name'] === $network){
+                 unset($social[$key]);
+            }
+        }
+        $account->meta('social', $social);
+
+        Toast::success('Social account removed successfully')->autoDismiss(2);
+        return redirect()->back();
+    }
+
     public function updateMeta(Request $request)
     {
         $account = auth('accounts')->user();

Modules/CircleXO/App/Providers/CircleXOServiceProvider.php

@@ -50,6 +50,8 @@ public function registerComponents(): void
             \Modules\CircleXO\App\View\Components\Logo::class,
             \Modules\CircleXO\App\View\Components\ListingCard::class,
             \Modules\CircleXO\App\View\Components\ListingFilterItem::class,
+            \Modules\CircleXO\App\View\Components\SocialItem::class,
+            \Modules\CircleXO\App\View\Components\SocialLinks::class,
         ]);
     }
 

Modules/CircleXO/App/View/Components/SocialItem.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace Modules\CircleXO\App\View\Components;
+
+use Illuminate\View\Component;
+use Illuminate\View\View;
+
+class SocialItem extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct(
+        public string $network,
+        public string $label,
+    )
+    {
+        //
+    }
+
+    /**
+     * Get the view/contents that represent the component.
+     */
+    public function render(): View|string
+    {
+        return view('circle-xo::components.social-item');
+    }
+}

Modules/CircleXO/App/View/Components/SocialLinks.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace Modules\CircleXO\App\View\Components;
+
+use App\Models\Account;
+use Illuminate\View\Component;
+use Illuminate\View\View;
+
+class SocialLinks extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct(
+        public Account $account,
+        public bool $edit = false,
+    )
+    {
+        //
+    }
+
+    /**
+     * Get the view/contents that represent the component.
+     */
+    public function render(): View|string
+    {
+        return view('circle-xo::components.social-links');
+    }
+}

Modules/CircleXO/resources/views/components/layout/profile.blade.php

@@ -19,17 +19,7 @@
                     <i class="bx bx-plus-circle text-2xl text-main-600 hover:text-white"></i>
                 </x-splade-link>
                 @if(auth('accounts')->user()->meta('social'))
-                    @foreach(auth('accounts')->user()->meta('social') as $social)
-                        <a href="{{ $social['link'] }}" target="_blank">
-                            <x-tomato-admin-tooltip :text="isset($social['label']) ? $social['label'] : $social['name']">
-                                @if($social['name'] !== 'website')
-                                    <i class="bx bxl-{{ $social['name'] }} text-2xl text-zinc-200 hover:text-white"></i>
-                                @else
-                                    <i class="bx bx-link text-2xl text-zinc-200 hover:text-white"></i>
-                                @endif
-                            </x-tomato-admin-tooltip>
-                        </a>
-                    @endforeach
+                    <x-circle-xo-social-links edit :account="auth('accounts')->user()"/>
                 @endif
             </div>
             <div>
@@ -110,17 +100,7 @@
                     <i class="bx bx-plus-circle text-2xl text-main-600 hover:text-white"></i>
                 </x-splade-link>
                 @if(auth('accounts')->user()->meta('social'))
-                    @foreach(auth('accounts')->user()->meta('social') as $social)
-                        <a href="{{ $social['link'] }}" target="_blank">
-                            <x-tomato-admin-tooltip :text="isset($social['label']) ? $social['label'] : $social['name']">
-                                @if($social['name'] !== 'website')
-                                    <i class="bx bxl-{{ $social['name'] }} text-2xl text-zinc-200 hover:text-white"></i>
-                                @else
-                                    <i class="bx bx-link text-2xl text-zinc-200 hover:text-white"></i>
-                                @endif
-                            </x-tomato-admin-tooltip>
-                        </a>
-                    @endforeach
+                    <x-circle-xo-social-links edit :account="auth('accounts')->user()"/>
                 @endif
             </div>
         </div>

Modules/CircleXO/resources/views/components/layout/public-profile.blade.php

@@ -14,19 +14,7 @@
         </div>
         <div class="grid grid-cols-1 lg:grid-cols-3">
             <div class="justify-start gap-4 mt-8 mx-16 hidden lg:flex">
-                @if($account->meta('social'))
-                    @foreach($account->meta('social') as $social)
-                        <a href="{{ $social['link'] }}" target="_blank">
-                            <x-tomato-admin-tooltip :text="isset($social['label']) ? $social['label'] : $social['name']">
-                                @if($social['name'] !== 'website')
-                                    <i class="bx bxl-{{ $social['name'] }} text-2xl text-zinc-200 hover:text-white"></i>
-                                @else
-                                    <i class="bx bx-link text-2xl text-zinc-200 hover:text-white"></i>
-                                @endif
-                            </x-tomato-admin-tooltip>
-                        </a>
-                    @endforeach
-                @endif
+                <x-circle-xo-social-links :account="$account"/>
             </div>
             <div>
                 <div class="flex justify-center flex-col items-center -mt-12">
@@ -81,19 +69,7 @@
                 @endif
             </div>
             <div class="justify-center md:justify-start gap-4 my-8 mx-16 flex lg:hidden">
-                @if($account->meta('social'))
-                    @foreach($account->meta('social') as $social)
-                        <a href="{{ $social['link'] }}" target="_blank">
-                            <x-tomato-admin-tooltip :text="isset($social['label']) ? $social['label'] : $social['name'] ">
-                                @if($social['name'] !== 'website')
-                                    <i class="bx bxl-{{ $social['name'] }} text-2xl text-zinc-200 hover:text-white"></i>
-                                @else
-                                    <i class="bx bx-link text-2xl text-zinc-200 hover:text-white"></i>
-                                @endif
-                            </x-tomato-admin-tooltip>
-                        </a>
-                    @endforeach
-                @endif
+               <x-circle-xo-social-links :account="$account"/>
             </div>
         </div>
         {{ $slot }}

Modules/CircleXO/resources/views/components/social-item.blade.php

@@ -0,0 +1,6 @@
+<button @click.prevent="form.name = '{{ $network }}'" :class="{'bg-main-600 text-zinc-600': form.name === '{{ $network }}', 'bg-zinc-900 text-white': form.name !== '{{ $network }}'}" class="flex justify-center text-center border-zinc-700  p-4 rounded-lg border shadow-sm">
+    <div class="flex flex-col justify-center gap-2">
+        <i class="bx bxl-{{ $network }} text-3xl"></i>
+        <h1 class="font-bold">{{$label}}</h1>
+    </div>
+</button>

Modules/CircleXO/resources/views/components/social-links.blade.php

@@ -0,0 +1,25 @@
+@if($account->meta('social'))
+    @foreach($account->meta('social') as $social)
+        @if($edit)
+            <x-splade-link modal :href="route('profile.social.edit', $social['name'])" target="_blank">
+                <x-tomato-admin-tooltip :text="isset($social['label']) ? $social['label'] : $social['name'] ">
+                    @if($social['name'] !== 'website')
+                        <i class="bx bxl-{{ $social['name'] }} text-2xl text-zinc-200 hover:text-white"></i>
+                    @else
+                        <i class="bx bx-link text-2xl text-zinc-200 hover:text-white"></i>
+                    @endif
+                </x-tomato-admin-tooltip>
+            </x-splade-link>
+        @else
+            <a href="{{ $social['link'] }}" target="_blank">
+                <x-tomato-admin-tooltip :text="isset($social['label']) ? $social['label'] : $social['name'] ">
+                    @if($social['name'] !== 'website')
+                        <i class="bx bxl-{{ $social['name'] }} text-2xl text-zinc-200 hover:text-white"></i>
+                    @else
+                        <i class="bx bx-link text-2xl text-zinc-200 hover:text-white"></i>
+                    @endif
+                </x-tomato-admin-tooltip>
+            </a>
+        @endif
+    @endforeach
+@endif

Modules/CircleXO/resources/views/profile/edit/social-edit.blade.php

@@ -0,0 +1,44 @@
+<x-splade-modal>
+    <x-slot:title>
+        {{ __('Update Social Network') }}
+    </x-slot>
+    <x-splade-form :default="$network" class="flex flex-col gap-4" method="POST" action="{{route('profile.social.update', $network['name'])}}">
+        <div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+            <x-circle-xo-social-item network="facebook" :label="__('Facebook')" />
+            <x-circle-xo-social-item network="twitter" :label="__('Twitter')" />
+            <x-circle-xo-social-item network="instagram" :label="__('Instagram')" />
+            <x-circle-xo-social-item network="tiktok" :label="__('Tiktok')" />
+            <x-circle-xo-social-item network="youtube" :label="__('Youtube')" />
+            <x-circle-xo-social-item network="behance" :label="__('Behance')" />
+            <x-circle-xo-social-item network="medium" :label="__('Medium')" />
+            <x-circle-xo-social-item network="reddit" :label="__('Reddit')" />
+            <x-circle-xo-social-item network="pinterest" :label="__('Pinterest')" />
+            <x-circle-xo-social-item network="snapchat" :label="__('Snapchat')" />
+            <x-circle-xo-social-item network="blogger" :label="__('Blogger')" />
+            <x-circle-xo-social-item network="patreon" :label="__('Patreon')" />
+            <x-circle-xo-social-item network="quora" :label="__('Quora')" />
+            <x-circle-xo-social-item network="dribbble" :label="__('Dribbble')" />
+            <x-circle-xo-social-item network="github" :label="__('GitHub')" />
+            <x-circle-xo-social-item network="linkedin" :label="__('LinkedIn')" />
+            <x-circle-xo-social-item network="twitch" :label="__('Twitch')" />
+            <x-circle-xo-social-item network="discord" :label="__('Discord')" />
+            <x-circle-xo-social-item network="figma" :label="__('Figma')" />
+            <x-circle-xo-social-item network="whatsapp" :label="__('Whatsapp')" />
+            <button @click.prevent="form.name = 'website'" :class="{'bg-main-600 text-zinc-600': form.name === 'website', 'bg-zinc-900 text-white': form.name !== 'website'}" class="flex justify-center text-center border-zinc-700  p-4 rounded-lg border shadow-sm">
+                <div class="flex flex-col justify-center gap-2">
+                    <i class="bx bx-link text-3xl"></i>
+                    <h1 class="font-bold">{{__('Link')}}</h1>
+                </div>
+            </button>
+
+        </div>
+
+        <x-splade-input type="text" name="label" :label="__('Label')" />
+        <x-splade-input type="text" name="link" :label="__('Link')" />
+
+        <div class="flex justify-start gap-4">
+            <x-splade-submit spinner :label="__('Save')" class="bg-main-600 border-main-400 text-zinc-900" />
+            <x-tomato-admin-button method="DELETE" confirm-danger danger href="{{ route('profile.social.destroy', $network['name']) }}" :label="__('Remove')" />
+        </div>
+    </x-splade-form>
+</x-splade-modal>

Modules/CircleXO/resources/views/profile/edit/social.blade.php

@@ -1,27 +1,41 @@
 <x-splade-modal>
     <x-slot:title>
-        {{ __('Update Info') }}
+        {{ __('Select Social Network') }}
     </x-slot>
-    <x-splade-form :default="[
-        'social' => auth('accounts')->user()->meta('social') ?: [],
-    ]" class="flex flex-col gap-4" method="POST" action="{{route('profile.meta.update')}}">
-        <x-tomato-admin-repeater name="social" label="Links" :options="['name', 'link', 'label']">
-            <div class="flex flex-col gap-4">
-                <x-splade-select choices type="text" v-model="repeater.main[key].name" label="Name">
-                    <option value="facebook">{{ __('Facebook') }}</option>
-                    <option value="twitter">{{ __('Twitter') }}</option>
-                    <option value="youtube">{{ __('Youtube') }}</option>
-                    <option value="instagram">{{ __('Instagram') }}</option>
-                    <option value="tiktok">{{ __('Tiktok') }}</option>
-                    <option value="github">{{ __('GitHub') }}</option>
-                    <option value="behance">{{ __('Behance') }}</option>
-                    <option value="website">{{ __('Website') }}</option>
-                </x-splade-select>
-                <x-splade-input type="text" v-model="repeater.main[key].label" label="Label" />
-                <x-splade-input type="text" v-model="repeater.main[key].link" label="Link" />
-            </div>
-        </x-tomato-admin-repeater>
+    <x-splade-form class="flex flex-col gap-4" method="POST" action="{{route('profile.social.store')}}">
+        <div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+            <x-circle-xo-social-item network="facebook" :label="__('Facebook')" />
+            <x-circle-xo-social-item network="twitter" :label="__('Twitter')" />
+            <x-circle-xo-social-item network="instagram" :label="__('Instagram')" />
+            <x-circle-xo-social-item network="tiktok" :label="__('Tiktok')" />
+            <x-circle-xo-social-item network="youtube" :label="__('Youtube')" />
+            <x-circle-xo-social-item network="behance" :label="__('Behance')" />
+            <x-circle-xo-social-item network="medium" :label="__('Medium')" />
+            <x-circle-xo-social-item network="reddit" :label="__('Reddit')" />
+            <x-circle-xo-social-item network="pinterest" :label="__('Pinterest')" />
+            <x-circle-xo-social-item network="snapchat" :label="__('Snapchat')" />
+            <x-circle-xo-social-item network="blogger" :label="__('Blogger')" />
+            <x-circle-xo-social-item network="patreon" :label="__('Patreon')" />
+            <x-circle-xo-social-item network="quora" :label="__('Quora')" />
+            <x-circle-xo-social-item network="dribbble" :label="__('Dribbble')" />
+            <x-circle-xo-social-item network="github" :label="__('GitHub')" />
+            <x-circle-xo-social-item network="linkedin" :label="__('LinkedIn')" />
+            <x-circle-xo-social-item network="twitch" :label="__('Twitch')" />
+            <x-circle-xo-social-item network="discord" :label="__('Discord')" />
+            <x-circle-xo-social-item network="figma" :label="__('Figma')" />
+            <x-circle-xo-social-item network="whatsapp" :label="__('Whatsapp')" />
+            <button @click.prevent="form.name = 'website'" :class="{'bg-main-600 text-zinc-600': form.name === 'website', 'bg-zinc-900 text-white': form.name !== 'website'}" class="flex justify-center text-center border-zinc-700  p-4 rounded-lg border shadow-sm">
+                <div class="flex flex-col justify-center gap-2">
+                    <i class="bx bx-link text-3xl"></i>
+                    <h1 class="font-bold">{{__('Link')}}</h1>
+                </div>
+            </button>
 
-        <x-splade-button label="Update" class="bg-main-600 border-main-400 text-zinc-900" />
+        </div>
+
+        <x-splade-input type="text" name="label" :label="__('Label')" />
+        <x-splade-input type="text" name="link" :label="__('Link')" />
+
+        <x-splade-submit spinner :label="__('Save')" class="bg-main-600 border-main-400 text-zinc-900" />
     </x-splade-form>
 </x-splade-modal>

Modules/CircleXO/routes/web.php

@@ -63,6 +63,10 @@
     Route::get('/edit/info', [ProfileController::class, 'info'])->name('info.show');
     Route::post('/edit/info', [ProfileController::class, 'updateInfo'])->name('info.update');
     Route::get('/edit/social', [ProfileController::class, 'social'])->name('social.show');
+    Route::post('/edit/social', [ProfileController::class, 'socialStore'])->name('social.store');
+    Route::get('/edit/social/{network}', [ProfileController::class, 'socialEdit'])->name('social.edit');
+    Route::post('/edit/social/{network}', [ProfileController::class, 'socialUpdate'])->name('social.update');
+    Route::delete('/edit/social/{network}', [ProfileController::class, 'socialDestroy'])->name('social.destroy');
     Route::post('/edit/meta', [ProfileController::class, 'updateMeta'])->name('meta.update');
     Route::post('/edit/media', [ProfileController::class, 'updateMedia'])->name('media.update');
     Route::post('/logout', [ProfileController::class, 'logout'])->name('logout');