ziben69

ziben69

Member Since 10 Months Ago

Experience Points 3,320
Experience Level 1

1,680 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 0
Lessons
Completed
Best Reply Awards 0
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.

17 May
6 days ago

ziben69 left a reply on VUE.js | Reload Page On External Server After Update.

Hi, @sergiu17 I dont understand.

I have changed a few lines of code in the component and I would like to just refresh what I have on the page

ziben69 started a new conversation VUE.js | Reload Page On External Server After Update.

Hey guys, can you tell me how can I re-render content on page after update on external server?

Thanks so much.

26 Mar
1 month ago

ziben69 left a reply on Vue.JS | Display Different Photos In Modals.

Yup. After re-uploading project it started work... +1 from me to you for help! Thanks so much

ziben69 left a reply on Vue.JS | Display Different Photos In Modals.

I will try uploading full project again

ziben69 left a reply on Vue.JS | Display Different Photos In Modals.

I am loading the app.js file.

But it works locally, except that the older version (before changes) of the application works without any complaints on the server, I threw it yesterday. It's all about these changes today

ziben69 left a reply on Vue.JS | Display Different Photos In Modals.

Ok it works, but only on xampp server. On external server still 0 effect. Should I upload more files than only component?

ziben69 left a reply on Vue.JS | Display Different Photos In Modals.

it works because above I have something like that:

 <tr v-for="(about, index) in aboutsNew">
            <td>{{ about.id }}</td>
            <td v-if="about.title !== null">{{ about.title }}</td>
            <td v-else>-</td>
            <td v-if="about.description !== null">{{ about.description|truncate(20) }}</td>
            <td v-else>-</td>
            <td v-if="about.date !== null">{{ about.date }}</td>
            <td v-else>-</td>
            <td v-if="about.link !== null">
                <a :href=" about.link " target="_blank">Link</a>
    </td>   
            <td v-else>-</td>
            <td>{{ about.order }}</td>
            <td v-if="about.visible === 1">Tak</td>
            <td v-else>Nie</td>
            <td v-if="about.lang === 'pl'">Polski</td>
            <td v-else>Angielski</td>
            <td>
                <div v-for="(photo, index) in about.photos" class="text-center">
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal" :data-target="'#photoModal-' + about.id" style="width: 30px; height:30px; padding: 0.25rem 0.25rem;">
                        <i class="fa fa-picture-o" aria-hidden="true"></i>
    </button>
                    <!-- The Modal -->
                    <div class="modal fade" :id="'photoModal-' + about.id">
                        <div class="modal-dialog"> 
                            <div class="modal-content">
                                <!-- Modal Header -->
                                <div class="modal-header">
                                    <h4 class="modal-title">{{ about.title }}</h4>
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
    </div>
                                <!-- Modal body -->
                                <div class="modal-body">
                                    <div class="admin-thumbnail">
                                        <img class="img-responsive" :src="photo.path"  style="width:300px; height:auto;"/>
    </div>
    </div>
                                <!-- Modal footer -->
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-danger" data-dismiss="modal">Zamknij</button>
    </div>
    </div>
    </div>
    </div>
    </div>
    </td>

I uploaded the component from the ftp server again, I did it before and it worked, now isn't

ziben69 left a reply on Vue.JS | Display Different Photos In Modals.

Ah ok, it doesn't work.

I have always photoModal-0, in each record.

ziben69 left a reply on Vue.JS | Display Different Photos In Modals.

I checked how it works in xamppa and works. On the external server, I have been editing it all the time and isn't working. hmmm

ziben69 left a reply on Vue.JS | Display Different Photos In Modals.

My console effect:

<button type="button" data-toggle="modal" data-target="#photoModal" class="btn btn-outline-secondary btn-sm" style="width: 30px; height: 30px; padding: 0.25rem;"><i aria-hidden="true" class="fa fa-picture-o"></i></button>

Yes, I cleared cache. Still #photoModal here.

ziben69 left a reply on Vue.JS | Display Different Photos In Modals.

Still the same :/

<div v-for="(photo, index) in about.photos" class="text-center">
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal" :data-target="'#photoModal-' + index"><i class="fa fa-picture-o" aria-hidden="true"></i>
    </button>
                    <!-- The Modal -->
                    <div class="modal fade" :id="'photoModal-' + index">

ziben69 left a reply on Vue.JS | Display Different Photos In Modals.

I added:

