Start frontend vue implementation with budget list in app navigation

Signed-off-by: William Brawner <me@wbrawner.com>

.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+	extends: [
+		'nextcloud'
+	]
+};

.gitignore

@@ -1 +1,2 @@
 node_modules/
+js/

.stylelintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+	extends: 'stylelint-config-recommended-scss',
+	rules: {
+		indentation: 'tab',
+		'selector-type-no-unknown': null,
+		'number-leading-zero': null,
+		'rule-empty-line-before': [
+			'always',
+			{
+				ignore: ['after-comment', 'inside-block']
+			}
+		],
+		'declaration-empty-line-before': [
+			'never',
+			{
+				ignore: ['after-declaration']
+			}
+		],
+		'comment-empty-line-before': null,
+		'selector-type-case': null,
+		'selector-list-comma-newline-after': null,
+		'no-descending-specificity': null,
+		'string-quotes': 'single'
+	},
+	plugins: ['stylelint-scss']
+}

package.json

@@ -1,15 +1,82 @@
 {
-  "name": "twigs",
+	"name": "twigs",
-  "scripts": {
+	"description": "A simple budgeting app for Nextcloud",
-    "build": "NODE_ENV=production webpack --progress --hide-modules --config webpack.prod.js",
+	"version": "0.1.0",
-    "dev": "NODE_ENV=development webpack --progress --config webpack.dev.js",
+	"author": "William Brawner <me@wbrawner.com>",
-    "watch": "NODE_ENV=development webpack --progress --watch --config webpack.dev.js"
+	"contributors": [
-  },
+		"William Brawner <me@wbrawner.com>"
-  "devDependencies": {
+	],
-    "webpack": "^4.26.1",
+	"keywords": [
-    "webpack-cli": "^3.1.2"
+		"nextcloud",
-  },
+		"budget",
-  "dependencies": {
+		"twigs"
-    "typescript": "^3.8.3"
+	],
-  }
+	"bugs": {
+		"url": "https://github.com/wbrawner/twigs-nextcloud/issues"
+	},
+	"repository": {
+		"url": "https://github.com/wbrawner/twigs-nextcloud",
+		"type": "git"
+	},
+	"homepage": "https://github.com/wbrawner/twigs-nextcloud",
+	"license": "agpl",
+	"private": true,
+	"scripts": {
+		"build": "NODE_ENV=production webpack --progress --hide-modules --config webpack.prod.js",
+		"dev": "NODE_ENV=development webpack --progress --config webpack.dev.js",
+		"watch": "NODE_ENV=development webpack --progress --watch --config webpack.dev.js",
+		"lint": "eslint --ext .js,.vue src",
+		"lint:fix": "eslint --ext .js,.vue src --fix",
+		"stylelint": "stylelint src",
+		"stylelint:fix": "stylelint src --fix"
+	},
+	"dependencies": {
+		"@bundle-analyzer/webpack-plugin": "^0.5.1",
+		"@nextcloud/axios": "^1.3.1",
+		"@nextcloud/router": "^1.0.0",
+		"@nextcloud/vue": "^1.4.0",
+		"nextcloud-l10n": "^0.1.1",
+		"vue": "^2.6.11",
+		"vue-router": "^3.1.6",
+		"vuex": "^3.1.3"
+	},
+	"browserslist": [
+		"extends @nextcloud/browserslist-config"
+	],
+	"engines": {
+		"node": ">=10.0.0"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.8.7",
+		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
+		"@babel/preset-env": "^7.8.7",
+		"@nextcloud/browserslist-config": "^1.0.0",
+		"@vue/test-utils": "^1.0.0-beta.32",
+		"babel-eslint": "^10.1.0",
+		"babel-loader": "^8.0.6",
+		"css-loader": "^3.4.2",
+		"eslint": "^5.16.0",
+		"eslint-config-nextcloud": "0.1.1",
+		"eslint-config-standard": "^12.0.0",
+		"eslint-import-resolver-webpack": "^0.12.1",
+		"eslint-loader": "^3.0.3",
+		"eslint-plugin-import": "^2.20.1",
+		"eslint-plugin-nextcloud": "^0.3.0",
+		"eslint-plugin-node": "^10.0.0",
+		"eslint-plugin-promise": "^4.2.1",
+		"eslint-plugin-standard": "^4.0.1",
+		"eslint-plugin-vue": "^5.2.3",
+		"node-sass": "^4.13.1",
+		"sass-loader": "^8.0.2",
+		"stylelint": "^8.4.0",
+		"stylelint-config-recommended-scss": "^3.3.0",
+		"stylelint-scss": "^3.14.2",
+		"stylelint-webpack-plugin": "^0.10.5",
+		"vue-loader": "^15.9.0",
+		"vue-template-compiler": "^2.6.11",
+		"webpack": "^4.42.0",
+		"webpack-cli": "^3.3.11",
+		"webpack-merge": "^4.2.2",
+		"webpack-node-externals": "^1.7.2"
+	}
 }

