Separate input type for Rating,Scale,Slider (#351)
* Separate input type for Rating,Scale,Slider * rating, scale, slider add in test cases * Allow field type change for new types * Added options to db factory * Fix linting --------- Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
formsdev
GitHub
parent
c73fcd226b
commit
c8628ed840
|
|
@ -108,7 +108,7 @@ class GenerateTemplate extends Command
|
|||
"color": "#64748b"
|
||||
}
|
||||
```
|
||||
The form properties can only have one of the following types: 'text', 'number', 'select', 'multi_select', 'date', 'files', 'checkbox', 'url', 'email', 'phone_number', 'signature'.
|
||||
The form properties can only have one of the following types: 'text', 'number', 'rating', 'scale','slider', 'select', 'multi_select', 'date', 'files', 'checkbox', 'url', 'email', 'phone_number', 'signature'.
|
||||
All form properties objects need to have the keys 'help', 'name', 'type', 'hidden', 'placeholder', 'prefill'.
|
||||
The placeholder property is optional (can be "null") and is used to display a placeholder text in the input field.
|
||||
The help property is optional (can be "null") and is used to display extra information about the field.
|
||||
|
|
@ -125,14 +125,9 @@ class GenerateTemplate extends Command
|
|||
}
|
||||
```
|
||||
|
||||
For numerical rating inputs, use a "number" type input and set the property "is_rating" to "true" to turn it into a star rating input. Ex:
|
||||
```json
|
||||
{
|
||||
"name":"How would you rate your overall experience?",
|
||||
"type":"number",
|
||||
"is_rating": true
|
||||
}
|
||||
```
|
||||
For "rating" you can set the field property "rating_max_value" to set the maximum value of the rating.
|
||||
For "scale" you can set the field property "scale_min_value", "scale_max_value" and "scale_step_value" to set the minimum, maximum and step value of the scale.
|
||||
For "slider" you can set the field property "slider_min_value", "slider_max_value" and "slider_step_value" to set the minimum, maximum and step value of the slider.
|
||||
|
||||
If the form is too long, you can paginate it by adding a page break block in the list of properties:
|
||||
```json
|
||||
|
|
@ -230,6 +225,7 @@ class GenerateTemplate extends Command
|
|||
['role' => 'user', 'content' => Str::of(self::FORM_STRUCTURE_PROMPT)->replace('[REPLACE]', $this->argument('prompt'))->toString()],
|
||||
]);
|
||||
$formData = $completer->getArray();
|
||||
$formData = self::cleanAiOutput($formData);
|
||||
|
||||
$completer->doesNotExpectJson();
|
||||
$formDescriptionPrompt = Str::of(self::FORM_DESCRIPTION_PROMPT)->replace('[REPLACE]', $this->argument('prompt'))->toString();
|
||||
|
|
@ -333,7 +329,6 @@ class GenerateTemplate extends Command
|
|||
|
||||
private function getRelatedTemplates(array $industries, array $types): array
|
||||
{
|
||||
ray($industries, $types);
|
||||
$templateScore = [];
|
||||
Template::chunk(100, function ($otherTemplates) use ($industries, $types, &$templateScore) {
|
||||
foreach ($otherTemplates as $otherTemplate) {
|
||||
|
|
@ -361,24 +356,6 @@ class GenerateTemplate extends Command
|
|||
array $types,
|
||||
array $relatedTemplates
|
||||
) {
|
||||
// Add property uuids, improve form with options
|
||||
foreach ($formData['properties'] as &$property) {
|
||||
$property['id'] = Str::uuid()->toString(); // Column ID
|
||||
|
||||
// Fix ratings
|
||||
if ($property['type'] == 'number' && ($property['is_rating'] ?? false)) {
|
||||
$property['rating_max_value'] = 5;
|
||||
}
|
||||
|
||||
if (($property['type'] == 'select' && count($property['select']['options']) <= 4)
|
||||
|| ($property['type'] == 'multi_select' && count($property['multi_select']['options']) <= 4)) {
|
||||
$property['without_dropdown'] = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Clean data
|
||||
$formTitle = Str::of($formTitle)->replace('"', '')->toString();
|
||||
|
||||
return Template::create([
|
||||
'name' => $formTitle,
|
||||
'description' => $formDescription,
|
||||
|
|
@ -406,4 +383,36 @@ class GenerateTemplate extends Command
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
public static function cleanAiOutput(array $formData): array
|
||||
{
|
||||
// Add property uuids, improve form with options
|
||||
foreach ($formData['properties'] as &$property) {
|
||||
$property['id'] = Str::uuid()->toString(); // Column ID
|
||||
|
||||
// Fix types
|
||||
if ($property['type'] == 'rating') {
|
||||
$property['rating_max_value'] = $property['rating_max_value'] ?? 5;
|
||||
} elseif ($property['type'] == 'scale') {
|
||||
$property['scale_min_value'] = $property['scale_min_value'] ?? 1;
|
||||
$property['scale_max_value'] = $property['scale_max_value'] ?? 5;
|
||||
$property['scale_step_value'] = $property['scale_step_value'] ?? 1;
|
||||
} elseif ($property['type'] == 'slider') {
|
||||
$property['slider_min_value'] = $property['slider_min_value'] ?? 0;
|
||||
$property['slider_max_value'] = $property['slider_max_value'] ?? 100;
|
||||
$property['slider_step_value'] = $property['slider_step_value'] ?? 1;
|
||||
}
|
||||
|
||||
if (($property['type'] == 'select' && count($property['select']['options']) <= 4)
|
||||
|| ($property['type'] == 'multi_select' && count($property['multi_select']['options']) <= 4)
|
||||
) {
|
||||
$property['without_dropdown'] = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Clean data
|
||||
$formData['title'] = Str::of($formData['title'])->replace('"', '')->toString();
|
||||
|
||||
return $formData;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
<?php
|
||||
|
||||
namespace App\Console\Commands;
|
||||
|
||||
use App\Models\Forms\Form;
|
||||
use Illuminate\Console\Command;
|
||||
|
||||
class InputNumberMigration extends Command
|
||||
{
|
||||
/**
|
||||
* The name and signature of the console command.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $signature = 'forms:input-number-migration';
|
||||
|
||||
/**
|
||||
* The console command description.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $description = 'One Time Only -- Separate input type for number (rating, scale, slider)';
|
||||
|
||||
/**
|
||||
* Execute the console command.
|
||||
*
|
||||
* @return int
|
||||
*/
|
||||
public function handle()
|
||||
{
|
||||
Form::chunk(
|
||||
100,
|
||||
function ($forms) {
|
||||
foreach ($forms as $form) {
|
||||
$this->line('Process For Form: ' . $form->id . ' - ' . $form->slug);
|
||||
|
||||
$form->properties = collect($form->properties)->map(function ($property) {
|
||||
if ($property['type'] === 'number') {
|
||||
// Rating
|
||||
if (isset($property['is_rating']) && $property['is_rating']) {
|
||||
$this->line('Rating Field');
|
||||
$property['type'] = 'rating';
|
||||
unset($property['is_rating']);
|
||||
}
|
||||
|
||||
// Scale
|
||||
if (isset($property['is_scale']) && $property['is_scale']) {
|
||||
$this->line('Scale Field');
|
||||
$property['type'] = 'scale';
|
||||
unset($property['is_scale']);
|
||||
}
|
||||
|
||||
// Slider
|
||||
if (isset($property['is_slider']) && $property['is_slider']) {
|
||||
$this->line('Slider Field');
|
||||
$property['type'] = 'slider';
|
||||
unset($property['is_slider']);
|
||||
}
|
||||
}
|
||||
return $property;
|
||||
})->toArray();
|
||||
$form->update();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
$this->line('Migration Done');
|
||||
}
|
||||
}
|
||||
|
|
@ -79,7 +79,7 @@ class AnswerFormRequest extends FormRequest
|
|||
if ($property['type'] == 'checkbox') {
|
||||
// Required for checkboxes means true
|
||||
$rules[] = 'accepted';
|
||||
} elseif ($property['type'] == 'number' && isset($property['is_rating']) && $property['is_rating']) {
|
||||
} elseif ($property['type'] == 'rating') {
|
||||
// For star rating, needs a minimum of 1 star
|
||||
$rules[] = 'min:1';
|
||||
}
|
||||
|
|
@ -141,7 +141,7 @@ class AnswerFormRequest extends FormRequest
|
|||
$messages[$property['id'] . '.1.required_with'] = 'To date is required';
|
||||
$messages[$property['id'] . '.0.before_or_equal'] = 'From date must be before or equal To date';
|
||||
}
|
||||
if ($property['type'] == 'number' && isset($property['is_rating']) && $property['is_rating']) {
|
||||
if ($property['type'] == 'rating') {
|
||||
$messages[$property['id'] . '.min'] = 'A rating must be selected';
|
||||
}
|
||||
}
|
||||
|
|
@ -159,10 +159,9 @@ class AnswerFormRequest extends FormRequest
|
|||
case 'signature':
|
||||
return ['string'];
|
||||
case 'number':
|
||||
if ($property['is_rating'] ?? false) {
|
||||
return ['numeric'];
|
||||
}
|
||||
|
||||
case 'rating':
|
||||
case 'scale':
|
||||
case 'slider':
|
||||
return ['numeric'];
|
||||
case 'select':
|
||||
case 'multi_select':
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ class GenerateAiForm implements ShouldQueue
|
|||
|
||||
$this->completion->update([
|
||||
'status' => AiFormCompletion::STATUS_COMPLETED,
|
||||
'result' => $this->cleanOutput($completer->getArray()),
|
||||
'result' => GenerateTemplate::cleanAiOutput($completer->getArray())
|
||||
]);
|
||||
} catch (\Exception $e) {
|
||||
$this->onError($e);
|
||||
|
|
@ -61,16 +61,6 @@ class GenerateAiForm implements ShouldQueue
|
|||
|
||||
}
|
||||
|
||||
private function cleanOutput($formData)
|
||||
{
|
||||
// Add property uuids
|
||||
foreach ($formData['properties'] as &$property) {
|
||||
$property['id'] = Str::uuid()->toString();
|
||||
}
|
||||
|
||||
return $formData;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle a job failure.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -288,6 +288,168 @@ class FormPropertyLogicRule implements DataAwareRule, Rule
|
|||
],
|
||||
],
|
||||
],
|
||||
'rating' => [
|
||||
'comparators' => [
|
||||
'equals' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'does_not_equal' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'greater_than' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'less_than' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'greater_than_or_equal_to' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'less_than_or_equal_to' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'is_empty' => [
|
||||
'expected_type' => 'boolean',
|
||||
'format' => [
|
||||
'type' => 'enum',
|
||||
'values' => [true],
|
||||
],
|
||||
],
|
||||
'is_not_empty' => [
|
||||
'expected_type' => 'boolean',
|
||||
'format' => [
|
||||
'type' => 'enum',
|
||||
'values' => [true],
|
||||
],
|
||||
],
|
||||
'content_length_equals' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'content_length_does_not_equal' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'content_length_greater_than' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'content_length_greater_than_or_equal_to' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'content_length_less_than' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'content_length_less_than_or_equal_to' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
],
|
||||
],
|
||||
'scale' => [
|
||||
'comparators' => [
|
||||
'equals' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'does_not_equal' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'greater_than' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'less_than' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'greater_than_or_equal_to' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'less_than_or_equal_to' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'is_empty' => [
|
||||
'expected_type' => 'boolean',
|
||||
'format' => [
|
||||
'type' => 'enum',
|
||||
'values' => [true],
|
||||
],
|
||||
],
|
||||
'is_not_empty' => [
|
||||
'expected_type' => 'boolean',
|
||||
'format' => [
|
||||
'type' => 'enum',
|
||||
'values' => [true],
|
||||
],
|
||||
],
|
||||
'content_length_equals' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'content_length_does_not_equal' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'content_length_greater_than' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'content_length_greater_than_or_equal_to' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'content_length_less_than' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'content_length_less_than_or_equal_to' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
],
|
||||
],
|
||||
'slider' => [
|
||||
'comparators' => [
|
||||
'equals' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'does_not_equal' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'greater_than' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'less_than' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'greater_than_or_equal_to' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'less_than_or_equal_to' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'is_empty' => [
|
||||
'expected_type' => 'boolean',
|
||||
'format' => [
|
||||
'type' => 'enum',
|
||||
'values' => [true],
|
||||
],
|
||||
],
|
||||
'is_not_empty' => [
|
||||
'expected_type' => 'boolean',
|
||||
'format' => [
|
||||
'type' => 'enum',
|
||||
'values' => [true],
|
||||
],
|
||||
],
|
||||
'content_length_equals' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'content_length_does_not_equal' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'content_length_greater_than' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'content_length_greater_than_or_equal_to' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'content_length_less_than' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
'content_length_less_than_or_equal_to' => [
|
||||
'expected_type' => 'number',
|
||||
],
|
||||
],
|
||||
],
|
||||
'checkbox' => [
|
||||
'comparators' => [
|
||||
'equals' => [
|
||||
|
|
@ -607,7 +769,8 @@ class FormPropertyLogicRule implements DataAwareRule, Rule
|
|||
{
|
||||
if (is_array($actions) && count($actions) > 0) {
|
||||
foreach ($actions as $val) {
|
||||
if (! in_array($val, static::ACTIONS_VALUES) ||
|
||||
if (
|
||||
!in_array($val, static::ACTIONS_VALUES) ||
|
||||
(in_array($this->field['type'], ['nf-text', 'nf-code', 'nf-page-break', 'nf-divider', 'nf-image']) && !in_array($val, ['hide-block', 'show-block'])) ||
|
||||
(isset($this->field['hidden']) && $this->field['hidden'] && !in_array($val, ['show-block', 'require-answer'])) ||
|
||||
(isset($this->field['required']) && $this->field['required'] && !in_array($val, ['make-it-optional', 'hide-block', 'disable-block'])) ||
|
||||
|
|
|
|||
|
|
@ -58,6 +58,9 @@ class FormLogicConditionChecker
|
|||
case 'phone_number':
|
||||
return $this->textConditionMet($propertyCondition, $value);
|
||||
case 'number':
|
||||
case 'rating':
|
||||
case 'scale':
|
||||
case 'slider':
|
||||
return $this->numberConditionMet($propertyCondition, $value);
|
||||
case 'checkbox':
|
||||
return $this->checkboxConditionMet($propertyCondition, $value);
|
||||
|
|
|
|||
|
|
@ -46,4 +46,10 @@ const onClickAway = (event) => {
|
|||
close(event)
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
close,
|
||||
toggle
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,73 +1,48 @@
|
|||
<template>
|
||||
<div v-if="!isFieldHidden"
|
||||
:id="'block-'+field.id" :class="getFieldWidthClasses(field)"
|
||||
>
|
||||
<div v-if="!isFieldHidden" :id="'block-' + field.id" :class="getFieldWidthClasses(field)">
|
||||
<div :class="getFieldClasses(field)">
|
||||
<div v-if="adminPreview"
|
||||
class="absolute -translate-x-full top-0 bottom-0 opacity-0 group-hover/nffield:opacity-100 transition-opacity mb-4"
|
||||
>
|
||||
<div class="flex flex-col bg-white rounded-md" :class="{'lg:flex-row':!fieldSideBarOpened, 'xl:flex-row':fieldSideBarOpened}">
|
||||
class="absolute -translate-x-full top-0 bottom-0 opacity-0 group-hover/nffield:opacity-100 transition-opacity mb-4">
|
||||
<div class="flex flex-col bg-white rounded-md"
|
||||
:class="{ 'lg:flex-row': !fieldSideBarOpened, 'xl:flex-row': fieldSideBarOpened }">
|
||||
<div class="p-2 -mr-3 -mb-2 text-gray-300 hover:text-blue-500 cursor-pointer hidden xl:block" role="button"
|
||||
:class="{ 'lg:block': !fieldSideBarOpened, 'xl:block': fieldSideBarOpened }"
|
||||
@click.prevent="openAddFieldSidebar"
|
||||
>
|
||||
@click.prevent="openAddFieldSidebar">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
|
||||
stroke="currentColor" class="w-5 h-5"
|
||||
>
|
||||
stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="p-2 text-gray-300 hover:text-blue-500 cursor-pointer" role="button"
|
||||
:class="{ 'lg:-mr-2': !fieldSideBarOpened, 'xl:-mr-2': fieldSideBarOpened }"
|
||||
@click.prevent="editFieldOptions"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
|
||||
class="w-5 h-5"
|
||||
>
|
||||
@click.prevent="editFieldOptions">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
|
||||
<path fill-rule="evenodd"
|
||||
d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 01-.517.608 7.45 7.45 0 00-.478.198.798.798 0 01-.796-.064l-.453-.324a1.875 1.875 0 00-2.416.2l-.243.243a1.875 1.875 0 00-.2 2.416l.324.453a.798.798 0 01.064.796 7.448 7.448 0 00-.198.478.798.798 0 01-.608.517l-.55.092a1.875 1.875 0 00-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 01-.064.796l-.324.453a1.875 1.875 0 00.2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 01.796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0 1.699-.663 1.85-1.567l.091-.549a.798.798 0 01.517-.608 7.52 7.52 0 00.478-.198.798.798 0 01.796.064l.453.324a1.875 1.875 0 002.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0 01-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0 001.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 01-.608-.517 7.507 7.507 0 00-.198-.478.798.798 0 01.064-.796l.324-.453a1.875 1.875 0 00-.2-2.416l-.243-.243a1.875 1.875 0 00-2.416-.2l-.453.324a.798.798 0 01-.796.064 7.462 7.462 0 00-.478-.198.798.798 0 01-.517-.608l-.091-.55a1.875 1.875 0 00-1.85-1.566h-.344zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="px-2 xl:pl-0 lg:pr-1 lg:pt-2 pb-2 bg-white rounded-md text-gray-300 hover:text-gray-500 cursor-grab draggable"
|
||||
:class="{'lg:pr-1 lg:pl-0':!fieldSideBarOpened, 'xl:-mr-2':fieldSideBarOpened}"
|
||||
role="button"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
|
||||
fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
|
||||
/>
|
||||
:class="{ 'lg:pr-1 lg:pl-0': !fieldSideBarOpened, 'xl:-mr-2': fieldSideBarOpened }" role="button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<component :is="getFieldComponents" v-if="getFieldComponents"
|
||||
v-bind="inputProperties(field)" :required="isFieldRequired"
|
||||
:disabled="isFieldDisabled?true:null"
|
||||
/>
|
||||
<component :is="getFieldComponents" v-if="getFieldComponents" v-bind="inputProperties(field)"
|
||||
:required="isFieldRequired" :disabled="isFieldDisabled ? true : null" />
|
||||
<template v-else>
|
||||
<div v-if="field.type === 'nf-text' && field.content" :id="field.id" :key="field.id"
|
||||
class="nf-text w-full mb-3" :class="[getFieldAlignClasses(field)]"
|
||||
v-html="field.content"
|
||||
/>
|
||||
<div v-if="field.type === 'nf-text' && field.content" :id="field.id" :key="field.id" class="nf-text w-full mb-3"
|
||||
:class="[getFieldAlignClasses(field)]" v-html="field.content" />
|
||||
<div v-if="field.type === 'nf-code' && field.content" :id="field.id" :key="field.id"
|
||||
class="nf-code w-full px-2 mb-3"
|
||||
v-html="field.content"
|
||||
/>
|
||||
<div v-if="field.type === 'nf-divider'" :id="field.id" :key="field.id"
|
||||
class="border-b my-4 w-full mx-2"
|
||||
/>
|
||||
<div v-if="field.type === 'nf-image' && (field.image_block || !isPublicFormPage)" :id="field.id"
|
||||
:key="field.id" class="my-4 w-full px-2" :class="[getFieldAlignClasses(field)]"
|
||||
>
|
||||
class="nf-code w-full px-2 mb-3" v-html="field.content" />
|
||||
<div v-if="field.type === 'nf-divider'" :id="field.id" :key="field.id" class="border-b my-4 w-full mx-2" />
|
||||
<div v-if="field.type === 'nf-image' && (field.image_block || !isPublicFormPage)" :id="field.id" :key="field.id"
|
||||
class="my-4 w-full px-2" :class="[getFieldAlignClasses(field)]">
|
||||
<div v-if="!field.image_block" class="p-4 border border-dashed">
|
||||
Open <b>{{ field.name }}'s</b> block settings to upload image.
|
||||
</div>
|
||||
|
|
@ -135,15 +110,6 @@ export default {
|
|||
if (field.type === 'url' && field.file_upload) {
|
||||
return 'FileInput'
|
||||
}
|
||||
if (field.type === 'number' && field.is_rating && field.rating_max_value) {
|
||||
return 'RatingInput'
|
||||
}
|
||||
if (field.type === 'number' && field.is_scale && field.scale_max_value) {
|
||||
return 'ScaleInput'
|
||||
}
|
||||
if (field.type === 'number' && field.is_slider && field.slider_max_value) {
|
||||
return 'SliderInput'
|
||||
}
|
||||
if (['select', 'multi_select'].includes(field.type) && field.without_dropdown) {
|
||||
return 'FlatSelectInput'
|
||||
}
|
||||
|
|
@ -159,6 +125,9 @@ export default {
|
|||
return {
|
||||
text: 'TextInput',
|
||||
number: 'TextInput',
|
||||
rating: 'RatingInput',
|
||||
scale: 'ScaleInput',
|
||||
slider: 'SliderInput',
|
||||
select: 'SelectInput',
|
||||
multi_select: 'SelectInput',
|
||||
date: 'DateInput',
|
||||
|
|
@ -305,13 +274,13 @@ export default {
|
|||
inputProperties.multiple = (field.multiple !== undefined && field.multiple)
|
||||
inputProperties.mbLimit = Math.min(Math.max(field.max_file_size, 1), this.form?.max_file_size ?? this.currentWorkspace?.max_file_size)
|
||||
inputProperties.accept = (this.form.is_pro && field.allowed_file_types) ? field.allowed_file_types : ''
|
||||
} else if (field.type === 'number' && field.is_rating) {
|
||||
inputProperties.numberOfStars = parseInt(field.rating_max_value)
|
||||
} else if (field.type === 'number' && field.is_scale) {
|
||||
} else if (field.type === 'rating') {
|
||||
inputProperties.numberOfStars = parseInt(field.rating_max_value) ?? 5
|
||||
} else if (field.type === 'scale') {
|
||||
inputProperties.minScale = parseInt(field.scale_min_value) ?? 1
|
||||
inputProperties.maxScale = parseInt(field.scale_max_value) ?? 5
|
||||
inputProperties.stepScale = parseInt(field.scale_step_value) ?? 1
|
||||
} else if (field.type === 'number' && field.is_slider) {
|
||||
} else if (field.type === 'slider') {
|
||||
inputProperties.minSlider = parseInt(field.slider_min_value) ?? 0
|
||||
inputProperties.maxSlider = parseInt(field.slider_max_value) ?? 50
|
||||
inputProperties.stepSlider = parseInt(field.slider_step_value) ?? 5
|
||||
|
|
|
|||
|
|
@ -5,8 +5,7 @@
|
|||
<button class="text-gray-500 hover:text-gray-900 cursor-pointer" @click.prevent="closeSidebar">
|
||||
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
stroke-linejoin="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="font-semibold inline ml-2 truncate flex-grow truncate">
|
||||
|
|
@ -23,12 +22,10 @@
|
|||
<div class="grid grid-cols-2 gap-2">
|
||||
<div v-for="(block, i) in inputBlocks" :key="block.name"
|
||||
class="bg-gray-50 border hover:bg-gray-100 dark:bg-gray-900 rounded-md dark:hover:bg-gray-800 py-2 flex flex-col"
|
||||
role="button" @click.prevent="addBlock(block.name)"
|
||||
>
|
||||
role="button" @click.prevent="addBlock(block.name)">
|
||||
<div class="mx-auto">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor" stroke-width="2" v-html="block.icon"
|
||||
></svg>
|
||||
stroke="currentColor" stroke-width="2" v-html="block.icon"></svg>
|
||||
</div>
|
||||
<p class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1">
|
||||
{{ block.title }}
|
||||
|
|
@ -43,12 +40,10 @@
|
|||
<div class="grid grid-cols-2 gap-2">
|
||||
<div v-for="(block, i) in layoutBlocks" :key="block.name"
|
||||
class="bg-gray-50 border hover:bg-gray-100 dark:bg-gray-900 rounded-md dark:hover:bg-gray-800 py-2 flex flex-col"
|
||||
role="button" @click.prevent="addBlock(block.name)"
|
||||
>
|
||||
role="button" @click.prevent="addBlock(block.name)">
|
||||
<div class="mx-auto">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor" stroke-width="2" v-html="block.icon"
|
||||
></svg>
|
||||
stroke="currentColor" stroke-width="2" v-html="block.icon"></svg>
|
||||
</div>
|
||||
<p class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1">
|
||||
{{ block.title }}
|
||||
|
|
@ -129,6 +124,21 @@ export default {
|
|||
title: 'Number Input',
|
||||
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>'
|
||||
},
|
||||
{
|
||||
name: 'rating',
|
||||
title: 'Rating Input',
|
||||
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />'
|
||||
},
|
||||
{
|
||||
name: 'scale',
|
||||
title: 'Scale Input',
|
||||
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" />'
|
||||
},
|
||||
{
|
||||
name: 'slider',
|
||||
title: 'Slider Input',
|
||||
icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />'
|
||||
},
|
||||
{
|
||||
name: 'files',
|
||||
title: 'File Input',
|
||||
|
|
@ -178,6 +188,9 @@ export default {
|
|||
url: 'Link',
|
||||
phone_number: 'Phone Number',
|
||||
number: 'Number',
|
||||
rating: 'Rating',
|
||||
scale: 'Scale',
|
||||
slider: 'Slider',
|
||||
email: 'Email',
|
||||
checkbox: 'Checkbox',
|
||||
select: 'Select',
|
||||
|
|
@ -218,6 +231,19 @@ export default {
|
|||
if (['select', 'multi_select'].includes(this.blockForm.type)) {
|
||||
newBlock[this.blockForm.type] = { options: [] }
|
||||
}
|
||||
if (this.blockForm.type === 'rating') {
|
||||
newBlock.rating_max_value = 5
|
||||
}
|
||||
if (this.blockForm.type === 'scale') {
|
||||
newBlock.scale_min_value = 1
|
||||
newBlock.scale_max_value = 5
|
||||
newBlock.scale_step_value = 1
|
||||
}
|
||||
if (this.blockForm.type === 'slider') {
|
||||
newBlock.slider_min_value = 0
|
||||
newBlock.slider_max_value = 50
|
||||
newBlock.slider_step_value = 1
|
||||
}
|
||||
newBlock.help_position = 'below_input'
|
||||
if (this.selectedFieldIndex === null || this.selectedFieldIndex === undefined) {
|
||||
const newFields = clonedeep(this.form.properties)
|
||||
|
|
|
|||
|
|
@ -1,19 +1,14 @@
|
|||
|
||||
<template>
|
||||
<div v-if="content" class="flex flex-wrap">
|
||||
<div class="w-full font-semibold text-gray-700 dark:text-gray-300 mb-2">
|
||||
{{ property.name }}
|
||||
</div>
|
||||
<SelectInput v-model="content.operator" class="w-full" :options="operators"
|
||||
:name="'operator_'+property.id" placeholder="Comparison operator"
|
||||
@update:model-value="operatorChanged()"
|
||||
/>
|
||||
<SelectInput v-model="content.operator" class="w-full" :options="operators" :name="'operator_' + property.id"
|
||||
placeholder="Comparison operator" @update:model-value="operatorChanged()" />
|
||||
|
||||
<template v-if="needsInput">
|
||||
<component v-bind="inputComponentData" :is="inputComponentData.component" v-model="content.value" class="w-full"
|
||||
:name="'value_'+property.id" placeholder="Filter Value"
|
||||
@update:model-value="emitInput()"
|
||||
/>
|
||||
:name="'value_' + property.id" placeholder="Filter Value" @update:model-value="emitInput()" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -35,6 +30,9 @@ export default {
|
|||
inputComponent: {
|
||||
text: 'TextInput',
|
||||
number: 'TextInput',
|
||||
rating: 'TextInput',
|
||||
scale: 'TextInput',
|
||||
slider: 'TextInput',
|
||||
select: 'SelectInput',
|
||||
multi_select: 'SelectInput',
|
||||
date: 'DateInput',
|
||||
|
|
@ -115,7 +113,7 @@ export default {
|
|||
|
||||
methods: {
|
||||
castContent(content) {
|
||||
if (this.property.type === 'number' && content.value) {
|
||||
if (['number', 'rating', 'scale', 'slider'].includes(this.property.type) && content.value) {
|
||||
content.value = Number(content.value)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ export default {
|
|||
return this.field && this.field.type.startsWith('nf')
|
||||
},
|
||||
typeCanBeChanged () {
|
||||
return ['text', 'email', 'phone_number', 'number', 'select', 'multi_select'].includes(this.field.type)
|
||||
return ['text', 'email', 'phone_number', 'number', 'select', 'multi_select', 'rating', 'scale', 'slider'].includes(this.field.type)
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<dropdown v-if="changeTypeOptions.length > 0" dusk="nav-dropdown">
|
||||
<dropdown ref="newTypeDropdown" v-if="changeTypeOptions.length > 0" dusk="nav-dropdown">
|
||||
<template #trigger="{toggle}">
|
||||
<v-button class="relative" :class="btnClasses" size="small" color="light-gray" @click.stop="toggle">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-4 w-4 text-blue-600 inline mr-1 -mt-1">
|
||||
|
|
@ -41,12 +41,15 @@ export default {
|
|||
computed: {
|
||||
changeTypeOptions () {
|
||||
let newTypes = []
|
||||
if (['text', 'email', 'phone_number', 'number'].includes(this.field.type)) {
|
||||
if (['text', 'email', 'phone_number', 'number','slider','rating','scale'].includes(this.field.type)) {
|
||||
newTypes = [
|
||||
{ name: 'Text Input', value: 'text' },
|
||||
{ name: 'Email Input', value: 'email' },
|
||||
{ name: 'Phone Input', value: 'phone_number' },
|
||||
{ name: 'Number Input', value: 'number' }
|
||||
{ name: 'Number Input', value: 'number' },
|
||||
{ name: 'Slider Input', value: 'slider' },
|
||||
{ name: 'Rating Input', value: 'rating' },
|
||||
{ name: 'Scale Input', value: 'scale' },
|
||||
]
|
||||
}
|
||||
if (['select', 'multi_select'].includes(this.field.type)) {
|
||||
|
|
@ -75,6 +78,7 @@ export default {
|
|||
changeType (newType) {
|
||||
if (newType) {
|
||||
this.$emit('changeType', newType)
|
||||
this.$refs.newTypeDropdown.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,22 +8,16 @@
|
|||
<p class="text-gray-400 mb-2 text-xs">
|
||||
Exclude this field or make it required.
|
||||
</p>
|
||||
<v-checkbox v-model="field.hidden" class="mb-3"
|
||||
:name="field.id+'_hidden'"
|
||||
@update:model-value="onFieldHiddenChange"
|
||||
>
|
||||
<v-checkbox v-model="field.hidden" class="mb-3" :name="field.id + '_hidden'"
|
||||
@update:model-value="onFieldHiddenChange">
|
||||
Hidden
|
||||
</v-checkbox>
|
||||
<v-checkbox v-model="field.required" class="mb-3"
|
||||
:name="field.id+'_required'"
|
||||
@update:model-value="onFieldRequiredChange"
|
||||
>
|
||||
<v-checkbox v-model="field.required" class="mb-3" :name="field.id + '_required'"
|
||||
@update:model-value="onFieldRequiredChange">
|
||||
Required
|
||||
</v-checkbox>
|
||||
<v-checkbox v-model="field.disabled" class="mb-3"
|
||||
:name="field.id+'_disabled'"
|
||||
@update:model-value="onFieldDisabledChange"
|
||||
>
|
||||
<v-checkbox v-model="field.disabled" class="mb-3" :name="field.id + '_disabled'"
|
||||
@update:model-value="onFieldDisabledChange">
|
||||
Disabled
|
||||
</v-checkbox>
|
||||
</div>
|
||||
|
|
@ -36,9 +30,7 @@
|
|||
<p class="text-gray-400 mb-3 text-xs">
|
||||
Advanced options for checkbox.
|
||||
</p>
|
||||
<v-checkbox v-model="field.use_toggle_switch" class="mt-3"
|
||||
name="use_toggle_switch" help=""
|
||||
>
|
||||
<v-checkbox v-model="field.use_toggle_switch" class="mt-3" name="use_toggle_switch" help="">
|
||||
Use toggle switch
|
||||
</v-checkbox>
|
||||
<p class="text-gray-400 mb-3 text-xs">
|
||||
|
|
@ -51,88 +43,56 @@
|
|||
<h3 class="font-semibold block text-lg">
|
||||
File uploads
|
||||
</h3>
|
||||
<v-checkbox v-model="field.multiple" class="mt-3"
|
||||
:name="field.id+'_multiple'"
|
||||
>
|
||||
<v-checkbox v-model="field.multiple" class="mt-3" :name="field.id + '_multiple'">
|
||||
Allow multiple files
|
||||
</v-checkbox>
|
||||
<text-input name="allowed_file_types" class="mt-3" :form="field"
|
||||
label="Allowed file types" placeholder="jpg,jpeg,png,gif"
|
||||
help="Comma separated values, leave blank to allow all file types"
|
||||
/>
|
||||
<text-input name="allowed_file_types" class="mt-3" :form="field" label="Allowed file types"
|
||||
placeholder="jpg,jpeg,png,gif" help="Comma separated values, leave blank to allow all file types" />
|
||||
|
||||
<text-input name="max_file_size" class="mt-3" :form="field" native-type="number"
|
||||
:min="1"
|
||||
:max="mbLimit"
|
||||
<text-input name="max_file_size" class="mt-3" :form="field" native-type="number" :min="1" :max="mbLimit"
|
||||
label="Maximum file size (in MB)" :placeholder="`1MB - ${mbLimit}MB`"
|
||||
help="Set the maximum file size that can be uploaded"
|
||||
/>
|
||||
help="Set the maximum file size that can be uploaded" />
|
||||
</div>
|
||||
|
||||
<!-- Number Options -->
|
||||
<div v-if="field.type === 'number'" class="border-b py-2 px-4">
|
||||
<div v-if="field.type === 'rating'" class="border-b py-2 px-4">
|
||||
<h3 class="font-semibold block text-lg">
|
||||
Number Options
|
||||
</h3>
|
||||
<v-checkbox v-model="field.is_rating" class="mt-3"
|
||||
:name="field.id+'_is_rating'" @update:model-value="initRating"
|
||||
>
|
||||
Rating
|
||||
</v-checkbox>
|
||||
</h3>
|
||||
<p class="text-gray-400 mb-3 text-xs">
|
||||
Transform this field into a star rating input.
|
||||
Advanced options for rating.
|
||||
</p>
|
||||
<text-input name="rating_max_value" native-type="number" :min="1" class="mt-3" :form="field" required
|
||||
label="Max rating value" />
|
||||
</div>
|
||||
|
||||
<text-input v-if="field.is_rating" name="rating_max_value" native-type="number" :min="1" class="mt-3"
|
||||
:form="field" required
|
||||
label="Max rating value"
|
||||
/>
|
||||
|
||||
<v-checkbox v-model="field.is_scale" class="mt-4"
|
||||
:name="field.id+'_is_scale'" @update:model-value="initScale"
|
||||
>
|
||||
<div v-if="field.type === 'scale'" class="border-b py-2 px-4">
|
||||
<h3 class="font-semibold block text-lg">
|
||||
Scale
|
||||
</v-checkbox>
|
||||
<p class="text-gray-400 text-xs mb-5">
|
||||
Transform this field into a scale/score input.
|
||||
</h3>
|
||||
<p class="text-gray-400 mb-3 text-xs">
|
||||
Advanced options for scale.
|
||||
</p>
|
||||
<template v-if="field.is_scale">
|
||||
<text-input name="scale_min_value" native-type="number" class="mt-4"
|
||||
:form="field" required
|
||||
label="Min scale value"
|
||||
/>
|
||||
<text-input name="scale_max_value" native-type="number" :min="1" class="mt-4"
|
||||
:form="field" required
|
||||
label="Max scale value"
|
||||
/>
|
||||
<text-input name="scale_step_value" native-type="number" :min="1" class="mt-4"
|
||||
:form="field" required
|
||||
label="Scale steps value"
|
||||
/>
|
||||
</template>
|
||||
<text-input name="scale_min_value" native-type="number" class="mt-4" :form="field" required
|
||||
label="Min scale value" />
|
||||
<text-input name="scale_max_value" native-type="number" :min="1" class="mt-4" :form="field" required
|
||||
label="Max scale value" />
|
||||
<text-input name="scale_step_value" native-type="number" :min="1" class="mt-4" :form="field" required
|
||||
label="Scale steps value" />
|
||||
</div>
|
||||
|
||||
<v-checkbox v-model="field.is_slider" class="mt-4"
|
||||
:name="field.id+'_is_slider'" @update:model-value="initSlider"
|
||||
>
|
||||
<div v-if="field.type === 'slider'" class="border-b py-2 px-4">
|
||||
<h3 class="font-semibold block text-lg">
|
||||
Slider
|
||||
</v-checkbox>
|
||||
<p class="text-gray-400 text-xs mb-5">
|
||||
Transform this field into a slider input.
|
||||
</h3>
|
||||
<p class="text-gray-400 mb-3 text-xs">
|
||||
Advanced options for slider.
|
||||
</p>
|
||||
<template v-if="field.is_slider">
|
||||
<text-input name="slider_min_value" native-type="number" class="mt-4"
|
||||
:form="field" required
|
||||
label="Min slider value"
|
||||
/>
|
||||
<text-input name="slider_max_value" native-type="number" :min="1" class="mt-4"
|
||||
:form="field" required
|
||||
label="Max slider value"
|
||||
/>
|
||||
<text-input name="slider_step_value" native-type="number" :min="1" class="mt-4"
|
||||
:form="field" required
|
||||
label="Slider steps value"
|
||||
/>
|
||||
</template>
|
||||
<text-input name="slider_min_value" native-type="number" class="mt-4" :form="field" required
|
||||
label="Min slider value" />
|
||||
<text-input name="slider_max_value" native-type="number" :min="1" class="mt-4" :form="field" required
|
||||
label="Max slider value" />
|
||||
<text-input name="slider_step_value" native-type="number" :min="1" class="mt-4" :form="field" required
|
||||
label="Slider steps value" />
|
||||
</div>
|
||||
|
||||
<!-- Text Options -->
|
||||
|
|
@ -143,10 +103,8 @@
|
|||
<p class="text-gray-400 mb-3 text-xs">
|
||||
Keep it simple or make it a multi-lines input.
|
||||
</p>
|
||||
<v-checkbox v-model="field.multi_lines" class="mb-2"
|
||||
:name="field.id+'_multi_lines'"
|
||||
@update:model-value="field.multi_lines = $event"
|
||||
>
|
||||
<v-checkbox v-model="field.multi_lines" class="mb-2" :name="field.id + '_multi_lines'"
|
||||
@update:model-value="field.multi_lines = $event">
|
||||
Multi-lines input
|
||||
</v-checkbox>
|
||||
</div>
|
||||
|
|
@ -156,51 +114,36 @@
|
|||
<h3 class="font-semibold block text-lg">
|
||||
Date Options
|
||||
</h3>
|
||||
<v-checkbox v-model="field.date_range" class="mt-3"
|
||||
:name="field.id+'_date_range'"
|
||||
@update:model-value="onFieldDateRangeChange"
|
||||
>
|
||||
<v-checkbox v-model="field.date_range" class="mt-3" :name="field.id + '_date_range'"
|
||||
@update:model-value="onFieldDateRangeChange">
|
||||
Date Range
|
||||
</v-checkbox>
|
||||
<p class="text-gray-400 mb-3 text-xs">
|
||||
Adds an end date. This cannot be used with the time option yet.
|
||||
</p>
|
||||
<v-checkbox v-model="field.with_time"
|
||||
:name="field.id+'_with_time'"
|
||||
@update:model-value="onFieldWithTimeChange"
|
||||
>
|
||||
<v-checkbox v-model="field.with_time" :name="field.id + '_with_time'" @update:model-value="onFieldWithTimeChange">
|
||||
Date with time
|
||||
</v-checkbox>
|
||||
<p class="text-gray-400 mb-3 text-xs">
|
||||
Include time. Or not. This cannot be used with the date range option yet.
|
||||
</p>
|
||||
|
||||
<select-input v-if="field.with_time" name="timezone" class="mt-3"
|
||||
:form="field" :options="timezonesOptions"
|
||||
label="Timezone" :searchable="true"
|
||||
help="Make sure to select correct timezone. Leave blank otherwise."
|
||||
/>
|
||||
<v-checkbox v-model="field.prefill_today"
|
||||
name="prefill_today"
|
||||
@update:model-value="onFieldPrefillTodayChange"
|
||||
>
|
||||
<select-input v-if="field.with_time" name="timezone" class="mt-3" :form="field" :options="timezonesOptions"
|
||||
label="Timezone" :searchable="true" help="Make sure to select correct timezone. Leave blank otherwise." />
|
||||
<v-checkbox v-model="field.prefill_today" name="prefill_today" @update:model-value="onFieldPrefillTodayChange">
|
||||
Prefill with 'today'
|
||||
</v-checkbox>
|
||||
<p class="text-gray-400 mb-3 text-xs">
|
||||
if enabled we will pre-fill this field with the current date
|
||||
</p>
|
||||
|
||||
<v-checkbox v-model="field.disable_past_dates"
|
||||
name="disable_past_dates" class="mb-3"
|
||||
@update:model-value="onFieldDisablePastDatesChange"
|
||||
>
|
||||
<v-checkbox v-model="field.disable_past_dates" name="disable_past_dates" class="mb-3"
|
||||
@update:model-value="onFieldDisablePastDatesChange">
|
||||
Disable past dates
|
||||
</v-checkbox>
|
||||
|
||||
<v-checkbox v-model="field.disable_future_dates"
|
||||
name="disable_future_dates" class="mb-3"
|
||||
@update:model-value="onFieldDisableFutureDatesChange"
|
||||
>
|
||||
<v-checkbox v-model="field.disable_future_dates" name="disable_future_dates" class="mb-3"
|
||||
@update:model-value="onFieldDisableFutureDatesChange">
|
||||
Disable future dates
|
||||
</v-checkbox>
|
||||
</div>
|
||||
|
|
@ -214,18 +157,13 @@
|
|||
Advanced options for your select/multiselect fields.
|
||||
</p>
|
||||
<text-area-input v-model="optionsText" :name="field.id + '_options_text'" class="mt-3"
|
||||
label="Set selection options"
|
||||
help="Add one option per line"
|
||||
@update:model-value="onFieldOptionsChange"
|
||||
/>
|
||||
<v-checkbox v-model="field.allow_creation"
|
||||
name="allow_creation" help="" @update:model-value="onFieldAllowCreationChange"
|
||||
>
|
||||
label="Set selection options" help="Add one option per line" @update:model-value="onFieldOptionsChange" />
|
||||
<v-checkbox v-model="field.allow_creation" name="allow_creation" help=""
|
||||
@update:model-value="onFieldAllowCreationChange">
|
||||
Allow respondent to create new options
|
||||
</v-checkbox>
|
||||
<v-checkbox v-model="field.without_dropdown" class="mt-3"
|
||||
name="without_dropdown" help="" @update:model-value="onFieldWithoutDropdownChange"
|
||||
>
|
||||
<v-checkbox v-model="field.without_dropdown" class="mt-3" name="without_dropdown" help=""
|
||||
@update:model-value="onFieldWithoutDropdownChange">
|
||||
Always show all select options
|
||||
</v-checkbox>
|
||||
<p class="text-gray-400 mb-3 text-xs">
|
||||
|
|
@ -243,29 +181,21 @@
|
|||
Change your form field name, pre-fill a value, add hints, etc.
|
||||
</p>
|
||||
|
||||
<text-input name="name" class="mt-3"
|
||||
:form="field" :required="true"
|
||||
label="Field Name"
|
||||
/>
|
||||
<text-input name="name" class="mt-3" :form="field" :required="true" label="Field Name" />
|
||||
|
||||
<v-checkbox v-model="field.hide_field_name" class="mt-3"
|
||||
:name="field.id+'_hide_field_name'"
|
||||
>
|
||||
<v-checkbox v-model="field.hide_field_name" class="mt-3" :name="field.id + '_hide_field_name'">
|
||||
Hide field name
|
||||
</v-checkbox>
|
||||
|
||||
<v-checkbox v-if="field.type === 'phone_number'" v-model="field.use_simple_text_input" class="mt-3"
|
||||
:name="field.id+'_use_simple_text_input'"
|
||||
>
|
||||
:name="field.id + '_use_simple_text_input'">
|
||||
Use simple text input
|
||||
</v-checkbox>
|
||||
<template v-if="field.type === 'phone_number' && !field.use_simple_text_input">
|
||||
<select-input v-model="field.unavailable_countries" class="mt-4" wrapper-class="relative"
|
||||
:options="allCountries" :multiple="true"
|
||||
:searchable="true" :search-keys="['name']" :option-key="'code'" :emit-key="'code'"
|
||||
label="Disabled countries" :placeholder="'Select a country'"
|
||||
help="Remove countries from the phone input"
|
||||
>
|
||||
:options="allCountries" :multiple="true" :searchable="true" :search-keys="['name']" :option-key="'code'"
|
||||
:emit-key="'code'" label="Disabled countries" :placeholder="'Select a country'"
|
||||
help="Remove countries from the phone input">
|
||||
<template #selected="{ option, selected }">
|
||||
<div class="flex items-center space-x-2 justify-center overflow-hidden">
|
||||
{{ option.length }} selected
|
||||
|
|
@ -281,8 +211,7 @@
|
|||
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
</template>
|
||||
|
|
@ -294,41 +223,25 @@
|
|||
</template>
|
||||
|
||||
<!-- Pre-fill depends on type -->
|
||||
<v-checkbox v-if="field.type=='checkbox'" v-model="field.prefill" class="mt-3"
|
||||
:name="field.id+'_prefill'"
|
||||
@update:model-value="field.prefill = $event"
|
||||
>
|
||||
<v-checkbox v-if="field.type == 'checkbox'" v-model="field.prefill" class="mt-3" :name="field.id + '_prefill'"
|
||||
@update:model-value="field.prefill = $event">
|
||||
Pre-filled value
|
||||
</v-checkbox>
|
||||
<select-input v-else-if="['select', 'multi_select'].includes(field.type)" name="prefill" class="mt-3"
|
||||
:form="field" :options="prefillSelectsOptions"
|
||||
label="Pre-filled value"
|
||||
:multiple="field.type==='multi_select'"
|
||||
/>
|
||||
:form="field" :options="prefillSelectsOptions" label="Pre-filled value"
|
||||
:multiple="field.type === 'multi_select'" />
|
||||
<date-input v-else-if="field.type === 'date' && field.prefill_today !== true" name="prefill" class="mt-3"
|
||||
:form="field" :with-time="field.with_time===true"
|
||||
:date-range="field.date_range===true"
|
||||
label="Pre-filled value"
|
||||
/>
|
||||
<phone-input v-else-if="field.type === 'phone_number' && !field.use_simple_text_input"
|
||||
name="prefill" class="mt-3"
|
||||
:form="field" :with-time="field.with_time === true" :date-range="field.date_range === true"
|
||||
label="Pre-filled value" />
|
||||
<phone-input v-else-if="field.type === 'phone_number' && !field.use_simple_text_input" name="prefill" class="mt-3"
|
||||
:form="field" :can-only-country="true" :unavailable-countries="field.unavailable_countries ?? []"
|
||||
label="Pre-filled value"
|
||||
/>
|
||||
<text-area-input v-else-if="field.type === 'text' && field.multi_lines"
|
||||
name="prefill" class="mt-3"
|
||||
:form="field"
|
||||
label="Pre-filled value"
|
||||
/>
|
||||
<file-input v-else-if="field.type==='files'" name="prefill" class="mt-4"
|
||||
:form="field"
|
||||
label="Pre-filled file"
|
||||
:multiple="field.multiple===true" :move-to-form-assets="true"
|
||||
/>
|
||||
<text-input v-else-if="!['files', 'signature'].includes(field.type)" name="prefill" class="mt-3"
|
||||
:form="field"
|
||||
label="Pre-filled value"
|
||||
/>
|
||||
label="Pre-filled value" />
|
||||
<text-area-input v-else-if="field.type === 'text' && field.multi_lines" name="prefill" class="mt-3" :form="field"
|
||||
label="Pre-filled value" />
|
||||
<file-input v-else-if="field.type === 'files'" name="prefill" class="mt-4" :form="field" label="Pre-filled file"
|
||||
:multiple="field.multiple === true" :move-to-form-assets="true" />
|
||||
<text-input v-else-if="!['files', 'signature'].includes(field.type)" name="prefill" class="mt-3" :form="field"
|
||||
label="Pre-filled value" />
|
||||
<div v-if="['select', 'multi_select'].includes(field.type)" class="-mt-3 mb-3 text-gray-400 dark:text-gray-500">
|
||||
<small>
|
||||
A problem? <a href="#" @click.prevent="field.prefill = null">Click here to clear your pre-fill</a>
|
||||
|
|
@ -336,50 +249,31 @@
|
|||
</div>
|
||||
|
||||
<!-- Placeholder -->
|
||||
<text-input v-if="hasPlaceholder" name="placeholder" class="mt-3"
|
||||
:form="field"
|
||||
label="Empty Input Text (Placeholder)"
|
||||
/>
|
||||
<text-input v-if="hasPlaceholder" name="placeholder" class="mt-3" :form="field"
|
||||
label="Empty Input Text (Placeholder)" />
|
||||
|
||||
<select-input name="width" class="mt-3"
|
||||
:options="[
|
||||
<select-input name="width" class="mt-3" :options="[
|
||||
{ name: 'Full', value: 'full' },
|
||||
{ name: '1/2 (half width)', value: '1/2' },
|
||||
{ name: '1/3 (a third of the width)', value: '1/3' },
|
||||
{ name: '2/3 (two thirds of the width)', value: '2/3' },
|
||||
{ name: '1/4 (a quarter of the width)', value: '1/4' },
|
||||
{ name: '3/4 (three quarters of the width)', value: '3/4' },
|
||||
]"
|
||||
:form="field" label="Field Width"
|
||||
/>
|
||||
]" :form="field" label="Field Width" />
|
||||
|
||||
<!-- Help -->
|
||||
<rich-text-area-input name="help" class="mt-3"
|
||||
:form="field"
|
||||
:editor-toolbar="editorToolbarCustom"
|
||||
label="Field Help"
|
||||
help="Your field help will be shown below/above the field, just like this message."
|
||||
:help-position="field.help_position"
|
||||
/>
|
||||
<select-input name="help_position" class="mt-3"
|
||||
:options="[
|
||||
<rich-text-area-input name="help" class="mt-3" :form="field" :editor-toolbar="editorToolbarCustom"
|
||||
label="Field Help" help="Your field help will be shown below/above the field, just like this message."
|
||||
:help-position="field.help_position" />
|
||||
<select-input name="help_position" class="mt-3" :options="[
|
||||
{ name: 'Below input', value: 'below_input' },
|
||||
{ name: 'Above input', value: 'above_input' },
|
||||
]"
|
||||
:form="field" label="Field Help Position"
|
||||
@update:model-value="onFieldHelpPositionChange"
|
||||
/>
|
||||
]" :form="field" label="Field Help Position" @update:model-value="onFieldHelpPositionChange" />
|
||||
|
||||
<template v-if="['text', 'number', 'url', 'email'].includes(field.type)">
|
||||
<text-input name="max_char_limit" native-type="number" :min="1" :max="2000"
|
||||
:form="field"
|
||||
label="Max character limit"
|
||||
help="Maximum character limit of 2000"
|
||||
:required="false"
|
||||
/>
|
||||
<checkbox-input name="show_char_limit" :form="field" class="mt-3"
|
||||
label="Always show character limit"
|
||||
/>
|
||||
<text-input name="max_char_limit" native-type="number" :min="1" :max="2000" :form="field"
|
||||
label="Max character limit" help="Maximum character limit of 2000" :required="false" />
|
||||
<checkbox-input name="show_char_limit" :form="field" class="mt-3" label="Always show character limit" />
|
||||
</template>
|
||||
</div>
|
||||
|
||||
|
|
@ -389,10 +283,8 @@
|
|||
Advanced Options
|
||||
</h3>
|
||||
|
||||
<v-checkbox v-model="field.generates_uuid"
|
||||
:name="field.id+'_generates_uuid'"
|
||||
@update:model-value="onFieldGenUIdChange"
|
||||
>
|
||||
<v-checkbox v-model="field.generates_uuid" :name="field.id + '_generates_uuid'"
|
||||
@update:model-value="onFieldGenUIdChange">
|
||||
Generates a unique id
|
||||
</v-checkbox>
|
||||
<p class="text-gray-400 mb-3 text-xs">
|
||||
|
|
@ -400,10 +292,8 @@
|
|||
submission
|
||||
</p>
|
||||
|
||||
<v-checkbox v-model="field.generates_auto_increment_id"
|
||||
:name="field.id+'_generates_auto_increment_id'"
|
||||
@update:model-value="onFieldGenAutoIdChange"
|
||||
>
|
||||
<v-checkbox v-model="field.generates_auto_increment_id" :name="field.id + '_generates_auto_increment_id'"
|
||||
@update:model-value="onFieldGenAutoIdChange">
|
||||
Generates an auto-incremented id
|
||||
</v-checkbox>
|
||||
<p class="text-gray-400 mb-3 text-xs">
|
||||
|
|
@ -504,7 +394,13 @@ export default {
|
|||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
'field.type': {
|
||||
handler() {
|
||||
this.setDefaultFieldValues()
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
|
|
@ -514,12 +410,7 @@ export default {
|
|||
},
|
||||
|
||||
mounted() {
|
||||
if (['text', 'number', 'url', 'email'].includes(this.field?.type) && !this.field?.max_char_limit) {
|
||||
this.field.max_char_limit = 2000
|
||||
}
|
||||
if (this.field.type == 'files') {
|
||||
this.field.max_file_size = Math.min((this.field.max_file_size ?? this.mbLimit), this.mbLimit)
|
||||
}
|
||||
this.setDefaultFieldValues()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -572,46 +463,6 @@ export default {
|
|||
this.field.hidden = true
|
||||
}
|
||||
},
|
||||
initRating () {
|
||||
if (this.field.is_rating) {
|
||||
this.field.is_scale = false
|
||||
this.field.is_slider = false
|
||||
if (!this.field.rating_max_value) {
|
||||
this.field.rating_max_value = 5
|
||||
}
|
||||
}
|
||||
},
|
||||
initScale () {
|
||||
if (this.field.is_scale) {
|
||||
this.field.is_rating = false
|
||||
this.field.is_slider = false
|
||||
if (!this.field.scale_min_value) {
|
||||
this.field.scale_min_value = 1
|
||||
}
|
||||
if (!this.field.scale_max_value) {
|
||||
this.field.scale_max_value = 5
|
||||
}
|
||||
if (!this.field.scale_step_value) {
|
||||
this.field.scale_step_value = 1
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
initSlider () {
|
||||
if (this.field.is_slider) {
|
||||
this.field.is_rating = false
|
||||
this.field.is_scale = false
|
||||
if (!this.field.slider_min_value) {
|
||||
this.field.slider_min_value = 0
|
||||
}
|
||||
if (!this.field.slider_max_value) {
|
||||
this.field.slider_max_value = 50
|
||||
}
|
||||
if (!this.field.slider_step_value) {
|
||||
this.field.slider_step_value = 1
|
||||
}
|
||||
}
|
||||
},
|
||||
onFieldOptionsChange(val) {
|
||||
const vals = (val) ? val.trim().split('\n') : []
|
||||
const tmpOpts = vals.map(name => {
|
||||
|
|
@ -668,6 +519,43 @@ export default {
|
|||
this.field.unavailable_countries = this.allCountries.map(item => {
|
||||
return item.code
|
||||
})
|
||||
},
|
||||
setDefaultFieldValues() {
|
||||
const defaultFieldValues = {
|
||||
slider: {
|
||||
slider_min_value: 0,
|
||||
slider_max_value: 100,
|
||||
slider_step_value: 1
|
||||
},
|
||||
scale: {
|
||||
scale_min_value: 1,
|
||||
scale_max_value: 5,
|
||||
scale_step_value: 1
|
||||
},
|
||||
rating: {
|
||||
rating_max_value: 5
|
||||
},
|
||||
files: {
|
||||
max_file_size: Math.min((this.field.max_file_size ?? this.mbLimit), this.mbLimit)
|
||||
},
|
||||
text: {
|
||||
multi_lines: false,
|
||||
max_char_limit: 2000
|
||||
},
|
||||
email: {
|
||||
max_char_limit: 2000
|
||||
},
|
||||
url: {
|
||||
max_char_limit: 2000
|
||||
},
|
||||
}
|
||||
if (this.field.type in defaultFieldValues) {
|
||||
Object.keys(defaultFieldValues[this.field.type]).forEach(key => {
|
||||
if (!Object.hasOwn(this.field,key)) {
|
||||
this.field[key] = defaultFieldValues[this.field.type][key]
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,58 +1,41 @@
|
|||
<template>
|
||||
<table :id="'table-' + tableHash" ref="table"
|
||||
class="notion-table n-table whitespace-no-wrap bg-white dark:bg-notion-dark-light relative"
|
||||
>
|
||||
<thead :id="'table-header-'+tableHash" ref="header"
|
||||
class="n-table-head top-0"
|
||||
:class="{'absolute': data.length !== 0}"
|
||||
style="will-change: transform; transform: translate3d(0px, 0px, 0px)"
|
||||
>
|
||||
class="notion-table n-table whitespace-no-wrap bg-white dark:bg-notion-dark-light relative">
|
||||
<thead :id="'table-header-' + tableHash" ref="header" class="n-table-head top-0"
|
||||
:class="{ 'absolute': data.length !== 0 }" style="will-change: transform; transform: translate3d(0px, 0px, 0px)">
|
||||
<tr class="n-table-row overflow-x-hidden">
|
||||
<resizable-th v-for="col, index in columns" :id="'table-head-cell-' + col.id" :key="col.id"
|
||||
scope="col" :allow-resize="allowResize" :width="(col.cell_width ? col.cell_width + 'px':'auto')"
|
||||
class="n-table-cell p-0 relative"
|
||||
@resize-width="resizeCol(col, $event)"
|
||||
>
|
||||
<p class="bg-gray-50 border-r dark:bg-notion-dark truncate sticky top-0 border-b border-gray-200 dark:border-gray-800 px-4 py-2 text-gray-500 font-semibold tracking-wider uppercase text-xs"
|
||||
>
|
||||
<resizable-th v-for="col, index in columns" :id="'table-head-cell-' + col.id" :key="col.id" scope="col"
|
||||
:allow-resize="allowResize" :width="(col.cell_width ? col.cell_width + 'px' : 'auto')"
|
||||
class="n-table-cell p-0 relative" @resize-width="resizeCol(col, $event)">
|
||||
<p
|
||||
class="bg-gray-50 border-r dark:bg-notion-dark truncate sticky top-0 border-b border-gray-200 dark:border-gray-800 px-4 py-2 text-gray-500 font-semibold tracking-wider uppercase text-xs">
|
||||
{{ col.name }}
|
||||
</p>
|
||||
</resizable-th>
|
||||
<th class="n-table-cell p-0 relative" style="width: 100px">
|
||||
<p
|
||||
class="bg-gray-50 dark:bg-notion-dark truncate sticky top-0 border-b border-gray-200 dark:border-gray-800 px-4 py-2 text-gray-500 font-semibold tracking-wider uppercase text-xs"
|
||||
>
|
||||
class="bg-gray-50 dark:bg-notion-dark truncate sticky top-0 border-b border-gray-200 dark:border-gray-800 px-4 py-2 text-gray-500 font-semibold tracking-wider uppercase text-xs">
|
||||
Actions
|
||||
</p>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody v-if="data.length > 0" class="n-table-body bg-white dark:bg-notion-dark-light">
|
||||
<tr v-if="$slots.hasOwnProperty('actions')"
|
||||
:id="'table-actions-'+tableHash"
|
||||
ref="actions-row"
|
||||
class="action-row absolute w-full"
|
||||
style="will-change: transform; transform: translate3d(0px, 32px, 0px)"
|
||||
>
|
||||
<tr v-if="$slots.hasOwnProperty('actions')" :id="'table-actions-' + tableHash" ref="actions-row"
|
||||
class="action-row absolute w-full" style="will-change: transform; transform: translate3d(0px, 32px, 0px)">
|
||||
<td :colspan="columns.length" class="p-1">
|
||||
<slot name="actions" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-for="row, index in data" :key="row.id" class="n-table-row" :class="{ 'first': index === 0 }">
|
||||
<td v-for="col, colIndex in columns"
|
||||
:key="col.id"
|
||||
:style="{width: col.cell_width + 'px'}"
|
||||
class="n-table-cell border-gray-100 dark:border-gray-900 text-sm p-2 overflow-hidden"
|
||||
:class="[{'border-b': index !== data.length - 1, 'border-r': colIndex !== columns.length - 1 || hasActions},
|
||||
colClasses(col)]"
|
||||
>
|
||||
<component :is="fieldComponents[col.type]" class="border-gray-100 dark:border-gray-900"
|
||||
:property="col" :value="row[col.id]"
|
||||
/>
|
||||
<td v-for="col, colIndex in columns" :key="col.id" :style="{ width: col.cell_width + 'px' }"
|
||||
class="n-table-cell border-gray-100 dark:border-gray-900 text-sm p-2 overflow-hidden" :class="[{ 'border-b': index !== data.length - 1, 'border-r': colIndex !== columns.length - 1 || hasActions },
|
||||
colClasses(col)]">
|
||||
<component :is="fieldComponents[col.type]" class="border-gray-100 dark:border-gray-900" :property="col"
|
||||
:value="row[col.id]" />
|
||||
</td>
|
||||
<td v-if="hasActions" class="n-table-cell border-gray-100 dark:border-gray-900 text-sm p-2 border-b"
|
||||
style="width: 100px"
|
||||
>
|
||||
style="width: 100px">
|
||||
<record-operations :form="form" :structure="columns" :submission="row"
|
||||
@deleted="(submission) => $emit('deleted', submission)"
|
||||
@updated="(submission) => $emit('updated', submission)" />
|
||||
|
|
@ -131,6 +114,9 @@ export default {
|
|||
fieldComponents: {
|
||||
text: shallowRef(OpenText),
|
||||
number: shallowRef(OpenText),
|
||||
rating: shallowRef(OpenText),
|
||||
scale: shallowRef(OpenText),
|
||||
slider: shallowRef(OpenText),
|
||||
select: shallowRef(OpenSelect),
|
||||
multi_select: shallowRef(OpenSelect),
|
||||
date: shallowRef(OpenDate),
|
||||
|
|
@ -290,7 +276,8 @@ export default {
|
|||
.n-table-row {
|
||||
display: flex;
|
||||
|
||||
&.first, &.loader {
|
||||
&.first,
|
||||
&.loader {
|
||||
margin-top: 33px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,8 +37,6 @@ export const initForm = (defaultValue = {}, withDefaultProperties = false) => {
|
|||
notification_body: 'Hello there 👋 <br>This is a confirmation that your submission was successfully saved.',
|
||||
notifications_include_submission: true,
|
||||
use_captcha: false,
|
||||
is_rating: false,
|
||||
rating_max_value: 5,
|
||||
max_submissions_count: null,
|
||||
max_submissions_reached_text: 'This form has now reached the maximum number of allowed submissions and is now closed.',
|
||||
editable_submissions_button_text: 'Edit submission',
|
||||
|
|
|
|||
|
|
@ -289,6 +289,180 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"rating": {
|
||||
"comparators": {
|
||||
"equals": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"does_not_equal": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"greater_than": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"less_than": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"greater_than_or_equal_to": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"less_than_or_equal_to": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"is_empty": {
|
||||
"expected_type": "boolean",
|
||||
"format": {
|
||||
"type": "enum",
|
||||
"values": [
|
||||
true
|
||||
]
|
||||
}
|
||||
},
|
||||
"is_not_empty": {
|
||||
"expected_type": "boolean",
|
||||
"format": {
|
||||
"type": "enum",
|
||||
"values": [
|
||||
true
|
||||
]
|
||||
}
|
||||
},
|
||||
"content_length_equals": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_does_not_equal": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_greater_than": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_greater_than_or_equal_to": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_less_than": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_less_than_or_equal_to": {
|
||||
"expected_type": "number"
|
||||
}
|
||||
}
|
||||
},
|
||||
"scale": {
|
||||
"comparators": {
|
||||
"equals": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"does_not_equal": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"greater_than": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"less_than": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"greater_than_or_equal_to": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"less_than_or_equal_to": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"is_empty": {
|
||||
"expected_type": "boolean",
|
||||
"format": {
|
||||
"type": "enum",
|
||||
"values": [
|
||||
true
|
||||
]
|
||||
}
|
||||
},
|
||||
"is_not_empty": {
|
||||
"expected_type": "boolean",
|
||||
"format": {
|
||||
"type": "enum",
|
||||
"values": [
|
||||
true
|
||||
]
|
||||
}
|
||||
},
|
||||
"content_length_equals": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_does_not_equal": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_greater_than": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_greater_than_or_equal_to": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_less_than": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_less_than_or_equal_to": {
|
||||
"expected_type": "number"
|
||||
}
|
||||
}
|
||||
},
|
||||
"slider": {
|
||||
"comparators": {
|
||||
"equals": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"does_not_equal": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"greater_than": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"less_than": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"greater_than_or_equal_to": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"less_than_or_equal_to": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"is_empty": {
|
||||
"expected_type": "boolean",
|
||||
"format": {
|
||||
"type": "enum",
|
||||
"values": [
|
||||
true
|
||||
]
|
||||
}
|
||||
},
|
||||
"is_not_empty": {
|
||||
"expected_type": "boolean",
|
||||
"format": {
|
||||
"type": "enum",
|
||||
"values": [
|
||||
true
|
||||
]
|
||||
}
|
||||
},
|
||||
"content_length_equals": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_does_not_equal": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_greater_than": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_greater_than_or_equal_to": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_less_than": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_less_than_or_equal_to": {
|
||||
"expected_type": "number"
|
||||
}
|
||||
}
|
||||
},
|
||||
"checkbox": {
|
||||
"comparators": {
|
||||
"equals": {
|
||||
|
|
|
|||
|
|
@ -40,6 +40,9 @@ function propertyConditionMet (propertyCondition, value) {
|
|||
case 'phone_number':
|
||||
return textConditionMet(propertyCondition, value)
|
||||
case 'number':
|
||||
case 'rating':
|
||||
case 'scale':
|
||||
case 'slider':
|
||||
return numberConditionMet(propertyCondition, value)
|
||||
case 'checkbox':
|
||||
return checkboxConditionMet(propertyCondition, value)
|
||||
|
|
|
|||
|
|
@ -289,6 +289,180 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"rating": {
|
||||
"comparators": {
|
||||
"equals": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"does_not_equal": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"greater_than": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"less_than": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"greater_than_or_equal_to": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"less_than_or_equal_to": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"is_empty": {
|
||||
"expected_type": "boolean",
|
||||
"format": {
|
||||
"type": "enum",
|
||||
"values": [
|
||||
true
|
||||
]
|
||||
}
|
||||
},
|
||||
"is_not_empty": {
|
||||
"expected_type": "boolean",
|
||||
"format": {
|
||||
"type": "enum",
|
||||
"values": [
|
||||
true
|
||||
]
|
||||
}
|
||||
},
|
||||
"content_length_equals": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_does_not_equal": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_greater_than": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_greater_than_or_equal_to": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_less_than": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_less_than_or_equal_to": {
|
||||
"expected_type": "number"
|
||||
}
|
||||
}
|
||||
},
|
||||
"scale": {
|
||||
"comparators": {
|
||||
"equals": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"does_not_equal": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"greater_than": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"less_than": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"greater_than_or_equal_to": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"less_than_or_equal_to": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"is_empty": {
|
||||
"expected_type": "boolean",
|
||||
"format": {
|
||||
"type": "enum",
|
||||
"values": [
|
||||
true
|
||||
]
|
||||
}
|
||||
},
|
||||
"is_not_empty": {
|
||||
"expected_type": "boolean",
|
||||
"format": {
|
||||
"type": "enum",
|
||||
"values": [
|
||||
true
|
||||
]
|
||||
}
|
||||
},
|
||||
"content_length_equals": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_does_not_equal": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_greater_than": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_greater_than_or_equal_to": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_less_than": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_less_than_or_equal_to": {
|
||||
"expected_type": "number"
|
||||
}
|
||||
}
|
||||
},
|
||||
"slider": {
|
||||
"comparators": {
|
||||
"equals": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"does_not_equal": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"greater_than": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"less_than": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"greater_than_or_equal_to": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"less_than_or_equal_to": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"is_empty": {
|
||||
"expected_type": "boolean",
|
||||
"format": {
|
||||
"type": "enum",
|
||||
"values": [
|
||||
true
|
||||
]
|
||||
}
|
||||
},
|
||||
"is_not_empty": {
|
||||
"expected_type": "boolean",
|
||||
"format": {
|
||||
"type": "enum",
|
||||
"values": [
|
||||
true
|
||||
]
|
||||
}
|
||||
},
|
||||
"content_length_equals": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_does_not_equal": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_greater_than": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_greater_than_or_equal_to": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_less_than": {
|
||||
"expected_type": "number"
|
||||
},
|
||||
"content_length_less_than_or_equal_to": {
|
||||
"expected_type": "number"
|
||||
}
|
||||
}
|
||||
},
|
||||
"checkbox": {
|
||||
"comparators": {
|
||||
"equals": {
|
||||
|
|
|
|||
|
|
@ -39,6 +39,13 @@ class FormSubmissionDataFactory
|
|||
case 'number':
|
||||
$value = $this->faker->numberBetween();
|
||||
break;
|
||||
case 'rating':
|
||||
case 'scale':
|
||||
$value = $this->faker->numberBetween(1, 5);
|
||||
break;
|
||||
case 'slider':
|
||||
$value = $this->faker->numberBetween(0, 50);
|
||||
break;
|
||||
case 'url':
|
||||
$value = $this->faker->url();
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -61,6 +61,31 @@ trait TestHelpers
|
|||
'hidden' => false,
|
||||
'required' => false,
|
||||
],
|
||||
[
|
||||
'name' => 'Rating',
|
||||
'type' => 'rating',
|
||||
'hidden' => false,
|
||||
'required' => false,
|
||||
'rating_max_value' => 5
|
||||
],
|
||||
[
|
||||
'name' => 'Scale',
|
||||
'type' => 'scale',
|
||||
'hidden' => false,
|
||||
'required' => false,
|
||||
'scale_min_value' => 1,
|
||||
'scale_max_value' => 10,
|
||||
'scale_step_value' => 1,
|
||||
],
|
||||
[
|
||||
'name' => 'Slider',
|
||||
'type' => 'slider',
|
||||
'hidden' => false,
|
||||
'required' => false,
|
||||
'slider_min_value' => 1,
|
||||
'slider_max_value' => 100,
|
||||
'slider_step_value' => 1,
|
||||
],
|
||||
[
|
||||
'name' => 'Select',
|
||||
'type' => 'select',
|
||||
|
|
|
|||
Loading…
Reference in New Issue