<div v-for="(photo, index) in about.photos" class="text-center">
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="'#photoModal-' + index"><i class="fa fa-picture-o" aria-hidden="true"></i>
    </button>
                    <!-- The Modal -->
                    <div class="modal fade" :id="'photoModal-' + index">

but in effect I have the same...

ziben69 left a reply on Vue.JS | Display Different Photos In Modals.

<div v-for="(photo, index) in about.photos" class="text-center">
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="{{ about.id }}" style="width: 30px; height:30px; padding: 0.25rem 0.25rem;">
                        <i class="fa fa-picture-o" aria-hidden="true"></i>
    </button>
                    <!-- The Modal -->
                    <div class="modal fade" id="{{ about.id }}">

Changed, but still the same

ziben69 started a new conversation Vue.JS | Display Different Photos In Modals.

Hello guys,

I have a problem with displaying photos in vue component (bootstrap modals).

My component: (AboutTableDraggable):

<template>
...
<td>
    <div v-for="(photo, index) in about.photos" class="text-center">
        <button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#photoModal" style="width: 30px; height:30px; padding: 0.25rem 0.25rem;"><i class="fa fa-picture-o" aria-hidden="true"></i>
        </button>
<!-- The Modal -->
        <div class="modal fade" id="photoModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">{{ about.title }}</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                <div class="modal-body">
                    <div class="admin-thumbnail">
                        <img class="img-responsive" :src="photo.path"  style="width:300px; height:auto;"/>
                    </div>
                </div>
<!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Zamknij</button>
            </div>
        </div>
    </div>
</div>
</div>
</td>
...
</template>

in Photo model I have:

protected $appends = ['path'];

    public function getPathAttribute()
    {
        return asset('storage/app/'.$this->filename);
    }

the problem is that it displays one and the same image from the first record under each modal's rekord. How to make it display the right photo for the record?

Details: I have blade view with draggable table component. Inside the table I have data, and one specific column with photos. In this column is a button that opens the modal. In the modal should be photos suitable for a given record. For now, under the action of each button, she displays me the modal with the same photo (assigned to the first record in the table). I don't have such a problem in pure Laravel, here it is. Please help. Thanks!

ziben69 left a reply on Npm Run Watch Command Stuck

I have one more problem with Vue, but I will write for moment new subject :P

ziben69 left a reply on Npm Run Watch Command Stuck

Oh yeah, Laravel Mix - Build successful :)

ziben69 left a reply on Npm Run Watch Command Stuck

I found error in one of vue components. After entering the command npm run production, it showed me the error of a particular component. Somewhere, I have a syntax error. I have to think where the error is. The empty component compiles without a problem, i.e. the error is in the component. I think I can deal with it, if not I hope I can count on you. Thank you

ziben69 left a reply on Npm Run Watch Command Stuck

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18.0",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.2.0",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.8",
        "vuedraggable": "^2.19.1"
    },
    "dependencies": {
        "postcss-loader": "^3.0.0",
        "raw-loader": "^0.5.1"
    }
}

ziben69 left a reply on Npm Run Watch Command Stuck

@DIEGOAURINO - Ok, let's try :)

ziben69 left a reply on Npm Run Watch Command Stuck

@DIEGOAURINO - Hey Diego, I use windows 10. So how can I install all modules again, I don't remember names of all modules :D

C:\xampp\htdocs\photography>npm run watch --verbose
npm info it worked if it ends with ok
npm verb cli [ 'C:\Program Files\nodejs\node.exe',
npm verb cli   'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
npm verb cli   'run',
npm verb cli   'watch',
npm verb cli   '--verbose' ]
npm info using [email protected]
npm info using [email protected]
npm verb run-script [ 'prewatch', 'watch', 'postwatch' ]
npm info lifecycle @~prewatch: @
npm info lifecycle @~watch: @

> @ watch C:\xampp\htdocs\photography
> npm run development -- --watch

npm info it worked if it ends with ok
npm verb cli [ 'C:\Program Files\nodejs\node.exe',
npm verb cli   'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
npm verb cli   'prefix',
npm verb cli   '-g' ]
npm info using [email protected]
npm info using [email protected]
npm verb exit [ 0, true ]
npm info ok
npm info it worked if it ends with ok
npm verb cli [ 'C:\Program Files\nodejs\node.exe',
npm verb cli   'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
npm verb cli   'run',
npm verb cli   'development',
npm verb cli   '--',
npm verb cli   '--watch' ]
npm info using [email protected]
npm info using [email protected]
npm verb run-script [ 'predevelopment', 'development', 'postdevelopment' ]
npm info lifecycle @~predevelopment: @
npm info lifecycle @~development: @

