nhayder

nhayder

Member Since 11 Months Ago

Doha

Experience Points 29,850
Experience Level 6

150 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 217
Lessons
Completed
Best Reply Awards 1
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.

22 Feb
8 hours ago

nhayder left a reply on How To Get A File Size

yah, will update you on this, ...

21 Feb
1 day 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
2 days 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
3 days 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
4 days 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
5 days 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 week 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 week 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 week 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
2 weeks 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
2 weeks 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
3 weeks 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
3 weeks 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
3 weeks 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.

nhayder left a reply on VUEX Not Loading Eloquent Query's Relationship

i'm trying to implement your changes but could't so far, So im posting my state file below

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 : [],

        widgets : [],

        pages   : [],

        pagesettings : [],

        activeLanguages : [],

        working : 'text-grey-dark',

        previewLink : false,
    
    },

    mutations: {

        SET_PAGELIST (state,pageList){

            state.pages = pageList;

        },

        SET_PAGE (state,pageInfo){

            state.widgets = pageInfo;

        },

        SET_PAGE_INFORMATION (state,pageData){

            state.pagesettings = pageData;

        },

        SET_LANGUAGES (state,languages){

            state.activeLanguages = languages;

        },

        REMOVE_WIDGET : (state, index) => {

            state.widgets.splice(index,  1);

            Event.$emit('requestAlertSuccess');

        },

        SET_THEME (state,themeData){

            state.theme = themeData;

        },

        SET_COLORS (state,colorPalette){

            state.colors = colorPalette;

        },

        WORK_ON (state){

            state.working = 'text-grey-light',

            state.previewLink = false

        },

        WORK_OFF (state){

            state.working = 'text-grey-dark',

            state.previewLink = true

        },

    },

    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');

            })
        
        },

        getColors: function({commit}){

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

                    this.colors = response.data;

                    let colorPalette = response.data;

                    commit('SET_COLORS', colorPalette)

                })

            .catch( error => {

                  Event.$emit('requestAlertDanger');

            })
        
        },

        getActiveLanguages: function({commit}){

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

                    this.activeLanguages = response.data;

                    let languages = response.data;

                    commit('SET_LANGUAGES', languages)

                })

            .catch( error => {

                  Event.$emit('requestAlertDanger');

            })
        
        },

        getPages: function({commit}){

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

                    this.pages = response.data;

                    let pageList = response.data;

                    commit('SET_PAGELIST', pageList)

                })

            .catch( error => {

                  Event.$emit('requestAlertDanger');

            })
        
        },

        getPageInformation: function({commit}){

            let id = window.location.href.split('/').pop();

            axios.get('/admin/designer/api/page-data/'+id)
                
                .then(response => {

                    this.pagesettings = response.data;

                    let pageData = response.data;

                    commit('SET_PAGE_INFORMATION', pageData)

                })

            .catch( error => {

                  Event.$emit('requestAlertDanger');

            })
        
        },

        getPageWidgets: function({commit}){

            var id = window.location.href.split('/').pop();

            axios.get('/admin/designer/api/widgets/'+id)
                
                .then(response => {

                    this.widgets = response.data;

                    let pageInfo = response.data;

                    commit('SET_PAGE', pageInfo)

                })

            .catch( error => {

                  Event.$emit('requestAlertDanger');

            })
        
        },

        deleteWidget (context, index){

            context.commit('REMOVE_WIDGET', index)

        },

        updateThemeSwitch: function({commit}, [elemstatus, name]){

            commit('WORK_ON');

            axios.put('/admin/designer/api/theme/switch', {

                elem: elemstatus,

                elemName: name,

            })

            .then(function (response) {

                Event.$emit('requestAlertSuccess');

                commit('WORK_OFF');

            })

            .catch(function (error) {

                Event.$emit('requestAlertDanger'); 

                commit('WORK_OFF');

            });

        },

        updateThemeRadio: function({commit}, [value, name]){

            commit('WORK_ON');

            axios.put('/admin/designer/api/theme/radio', {

                elem: value,

                elemName: name,

            })

            .then(function (response) {

                Event.$emit('requestAlertSuccess');

                commit('WORK_OFF');

            })

            .catch(function (error) {

                Event.$emit('requestAlertDanger'); 

                commit('WORK_OFF');

            });

        },

        updateThemeDroplist: function({commit}, [value, name]){

            commit('WORK_ON');

            axios.put('/admin/designer/api/theme/droplist', {

                elem: value,

                elemName: name,

            })

            .then(function (response) {

                Event.$emit('requestAlertSuccess');

                commit('WORK_OFF');

            })

            .catch(function (error) {

                Event.$emit('requestAlertDanger'); 

                commit('WORK_OFF');

            });

        },

        updateWidgetSwitch: function({commit}, [status, name, id]){

            commit('WORK_ON');

            axios.put('/admin/designer/api/widget/switch', {

                elem: status,

                elemName: name,

                elemId : id,

            })

            .then(function (response) {

                Event.$emit('requestAlertSuccess');

                commit('WORK_OFF');

            })

            .catch(function (error) {

                Event.$emit('requestAlertDanger'); 

                commit('WORK_OFF');

            });

        },

        updateWidgetDroplist: function({commit}, [value, name, id]){

            commit('WORK_ON');

            axios.put('/admin/designer/api/widget/droplist', {

                elem: value,

                elemName: name,

                elemId : id,

            })

            .then(function (response) {

                Event.$emit('requestAlertSuccess');

                commit('WORK_OFF');

            })

            .catch(function (error) {

                Event.$emit('requestAlertDanger'); 

                commit('WORK_OFF');

            });

        },

        updateWidgetRadio: function({commit}, [value, name, id]){

            commit('WORK_ON');

            console.log(value+name+id)

            axios.put('/admin/designer/api/widget/radio', {

                elem: value,

                elemName: name,

                elemId: id,

            })

            .then(function (response) {

                Event.$emit('requestAlertSuccess');

                commit('WORK_OFF');

            })

            .catch(function (error) {

                Event.$emit('requestAlertDanger'); 

                commit('WORK_OFF');

            });

        },

        replaceColorValue: function({commit}, [color, name, id]){

            commit('WORK_ON');

            axios.put('/admin/designer/api/colors/replace', {

                elemColor: color,

                elemName: name,

                elemId: id,

            })

            .then(function (response) {

                Event.$emit('requestAlertSuccess');

                commit('WORK_OFF');

            })

            .catch(function (error) {

                Event.$emit('requestAlertDanger'); 

                commit('WORK_OFF');

            });

        },

        saveText:function({commit},[id, text, name]){

            commit('WORK_ON');

            axios.put('/admin/designer/api/widget/text', {

                elem: text,

                elemName : name,

                elemId: id,


            })

            .then(function (response) {

                commit('WORK_OFF');

            })

            .catch(function (error) {

                commit('WORK_OFF');

                Event.$emit('requestAlertDanger'); 

            });

        },
    },
 })

