nhayder

nhayder

Doha

Member Since 9 Months Ago

Experience Points 28,510
Experience
Level
Lessons Completed 213
Lessons
Completed
Best Reply Awards 1
Best Answer
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.

19 Jan
1 day 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
3 days 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
5 days 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
6 days 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

10 Jan
1 week ago

nhayder started a new conversation How To Get ContentEditable Value

Hi, i'm trying to get the value of a contentEditable area, Any ideas on how to get this value.

<h1 v-text="widget.title" @blur="update" contentEditable> Main Page Title</h1>

Any ideas

nhayder left a reply on Remove All Cache Files That Has Name 'page-'

@talinon i was able to remove the 3 cached files one by one, ...

I'm done, Thanx

nhayder started a new conversation Remove All Cache Files That Has Name 'page-'

Hi, i need to remove all cached files that has the name page- from page controller.

// something like this
Cache::forget('page-parts');

So my question is how to remove multiple cached file that has page- name on the cached files name

nhayder left a reply on Tailwindcss : Adding Custom Font Family From Google Font.

Tailwind doesn't do anything special to auto-import fonts or anything, so you need to import them the same way you would in a regular project, either by adding the Google stylesheet reference to the top of your HTML like this:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

...or by importing your fonts with @font-face declarations at the beginning of your CSS file:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
08 Jan
1 week ago

nhayder started a new conversation How To Load Component When User Click Element On The Page (tooltip Style)

Hi, i have watched Jeffries tooltip tutorials to make a tooltip from my app but i need to make some changes on top of what jeffry has explained is that lesson.

https://laracasts.com/series/learn-vue-2-step-by-step/episodes/44

i'm using tooltip.js

https://popper.js.org/tooltip-examples.html

what i'm trying to achieve is to use data attributes to trigger custom tooltip when user clicks on and element, Its something like this

    // this is the clickable element on the HTML
        <p>
          
            <span data-tooltip="tooltip">Click to load tooltip</span>

        </p>

After click? the but the tooltip data should come from a dedicated Vue component already available on my app.

This is the componenet

<template>

    // this is the data that should be loaded when user click the link above

    <div>
        
        <ul>
    
        <li>this is item 1</li>

        <li>this is item 2</li>

        <li>this is item 3</li>

    </ul>

    </div>

</template>

<script>

    import PoperTooltip from 'tooltip.js'

    export default {

        props : {

            name : {},

            placement : {default : 'bottom'},

        },

        mounted(){

            document.querySelectorAll(`[data-tooltip-name=${this.name}`).forEach(elem =>{

                new PoperTooltip (elem, {

                        placement : this.placement,

                        title: this.$refs.body.innerHTML,

                        html : true,

                });

            })
            
        }

    }
</script>


so my question is, how to make vue.js to load my component tooltip using tooltip.js and data attribute on the HTML element.

07 Jan
1 week ago

nhayder started a new conversation Tooltip.js To Load Component When User Click Element On The Page

Hi, i have watched Jeffries tooltip tutorials to make a tooltip from my app but i need to make some changes on top of what jeffry has explained is that lesson.

https://laracasts.com/series/learn-vue-2-step-by-step/episodes/44

i'm using tooltip.js

https://popper.js.org/tooltip-examples.html

what i'm trying to achieve is to use data attributes to trigger custom tooltip when user clicks on and element, Its something like this

    // this is the clickable element on the HTML
        <p>
          
            <span data-tooltip="tooltip">Click to load tooltip</span>

        </p>

After click? the but the tooltip data should come from a dedicated Vue component already available on my app.

This is the componenet

<template>

    // this is the data that should be loaded when user click the link above

    <div>
        
        <ul>
    
        <li>this is item 1</li>

        <li>this is item 2</li>

        <li>this is item 3</li>

    </ul>

    </div>

</template>