> @ development C:\xampp\htdocs\photography
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"

 10% building 1/1 modules 0 active
webpack is watching the files…

 14% building 34/52 modules 18 active ...able.vue?vue&type=template&id=17a64db7&

ziben69 left a reply on Npm Run Watch Command Stuck

Hey Diego, I use windows 10. So how can I install all modules again, I don't remember names of all modules :D

C:\xampp\htdocs\photography>npm run watch --verbose
npm info it worked if it ends with ok
npm verb cli [ 'C:\Program Files\nodejs\node.exe',
npm verb cli   'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
npm verb cli   'run',
npm verb cli   'watch',
npm verb cli   '--verbose' ]
npm info using [email protected]
npm info using [email protected]
npm verb run-script [ 'prewatch', 'watch', 'postwatch' ]
npm info lifecycle @~prewatch: @
npm info lifecycle @~watch: @

> @ watch C:\xampp\htdocs\photography
> npm run development -- --watch

npm info it worked if it ends with ok
npm verb cli [ 'C:\Program Files\nodejs\node.exe',
npm verb cli   'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
npm verb cli   'prefix',
npm verb cli   '-g' ]
npm info using [email protected]
npm info using [email protected]
npm verb exit [ 0, true ]
npm info ok
npm info it worked if it ends with ok
npm verb cli [ 'C:\Program Files\nodejs\node.exe',
npm verb cli   'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
npm verb cli   'run',
npm verb cli   'development',
npm verb cli   '--',
npm verb cli   '--watch' ]
npm info using [email protected]
npm info using [email protected]
npm verb run-script [ 'predevelopment', 'development', 'postdevelopment' ]
npm info lifecycle @~predevelopment: @
npm info lifecycle @~development: @

> @ development C:\xampp\htdocs\photography
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"

 10% building 1/1 modules 0 active
webpack is watching the files…

 14% building 34/52 modules 18 active ...able.vue?vue&type=template&id=17a64db7&

ziben69 started a new conversation Npm Run Watch Command Stuck

Hello guys, I have big problem with npm run watch command

When I approve the command, it only goes to a certain point and stands:

 14% building 37/53 modules 16 active ...able.vue?vue&type=template&id=1e5566b8&

I've tried already to run

npm run development

command but still the same. Can you help me?

Thanks

20 Mar
2 months ago

ziben69 started a new conversation VUE.js | Redirecting To Outside Website

Hello guys, how can I redirect in Vue to outside website. I have something like this:

<a v-bind:href=" business.link " target="_blank">test</a>

but it gives me result:

http://localhost/business/www.example.com

I need only

http://www.example.com

Thanks so much!

19 Mar
2 months ago

ziben69 started a new conversation VUE.js | Limit Of Displayed Text | Filter

Hello guys, I need to display only few characters from DB, and I filter like this:

<td>{{ business.description|truncate(20) }}</td>

...
        filters: {
            truncate: function(value) {
                if (value.length > 20) {
                    value = value.substring(0, 17) + '...';
                }
                return value
            }
        },
...

And I have got error:

[Vue warn]: Error in render: "TypeError: Cannot read property 'length' of null".

How can I repair it? Thanks.

ziben69 started a new conversation VUE.js + Laravel | Display Videos | Foreach Loop

Hello guys, I have problem with displaying videos.

I have something like this.

Model:

class Video extends Model
{
    protected $fillable = [
        'filename',
        'business_id',
    ];
    protected $appends = ['path'];

    public function getPathAttribute()
    {
        return asset('storage/'.$this->filename);
    }
    public $timestamps = false;

    public function business()
    {
        return $this->belongsTo(Business::class, 'business_id');
    }

I will say that adding video to the database works. I have a sample video in the database. So uploading works. Hmm...

Here is part of vue.js file:

            <td>
                <div v-for="(photo, index) in business.photos">
                    <div class="admin-thumbnail">
                        <img class="img-responsive" :src="photo.path"  style="width:30px; height:auto;"/>
    </div>
    </div>
    </td>
            <td>
                <div v-for="(video, index) in business.videos">
                    test
                    <div class="admin-thumbnail">
                        <video width="320" height="240" controls>  
                            <source :src="video.path" type="video/mp4"> 
    </video>
    </div>
    </div>

Photos are displayed correctly, and the video doesn't, even the error in the console regarding the photos doesn't pop up.

It seems to me that it doesn't enter the loop at all