nhayder left a reply on VUEX Not Loading Eloquent Query's Relationship

This is definitely makes sense to me right now? I will try to work on this and see that solves my issues.

Till then, ... i'm closing this thread and might contact you for same issues in the future

thanx

nhayder left a reply on VUEX Not Loading Eloquent Query's Relationship

@FRASERK - i have never seen any thing like that code, But i think this is an interesting approach to solve the problem, You mean i can break the state theme array to small parts sets ???

can you show some example of how to continue in this path ???? or something to read

nhayder started a new conversation VUEX Not Loading Eloquent Query's Relationship

i have an eloquent query with relationship with axios like this

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

i'm dispatching the theme query like this

  mounted () {

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

  },

then axios


        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');

            })
        
        },

The problem i'm facing is that vuex is not loading the relationship every time, Some times it's returning the theme query without the relationship only.

any ideas why is that ???

27 Jan
3 weeks ago

nhayder left a reply on Axios Returning 422

hey, it turned out that there was an issue in the controller the web.php files has some conflicts.

the issues is solved and things are working fine.

nhayder left a reply on Axios Returning 422

yes the error is coming from validation because the value is required, and i'm not being able to pass the color value to controller using axis.

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

            'color' => 'required|string|max:25',

        ]);
        
        $newColor = new Color();
        
        $newColor->color = $request['color'];

        $newColor->save();
                
        
    }

