validate Min option of integer field in Symfony2.1 application - entity

I created my form with this code :
public function creerConferenceAction($id = null) {
$message = '';
if (isset($id)) {
$conference = $this->getDoctrine()
->getRepository('gestionConferenceApplicationBundle:Conference')
->find($id);
if (!$conference) {
throw $this->createNotFoundException('No conference found for id ' . $id);
}
}else{
$conference = new Conference();
}
$form = $this->createFormBuilder($conference)
->add('titre', 'text')
->add('ville', 'text')
->add('lieu', 'text')
->add('date_debut', 'date', array(
'widget' => 'single_text',
'format' => 'yyyy-MM-dd',
))
->add('date_fin', 'date')
->add('nbMin', 'integer')
->add('nbMax', 'integer')
->add('dateLimiteInscription', 'date')
->getForm();
$request = $this->getRequest();
if ($request->isMethod('POST')) {
$form->bind($request);
if ($form->isValid()) {
$em = $this->getDoctrine()->getManager();
$em->persist($conference);
$em->flush();
return $this->redirect($this->generateUrl('_acceuil'));
}
}
return $this->render('gestionConferenceApplicationBundle:acceuil:creerConference.html.twig', array(
'form' => $form->createView(),
));
}
and I want to add this constraint : the user cannot enter a value less than 5 in those fields :
->add('nbMin', 'integer')
->add('nbMax', 'integer')
I tested this (I take it from the reference book) :
# src/gestionConference/ApplicationBundle/Resources/config/validation.yml
gestionConference\ApplicationBundle\Entity\Conference:
properties:
age:
- Min: { limit: 18, message: You must be 18 or older to enter. }
but it do nothing
how can I achieve this
thank you in advance
-------------------EDIT-------------------EDIT------------------------------
I read another time the reference and I realized that the min option is removed in the latest version of symfony 2.1.3
and I replaced it by :
# src/gestionConference/ApplicationBundle/Resources/config/validation.yml
gestionConference\ApplicationBundle\Entity\Conference:
properties:
nbmin:
- Range:
min: 120
minMessage: You must be at least 120cm tall to enter
but no change
here is the twig page :
{% extends "gestionConferenceApplicationBundle::layout.html.twig" %}
{% block content %}
<div id="welcome">
<div class="content">
<form action="" method="post" {{ form_enctype(form) }}>
{{ form_errors(form) }}
<table>
<tr>
<td>{{ form_label(form.titre, 'Titre : ') }}</td>
<td>{{ form_widget(form.titre) }}</td>
<td>{{ form_errors(form.titre) }}</td>
</tr>
<tr>
<td>{{ form_label(form.ville, 'Ville : ') }}</td>
<td>{{ form_widget(form.ville) }}</td>
<td>{{ form_errors(form.ville) }}</td>
</tr>
<tr>
<td>{{ form_label(form.lieu, 'Lieu : ') }}</td>
<td>{{ form_widget(form.lieu) }}</td>
<td>{{ form_errors(form.lieu) }}</td>
</tr>
<tr>
<td>{{ form_label(form.date_debut, 'Date de début : ') }}</td>
<td>{{ form_widget(form.date_debut) }}</td>
<td>{{ form_errors(form.date_debut) }}</td>
</tr>
<tr>
<td>{{ form_label(form.date_fin, 'Date de fin : ') }}</td>
<td>{{ form_widget(form.date_fin) }}</td>
<td>{{ form_errors(form.date_fin) }}</td>
</tr>
<tr>
<td>{{ form_label(form.nbMin, 'Nombre minimal de participants : ') }}</td>
<td>{{ form_widget(form.nbMin) }}</td>
<td>{{ form_errors(form.nbMin) }}</td>
</tr>
<tr>
<td>{{ form_label(form.nbMax, 'Nombre maximal de participants : ') }}</td>
<td>{{ form_widget(form.nbMax) }}</td>
<td>{{ form_errors(form.nbMax) }}</td>
</tr>
<tr>
<td>{{ form_label(form.dateLimiteInscription, 'Date limite d inscription : ') }}</td>
<td>{{ form_widget(form.dateLimiteInscription) }}</td>
<td>{{ form_errors(form.dateLimiteInscription) }}</td>
</tr>
{{ form_rest(form) }}
<tr>
<td align="center" colspan=3 >
<input type="submit" style="width: 80px;height: 30px;margin-right: 25px;" value="valider" />
<input type="reset" style="width: 80px;height: 30px;" value="initialiser" />
</td>
</tr>
</table>
</form>
</div>
</div>
{% endblock %}

