shaqaruden

Experience

52,950

0 Best Reply Awards

  • Member Since 2 Years Ago
  • 521 Lessons Completed
  • 1 Favorite

20th April, 2018

shaqaruden started a new conversation Update Parent Component • 5 months ago

I am trying to create a simple breadcrumb "system" in my Vuetify app. I know that the breadcrumbs are populate based on an array. So this is what I have so far.

I have created a global variable to store my array so all components have access to modify it.

Vue.prototype.$navigation = [ { title: 'Main Menu', to: 'MainMenu'} ]

on the created hook of my pages I am adding to the array and when before the component is destroyed I remove from the array

created: function () {
        this.addToNavigation()
    },
beforeDestroy: function () {
        this.removeFromNavigation()
    },
    methods: {
        addToNavigation: function () {
               this.$navigation.push({ title: 'Scan Asset', to: 'ScanAsset'})

            console.log(this.$navigation)
        },
        removeFromNavigation: function () {
           this.$navigation.pop()
        }
    },

then on my App.vue I am created the breadcrumbs

<v-content>
         <v-breadcrumbs>
            <v-icon slot="divider">forward</v-icon>
            <v-breadcrumbs-item v-for="breadcrumb in this.$navigation" :key="breadcrumb.title" :to="{ name: breadcrumb.to }">
            {{ breadcrumb.title }}
         </v-breadcrumbs-item>
      </v-breadcrumbs>
   </v-breadcrumbs>
   <router-view/>
</v-content>

My issue is my breadcrumb is not updating until the page is refreshed. Is there a better way to handle this? How do I get my breadcrumbs to update?

21st March, 2018

shaqaruden started a new conversation Use Mix With Vue Electron • 5 months ago

I am using the VueElectron vue template and would like to integrate tailwind into the project using the new tailwind plugin for Laravel mix

