Nuxt•2y ago

How can I do this after initialization?

 <script setup>

const client = useSupabaseClient()

const { data, error } = await client.from('weeks').select('*').eq('reports', reportId)
if (error) {
    console.log('error', error)
}

const reportId = data.reports

</script>

 <script setup>

const client = useSupabaseClient()

const { data, error } = await client.from('weeks').select('*').eq('reports', reportId)
if (error) {
    console.log('error', error)
}

const reportId = data.reports

</script>

160 Replies

RomiOP•2y ago

for context: I have a report which has many weeks. So I want to now only show the weeks that belong to the report that is open. /report/id

🇨🇭 Marko Bolliger <cannap>•2y ago

is this a supabase thing? is this a official package from suapabase for nuxt? or what and what is reportId ? because you mayke first that request and then set the reportId?

Unknown User•2y ago

Message Not Public

🇨🇭 Marko Bolliger <cannap>•2y ago

ah yea i trought it was an existing bug which he reported some weeks ago omg xD

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

@🇨🇭 Marko Bolliger <cannap> @Sr. Full Stack Dev yes so I am using supabase nuxt package. no reportId is what I created thinking it would do something xD. I think the code you send should work so I will try that. Thank you 🙂 what should the file be called, is it [[id]].vue as currently I just have the code in index which I need to move as the code I mentioned above is a component

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

yes got it thanks 🙂 Makes a lot more sense now. 1 other question not sure you know, supabase created date comes back with a really long date is their anyway to format that?

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

thanks thats perfect

RomiOP•2y ago

also the index.vue inside the [id], this slug should be /reports/[id] right? as currently getting error when I turned the [id] into a folder from [id].vue so not sure if I've done it right

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

hmm ok weird im getting

RomiOP•2y ago

since i updated it

 
<script setup>

const client = useSupabaseClient()

// get all reports with name of driver
const { data } = useAsyncData('reports', async () => {
    const { data, error } = await client
        .from('reports')
        .select('id, driver (name, contract_hours ),  created_at')

    if (error) {
        console.log(error)
    }
    return data
})

console.log(data);

</script>

 
<script setup>

const client = useSupabaseClient()

// get all reports with name of driver
const { data } = useAsyncData('reports', async () => {
    const { data, error } = await client
        .from('reports')
        .select('id, driver (name, contract_hours ),  created_at')

    if (error) {
        console.log(error)
    }
    return data
})

console.log(data);

</script>

thats my index which is inside of [id]

🇨🇭 Marko Bolliger <cannap>•2y ago

when you on window there is a problem with nuxt server restart edge version of nuxt has included a fix for it

RomiOP•2y ago

windows ?

🇨🇭 Marko Bolliger <cannap>•2y ago

the os xD

RomiOP•2y ago

you put widow so was not sure xD

🇨🇭 Marko Bolliger <cannap>•2y ago

i am not 10% sure its only on windows

RomiOP•2y ago

i'm on mac though

🇨🇭 Marko Bolliger <cannap>•2y ago

can you show the payload you send

RomiOP•2y ago

this?

🇨🇭 Marko Bolliger <cannap>•2y ago

.select('id, driver (name, contract_hours ), created_at') what is name

RomiOP•2y ago

name is driver.name that fetches from driver table

🇨🇭 Marko Bolliger <cannap>•2y ago

.select('id, driver (name, contract_hours ), created_at') i cannot see where you a name as parameter there is nothing script setup> const client = useSupabaseClient() // get all reports with name of driver const { data } = useAsyncData('reports', async () => { const { data, error } = await client .from('reports') .select('id, driver (name, contract_hours ), created_at') if (error) { console.log(error) } return data }) console.log(data); </script> look where is name variable i cannot see oor contract_hourse did you post the whole code this stuff is missing nvm sry i see '' its a string but still dont understand it supabase is right but they still miss types like trcp as example are you sure the db is in sync

RomiOP•2y ago

so where I have

         .select('id, driver (name, contract_hours ),  created_at')

         .select('id, driver (name, contract_hours ),  created_at')

does driver (name, contract_hours) not get the name and contract_hours from the db? as it was previously\ I think so, how do i check

🇨🇭 Marko Bolliger <cannap>•2y ago

i dont know maybe you can add a debug log from the db so you see each query add i mean enable

RomiOP•2y ago

so when I remove name & contract hours it works but without that data ofc which is strange as this is how I had it before

🇨🇭 Marko Bolliger <cannap>•2y ago

