-
-
-
+
-
-
+
\ No newline at end of file
diff --git a/resources/js/components/open/forms/components/FormSubmissions.vue b/resources/js/components/open/forms/components/FormSubmissions.vue
index 5bb97ef..1d6bff0 100644
--- a/resources/js/components/open/forms/components/FormSubmissions.vue
+++ b/resources/js/components/open/forms/components/FormSubmissions.vue
@@ -2,11 +2,41 @@
+
+
+
+
+
+
+ Display columns
+
+
+
+
+ Form Fields
+
+ {{ field.name }}
+
+
+
+
+ Removed Fields
+
+ {{ field.name }}
+
+
+
+
+
+ Close
+
+
+
+
!property.hasOwnProperty('hidden') || !property.hidden)
- tmp.push({
- "name": "Create Date",
- "id": "create_date",
- "type": "date"
- });
- return tmp
- },
exportUrl() {
if (!this.form) {
return ''
@@ -104,6 +127,20 @@ export default {
})
this.$set(this.form, 'properties', columns)
this.formInitDone = true
+
+ this.properties = clonedeep(this.form.properties)
+ this.removed_properties = clonedeep(this.form.removed_properties)
+
+ // Get display columns from local storage
+ const tmpColumns = window.localStorage.getItem('display-columns-formid-'+this.form.id)
+ if(tmpColumns !== null && tmpColumns){
+ this.displayColumns = JSON.parse(tmpColumns)
+ this.onChangeDisplayColumns()
+ }else{
+ this.form.properties.forEach((field) => {
+ this.displayColumns[field.id] = true
+ })
+ }
},
getSubmissionsData() {
if (!this.form || this.fullyLoaded) {
@@ -131,6 +168,13 @@ export default {
this.$refs.shadows.toggleShadow()
this.$refs.shadows.calcDimensions()
},
+ onChangeDisplayColumns(){
+ window.localStorage.setItem('display-columns-formid-'+this.form.id, JSON.stringify(this.displayColumns))
+ const final_properties = this.properties.concat(this.removed_properties).filter((field) => {
+ return this.displayColumns[field.id] === true
+ })
+ this.$set(this.form, 'properties', final_properties)
+ }
},
}
diff --git a/tailwind.config.js b/tailwind.config.js
index a36bd76..e1a00fd 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -40,6 +40,9 @@ module.exports = {
10: '10rem',
8: '2rem'
},
+ translate: {
+ 5.5: '1.4rem'
+ },
boxShadow: {
'inner-notion': '#0f0f0f1a 0px 0px 0px 1px inset',
'focus-notion': '#2eaadcb3 0px 0px 0px 1px inset, #2eaadc66 0px 0px 0px 2px !important'
From bd7d20feb93ba9e8945f2ceb230af5c6ee688b1c Mon Sep 17 00:00:00 2001
From: Chirag <103994754+chiragnotionforms@users.noreply.github.com>
Date: Mon, 17 Oct 2022 13:15:41 +0530
Subject: [PATCH 4/5] Pagination for forms on main page (#9)
* Pagination for forms on main page
* Fix tests
Co-authored-by: Julien Nahum
---
app/Http/Controllers/Forms/FormController.php | 2 +-
resources/js/pages/forms/show.vue | 2 +-
resources/js/pages/home.vue | 13 +++++-----
resources/js/store/modules/open/forms.js | 24 ++++++++++++++++---
tests/Feature/Forms/FormTest.php | 12 ++++------
5 files changed, 35 insertions(+), 18 deletions(-)
diff --git a/app/Http/Controllers/Forms/FormController.php b/app/Http/Controllers/Forms/FormController.php
index f541de5..6c99b7b 100644
--- a/app/Http/Controllers/Forms/FormController.php
+++ b/app/Http/Controllers/Forms/FormController.php
@@ -34,7 +34,7 @@ class FormController extends Controller
$this->authorize('viewAny', Form::class);
$workspaceIsPro = $workspace->is_pro;
- $forms = $workspace->forms()->with(['creator','views','submissions'])->get()->map(function (Form $form) use ($workspace, $workspaceIsPro){
+ $forms = $workspace->forms()->with(['creator','views','submissions'])->paginate(10)->through(function (Form $form) use ($workspace, $workspaceIsPro){
// Add attributes for faster loading
$form->extra = (object) [
'loadedWorkspace' => $workspace,
diff --git a/resources/js/pages/forms/show.vue b/resources/js/pages/forms/show.vue
index e9c5dd3..7e250ea 100644
--- a/resources/js/pages/forms/show.vue
+++ b/resources/js/pages/forms/show.vue
@@ -306,7 +306,7 @@ import FormSubmissions from '../../components/open/forms/components/FormSubmissi
const loadForms = function () {
store.commit('open/forms/startLoading')
store.dispatch('open/workspaces/loadIfEmpty').then(() => {
- store.dispatch('open/forms/load', store.state['open/workspaces'].currentId)
+ store.dispatch('open/forms/loadIfEmpty', store.state['open/workspaces'].currentId)
})
}
diff --git a/resources/js/pages/home.vue b/resources/js/pages/home.vue
index 570d223..76e88f8 100644
--- a/resources/js/pages/home.vue
+++ b/resources/js/pages/home.vue
@@ -10,13 +10,11 @@
Create a new form
-
-
-
-
+
+
You don't have any form yet.
-
+
@@ -66,6 +64,9 @@
.
+
+
+
@@ -83,7 +84,7 @@ import OpenFormFooter from '../components/pages/OpenFormFooter'
const loadForms = function () {
store.commit('open/forms/startLoading')
store.dispatch('open/workspaces/loadIfEmpty').then(() => {
- store.dispatch('open/forms/load', store.state['open/workspaces'].currentId)
+ store.dispatch('open/forms/loadIfEmpty', store.state['open/workspaces'].currentId)
})
}
diff --git a/resources/js/store/modules/open/forms.js b/resources/js/store/modules/open/forms.js
index f8af0c1..ae9b237 100644
--- a/resources/js/store/modules/open/forms.js
+++ b/resources/js/store/modules/open/forms.js
@@ -2,6 +2,7 @@ import axios from 'axios'
export const formsEndpoint = '/api/open/workspaces/{workspaceId}/forms'
export const namespaced = true
+export let currentPage = 1
// state
export const state = {
@@ -36,6 +37,9 @@ export const mutations = {
set (state, items) {
state.content = items
},
+ append (state, items) {
+ state.content = state.content.concat(items)
+ },
addOrUpdate (state, item) {
state.content = state.content.filter((val) => val.id !== item.id)
state.content.push(item)
@@ -56,12 +60,26 @@ export const actions = {
resetState (context) {
context.commit('set', [])
context.commit('stopLoading')
+ currentPage = 1
},
load (context, workspaceId) {
context.commit('startLoading')
- return axios.get(formsEndpoint.replace('{workspaceId}', workspaceId)).then((response) => {
- context.commit('set', response.data)
- context.commit('stopLoading')
+ return axios.get(formsEndpoint.replace('{workspaceId}', workspaceId)+'?page='+currentPage).then((response) => {
+ context.commit((currentPage == 1) ? 'set' : 'append', response.data.data)
+ if (currentPage < response.data.meta.last_page) {
+ currentPage += 1
+ context.dispatch('load', workspaceId)
+ } else {
+ context.commit('stopLoading')
+ currentPage = 1
+ }
})
+ },
+ loadIfEmpty (context, workspaceId) {
+ if (context.state.content.length === 0) {
+ return context.dispatch('load', workspaceId)
+ }
+ context.commit('stopLoading')
+ return Promise.resolve()
}
}
diff --git a/tests/Feature/Forms/FormTest.php b/tests/Feature/Forms/FormTest.php
index be124eb..d0c08d0 100644
--- a/tests/Feature/Forms/FormTest.php
+++ b/tests/Feature/Forms/FormTest.php
@@ -28,12 +28,10 @@ it('can fetch forms', function () {
$this->getJson(route('open.workspaces.forms.index', $workspace->id))
->assertSuccessful()
- ->assertJsonCount(1)
- ->assertJson(function (AssertableJson $json) use ($form) {
- return $json->where('0.id', $form->id)
- ->whereType('0.title', 'string')
- ->whereType('0.properties', 'array');
- });
+ ->assertJsonCount(3)
+ ->assertSuccessful()
+ ->assertJsonPath('data.0.id', $form->id)
+ ->assertJsonPath('data.0.title', $form->title);
});
it('can update a form', function () {
@@ -152,4 +150,4 @@ it('can create form with dark mode', function () {
->where('dark_mode', 'dark')
->etc();
});
-});
\ No newline at end of file
+});
From 545908d3009794973aecd1bd896127772842904a Mon Sep 17 00:00:00 2001
From: Chirag <103994754+chiragnotionforms@users.noreply.github.com>
Date: Tue, 18 Oct 2022 12:19:00 +0530
Subject: [PATCH 5/5] Allow use of toggle switches for checkboxes (#13)
---
app/Http/Requests/UserFormRequest.php | 1 +
.../js/components/forms/CheckboxInput.vue | 2 +-
.../js/components/forms/FlatSelectInput.vue | 6 ++--
.../js/components/forms/ToggleSwitchInput.vue | 31 +++++++++++++++++++
resources/js/components/forms/index.js | 4 ++-
.../js/components/open/forms/OpenForm.vue | 3 ++
.../forms/fields/FormFieldOptionsModal.vue | 18 +++++++++++
7 files changed, 60 insertions(+), 5 deletions(-)
create mode 100644 resources/js/components/forms/ToggleSwitchInput.vue
diff --git a/app/Http/Requests/UserFormRequest.php b/app/Http/Requests/UserFormRequest.php
index 8b3da44..e5fd267 100644
--- a/app/Http/Requests/UserFormRequest.php
+++ b/app/Http/Requests/UserFormRequest.php
@@ -84,6 +84,7 @@ abstract class UserFormRequest extends \Illuminate\Foundation\Http\FormRequest
'properties.*.timezone' => 'sometimes|nullable',
'properties.*.width' => ['sometimes', Rule::in(['full','1/2','1/3','2/3','1/3','3/4','1/4'])],
'properties.*.allowed_file_types' => 'sometimes|nullable',
+ 'properties.*.use_toggle_switch' => 'boolean|nullable',
// Logic
'properties.*.logic' => ['array', 'nullable', new FormPropertyLogicRule()],
diff --git a/resources/js/components/forms/CheckboxInput.vue b/resources/js/components/forms/CheckboxInput.vue
index d4ea11c..d6ba46b 100644
--- a/resources/js/components/forms/CheckboxInput.vue
+++ b/resources/js/components/forms/CheckboxInput.vue
@@ -1,7 +1,7 @@
- {{ label }}
+ {{ label }} *
{{ help }}
diff --git a/resources/js/components/forms/FlatSelectInput.vue b/resources/js/components/forms/FlatSelectInput.vue
index 8361024..f5d3250 100644
--- a/resources/js/components/forms/FlatSelectInput.vue
+++ b/resources/js/components/forms/FlatSelectInput.vue
@@ -6,6 +6,9 @@
{{ label }}
*
+
+ {{ help }}
+
-
- {{ help }}
-
diff --git a/resources/js/components/forms/ToggleSwitchInput.vue b/resources/js/components/forms/ToggleSwitchInput.vue
new file mode 100644
index 0000000..21739bd
--- /dev/null
+++ b/resources/js/components/forms/ToggleSwitchInput.vue
@@ -0,0 +1,31 @@
+
+
+
+
+ {{ label }} *
+
+
+ {{ help }}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/resources/js/components/forms/index.js b/resources/js/components/forms/index.js
index bbb854e..70fad78 100644
--- a/resources/js/components/forms/index.js
+++ b/resources/js/components/forms/index.js
@@ -16,6 +16,7 @@ import ImageInput from './ImageInput'
import DateInput from './DateInput';
import RatingInput from './RatingInput';
import FlatSelectInput from './FlatSelectInput';
+import ToggleSwitchInput from './ToggleSwitchInput';
// Components that are registered globaly.
[
@@ -34,7 +35,8 @@ import FlatSelectInput from './FlatSelectInput';
RichTextAreaInput,
DateInput,
RatingInput,
- FlatSelectInput
+ FlatSelectInput,
+ ToggleSwitchInput
].forEach(Component => {
Vue.component(Component.name, Component)
})
diff --git a/resources/js/components/open/forms/OpenForm.vue b/resources/js/components/open/forms/OpenForm.vue
index 427acb0..7cdba83 100644
--- a/resources/js/components/open/forms/OpenForm.vue
+++ b/resources/js/components/open/forms/OpenForm.vue
@@ -317,6 +317,9 @@ export default {
if (['select', 'multi_select'].includes(field.type) && field.without_dropdown) {
return 'FlatSelectInput'
}
+ if (field.type === 'checkbox' && field.use_toggle_switch) {
+ return 'ToggleSwitchInput'
+ }
return this.fieldComponents[field.type]
},
getFieldClasses (field) {
diff --git a/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue b/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
index c0cf6f0..48bf09f 100644
--- a/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
+++ b/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
@@ -37,6 +37,24 @@
+
+