nhayder left a reply on Axios Returning 422

no tried all those options, i will post the hall component

<template>

    <div v-show="colorPicker" class="fixed pin z-60 overflow-auto bg-smoke-light flex">

        <div class="relative bg-white w-1/2 m-auto flex-col flex animated bounceIn">

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

                <div class="flex justify-start border bg-grey-lightest border-grey-light rounded m-4 p-4">

                    <span class="no-underline rounded-full h-16 w-16 flex items-center justify-center text-white shadow-lg" :style="currentColor()"></span>

                    <input class="focus:outline-none focus:bg-white focus:border-blue appearance-none block w-1/3 text-grey-darker border border-blue-lighter rounded mx-4 leading-tight h-12 mt-2 p-2 text-sm text-center" 

                        type="text" 

                        name="color" 

                        placeholder="Enter color value here" 
                        
                        v-model="defaultColor"

                        required autocomplete="off">

                </div>

                <div class="flex justify-between p-4">

                  <div class="color-pallate-width border border-grey-light rounded p-1">
                      
                    <div class="flex flex-wrap justify-center py-3 -m-2">

                        <input @click="changeColor('rgba(248, 250, 252, 1.0)')" type="radio"

                            name="color" 

                            class="focus:outline-none color-swatch h-8 w-8 swatch-btn"

                            style="background-color: rgba(248, 250, 252, 1.0)"

                        >

                        <input @click="changeColor('rgba(255, 235, 239, 1.0)')" type="radio"

                            name="color" 

                            class="focus:outline-none color-swatch h-8 w-8 swatch-btn"

                            style="background-color: rgba(255, 235, 239, 1.0)"

                        >

                    </div>

                  </div>

                  <div class="w-1/2">
                      
                    advanced

                  </div>

                </div>

                <div class="flex border-t bg-grey-lightest border-t-grey justify-center px-10 py-4">

                    <button class="linx-btn hover:border-blue hover:text-blue focus:bg-grey-lightest mr-4" type="submit" style="outline: none;">

                      Save Color

                    </button>

                    <a class="linx-btn text-center cursor-pointer hover:border-blue hover:text-blue focus:bg-grey-lightest" style="outline: none;" @click="toggleColorPicker">

                      Cancel

                    </a>

                </div>


            </form>

        </div>

    </div>

</template>

<script>

import {mapState} from 'vuex'

export default {

      name: 'advancedColorPicker',

      data () {

        return {

            colorPicker:false,

            defaultColor : 'rgba(255, 255, 255, 1.0)'

        }

      },

    mounted() {

        //
        
    },

    created(){

        Event.$on('requestAdvancedColorPicker', () => {

          this.toggleColorPicker();

        });

    },

    methods: {

        toggleColorPicker : function(){

            this.colorPicker = !this.colorPicker;

        },

    addColor : function(){

        axios.post('/api/newpage', {

            color  : this.defaultColor,

        })

        .then( response => {

            // this.$store.dispatch('getPages');

            // Event.$emit('requestAlertSuccess');

        })

        .catch( error => {

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

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

              // Event.$emit('requestAlertSuccess');

            }

        })

        // event.target.reset();

    },

        startupColor : function(){

            return this.defaultColor;

        },

        currentColor : function(){

            let colorValue = this.defaultColor;

            return "background: linear-gradient("+colorValue+", "+colorValue+"),url('/storage/theme/checker.jpg')";

        },

        changeColor : function(updatedColor){

            return this.defaultColor = updatedColor;

        }

    }

}
</script>

<style>
    
.color-pallate-width{

    width: 330px;

}

</style>
26 Jan
3 weeks ago

nhayder left a reply on Axios Returning 422