maybe db is not sync can you make a fullreset on the db? i know this is not the way to go do you use migrations?

RomiOP•2y ago

nope Restarted still same :9

🇨🇭 Marko Bolliger <cannap>•2y ago

which db are you using mysql postgres mongo? what are you using to call the db i forgot

RomiOP•2y ago

I'm using supabase, but its postgres

🇨🇭 Marko Bolliger <cannap>•2y ago

i also use supabase with prisma

RomiOP•2y ago

I'm just using nuxt package with supabase

🇨🇭 Marko Bolliger <cannap>•2y ago

maybe an relation faild i had this today

RomiOP•2y ago

what does that mean sorry

🇨🇭 Marko Bolliger <cannap>•2y ago

do you have an relation where you try to add something i had this problem today

RomiOP•2y ago

oh no thats not it

🇨🇭 Marko Bolliger <cannap>•2y ago

an now you made select

RomiOP•2y ago

well I don't think as

🇨🇭 Marko Bolliger <cannap>•2y ago

are you german?

RomiOP•2y ago

when I console.log it I see all the data

RomiOP•2y ago

nope

🇨🇭 Marko Bolliger <cannap>•2y ago

did you restart nuxt? xD

RomiOP•2y ago

yep tried that lol

🇨🇭 Marko Bolliger <cannap>•2y ago

also macbook or pc? 😄 no jk

RomiOP•2y ago

😅

🇨🇭 Marko Bolliger <cannap>•2y ago

hmm wtf do you have a repo

RomiOP•2y ago

its strange as name is there so driver.name should work not but I can upload it

🇨🇭 Marko Bolliger <cannap>•2y ago

do it i will have look but i cannot promise do you use ts? go with trpc when its a single one and you dont have to share the server

RomiOP•2y ago

not yet as trying to learn vue first xD

🇨🇭 Marko Bolliger <cannap>•2y ago

you get autocompletion in the use case vue is easy 😄 i mean there are also complex stuff or performance thing you have to aware of but simpler as in other frameworks @Sr. Full Stack Dev made whole windows in vue xD

RomiOP•2y ago

I'm currently a wordpress dev so all this is quite new for me. I am currently building a site with Storyblok + nuxt and trying to create this application to learn more about apis and creating a web app wow

🇨🇭 Marko Bolliger <cannap>•2y ago

no its not like the real windows he just made the ui

RomiOP•2y ago

lol

🇨🇭 Marko Bolliger <cannap>•2y ago

but he will not opensource it for now 😄 i forgot the demo link

RomiOP•2y ago

here is the link https://github.com/RomiSinghio/Savari-Payroll

GitHub

GitHub - RomiSinghio/Savari-Payroll

Contribute to RomiSinghio/Savari-Payroll development by creating an account on GitHub.

🇨🇭 Marko Bolliger <cannap>•2y ago

where is t erros coming i will not setup a db right now

RomiOP•2y ago

its on /reports/4

🇨🇭 Marko Bolliger <cannap>•2y ago

i have no idea i also dont know what client is+ the sql query should only happen on sever

Unknown User•2y ago

Message Not Public

🇨🇭 Marko Bolliger <cannap>•2y ago

@Romi i think you make sql queries on the client xD

🇨🇭 Marko Bolliger <cannap>•2y ago

you have very much todo xD

Unknown User•2y ago

Message Not Public

🇨🇭 Marko Bolliger <cannap>•2y ago

the colors are not correct

Unknown User•2y ago

Message Not Public

🇨🇭 Marko Bolliger <cannap>•2y ago

dark i never installed any other things custom themes or what ever xD

Unknown User•2y ago

Message Not Public

🇨🇭 Marko Bolliger <cannap>•2y ago

OS: Windows 10 10.0.22621 CPU: (6) x64 Intel(R) Core(TM) i5-8600K CPU @ 3.60GHz

🇨🇭 Marko Bolliger <cannap>•2y ago

https://github.com/danielroe/nuxt-vitest/issues/70

GitHub

devtools document is not defined · Issue #70 · danielroe/nuxt-vite...

