up to webpack 4

Author: Adam Adamczyk

.eslintignore

@@ -0,0 +1,8 @@
+######################################################
+# https://eslint.org/docs/user-guide/configuring
+######################################################
+# /node_modules/* and /bower_components/* in the project root are ignored by default
+# Ignore built files except build/index.js
+/ClientApp/Static/**/*.js
+
+# !build/index.js ... if i would like to ignore all except that... then it's the way

.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  root: true,
+  "parserOptions": {
+    "parser": "babel-eslint"
+  },
+  "extends": [
+    "standard",
+    "plugin:vue/recommended"
+  ]
+};
+  

.gitignore

@@ -1,5 +1,5 @@
 .DS_Store
-/ClientApp/node_modules/
+/node_modules/
 /ClientApp/npm-debug.log
 
 /Properties/launchSettings.json
@@ -28,7 +28,6 @@ package-lock.json
 [Rr]eleases/
 x64/
 x86/
-build/
 bld/
 bin/
 Bin/

ClientApp/.babelrc

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

ClientApp/.editorconfig

@@ -0,0 +1,54 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import upperFirst from 'lodash/upperFirst'
+import camelCase from 'lodash/camelCase'
+import axios from 'axios'
+import router from './router/index'
+import store from './store'
+import { sync } from 'vuex-router-sync'
+
+import App from './app.vue'
+import 'vuetify/dist/vuetify.css'
+
+// Mode details on: https://vuejs.org/v2/guide/components-registration.html
+const requireComponent = require.context(
+  // The relative path of the components folder
+  './components',
+  // Whether or not to look in subfolders
+  true,
+  // The regular expression used to match base component filenames
+  /base[A-Z]\w+\.(vue|js)$/
+)
+
+requireComponent.keys().forEach(fileName => {
+  // Get component config
+  const componentConfig = requireComponent(fileName)
+
+  // Get PascalCase name of component
+  const componentName = upperFirst(
+    camelCase(
+      // Strip the leading `./` and extension from the filename
+      fileName.replace(/base/, '').replace(/^\.\/(.*)\.\w+$/, '$1')
+    )
+  )
+
+  // Register component globally
+  Vue.component(
+    componentName,
+    // Look for the component options on `.default`, which will
+    // exist if the component was exported with `export default`,
+    // otherwise fall back to module's root.
+    componentConfig.default || componentConfig
+  )
+})
+
+Vue.use(Vuetify)
+Vue.prototype.$http = axios
+sync(store, router)
+
+new Vue({ // eslint-disable-line
+  el: '#app',
+  store,
+  router,
+  ...App
+})

ClientApp/.eslintrc.js