the v-model="defaultColor" is returning the correct data and it looks like the input is already binded to the value because i can see the because on the webpage.

v-model="color" will definitely show an error because the color is not defined don the component

nhayder started a new conversation Axios Returning 422

this is the route

Route::post('/newcolor', '[email protected]');

this is the controller

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

            'color' => 'required|string|max:25',

        ]);
        
        $newColor = new Color();
        
        $newColor->theme_id = "1";
        $newColor->color = $request['color'];

        $newColor->save();
        
        Cache::forget('colors');
        
        
    }

this is the form

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

                    <input class="focus:outline-none focus:bg-white focus:border-blue appearance-none block w-1/3 text-grey-darker border border-blue-lighter rounded mx-4 leading-tight h-12 mt-2 p-2 text-sm text-center" 

                        type="text" 

                        name="color" 

                        placeholder="Enter color value here" 
                        
                        v-model="defaultColor"

                        required autocomplete="off">

                </div>

</form>

this is my vue function in the methods area

    addColor : function(index){

        axios.post('/api/newpage', {

            color  : this.color,

        })

        .then( response => {

             //

        })

        .catch( error => {

            //

        })

        event.target.reset();

    },

the form is returning 422 every time, can anybody see any issues with my code.

20 Jan
1 month ago

nhayder started a new conversation Passing ID To Eloquent Relationship

i have widgets on my app where every widget may or may not contains articles, currently i passing fixed id of 1 like this

// Widget model

    public function articles()
    {
        return $this->hasMany(Article::class)->where('status', '=', 1); // this should be dynamic
    }

on the controller i fitching the data like this

// widgetController

    public function widgets($id = null)
    {

        if($id){

            $pageID = $id;

        }else{

            $id = 1;

        } 

        $widgets = Cache::rememberForever('page-widgets-'.$id, function () use ($id) {
        
            return Widget::with('articles.category', 'articles.editor', 'buttons')
                        ->where('page_id', '=', $id)
                        ->orderBy('sorting', 'asc')
                        ->get();
            
        });

        return $widgets;

    }

so from the code the $id currently is fixed to 1?? so how can i make the ID pulled Dynamically from controller.

Any ideas???

19 Jan
1 month ago

nhayder left a reply on Vue Dispatching Multiple Value To Function Not Working

@dele thank you for the help, but it turned out that vuex do not allow multiple values to a action method, the best way to do this is to pass a payload object or array.

the issues has been closed with this solutions 2 days ago.

thank you for the help.

nhayder left a reply on SIMPLE JS ERROR -> Accepting Multiple Value In Method

it turned out that vuex do not accept multiple params to be passed to a commit function, so the solution was to pass either a payload or an array.

that fixed the issues.

17 Jan
1 month ago

nhayder started a new conversation Accespting Multiple Value In Funciton

i'm passing 2 value to a vue method ID and the word 'wide' like this

v-on:change="updateThemeSwitch(theme.wide, 'wide')" // data are being passed correctly here

i'm accepting these data on a function

        updateThemeSwitch: function({commit}, elemstatus, name){

            console.log(''+name+''); // name is returning undefined value

        },

what seems to be the problem ??? any ideas

nhayder started a new conversation Vue Dispatching Multiple Value To Function Not Working

i'm passing multiple values thought dispatch function to a vuex action

this.$store.dispatch('updateThemeSwitch', elemStatus, name);

then i need to collect these values from vuex store like this

        updateThemeSwitch: function({commit}, elemStatus, name){

            axios.put('/admin/designer/api/theme/elem', {

                elem: this.elemStatus,

            })

            .then(function (response) {

                Event.$emit('requestAlertSuccess');

            })

            .catch(function (error) {

                Event.$emit('requestAlertDanger'); 

            });

        
        },

unfortunately both elemStatus + name are received in the store empty.

Any ideas on how to fix this issue.

nhayder started a new conversation Update DB Using Formless Checkbox And Axios

I have a formless single checkbox that returns 1/0 according to user choice, i need to update DB with proper data using axios ajax request, so should the request be PUT or Patch ???