[https://github.com/SimulatedGREG/electron-vue](ElectronVue Template) [https://github.com/JeffreyWay/laravel-mix-tailwind](Laravel Mix Plugin)

I have installed both mix and the plugin, but not sure how to get them working in the project

14th February, 2018

shaqaruden started a new conversation Laravel + Forum • 7 months ago

I am building a personal video hosting platform based on laravel and I would like to offer a forum as a companion to this video hosting platform. I want user account for the video platform to also work with the forum.

What packages and forum software are available that I could use. I have looked into Flarum but it is no where near ready for prime time.

Any ideas?

5th February, 2018

shaqaruden left a reply on Method Being Called Before Mounted() Hook? • 7 months ago

Sorry really stupid dumb oversight

shaqaruden left a reply on Speeding Up Cache • 7 months ago

My issue was not with caching but with displaying the cached data. Rendering 1400+ records from cache into a grid of cards was killing the browser. I simply paginated the cached data into groups on 100 records, this displays almost instantly and I am able to search the entire collection of data as well, which is what I wanted.

26th January, 2018

shaqaruden left a reply on Method Being Called Before Mounted() Hook? • 7 months ago

When I console.log one of my variables in displayData() the console shows

[obj: Observer]

but returns the dataset when called from fetchData()

shaqaruden started a new conversation Method Being Called Before Mounted() Hook? • 7 months ago

I am trying to infinite scroll into my project and I have been having an issue with my variables being undefined. after some investigation I found out why.

I have 2 methods one methods fetches data from an API and another that displays the data. I am doing it this way so can search through all the data received from the api easily.

I called the fetchData method on mounted() and the displayData method from a Infinite Scroll Component [Vue Infinite Scroll] (https://github.com/ElemeFE/vue-infinite-scroll)

I added a console.log call to each method and the displayData methods displays it's log message first.

<template>
<div v-infinite-scroll="displayData" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
            <v-progress-linear v-bind:indeterminate="true"></v-progress-linear>
        </div>
</template>
mounted: function()  {
        this.busy = true
        this.fetchData()
        this.busy = false
    },
methods:  {
        fetchData: function() {
            axios.get('http://api.loc/api/associate').then(response => {
                this.associates = response.data.associates
            })
            .catch(e => {
                this.errors.push(e)
            })
        },
        displayData: function() {
            this.busy = true
            console.log(this.associates)
            this.busy = false;
        }
    }

19th January, 2018

shaqaruden started a new conversation Variables Not In Scope? • 8 months ago

I am working on a Vue Electron App and I have a few variables defined

data: () => ({
        associates: [],
        displayedAssociates: [],
        currentDisplayed : 0,
        loading: false
    })

when I try to console.log one of them in one of my method for [Vue Mugen Scoll() they return undefined?

displayData: () => {
        console.log(this.displayedAssociates)
            if (!this.displayedAssociates == []) {
                currentDisplayed = this.displayedAssociates
            }
            data = this.associates.slice(currentDisplayed, 20)
            this.displayedAssociates.concat(data)
            console.log(currentDisplayed)
        }

Here is all my code minus anything not needed

<template>
    <v-layout row wrap>
        <v-flex xs12 md4  v-for="associate in displayedAssociates" :key="associate.number">
            
        </v-flex>
        <mugen-scroll :handler="displayData" :should-handle="!loading">
              loading...
            </mugen-scroll>
    </v-layout>
</template>

<script>
import axios from 'axios';
import MugenScroll from 'vue-mugen-scroll'

export default {
    name: 'Associates',
    created: function()  {
        this.fetchData('http://api.loc/api/associate')
    },
    methods:  {
        fetchData: function(url) {
            this.loading = true
            axios.get(url).then(response => {
                this.associates = response.data.associates
            })
            .catch(e => {
                this.errors.push(e)
            })
            this.loading = false
        },
        displayData: () => {
            if (!this.displayedAssociates == []) {
                currentDisplayed = this.displayedAssociates
            }
            data = this.associates.slice(currentDisplayed, 20)
            this.displayedAssociates.concat(data)
            console.log(currentDisplayed)
        }
    },
    components: { MugenScroll },
    data: () => ({
        associates: [],
        displayedAssociates: [],
        currentDisplayed : 0,
        loading: false
    })
}
</script>

<style scoped>
</style>

shaqaruden left a reply on Using Vue-infinite-loading • 8 months ago

Not sure if you figured this out yet but take a look at this.

[https://github.com/egoist/vue-mugen-scroll] (Vue Mugen Scroll)

13th January, 2018

shaqaruden started a new conversation Speeding Up Cache • 8 months ago

I am currently caching data from my API with WebStorageCache Now it is still taking a second or two to assign the data in the cache to a variable on my Vue component. I understand that when loading the 1400+ record object from cache will take time.

My question is how could I speed this up?

##My Thoughts

I know I can paginate the data coming from my API which I do have but currently have it disable because I don not know how I should go about caching it in a logical way.

Would I create separate caching objects for each paginated object returned from the API? Could that all be searchable?

Would I append to 1 cache object? How would I keep track of what has already been cached without making an axios call?

shaqaruden left a reply on Vuetify | Browser Tab Hangs When Using SessionStorage • 8 months ago

I fixed the issue before I got to looking at your reply. I ended up pulling in WebStorageCache

Using this my app performs much better. It still is not where I would like it. I disabled pagination on the API while I worked on this because I was not sure how I would handle caching sections of data. ( Caching each paginated result in a separate cache? Append to the cache?)

Here is my working code using WebStorageCache.

import WebStorageCache from 'web-storage-cache'

....

renderData (url) {

        var cache = new WebStorageCache();

        if (!cache.get('people')) {
            axios.get(url).then(response => {
                cache.set('people', response.data.people, {exp : 120});
            })
            .catch(e => {
                this.errors.push(e)
            })
        }
        
        this.associates = cache.get('people');
      }

Even after caching the page takes a second or two to retrieve from localStorage which I would like to remedy.

shaqaruden started a new conversation Vuetify | Browser Tab Hangs When Using SessionStorage • 8 months ago

I am trying to cache data from an API. With this specific request the API is returning 1440+ records which comes to around 600kb of data. I have this request wrapped in an if statement checking whether the data has been cached.

From look at the network tab in dev tools I can see that the request complete getting a status code 200 and receiving 626KB and I can check under Application/Session Storage/localhost:8080 and see the cached data but the sites doesn't not display the data like it should. If I navigation away from that page and back the tab hangs and eventually displays blank elements where the data should be.

Here is my code that handles the Session Storage

if (!sessionStorage.people) {
              axios.get(url)
                .then(response => {
                    sessionStorage.people = response.data.people;
                })
                .catch(e => {
                    this.errors.push(e)
                })
          }

          this.people= sessionStorage.people

this.people is bound to a vue component with a v-for.

<v-flex v-for="person in people" xs12 sm6 lg3>

11th January, 2018

shaqaruden started a new conversation Axios | Automatic Caching? • 8 months ago

Does Axios cache automatically? I don't remember if Jeffrey ever mentioned this.

9th January, 2018

shaqaruden left a reply on Post Method Not Allowed? • 8 months ago

@bobbybouwmann I didn’t changed anything.

8th January, 2018

shaqaruden left a reply on Error: "Your Requirements Could Not Be Resolved To An Installable Set Of Packages." • 8 months ago

I had a similar issue with a linux fork of Laravel Valet (cpriego/valet-linux) for Linux and the solution for me was to simply install Symfony Process 3.4.3 explicitly with composer.

composer global require symfony/process:3.4.3

shaqaruden left a reply on Post Method Not Allowed? • 8 months ago

I filled out my form data again in Postman and this fixed my issue

23rd December, 2017

shaqaruden left a reply on Post Method Not Allowed? • 8 months ago

I don’t have the code on me but I did check that and there is a route for a post request to API/workcenter that calls the [email protected] method

22nd December, 2017

shaqaruden started a new conversation Post Method Not Allowed? • 8 months ago

I have created a resource controller using artisan and made a resource route group as well,

Route::resource('workcenter', 'WorkcenterController');

Using Postman I make a post request to /api/workcenter which should call the store() method on my controller but its calling the index() method instead. I commented my resource route and made a single route for the post method to the same URI and I get a

Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException

21st December, 2017

shaqaruden left a reply on API Route Model Binding | Exception Handling • 8 months ago

@burlresearch I got this working. My code is a lot cleaner now. Thank!

shaqaruden left a reply on API Route Model Binding | Exception Handling • 9 months ago

I will check the logs tomorrow but it seems to be an issue with brewing up the AssociateCo troller

20th December, 2017

shaqaruden left a reply on API Route Model Binding | Exception Handling • 9 months ago

@martinbean Thank you for the clarification.

@burlresearch I tried your method but when I am getting a Internal Error Code 500

shaqaruden left a reply on API Route Model Binding | Exception Handling • 9 months ago

@martinbean as I stated in one of my previous replies that I did have laravel returning json but it was not the response I wanted. I did not want the stack trace just a simple json response.

@burlresearch thanks! I will try this a little later today.

19th December, 2017

shaqaruden left a reply on API Route Model Binding | Exception Handling • 9 months ago

@Cronix I tried placing this code in my App\Exceptions\Handler.php under the render function

if ($exception instanceof NotFoundHttpException) {
            return Response::json('Error');
        }

but this does not work, is there a way i could get send this back to the controller to be handled?

I don't need to use Route Model Binding but I was thinking that I must be able to do this.

shaqaruden left a reply on API Route Model Binding | Exception Handling • 9 months ago

@burlresearch You see when an associate is not found it redirects to the 404 page. Now if I set the Accept and Content-Type Headers to application/json I then get a json response but it includes the stack trace and all i really want it

{
    "error": {
        "message": "Associate does not exist.",
        "status_code": 404
    }
}

shaqaruden left a reply on API Route Model Binding | Exception Handling • 9 months ago

This is what I am doing

public function show($assoc)    
    {
        
        $associate = Associate::find($assoc);
        
        if ( ! $associate) {
            return $this->respondNotFound('Associate does not exist');
        }
        
        return $this->respond([
            'associate' => $this->associateTransformer->transform($associate->toArray())
        ]);
        
    }

This is what I want to do

public function show(Associate $associate)    
    { 
        return $this->respond([
            'associate' => $this->associateTransformer->transform($associate->toArray())
        ]);
        
    }

and if an associate is not found

return $this->respondNotFound('Associate does not exist');

18th December, 2017

shaqaruden started a new conversation API Route Model Binding | Exception Handling • 9 months ago

How do I handle exceptions from Route Model Binding? I am building an API and I don't want an exception to be thrown when the record passed is not found I want to send a JSON response

15th December, 2017

shaqaruden left a reply on JSON Request Validation • 9 months ago

I am not doing authentication at the moment and yes I have the application/json header

14th December, 2017

shaqaruden started a new conversation JSON Request Validation • 9 months ago

I am using Postman to test my API.

When validating request data sent from Postman I get redirected to the home page if validation fails.

shaqaruden left a reply on JSON API | POST\PATCH Request • 9 months ago

???

shaqaruden left a reply on JSON API | POST\PATCH Request • 9 months ago

The function is being called but the json response is not being delivered

shaqaruden left a reply on Postman Patch Request • 9 months ago

The route is in API.php

shaqaruden left a reply on Postman Patch Request • 9 months ago

I know what to do for a website but I was just thinking if I specified the content type to be Json in postman a simple put or patch request would work.

13th December, 2017

shaqaruden started a new conversation Postman Patch Request • 9 months ago

Using Postman my application does not respond to a PATCH request. I have to send a POST request with the _method = PATCH field.

Why is this?

shaqaruden started a new conversation JSON API | POST\PATCH Request • 9 months ago

I am building a small JSON API and I am having issues with getting a JSON back from a PATCH request(POST Request with _method 'PATCH' field). The status code does not change to whatever i set it to and the there is no message or associate objects returned. This also applies to my POST

I am using a restful controller and following the practices shown in the Incremental API Course.

Here is the method that is called when an patch request is sent.

public function update($assoc, Request $request)
    {

        //Associate Stuff
        
        $this->respondUpdated('Associate successfully updated!', $associate);
    }

Here is the respondUpdated method

protected function respondUpdated($message, $associate) {
        return $this->setStatusCode(IlluminateResponse::HTTP_OK)->respond([
            'message' => $message,
            'associate' => $this->associateTransformer->transform($associate->toArray())
        ]);
    }
Edit Your Profile
Update

Want to change your profile photo? We pull from gravatar.com.