Merge pull request #7 from dcodegroup/feature/update-npm-packages

Feature/update npm packages

Author: MarkCondDcode

README.md

@@ -2,8 +2,10 @@
 To build the preset boilerplate, run the following command:
 ```php artisan ui dcode-preset-ui```
 
+<!-- 
+N/A with sass-lib now
 ## Updating Sass
 To update the base and component sass directories, run the following command:
-```php artisan ui dcode-preset-sass```
+```php artisan ui dcode-preset-sass``` -->
 
 

src/DcodePreset.php

@@ -9,8 +9,6 @@
 class DcodePreset extends Preset
 {
     const NPM_PACKAGES_TO_ADD = [
-        '@isneezy/vue-selectize' => '^0.6.1',
-        'selectize' => '^0.12.6',
         'resolve-url-loader' => '^3.1',
         'sass' => '^1.32',
         'sass-loader' => '^8.0',
@@ -19,7 +17,9 @@ class DcodePreset extends Preset
         'vue-loader' => '^15.9.6',
         'vue-template-compiler' => '^2.6',
         'vue' => '^2.6',
-        'vue2-datepicker' => '^3.10.3',
+        "@dcodegroup-au/sass-lib" => "^0.0.7",
+        "@dcodegroup-au/vue-datepicker" => "^0.0.4",
+        "@dcodegroup-au/vue-multiselect" => "0.0.4",
         '@dcodegroup-au/vuetable-3' => '^4.0.2',
         'v-click-outside' => '^3.1.2',
     ];
@@ -39,12 +39,12 @@ public static function install()
         $filesystem->copyDirectory(__DIR__ . '/../stubs/default', base_path());
     }
 
-    public static function updateSass()
-    {
-        $filesystem = new Filesystem();
-        $filesystem->deleteDirectory(resource_path('sass/preset'));
-        $filesystem->copyDirectory(__DIR__ . '/../stubs/default/resources/sass/preset/', resource_path('sass/preset'));
-    }
+    // public static function updateSass()
+    // {
+    //     $filesystem = new Filesystem();
+    //     $filesystem->deleteDirectory(resource_path('sass/preset'));
+    //     $filesystem->copyDirectory(__DIR__ . '/../stubs/default/resources/sass/preset/', resource_path('sass/preset'));
+    // }
     // public static function installAuth()
     // {
     //     $filesystem = new Filesystem();

src/DcodeServiceProvider.php

@@ -23,16 +23,17 @@ public function boot()
             //     DcodePreset::installAuth();
             //     $command->info('Auth scaffolding installed successfully.');
             // }
+
             $command->comment('Please run "npm i && npm run dev" to compile your new assets.');
         });
 
         Paginator::defaultView('pagination::default');
         Paginator::defaultSimpleView('pagination::simple-default');
 
-        UiCommand::macro('dcode-preset-sass', function ($command) {
-            DcodePreset::updateSass();
-            $command->info('Dcode preset Sass base and components directories have been updated.');
-            $command->comment('Run "npm run dev" to compile your updated Sass assets.');
-        });
+        // UiCommand::macro('dcode-preset-sass', function ($command) {
+        //     DcodePreset::updateSass();
+        //     $command->info('Dcode preset Sass base and components directories have been updated.');
+        //     $command->comment('Run "npm run dev" to compile your updated Sass assets.');
+        // });
     }
 }

stubs/default/resources/js/app.js

@@ -1,54 +1,50 @@
 require('./bootstrap');
 import Vue from "vue";
-import WindowPal from "./lib/WindowPal.js";
-import Tabs from "./lib/Tabs.js";
-import SelectFilter from "./lib/SelectFilter.js";
-//window.Vue = Vue;
-import BaseTable from "./vue/components/UI/BaseTable";
-
+import BaseTable from "./vue/components/UI/BaseTable"; //toDo: need to replace this one
 import vClickOutside from "v-click-outside";
-// import Icon from "./vue/components/UI/Icon.vue";
-// import InputWrapper from "./vue/components/UI/InputWrapper.vue";
+//ToDo import Icon from "./vue/components/UI/Icon.vue";
+//ToDo import InputWrapper from "./vue/components/UI/InputWrapper.vue";
 import Modal from "./vue/components/UI/ModalWrapper.vue";
 import SidePanel from "./vue/components/UI/SidePanel.vue";
 import SidePanelJobCreate from "./vue/styleguide/SidePanelJobCreate.vue";
 import VTable from "./vue/components/UI/VTable.vue";
 import VDatePicker from "./vue/components/UI/VDatePicker.vue";
-import VSelect from "./vue/components/UI/VSelect.vue";
+import MultiselectWrapper from '@dcodegroup-au/vue-multiselect/MultiselectWrapper.vue';
+import DatepickerWrapper from '@dcodegroup-au/vue-datepicker/DatepickerWrapper.vue';
 import DeleteModal from './vue/components/modals/DeleteModal.vue';
 import DeleteModalTrigger from './vue/styleguide/DeleteModalTrigger.vue';
 import JobPanelTrigger from './vue/styleguide/JobPanelTrigger.vue';
 
 // Vue.component("Icon", Icon);
 // Vue.component("InputWrapper", InputWrapper);
+Vue.component("MultiselectWrapper", MultiselectWrapper);
+Vue.component("DatepickerWrapper", DatepickerWrapper);
 Vue.component("Modal", Modal);
 Vue.component("DeleteModal", DeleteModal);
 Vue.component("DeleteModalTrigger", DeleteModalTrigger);
 Vue.component("VDatePicker", VDatePicker);
-Vue.component("VSelect", VSelect);
 Vue.component("VTable", VTable);
 Vue.component("BaseTable", BaseTable);
 Vue.component("SidePanel", SidePanel);
 Vue.component("SidePanelJobCreate", SidePanelJobCreate);
 Vue.component("JobPanelTrigger", JobPanelTrigger);
 
-window.onload = (event) => {
-    window.pal = new WindowPal(window);
-    let tabs = Array.from(document.querySelectorAll('nav.tabs'));
-    if(tabs.length){
-        tabs.forEach(tab => {
-            new Tabs(tab);
-        });
-    }
-    let selectFilters = Array.from(document.querySelectorAll('.select-filter-input'));
-    if(selectFilters.length){
-        selectFilters.forEach(selectFilter => {
-            new SelectFilter(selectFilter);
-        });
-    }
-};
-
 Vue.use(vClickOutside);
 new Vue({
-    el: "#app"
+    el: "#app",
+    data: {
+        csrf: document.head.querySelector('meta[name="csrf-token"]').content,
+    },
+    methods: {
+        dateToIso(date) {
+            return (date instanceof Date)
+            ? date.getFullYear() +
+                        "-" + this.padZero(date.getMonth() + 1) +
+                        "-" + this.padZero(date.getDate())
+            : undefined;
+        },
+        padZero(n) {
+            return n < 10 ? "0" + n : n;
+        },
+    },
 });

stubs/default/resources/js/lib/SelectFilter.js

@@ -35,7 +35,7 @@
             },
             format: {
                 type: String,
-                default: 'YYYY-MM-DD'
+                default: 'DD/MM/YYYY'
             },
         },
         data() {