tried both of them but laravel keeps on throwing errors

This is the in point

Route::post('/theme/elem', '[email protected]');

this is the axios request

        updateThemeSwitch: function({commit}, elemStatus){

            var switchValue = elemStatus;

            axios.put('/admin/designer/api/theme/elem', {

                elem: this.elemStatus,

            })

            .then(function (response) {

                Event.$emit('requestAlertSuccess');

            })

            .catch(function (error) {

                Event.$emit('requestAlertDanger'); 

            });

        
        },

any ideas on how to do this request properly.

15 Jan
1 month ago

nhayder left a reply on VUEX - Select Proper Page From Pages Array Passed To Component From Vuex Store

@realrandyallen yah, i reverted back to the watch method, but the code is still returning white space, nothing is getting printed on the page.

This is my full component

<template>

    <div class="sticky pin-t bg-white shadow-lg z-40">

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

          <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">

            <div class="text-sm lg:flex-grow flex items-center" >

              <div>

                <a href="javascript:void(0)" class="no-underline hover:text-blue focus:bg-grey-light text-grey-dark inline-flex items-center px-4 py-6" @click="openPageManager">

                  <i class="fas fa-bars fa-2x"></i>

                </a>

              </div>

              <div class="px-2">

                  <h3 class="text-grey-darkest">

                    <i class="far fa-edit text-sm px-1"></i>

                    {{pageName}}

                  </h3>

                  <p class="text-grey-dark">

                    English Page

                  </p>

              </div>

            </div>

            <div class="text-sm lg:flex-grow">

              <a href="javascript:void(0)" class="no-underline hover:text-blue focus:bg-grey-light text-grey-dark inline-flex items-center px-4 py-6" @click="mobilePreview">
               <i class="fas fa-mobile-alt fa-2x"></i>
              </a>

            </div>

            <div>

              <a href="javascript:void" class="no-underline hover:text-blue focus:bg-grey-light text-grey-dark inline-flex items-center px-3 py-6" @click="refresh">
                <i class="fas fa-sync fa-2x"></i>
              </a>

              <a href="/" target="_blank" class="no-underline hover:text-blue focus:bg-grey-light text-grey-dark inline-flex items-center px-3 py-6">
                <i class="far fa-eye fa-2x"></i>
              </a>

              <a href="/admin/dashboard" class="no-underline hover:text-blue focus:bg-grey-light text-grey-dark inline-flex items-center px-3 py-6 inline-flex items-center">
                <i class="fas fa-tachometer-alt fa-2x px-2"></i>
              <span>Dashboard</span>
              </a>

            </div>

          </div>

        </nav>

    </div>

</template>

<script>

import {mapState} from 'vuex'

export default {

  name: 'DesignerToolBar',

  data () {

    return {

        name : ''

    }

  },

  computed:{

    ...mapState([

        'pages'

      ]),
  },

 watch: {

      pageName: function() {

          let pageID = window.location.href.split('/').pop();

          this.name = _.find(this.pages, ['id', 4]).name;  
      }

  },

  methods: {

    openPageManager: function(){

        Event.$emit('requestPageManager');

    },

    refresh: function(){

      location.reload();

    },

    mobilePreview: function(){

      Event.$emit('requestMobilePreview');

    },

    tablatePreview: function(){

      Event.$emit('requestTablatePreview');

    }

  }

}
</script>

nhayder left a reply on VUEX - Select Proper Page From Pages Array Passed To Component From Vuex Store

@realrandyallen

