From 52422726bc9d352621e111423f3b30e02ee0cd92 Mon Sep 17 00:00:00 2001
From: gearsdigital <steffen.giers@gmail.com>
Date: Sat, 4 Jul 2020 21:34:14 +0200
Subject: [PATCH] style: optimize component readability

---
 src/components/EnhancedToolbarLinkDialog.vue | 292 ++++++++++---------
 1 file changed, 149 insertions(+), 143 deletions(-)

diff --git a/src/components/EnhancedToolbarLinkDialog.vue b/src/components/EnhancedToolbarLinkDialog.vue
index 469cbb3..1d06603 100755
--- a/src/components/EnhancedToolbarLinkDialog.vue
+++ b/src/components/EnhancedToolbarLinkDialog.vue
@@ -8,7 +8,6 @@
     @close="resetForm"
     :button="$t('insert')"
   >
-
     <div v-if="tabs && tabs.length > 1" class="k-header-tabs">
       <nav>
         <k-button
@@ -79,7 +78,7 @@
         />
       </div>
       <k-text v-else>
-        {{$t('gearsdigital.enhanced-toolbar-link-dialog.empty')}}
+        {{ $t("gearsdigital.enhanced-toolbar-link-dialog.empty") }}
       </k-text>
 
       <k-pagination
@@ -88,166 +87,173 @@
         v-bind="pagination"
         align="center"
         class="k-dialog-pagination"