  <div v-for="(video, index) in business.videos">

Here is my function from controller:

 public function clist(BusinessRepository $busRepo)
    {
        $businesses = Business::orderBy('order')->get();
        $businessesVisible = $businesses->filter(function ($business, $key) {
            return $business->visible;
        })->values();
        $businessesNotVisible = $businesses->filter(function ($business, $key) {
            return ! $business->visible;
        })->values();
        return view('pages.business.list')->with([
            'businesses' => $businesses,
            'businessesVisible' => $businessesVisible,
            'businessesNotVisible' => $businessesNotVisible,
        ]);
    }

Photos and videos are combined in a one-to-many relationship with the business table. Photos are displayed, Video isn't. What can I do?

15 Mar
2 months ago

ziben69 left a reply on Vue.js | Get Data From CKeditor And Saving It To The Database

but how to pass data from input to "firstName" in axios

14 Mar
2 months ago

ziben69 started a new conversation Vue.js | Get Data From CKeditor And Saving It To The Database

Hello guys, Im looking for help with getting data from CKEditor.

I had 2 versions, and only 1 works (clear Laravel):

Controller (function store):

 public function store(Request $request)
    {
        $business = Business::create($request->all());
        if($request->has('photos')) {
            foreach ($request->photos as $photo) {
                $filename = $photo->store('public/photos');
                Photo::create([
                    'business_id' => $business->id,
                    'filename' => $filename
                ]);
            }
        }
        return redirect()->action('[email protected]');
    }

This method works for (clear Laravel):

<textarea class="form-control" rows="5" name="description" id="description"></textarea>

But I would like it to work from the vue.js level In component I have something like that (with Vue.JS component):

<template>
     <vue-ckeditor type="classic" v-model="editorData" :editors="editors"></vue-ckeditor>
</template>

<script>
    import VueCkeditor from 'vue-ckeditor5'

    export default {
        components: {
            'vue-ckeditor': VueCkeditor.component
        },
        data(){
            return {
                editors: {
                    classic: ClassicEditor
                },
                editorData: '<p>Content of the editor.</p>',
            }
        },
    }
</script>

and calling the component in the view:

<vue-ck name="description" id="description"></vue-ck>

it isn't work. Can you help me with transferring values ​​from the editor to the database? So much thanks.

13 Mar
2 months ago

ziben69 left a reply on Vue.js | Ckeditor Integrate With Vue.js

@NORBERTHO - Yes:


ckeditor.js:5 ckeditor-version-collision: The global CKEDITOR_VERSION constant has already been set. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-version-collision
 {collidingVersion: "12.0.0", version: "11.2.0"}
error @ ckeditor.js:5
(anonymous) @ ckeditor.js:5
(anonymous) @ ckeditor.js:5
n @ ckeditor.js:5
(anonymous) @ ckeditor.js:5
n @ ckeditor.js:5
(anonymous) @ ckeditor.js:5
(anonymous) @ ckeditor.js:5
(anonymous) @ ckeditor.js:5
(anonymous) @ ckeditor.js:5


app.js:40212 [Vue warn]: Property or method "value1" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)

ziben69 left a reply on Vue.js | Ckeditor Integrate With Vue.js


ckeditor.js:5 ckeditor-version-collision: The global CKEDITOR_VERSION constant has already been set. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-version-collision
 {collidingVersion: "12.0.0", version: "11.2.0"}
error @ ckeditor.js:5
(anonymous) @ ckeditor.js:5
(anonymous) @ ckeditor.js:5
n @ ckeditor.js:5
(anonymous) @ ckeditor.js:5
n @ ckeditor.js:5
(anonymous) @ ckeditor.js:5
(anonymous) @ ckeditor.js:5
(anonymous) @ ckeditor.js:5
(anonymous) @ ckeditor.js:5


app.js:40212 [Vue warn]: Property or method "value1" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)
12 Mar
2 months ago

ziben69 started a new conversation Vue.js | Ckeditor Integrate With Vue.js

Hello guys, I am trying to upload ckeditor to my project, but for 7 hours I try and it does not go away. I searched google, installed from 30 packages (npm), I did with tutorials and slowly give up. Please help, I need to configure wysiwyg editor globally for all views that contain id = "description".

I have something like that: component CKeditor.vue

<template>

</template>