no idea why this happens normal tests are running :D thanks for this module  recipes  npx envinfo --system --binaries --browser --npmPackages System: OS: Windows 10 10.0.22621 CPU: (6) x64 Intel(...

🇨🇭 Marko Bolliger <cannap>•2y ago

maybe i changed i am not sure can you not get the current one xD i forgot mine looks better as the dark one i have no idea

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

Wow that looks so cool Oh, have I misunderstood how setup works I thought that runs it on the server ?

🇨🇭 Marko Bolliger <cannap>•2y ago

wait i am not sure

RomiOP•2y ago

😂

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

Yeah that’s what I thought But why am I getting this error xD

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

This 😭

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

Sure , I’m not home atm but will try that. I did test by removing .name

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

And it outputted an array of the data For that driver

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

Ok not problem that would be great

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

This what happens when I console.log

RomiOP•2y ago

But will message you once I’m back 🙂

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

hey @Sr. Full Stack Dev I am back 🙂 so doing this

         Driver: <span class=" uppercase"> {{ report?.driver?.name }}</span></h2>

         Driver: <span class=" uppercase"> {{ report?.driver?.name }}</span></h2>

has fixed it and shows the data why is that lol as I thought

just checks if its available

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

but whats underfined as its still outputting correctly

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

im am using that

RomiOP•2y ago

but now its working when I removed wtf

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

but I did not change data and now removed the ? check lol

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

oh thats a thing lol , prob was that Thanks 🙂 now I can carry on building my app xD

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

is this the correct way to add tailwind plugins using the nuxt tailwind package? I created my own config file.

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

do I need the import statement?

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

I have installed tailwind forms but still not working nvm needed a restart of terminal ty again

RomiOP•2y ago

Hi Again, I am trying to total up all the weeks hours to calculate the total hours for the report. What is it called to cross add between rows as trying to search from some docs but not sure what the terminology is called

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

correct

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

but how to I pass my data to each row into the array? for example you have 1,2,3 I need to pass

 report1.hours, report2.hours, report3.hours

 report1.hours, report2.hours, report3.hours

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

so this is my report

 const { data } = useAsyncData('reports', async () => {
    const { data, error } = await client
        .from('reports')
        .select('id, driver ( * ),  created_at, base_rate, total_hours, gross_pay, pay_slip, net_pay')
        .eq('id', route.params.id)

    if (error) {
        console.log(error)
    }
    return data
})

 const { data } = useAsyncData('reports', async () => {
    const { data, error } = await client
        .from('reports')
        .select('id, driver ( * ),  created_at, base_rate, total_hours, gross_pay, pay_slip, net_pay')
        .eq('id', route.params.id)

    if (error) {
        console.log(error)
    }
    return data
})

and then my weeks are in a component

 const route = useRoute()
const client = useSupabaseClient()

const { data, error } = await client.from('weeks').select('*').eq('reports', route.params.id)
if (error) {
    console.log('error', error)
}

 const route = useRoute()
const client = useSupabaseClient()

const { data, error } = await client.from('weeks').select('*').eq('reports', route.params.id)
if (error) {
    console.log('error', error)
}

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

this https://txjdfvxhkfphwqjckfxg.supabase.co/rest/v1/weeks?select=*&reports=eq.4 ?

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

this right

 [
    {
        "id": 1,
        "created_at": "2023-01-31T16:06:51.385299+00:00",
        "base_rate": 400,
        "monday_hours": null,
        "monday_fixed": null,
        "reports": 4,
        "name": "Week 1",
        "total_hours": 12.5,
        "total_amount": 45.6
    },
    {
        "id": 2,
        "created_at": "2023-02-22T20:08:25.263205+00:00",
        "base_rate": null,
        "monday_hours": null,
        "monday_fixed": null,
        "reports": 4,
        "name": "test report",
        "total_hours": 40,
        "total_amount": null
    },
    {
        "id": 3,
        "created_at": "2023-02-22T20:10:15.2842+00:00",
        "base_rate": null,
        "monday_hours": null,
        "monday_fixed": null,
        "reports": 4,
        "name": "real test report",
        "total_hours": 30,
        "total_amount": null
    }
]

 [
    {
        "id": 1,
        "created_at": "2023-01-31T16:06:51.385299+00:00",
        "base_rate": 400,
        "monday_hours": null,
        "monday_fixed": null,
        "reports": 4,
        "name": "Week 1",
        "total_hours": 12.5,
        "total_amount": 45.6
    },
    {
        "id": 2,
        "created_at": "2023-02-22T20:08:25.263205+00:00",
        "base_rate": null,
        "monday_hours": null,
        "monday_fixed": null,
        "reports": 4,
        "name": "test report",
        "total_hours": 40,
        "total_amount": null
    },
    {
        "id": 3,
        "created_at": "2023-02-22T20:10:15.2842+00:00",
        "base_rate": null,
        "monday_hours": null,
        "monday_fixed": null,
        "reports": 4,
        "name": "real test report",
        "total_hours": 30,
        "total_amount": null
    }
]

thats my weeks ^ this is my report

 {
    "id": 4,
    "created_at": "2023-02-22T18:55:19.510042+00:00",
    "base_rate": 120,
    "total_hours": 500,
    "gross_pay": 0,
    "pay_slip": "payslips",
    "net_pay": 120,
    "driver": {
        "id": 1,
        "created_at": "2023-01-31T16:01:18.475061+00:00",
        "name": "romi",
        "email": "[email protected]",
        "contract_hours": 30,
        "active": true,
        "employed": false
    }
}

 {
    "id": 4,
    "created_at": "2023-02-22T18:55:19.510042+00:00",
    "base_rate": 120,
    "total_hours": 500,
    "gross_pay": 0,
    "pay_slip": "payslips",
    "net_pay": 120,
    "driver": {
        "id": 1,
        "created_at": "2023-01-31T16:01:18.475061+00:00",
        "name": "romi",
        "email": "[email protected]",
        "contract_hours": 30,
        "active": true,
        "employed": false
    }
}

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

correct

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

    {
        "id": 1,
        "created_at": "2023-01-31T16:06:51.385299+00:00",
        "base_rate": 400,
        "monday_hours": null,
        "monday_fixed": null,
        "reports": 4,
        "name": "Week 1",
        "total_hours": 12.5,
        "total_amount": 45.6
    },
    {
        "id": 2,
        "created_at": "2023-02-22T20:08:25.263205+00:00",
        "base_rate": null,
        "monday_hours": null,
        "monday_fixed": null,
        "reports": 4,
        "name": "test report",
        "total_hours": 40,
        "total_amount": null
    },
    {
        "id": 3,
        "created_at": "2023-02-22T20:10:15.2842+00:00",
        "base_rate": null,
        "monday_hours": null,
        "monday_fixed": null,
        "reports": 4,
        "name": "real test report",
        "total_hours": 30,
        "total_amount": null
    }
]

    {
        "id": 1,
        "created_at": "2023-01-31T16:06:51.385299+00:00",
        "base_rate": 400,
        "monday_hours": null,
        "monday_fixed": null,
        "reports": 4,
        "name": "Week 1",
        "total_hours": 12.5,
        "total_amount": 45.6
    },
    {
        "id": 2,
        "created_at": "2023-02-22T20:08:25.263205+00:00",
        "base_rate": null,
        "monday_hours": null,
        "monday_fixed": null,
        "reports": 4,
        "name": "test report",
        "total_hours": 40,
        "total_amount": null
    },
    {
        "id": 3,
        "created_at": "2023-02-22T20:10:15.2842+00:00",
        "base_rate": null,
        "monday_hours": null,
        "monday_fixed": null,
        "reports": 4,
        "name": "real test report",
        "total_hours": 30,
        "total_amount": null
    }
]

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

