I'm using formik to handle my form for this file upload input. I want to show the name of the files currently in the dropzone of the files or one line bellow. however, right now im not seeing a name just the word item. any help?
<div className="mb-3">
<Heading type="h6-small-bold">
<label htmlFor="files">Upload Files</label>
</Heading>
<input
type="file"
role="input"
className="form-control my-2"
id="files"
multiple
onChange={(event: ChangeEvent) => {
setFieldValue(
'files',
(event.target as HTMLInputElement).files
);
}}
/>
{values.files.item.name}
{errors.files && touched.files ? (
<div className="alert alert-danger">
{errors.files.toString()}
</div>
) : null}
</div>
The answer was:
{Array.from(values.files).map((file, index) => (
<div className="text-success" key={index}>
{file.name}
</div>
))}
Related
I have a reactive array that I am trying to determine the best way to handle. It's a standard add/remove but one of the 3 fields that is part of that add/remove section updates one of the others. 1 field is a service the other is the quantity of that service and the third totals the service price + quantity = that field price.
I am having issues working on the indexing and I can't wrap my head around it.
relavent HTML
<div class="col-span-6 gap-4">
<div class="grid grid-cols-6 gap-6" v-for="(service, index) in form.services" :key="index">
<div class="col-span-3 gap-4">
<Label for="service" value="Service" :class="[form.zip_codes == '' ? disableLabel : '']"/>
<v-select label="serviceData" :options="servicesData" v-model="service[index]"
:disabled="form.zip_codes == ''"
class="mt-1 block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm">
</v-select>
<InputError :message="form.errors.services" class="mt-2"/>
</div>
<div class="col-span-1 gap-4">
<Label for="quantity" value="Quantity" :class="[form.zip_codes == '' ? disableLabel : '']"/>
<Input id="quantity" v-model="service.quantity" type="number" class="mt-1 block w-full"
:disabled="form.zip_codes == ''"
autocomplete="phone_2"
#change="calculatePrice($event.target.value, service[index], index)"/>
<InputError :message="form.errors.quantity" class="mt-2"/>
</div>
<div class="col-span-2 gap-4">
<Label for="price" value="Price"/>
<Input id="price" v-model="servicePrice[index]" type="text" class="mt-1 block w-full" disabled
:disabled="form.zip_codes == ''"
autocomplete="phone_2"/>
<InputError :message="form.errors.quantity" class="mt-2"/>
</div>
<SecondaryButton #click="removeService(index)">Remove</SecondaryButton>
</div>
<div class="pt-5">
<SecondaryButton
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing"
type="button"
#click="addServices()"
>
Add Services
</SecondaryButton>
</div>
my main focus is calculatePrice()
defineProps({
zip_codes: Object,
appointment_types: Array,
servicesData: Object
})
const servicePrice = reactive([])
const calculatePrice = (quantity, service, index) => {
servicePrice.push( Math.round((quantity * service.price) * 100) / 100);
}
As you can see I can push a new value to it but I am not sure how to set it to the correct index. I tried servicePrice[index] but it just returns -1.
Ref or Recative are instantaneous changing values.
You can watch the relevant fields with watch, if there is a change, you can make the calculation.
watch(() => servicePrice.value ,() => {
servicePrice.value = Math.round((quantity * service.price) * 100) / 100;
})
Sorry. I face some problem on how to display the data that nested in array.(Vue js)
Here is the return array
I would to show the data in total_billed_by_year
I tried several other attempts but nothing works.
Could please someone help me out with this?
getInfo(index){
this.popup = true;
this.inquiryForm.total_contractual=this.pageData.ppr_data[index].total_contractual;
this.inquiryForm.bil_year =this.pageData.ppr_data[index].total_billed_by_year[index].bil_year;
this.inquiryForm.bil_total_amount =this.pageData.ppr_data[index].total_billed_year.bil_total_amount;
},
<vs-popup :active.sync="popup">
<div class="vx-row mb-base">
<div class="vx-col lg:w-1/2 w-full mb-base">
<vx-card
title="Total Bill"
icon="/images/task.png"
headerClass="bg-dark pb-6"
titleColor="#fff"
subtitleColor="#fff"
>
<template slot="no-body">
<div
id=""
class="transition-all duration-500 ease-in-out p-4"
>
<div class="grid lg:grid-cols-3 grid-cols-1">
<div class="mt-5 ml-2">
<h5>Total Contractual Amount</h5>
<div class="text-lg">
<div v-if="inquiryForm.total_contractual">
<div>RM {{inquiryForm.total_contractual}} </div>
</div><div v-else>-</div></div>
</div>
<div class="mt-5 ml-2">
<h5>Bill {{inquiryForm.bil_year}} </h5>
<div class="text-lg">
<div>RM {{inquiryForm.bil_total_amount}}
</div>
</div>
</div>
</div>
</template>
</vx-card>
</div>
</div>
</vs-popup>
<vs-list-item
class="hover:shadow"
v-for="(tr, index) in ppr"
v-bind:key="index"
>
<template slot="subtitle">
<div #click="getInfo(index)" class="cursor-pointer">{{tr.id}}</div>
</template>{{tr.total_billed_by_year[index].bil_year}}
<span class="font-bold truncate overflow-auto">{{tr.month}} -{{tr.year}}
<p v-for="(bill,ind) in tr.total_billed_by_year" v-bind:key="ind">
{{bill.bil_year}}{{bill.bil_total_amount}}
</p>
</span>
</vs-list-item>
I think the easiest way would be make your column total_bil_year to return as a array via casting from its model. Something like below (if total_billed_by_year column is a json column)
protected $casts = [
'total_billed_by_year' => 'array'
];
Based on the image you attached to the question shows that it is returned as a json. So you can convert it as object at vue also. Something like below
JSON.parse(tr.total_billed_by_year) which will convert into a array and that array contain the object. See the below image. I just reproduced it at console
you can use it like below. Or just make a function to convert your jsons to objects where you can use it when you want
</template>{{JSON.parse(tr.total_billed_by_year)[0].bil_year}}
baby, using JSON.parse(yourJSONString) to transform your json string to json object.
I have a dynamically created checkbox list and I'm having trouble to check the some trues according to a pre-defined list.
HTML:
<div class="row">
<div class="example-container col-md-6">
<div *ngFor="let atribuicao of atribuicoesOcorrencia" formArraylName="inputAtribuicaoOcorrencia">
<mat-checkbox [value]="atribuicao.id" (change)="onChange(atribuicao, $event)">
<div style="white-space: pre-wrap;">
{{ atribuicao.descricao }}
</div>
</mat-checkbox>
</div>
</div>
</div>
CLASS TS:
I try populate formControl name inputAtribuicaoOcorrencia in a list, in this case
the only one checekd was id 3, but nothing happens
this.atribuicoesOcorrencia.forEach(listAtibuicoes=> {
ocorrencia.atribuicoesDTO.forEach(x => {
if(listAtibuicoes.id == x.id){
this.formCadastro.get('inputAtribuicaoOcorrencia').setValue('checked');
}
});
});
CLASS TS2:
Or the code bellow for one ID checked only
this.formCadastro.patchValue({
inputAtribuicaoOcorrencia: 'checked',
});
You need to use the [checked] attribute for the mat-checkbox
// example
<mat-checkbox
[value]="atribuicao.id"
[checked]="atribuicao.id" // This is what you need to add. If id is there, it will get checked
(change)="onChange(atribuicao, $event)"
>
<div style="white-space: pre-wrap;">
{{ atribuicao.descricao }}
</div>
</mat-checkbox>
<div class="ty-company-fields">
<div class="apply_for_vendor_account">
<h1 class="tygh-top-panel ty-dropdown-box__title ty-mainbox-simple-title ty-mainbox-simple-container clearfix ty-homepage-vendors">Calculator</h1>
<form action="" method="post" name="calculator" id="calculator">
<div class="ty-control-group">
<label for="contact_form" class="ty-control-group__title cm-required ty-input-text cm-focus" >Please Enter First Number</label>
<input type="text" name="cal[value1]" id="contact_form" size="32" value="{$cal.value1}" class="ty-input-text cm-focus ty-control-group_title cm-required" />
</div>
<div class="ty-control-group">
<label for="contact_form_number" class="ty-control-group__title cm-required">Please Enter Second Number</label>
<input type="text" name="cal[value2]" id="contact_form_number" class="ty-input-text cm-focus ty-control-group_title cm-required" size="32" value="{$cal.value2}" />
</div>
{if $result }
<p>The Result is: {$result}</p>
{/if}
<div class="buttons-container">
{include file="buttons/button.tpl" but_text=__("submit") but_name="dispatch[calculator2.add]" but_id="contact" but_meta="ty-btn__primary" value = "+" data-ca-target-form="calculator" data-ca-dispatch="dispatch[calculator.calculator]"}
{include file="buttons/button.tpl" but_text=__("submit") but_name="dispatch[calculator.add]" but_id="contact" but_meta="ty-btn__primary" value = "+"}
{include file="buttons/button.tpl" but_text=__("submit") but_name="dispatch[calculator.add]" but_id="contact" but_meta="ty-btn__primary" value = "+"}
{include file="buttons/button.tpl" but_text=__("submit") but_name="dispatch[calculator.add]" but_id="contact" but_meta="ty-btn__primary" value = "+"}
</div>
</form>
</div>
</div>
you can use the normal form and normal submit button, Normal way is also works fine in cs cart.
In this case, when you press the button the whole values are post to controller calculator.add and take the actions.
Inside form tag in action attribute, you need this:
<form action="{""|fn_url}" method="post" name="calculator" id="calculator">
...
</form>
In the first parameter you could also insert a specific dispatch value, for example calculator.manage if you want to navigate to specific page of yours or leave it empty.
Moreover, inside your tpl file add this at the bottom (and inside capture smarty tag):
{capture name="buttons"}
{include file="buttons/save.tpl" but_name="dispatch[calculator.manage]" but_role="submit-link" but_target_form="calculator"}
{/capture}
this capture smarty tag, will add the general Save button of cs-cart, at the right top corner.
Now, you probably have a controller file named calculator.php which also contain code like that:
if($mode == "manage") {
//your code here
}
I have a page which has a search box(input text) which takes a place name as input and returns all the nearby dealers.
I also happen to have filters (checkboxes) for all the brand
<div class="col-sm-12 col-md-12">
{!! Form::checkbox('filters',$bike_oem, false,['style'=>'padding-right:5px;'] ) !!} <span style="padding-left:5px;"></span>{{ $bike_oem }}
</div>
How do I implement get the value of filter in my controller ?
<div class="col-sm-12 col-md-12">
<input style="padding-right:5px;" name="Hyundai " type="checkbox" value="Y"> <span style="padding-left:5px;"></span>Hyundai
</div>
This is how each filter appears in the page. Is the code correct to fetch the value in controller ? Please suggest
You can get the value of checkbox in this way also(in controller)
public function myFunction(Request $request){
if (isset($request['Hyundai']) && ($request['Hyundai'] == "on")) {
$value = "Y";
}
}