<script>

    import PoperTooltip from 'tooltip.js'

    export default {

        props : {

            name : {},

            placement : {default : 'bottom'},

        },

        mounted(){

            document.querySelectorAll(`[data-tooltip-name=${this.name}`).forEach(elem =>{

                new PoperTooltip (elem, {

                        placement : this.placement,

                        title: this.$refs.body.innerHTML,

                        html : true,

                });

            })
            
        }

    }
</script>


so my question is, how to make vue.js to load my component tooltip using tooltip.js and data attribute on the HTML element.

05 Jan
2 weeks ago

nhayder left a reply on Get All Comments On One Post?

You are most welcome :-)

02 Jan
2 weeks ago

nhayder left a reply on VUE - Which Color Picker Should I Use

@D9705996 - @d9705996 Im fully aware of that plugin, its swatches not picker and it has less options than what im looking for (choose customer color + alpha color and transparencies).

it look there is no good solution for this in vue.js the only option that i'm left with is is core JS.

but not sure what is the best package for that, TESTING A PACKAGES MIGHT TAKE A LOT OF TIME .

nhayder left a reply on Get All Comments On One Post?

@reinventingrich i'm not sure what your trying to do, but from what i understand from your post you need to get all comments on a certain post ( i'm i correct ??? ), assuming that you have a relationship on the Post model you can do something like this

$post = App\Posts::with('comments')->findOrFail($id);

the $id is you post id that you need to pass to this method.

nhayder left a reply on How To Add The Color Picker For Form Element

There is an issue with installing and setting-up this component, i cant say it's smoothly integrated with my APP, ...

So sure if i would recommend it to anybody, ...

At least that was my experience with it.

nhayder started a new conversation VUE - Which Color Picker Should I Use

Hi, i'm looking for a nice color picker for my app (vue or js ), as long as its has transparency controls.

Any recommendation ????

NOTE: i already know about this one http://xiaokaike.github.io/vue-color/

29 Dec
3 weeks ago

nhayder left a reply on Extremely Confused About Middleware: Redirect Based On Role

@webiondev123 your middle ware actually are doing nothing? you need to ad the logic for both admin + user

    public function handle($request, Closure $next)
    {

    // here check if the user is admin or user 
        return $next($request);
    }

27 Dec
3 weeks ago

nhayder left a reply on VUEX Returning Undefined Value On Main Component

@realrandyallen OMG this

return wBgStyle == style;

but its fixed now, and component is working just fine,

Thanx man

nhayder left a reply on VUEX Returning Undefined Value On Main Component

@realrandyallen i think i need to pass the widget data on the wBgStyle :class during looping the list of widgets something like this

wBgStyle(widget)

then i need to do

    wBgStyle(widget){

      var style = widget.bg_type;

        if(style == 'image'){

          return wBgStyle == style;
    
    // .......

        }

    }

But that is giving me new error

[Vue warn]: Error in render: "ReferenceError: wBgStyle is not defined"

not sure what to do with that ???

nhayder left a reply on VUEX Returning Undefined Value On Main Component

@realrandyallen i already tried that option and its not fixing the issues

nhayder started a new conversation VUEX Returning Undefined Value On Main Component

i'm receiving data from vuex store for (widgets + theme) that i need to render on the page,

<template>

  <div :class="background" :style="bgImage">

    <div :class="[ narrow, shadow, position]">
      
          <section v-for="(widget, index) in widgets" :key="widget.id" class="flex flex-col justify-center relative px-5" 

          :class="[

              widget.bg_color, 

              shadow,

              bgStyle,

              ]"

          >        
              <widget-config 

                  :widget="widget" 

                  :index="index"

              >
                    
              </widget-config>

              <div :class="[ 'container', widget.pt, widget.pb, 'mx-auto' ]">

                <component :is="widget.name" :widget="widget"></component>

              </div>

          </section>


    </div>

  </div>
          
</template>

<script>

import {mapState} from 'vuex'

