From 47a514343cd38250f0d632ccfa3598737a028811 Mon Sep 17 00:00:00 2001
From: William Correa <wilcorrea@gmail.com>
Date: Sat, 30 Mar 2019 11:47:24 -0300
Subject: [PATCH] [#4/feature] Allow change order with drag and drop

---
 package.json                     |   1 +
 quasar.conf.js                   |   3 +-
 src/view/Studio/LayoutStudio.vue | 145 ---------------
 src/view/Studio/Sortable.js      |  20 ++
 src/view/Studio/StudioCanvas.vue | 309 ++++++++++++++++++++++---------
 yarn.lock                        |   4 +
 6 files changed, 246 insertions(+), 236 deletions(-)
 delete mode 100644 src/view/Studio/LayoutStudio.vue
 create mode 100644 src/view/Studio/Sortable.js

diff --git a/package.json b/package.json
index 9d45900..0f5516a 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "lodash": "^4.17.11",
     "quasar": "^1.0.0-beta.0",
     "siiimple-toast": "^3.1.6",
+    "sortablejs": "^1.8.4",
     "vue-hot-reload-loader": "^0.2.0",
     "vue-i18n": "^7.3.3",
     "vuelidate": "^0.7.4"
diff --git a/quasar.conf.js b/quasar.conf.js
index eb34f9e..e991674 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -98,7 +98,8 @@ module.exports = function (context) {
         'QDialog',
         'QBar',
         'QTabs',
-        'QTab'
+        'QTab',
+        'QFab'
       ],
 
       directives: [
diff --git a/src/view/Studio/LayoutStudio.vue b/src/view/Studio/LayoutStudio.vue
deleted file mode 100644
index 7c55d98..0000000
--- a/src/view/Studio/LayoutStudio.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<!--suppress HtmlUnknownTarget -->
-<template>
-  <q-layout view="lHr lpR lff">
-    <q-header
-      elevated
-    >
-      <q-toolbar>
-        <q-btn
-          dense
-          flat
-          round
-          icon="menu"
-          @click="left = !left"
-        />
-
-        <q-toolbar-title>
-          Quasar Studio
-        </q-toolbar-title>
-
-        <div class="qc-brand-image-container">
-          <img
-            class="qc-brand-image"
-            src="statics/quasar-logo.png"
-            alt="logo"
-          >
-        </div>
-
-        <a
-          href="https://v1.quasar-framework.org"
-          class="qc-brand-link"
-        >
-          <small>Quasar v{{ $q.version }}</small>
-        </a>
-
-        <q-btn
-          dense
-          flat
-          round
-          icon="menu"
-          @click="right = !right"
-        />
-      </q-toolbar>
-    </q-header>
-
-    <q-drawer
-      v-model="left"
-      side="left"
-      bordered
-    >
-      <div
-        class="q-expansion-item__content relative-position"
-        style=""
-      >
-        <!-- href="/vue-components/input"-->
-        <!-- Input Textfield-->
-        <!-- href="/vue-components/select"-->
-        <!-- Select-->
-        <!-- href="/vue-components/radio"-->
-        <!-- Radio-->
-        <!-- href="/vue-components/checkbox"-->
-        <!-- Checkbox-->
-        <!-- href="/vue-components/toggle"-->
-        <!-- Toggle-->
-        <!-- href="/vue-components/button-toggle"-->
-        <!-- Button Toggle-->
-        <!-- href="/vue-components/option-group"-->
-        <!-- Option Group-->
-        <!-- href="/vue-components/slider"-->
-        <!-- Slider-->
-        <!-- href="/vue-components/range"-->
-        <!-- Range-->
-        <!-- href="/vue-components/time"-->
-        <!-- Time Picker-->
-        <!-- href="/vue-components/date"-->
-        <!-- Date Picker-->
-      </div>
-    </q-drawer>
-
-    <q-drawer
-      v-model="right"
-      side="right"
-      bordered
-    >
-      <!-- drawer content -->
-    </q-drawer>
-
-    <q-page-container>
-      <studio-canvas />
-    </q-page-container>
-
-    <q-footer
-      elevated
-      class="bg-grey-4 text-grey-10"
-    >
-      <q-toolbar>
-        <small>Footer</small>
-      </q-toolbar>
-    </q-footer>
-  </q-layout>
-</template>
-
-<script type="text/javascript">
-import StudioCanvas from 'src/view/Studio/StudioCanvas'
-
-/**
- */
-export default {
-  /**
-   */
-  components: {
-    StudioCanvas
-  },
-  /**
-   * @returns {Object}
-   */
-  data () {
-    return {
-      left: true,
-      right: false
-    }
-  }
-}
-</script>
-
-<style lang="stylus">
-  @import '~src/css/quasar.variables.styl'
-
-  .qc-brand-link
-    color #fff
-    text-decoration none
-
-  .qc-brand-image-container
-    margin 0 10px
-
-    .qc-brand-image
-      height 36px
-      transition-duration 0.6s
-      transition-property transform
-
-      &:hover
-        transform rotate(360deg)
-
-  .q-header
-    background linear-gradient(0deg, #23364b 20%, #1b263a 95%)
-</style>
diff --git a/src/view/Studio/Sortable.js b/src/view/Studio/Sortable.js
new file mode 100644
index 0000000..7ef4d08
--- /dev/null
+++ b/src/view/Studio/Sortable.js
@@ -0,0 +1,20 @@
+import Sortable from 'sortablejs'
+
+let sortable
+
+export default {
+  bind (el, binding) {
+    const options = {
+      ...binding.value.options,
+      onUpdate: function () {
+        binding.value.handle(this.toArray())
+      }
+    }
+
+    sortable = Sortable.create(el, options)
+  },
+
+  unbind () {
+    sortable.destroy()
+  }
+}
diff --git a/src/view/Studio/StudioCanvas.vue b/src/view/Studio/StudioCanvas.vue
index 9c477e4..e35c583 100644
--- a/src/view/Studio/StudioCanvas.vue
+++ b/src/view/Studio/StudioCanvas.vue
@@ -1,115 +1,176 @@
 <template>
-  <div class="canvas">
-    <div
-      class="PrototypeForm"
-      @click="unSelect"
-    >
-      <div class="app-form-wrapper wrapper">
-        <div class="app-form-body">
-          <div class="form form-grid">
-            <template v-for="component in components">
-              <app-field
-                :key="component.name"
-                v-bind="component"
-                :class="{ selected: component.name === selected.name }"
-                @click.native="select(component, $event)"
-              />
-            </template>
-          </div>
-        </div>
-        <div class="app-form-buttons">
-          <app-button
-            primary
-            icon="save"
-            label="Save"
-          />
-        </div>
-      </div>
+  <div>
+    <div style="position: absolute; left: 105px">
+      <q-btn
+        fab
+        color="primary"
+        icon="add"
+        @click="add"
+      />
     </div>
-    <div
-      class="properties shadow-1"
-      :class="{ open: selected.name }"
-    >
-      <q-tabs
-        v-model="tab"
-        no-caps
-      >
-        <q-tab
-          name="properties"
-          label="Properties"
-        />
-        <q-tab
-          name="raw"
-          label="Raw"
-        />
-      </q-tabs>
+    <div class="canvas">
       <div
-        v-show="tab === 'properties'"
-        class="properties-tab"
+        class="PrototypeForm"
+        @click="unSelect"
       >
-        <app-field
-          as="input"
-          name="name"
-          label="Name"
-          v-model="selected.name"
-          readonly
-        />
-        <app-field
-          as="input"
-          name="label"
-          label="Label"
-          v-model="selected.label"
-        />
-        <app-field
-          as="number"
-          name="width"
-          label="Width"
-          v-model="selected.width"
-        />
+        <div class="app-form-wrapper wrapper">
+          <div class="app-form-body">
+            <div
+              class="form form-grid"
+              v-sortable="{
+                options: {
+                  chosenClass: 'field--chosen',
+                  dataIdAttr: 'data-id',
+                  animation: 150,
+                },
+                handle: sorted
+              }"
+            >
+              <template v-for="component in components">
+                <app-field
+                  :data-id="component.name"
+                  :key="component.name"
+                  v-bind="component"
+                  :class="{ selected: component.name === selected.name }"
+                  @click.native="select(component, $event)"
+                />
+              </template>
+            </div>
+          </div>
+          <div class="app-form-buttons">
+            <app-button
+              primary
+              icon="save"
+              label="Save"
+            />
+          </div>
+        </div>
       </div>
+
       <div
-        v-show="tab === 'raw'"
-        class="properties-tab"
+        class="properties shadow-1"
+        :class="{ open: selected.name }"
       >
-        <pre>{{ selected }}</pre>
+        <q-tabs
+          v-model="tab"
+          no-caps
+        >
+          <q-tab
+            name="properties"
+            label="Properties"
+          />
+          <q-tab
+            name="raw"
+            label="Raw"
+          />
+        </q-tabs>
+        <div
+          v-show="tab === 'properties'"
+          class="properties-tab"
+        >
+          <app-field
+            as="input"
+            name="name"
+            label="Name"
+            v-model="selected.name"
+            readonly
+          />
+          <app-field
+            as="select"
+            name="component"
+            label="Componente"
+            :options="options"
+            v-model="selected.as"
+          />
+          <app-field
+            as="input"
+            name="label"
+            label="Label"
+            v-model="selected.label"
+          />
+          <app-field
+            as="number"
+            name="width"
+            label="Width"
+            v-model="selected.width"
+          />
+          <app-field
+            as="number"
+            name="height"
+            label="Height"
+            v-model="selected.height"
+          />
+          <app-field
+            as="number"
+            name="order"
+            label="Order"
+            v-model="selected.__order"
+          />
+        </div>
+        <div
+          v-show="tab === 'raw'"
+          class="properties-tab"
+        >
+          <pre>{{ selected }}</pre>
+        </div>
       </div>
     </div>
+
+    <q-dialog
+      v-model="prompt"
+      persistent
+    >
+      <q-card style="min-width: 400px">
+        <q-card-section>
+          <div class="text-h6">
+            Component Name
+          </div>
+        </q-card-section>
+
+        <q-card-section>
+          <q-input
+            dense
+            v-model="name"
+            autofocus
+            @keyup.enter="create"
+          />
+        </q-card-section>
+
+        <q-card-actions
+          align="right"
+          class="text-primary"
+        >
+          <q-btn
+            flat
+            label="Save"
+            @click="create"
+            v-close-popup
+          />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
   </div>
 </template>
 
 <script type="text/javascript">
+import sortable from './Sortable'
+
 /**
  */
 export default {
   /**
    */
   name: 'StudioCanvas',
+  directives: {
+    sortable
+  },
   /**
    */
   data: () => ({
-    components: [
-      {
-        as: 'input',
-        name: 'id',
-        label: 'id',
-        value: undefined,
-        width: 100
-      },
-      {
-        as: 'input',
-        name: 'name',
-        label: 'Name',
-        value: undefined,
-        width: 50
-      },
-      {
-        as: 'input',
-        name: 'age',
-        label: 'Age',
-        value: undefined,
-        width: 50
-      }
-    ],
+    components: [],
+    prompt: false,
+    name: '',
+    options: ['input', 'number', 'password', 'email', 'text', 'checkbox', 'radio', 'select'],
     tab: 'properties',
     selected: {}
   }),
@@ -132,7 +193,74 @@ export default {
      */
     unSelect () {
       this.selected = {}
+    },
+    /**
+     */
+    add () {
+      this.prompt = true
+    },
+    /**
+     * @param {Object} component
+     */
+    create (component = {}) {
+      if (!component) {
+        component = {}
+      }
+      this.prompt = false
+      this.components.push({
+        as: 'input',
+        name: this.name,
+        label: '',
+        value: undefined,
+        height: 1,
+        width: 100,
+        __order: this.components.length,
+        ...component
+      })
+      this.name = ''
+    },
+    /**
+     * @param $event
+     */
+    sorted ($event) {
+      if (Array.isArray($event)) {
+        $event.forEach((name, index) => {
+          const component = this.components.find((component) => component.name === name)
+          if (component) {
+            component.__order = index
+          }
+        })
+      }
     }
+  },
+  created () {
+    const fake = [
+      {
+        as: 'input',
+        name: 'id',
+        label: 'id',
+        value: undefined,
+        height: 1,
+        width: 100
+      },
+      {
+        as: 'input',
+        name: 'name',
+        label: 'Name',
+        value: undefined,
+        height: 1,
+        width: 50
+      },
+      {
+        as: 'input',
+        name: 'age',
+        label: 'Age',
+        value: undefined,
+        height: 1,
+        width: 50
+      }
+    ]
+    fake.forEach(this.create)
   }
 }
 </script>
@@ -194,6 +322,7 @@ export default {
 
     .properties-tab
       padding 10px
+
       & > div
         margin-bottom 15px
 </style>
diff --git a/yarn.lock b/yarn.lock
index 51632dc..a49f020 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8900,6 +8900,10 @@ socks@^1.1.10:
     ip "^1.1.4"
     smart-buffer "^1.0.13"
 
+sortablejs@^1.8.4:
+  version "1.8.4"
+  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.8.4.tgz#1bbfeafa96d399b83f28e25d8e49d4fbfd867f30"
+
 source-list-map@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"