Related

Why Nuxt 3 Not Updating Realtime Upon Data Change on Props?

i have this problem in which the HTML page is not updating upon props variables change. Please help me.
I make a table in my child element based on the array passed by the parent, here is the child code:
<table>
<thead>
<th>Rank</th>
<th>Nama</th>
<th>Blank</th>
<th>Error</th>
<th>Warning</th>
<th>Clean</th>
<th>Total</th>
</thead>
<tbody>
<tr v-for="(datae, index) in props.ranking" :key="index">
<td>{{ index }}</td>
<td>{{ '(' + datae.username + ') ' + datae.realname }}</td>
<td>{{ datae.blank }}</td>
<td>{{ datae.error }}</td>
<td>{{ datae.warning }}</td>
<td>{{ datae.clean }}</td>
<td>{{ datae.total }}</td>
</tr>
</tbody>
</table>
Here is the child script:
<script setup lang="ts">
var props = defineProps({
ranking: {
type: Array,
required: false,
}
})
watch(() => props.ranking, (newValue, oldValue) => console.log('tes'))
</script>
I am expecting the html table update upon props.ranking change
I noticed a couple of issues here. It might help you.
First of all, you used the props keyword in the template, it's not needed.
<!-- props.ranking -> ranking -->
<tr v-for="(datae, index) in ranking" :key="index">
<td>{{ index }}</td>
<td>{{ '(' + datae.username + ') ' + datae.realname }}</td>
<td>{{ datae.blank }}</td>
<td>{{ datae.error }}</td>
<td>{{ datae.warning }}</td>
<td>{{ datae.clean }}</td>
<td>{{ datae.total }}</td>
</tr>
The second point is that you watch an array prop, but it isn't changed, only the properties (items) of this array will be changed. So your watcher callback never fires. To fix this, you can pass the deep option to watch as a third argument, like this:
watch(() => props.ranking,
(newValue, oldValue) => console.log('tes'),
{ deep: true }
)
Source: watch arrays

Datatable is not showing data used in vuejs code with api fetching