export default {

  name: 'WidgetTemplate',

  data(){

      return{

          //
      }
  },

  mounted () {

    this.$store.dispatch('getPageInfo'); // return page widgets data from store

    this.$store.dispatch('getTheme'); // returns page theme data from store

  },

  computed:{

    ...mapState([

        'widgets', 'theme'

      ]),

    // checking page width
    narrow() {

      var narrow = this.theme.wide;

      if(narrow == true){

        return 'container';

      }

    },

    // checking page shadows
    shadow(){

      var shadowStatus = this.theme.shadowstatus;

      if(shadowStatus == true){

        return this.theme.shadow;

      }

    },

    // checking page position
    position(){

      var pagePosition = this.theme.alignment;

        if (pagePosition == 'center') {
          
          return 'mx-auto';

        } else if (pagePosition == 'left') {
          
          return 'left';

        } else {
          
          return 'right';

        }

    },

    background(){

      var bgStyle = this.theme.bg_style;

        if (bgStyle == 'color') {
          
          return this.theme.bg_color;

        }

    },

    bgImage(){

      var bgImage = this.theme.bg_style;

      var bgAnimation = this.theme.animation;

      var image = this.theme.bg_image;

        if (bgImage == 'image') {
        
          if(bgAnimation == 'fixed'){

            return 'background:url('+image+'); background-attachment: fixed';

          }else{

            return 'background:url('+image+'); background-attachment: scroll;';

          }

        }

    },

    bgStyle(){

      var bgType = this.widget.bg_style;

        if(bgType == 'image'){

          return bgStyle = bgType;

        }elseif(bgType == 'color'){

        // do somthing

    }else(bgType == 'gradient){

        // do something     

    }

    },
  
  },


}
</script>

As per the code above i'm looping through the collection of widgets and i named it widget (see above).

the issues im facing is how to access store data mounted function, For example the bgStyle() function is currently returning this

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

but the bg_style value is already imported from the store ( Widgets array above ), and it should be available to me in the bgStyle method.

I'm i doing something wrong? Why cant i get the proper value from the store in a mounted fuction.

Any ideas ????

21 Dec
4 weeks ago

nhayder left a reply on Tailwind Dynamic Gradient With Opacity

that will daintily wok :-) thanx

nhayder started a new conversation Tailwind Dynamic Gradient With Opacity

i'm using laravel with tailwind in my project and i was searching the website for proper way to make tailwind gradient with opacity option, did anybody made something similar???

what is the best way to tackle this issue?

20 Dec
1 month ago

nhayder left a reply on VUEX Controlling :class Outside Component

@REALRANDYALLEN - @realrandyallen will this be a reactive (2 way) action ????

nhayder started a new conversation VUEX Controlling :class Outside Component

i'm in a situation where i need to control the body class on the main blade file "bg_color" using vuex store, the data are pulled from DB using axios and things are going well but now i'm facing a problem where i need to dynamically change the bg_color according to vuex store updates.

<body :class="bg_color" class="font-light leading-normal">

    <div id="app">

        @yield('content')

    </div>  

</body>

The body element is stored outside vuex component element, and its not included in any component, its simply AS YOU EXPECT... its on blade template file.

so my question is there is any way so i can pass the bg_color variable from vuex to bind it with the body object on blade.

19 Dec
1 month ago

nhayder started a new conversation Vuex Not Returning Correct Class Name From DB

im using vuex to load widgets on customers page, my component is not returning proper class name from DB to replace bgColor on class property.

<template>

    <span>
    
      <section v-for="(widget, index) in widgets" :key="widget.id" class="flex flex-col justify-center relative px-5" 

      :class="[bgColor]"

      >        
          <widget-config :widget="widget" :index="index"></widget-config>

          <div :class="[ widget.wide, widget.pt, widget.pb, 'mx-auto' ]">
            
            <component :is="widget.name" :widget="widget"></component>

          </div>

      </section>

    </span>
          
</template>

<script>

import {mapState} from 'vuex'