<template>

    <div class="sticky pin-t bg-white shadow-lg z-40">

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

          <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">

            <div class="text-sm lg:flex-grow flex items-center" >

              <div>

                <a href="javascript:void(0)" class="no-underline hover:text-blue focus:bg-grey-light text-grey-dark inline-flex items-center px-4 py-6" @click="openPageManager">

                  <i class="fas fa-bars fa-2x"></i>

                </a>

              </div>

              <div class="px-2">

                  <h3 class="text-grey-darkest">

                    <i class="far fa-edit text-sm px-1"></i>

                    {{pageName}}

                  </h3>

                  <p class="text-grey-dark">

                    English Page

                  </p>

              </div>

            </div>

            <div class="text-sm lg:flex-grow">

              <a href="javascript:void(0)" class="no-underline hover:text-blue focus:bg-grey-light text-grey-dark inline-flex items-center px-4 py-6" @click="mobilePreview">
               <i class="fas fa-mobile-alt fa-2x"></i>
              </a>

            </div>

            <div>

              <a href="javascript:void" class="no-underline hover:text-blue focus:bg-grey-light text-grey-dark inline-flex items-center px-3 py-6" @click="refresh">
                <i class="fas fa-sync fa-2x"></i>
              </a>

              <a href="/" target="_blank" class="no-underline hover:text-blue focus:bg-grey-light text-grey-dark inline-flex items-center px-3 py-6">
                <i class="far fa-eye fa-2x"></i>
              </a>

              <a href="/admin/dashboard" class="no-underline hover:text-blue focus:bg-grey-light text-grey-dark inline-flex items-center px-3 py-6 inline-flex items-center">
                <i class="fas fa-tachometer-alt fa-2x px-2"></i>
              <span>Dashboard</span>
              </a>

            </div>

          </div>

        </nav>

    </div>

</template>

<script>

import {mapState} from 'vuex'

export default {

  name: 'DesignerToolBar',

  data () {

    return {

        name : ''

    }

  },

  computed:{

    ...mapState([

        'pages'

      ]),
  },


  methods: {

    pageName(){

      let pageID = window.location.href.split('/').pop();

      return _.find(this.pages, ['id', pageID]).name;  

    },

    openPageManager: function(){

        Event.$emit('requestPageManager');

    },

    refresh: function(){

      location.reload();

    },

    mobilePreview: function(){

      Event.$emit('requestMobilePreview');

    },

    tablatePreview: function(){

      Event.$emit('requestTablatePreview');

    }

  }

}
</script>

nhayder left a reply on VUEX - Select Proper Page From Pages Array Passed To Component From Vuex Store

@realrandyallen :-) this is really strange i moved the hall thing to methods area becouse the watch function gave me new error, on my blade template in stead of getting the page name i for tis

 function () { [native code] }

I have never seed this before :-).

nhayder left a reply on VUEX - Select Proper Page From Pages Array Passed To Component From Vuex Store

@REALRANDYALLEN - @realrandyallen @realrandyallen passing the ID to component is not possible for my case for i fallowed your first solution

<template>

    <div class="sticky pin-t bg-white shadow-lg z-40">

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

          <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">

            <div class="text-sm lg:flex-grow flex items-center" >

              <div>

                <a href="javascript:void(0)" class="no-underline hover:text-blue focus:bg-grey-light text-grey-dark inline-flex items-center px-4 py-6" @click="openPageManager">

                  <i class="fas fa-bars fa-2x"></i>

                </a>

              </div>

              <div class="px-2">

                  <h3 class="text-grey-darkest">

                    <i class="far fa-edit text-sm px-1"></i>

                    {{pageName}}

                  </h3>

                  <p class="text-grey-dark">

                    English Page

                  </p>

              </div>

            </div>

            <div class="text-sm lg:flex-grow">

              <a href="javascript:void(0)" class="no-underline hover:text-blue focus:bg-grey-light text-grey-dark inline-flex items-center px-4 py-6" @click="mobilePreview">
               <i class="fas fa-mobile-alt fa-2x"></i>
              </a>

            </div>

            <div>

              <a href="javascript:void" class="no-underline hover:text-blue focus:bg-grey-light text-grey-dark inline-flex items-center px-3 py-6" @click="refresh">
                <i class="fas fa-sync fa-2x"></i>
              </a>

              <a href="/" target="_blank" class="no-underline hover:text-blue focus:bg-grey-light text-grey-dark inline-flex items-center px-3 py-6">
                <i class="far fa-eye fa-2x"></i>
              </a>

              <a href="/admin/dashboard" class="no-underline hover:text-blue focus:bg-grey-light text-grey-dark inline-flex items-center px-3 py-6 inline-flex items-center">
                <i class="fas fa-tachometer-alt fa-2x px-2"></i>
              <span>Dashboard</span>
              </a>

            </div>

          </div>

        </nav>

    </div>

