123 lines
5.9 KiB
PHP
123 lines
5.9 KiB
PHP
|
<div v-cloak class="row" v-if="!isEmptyVariationType">
|
||
|
|
<div class="col-lg-2 col-sm-2">
|
||
|
|
<h5>{{ trans('variation::variations.group.values') }}</h5>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-7 col-sm-10">
|
||
|
|
<div class="variation-values clearfix">
|
||
|
|
<div class="table-responsive">
|
||
|
|
<table
|
||
|
|
class="options table table-bordered table-striped"
|
||
|
|
:class="form.type !== '' ? `type-${form.type}` : ''"
|
||
|
|
>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th></th>
|
||
|
|
<th>
|
||
|
|
{{ trans('variation::variations.form.label') }}
|
||
|
|
<span class="text-red">*</span>
|
||
|
|
</th>
|
||
|
|
<th v-if="form.type === 'color'">
|
||
|
|
{{ trans('variation::variations.form.color') }}
|
||
|
|
<span class="text-red">*</span>
|
||
|
|
</th>
|
||
|
|
<th v-else-if="form.type === 'image'">
|
||
|
|
{{ trans('variation::variations.form.image') }}
|
||
|
|
<span class="text-red">*</span>
|
||
|
|
</th>
|
||
|
|
<th></th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
|
||
|
|
<tbody
|
||
|
|
is="draggable"
|
||
|
|
tag="tbody"
|
||
|
|
handle=".drag-handle"
|
||
|
|
animation="150"
|
||
|
|
:list="form.values"
|
||
|
|
@end="updateColorThumbnails"
|
||
|
|
>
|
||
|
|
<tr v-for="(value, index) in form.values" class="option-row" :key="index">
|
||
|
|
<td class="text-center">
|
||
|
|
<span class="drag-handle">
|
||
|
|
<i class="fa"></i>
|
||
|
|
<i class="fa"></i>
|
||
|
|
</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
:name="`values.${value.uid}.label`"
|
||
|
|
:id="`values-${value.uid}-label`"
|
||
|
|
class="form-control"
|
||
|
|
@keyup.enter="addRowOnPressEnter($event, index)"
|
||
|
|
v-model="value.label"
|
||
|
|
>
|
||
|
|
|
||
|
|
<span
|
||
|
|
class="help-block text-red"
|
||
|
|
v-if="errors.has(`values.${value.uid}.label`)"
|
||
|
|
v-text="errors.get(`values.${value.uid}.label`)"
|
||
|
|
>
|
||
|
|
</span>
|
||
|
|
</td>
|
||
|
|
<td v-if="form.type === 'color'">
|
||
|
|
<div>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
:name="`values.${value.uid}.color`"
|
||
|
|
:id="`values-${value.uid}-color`"
|
||
|
|
class="form-control color-picker"
|
||
|
|
v-model="value.color"
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<span
|
||
|
|
class="help-block text-red"
|
||
|
|
v-if="errors.has(`values.${value.uid}.color`)"
|
||
|
|
v-text="errors.get(`values.${value.uid}.color`)"
|
||
|
|
>
|
||
|
|
</span>
|
||
|
|
</td>
|
||
|
|
<td v-else-if="form.type === 'image'">
|
||
|
|
<div class="d-flex">
|
||
|
|
<div
|
||
|
|
class="image-holder"
|
||
|
|
@click="chooseImage(index, value.uid)"
|
||
|
|
>
|
||
|
|
<template v-if="value.image.id">
|
||
|
|
<img :src="value.image.path" alt="variation image">
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<img v-else src="{{ asset('build/assets/placeholder_image.png') }}" class="placeholder-image" alt="Placeholder image">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<span
|
||
|
|
class="help-block text-red"
|
||
|
|
v-if="errors.has(`values.${value.uid}.image`)"
|
||
|
|
v-text="errors.get(`values.${value.uid}.image`)"
|
||
|
|
>
|
||
|
|
</span>
|
||
|
|
</td>
|
||
|
|
<td class="text-center">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
tabindex="-1"
|
||
|
|
class="btn btn-default delete-row"
|
||
|
|
@click="deleteRow(index, value.uid)"
|
||
|
|
>
|
||
|
|
<i class="fa fa-trash"></i>
|
||
|
|
</button>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button type="button" class="btn btn-default" @click="addRow">
|
||
|
|
{{ trans('variation::variations.form.add_row') }}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|