@@ -0,0 +1,137 @@
+// $picnic-nav-sides: 0;
+$picnic-nav-position: inherit;
+$theme-dark-color: #222;
+$green: #00AA55;
+
+@import "../../node_modules/picnic/src/picnic.scss";
+
+nav.dark {
+  background-color: $theme-dark-color;
+}
+
+// Bug fix in the template. The card somehow does not react well for no apparent reason.
+// This is not the proper solution especially if you start using card within a popup.
+article.card {
+  header,
+    content,
+    footer {
+      position: inherit !important;
+    }
+
+  position: inherit !important;
+}
+
+@media all and (max-width: $picnic-breakpoint) {
+  %nav {
+    .burger~.menu {
+      background-color: $theme-dark-color;
+    }
+
+    .brand {
+      max-width: initial;
+    }
+
+    .menu {
+      .nav-item {
+        color: #CCC;
+      }
+
+      .nav-item.active {
+        color: #fff;
+        background: rgb(28, 66, 92);
+      }
+    }
+  }
+}
+
+@media all and (min-width: $picnic-breakpoint) {
+  $picnic-nav-width: 18em !default;
+  // $picnic-nav-height_custom: inherit !important;
+
+  .main {
+    display: inline-flex;
+    min-height: 100%;
+    width: 100%;
+  }
+
+  .main-content {
+    width: calc(100% - #{$picnic-nav-width});
+    margin-left: 0.5em;
+  }
+
+  %nav,
+  .main-content {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  %nav {
+    z-index: inherit;
+    background: $theme-dark-color;
+    right: inherit;
+    width: $picnic-nav-width;
+    height: inherit;
+    padding: inherit;
+
+    .brand {
+      padding: 0.5em 0;
+      border-bottom: 1px #666 solid;
+      max-width: inherit;
+      font-size: 20px;
+    }
+
+    .brand,
+    .menu {
+      float: inherit;
+      top: auto;
+      clear: both;
+      padding-left: 0.5em;
+      display: block;
+
+      // position: relative;
+      -webkit-transform: inherit;
+      transform: inherit;
+
+      .nav-item {
+        display: block;
+        padding: 0.4em;
+        padding-left: inherit;
+        width: 100%;
+        color: #CCC;
+      }
+
+      .nav-item.active {
+        color: #fff;
+        background: rgb(28, 66, 92);
+      }
+    }
+
+    .menu {
+      padding-top: 0.5em;
+    }
+  }
+}
+
+table {
+  thead {
+    font-size: 0.9em;
+    white-space: nowrap;
+
+    tr {
+      th {
+        background-color: $theme-dark-color;
+      }
+    }
+  }
+}
+
+.page-title {
+  border-bottom: 1px solid #ddd;
+  margin-bottom: 1em;
+  margin-left: -0.5em;
+  padding-left: 0.5em;
+
+  h1 {
+    padding: 0.1em;
+  }
+}

ClientApp/.gitignore

@@ -0,0 +1,65 @@
+$theme-dark-color: #222;
+@import "../../node_modules/picnic/src/themes/default/theme";
+
+article {
+  header {
+    background-color: $theme-dark-color;
+    color: $white;
+  }
+
+  content {
+    padding: 0 1em;
+  }
+
+  footer {
+    background-color: $silver;
+    padding: 0 1em !important;
+  }
+}
+
+.text-right {
+  text-align: right;
+}
+
+// Optimization can be done by using a list + substring + ...
+// http://sass-lang.com/documentation/Sass/Script/Functions.html
+@for $size from 1 to 4 {
+  .pt-#{$size}, .py-#{$size} {
+    padding-top: #{$size}em;
+  }
+  .pb-#{$size}, .py-#{$size} {
+    padding-bottom: #{$size}em;
+  }
+
+  .pl-#{$size}, .px-#{$size} {
+    padding-left: #{$size}em;
+  }
+  .pr-#{$size}, .px-#{$size} {
+    padding-right: #{$size}em;
+  }
+
+  .ml-#{$size}, .mx-#{$size} {
+    margin-left: #{$size}em;
+  }
+  .mr-#{$size}, .mx-#{$size} {
+    margin-right: #{$size}em;
+  }
+
+  .mt-#{$size}, .my-#{$size} {
+    margin-left: #{$size}em;
+  }
+  .mb-#{$size}, .my-#{$size} {
+    margin-right: #{$size}em;
+  }
+}
+
+.color-white {
+  color: $white;
+}
+.color-red {
+  color: $picnic-error;
+}
+
+.bt {
+  border-top: $picnic-border;
+}

ClientApp/README.md

@@ -1,7 +1,7 @@
 <template>
   <div class="intro">
     <div class="text-md-center">
-      <img src="icon.png" />
+      <img src="/static/images/icon.png" />
       <h1>{{ appName }}</h1>
     </div>
     <div class="text-md-center">

ClientApp/src/api/authApi.js renamed to ClientApp/api/authApi.js

@@ -1,7 +1,7 @@
 <template>
   <div class="intro">
     <div class="text-md-center">
-        <img src="iconadminpage.png" />
+        <img src="/static/images/iconadminpage.png" />
         <h1 class="app-title">{{ appName }}</h1>
     </div>
       <div class="text-md-center">