nicer bigtext editor

yopa-web/resources/src/components/EditPropertyField.vue

@@ -54,11 +54,12 @@ export default {
       <label class="form-label" :for="widget_id" v-if="vi===0">{{ model.name }}</label>
     </div>
     <div class="col-9 pr-2">
-      <string-value :ref="setFieldRef" :value="instance.value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='String'"></string-value>
+      <string-value :ref="setFieldRef" :value="instance.value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='String' && !model.options.multiline"></string-value>
+      <text-value :ref="setFieldRef" :value="instance.value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='String' && model.options.multiline"></text-value>
       <integer-value :ref="setFieldRef" :value="instance.value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='Integer'"></integer-value>
       <decimal-value :ref="setFieldRef" :value="instance.value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='Decimal'"></decimal-value>
       <boolean-value :ref="setFieldRef" :value="instance.value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='Boolean'"></boolean-value>
-      <button type="button" class="btn btn-delete ml-1" @click="removeValue(vi)" v-if="values.length > 1 || model.optional">
+      <button type="button" :class="['btn','btn-delete', (model.data_type==='String' && model.options.multiline)?'mt-1': 'ml-1']" @click="removeValue(vi)" v-if="values.length > 1 || model.optional">
         <i class="icon icon-cross"></i>Remove
       </button>
     </div>

yopa-web/resources/src/components/PropertyField.vue

@@ -51,11 +51,12 @@ export default {
       <label class="form-label" :for="widget_id" v-if="vi===0">{{ model.name }}</label>
     </div>
     <div class="col-9 pr-2">
-      <string-value :ref="setFieldRef" :value="value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='String'"></string-value>
+      <string-value :ref="setFieldRef" :value="value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='String' && !model.options.multiline"></string-value>
+      <text-value :ref="setFieldRef" :value="value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='String' && model.options.multiline"></text-value>
       <integer-value :ref="setFieldRef" :value="value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='Integer'"></integer-value>
       <decimal-value :ref="setFieldRef" :value="value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='Decimal'"></decimal-value>
       <boolean-value :ref="setFieldRef" :value="value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='Boolean'"></boolean-value>
-      <button type="button" class="btn btn-delete ml-1" @click="removeValue(vi)" v-if="values.length > 1 || model.optional">
+      <button type="button" :class="['btn','btn-delete', (model.data_type==='String' && model.options.multiline)?'mt-1': 'ml-1']" @click="removeValue(vi)" v-if="values.length > 1 || model.optional">
         <i class="icon icon-cross"></i>Remove
       </button>
     </div>

yopa-web/resources/src/components/value/TextValue.vue

@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: "StringValue",
+  props: {
+    id: {
+      type: String,
+      default: '',
+    },
+    value: Object
+  },
+  methods: {
+    focus() {
+      this.$refs.input.focus();
+    }
+  },
+  computed: {
+    inputValue: {
+      set(value) {
+        this.value.String = value
+      },
+      get() {
+        return this.value.String;
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <textarea ref="input" class="form-input" style="resize: vertical" rows="6" :id="id" v-model="inputValue"></textarea>
+</template>

yopa-web/resources/src/main.js

@@ -19,7 +19,7 @@ import {qs} from "./utils";
 
 function registerComponents(app) {
   app.component('string-value', StringValue);
-  app.component('text-value', StringValue);
+  app.component('text-value', TextValue);
   app.component('integer-value', IntegerValue);
   app.component('decimal-value', DecimalValue);
   app.component('boolean-value', BooleanValue);

yopa-web/resources/src/style/app.scss

@@ -21,3 +21,7 @@ table.object-display {
 .hidden {
   display: none !important;
 }
+
+.text-pre {
+  white-space: pre-wrap;
+}

yopa-web/resources/static/style.css

@@ -4132,3 +4132,6 @@ table.object-display {
 
 .hidden {
   display: none !important; }
+
+.text-pre {
+  white-space: pre-wrap; }

yopa-web/resources/templates/objects/object_detail.html.tera

@@ -30,9 +30,7 @@
 				{{ property.model.name }}
 			</th>
 			{% endif %}
-			<td title="{{value.id}}">
+			<td title="{{value.id}}" class="text-pre">{{ value.value | print_typed_value }}</td>
-				{{ value.value | print_typed_value }}
-			</td>
 		</tr>
 		{% endfor %}
 	{% endfor %}

yopa-web/src/routes/models/object.rs

@@ -32,7 +32,9 @@ pub(crate) async fn create_form(session: Session) -> actix_web::Result<impl Resp
     if let Ok(Some(form)) = session.take::<ObjectModelForm>("old") {
         context.insert("old", &form);
     } else {
-        context.insert("old", &ObjectModelForm::default());
+        let mut f = ObjectModelForm::default();
+        f.sort_key = 1000;
+        context.insert("old", &f);
     }
 
     TERA.build_response("models/model_create", &context)