[WIP] Vue upgrade

.eslintrc.js

@@ -13,7 +13,6 @@ module.exports = {
     "plugin:vue/recommended",
     "plugin:prettier/recommended",
     "prettier",
-    "prettier/vue",
   ],
   rules: {
     "no-console": ["error", {allow: ["error", "warn"]}],
@@ -34,4 +33,4 @@ module.exports = {
       }
     }
   }
-};
+};

assets/js/app/common.js

@@ -1,10 +1,11 @@
 import $ from 'jquery';
 import { DateTime } from 'luxon';
+import { Popover } from 'bootstrap';
 
 import { version } from '../version';
 window.assetsVersion = version;
 
-$(document).ready(function() {
+$(document).ready(function () {
     // add a js class to indicate we have JS enabled. Might need a change to either modernizr or somethng comparable
     $('html').addClass('js');
 
@@ -16,16 +17,12 @@ $(document).ready(function() {
      */
     $('.admin__sidebar').addClass('admin__sidebar--is-collapsed');
 
-    $('.admin-sidebar-toggler').on('click', function() {
+    $('.admin-sidebar-toggler').on('click', function () {
         if ($('.admin__sidebar').hasClass('admin__sidebar--is-collapsed')) {
-            $('.admin__sidebar')
-                .addClass('admin__sidebar--is-expanded')
-                .removeClass('admin__sidebar--is-collapsed');
+            $('.admin__sidebar').addClass('admin__sidebar--is-expanded').removeClass('admin__sidebar--is-collapsed');
             $(this).toggleClass('is-active');
         } else {
-            $('.admin__sidebar')
-                .addClass('admin__sidebar--is-collapsed')
-                .removeClass('admin__sidebar--is-expanded');
+            $('.admin__sidebar').addClass('admin__sidebar--is-collapsed').removeClass('admin__sidebar--is-expanded');
             $(this).toggleClass('is-active');
         }
     });
@@ -45,7 +42,7 @@ $(document).ready(function() {
         }, 50);
     }
 
-    $('a[data-toggle="pill"]').on('click', function() {
+    $('a[data-toggle="pill"]').on('click', function () {
         let newUrl;
         const hash = $(this).attr('href');
         newUrl = url.split('#')[0] + hash;
@@ -55,20 +52,23 @@ $(document).ready(function() {
     /*
      ** Convert all ISO dates with class .datetime-relative to relative time
      */
-    $('.datetime-relative').each(function() {
+    $('.datetime-relative').each(function () {
         $(this).text(DateTime.fromISO($(this).text()).toRelative());
     });
 
     /*
      ** Initialise all popover elements
      */
-    $('[data-toggle="popover"]').popover();
 
+    var popoverEl = document.getElementsByClassName('.fa.fa-info-circle');
+    if (popoverEl > 0) {
+        new Popover(popoverEl);
+    }
     /*
      ** When a field from another group is invalid, show it.
      */
-    $('#editor button[type="submit"]').click(function() {
-        $('input:invalid').each(function() {
+    $('#editor button[type="submit"]').click(function () {
+        $('input:invalid').each(function () {
             // Find the tab-pane that this element is inside, and get the id
             var $closest = $(this).closest('.tab-pane');
             var id = $closest.attr('id');
@@ -85,20 +85,15 @@ $(document).ready(function() {
      ** Simulates disabled behavior for elements with data-readonly attribute.
      * This is needed, because a disabled input cannot be required.
      */
-    $('[data-readonly]').on('keydown paste', function(e) {
+    $('[data-readonly]').on('keydown paste', function (e) {
         e.preventDefault();
     });
     /* Part of the code above, however make sure flatpickr is not readonly
      * and that its validation works.
      */
-    $('.editor--date')
-        .siblings()
-        .prop('readonly', false)
-        .attr('data-readonly', 'readonly');
-    $('.editor--date').on('change', e => {
-        const target = $(e.target)
-            .parent()
-            .find('input[data-readonly="readonly"]');
+    $('.editor--date').siblings().prop('readonly', false).attr('data-readonly', 'readonly');
+    $('.editor--date').on('change', (e) => {
+        const target = $(e.target).parent().find('input[data-readonly="readonly"]');
         if (target.val()) {
             target[0].setCustomValidity('');
         } else {
@@ -124,23 +119,20 @@ $(document).ready(function() {
     $('[data-errormessage]').on('input', handleInput);
 
     /* Set the errormessage on the correct editor--date field */
-    $('.editor--date').each(function() {
+    $('.editor--date').each(function () {
         let siblings = $(this).siblings();
         const errormessage = $(this).attr('data-errormessage');
 
-        siblings.each(function() {
-            $(this)
-                .attr('data-errormessage', errormessage)
-                .on('invalid', handleInvalid)
-                .on('input', handleInput);
+        siblings.each(function () {
+            $(this).attr('data-errormessage', errormessage).on('invalid', handleInvalid).on('input', handleInput);
         });
     });
     /* End of custom error message */
 
     /*
      ** Copy text to clipboard. Used in filemanager actions.
      */
-    $('[data-copy-to-clipboard]').on('click', function(e) {
+    $('[data-copy-to-clipboard]').on('click', function (e) {
         const target = $(e.target);
 
         var input = document.createElement('input');
@@ -151,10 +143,7 @@ $(document).ready(function() {
         input.focus();
         input.select();
         document.execCommand('copy');
-        target
-            .parent()
-            .find('#copy')
-            .remove();
+        target.parent().find('#copy').remove();
     });
     /* End of copy text to clipboard */
 });

assets/js/app/confirmation.js

@@ -13,13 +13,13 @@ if (locale) {
     bootbox.setLocale(locale);
 }
 
-$('*[data-confirmation]').on('click', function() {
+$('*[data-confirmation]').on('click', function () {
     const thisElem = $(this);
     const thisHref = $(this).attr('href');
     const confirmation = $(this).data('confirmation');
 
     if (!thisElem.data('confirmed')) {
-        bootbox.confirm(confirmation, function(result) {
+        bootbox.confirm(confirmation, function (result) {
             if (result && thisHref) {
                 window.location = thisHref;
             }