nhayder

nhayder

Member Since 1 Year Ago

Doha

Experience Points 31,430
Experience Level 7

3,570 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed 221
Lessons
Completed
Best Reply Awards 2
Best Reply
Awards
  • Start Your Engines Achievement

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • First Thousand Achievement

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • One Year Member Achievement

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • Two Year Member Achievement

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • Three Year Member Achievement

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • Four Year Member Achievement

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • Five Year Member Achievement

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • School In Session Achievement

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • Welcome To The Community Achievement

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • Full Time Learner Achievement

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • Pay It Forward Achievement

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • Subscriber Achievement

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • Lifer Achievement

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • Laracasts Evangelist Achievement

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • Chatty Cathy Achievement

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • Laracasts Veteran Achievement

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • Ten Thousand Strong Achievement

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • Laracasts Master Achievement

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • Laracasts Tutor Achievement

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • Laracasts Sensei Achievement

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • Top 50 Achievement

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

21 Mar
1 day ago

nhayder left a reply on How To Cache Model Relationship

@ftiersch thank you for your comment, actually i'm catching it because the $btnArticle object is unique for every user?? and when its established it shouldn't be changed??? so it should be cached and it should be unique for every user.

that's what why i'm trying to unique it with 'btnArticle-'.$this->id, which clearly not working

I hope im much clear for you

nhayder started a new conversation How To Cache Model Relationship

Hi, I'm trying to cache hasOne relationship on my app but not sure what is the best way to do this type of caching, The relationship will get hits from multiple inputs and every time it should generate different cache, so cache name will be like 'btnArticle-'+$id;

// this is my relationship
    public function btnArticle()
    {
        $btnArticle = Cache::rememberForever('btnArticle-'.$this->id, function () {

            return $this->hasOne(Article::class, 'id', 'articlelink')->with('category');

        });
        
        return $btnArticle;
    }

the code above is returning

"You cannot serialize or unserialize PDO instances (View: /Applications/MAMP/htdocs/linxtter3/resources/views/admin/designer/widgets/includes/buttons.blade.php)  ▶"

any idea what is going on

nhayder left a reply on Way To Secretly Hide Code Within Laravel

@shez1983 cron job will follow your logic as soon as they hit the end point (domain/cron/run) of your code to run.

if @skycoder want to delete files, user article, user membership he will be able to do that directly from the crons controller?

18 Mar
4 days ago

nhayder left a reply on Way To Secretly Hide Code Within Laravel

@skycoder you basically need to issue a license for every installation on your app, then you can make cron jobs so you will validate the license frequently (daily, monthly, ...etc). keep in main that crons can follow your codes login so? basically you can write your code to delete all files on the server or just block all users from logging in till the lisances issues is corrected.

AND IF, the issues is corrected the next cron job will pick up these changes and follow your logic to reactivate the license again.

nhayder left a reply on Route Group Prefix No Working

can you explain further more, you need to expand on this

nhayder left a reply on Access Seeder File From Controller

@erik that code will run the hall seeder, my point was to run part of it only

nhayder started a new conversation Access Seeder File From Controller