-        @paginate="paginate"/>
+        @paginate="paginate"
+      />
     </div>
   </k-dialog>
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        tabs: [
-          {
-            name: 'external',
-            label: this.$t("gearsdigital.enhanced-toolbar-link-dialog.external")
-          },
-          {
-            name: 'internal',
-            label: this.$t("gearsdigital.enhanced-toolbar-link-dialog.internal")
-          },
-        ],
-        search: null,
-        currentPage: {},
-        currentTab: {},
-        pages: [],
-        value: {
-          url: null,
-          text: null
+export default {
+  data() {
+    return {
+      tabs: [
+        {
+          name: "external",
+          label: this.$t("gearsdigital.enhanced-toolbar-link-dialog.external"),
         },
-        pagination: {
-          page: 1,
-          total: 0
+        {
+          name: "internal",
+          label: this.$t("gearsdigital.enhanced-toolbar-link-dialog.internal"),
+        },
+      ],
+      search: null,
+      currentPage: {},
+      currentTab: {},
+      pages: [],
+      value: {
+        url: null,
+        text: null,
+      },
+      pagination: {
+        page: 1,
+        total: 0,
+      },
+      externalFields: {
+        url: {
+          label: this.$t("link"),
+          type: "text",
+          placeholder: this.$t("url.placeholder"),
+          icon: "url",
         },
-        externalFields: {
-          url: {
-            label: this.$t("link"),
-            type: 'text',
-            placeholder: this.$t("url.placeholder"),
-            icon: 'url'
-          },
-          text: {
-            label: this.$t("link.text"),
-            type: 'text'
-          }
+        text: {
+          label: this.$t("link.text"),
+          type: "text",
         },
-        selectedLinkTarget: null,
-        linkTargets: [
-          {value: '_blank', text: '_blank'},
-          {value: '_self', text: '_blank'},
-          {value: '_parent', text: '_parent'},
-          {value: '_top', text: '_top'},
-        ]
-      };
+      },
+      selectedLinkTarget: null,
+      linkTargets: [
+        { value: "_blank", text: "_blank" },
+        { value: "_self", text: "_blank" },
+        { value: "_parent", text: "_parent" },
+        { value: "_top", text: "_top" },
+      ],
+    };
+  },
+  watch: {
+    search: debounce(() => {
+      this.pagination.page = 0;
+      this.fetch();
+    }, 200),
+  },
+  computed: {
+    hasPages() {
+      return this.pages.length;
     },
-    watch: {
-      search: debounce(function () {
-        this.pagination.page = 0;
-        this.fetch();
-      }, 200)
+    kirbytext() {
+      return this.$store.state.system.info.kirbytext;
     },
-    computed: {
-      hasPages() {
-        return this.pages.length
-      },
-      kirbytext() {
-        return this.$store.state.system.info.kirbytext;
-      }
+  },
+  methods: {
+    open(input, selection) {
+      this.value.text = selection;
+      this.currentTab = this.tabs[0];
+      this.$refs.dialog.open();
     },
-    methods: {
-      open(input, selection) {
-        this.value.text = selection;
-        this.currentTab = this.tabs[0];
-        this.$refs.dialog.open();
-      },
-      resetForm() {
+    resetForm() {
+      this.value = {
+        url: null,
+        text: null,
+      };
+      this.value.text = null;
+      this.search = null;
+      this.pagination.page = 1;
+      this.selectedLinkTarget = null;
+    },
+    selectTab(tab) {
+      this.currentTab = tab;
+    },
+    selectPage(model) {
+      this.value = {
+        url: model.slug,
+        text: this.value.text || model.title,
+      };
+      if (this.isCurrentPage(model)) {
+        this.currentPage = {};
         this.value = {
           url: null,
-          text: null
-        };
-        this.value.text = null;
-        this.search = null;
-        this.pagination.page = 1;
-        this.selectedLinkTarget = null;
-      },
-      selectTab(tab) {
-        this.currentTab = tab;
-      },
-      selectPage(model) {
-        this.value = {
-          url: model.slug,
-          text: this.value.text || model.title
+          text: null,
         };
-        if (this.isCurrentPage(model)) {
-          this.currentPage = {};
-          this.value = {
-            url: null,
-            text: null
-          };
-        } else {
-          this.currentPage = model
-        }
-      },
-      isCurrentPage(page) {
-        return this.currentPage === page
-      },
-      paginate(pagination) {
-        this.pagination.page = pagination.page;
-        this.fetch();
-      },
-      createKirbytext() {
-        if (!this.value.url && this.value.text) {
-          return this.value.text;
-        }
+      } else {
+        this.currentPage = model;
+      }
+    },
+    isCurrentPage(page) {
+      return this.currentPage === page;
+    },
+    paginate(pagination) {
+      this.pagination.page = pagination.page;
+      this.fetch();
+    },
+    createKirbytext() {
+      if (!this.value.url && this.value.text) {
+        return this.value.text;
+      }
 
-        const target = `${this.selectedLinkTarget ? "target: " + this.selectedLinkTarget : ""}`;
-        const link = `link: ${this.value.url}`;
-        const text = `text: ${this.value.text}`;
+      const target = `${
+        this.selectedLinkTarget ? "target: " + this.selectedLinkTarget : ""
+      }`;
+      const link = `link: ${this.value.url}`;
+      const text = `text: ${this.value.text}`;
 
-        return this.value.text.length > 0
-          ? `(${link} ${text} ${target})`
-          : `(${link} ${target})`;
-      },
-      createMarkdown() {
-        if (this.value.text.length > 0) {
-          return `[${this.value.text}](${this.value.url})`;
-        } else {
-          return `<${this.value.url}>`;
-        }
-      },
-      fetch() {
-        const params = {
-          page: this.pagination.page,
-          search: this.search
-        };
-        this.$api.get('enhanced-toolbar-link-dialog/pages', params).then(response => {
-            this.pages = response.data;
-            this.pagination = response.pagination;
-          });
-      },
-      submit() {
-        this.$emit("submit", this.kirbytext ? this.createKirbytext() : this.createMarkdown());
-        this.$refs.dialog.close();
+      return this.value.text.length > 0
+        ? `(${link} ${text} ${target})`
+        : `(${link} ${target})`;
+    },
+    createMarkdown() {
+      if (this.value.text.length > 0) {
+        return `[${this.value.text}](${this.value.url})`;
+      } else {
+        return `<${this.value.url}>`;
       }
-    }
-  }
-
-  function debounce(fn, delay = 200) {
-    let timer = null;
-    return function () {
-      let context = this;
-      let args = arguments;
-      clearTimeout(timer);
-      timer = setTimeout(function () {
-        fn.apply(context, args);
-      }, delay);
-    };
-  }
+    },
+    fetch() {
+      const params = {
+        page: this.pagination.page,
+        search: this.search,
+      };
+      this.$api
+        .get("enhanced-toolbar-link-dialog/pages", params)
+        .then((response) => {
+          this.pages = response.data;
+          this.pagination = response.pagination;
+        });
+    },
+    submit() {
+      this.$emit(
+        "submit",
+        this.kirbytext ? this.createKirbytext() : this.createMarkdown()
+      );
+      this.$refs.dialog.close();
+    },
+  },
+};
 
+function debounce(fn, delay = 200) {
+  let timer = null;
+  return function () {
+    let context = this;
+    let args = arguments;
+    clearTimeout(timer);
+    timer = setTimeout(function () {
+      fn.apply(context, args);
+    }, delay);
+  };
+}
 </script>
 
 <style>
-  .k-tab {
-    padding: 1rem 0;
-  }
+.k-tab {
+  padding: 1rem 0;
+}
 </style>