From 4ddf76943d6857f21d2c1dd94f85b2d7c2512cca Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Wed, 27 Dec 2023 01:20:07 +0100
Subject: [PATCH] Add column selector

---
 resources/img/svg/desktop.svg                 |  1 +
 resources/img/svg/mobile.svg                  |  1 +
 resources/img/svg/tablet.svg                  |  1 +
 .../js/views/formtemplate/ColumnSelector.vue  | 54 +++++++++++++++++++
 .../js/views/formtemplate/FormBuilder.vue     |  2 +
 5 files changed, 59 insertions(+)
 create mode 100644 resources/img/svg/desktop.svg
 create mode 100644 resources/img/svg/mobile.svg
 create mode 100644 resources/img/svg/tablet.svg
 create mode 100644 resources/js/views/formtemplate/ColumnSelector.vue

diff --git a/resources/img/svg/desktop.svg b/resources/img/svg/desktop.svg
new file mode 100644
index 00000000..783eb7e7
--- /dev/null
+++ b/resources/img/svg/desktop.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 503.664 503.664" style="enable-background:new 0 0 503.664 503.664" xml:space="preserve"><path d="M467.98 39.376H35.792C16.112 39.376.1 55.384.1 75.064L0 369.52c0 19.676 16.004 35.748 35.684 35.748h141.4v35.408h-27.612c-2.172 0-3.864 1.848-3.864 4.02v15.532c0 2.172 1.688 4.06 3.864 4.06h204c2.164 0 4.584-1.888 4.584-4.06v-15.532c0-2.172-2.42-4.02-4.584-4.02H326.58v-35.408h141.304c19.664 0 35.688-16.072 35.688-35.748l.092-294.424c.004-19.684-16.004-35.72-35.684-35.72zM251.34 377.524c-6.524 0-11.804-5.284-11.804-11.804 0-6.516 5.28-11.8 11.804-11.8 6.52 0 11.804 5.284 11.804 11.8 0 6.52-5.28 11.804-11.804 11.804zm220.812-50.944H31.512V70.848h440.64V326.58z"/></svg>
\ No newline at end of file
diff --git a/resources/img/svg/mobile.svg b/resources/img/svg/mobile.svg
new file mode 100644
index 00000000..8b49877c
--- /dev/null
+++ b/resources/img/svg/mobile.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 503.604 503.604" style="enable-background:new 0 0 503.604 503.604" xml:space="preserve"><path d="M337.324 0H167.192c-28.924 0-53.5 23.584-53.5 52.5v398.664c0 28.916 24.056 52.44 52.98 52.44l170.412-.184c28.92 0 52.58-23.528 52.58-52.448l.248-398.5C389.908 23.452 366.364 0 337.324 0zM227.68 31.476h49.36c4.336 0 7.868 3.52 7.868 7.868 0 4.348-3.532 7.868-7.868 7.868h-49.36a7.865 7.865 0 0 1-7.868-7.868 7.865 7.865 0 0 1 7.868-7.868zm-29.66 2.504c2.916-2.912 8.224-2.952 11.136 0a7.973 7.973 0 0 1 2.324 5.588c0 2.048-.864 4.088-2.324 5.548-1.452 1.46-3.504 2.32-5.548 2.32-2.084 0-4.088-.86-5.588-2.32-1.452-1.456-2.28-3.5-2.28-5.548-.004-2.088.828-4.132 2.28-5.588zm52.752 454.028c-12.984 0-23.544-10.568-23.544-23.548 0-12.984 10.56-23.548 23.544-23.548s23.544 10.564 23.544 23.548c0 12.98-10.564 23.548-23.544 23.548zm114.716-63.1H141.232V74.756h224.256v350.152z"/></svg>
\ No newline at end of file
diff --git a/resources/img/svg/tablet.svg b/resources/img/svg/tablet.svg
new file mode 100644
index 00000000..39bccae1
--- /dev/null
+++ b/resources/img/svg/tablet.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 503.592 503.592" style="enable-background:new 0 0 503.592 503.592" xml:space="preserve"><path d="M428.636 27.852C428.636 12.508 416.144 0 400.792 0H102.66C87.312 0 74.828 12.504 74.828 27.852l.132 447.892c0 15.352 12.488 27.848 27.832 27.848h298.136c15.352 0 27.836-12.496 27.836-27.848l-.128-447.892zm-196.276 3.62h38.884c4.36 0 7.868 3.52 7.868 7.868a7.863 7.863 0 0 1-7.868 7.872H232.36c-4.348 0-7.868-3.524-7.868-7.872s3.52-7.868 7.868-7.868zm-29.396 2.44c2.916-2.948 8.184-2.948 11.136 0 1.452 1.46 2.324 3.504 2.324 5.552 0 2.08-.872 4.084-2.324 5.544-1.46 1.496-3.504 2.324-5.584 2.324a7.747 7.747 0 0 1-5.552-2.324c-1.452-1.456-2.316-3.464-2.316-5.544 0-2.048.868-4.092 2.316-5.552zm47.252 454.216c-12.98 0-23.544-10.564-23.544-23.544 0-12.984 10.568-23.548 23.544-23.548 12.988 0 23.544 10.564 23.544 23.548s-10.552 23.544-23.544 23.544zM94.424 424.904V74.752h314.744v350.152H94.424z"/></svg>
\ No newline at end of file
diff --git a/resources/js/views/formtemplate/ColumnSelector.vue b/resources/js/views/formtemplate/ColumnSelector.vue
new file mode 100644
index 00000000..75f52774
--- /dev/null
+++ b/resources/js/views/formtemplate/ColumnSelector.vue
@@ -0,0 +1,54 @@
+<template>
+    <div class="space-y-1">
+        <span class="text-xs font-semibold text-gray-400">Spalten</span>
+        <div class="flex rounded-lg border border-gray-500 divide-x divide-gray-500 overflow-hidden">
+            <div class="bg-gray-600 w-8 h-6 flex items-center justify-center">
+                <ui-sprite src="mobile" class="w-4 h-4"></ui-sprite>
+            </div>
+            <div
+                v-for="(i, index) in 2"
+                class="hover:cursor-pointer grow flex items-center justify-center text-sm text-teal-600"
+                :class="{'bg-teal-900': i <= modelValue.mobile}"
+                @click.prevent="$emit('update:modelValue', {...modelValue, mobile: i})"
+                v-text="i"
+            ></div>
+        </div>
+
+        <div class="flex rounded-lg border border-gray-500 divide-x divide-gray-500 overflow-hidden">
+            <div class="bg-gray-600 w-8 h-6 flex items-center justify-center">
+                <ui-sprite src="tablet" class="w-4 h-4"></ui-sprite>
+            </div>
+            <div
+                v-for="(i, index) in 4"
+                class="hover:cursor-pointer grow flex items-center justify-center text-sm text-teal-600"
+                :class="{'bg-teal-900': i <= modelValue.tablet}"
+                @click.prevent="$emit('update:modelValue', {...modelValue, tablet: i})"
+                v-text="i"
+            ></div>
+        </div>
+
+        <div class="flex rounded-lg border border-gray-500 divide-x divide-gray-500 overflow-hidden">
+            <div class="bg-gray-600 w-8 h-6 flex items-center justify-center">
+                <ui-sprite src="desktop" class="w-4 h-4"></ui-sprite>
+            </div>
+            <div
+                v-for="(i, index) in 6"
+                class="hover:cursor-pointer grow flex items-center justify-center text-sm text-teal-600"
+                :class="{'bg-teal-900': i <= modelValue.desktop}"
+                @click.prevent="$emit('update:modelValue', {...modelValue, desktop: i})"
+                v-text="i"
+            ></div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+defineEmits(['update:modelValue']);
+
+const props = defineProps({
+    modelValue: {
+        required: true,
+        validator: (value) => typeof value === 'object' && JSON.stringify(Object.keys(value).sort()) === JSON.stringify(['desktop', 'mobile', 'tablet'].sort()),
+    },
+});
+</script>
diff --git a/resources/js/views/formtemplate/FormBuilder.vue b/resources/js/views/formtemplate/FormBuilder.vue
index d5c0e9c3..82101d13 100644
--- a/resources/js/views/formtemplate/FormBuilder.vue
+++ b/resources/js/views/formtemplate/FormBuilder.vue
@@ -26,6 +26,7 @@
                     @submit="storeField"
                 >
                     <f-text id="fieldname" v-model="singleField.model.name" label="Name" size="sm" name="fieldname"></f-text>
+                    <column-selector v-model="singleField.model.columns"></column-selector>
                     <component :is="fields[singleField.model.type]" v-model="singleField.model"></component>
                 </asideform>
             </div>
@@ -56,6 +57,7 @@ import DropdownField from './RadioField.vue';
 import RadioField from './RadioField.vue';
 import CheckboxField from './CheckboxField.vue';
 import CheckboxesField from './CheckboxesField.vue';
+import ColumnSelector from './ColumnSelector.vue';
 
 const sectionVisible = ref(-1);
 const singleSection = ref(null);