export default {

  name: 'WidgetTemplate',

  data () {

      return {

          //

      }

    },

  mounted () {

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

  },

  computed:{

    ...mapState([

        'widgets',

      ]),

    bgColor() {

      return this.widgets.bg_color;

    }
  
  },

  methods:{

    //

  }

}
</script>

any ideas

14 Dec
1 month ago

nhayder left a reply on Multiple Values To Decide Current Element Class

@realrandyallen thank you for the replay, ...

The checker should get the data from vuex store which is already available on this component as widget ( as per my initial post above ), The widget.bg_type is the value i need to check the background function against.

so how to access the widget.bg_type value from the background mounted function.

can you advice please.

nhayder started a new conversation Multiple Values To Decide Current Element Class

i have options to make deferent backgrounds to current widget (color, Image, gradient or video), these settings should be determined dynamically. using vuex i was able to get the settings directly from the store like this

<section v-for="(widget, index) in widgets" :key="widget.id" class="flex flex-col justify-center relative px-5" 

// here where i need to check the widget settings inside the class value, something like this

    :class="[proper background value goes here]";

>        
    <widget-config :widget="widget" :index="index"></widget-config>

    <div :class="[ widget.wide, widget.pt, widget.pb, 'mx-auto' ]">
      
      <component :is="widget.name" :widget="widget"></component>

    </div>

</section>

the :class="" be checked before rendering the proper value, so basically i have 4 type of backgrounds as above so the code might look like this

      if(bgType == 'color'){

        return widget.bg_color; // widget.bg_color is pulled from vuex store

      }elseif(bgType == 'image'){

        // do somthing

      }elseif(bgType == 'gradient'){

        // do somthing

      }elseif(bgType == 'video'){

        // do somthing

      }

so my question is how to make this type of check using vue.js component

all the best

nhayder left a reply on Vuex And Multiple :class Values

@usaandi i guess i was wrong, the code did't work its returning the values as they are

<div class="widget.wide widget.pt widget.pb mx-auto">

i applied the code to a deferent page this is why i was confused.

its not working

nhayder left a reply on Vuex And Multiple :class Values

It worked thank you

12 Dec
1 month ago

nhayder started a new conversation Vuex And Multiple :class Values

i'm using vuex store to fitch data from db then passing data to component

// this is how im looping through the section element
<section v-for="(widget, index) in widgets" :key="widget.id" class="flex flex-col justify-center relative px-5" style="background: linear-gradient(rgba(52, 144, 220, 0),rgba(52, 144, 220, 1)),url('/storage/theme/background.jpg')">

    <widget-config :widget="widget" :index="index"></widget-config>

    <div :class="[ widget.wide, widget.pt, widget.pb, 'mx-auto' ]">

      <component :is="widget.name" :widget="widget"></component>

    </div>

</section>

the issues that i'm facing is in the :class element, laravel is able to display the first value only widget.wide

<div :class="[ widget.wide, widget.pt, widget.pb, 'mx-auto' ]">

all data are being passed to the component as shown above but not the :class part of the component.

can anyone see and issues with my code???

02 Dec
1 month ago

nhayder started a new conversation Mutating Multiple Value In One Single Function

i have tones of boolean data stored on DB as 1/0 i need to mutate these values using eloquent model mutation to change the values from 1/0 to true/false.

// this is my mutation function
    public function getParallaxAttribute($value)
    {
        if($value = 1){

            return true;
        }

        return false;
    }

mutation is working perfectly but i have almost than 20 values to mutate every time i call them from DB.

so my question is: Is there is any way to include multiple values to the mutation function above

19 Nov
2 months ago

nhayder left a reply on VUEX + Laravel -> Storing Boolean Value As True/false Instead 1/0

@primordial correct, i'm using MySql, i think mutators will definitely work, never thought of that actually.

Thanx man

nhayder started a new conversation VUEX + Laravel -> Storing Boolean Value As True/false Instead 1/0