</template>

<script>

import {mapState} from 'vuex'

export default {

  name: 'DesignerToolBar',

  data () {

    return {

        name : '',

    }

  },

  computed:{

    ...mapState([

        'pages'

      ]),

    pageName(){

      let pageID = window.location.href.split('/').pop();

      return _.find(this.pages, ['id', pageID]).name;  

    }

  },

  methods: {

    openPageManager: function(){

        Event.$emit('requestPageManager');

    },

    refresh: function(){

      location.reload();

    },

    mobilePreview: function(){

      Event.$emit('requestMobilePreview');

    },

    tablatePreview: function(){

      Event.$emit('requestTablatePreview');

    }

  }

}
</script>

now i'm getting this error

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

this is strange becous i have the name on the array

// this is the set of array
0: {id: 5, created_at: "2019-01-14 04:32:10", updated_at: "2019-01-14 04:32:10", name: "من نحن",…}
1: {id: 4, created_at: "2019-01-14 04:32:10", updated_at: "2019-01-14 04:32:10", name: "الرئيسية",…}
2: {id: 3, created_at: "2019-01-14 04:32:10", updated_at: "2019-01-14 04:32:10", name: "services",…}
3: {id: 2, created_at: "2019-01-14 04:32:10", updated_at: "2019-01-14 04:32:10", name: "about us",…}
4: {id: 1, created_at: "2019-01-14 04:32:10", updated_at: "2019-01-14 04:32:10", name: "home",…}```

this is expanded copy of the array im trying to select with id of 4

4: {id: 1, created_at: "2019-01-14 04:32:10", updated_at: "2019-01-14 04:32:10", name: "home",…} created_at: "2019-01-14 04:32:10" description: null direction: 0 homepage: 1 id: 1 keywords: null language_id: "en" name: "home" position: 0 slug: "home" smcard: null theme_id: "1" updated_at: "2019-01-14 04:32:10"

nhayder left a reply on VUEX - Select Proper Page From Pages Array Passed To Component From Vuex Store

passing the ID to component is not possible for my case for i fallowed your first solution

<template>

    <div class="sticky pin-t bg-white shadow-lg z-40">

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

          <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">

            <div class="text-sm lg:flex-grow flex items-center" >

              <div>

                <a href="javascript:void(0)" class="no-underline hover:text-blue focus:bg-grey-light text-grey-dark inline-flex items-center px-4 py-6" @click="openPageManager">

                  <i class="fas fa-bars fa-2x"></i>

                </a>

              </div>

              <div class="px-2">

                  <h3 class="text-grey-darkest">

                    <i class="far fa-edit text-sm px-1"></i>

                    {{pageName}}

                  </h3>

                  <p class="text-grey-dark">

                    English Page

                  </p>

              </div>

            </div>

            <div class="text-sm lg:flex-grow">

              <a href="javascript:void(0)" class="no-underline hover:text-blue focus:bg-grey-light text-grey-dark inline-flex items-center px-4 py-6" @click="mobilePreview">
               <i class="fas fa-mobile-alt fa-2x"></i>
              </a>

            </div>

            <div>

              <a href="javascript:void" class="no-underline hover:text-blue focus:bg-grey-light text-grey-dark inline-flex items-center px-3 py-6" @click="refresh">
                <i class="fas fa-sync fa-2x"></i>
              </a>

              <a href="/" target="_blank" class="no-underline hover:text-blue focus:bg-grey-light text-grey-dark inline-flex items-center px-3 py-6">
                <i class="far fa-eye fa-2x"></i>
              </a>

              <a href="/admin/dashboard" class="no-underline hover:text-blue focus:bg-grey-light text-grey-dark inline-flex items-center px-3 py-6 inline-flex items-center">
                <i class="fas fa-tachometer-alt fa-2x px-2"></i>
              <span>Dashboard</span>
              </a>

            </div>

          </div>

        </nav>

    </div>

</template>

<script>

import {mapState} from 'vuex'

export default {

  name: 'DesignerToolBar',

  data () {

    return {

        name : '',

    }

  },

  computed:{

    ...mapState([

        'pages'

      ]),

    pageName(){

      let pageID = window.location.href.split('/').pop();

      return _.find(this.pages, ['id', pageID]).name;  

    }

  },

  methods: {

    openPageManager: function(){

        Event.$emit('requestPageManager');

    },

    refresh: function(){

      location.reload();

    },

    mobilePreview: function(){

      Event.$emit('requestMobilePreview');

    },

    tablatePreview: function(){

      Event.$emit('requestTablatePreview');

    }

  }

}
</script>

now i'm getting this error

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

this is strange becous i have the name on the array


// this is the set of array
[{id: 5, created_at: "2019-01-14 04:32:10", updated_at: "2019-01-14 04:32:10", name: "من نحن",…},…]
0: {id: 5, created_at: "2019-01-14 04:32:10", updated_at: "2019-01-14 04:32:10", name: "من نحن",…}
1: {id: 4, created_at: "2019-01-14 04:32:10", updated_at: "2019-01-14 04:32:10", name: "الرئيسية",…}
2: {id: 3, created_at: "2019-01-14 04:32:10", updated_at: "2019-01-14 04:32:10", name: "services",…}
3: {id: 2, created_at: "2019-01-14 04:32:10", updated_at: "2019-01-14 04:32:10", name: "about us",…}
4: {id: 1, created_at: "2019-01-14 04:32:10", updated_at: "2019-01-14 04:32:10", name: "home",…}```

