I have a ReactJS Frontend that takes the value of a select and sends it to the backend to be saved to the database. But I want only allowed options to be saved. I am using ORM Sequelize.
Note: Data is arriving correctly in the backend, but even disallowed values are being saved to the database.
Node version: v10.16.2
Sequelize version: 5.19.0
purchase_unit: {
type: DataTypes.STRING,
allowNull: false,
validade: {
notNull: {
msg: 'The field "purchase unit" must be entered'
},
notEmpty: {
msg: 'The field "purchase unit" cannot be empty'
},
isIn: {
args: [["Und", "Pct"]],
msg: 'Entry not allowed for field "purchase unit"'
}
}
}
<select
value={productPurchaseUnit}
onChange={e => setProductPurchaseUnit(e.target.value)}
>
<option value="Und">Und</option>
<option value="Pct">Pct</option>
<option value="m2">m²</option>
<option value="g">g</option>
<option value="Kg">Kg</option>
<option value="Cm">Cm</option>
<option value="Mt">Mt</option>
</select>
According to official documentation The isIn option should be used as follows:
isIn: {
args: [['en', 'zh']],
msg: "Must be English or Chinese"
}
Related
I made a request to my backend and brought all the categories to the homepage. From there I redirected to a page called [category_slug].jsx.
I'm getting data with useEffect and I'm pulling it from the context api
categories.map((category) => (
<Link
href={{ pathname: `/categories/${category.category_slug}`, query: category }}
className="text-sm hover:underline hover:opacity-60"
key={category.id}
>
{category.name}
</Link>
))
Also, I used this method before to make the page with the videos and it worked then.
All data comes to that page, but the videos come with 2 empty strings, but it should not come as such.
{
"id": "9",
"name": "test2",
"category_slug": "test2",
"description": "testt2",
"videos": [
"",
""
],
"image": "",
"created": "2022-12-07T02:07:05.838815Z",
"updated": "2022-12-07T02:07:05.838840Z"
}
My [id] page:
import React from "react";
const CategoryPage = () => {
const router = useRouter()
const category = router.query;
console.log(category)
// captilaze first letter and lowercase the rest
const capitalize = (s) => {
if (typeof s !== "string") return "";
return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
};
return (
<>
{ /* <CustomHead title={capitalize(category.name)} />*/}
<div className="my-10 mx-auto flex min-h-screen px-24 py-10 ">
<div className="flex w-full flex-col bg-white p-10">
{ /* <h1 className="text-2xl font-bold up capitalize">{category.name}</h1>*/}
<div className="mt-10 grid grid-cols-1 place-items-center gap-2 md:grid-cols-3">
</div>
</div>
</div>
</>
);
};
export default CategoryPage;
Please excuse me if I didn't express myself very well.
I am trying to display member and company using MUI Autocomplete.
I have suggestion array to show as options
[
{
"__typename": "Member",
"id": "ckwa91sfy0sd241b4l8rekas9jx",
"name": "my name 2",
"companyName": ""
},
{
"__typename": "Member",
"id": "ckwac4ijl25dsd80b4l8fpsrc64o",
"name": "my name",
"companyName": ""
},
{
"__typename": "Member",
"id": "ckwa8z6z7004dsd2b4l81m6ras9c",
"name": "my name 1",
"companyName": "A COMPANY"
}
]
I use this to display
<Autocomplete
id="free-solo-demo"
freeSolo
options={
suggestion &&
suggestion.map(
(suggestion: any) =>
suggestion.name
)
}
onChange={(event, value) =>
HandleUserProfile(value)
}
renderInput={(params) => (
<TextField
{...params}
placeholder="Search..."
onChange={handleChange}
/>
)}
/>
By using this I am getting options if only I search with member name.
I want to search with both company and member and need to customize UI of option.
I tried this
<Autocomplete
id="free-solo-demo"
freeSolo
options={suggestion}
getOptionLabel={(option) => `${option.name} ${option.companyName}`}
renderOption={(option)=>{
return <h1>{`${option.name}: ${option.companyName}`}</h1>
}}
onChange={(event, value) =>
HandleUserProfile(value)
}
renderInput={(params) => (
<TextField
{...params}
placeholder="Search..."
onChange={handleChange}
/>
)}
/>
but It is not working.
it shows error TypeScript error in ... Property 'name' does not exist on type 'never'. TS2339
First, you should make sure the name field doesn't have any duplicated values, that's why you should use the mandatory id field to select one.
And also you need to build a custom filter function or use createFilterOptions hook from Autocomplete component.
https://mui.com/components/autocomplete/#custom-filter
import Autocomplete, { createFilterOptions } from '#mui/material/Autocomplete';
...
const filterOptions = createFilterOptions({
stringify: ({ name, companyName }) => `${name} ${companyName}`
});
<Autocomplete
options={suggestion}
getOptionLabel={option => option.name}
filterOptions={filterOptions}
...
/>;
This my first time I use sendgrid for mail. I have problem with dynamic data passed from database. Actually HTML content passed in object and display as it is in mail. For more detail check below object.
{
to: "to Email"
from: "from email",
templateId: "Template ID",
dynamicTemplateData: {
subject: "Testing Templates",
name: "Some One",
city: "Denver",
week: "August 24 2020",
job0: {
header: "Test",
body: "<table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="
snip ">We are looking for physically fit individuals to fill general labour requirements by partnering with a truck driver. Your help is needed to load/unload the truck at the various job sites. <b>Skills required: </b> - comfortable with physical exertion and lifting minimum of 50lbs - works well on a team but trusted to work independently - reliable, self-motivated and committed to high standards of quality - able to read and understand work instructions <b>Specific requirements: </b> - in good physical condition - must have own safety footwear - reliable transportation to ensure punctual and consistent attendance If you meet the qualifications listed above, submit your resume in MS Word format via the link below. <i>Previously employed with The Staffing Connection? Please contact our office to confirm your continued availability for these upcoming positions.</i></td> </tr> </tbody> </table>",
cta: "Apply now",
url: "My URL"
},
}
}
Code
getJobs().then((jobs) => {
var mailPayload = {
to: emails,
from: "",
templateId: "",
dynamicTemplateData: {
subject: "Testing Templates",
name: "Some One",
city: "Denver",
week: "August 24 2020",
},
};
for (let i = 0; i < jobs.length; i++) {
mailPayload.dynamicTemplateData["job" + i] = {
header: jobs[i].job_title,
body: jobs[i].job_description,
cta: "Apply now",
url: jobs[i].company_url,
};
}
mail(mailPayload);
res.send("Mail sent Successfully").status(200);
});
});
Here is the Output
Please help me to solve this issue.
I am creating SPA using vue. I have JSON array :
[
{
date: new Date(2076, 5, 10),
customer: {id: 0,name: "Foo bar",tol: "Some tol",city: "Some City",},
items: [
{code: "gs",name: "Generic Shoes",cost: 500,quantity: 5},
{code: "nf",name: "North Facing Jacket",cost: 5000,quantity: 5},
{code: "lp",name: "Lee Vice Jeans Pant",cost: 1500,quantity: 15}
],
}
]
which now contains one object that has date, customer and items primarily. I want to make table that will contain date, customer and items as fields, and each row of table will contain multiple row of items.
Something like this :
,
This thing has only one row, but as you can imagine there might be multiple row for multiple {date, customer, items[]}.
This was best I was able to do :
<b-container>
<b-table responsive="true" striped hover :items="DraftList" :fields="fields">
<template slot="[date]" slot-scope="data">{{data.value|formatDate}}</template>
<template slot="[customer]" slot-scope="data">{{data.value.name}}</template>
<template slot="[items]" slot-scope="data">{{data.value}}</template>
</b-table>
</b-container>
<script>
import { mapState } from "vuex";
export default {
data() {
return {
fields: [
{ key: "date", sortable: true },
{
key: "customer",
label: "Customer's Name",
sortable: true
},
{
key: "items",
label: "Item List",
sortable: true
}
]
};
},
computed: {
...mapState(["DraftList"])
},
mounted() {},
filters: {
formatDate: date => {
if (date instanceof Date) {
let month = "" + (date.getMonth() + 1);
let day = "" + date.getDate();
let year = date.getFullYear();
if (month.length < 2) month = "0" + month;
if (day.length < 2) day = "0" + day;
return [year, month, day].join("-");
}
return null;
}
}
};
</script>
I am stuck, what should I do now? I cannot properly term my searches either.
Solved it using v-for and rowspan
<b-table-simple responsive="true" hover outlined>
<colgroup>
<col />
<col />
</colgroup>
<colgroup>
<col />
<col />
<col />
</colgroup>
<colgroup>
<col />
<col />
</colgroup>
<b-thead head-variant="light">
<b-tr>
<b-th rowspan="2">Date</b-th>
<b-th rowspan="2">Customer's Name</b-th>
<b-th colspan="4">Items</b-th>
</b-tr>
<b-tr>
<b-th>code</b-th>
<b-th>Name</b-th>
<b-th>Cost</b-th>
<b-th>Quantity</b-th>
</b-tr>
</b-thead>
<b-tbody v-for="(draft,index) in DraftList" :key="index">
<b-tr>
<b-td :rowspan="draft.items.length+1">{{draft.date|formatDate}}</b-td>
<b-td :rowspan="draft.items.length+1">{{draft.customer.name}}</b-td>
</b-tr>
<b-tr v-for="(item, itemIndex) in draft.items" :key="itemIndex">
<b-td>{{item.code}}</b-td>
<b-td>{{item.name}}</b-td>
<b-td>{{item.cost}}</b-td>
<b-td>{{item.quantity}}</b-td>
</b-tr>
</b-tbody>
</b-table-simple>
I'm a newbie in nodejs and i'm learning to use handlebars to render a website.
Here is my routing (inside index.js)
app.get('/house', function (req, res) {
var houses = [
{
name: "House a",
address: "Address a",
price: "Price a"
},
{
name: "House b",
address: "Address b",
price: "Price b"
},
{
name: "House c",
address: "Address c",
price: "Price c"
}
]
res.render('house', houses);
})
Here is my house.handlebars
<div class="row">
{{#each houses}}
<div class="col-md-3 col-lg-3">
<p>Name: {{name}}</p>
<p>Address: {{address}}</p>
<p>Price: {{price}}</p>
</div>
{{/each}}
</div>
The problem is when i go to http://localhost:3000/house, the page is all white and render nothing. I inspected the site and notice that everything inside {{each houses}} and {{/each}} disappear.
I'm wondering what are the problems here.
Many thanks
Your object structure is incorrect. try this:
res.render('house', {houses: houses});