Im using vuex together with laravel 5.6, normally i store boolean data as 1/0 in the DB but im trying to find a way to store the data as true/false so i will be able to bind data from vuex store like this

                  <div class="w-1/2 block text-right">
                        <input v-model="wide" type="checkbox" name="wide" id="wide"/>
                  </div>

                  <div class="w-1/2 block text-right">
                        <input v-model="full_screen" type="checkbox" name="full_screen" id="full_screen"/>
                  </div>

the wide + full_screen are streamed directly from vuex store.

now a user can change these value as he wish by clicking the checkbox, then i will be able to emit a mutation to the store.

currently im storing the data as 1/0 only and this is not getting proper binding for the checkbox. so i had to make a action value which i think ican skip if i can store the data as true/false directly on the database.

So my question is? how can i store the data on DB using laravel as true/false.

Any ideas

08 Nov
2 months ago

nhayder left a reply on Vuex Always Remove First Widget In My Widget List With Splice Function

It looks like i forgot to pass the index from the component before it hits the store

this.$store.dispatch('deleteWidget', index);

these small stuff makes me go mad sometimes.

Anyways this thread is done

nhayder left a reply on Vuex Always Remove First Widget In My Widget List With Splice Function

@cmdobueno tried your code but still not getting the correct result, im getting the correct index form the component

nhayder started a new conversation Vuex Always Remove First Widget In My List

with vue + vuex + laravel im populating widget list using axios from database, a user can delete a widget from his account as he wished, what i'm having now is that the delete button always deletes first entry of the list where is should removes what the user has selected.

this is my store.js

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

Vue.use(Vuex, axios);

export const store = new Vuex.Store({

    state:{

        widgets : [],
    },

    mutations: {

        SET_PAGE (state,pageInfo){

            state.widgets = pageInfo;

        },

        REMOVE_WIDGET: (state, index) => {

            state.widgets.splice(index, 1);

            Event.$emit('requestAlertSuccess');

        }

    },

    actions: {

        getPageInfo: function({commit}){

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

                    this.widgets = response.data;

                    let pageInfo = response.data;

                    commit('SET_PAGE', pageInfo)

                })

            .catch( error => {

                  Event.$emit('requestAlertDanger');

            })
        
        },

        deleteWidget (context){

            context.commit('REMOVE_WIDGET')

        }

    },
 })

from a component im populating a list of widgets with delete button on every widget set

<template>

    <span>

      <section v-for="(widget, index) in widgets" :key="widget.id" class="flex flex-col justify-around relative" style="background: linear-gradient(rgba(52, 144, 220, 0),rgba(52, 144, 220, 1)),url('/storage/theme/background.jpg')">

          <div class="absolute flex pin-l pin-t bg-teal">

            <a href="javascript:void(0)" class="no-underline focus:bg-red-dark hover:bg-red h-16 w-16 flex items-center justify-center text-white" @click="deletewidget(widget.id, widget.name, index)">

               <i class="far fa-trash-alt"></i>
            </a>

            <a href="javascript:void(0)" class="no-underline hover:bg-orange h-16 w-16 flex items-center justify-center text-white">
               <i class="fas fa-arrows-alt-v"></i>
            </a>

            <a href="javascript:void(0)" class="no-underline hover:bg-blue-dark h-16 w-16 flex items-center justify-center text-white">
               <i class="fas fa-cog"></i>
            </a>

          </div>


          <div class="container mx-auto px-5 pb-20 pt-20">

            <component :is="widget.name" :widget="widget"></component>

          </div>

      </section>

    </span>
          
</template>

<script>

import {mapState} from 'vuex'

export default {

  name: 'widgets',

  mounted () {

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

  },

  computed:{

    ...mapState([

        'widgets'

      ]),
  
  },

  methods:{

    deletewidget : function(id, name, index){

      swal({

        title: 'Are you sure?',

        text: 'You won\'t be able to revert this ( '+name+' )',

        type: 'warning',

        showCancelButton: true,

        cancelButtonColor: '#3085d6',

        confirmButtonColor: '#d33',

        confirmButtonText: 'Yes, delete it!'

      }).then((result) => {

        if (result.value) {

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

            .then( response => {

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

            })

            .catch( error => {

              Event.$emit('requestAlertDanger');

            })

        }

      })

    },

  }

}
</script>