i have a seeder file containing a collection of data

        DB::table('widgets')->insert([
            [
                'name' => 'user-settings',
                'user_name' => '',
                    'dynamicbtn' => '0',
            ],
        [
                'name' => 'social-media',
                'user_name' => '',
                    'dynamicbtn' => '0',
            ],
        ... // code continues

im accessing the seeder file from a controller to setup users account looks sothing like that

$seeder = new \Database\Seeds\WantedSeeder();

$seeder->run();

the code is working just fine but the problem is that my seeder file contains almost 10 seeds for DB records, so by running the run() comande i'm adding 10 records to DB where i need to add only social media part of the seeder file ??

is there is a way to do that ??? any ideas ??

nhayder left a reply on How To Check If A Value Is True Or False In Blade

ok there should be and else for fix this,

done

nhayder started a new conversation How To Check If A Value Is True Or False In Blade

i'm trying to check if a value is true or not so i can forward a user to proper page like this

@if($button->pagetarget == true)
    
    target="_blank"

@endif

this is how the pagetarget look on the object when dd() the collection

pagetarget: false,

any ideas ???

07 Mar
2 weeks ago

nhayder left a reply on How To Access Seeder Data From Controller

Thank you, Great point to my problem :-)

nhayder left a reply on How To Access Seeder Data From Controller

I'm not sure why you're trying to pluck a query or except a route name from a query that i'm not requering ???

i'm not trying to fetch data from DB, I'm TRYING TO INSERT DATA into DB directly from a controller by grabing a specific array on a seeder file ????

nhayder left a reply on How To Access Seeder Data From Controller

How can you pluck the DB when its empty ???? the data is still not seeded in the DB? i'm supposed to seed it from controller NOT CLI.

nhayder left a reply on How To Access Seeder Data From Controller

Yes, That is exactly what i'm trying to do, But i need to retreave spacific array from that file not all data. if you look at my post above i have this array for example.

        DB::table('widgets')->insert([
            [
                'name' => 'user-settings',
                'user_name' => '',
                    'dynamicbtn' => '0',
            ],
        [
                'name' => 'social-media',
                'user_name' => '',
                    'dynamicbtn' => '0',
            ],
        ... // code continues

my question was how to access the seeder file from a controller and grab specific array (example -> the that have name = user-settings)

i'm not sure if that is possible

nhayder left a reply on How To Access Seeder Data From Controller

Yes i can, But i need to access the seeder file from controller, That was my initial post all about

nhayder started a new conversation How To Access Seeder Data From Controller

I have hardcoded seeder file on my laravel App, and i'm in a situation where i need to insert new DB record that is identical to the data on the seeder file.

        DB::table('widgets')->insert([
            [
                'name' => 'user-settings',
                'user_name' => '',
                    'dynamicbtn' => '0',
            ],
        [
                'name' => 'social-media',
                'user_name' => '',
                    'dynamicbtn' => '0',
            ],
        ... // code continues

So how to access specific array like (user-settings) directly from controller amming at feeding DB with hardcoded data as start.

Any Ideas?

27 Feb
3 weeks ago

nhayder started a new conversation Can't Write Image Data To Path

i'm using image intervention ti create thumbnails for images on my app, but i'm getting this error every time i try to save the thumbnail on target folder

when new images is loaded im creating a folder with main image and its thumbnail included in that new folder

    public function uploadphotos(Request $request)
    {
        
        $request->validate([

            'file' => 'required|image|mimes:jpeg,png,jpg,gif|max:50000',

        ]);
        
        $image = new Cloudfolder();
        
        $fileName = time()."-".$request['file']->getClientOriginalName();

        $image->uuid = (string) Str::uuid();
        $image->name = strtolower($fileName);
        $image->type = 'image';
        $image->downloads = 0;
        $image->user_id = Auth::id();
        $image->save();

        // Store file on cloudfolder
        Storage::makeDirectory('cloudfolder/'.$image->id); 

        $request->file->storeAs('cloudfolder/'.$image->id.'/', $fileName); // this saves the original file 

        // creating the thumbnail

        image::make($request->file)

            ->fit(50, 50, null, 'center')

            ->save(Storage::url('app/cloudfolder/'.$image->id.'/'.'sm-'.$fileName));
        
    }

26 Feb
3 weeks ago

nhayder left a reply on Uploading Files Using Axio And Laravel Returning Tmp Name Instead Of Real Fine Name

ok this fixed it

$image->name = $request['file']->getClientOriginalName();

nhayder started a new conversation Uploading Files Using Axio And Laravel Returning Tmp Name Instead File Name

i'm working on a file uploader using axio, vue and laravel his is my migrate

    public function up()
    {
        Schema::create('cloudfolders', function (Blueprint $table) {
            $table->increments('id');
            $table->uuid('uuid')->nullable();
            $table->string('name');
            $table->string('type')->default('image');
            $table->string('downloads')->nullable();
            $table->integer('user_id');
            $table->timestamps();
        });
    }


i have a file uploader on vue component

                  <form method="POST" enctype="multipart/form-data" @submit.prevent="handleFileUpload">

                    <input type="file" id="file" ref="myFiles" @change="selectedFile">

                    <span v-if="uploadedFile"> {{uploadedFile.name}}</span>

                    <div class="mt-4 mb-4">

                      <button class="linx-btn hover:border-blue hover:text-blue focus:bg-grey-lightest" type="submit" 

                        style="outline: none;" 

                        :class="isDisabled ? 'disabled' : ''"

                        :disabled="isDisabled"

                        >

                        Upload File

                      </button>


                  </form>

in same component i have the function to upload the file

<script>

import {mapState} from 'vuex'

    export default {

        name: 'ImageUploader',

        data () {

            return {

                gallery:false,

                fullURL : '/media/default/placeholder.png',

                filename : '',

                errors:[],

                isDisabled  : false,

                uploadedFile : '',

            }

        },


methods:{

handleFileUpload : function(index){

    this.isDisabled = true

    let formData = new FormData();

    formData.append( 'file', this.uploadedFile);

    console.log(this.uploadedFile);

    axios.post( 'api/uploadphotos',

      formData,

      {

        headers: {

            'Content-Type': 'multipart/form-data'

        }

      }

    ).then( response => {

      this.$store.dispatch('addPhoto', response.data);
  
      this.name = '';
  
      Event.$emit('requestAlertSuccess');

    })

    .catch( error => {

        if (error.response.status == 422) {

          this.isDisabled = false;

          this.errors = error.response.data.errors;

          Event.$emit('requestAlertSuccess');

        }

    });

    this.isDisabled = false;

    event.target.reset();

    this.errors = '';

},
}

</script>

the controller on laravel (api/uploadphotos)

    public function uploadphotos(Request $request)
    {
        
        $request->validate([

            'file' => 'required|image|mimes:jpeg,png,jpg,gif|max:25000',

        ]);
        
        $image = new Cloudfolder();
        
        $image->uuid = (string) Str::uuid();
        $image->name = $request['file'];
        $image->type = 'image';
        $image->downloads = 0;
        $image->user_id = Auth::id();
        $image->save();

        $lastFile = Cloudfolder::orderBy('id', 'desc')->first();
        return $lastFile;        
        
    }

with implementation above I'm not being able to get the file name instead i'm getting this

/private/var/folders/gn/zn5r8k1d1yxdpz0r0kx0453h0000gn/T/phpHbIKEe

what seems to be the problem ????

nhayder left a reply on How Secure Laravel Is When It Comes To File Upload With Onboard Validation

in case anybody need such secure file uploader, i have made a research regarding this and it looks like the best way to do this in addition to what @bobbybouwmann suggested above, File storage should be outside public folder so if a user was able to upload malicious files they will never be able to to run the script from the browser (in most cases hackers will upload shell script from available file uploader then run script from browser) by hitting the files location endpoint.

shell files mainly looks like this

29384792837492384.php.jpg 

so the file are actually contained in a mime type image/jpeg and you need to make sure to remove unwanted extensions from the file name and make unique code for every stored file on your DB.

UUID something like this domain/923874923749283749234 

on your controller you need to get the file with proper uuid, have a look at @bobbybouwmann suggestion for this issues in our last conversation.

https://laracasts.com/discuss/channels/laravel/how-to-access-image-folder-stored-outside-public-folder

hope this help those who are trying to make secure file management process with laravel.

Thanx

nhayder started a new conversation How Secure Laravel Is When It Comes To File Upload With Onboard Validation

this might be a dump question for some of you but i really need to know how to build a very secure file uploader,

As you know file uploading can be used to upload shell scripts to hack online apps,

so my question is how secure laravel is when it comes to file uploading (images, PDF, .... etc), and will laravel onboard validations do the job of protecting my app from milosuse shell injection ???

25 Feb
3 weeks ago

nhayder started a new conversation How To Track File Upload Presentation For Customer File Uploader

I'm trying to create a customer file uploader for my app, and i was wondering how can i track the uploaded file percentage to show a progress bar for my uploader

24 Feb
3 weeks ago

nhayder started a new conversation What Is The Recomended Image Uploader + Cropper For Laravel In 2019

What is the most reliable image uploader + cropper for laravel in 2019

NOTE: im using vue.js

any recommendation

22 Feb
1 month ago

nhayder left a reply on How To Get A File Size

yah, will update you on this, ...

21 Feb
1 month ago

nhayder left a reply on How To Get A File Size

@cronix it looks really complicated :-( there should be an easier way

nhayder left a reply on How To Get A File Size

@SERGIU17 - thank you, i know about php fileSize() i was wondering if there is a way to do the same in laravel? the filesize php function will not get you the mp3 file duration neither video dimensions

nhayder started a new conversation How To Get A File Size

I'm wondering how to get file sizes for these file formats pdf, imag, mp3, zip, video and maybe for video and audio files is there is a way to get the duration and dimensions ???

Any ideas

20 Feb
1 month ago

nhayder left a reply on How To Access Files And Image Stored Outside Public Folder

@bobbybouwmann hey, just to update you, i got it working this time by making an endpoint to return the filename

Route::get('/images/{file}', [ function ($file) {

    $path = storage_path('app/cloudfolder/images/'.$file);

    if (file_exists($path)) {

        return response()->file($path, array('Content-Type' =>'image/jpeg'));

    }

    abort(404);

}]);

and from blade im getting the images like this.

<img src="/images/1234.jpg" />

AND ITS F**ING WORKING GOOOOOD

Thank you for the support

19 Feb
1 month ago

nhayder left a reply on How To Access Files And Image Stored Outside Public Folder

thank you for your support, i will work on this and let you know what happened

Thanks man.

nhayder started a new conversation How To Access Image Folder Stored Outside Public Folder

im storing files and images in cloudfolder stored outside public folder but not sure how to access these files from blade and vue component ???

folder exists on /root/storage/app/cloudfolder

any ideas

18 Feb
1 month ago

nhayder left a reply on How To Structure Media Folder Similar To Dropbox

OMG That is really good solution, Than you very much

nhayder started a new conversation How To Structure Media Folder Similar To Dropbox

I need to know to how to structure media folder if i want to make a file sharing app similar to dropbox.

from what i know laravel can create a symlink folder on public folder and i can always use that folder to store the files.

Currently i can see files from chrome devTools like this

/storage/files/file1.pdf

which is fine but i was wondering if there is a better way to structure the media folder out side the laravel storage folder so i can hide the full path of the file??? something like this

file1.pdf

is that possible ??? is it recommended to store files outside storage symlink folder ???

17 Feb
1 month ago

nhayder left a reply on How To Bind Form Data

@EJDELMONICO - thank you for the great hint, I'm almost there to solve the issues but i still can't figure out one thing

<template>


    <form action="#" method="POST" enctype="multipart/form-data" @submit.prevent="updateSettings">

        <div class="p-8 panel overflow-y-auto">

                <div class="w-full px-3 mb-6 md:mb-0">

                  <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2">

                    Page Title

                  </label>

                  <input :value="getPageNameByIndex(2)" @change="setPageNameByIndex(2)" class="focus:outline-none">
                
                </div>

        </div>

    </form>


</template>

<script>

import {mapState} from 'vuex'

export default {

      name: 'pageSettingsPanel',


    mounted() {

        this.$store.state.activeLanguages;
        
    },


    methods: {


        getPageNameByIndex(index) {

            return this.$store.state.pages[index].name

        },

        setPageNameByIndex(index, evt) {

            const value = evt.target.value;

            this.$store.commit('updatePageByIndex', { value, index })

        },

    }

}
</script>

with my implementation above im getting this error

[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"

and if you look that the array you can see the name property

{
   id: 42,
   created_at: "2019-02-15 17:29:00",
   updated_at: "2019-02-15 17:29:00",
   name: "services", // < -------- this is it 
   homepage: 0,
   direction: "1",
   language_id: "ar",
   theme_id: null,
   position: 0,
   keywords: null,
   description: null,
   smcard: null,
   slug: "ybl-sybl-sybl",
}

any ideas why im getting this error

14 Feb
1 month ago

nhayder started a new conversation How To Bind Form Data

i have navbtns array on a vuex store, and i need to get single record from that state to bind the data on update from.

This is my first time doing this so i need come clarifications because the implementation that i have is not working

   state:{

        navigation : [], // this is the object containing the data

    },

on same store i made a function that can fetch a single record from that state object

    getters: {

        getSingleNavbtnsData: (state) => (id) => {

            return state.navbtns.find(navbtn => navbtn.id === id )

        }

    },

Also have a component for the update from, which loads as modal in the center of the page when a user clicks a update button on the page. so i'm expecting to pass the id of the state navbtns from the button that a user clicked to the modal that can fetch the project data associated with the id

// this is the button that loads the modal
<button @click="requestLinkManager(btn.id)" > // .... </button> // passing the id to component

on the update modal component im doing this

<template>

 // form available here

</template>

<script>

import {mapState} from 'vuex'

export default {

    mounted() {

        return this.$store.getters.getSingleNavbtnsData(id); // im guessing this should fetch the data from the store ???
        
    },

    computed:{

        // ...mapGetters([

        //     'navbtn',

        // ]),

    },

// ......

}
</script>

the problem is that getSingleNavbtnsData function is not returning any data from the store.

So, Is my implementation is correct, or there is a better way to handle this type of form update.

Can you see any issues im my implementation

nhayder started a new conversation How To Bind Update Form Using Laravel And Vuex

i have navbtns array on a vuex store, and i need to get single record from that state to bind the data on update from.

This is my first time doing this so i need come clarifications because the implementation that i have is not working

   state:{

        navigation : [], // this is the object containing the data

    },

on same store i made a function that can fetch a single record from that state object

    getters: {

        getSingleNavbtnsData: (state) => (id) => {

            return state.navbtns.find(navbtn => navbtn.id === id )

        }

    },

Also have a component for the update from, which loads as modal in the center of the page when a user clicks a update button on the page. so i'm expecting to pass the id of the state navbtns from the button that a user clicked to the modal that can fetch the project data associated with the id

// this is the button that loads the modal
<button @click="requestLinkManager(btn.id)" > // .... </button> // passing the id to component

on the update modal component im doing this

<template>

 // form available here

</template>

<script>

import {mapState} from 'vuex'

export default {

    mounted() {

        return this.$store.getters.getSingleNavbtnsData(id); // im guessing this should fetch the data from the store ???
        
    },

    computed:{

        // ...mapGetters([

        //     'navbtn',

        // ]),

    },

// ......

}
</script>

the problem is that getSingleNavbtnsData function is not returning any data from the store.

So, Is my implementation is correct, or there is a better way to handle this type of form update.

Can you see any issues im my implementation

11 Feb
1 month ago

nhayder left a reply on CSS Inline -> How To Inline Hover Css Roles For Dropdown List

@cronix i have seen these options before and they will not work, the colors of the dropdown menu are streamed from DB, and they should be inlined (that what i know, not sure if there is a better way).


// this is the controller 
$navbar = Topmenu::findOrFail(1);  // this object contains all color values

as per blade file i have this navbar, i already have the main color of the navbar inlined>

the hover class is not getting dont, see below


<nav class="container mx-auto flex items-center justify-between flex-wrap">

      <nav class="nav">

            // ....

            <div class="sub-nav absolute w-full lg:w-64 shadow-lg bg-white rounded">

              <ul class="sub-nav__list list-reset" style="background-color: {{$navbar->submenu_color}}">

                <li class="sub-nav__item">

                  <a href="javascript:void(0)" class="sub-nav__link no-underline text-grey-dark flex items-center p-4" style=" //... hover class needed herer">
                    
                  </a>

                </li>

              </ul>

            </div>
          
            // ...

      </nav>

</nav>

nhayder started a new conversation CSS Inline -> How To Inline Hover Css Roles For Dropdown List

I'm in a position where i need to inline a hover css role for a drop down menu directly on li or ul element of the HTML.

<ul stye="???? here ">

    <li style=" ?????? or here"> Here i need a hover css class<li>
</ul>

i tried multiple solution but still not getting the hover effect ??

<ul stye="li:hover {background-color: #554466}"> // something like this is not working

    <li> Here i need a hover css class<li>
</ul>

any ideas on how to solve this issues

09 Feb
1 month ago

nhayder started a new conversation Splicing Specific Item From Nested Vuex State Object

Hay, i have dynamic navbar that a user can add button to, the is what the api is returning using axios

[
{
id: 20,
language_id: 2,
name: "Unnamed",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_web: "https://linxtter.com",
link_email: "[email protected]",
link_phone: "+999999999999",
link_file: "#",
target: "_blank",
created_at: "2019-02-09 00:50:44",
updated_at: "2019-02-09 00:50:44",
submenu: [
{
id: 34,
navigation_id: 20,
name: "Unnamed",
description: "1",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_web: "https://linxtter.com",
link_email: "[email protected]",
link_phone: "+999999999999",
link_file: "#",
target: "_blank",
created_at: "2019-02-09 00:58:33",
updated_at: "2019-02-09 00:58:33",
},
{
id: 35,
navigation_id: 20,
name: "Unnamed",
description: "1",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_web: "https://linxtter.com",
link_email: "[email protected]",
link_phone: "+999999999999",
link_file: "#",
target: "_blank",
created_at: "2019-02-09 01:02:04",
updated_at: "2019-02-09 01:02:04",
},
{
id: 36,
navigation_id: 20,
name: "Unnamed",
description: "1",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_web: "https://linxtter.com",
link_email: "[email protected]",
link_phone: "+999999999999",
link_file: "#",
target: "_blank",
created_at: "2019-02-09 01:02:06",
updated_at: "2019-02-09 01:02:06",
},
],
},
{
id: 39,
language_id: 2,
name: "Unnamed",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_web: "https://linxtter.com",
link_email: "[email protected]",
link_phone: "+999999999999",
link_file: "#",
target: "_blank",
created_at: "2019-02-09 04:03:17",
updated_at: "2019-02-09 04:03:17",
submenu: [ ],
},
{
id: 47,
language_id: 2,
name: "Unnamed",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_web: "https://linxtter.com",
link_email: "[email protected]",
link_phone: "+999999999999",
link_file: "#",
target: "_blank",
created_at: "2019-02-09 05:54:03",
updated_at: "2019-02-09 05:54:03",
submenu: [
{
id: 113,
navigation_id: 47,
name: "Unnamed",
description: "1",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_web: "https://linxtter.com",
link_email: "[email protected]",
link_phone: "+999999999999",
link_file: "#",
target: "_blank",
created_at: "2019-02-09 06:01:26",
updated_at: "2019-02-09 06:01:26",
}
],
},
{
id: 48,
language_id: 2,
name: "Unnamed",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_web: "https://linxtter.com",
link_email: "[email protected]",
link_phone: "+999999999999",
link_file: "#",
target: "_blank",
created_at: "2019-02-09 06:02:08",
updated_at: "2019-02-09 06:02:08",
submenu: [
{
id: 121,
navigation_id: 48,
name: "Unnamed",
description: "1",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_web: "https://linxtter.com",
link_email: "[email protected]",
link_phone: "+999999999999",
link_file: "#",
target: "_blank",
created_at: "2019-02-09 06:09:13",
updated_at: "2019-02-09 06:09:13",
},
{
id: 122,
navigation_id: 48,
name: "Unnamed",
description: "1",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_web: "https://linxtter.com",
link_email: "[email protected]",
link_phone: "+999999999999",
link_file: "#",
target: "_blank",
created_at: "2019-02-09 06:10:42",
updated_at: "2019-02-09 06:10:42",
},
],
},
]

im removing btns from the nested submenu : [] object but its not splicing the object on vuex navbar object

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex, axios);

export const store = new Vuex.Store({

    state:{

        navbtns : [], // top navigation btns
    
    },

    mutations: {

        REMOVE_SUBBTN : (state, index) => {

            state.navbtns.submenu.splice(index, 1);

            Event.$emit('requestAlertSuccess');

        },

     },

    },

    actions: {
        deleteSubmenuBtn (context, [id, index]){

            axios.delete('/admin/designer/api/submenu/destroy/'+id)

                .then( response => {

                    context.commit('REMOVE_SUBBTN', index)
                    
                })

                .catch( error => {

                    console.log(error);

                    Event.$emit('requestAlertDanger');

                })

        },
    },
 })

Surelly, state.navbtns.submenu.splice(index, 1); So my question is how to splice out a specific row from submenu:[] nested object from withen vuex navbtns store object.

08 Feb
1 month ago

nhayder started a new conversation Mutating Nested Array For Top Navbar Menu Levels

i have dynamic multilevel navbar on my app, and i'm giving user the ability to add/ remove buttons from these navigation system.

// the is the array from api controller
[
{
id: 2,
language_id: 2,
name: "services",
sort: 3,
icon: "far fa-grin-hearts",
link_type: "page",
link_page: "/",
link_file: "",
target: "",
created_at: "2019-02-08 08:19:32",
updated_at: "2019-02-08 08:19:32",
submenu: [ ],
},
{
id: 3,
language_id: 2,
name: "products",
sort: 4,
icon: "far fa-grin-hearts",
link_type: "page",
link_page: "/خدماتنا",
link_file: "",
target: "",
created_at: "2019-02-08 08:19:32",
updated_at: "2019-02-08 08:19:32",
submenu: [
{
id: 1,
navigation_id: 3,
name: "products",
description: "Description goes here",
sort: 4,
icon: "fas fa-desktop",
link_type: "page",
link_page: "/about-us",
link_file: "",
target: "",
created_at: "2019-02-08 08:19:32",
updated_at: "2019-02-08 08:19:32",
},
{
id: 4,
navigation_id: 3,
name: "services",
description: "Description goes here",
sort: 4,
icon: "far fa-grin-hearts",
link_type: "page",
link_page: "/",
link_file: "",
target: "",
created_at: "2019-02-08 08:19:32",
updated_at: "2019-02-08 08:19:32",
},
{
id: 5,
navigation_id: 3,
name: "products",
description: "Description goes here",
sort: 3,
icon: "far fa-grin-hearts",
link_type: "page",
link_page: "/home",
link_file: "",
target: "",
created_at: "2019-02-08 08:19:32",
updated_at: "2019-02-08 08:19:32",
},
{
id: 6,
navigation_id: 3,
name: "products",
description: "Description goes here",
sort: 3,
icon: "fas fa-award",
link_type: "page",
link_page: "/about-us",
link_file: "",
target: "",
created_at: "2019-02-08 08:19:32",
updated_at: "2019-02-08 08:19:32",
},
],
},
{
id: 31,
language_id: 2,
name: "Unnamed",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_file: "#",
target: "_blank",
created_at: "2019-02-08 22:33:44",
updated_at: "2019-02-08 22:33:44",
submenu: [
{
id: 31,
navigation_id: 31,
name: "Unnamed",
description: "1",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_file: "#",
target: "_blank",
created_at: "2019-02-08 22:33:47",
updated_at: "2019-02-08 22:33:47",
},
{
id: 32,
navigation_id: 31,
name: "Unnamed",
description: "1",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_file: "#",
target: "_blank",
created_at: "2019-02-08 22:36:37",
updated_at: "2019-02-08 22:36:37",
},
{
id: 33,
navigation_id: 31,
name: "Unnamed",
description: "1",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_file: "#",
target: "_blank",
created_at: "2019-02-08 22:36:38",
updated_at: "2019-02-08 22:36:38",
},
{
id: 34,
navigation_id: 31,
name: "Unnamed",
description: "1",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_file: "#",
target: "_blank",
created_at: "2019-02-08 22:36:38",
updated_at: "2019-02-08 22:36:38",
},
],
},
]

when new tbn added im updating the navbar object like this

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex, axios);

export const store = new Vuex.Store({

    state:{

        navbtns : [], // top navigation btn set

    
    },

    mutations: {

        NEW_NAVBTNS (state,newbtn){

            state.navbtns.push(newbtn);

        },

    },


    actions: {

        addNewNavbtn : function({commit}){

            axios.post('api/navbtns/store', {

                    language_id     : 2,
                    name            : 'Unnamed',
                    sort            : 4,
                    icon            : 'fas fa-home',
                    link_type       : 'page',
                    link_file       : '#',
                    target          : '_blank',

                })

                .then(function (response) {

                    let newbtn = response.data;

                    commit('NEW_NAVBTNS', newbtn); 


                })

                .catch(function (error) {
                    console.log(error);
                    Event.$emit('requestAlertDanger');

            });

        },

 })

the setup above if adding proper btn except its not adding an empty submenu array to the newly added btn (have a look at the main navigation object above)

so i tried to do this when adding the new btn

commit(‘NEW_NAVBTNS’, {submenu: [], …newbtn});

the result of that is the array is getting mixed up? im getting submenu:[] on the same level as the newbtn where it should be contained in the newbtn object

im getting this

// figure 1
- navbtns : array[6]
    -0: object 
    -1: object 
    -2: object 
    -3: object 
    -4: object
        -newbtn // this is the new main btn
        -submenu // this is the new empty array

but i need this

//figure 2
- navbtns : array[6]
    -0: object 
    -1: object 
    -2: object 
    -3: object 
    -4: object // this is the new button 
        created-at : ---
        posted-at: ----
                btn_name : ----
        id: ---
        page: ---
        -submenu // this is the submenu ( its a relationship array) and inside main btn
            subbtn_name: ---
            data: ---
            link: ---

My question would be how to make my array look like (figure 2), meaning the new submenu : [] array should be contained in the main btn no at the same level.

06 Feb
1 month ago

nhayder started a new conversation Updating Store Relationship Using Axios / Vuex

I have a has many relationship for my app dynamic menu, I'm trying to give users the ability to add / remove menu items. as he wishes.

the implementaiton that i have is not updating both root and child set. its only mutating the root button set (navbtns).

//my controller
    public function index()
    {
        $navbtns = Navigation::with('submenu')
                        ->where('language_id', '2')
                        ->orderBy('sort', 'asc')
                        ->get();
        return $navbtns;
    }


using axios i'm added new records to the submenu DB ( the child not the root )

    state:{

        theme : [],

        navbtns : [], 
    
    },

mutations: {

        NEW_SUBMENU (state,submenu){

            state.navbtns.push(submenu);

        },

},
actions: {

        addNewNavbtn : function({commit}){

            axios.post('api/navbtns/store', {

                    name          : // ....
                    sort            : // ....
                    link_web        : // ....

                })

                .then(function (response) {

                    let newbtn = response.data;

                    commit('NEW_NAVBTNS', newbtn); 


                })

                .catch(function (error) {

                    Event.$emit('requestAlertDanger');

            });

        },
}

so basically im being able to mutate the store main button set not the submenu set,

So how can i preform this type of mutation

31 Jan
1 month ago

nhayder left a reply on Can't Load Eloquent Relationship Using Axios And Vuex

OMG, just found-out what was wrong? and i'ts still not making sense to me even after fixing the problem??

in the theme controller i used to cache the query and it looks like this solved the issues? i was able to get the colors array from themeData as expected?

Is there is any conflicted between laravel caching and axios?????, Clearly removing the cacheing solved the issue for me?

WHAT THE HEAL :-0

nhayder left a reply on Can't Load Eloquent Relationship Using Axios And Vuex

Yes exactly ??? i have never seen this before ???

        getThemeSettings: function({commit}){

            axios.get('/admin/designer/api/theme')
                
                .then(response => {

                    this.theme = response.data;

                    let themeData = response.data; // <--- this is the themeData

                    console.log(response.data); // <-- this returns the colors array

                    console.log(themeData); // <-- this is NOT returns the colors array

                    commit('SET_THEME', themeData)

                })

            .catch( error => {

                  Event.$emit('requestAlertDanger');

            })
        
        },

nhayder left a reply on Can't Load Eloquent Relationship Using Axios And Vuex

:-) oh, Yes i got the colors array when i did response.data ??? so im getting the data but not being able to add it to vuex ???

nhayder left a reply on Can't Load Eloquent Relationship Using Axios And Vuex

No, the themeData DO NOT HAVE the colors array, what i have is the theme only ??

nhayder left a reply on Can't Load Eloquent Relationship Using Axios And Vuex

i Already tried this solutions and still not getting the colors array

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex, axios);

export const store = new Vuex.Store({

    state:{

        theme : {

            colors:{},

        },

    
    },

    mutations: {

        SET_PAGELIST (state,pageList){

            state.pages = pageList;

        },


        SET_THEME (state,themeData){

            state.theme = themeData;

        },


    },

    actions: {

        getThemeSettings: function({commit}){

            axios.get('/admin/designer/api/theme')
                
                .then(response => {

                    this.theme = response.data;

                    let themeData = response.data;

                    commit('SET_THEME', themeData)

                })

            .catch( error => {

                  Event.$emit('requestAlertDanger');

            })
        
        },

    },
 })

i'm not sure if i'm looping correctly.

              <a v-for="(color, index) in theme.colors" :key="theme.colors.id" 

              @click="requestUpdateColorPicker(color.id)" 

              :style="swatchColor(color)"

              href="javascript:void(0)" class="ml-3 mb-2 bg-blue">

        </a>


but still not getting the colors array

nhayder started a new conversation How To Fetch Eloquent Relationship With Axios To Update Vuex Store

i'm trying to load an eloquent relationship to update vuex state using axios, i will explain what i'm doing to the best of my ability.

i have a theme to color relationship on the theme controller like this

    public function index()
    {
        $theme = Theme::with('colors')->findOrFail(1); // i have one theme with id of 1
            
        return $theme;
    }

The function is returning correct data

{
id: 1,
wide: true,
bg_style: "image",
bg_color: "#eff8ff",
bg_image: "/storage/theme/background.jpg",
gradient: false,
bg_gradient_color_a: "rgba(52,144,220,1.0)",
bg_gradient_color_b: "rgba(28,61,90,1.0)",
angle: "0deg",
shadowstatus: false,
shadow: "shadow-lg",
overlay: true,
overlay_color_a: "rgba(52, 144, 220, 0.0)",
overlay_color_b: "rgba(52, 144, 220, 1.0)",
overlayangle: "180deg",
title: "font-sans",
subtitle: "font-sans",
description: "font-sans",
text: "font-sans",
menu: "font-sans",
analytics: "",
created_at: "2019-01-31 10:43:55",
updated_at: "2019-01-31 10:47:08",
colors: [
{
id: 1,
theme_id: 1,
color: "rgba(0, 0, 0, 0.0)",
created_at: null,
updated_at: null,
},
{
id: 2,
theme_id: 1,
color: "rgba(52, 144, 220, 1.0)",
created_at: null,
updated_at: null,
},
{
id: 3,
theme_id: 1,
color: "rgba(244,109,155,1.0)",
created_at: null,
updated_at: null,
},
{
id: 4,
theme_id: 1,
color: "rgba(101,116,205,1.0)",
created_at: null,
updated_at: null,
},
{
id: 5,
theme_id: 1,
color: "rgba(149,97,226,1.0)",
created_at: null,
updated_at: null,
},
],
}

in my theme component i dispatching a function to load and update the theme : [] state like this

  mounted () {

    this.$store.dispatch('getThemeSettings');

  },

this is part of my store.js file

// this is parts of my vuex store file
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex, axios);

export const store = new Vuex.Store({

    state:{

        theme : [],

       // ..... etc
    
    },

    mutations: {

        SET_THEME (state,themeData){

            state.theme = themeData;

        },
    },

    actions: {

        getThemeSettings: function({commit}){

            axios.get('/admin/designer/api/theme')
                
                .then(response => {

                    this.theme = response.data;

                    let themeData = response.data;

                    commit('SET_THEME', themeData)

                })

            .catch( error => {

                  Event.$emit('requestAlertDanger');

            })
        
        },
    },
 })

Unfortunately i'm not being able to get the theme query with colors relationship.

Any ideas.

30 Jan
1 month ago

nhayder left a reply on Can't Load Eloquent Relationship Using Axios And Vuex

Yes, if it dd($theme) i can see the color available

nhayder left a reply on Can't Load Eloquent Relationship Using Axios And Vuex

@BOBBYBOUWMANN - No, I need to load the theme query WITH colors, the cache is cleared every time i test the query? (cache is not the problem)

29 Jan
1 month ago

nhayder started a new conversation Can't Load Eloquent Relationship Using Axios And Vuex

i'm trying to load an eloquent relationship to update vuex state using axios, i will explain what i'm doing to the best of my ability.

i have a theme to color relationship on the theme controller like this

    public function index()
    {
        $theme = Cache::rememberForever('theme', function () {
        
            return Theme::with('colors')->findOrFail(1);
            
        });
        
        return $theme;
    }

in my theme component i dispatching a function to load and update the theme : [] state like this

  mounted () {

    this.$store.dispatch('getThemeSettings');

  },

this is part of my store.js file

// this is parts of my vuex store file
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex, axios);

export const store = new Vuex.Store({

    state:{

        theme : [],

        colors : [],

       // ..... etc
    
    },

    mutations: {

        SET_THEME (state,themeData){

            state.theme = themeData;

        },
    },

    actions: {

        getThemeSettings: function({commit}){

            axios.get('/admin/designer/api/theme')
                
                .then(response => {

                    this.theme = response.data;

                    let themeData = response.data;

                    commit('SET_THEME', themeData)

                })

            .catch( error => {

                  Event.$emit('requestAlertDanger');

            })
        
        },
    },
 })

Unfortunately i'm not being able to get the theme query without colors relationship.

Any ideas.