this is expanded copy of the array im trying to select with id of 4

4: {id: 1, created_at: "2019-01-14 04:32:10", updated_at: "2019-01-14 04:32:10", name: "home",…} created_at: "2019-01-14 04:32:10" description: null direction: 0 homepage: 1 id: 1 keywords: null language_id: "en" name: "home" position: 0 slug: "home" smcard: null theme_id: "1" updated_at: "2019-01-14 04:32:10"

nhayder started a new conversation VUEX - Select Proper Page From Pages Array Passed To Component From Vuex Store

Im passing pages array to a vue component from vuex store? the pages array is returning a collection of page data, unfortunately i don't need all these data i only need to select the data that my user is currently editing to display to the user (page name ... etc).

on laravel i have the page ID on the route

http://127.0.0.1:8000/en/admin/pages/1 // this is the ID of the page the user is editing

in addition to that i can select the page id like this

var pageID = window.location.href.split('/').pop();

so how can i select current page from the pages array from vuex store

this is my component

<template>
// .....
                  <h3 class="text-grey-darkest">

                    <i class="far fa-edit text-sm px-1"></i>

                   {{pageName}}

                  </h3>

// ....
</template>

<script>

import {mapState} from 'vuex'

export default {

  name: 'DesignerToolBar',

  data () {

    return {

        //

    }

  },

  computed:{

    ...mapState([

        'pages'

      ]),

    pageName(){

      // var pageID = window.location.href.split('/').pop();
      // here where i need to select the correct page from pages array
 
    }

  },
}
</script>

14 Jan
1 month ago

nhayder started a new conversation Passing Multiple Data To Blade Template

Hi, i have this multiple eloquent query

return view('public.welcome', compact('page', 'topMenu', 'theme', 'copyright', 'pageManager', 'activeLanguages', 'pageWidget', $slug));

i'm passing theme + page from that query to blade template

@extends('layouts.theme', ['theme' => $theme, 'page' => $page])

But data are not getting passed i'm getting this error instead

Undefined variable: page (View: /Applications/MAMP/htdocs/blog/resources/views/public/welcome.blade.php)

so what is the proper way to pass the theme and page to main blade template