im not sure why vuex always deletes the first entry ????

Any ideas

01 Nov
2 months ago

nhayder started a new conversation Vuex Multiple Widget Mouse Hover State

I'm trying to show green outline when mouse enters a page widget, the widgets are dynamically populated use vuex.

this is my store.js

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

 Vue.use(Vuex, axios);

 export const store = new Vuex.Store({

    state:{

        page : [],  
    },

    mutations: {

        SET_PAGE (state,pageInfo){

            state.page = pageInfo;

        },
    },

    actions: {

        getPageInfo: function({commit}){

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

                    this.page = response.data;

                    let pageInfo = response.data;

                    commit('SET_PAGE', pageInfo)

                })

            .catch( error => {

                  // this.alertDanger();

            })

        },
    },
 })

the pageInfo object contains list of widgets available on current page, this is how i display them on the page like this

<template>

    <span>

      <section v-for="(widget, index) in page.widgets" :key="widget.id" class="flex flex-col justify-around relative"

        :class="[

          mouseEntered

        ]"

        @mouseover="isOver" // shows green border when hovered

        @mouseout="isOut" // removes the green border when mouse away

       style="background: linear-gradient(rgba(52, 144, 220, 0),rgba(52, 144, 220, 1)),url('/storage/theme/background.jpg')">

          <div class="container mx-auto px-5 pb-20 pt-20">

            {{widget.name}}

          </div>

      </section>

    </span>
          
</template>

<script>

import {mapState} from 'vuex'

export default {

  name: 'pageWidgets',

  data () {

    return {

      mouseEntered:'', // When widget is selected

    }

  },

  mounted () {

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

  },

  computed:{

    ...mapState([

        'page'

      ]),
  
  },

  methods: {


    isOver : function(){

      this.mouseEntered = 'shadow-widget';

    },

    isOut : function(){

      this.mouseEntered = '';

    },

  }

}
</script>

after the page loads all page section i need to show green border around hovered section of the page, at the same time? the green border should be removed when the mouse leaves to another page section. using these on the code above

        @mouseover="isOver"

        @mouseout="isOut"

What i have currently is that the green outline is showing on all page sections on the page where it should outline the hovered section only.

any ideas how to fix this issue.

29 Oct
2 months ago

nhayder left a reply on Is Vuex Compatible With Laravel 5.6 ??

@wilk_randall thank you for the push, i will definitely use it then

nhayder started a new conversation Is Vuex Compatible With Laravel 5.6 ??

Hi, my app is getting seriously complicated and i started to lose trans of components data, ??

i thinking of using vuex together with laravel 5.6.

so my question is can i use vuex together with laravel 5.6??? is it recommended???

28 Oct
2 months ago

nhayder left a reply on Close Popover Panel When Click Outside

@sfz0311 i had to tweak the code to make work for me, but its working smoothly.

Thanx man:-) for the help

27 Oct
2 months ago

nhayder started a new conversation Close Popover Panel When Click Outside

i have a custom popup componant that appears when a user clicks on a button like this

<a href="javascript:void(0)" @click="togglePanel"> popup</a>

this is the popup window

        <div v-show="isOpen">

          <div class="overflow-y-auto panel-height p-3">
                  
            // here im showing a couple of inputs

          </div>

        </div>

in the component

<script>
    export default {

        data () {

            return {

                isOpen          :       false,
            }

          },
        
        methods : {

            togglePanel : function(){

                this.isOpen = !this.isOpen;

            },
        }

    }
</script>

My question is who to make the popup window close automatically when a use clicks outside the popup window.

24 Oct
2 months ago

nhayder left a reply on $emit() Function Is Not Working

@Yakagi Thank you, The code is working now and im able to control all modals in same way.

All the best