V2 vue forms

system/typemill/Controllers/ControllerSystem.php

@@ -3,6 +3,8 @@
 namespace Typemill\Controllers;
 
 use Typemill\Models\User;
+use Typemill\Models\Yaml;
+
 
 # use \Symfony\Component\Yaml\Yaml;
 # use Typemill\Models\Write;
@@ -60,6 +62,9 @@ class ControllerSystem extends ControllerData
 		$user->setUser($_SESSION['username']);
 		$userdata = $user->getUserData();
 
+		$yaml 			= new Yaml('\Typemill\Models\Storage');
+		$system 		= $yaml->getYaml('system/typemill/settings', 'system.yaml');
+
 	    return $this->c->get('view')->render($response, 'system/system.twig', [
 			'basicauth'			=> $user->getBasicAuth(),
 			'settings' 			=> $this->settings,
@@ -67,6 +72,7 @@ class ControllerSystem extends ControllerData
 			'systemnavi'		=> $this->getSystemNavigation($userdata['userrole']),
 			'jsdata' 			=> [
 										'settings' 	=> $this->settings,
+										'system'	=> $system,
 									]
 
 	    	# main navigation

system/typemill/author/js/vue-system.js

@@ -1,20 +1,44 @@
 const { createApp } = Vue
 
 createApp({
- 	delimiters: ['${', '}'],
+	template: `<div><form>MyForm Here message
+							<div v-for="(field, legend) in formDefinitions">
+								{{ legend }}
+								<fieldset v-if="field.type == 'fieldset'" class="fs-formbuilder"><legend>{{field.legend}}</legend>
+									<component v-for="(subfield, index) in field.fields "
+		            	    :key="index"
+		                	:is="selectComponent(subfield)"
+		                	:errors="errors"
+		                	:name="index"
+		                	:userroles="userroles"
+		                	v-model="formdata[index]" 
+		                	v-bind="subfield">
+									</component>
+								</fieldset>
+								<component v-else
+		            	    :key="index"
+		                	:is="selectComponent(field)"
+		                	:errors="errors"
+		                	:name="index"
+		                	:userroles="userroles"
+		                	v-model="formData[index]"
+		                	v-bind="field">
+								</component>
+							</div>
+			  </form></div>`, 	
 	data() {
 		return {
 			message: 'Add system forms with vue here',
 			root: document.getElementById("main").dataset.url,
 			currentTab: 'System',
-			tabs: ['System', 'Media', 'Editor', 'Access', 'Password Recovery', 'Advanced'],
-			formDefinitions: [],
-			formData: [],
+			tabs: [],
+			formDefinitions: data.system.fields,
+			formData: data.settings,
 			formErrors: {},
 			formErrorsReset: {},
 			item: false,
 			userroles: false,
-			saved: false,
+			saved: false, 
 		}
 	},
 	computed: {
@@ -31,10 +55,145 @@ createApp({
 	    	return 'tab-' + this.currentTab.toLowerCase()
 			}
 		}
+	},
+	mounted() {            	
+    for (var key in this.formDefinitions)
+    {
+			if (this.formDefinitions.hasOwnProperty(key))
+			{
+				this.tabs.push(key);
+				this.formErrors[key] = false;
+			}
+		}
+		this.formErrorsReset = this.formErrors;
+	},
+	methods: {
+		selectComponent: function(field)
+		{
+			return 'component-'+field.type;
+		},
 	},	
 }).mount('#systemsettings')
 
 
+/*
+Vue.component('tab-meta', {
+	props: ['saved', 'errors', 'formdata', 'schema', 'userroles'],
+	data: function () {
+		return {
+			slug: false,
+			originalSlug: false,
+			slugerror: false,
+			disabled: "disabled",
+		}
+	},
+	template: '<section><form>' +
+				'<div v-if="slug !== false"><div class="large relative">' +
+					'<label>Slug / Name in URL</label><input type="text" v-model="slug" pattern="[a-z0-9\- ]" @input="changeSlug()"><button @click.prevent="storeSlug()" :disabled="disabled" class="button slugbutton bn br2 bg-tm-green white absolute">change slug</button>' +
+					'<div v-if="slugerror" class="f6 tm-red mt1">{{ slugerror }}</div>' +
+				'</div></div>' +
+				'<div v-for="(field, index) in schema.fields">' +
+					'<fieldset v-if="field.type == \'fieldset\'" class="fs-formbuilder"><legend>{{field.legend}}</legend>' + 
+						'<component v-for="(subfield, index) in field.fields "' +
+		            	    ' :key="index"' +
+		                	' :is="selectComponent(subfield)"' +
+		                	' :errors="errors"' +
+		                	' :name="index"' +
+		                	' :userroles="userroles"' +
+		                	' v-model="formdata[index]"' + 
+		                	' v-bind="subfield">' +
+						'</component>' + 
+					'</fieldset>' +
+						'<component v-else' +
+		            	    ' :key="index"' +
+		                	' :is="selectComponent(field)"' +
+		                	' :errors="errors"' +
+		                	' :name="index"' +
+		                	' :userroles="userroles"' +
+		                	' v-model="formdata[index]"' +
+		                	' v-bind="field">' +
+						'</component>' + 
+				'</div>' +
+				'<div v-if="saved" class="metasubmit"><div class="metaSuccess">{{ \'Saved successfully\'|translate }}</div></div>' +
+				'<div v-if="errors" class="metasubmit"><div class="metaErrors">{{ \'Please correct the errors above\'|translate }}</div></div>' +
+				'<div class="metasubmit"><input type="submit" @click.prevent="saveInput" :value="\'save\'|translate"></input></div>' +
+			  '</form></section>',
+	mounted: function()
+	{
+		if(this.$parent.item.slug != '')
+		{
+			this.slug =	this.$parent.item.slug;
+			this.originalSlug = this.slug;
+		}
+	},
+	methods: {
+		selectComponent: function(field)
+		{
+			return 'component-'+field.type;
+		},
+		saveInput: function()
+		{
+  			this.$emit('saveform');
+		},
+		changeSlug: function()
+		{
+			if(this.slug == this.originalSlug)
+			{
+				this.slugerror = false;
+				this.disabled = "disabled";
+				return;
+			}
+			if(this.slug == '')
+			{
+				this.slugerror = 'empty slugs are not allowed';
+				this.disabled = "disabled";
+				return;
+			}
+
+			this.slug = this.slug.replace(/ /g, '-');
+
+			if(this.slug.match(/^[a-z0-9\-]*$/))
+			{
+				this.slugerror = false;
+				this.disabled = false;
+			}
+			else
+			{
+				this.slugerror = 'Only lowercase a-z and 0-9 and "-" is allowed for slugs.';
+				this.disabled = "disabled";
+			}
+		},
+		storeSlug: function()
+		{
+
+			if(this.slug.match(/^[a-z0-9\-]*$/) && this.slug != this.originalSlug)
+			{
+				var self = this;
+
+		    myaxios.post('/api/v1/article/rename',{
+						'url':				document.getElementById("path").value,
+						'csrf_name': 	document.getElementById("csrf_name").value,
+						'csrf_value':	document.getElementById("csrf_value").value,
+						'slug': 			this.slug,
+				})
+		    .then(function (response)
+		    {
+					window.location.replace(response.data.url);
+				})
+		    .catch(function (error)
+		    {
+		      if(error.response.data.errors.message)
+		      {
+		        publishController.errors.message = error.response.data.errors.message;
+		      }
+		    });
+		  }			
+		}
+	}
+})
+
+
+
 
 /*
 

system/typemill/author/layouts/layoutSystem.twig

@@ -54,7 +54,8 @@
 			
 			var data = {{ jsdata | json_encode() | raw  }}
 
-			var eventBus = false;
+/*			var eventBus = false; */
+			console.info(data.settings);
 
 		</script>
 		<script src="{{ base_url() }}/system/typemill/author/js/axios.min.js?v={{ settings.version }}"></script>
@@ -66,8 +67,12 @@
 		</script>
 <!--		<script src="{{ base_url() }}/system/typemill/author/js/autosize.min.js?v={{ settings.version }}"></script> -->
 		<script src="{{ base_url() }}/system/typemill/author/js/vue.js?v={{ settings.version }}"></script>
+		<script>
+			const { eventBus } = Vue;
+		</script>
 <!--
 		<script>
+			var eventBus = false;
 			const FormBus = new Vue();
 		</script>
 		<script src="{{ base_url() }}/system/author/js/vue-shared.js?v={{ settings.version }}"></script>		

system/typemill/settings/system.yaml

@@ -1,12 +1,50 @@
-basics:
+system:  
   fields:
-media:
-  fields:
-writing:
-  fields:
-access:
-  fields:
-password:
-  fields:
-developer:
-  fields:
+    fieldsetsystem:
+      type: fieldset
+      legend: System
+      fields:
+        title:
+          type: text
+          label: Website Title
+          class: medium
+          maxlength: 60
+        author:
+          type: text
+          label: Author
+          class: medium
+          maxlength: 60
+        copyright:
+          type: text
+          label: Copyright
+          class: medium
+          maxlength: 60
+        year:
+          type: text
+          label: Year
+          class: medium
+          maxlength: 60
+    fieldsetmedia:
+      type: fieldset
+      legend: Media
+      fields:
+        title:
+          type: text
+          label: Website Title
+          class: medium
+          maxlength: 60
+        author:
+          type: text
+          label: Author
+          class: medium
+          maxlength: 60
+        copyright:
+          type: text
+          label: Copyright
+          class: medium
+          maxlength: 60
+        year:
+          type: text
+          label: Year
+          class: medium
+          maxlength: 60