<script>
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
    import VueCkeditor from 'vue-ckeditor5'

    export default {
        components: {
            'vue-ckeditor': VueCkeditor.component
        },
        data(){
            return {
                value1: 'hello',
                value2: 'world',
                editors: {
                    classic: ClassicEditor
                }
            }
        },
        template: 
        `<vue-ckeditor type="classic" v-model="value1" :editors="editors"></vue-ckeditor>`
    }
</script>

View create.blade.php:

<ckeditor type="classic" v-model="value1" class="form-control" rows="5" name="description"
                                      id="description" placeholder="Description" maxlength="3000"></ckeditor>

app.js:

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.$http = axios

require('./bootstrap');

Vue.component('ckeditor', require('./components/CKeditor.vue').default);

window.Vue = require('vue');
window.onload = function () {
    const app = new Vue({
        el: '#app'
    });
}

the works were on the tutorial from https://github.com/igorxut/vue-ckeditor5

please help me run this wysiwyg editor. So much thanks... :*

ziben69 left a reply on VUE.js | Display Photos From Storage

@EDOC - Yeah I have public storage, but still the same error - after changes. Hmm... When I upload project on web server I see photos, but in localhost xampp no.

ziben69 left a reply on VUE.js | Display Photos From Storage

Okey thanks for help I will try do it :)

ziben69 left a reply on VUE.js | Display Photos From Storage

@EDOC - ok I recompiled and now I have something like that:

GET http://localhost/storage/app/public/photos/E6Zx5QHJHRrlXikBQbRislhr2Q2y1eiDLAGpOVAa.jpeg 404 (Not Found)

ziben69 left a reply on VUE.js | Display Photos From Storage

@EDOC - Sure:

<template>
<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Nagłówek</th>
            <th scope="col">Opis</th>
            <th scope="col">Data dodania</th>
            <th scope="col">Pozycja</th>
            <th scope="col">Widoczność</th>
            <th scope="col">Język</th>
            <th scope="col">Obrazy</th>
            <th scope="col">Operacje</th>
    </tr>
    </thead>
    <draggable :list="businessesNew" :options="{animation:200, handle:'.my-handle'}" :element="'tbody'" @change="update">
        <tr v-for="(business, index) in businessesNew">
            <th scope="row">{{ business.id }}</th>
            <td>{{ business.title }}</td>
            <td>{{ business.description }}</td>
            <td>{{ business.created_at }}</td>
            <td>{{ business.order }}</td>
            <td>{{ business.visiblity }}</td>
            <td>{{ business.lang }}</td>
            <td>
                <div v-for="(photo, index) in business.photos">
                    <div class="admin-thumbnail">
//HERE
                        <img class="img-responsive" :src="'photo.path"  style="width:30px; height:auto;"/>
    </div>
    </div>
    </td>
            <td><a :href="'edit/' + business.id" class="btn btn-primary btn-sm"><i class="fa fa-pencil" aria-hidden="true"></i></a>
                <a :href="'delete/' + business.id"
                   onClick="return confirm('Czy na pewno usunąć?')" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i></a>
                <a class="btn btn-dark btn-sm" style="cursor:move;"><i class="fa fa-arrows my-handle" aria-hidden="true" style="color:#fff;"></i></a>
    </td>
    </tr>

    </draggable>
    </table>
</template>

<script>
    import draggable from 'vuedraggable'

    export default {
        components: {
            draggable
        },

        props: ['businesses'],
        
        data(){
          return {
              businessesNew: this.businesses,
          }  
        },
        
        methods: {
          update(){
              this.businessesNew.map((businesses, index) => {
                  businesses.order = index + 1;
              })
              
              axios.put('/business/updateAll', {
                  businesses: this.businessesNew
              }).then((response) =>{
                  //success message
              })
          }  
        },
        
        mounted() {
        console.log('Component mounted.')
    }
    }
</script>

ziben69 started a new conversation VUE.js | Display Photos From Storage

Hello guys,

how can I correctly display photos from storage. In Laravel I had something like that:

        @foreach(($business->photos) as $photo)
        <div class="admin-thumbnail">
        <img class="img-responsive" src="{{ url('storage/app/'.$photo->filename) }}"  style="width:30px;            height:auto;"/>
        </div>
        @endforeach

and now I'm trying to do the same in Vue:

<div v-for="(photo, index) in business.photos">
    <div class="admin-thumbnail">
        <img class="img-responsive" :src="'storage/app/' + photo.filename"  style="width:30px; height:auto;"/>
     </div>
 </div>

