datepicker and select components

assets/js/Components/Editor/DateTime.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="form-group">
+    <label>{{ label }}</label>
+      <div class="input-group">
+        <flat-pickr
+          v-model="val"
+          :config="config"                                                          
+          class="form-control" 
+          placeholder="Select date" 
+          :name="name"              
+          :readonly="readonly"
+          :form="form"
+          :disabled="readonly == 1"
+        >
+        </flat-pickr>
+        <div class="input-group-append">
+          <button 
+            class="btn btn-outline-primary"
+            :class="{'btn-outline-secondary': readonly == 1}" 
+            type="button"
+            :disabled="readonly == 1" 
+            data-toggle>
+            <i class="fa fa-calendar">
+              <span aria-hidden="true" class="sr-only">Toggle</span>
+            </i>
+          </button>
+        </div>
+      </div>
+  </div>
+</template>
+
+<script>
+import field from '../../helpers/mixins/fieldValue';
+import flatPickr from 'vue-flatpickr-component';
+import 'flatpickr/dist/flatpickr.css';
+
+export default {
+  name: "editor-datetime",
+  props: ['value', 'label', 'name', 'readonly', 'form'],
+  mixins: [field],
+  components: {
+      flatPickr
+  },
+  data: () => {
+    return {
+      config: {
+          wrap: true,
+          altFormat: 'Z',
+          altInput: true,
+          dateFormat: 'Z',
+          enableTime: true
+      }
+    }
+  }
+};
+</script>

assets/js/Components/Editor/MarkDown.vue

@@ -6,21 +6,18 @@
 </template>
 
 <script>