that worked now, cache maybe when I tired first version

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

 const total = data.map(obj => obj.total_hours).reduce((partialSum, a) => partialSum + a, 0);
console.log(total); // your total

 const total = data.map(obj => obj.total_hours).reduce((partialSum, a) => partialSum + a, 0);
console.log(total); // your total

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

so in my report component right I can then use {{ total }} and then store that against my db?

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

well its not actually a report component its my index.vue

RomiOP•2y ago

message.txt

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

i noticed lol

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

so how can I declare it from another file

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

Yeah I have been following some tutorials on the side for certain parts but then get stuck on complex things where I cant really find as much information on yeah have heard of Pinia its state management right

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

Thanks, for now I might just put everything into one file kind of learn the basics while finishing the project then come back to refactor it back to components. This project was more of a replacement I built in Laravel + vue last year but with upgrades so thought it would be good practice. I actually have a full web app built on core php that I want to upgrade the frond end using Nuxt but need to learn first 🙂 Thanks for the help really appreciate it

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

Thanks want to stop doing Wordpress 😆

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

lol I Want to build with javascript not php lol

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

have used bit.ly yes

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

no way

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

dam nice I work for a Digital agency and just completed my apprenticeship thanks

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

yeah I spend all day wordpress get home then start working on my own projects

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

dam I wish What do you recommend for learning vue/nuxt?

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

yeah I might give that a go with downloading projects, as I watch tutorials but I always change it so i'm not just following it line by line

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

ah thats cool I will defo check that out ty

Gaming

Programming

How can I do this after initialization?