but I get error in console:

Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost/business/'storage/app/'%20+%20photo.filename

Thanks so much!

11 Mar
2 months ago

ziben69 left a reply on Truncate Table With Foreign Key

@STEREOH - That's work! Yeah time to analyze what you wrote.

<3 Thank you and everyone for help!

ziben69 left a reply on Truncate Table With Foreign Key

But tell me how we can update photo, now we are still deleting it

ziben69 left a reply on Truncate Table With Foreign Key

@GORAKH - It deleting my photos from DB

ziben69 left a reply on Truncate Table With Foreign Key

@STEREOH - I added in migration:

    public function up()
    {
        Schema::table('photos', function(Blueprint $table){
            $table->integer('business_id')->unsigned()->change()->nullable();
            $table->foreign('business_id','photos_business_id_foreign')->references('id')->on('businesses')->onDelete('set null');
        });
    }

and back with controller function updateAll to:

    public function updateAll(Request $request)
    {
        Business::truncate();

        foreach($request->businesses as $business){
            Business::create([
                'id' => $business['id'],
                'title' => $business['title'],
                'description' => $business['description'],
                'order' => $business['order'],
                'visiblity' => $business['visiblity'],
                'lang' => $business['lang'],
            ]);
        }
        return response('Update Successful.',200);
    }

and again I have error:

"message": "SQLSTATE[42000]: Syntax error or access violation: 1701 Cannot truncate a table referenced in a foreign key constraint (`photography`.`photos`, CONSTRAINT `photos_business_id_foreign` FOREIGN KEY (`business_id`) REFERENCES `photography`.`businesses` (`id`)) (SQL: truncate `businesses`)",

ziben69 left a reply on Truncate Table With Foreign Key

@STEREOH - The ID should remain unchanged. However, only the order column should be changed, but I don't know why it doesn't work.

ziben69 left a reply on Truncate Table With Foreign Key

@STEREOH - I need to keep photos and change only their business_id

ziben69 left a reply on Truncate Table With Foreign Key

@MVD - "message": "Non-static method Illuminate\Database\Eloquent\Model::update() should not be called statically",

ziben69 left a reply on Truncate Table With Foreign Key

@MUSHOOD - Thanks, but I can't delete these photos. I need to change the business_id column in the Photo table. Maybe I can do something like that?

ziben69 started a new conversation Truncate Table With Foreign Key

Hello guys, I have problem with overwriting the table, because I combine it with another using a foreign key.

I am trying to do draggable table, and when I drag row I get error 500 in my console:

"message": "SQLSTATE[42000]: Syntax error or access violation: 1701 Cannot truncate a table referenced in a foreign key constraint (`photography`.`photos`, CONSTRAINT `photos_business_id_foreign` FOREIGN KEY (`business_id`) REFERENCES `photography`.`businesses` (`id`)) (SQL: truncate `businesses`)",

I have two tables - photos, and business. In Photo model it looks:

class Photo extends Model
{
protected $fillable = [
        'filename',
        'business_id',
    ];
public function business()
    {
        return $this->belongsTo(Business::class, 'business_id');
    }
}

In Business model:

class Business extends Model
{
    protected $fillable = [
        'title',
        'description',
        'order',
        'visiblity',
        'lang'
    ];

    public function photos()
    {
        return $this->hasMany(Photo::class); 
    }
}

Its all ok, but I need help with BusinessController function:

    public function updateAll(Request $request)
    {
        Business::truncate();

        foreach($request->businesses as $business){
            Business::create([
                'id' => $business['id'],
                'title' => $business['title'],
                'description' => $business['description'],
                'order' => $business['order'],
                'visiblity' => $business['visiblity'],
                'lang' => $business['lang'],
            ]);
        }
        return response('Update Successful.',200);
    }

Here is foreign key migration fragment:

...
public function up()
    {
        Schema::table('photos', function(Blueprint $table){
            $table->integer('business_id')->unsigned()->change();
            $table->foreign('business_id','photos_business_id_foreign')->references('id')->on('businesses');
        });
    }
...

How can I handle photos? I need update business_id, but don't know how... So much thanks!

10 Mar
2 months ago

ziben69 started a new conversation Foreach In Foreach | VUE.js

Hello guys,

how can I make the same loop as:

@foreach($items as $item)
    @foreach(($item->photos) as $photo)
    @foreach
@endforeach

it will be something like that?

<div v-for="(business, index) in businesses">
<div v-for="???">
</div>
</div>

Thanks for help