src/App.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <AppNavigation>
+      <BudgetList></BudgetList>
+      <AppNavigationSettings></AppNavigationSettings>
+    </AppNavigation>
+    <AppContent>
+      <RouterView />
+    </AppContent>
+  </div>
+</template>
+<script>
+import AppNavigation from "@nextcloud/vue/dist/Components/AppNavigation";
+import AppNavigationSettings from "@nextcloud/vue/dist/Components/AppNavigationSettings";
+import AppContent from "@nextcloud/vue/dist/Components/AppContent";
+import BudgetList from "./components/BudgetList";
+import axios from "@nextcloud/axios";
+
+export default {
+  components: {
+    AppNavigation,
+    AppNavigationSettings,
+    AppContent,
+    BudgetList,
+  },
+};
+</script>

src/components/BudgetDetails.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <h1 v-if="budget" v-text="budget.name"></h1>
+    <div class="card">
+      
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  name: "budget-details",
+  components: {
+  },
+  computed: {
+    budget: function(state) {
+      const budgetId = this.$route.params.id
+      const budget = this.$store.getters.budgets.find(budget => budget.id === budgetId);
+      return budget;
+    }
+  },
+  methods: {
+  }
+};
+</script>

src/components/BudgetList.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <AppNavigationItem v-for="budget in budgets" :key="budget.id" :title="budget.name" v-on:click="view(budget.id)"></AppNavigationItem>
+    <AppNavigationNew text="New Budget"></AppNavigationNew>
+  </div>
+</template>
+<script>
+import { AppNavigationItem } from "@nextcloud/vue/dist/Components/AppNavigationItem";
+import { AppNavigationNew } from "@nextcloud/vue/dist/Components/AppNavigationNew";
+import { mapGetters } from "vuex";
+
+export default {
+  name: "budget-list",
+  components: {
+    AppNavigationItem,
+    AppNavigationNew
+  },
+  computed: {
+    ...mapGetters(["budgets"])
+  },
+  methods: {
+    view: function(id) {
+			this.$router.push({ name: 'budgetDetails', params: { id: id } })
+    },
+    new: function() {
+
+    }
+  }
+};
+</script>

src/main.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import App from './App.vue'
+import store from './store'
+import router from './router'
+
+Vue.prototype.t = window.t
+Vue.prototype.n = window.n
+Vue.prototype.OC = window.OC
+Vue.prototype.OCA = window.OCA
+
+new Vue({
+    router,
+    store,
+    render: h => h(App)
+}).$mount('#twigs-app')

src/router/index.js

@@ -0,0 +1,18 @@
+import VueRouter from 'vue-router'
+import Vue from 'vue'
+import BudgetDetails from '../components/BudgetDetails'
+
+Vue.use(VueRouter);
+
+const routes = [
+    {
+        path: '/budgets/:id',
+        name: 'budgetDetails',
+        component: BudgetDetails
+    }
+]
+
+export default new VueRouter({
+    linkActiveClass: 'active',
+    routes,
+})

src/store/index.js