Need Sample code for vuejs Datatable in html page, getting from api and need to show search box and pagination.
var app = new Vue({
el: '#app',
data: {
search: '',
list: [],
pageSize: 3,
currentPage: 1
},
mounted() {
axios
.get('https://thegreen.studio/ecommerce/E-CommerceAPI/E-CommerceAPI/AI_API_SERVER/Api/Order/GetOrderTestAll.php')
.then(response => (this.list = response.data.body))
},
methods: {
nextPage () {
if ((this.currentPage * this.pageSize) < this.list.length) this.currentPage++;
},
prevPage () {
if (this.currentPage > 1) this.currentPage--;
}
},
computed: {
lists () {
var self = this;
return this.list.filter(function (item1) {
return item1.BuyerName.toLowerCase().indexOf(self.search.toLowerCase()) >= 0
|| item1.BuyerPhoneNo.toLowerCase().indexOf(self.search.toLowerCase()) >= 0
|| item1.BuyerEmail.toLowerCase().indexOf(self.search.toLowerCase()) >= 0
|| item1.BuyerHouseNo.toLowerCase().indexOf(self.search.toLowerCase()) >= 0
|| item1.BuyerState.toLowerCase().indexOf(self.search.toLowerCase()) >= 0
|| item1.OrderPlacedOn.toLowerCase().indexOf(self.search.toLowerCase()) >= 0;
});
}
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue#2.1.8/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuejs-paginate/2.1.0/index.js"></script>
<div id="app" class="container" style="width:1000px;margin-left:80px;">
<br />
<br />
<input type="text" class="form-control" v-model="search" placeholder="search" />
<br />
<br />
<table id="tbllist" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Phone No</th>
<th>Email</th>
<th>House No</th>
<th>Address 1</th>
<th>Address 2</th>
<th>Address 3</th>
<th>Address 4</th>
<th>Address 5</th>
<th>PostCode</th>
<th>City</th>
<th>State</th>
<th>Order Status</th>
<th>Total Price</th>
<th style="width:80px">Order Placed On</th>
</tr>
</thead>
<tbody>
<tr v-for="item in lists">
<td>{{ item.BuyerName }}</td>
<td>{{ item.BuyerPhoneNo }}</td>
<td>{{ item.BuyerEmail }}</td>
<td>{{ item.BuyerHouseNo }}</td>
<td>{{ item.BuyerAddress1 }}</td>
<td>{{ item.BuyerAddress2 }}</td>
<td>{{ item.BuyerAddress3 }}</td>
<td>{{ item.BuyerAddress4 }}</td>
<td>{{ item.BuyerAddress5 }}</td>
<td>{{ item.BuyerPostCode }}</td>
<td>{{ item.BuyerCity }}</td>
<td>{{ item.BuyerState }}</td>
<td>{{ item.OrderStatus }}</td>
<td>{{ item.TotalPrice }}</td>
<td>{{ item.OrderPlacedOn }}</td>
</tr>
</tbody>
</table>
<p>
<button #click="prevPage">Previous</button>
<button #click="nextPage">Next</button>
</p>
page={{currentPage}}
</div>

How to sum variables in template vue?

now i'm working in VUE and i need to sum variables. In python (flask), i've been using such a code
<!-- Creating vars (I have already created vars in data ())-->
{% set transitions = namespace(amount=0) %}
{% set downloads = namespace(amount=0) %}
{% set registered = namespace(amount=0) %}
{% set played = namespace(amount=0) %}
{% for stat in stats %}
<!-- So i need such a code in VUE -->
{% set transitions.amount = transitions.amount + stat[1] | int %}
{% set downloads.amount = downloads.amount + stat[2] | int %}
{% set registered.amount = registered.amount + stat[3] | int %}
{% set played.amount = played.amount + (stat[4] / 60) | round | int %}
<tr>
<td>{{ stat[5] }}</td>
<td>{{ stat[1] }}</td>
<td>{{ stat[2] }}</td>
<td>{{ stat[3] }}</td>
<td>{{ (stat[4] / 60)|round|int}}</td>
<td>{{ stat[0] }}</td>
</tr>
{% endfor %}
So i need to 'convert' it to vue like:
{{ var1 += stat[1] }}
OK, i wrote such a dumy code:
<tr v-for="promo in promoStats" :key="promo.ID">
<td>{{ promo.date }}</td>
<td>{{ sumTransfers(promo.transitions) }}</td>
<td>{{ sumDownloads(promo.downloads) }}</td>
<td>{{ sumRegisters(promo.registered) }}</td>
<td>{{ sumHours(Math.round(promo.hoursPlayed / 60))}}</td>
</tr>
Script:
methods: {
sumTransfers (val) {
this.transitions += val
console.log(this.transitions)
return val
},
sumDownloads (val) {
this.downloads += val
return val
},
sumRegisters (val) {
this.registered += val
return val
},
sumHours (val) {
this.played += val
return val
}
}
And i recieve an error:
You may have an infinite update loop in a component render function.
A good way to do it is by calling a method:
<template>
<td>{{ sumStats(var1, stat[0]) }}</td> <!-- 12 + 1 -->
<td>{{ sumStats(var1, stat[1]) }}</td> <!-- 12 + 2 -->
<td>{{ sumStats(var1, stat[2]) }}</td> <!-- 12 + 3 -->
<td>{{ sumStats(6, 5) }}</td> <!-- 6 + 5 -->
</template>
In the script tag:
<script>
export default {
data: () => ({
var1: 12,
stat: [1,2,3,4,5]
}),
methods: {
sumStats(num1, num2) {
return num + num2;
}
}
}
</script>
I'm guessing that you have something like:
promotions: [{
date: 'somedate',
transitions: 1,
downloads: 2,
registered: 3,
played: 4,
},{
date: 'somedate2',
transitions: 5,
downloads: 6,
registered: 7,
played: 8,
}
]
If you want to show each object in one row :
<tr v-for="promo in promotions">
<td>{{ promo.date }}</td>
<td>{{ promo.transitions }}</td>
<td>{{ promo.downloads }}</td>
<td>{{ promo.registered }}</td>
<td>{{ promo.played }}</td>
</tr>
Then you get:
<tr>
<td>somedate</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>somedate2</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
Now, if you want only one row with the sum of each variable, this is the way to do it:
<template>
<div>
<!-- Show each promotion information in one row -->
<tr v-for="promo in promotions">
<td>{{ promo.date }}</td>
<td>{{ promo.transitions }}</td>
<td>{{ promo.downloads }}</td>
<td>{{ promo.registered }}</td>
<td>{{ promo.played }}</td>
</tr>
<tr>
<!-- Show the sum of all the variables in one row -->
<td>Empty date</td>
<td>{{ totalpromotions.totalTransitions }}</td>
<td>{{ totalPromotions.totalDownloads }}</td>
<td>{{ totalPromotions.totalRegistered }}</td>
<td>{{ totalPromotions.totalPlayed }}</td>
</tr>
</div>
</template>
<script>
export default {
data: () => ({
promotions: [{
date: 'somedate',
transitions: 1,
downloads: 2,
registered: 3,
played: 4,
},{
date: 'somedate2',
transitions: 5,
downloads: 6,
registered: 7,
played: 8,
}]
}),
computed: {
totalPromotions() {
const accumulator = {
totalDownloads: 0,
totalPlayed: 0,
totalRegistered: 0,
totalTransitions: 0
}
// sum each promotion variable
this.promotions.forEach(promotion => {
accumulator.totalDownloads += promotion.downloads;
accumulator.totalPlayed += promotion.played;
accumulator.totalRegistered += promotion.registered;
accumulator.totalTransitions += promotion.transitions
});
return accumulator;
}
}
}
</script>

Target a specific cell background color in a v-for loop

With vuejs I fill a table with some data with this code :
<tr v-for="droit in listedroit">
<td>{{ droit.id_u }}</td>
<td>{{ droit.role }}</td>
<td>{{ droit.id_e }}</td>
<td>{{ droit.droits }}</td>
<td v-bind:style="{ 'background-color': statusColor }">STATUS</td>
</tr>
statusColor is computed in my app.js and returned to the template.
Some rows need a red cell, others a green one (I check if the rights are RO(green) or RW(red)).
The problem is I failed to target a specific cell of a row, and if I set statusColor to 'red', the whole column is red.
How can I achieve this ?
Thanks a lot for your help.
You can use a method instead of a computed property
<template>
<tr v-for="droit in listedroit">
<td>{{ droit.id_u }}</td>
<td>{{ droit.role }}</td>
<td>{{ droit.id_e }}</td>
<td>{{ droit.droits }}</td>
<td v-bind:style="{ 'background-color': statusColor(droit.rights) }">STATUS</td>
</tr>
</template>
export default{
methods: {
statusColor(rights){
if(rights === 'RO'){
return 'green';
} else {
return 'red';
}
}
}
}

How to get count on v-if list with variable?

I want to show one list based one variable, but if I show {{ i }} represents entire count, how I get count only the current list?
Thats my code:
<tr v-for="(item, i) in placares" v-if="item.dificuldade == dificuldadeAtual.nome">
<td>{{ i }}</td>
<td>{{ item.nome }}</td>
<td>{{ item.fase }}</td>
<td>{{ item.pontos | formatNumber }}</td>
</tr>
The app is running here: http://digitacao.serraonline.net.br/
Your question is not so clear but i think this will help you:
<tr v-for="(item, index) in placares">
<div v-if="item.dificuldade == dificuldadeAtual.nome">
<td>{{ index }}</td>
<td>{{ item.nome }}</td>
<td>{{ item.fase }}</td>
<td>{{ item.pontos | formatNumber }}</td>
</div>
</tr>
Don't use v-for and v-if in same element, v-for will get priority.
It's not semantic, i solved the problem using one method to filter the list
methods:{
filterPlacar(dificuldade){
return _.take(_.filter(this.placares, item => {
return item.dificuldade.indexOf(dificuldade) >=0;
}),15);
}
}
And the v-for:
<tr v-for="(item, j) in filterPlacar(dificuldadeAtual.nome)">
<td>{{ ++j }}</td>
<td>{{ item.nome }}</td>
<td>{{ item.fase }}</td>
<td>{{ item.pontos | formatNumber }}</td>
</tr>
You can replace v-if with v-show like:
<tr v-for="(item, i) in placares" v-show="item.dificuldade == dificuldadeAtual.nome">
<td>{{ i }}</td>
<td>{{ item.nome }}</td>
<td>{{ item.fase }}</td>
<td>{{ item.pontos | formatNumber }}</td>
</tr>
or use v-if in your tds like:
<tr v-for="(item, i) in placares">
<template v-if="item.dificuldade == dificuldadeAtual.nome">
<td>{{ i }}</td>
<td>{{ item.nome }}</td>
<td>{{ item.fase }}</td>
<td>{{ item.pontos | formatNumber }}</td>
</template>
</tr>