I'm trying to build a simple app showing invoices.
When I create a new invoice, the path is invoice/new
When a change happens, I want to redirect to the newly created invoice
export const action = async ({ request, params }) => {
const newInvoice = // save the invoice
if (params.invoiceId === "new") {
return redirect(`/invoice/${newInvoiceId}`);
}
return { ok: true };
};
But it's not redirecting - it stays in /invoice/new
export const loader = async ({ params }) => {
const invoiceId = params.invoiceId;
console.log("invoiceId", invoiceId); // invoiceId always 'new' even after `redirect`
const invoice = // fetch invoice if invoiceId !== 'new'
return { invoice };
};
I don't understand why...
Here is my router
const router = createMemoryRouter(
[
{
path: "/",
element: <Root />,
children: [
{
path: "/",
element: <Home />,
loader: homeLoader,
},
],
},
{
path: "/invoice/:invoiceId",
element: <Invoice />,
loader: invoiceLoader,
action: invoiceAction,
},
{
path: "/client/:clientId",
element: <Client />,
loader: clientLoader,
action: clientAction,
},
],
{
initialEntries: ["/", "/invoice/new"],
},
);
I can give more clue if needed, of course
Related
Somehow I when I make an API call using Prisma I can access only the default state:
import dbClient from '~/server/utils';
import { useTextStore } from '~/pinia/text'
export default defineEventHandler(async (event) => {
const { id } = event.context.params
const text = useTextStore()
const updatedText = await dbClient.opus.update({
where: {
id: parseInt(id),
},
data: {
content: text.content
},
});
return {
statusCode: 200,
body: text.content
}
})
Here's the Pinia store code:
import { defineStore } from 'pinia'
export const useTextStore = defineStore({
id: 'text',
state: () => {
return {
editor:'Введите текст',
}
},
actions: {
updateText(newContent) {
this.editor = newContent
}
},
getters: {
content: state => state.editor,
},
})
The state changes are shared across components and pages but can't get through to the eventHandler. Is it Nuxt 3 or some other mistake I should look into?
Is there a posibility to send data with redirect inside getServerSideProps function similar way as in next.config.js (you cannot pass hidden queries as far as I know inside next config file).
export const getServerSideProps = async (context) => {
const id = context.params.id;
return {
redirect: {
destination: '/my-work',
permanent: false,
has: [
{
type: 'query',
value: id
}
]
},
props: {
}
}
}
I want to pass hidden query to another page so this only works as middleware redirection as I am comming on this page from email template. But has object is not working in getServerSideProps function.
Is there any other ways to achieve that?
Thanks for your help!
This is from the official documentation.
module.exports = {
async redirects() {
return [
// if the header `x-redirect-me` is present,
// this redirect will be applied
{
source: '/:path((?!another-page$).*)',
has: [
{
type: 'header',
key: 'x-redirect-me',
},
],
permanent: false,
destination: '/another-page',
},
// if the source, query, and cookie are matched,
// this redirect will be applied
{
source: '/specific/:path*',
has: [
{
type: 'query',
key: 'page',
// the page value will not be available in the
// destination since value is provided and doesn't
// use a named capture group e.g. (?<page>home)
value: 'home',
},
{
type: 'cookie',
key: 'authorized',
value: 'true',
},
],
permanent: false,
destination: '/another/:path*',
},
// if the header `x-authorized` is present and
// contains a matching value, this redirect will be applied
{
source: '/',
has: [
{
type: 'header',
key: 'x-authorized',
value: '(?<authorized>yes|true)',
},
],
permanent: false,
destination: '/home?authorized=:authorized',
},
// if the host is `example.com`,
// this redirect will be applied
{
source: '/:path((?!another-page$).*)',
has: [
{
type: 'host',
value: 'example.com',
},
],
permanent: false,
destination: '/another-page',
},
]
},
}
You can compare the params with it. For more details, visit here
i'm trying to retrieve item data by id in angular 14, I tried adding the id to the route (:id), and then created the service method and tried to implement it in the component ts page. Whenever I add the (:id) to the route in the routing page, I get the following error:
ERROR TypeError: Cannot read properties of null (reading 'getContext')
this is my routing page:
const routes: Routes = [
{
path: '',
children: [
{
path: 'missions-list',
component: ListMissionsComponent,
data: { title: 'Missions' },
},
{
path: 'mission-details/:id',
component: MissionDetailsComponent,
data: { title: 'Détails du mission' },
},
{
path: 'add-mission',
component: AddMissionComponent,
data: { title: 'Ajouter une mission' },
},
],
},
];
and this is my service method:
getById(id: number): Observable<Mission> {
return this.http.get(`${baseUrl}/${id}`);
}
and finally my ts page:
ngOnInit(): void {
this.getMissionById(this.activatedRoute.snapshot.params['id']);
}
getMissionById(id: any): void {
this.missionService.getById(id)
.subscribe({
next: (data) => {
this.mission = data;
console.log(data);
},
error: (e) => console.error(e)
});
}
can anyone help me out in solving this error? I'd appreciate it a lot!
I tried the service method without passing the id in the route, just by setting 1 as an input for the method and it works pretty fine!
I am an engineer who makes web systems in Tokyo.
I'm making a search system using Grid.js, but I faced a problem.
I don't know the solution because it's not in the documentation.
Since this system uses Vue 2.x, it uses axios.post with Custom HTTP Requset.
I was able to get the list, but I'm having trouble implementing sorting, pagination, and keyword search.
I want to send parameters by Post request.
Please tell me how to implement this.
The code is below
data() {
return {
columns: [
{name: 'user name', id: 'user_name'},
{name: 'email', id: 'email'},
],
page: {
enabled: true,
limit: 100,
server: {
body: (prev, page) => {
console.log(page) // OK, show page number 0,1,2...
return {
page: page
}
}
},
},
sort: {
},
search: {
server: {
// url: (prev, keyword) => `${prev}?q=${keyword}`
// what's this.
}
},
server: {
url: '/api/v2/users/list',
method: 'POST',
async data (opt) {
let response = await axios.post(opt.url)
return {
data: response.data.results.map(item => {
return {
username: item.username,
email: item.email,
}
}),
total: response.data.count,
}
}
},
};
OK.
Set POST payload this.
data() {
return {
columns: [
{name: 'user name', id: 'user_name'},
{name: 'email', id: 'email'},
],
page: {
enabled: true,
limit: 100,
server: {
body: (prev, page) => {
console.log(page) // OK, show page number 0,1,2...
return {
page: page
}
}
},
},
sort: {
},
search: {
server: {
// url: (prev, keyword) => `${prev}?q=${keyword}`
// what's this.
}
},
server: {
url: '/api/v2/users/list',
method: 'POST',
body: {},
async data (opt) {
let response = await axios.post(opt.url)
return {
data: response.data.results.map(item => {
return {
username: item.username,
email: item.email,
}
}),
total: response.data.count,
}
}
},
};
use Angular4 and angular-datatables.
Everything looks fine (pagination, column sorting, export buttons), but when I try to print/copy/export a table, it only outputs the headers, even though the rest of the data is there.
Any ideas what's should I check?
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 20,
serverSide: true,
processing: true,
ajax: (dataTablesParameters: any, callback) => {
this.service.getServerSidePaganated(dataTablesParameters).subscribe(resp => {
that.cdrs = resp.data;
callback({
recordsTotal: resp.recordsTotal,
recordsFiltered: resp.recordsFiltered,
data: []
});
});
},
columns: [
{ data: 'source' },
{ data: 'destination' },
{ data: 'dateTime'},
{ data: 'callTime'},
{ data: 'timeOnHold'},
{ data: 'disposition'},
{ data: 'recordingFileName'}
],
// Declare the use of the extension in the dom parameter
dom: 'Bfrtip',
// Configure the buttons
buttons: [
'print',
'excel'
]
};
}
you should set the callback data
ajax: (dataTablesParameters: any, callback) => {
this.service.getServerSidePaganated(dataTablesParameters).subscribe(resp => {
// that.cdrs = resp.data; // remove this line
callback({
recordsTotal: resp.recordsTotal,
recordsFiltered: resp.recordsFiltered,
data: resp.data // set data
});
});