@@ -0,0 +1,30 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import axios from '@nextcloud/axios'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+    state: {
+        budgets: [],
+        currentBudget: 0,
+        categories: [],
+        currentCategory: 0,
+        transactions: [],
+        currentTransaction: 0
+    },
+    getters: {
+        budgets: (state) => {
+            if (state.budgets.length === 0) {
+                axios.get(OC.generateUrl("/apps/twigs/api/v1.0/budgets"))
+                    .then(function (response) {
+                        state.budgets = response.data;
+                    })
+            }
+            return state.budgets
+        },
+        budget: (state) => (id) => {
+            return state.budgets.find(budget => budget.id === id)
+        }
+    }
+}) 

templates/content/index.php

@@ -1 +0,0 @@
-<h1>Hello world</h1>

templates/index.php

@@ -1,18 +1,6 @@
 <?php
-script('twigs', 'script');
+script('twigs', 'twigs');
 style('twigs', 'style');
 ?>
 
-<div id="app">
+<div id="twigs-app"></div>
-	<div id="app-navigation">
-		<?php print_unescaped($this->inc('navigation/index')); ?>
-		<?php print_unescaped($this->inc('settings/index')); ?>
-	</div>
-
-	<div id="app-content">
-		<div id="app-content-wrapper">
-			<?php print_unescaped($this->inc('content/index')); ?>
-		</div>
-	</div>
-</div>
-

templates/navigation/index.php

@@ -1,10 +0,0 @@
-<ul>
-	<li><a href="#">First level entry</a></li>
-	<li>
-		<a href="#">First level container</a>
-		<ul>
-			<li><a href="#">Second level entry</a></li>
-			<li><a href="#">Second level entry</a></li>
-		</ul>
-	</li>
-</ul>

templates/settings/index.php

@@ -1,10 +0,0 @@
-<div id="app-settings">
-	<div id="app-settings-header">
-		<button class="settings-button"
-				data-apps-slide-toggle="#app-settings-content"
-		></button>
-	</div>
-	<div id="app-settings-content">
-		<!-- Your settings in here -->
-	</div>
-</div>

webpack.common.js

@@ -0,0 +1,56 @@
+const path = require('path')
+const { VueLoaderPlugin } = require('vue-loader')
+const StyleLintPlugin = require('stylelint-webpack-plugin')
+const BundleAnalyzerPlugin = require('@bundle-analyzer/webpack-plugin')
+
+const config = {
+	entry: path.join(__dirname, 'src', 'main.js'),
+	output: {
+		path: path.resolve(__dirname, './js'),
+		publicPath: '/js/',
+		filename: `twigs.js`,
+		chunkFilename: 'chunks/[name]-[hash].js',
+	},
+	module: {
+		rules: [
+			{
+				test: /\.css$/,
+				use: ['vue-style-loader', 'css-loader'],
+			},
+			{
+				test: /\.scss$/,
+				use: ['vue-style-loader', 'css-loader', 'sass-loader'],
+			},
+			{
+				test: /\.(js|vue)$/,
+				use: 'eslint-loader',
+				exclude: /node_modules/,
+				enforce: 'pre',
+			},
+			{
+				test: /\.vue$/,
+				loader: 'vue-loader',
+				exclude: /node_modules/,
+			},
+			{
+				test: /\.js$/,
+				loader: 'babel-loader',
+				exclude: /node_modules/,
+			},
+		],
+	},
+	plugins: [
+		new VueLoaderPlugin(),
+		new StyleLintPlugin(),
+	],
+	resolve: {
+		extensions: ['*', '.js', '.vue'],
+		symlinks: false,
+	},
+}
+
+if (process.env.BUNDLE_ANALYZER_TOKEN) {
+	config.plugins.push(new BundleAnalyzerPlugin({ token: process.env.BUNDLE_ANALYZER_TOKEN }))
+}
+
+module.exports = config

webpack.dev.js

@@ -0,0 +1,7 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: '#cheap-source-map',
+})

webpack.prod.js

@@ -0,0 +1,7 @@
+const merge = require('webpack-merge')
+const common = require('./webpack.common.js')
+
+module.exports = merge(common, {
+	mode: 'production',
+	devtool: '#source-map'
+})