+import field from '../../helpers/mixins/fieldValue';
 import markdownEditor from 'vue-simplemde/src/markdown-editor'
 
 export default {
   name: "editor-markdown",
   props: ['value', 'label', 'name'],
+  mixins: [field],
   components: {
     markdownEditor
   },
-  mounted(){
-    console.log(this.value)
-    this.val = this.value;
-  },
   data: () => {
     return {
-      val: null,
       config:{
         spellChecker: false,
         status: false,

assets/js/Components/Editor/Select.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="form-group">
+      <label>{{ label }}</label>
+      <select class="custom-select" :id="id" v-model="val">
+        <option 
+          v-for="(option, index) in selectOptions" 
+          :key="index" 
+          :value="option.key"
+        >{{option.value}}</option>  
+      </select>
+  </div>
+</template>
+
+<script>
+import field from '../../helpers/mixins/fieldValue';
+
+export default {
+  name: "editor-select",
+  props: ['value', 'label', 'name', 'id', 'options'],
+  mixins: [field],
+  computed:{
+    selectOptions(){
+      return JSON.parse(this.options);
+    }
+  }
+};
+</script>

assets/js/Components/Editor/Slug.vue

@@ -36,17 +36,14 @@
 </template>
 
 <script>
-
+import field from '../../helpers/mixins/fieldValue';
 
 export default {
   name: "editor-slug",
   props: ['value', 'label', 'name', 'prefix', 'fieldClass', 'generate'],
-  mounted(){
-    this.val = this.value;
-  },
+  mixins: [field],
   data: () => {
     return {
-      val: null,
       edit: false,
       buttonText: 'Locked',
       icon: 'unlock'

assets/js/Components/Editor/TextArea.vue

@@ -3,7 +3,6 @@
       <label>{{ label }}</label>
       <textarea 
         :name="name" 
-        :fieldClass="class" 
         v-bind="val"
         cols="25"
       ></textarea>
@@ -11,19 +10,12 @@
 </template>
 
 <script>
-
+import field from '../../helpers/mixins/fieldValue';
 
 export default {
   name: "editor-textarea",
-  props: ['value', 'label', 'name', 'fieldClass'],
-  mounted(){
-    this.val = this.value;
-  },
-  data: () => {
-    return {
-      val: null,
-    };
-  },
+  props: ['value', 'label', 'name'],
+  mixins: [field],
 };
 </script>
 

assets/js/Views/editor.js

@@ -4,14 +4,19 @@ import Vue from "vue";
  */
 import Slug from "../Components/Editor/Slug.vue";
 import TextArea from "../Components/Editor/Slug.vue";
-import Markdown from "../Components/Editor/Markdown.vue";
+import MarkDown from "../Components/Editor/Markdown.vue";
 import Html from "../Components/Editor/Html.vue";
+import DateTime from "../Components/Editor/DateTime.vue";
+import Select from "../Components/Editor/Select.vue";
 /**
  * Register Components
  */
 Vue.component("editor-slug", Slug);
 Vue.component("editor-textarea", TextArea);
-Vue.component("editor-markdown", Markdown);
+Vue.component("editor-markdown", MarkDown);
 Vue.component("editor-html", Html);
+Vue.component("editor-datetime", DateTime);
+Vue.component("editor-select", Select);
 
-new Vue({ el: "#editcontent", name: "bolt-editor" });
+new Vue({ el: "#editcontent", name: "admin-editor" });
+new Vue({ el: "#metadata", name: "admin-meta" });

assets/js/helpers/filters.js

@@ -1,4 +1,19 @@
+/* eslint-disable */
+
 import Vue from 'vue'
+import moment from 'moment'
+
+Vue.filter('date', string =>{
+  if (string) {
+    return moment(String(string)).add(1,'days').format('MMMM DD, YYYY')
+  }
+});
+
+Vue.filter('datetime', string =>{
+  if (string) {
+    return moment(String(string)).add(1,'days').format('MMMM Do YYYY, h:mm:ss a')
+  }
+});
 
 Vue.filter('slugify', string => {
   if (string) {
@@ -11,8 +26,6 @@ Vue.filter('slugify', string => {
   }
 })
 
-
-
 Vue.filter('strip', string => {
   if (string) {
    return string.replace (/(^")|("$)/g, '')

assets/js/helpers/mixins/fieldValue.js

@@ -0,0 +1,10 @@
+export default {
+  mounted(){
+    this.val = this.value;
+  },
+  data: () => {
+    return {
+      val: null
+    };
+  }
+}

package-lock.json

@@ -3837,6 +3837,11 @@
         }
       }
     },
+    "flatpickr": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.5.2.tgz",
+      "integrity": "sha512-jDy4QYGpmiy7+Qk8QvKJ4spjDdxcx9cxMydmq1x427HkKWBw0qizLYeYM2F6tMcvvqGjU5VpJS55j4LnsaBblA=="
+    },
     "flatten": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz",
@@ -10259,6 +10264,14 @@
         }
       }
     },
+    "vue-flatpickr-component": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/vue-flatpickr-component/-/vue-flatpickr-component-8.0.0.tgz",
+      "integrity": "sha512-PQ8D2sa25a05J4EyCK/iZIUM85zp8Ahlg+7S8XknwFqYcuayeo3r9bqVppT36QEO07Cyne4XPnjIMGHIh0hZ7Q==",
+      "requires": {
+        "flatpickr": "^4.5.1"
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.1.tgz",

package.json

@@ -26,12 +26,13 @@
   "dependencies": {
     "axios": "^0.18.0",
     "bootstrap": "^4.1.3",
+    "codemirror": "^5.40.2",
     "jquery": "^3.3.1",
     "moment": "^2.22.2",
     "popper.js": "^1.14.4",
-    "codemirror": "^5.40.2",
     "simplemde": "^1.11.2",
     "vue": "^2.5.17",
+    "vue-flatpickr-component": "^8.0.0",
     "vue-simplemde": "^0.4.8",
     "vue-trumbowyg": "^3.4.0"
   },
@@ -47,7 +48,6 @@
     "root": true,
     "extends": [
       "plugin:vue/essential",
-      "plugin:prettier/recommended",
       "eslint:recommended"
     ]
   },

templates/editcontent/edit.twig

@@ -38,7 +38,7 @@
 
 {% block aside %}
 
-<div class="card">
+<div id="metadata" class="card">
     <div class="card-header">
         Meta information
     </div>
@@ -69,28 +69,31 @@
         'label': 'field.createdAt'|trans,
         'name': 'createdAt',
         'value': record.createdAt,
-        'attributes': 'readonly form="editcontent"',
+        'readonly': true,
+        'form': 'editcontent'
     } %}
 
     {% include '@bolt/editcontent/fields/datetime.twig' with {
         'label': 'field.modifiedAt'|trans,
         'name': 'modifiedAt',
         'value': record.modifiedAt,
-        'attributes': 'readonly form="editcontent"',
+        'readonly': true,
+        'form': 'editcontent'
     } %}
 
     {% include '@bolt/editcontent/fields/datetime.twig' with {
         'label': 'field.publishedAt'|trans,
         'name': 'publishedAt',
         'value': record.publishedAt,
-        'attributes': 'form="editcontent"',
+        'readonly': false,
+        'form': 'editcontent'
     } %}
 
     {% include '@bolt/editcontent/fields/datetime.twig' with {
         'label': 'field.depublishedAt'|trans,
         'name': 'depublishedAt',
-        'value': record.depublishedAt,
-        'attributes': 'form="editcontent"',
+        'readonly': false,
+        'form': 'editcontent'
     } %}
         </form>
 

templates/editcontent/fields/datetime.twig

@@ -5,11 +5,16 @@
     {% if value.timestamp is defined %}
         {% set value = value|date(format='c') %}
     {% endif %}
-
-    <label>{{ label }}</label>
-    <div class="ui input left icon calendar">
+    {# <div class="ui input left icon calendar">
         <i class="calendar icon"></i>
         <input type="text" name="{{ name }}" value="{{ value }}" class="{{ class }}" {{ attributes|default()|raw }}>
-    </div>
+    </div> #}
+    <editor-datetime 
+        :value="'{{ value }}'"
+        :label="'{{ label }}'"
+        :name="'{{ name }}'"
+        :readonly="'{{ readonly }}'"
+        :form="'{{ form }}'"
+    ></editor-datetime>
 {% endblock %}
 

templates/editcontent/fields/select.twig

@@ -11,7 +11,19 @@
 {% endif %}
 
 {% block field %}
-    <div class="ui grid">
+    {% if multiple %}
+        Multi
+    {% else %}
+        <editor-select
+            :value="'{{ value }}'"
+            :label="'{{ label }}'"
+            :name="'{{ name }}'"
+            :id="'{{ id }}'"
+            :options="'{{ options|json_encode() }}'"
+        ></editor-select>
+    {% endif %}
+
+    {# <div class="ui grid">
         <div class="four wide column"><label>{{ label }}</label></div>
         <div class="twelve wide column">
             <select name="{{ name }}[]" id="{{ id }}" {{ multiple ? 'multiple' : '' }} {{ attributes|default()|raw }}>
@@ -20,5 +32,5 @@
                 {% endfor %}
             </select>
         </div>
-</div>
+    </div> #}
 {% endblock %}

templates/editcontent/fields/textarea.twig

@@ -5,6 +5,5 @@
         :value="'{{ value }}'"
         :label="'{{ label }}'"
         :name="'{{ name }}'"
-        :field-class="'{{ class }}'"
     ></editor-textarea>
 {% endblock %}

templates/editcontent/javascripts/image.twig

@@ -2,7 +2,7 @@
 
 
 {% block javascripts %}
-    <script>
+    {# <script>
         FilePond.registerPlugin(
             FilePondPluginFileMetadata,
             FilePondPluginImagePreview
@@ -31,5 +31,5 @@
             document.querySelector("#{{ id }}-uploader").style.background = 'none';
         });
 
-    </script>
+    </script> #}
 {% endblock %}

templates/editcontent/javascripts/image_include.twig

@@ -1,5 +1,5 @@
-<script src="https://unpkg.com/filepond-plugin-image-preview"></script>
+{# <script src="https://unpkg.com/filepond-plugin-image-preview"></script>
 <script src="https://unpkg.com/filepond-plugin-file-metadata/dist/filepond-plugin-file-metadata.js"></script>
 <script src="https://unpkg.com/filepond"></script>
 <script src="https://unpkg.com/vue"></script>
-<script src="https://unpkg.com/vue-filepond"></script>
+<script src="https://unpkg.com/vue-filepond"></script> #}

templates/editcontent/javascripts/select_include.twig

@@ -1 +1 @@
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
+    {# <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script> #}

templates/editcontent/stylesheets/image_include.twig

@@ -1,2 +0,0 @@
-<link rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.min.css">
-<link rel="stylesheet" href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css">

templates/editcontent/stylesheets/markdown_include.twig

@@ -1 +0,0 @@
-    <link rel="stylesheet" href="{{ asset('assets/markdown.css') }}">