Repo init

Author: underscope

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.env.example

@@ -0,0 +1,47 @@
+# Server configuration
+HOSTNAME=
+PORT=3000
+IP=0.0.0.0
+HISTORY_API_FALLBACK=
+
+# Auth configuration
+AUTH_SALT_ROUNDS=10
+AUTH_JWT_SCHEME=JWT
+AUTH_JWT_SECRET=
+AUTH_JWT_ISSUER=
+AUTH_JWT_AUDIENCE=
+
+# Email
+EMAIL_SENDER_NAME=
+EMAIL_SENDER_ADDRESS=
+EMAIL_USER=
+EMAIL_PASSWORD=
+EMAIL_HOST=
+EMAIL_PORT=
+EMAIL_SSL=1
+EMAIL_TLS=
+
+# Storage provider
+STORAGE_PROVIDER=filesystem
+
+# Filesytem provider config
+STORAGE_PATH=data
+
+# Amazon S3 provider config
+STORAGE_KEY=
+STORAGE_SECRET=
+STORAGE_REGION=
+STORAGE_BUCKET=
+
+# Content Location
+PUBLISHED_CONTENT=repository
+IMPORTED_CONTENT=imported
+
+# Database config
+DATABASE_URI=postgres://user:pass@hostname/database
+DATABASE_NAME=
+DATABASE_USER=
+DATABASE_PASSWORD=
+DATABASE_HOST=
+DATABASE_PORT=
+DATABASE_ADAPTER=postgres

.eslintignore

@@ -0,0 +1 @@
+dist

.eslintrc.js

@@ -0,0 +1,69 @@
+const isDev = process.env.NODE_ENV === 'development';
+
+module.exports = {
+  root: true,
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2017
+  },
+  // https://github.com/Flet/eslint-config-semistandard
+  extends: ['semistandard', 'plugin:vue/recommended'],
+  // required to lint *.vue files
+  plugins: ['vue'],
+  rules: {
+    indent: ['error', 2, {
+      SwitchCase: 1,
+      // NOTE: Consistent indentation IS enforced;
+      //       ESlint calculated indentation start IS NOT!
+      // https://eslint.org/docs/rules/indent#memberexpression
+      MemberExpression: 'off'
+    }],
+    'arrow-parens': 'off',
+    'no-debugger': isDev ? 'warn' : 'error',
+    'space-before-function-paren': ['error', {
+      anonymous: 'always',
+      named: 'never'
+    }],
+    'sort-imports': ['error', { ignoreCase: true }],
+    // Vue rules
+    'vue/html-self-closing': 'off',
+    'vue/attribute-hyphenation': 'off',
+    'vue/max-attributes-per-line': ['error', { singleline: 5 }],
+    'vue/name-property-casing': ['error', 'kebab-case'],
+    // TODO: Add order for custom directives once supported
+    'vue/attributes-order': ['error', {
+      order: [
+        'DEFINITION',
+        'LIST_RENDERING',
+        'CONDITIONALS',
+        'RENDER_MODIFIERS',
+        'UNIQUE',
+        'BINDING',
+        'EVENTS',
+        'CONTENT',
+        'GLOBAL',
+        'OTHER_ATTR'
+      ]
+    }],
+    'vue/order-in-components': ['error', {
+      order: [
+        'el',
+        'name',
+        ['template', 'render', 'renderError'],
+        ['parent', 'functional', 'delimiters', 'comments'],
+        'extends',
+        'mixins',
+        'inheritAttrs',
+        'model',
+        ['props', 'propsData'],
+        'data',
+        'computed',
+        'methods',
+        'watch',
+        'LIFECYCLE_HOOKS',
+        ['directives', 'filters'],
+        'components'
+      ]
+    }]
+  }
+};

.gitignore

@@ -0,0 +1,28 @@
+# Dependencies
+node_modules
+
+# Editors
+.vscode
+*.sublime-*
+.idea
+
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Configuration
+.env
+ecosystem.config.js
+
+# Tailor dump storage
+data/*
+!data/.gitkeep
+
+# Build artifacts
+dist/*
+!dist/.gitkeep
+stats.json
+
+# General
+.DS_Store

README.md

@@ -0,0 +1,3 @@
+# APP_STARTER
+
+>Under construction :construction:

client/admin/App.vue

@@ -0,0 +1,49 @@
+<template>
+  <v-app id="app">
+    <sidebar :drawer.sync="drawer"/>
+    <navbar :drawer.sync="drawer"/>
+    <v-content>
+      <v-container fluid fill-height class="grey lighten-4">
+        <router-view/>
+      </v-container>
+    </v-content>
+  </v-app>
+</template>
+
+<script>
+import Navbar from '@/admin/components/common/Navbar';
+import Sidebar from '@/admin/components/common/Sidebar';
+
+export default {
+  name: 'admin-app',
+  data() {
+    return { drawer: true };
+  },
+  components: { Navbar, Sidebar }
+};
+</script>
+
+<style lang="scss">
+@import "./stylesheets/main";
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  height: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.v-content {
+  background-color: #f5f5f5;
+}
+</style>

client/admin/api/user.js

@@ -0,0 +1,43 @@
+import { extractData, processParams } from '@/common/api/helpers';
+import request from '@/common/api/request';
+
+const url = {
+  root: '/users',
+  resource: it => `/users/${it.id}`,
+  invite: it => `/users/${it.id}/invite`,
+  import: '/users/import'
+};
+
+function fetch(params = {}) {
+  return request.get(url.root, { params: processParams(params) })
+    .then(extractData);
+}
+
+function create(item) {
+  return request.post(url.root, item).then(extractData);
+}
+
+function update(item) {
+  return request.patch(url.resource(item), item).then(extractData);
+}
+
+function remove(item) {
+  return request.delete(url.resource(item));
+}
+
+function invite(item) {
+  return request.post(url.invite(item));
+}
+
+function bulkImport(items) {
+  return request.post(url.import, items, { responseType: 'blob' });
+}
+
+export default {
+  fetch,
+  create,
+  update,
+  remove,
+  invite,
+  bulkImport
+};

client/admin/components/common/ConfirmationDialog.vue

@@ -0,0 +1,58 @@
+<template>
+  <v-dialog v-model="show" max-width="500">
+    <v-form @submit.prevent="executeAction">
+      <v-card>
+        <v-card-title class="headline">{{ heading }}</v-card-title>
+        <v-card-text>{{ message }}</v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn @click="close" flat>Cancel</v-btn>
+          <v-btn color="red" flat type="submit">Yes</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-form>
+  </v-dialog>
+</template>
+
+<script>
+import { withFocusTrap } from '@/common/focustrap';
+
+const el = vm => vm.$children[0].$refs.dialog;
+
+export default {
+  name: 'confirmation-dialog',
+  mixins: [withFocusTrap({ el })],
+  props: {
+    visible: { type: Boolean, default: false },
+    heading: { type: String, default: '' },
+    message: { type: String, default: 'Are you sure?' },
+    action: { type: Function, default: () => true }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.visible;
+      },
+      set(value) {
+        if (!value) this.close();
+      }
+    }
+  },
+  methods: {
+    close() {
+      this.$emit('update:visible', false);
+    },
+    executeAction() {
+      return Promise.resolve(this.action()).then(() => {
+        this.close();
+        this.$emit('confirmed');
+      });
+    }
+  },
+  watch: {
+    show(val) {
+      this.$nextTick(() => this.focusTrap.toggle(val));
+    }
+  }
+};
+</script>

client/admin/components/common/DatePicker.vue

@@ -0,0 +1,67 @@
+<template>
+  <v-menu
+    :disabled="disabled"
+    full-width
+    min-width="290px"
+    offset-y
+    transition="scale-transition">
+    <v-text-field
+      v-validate="processedValidation"
+      slot="activator"
+      :name="name"
+      :value="normalizedValue"
+      :label="label"
+      :disabled="disabled"
+      :error-messages="vErrors.collect(name)"
+      :data-vv-as="label"
+      append-icon="mdi-calendar"
+      readonly/>
+    <v-date-picker :value="normalizedValue" @input="save($event)" no-title/>
+  </v-menu>
+</template>
+
+<script>
+import fecha from 'fecha';
+import get from 'lodash/get';
+import omit from 'lodash/omit';
+
+const DATE_FORMAT = 'YYYY-MM-DD';
+
+export default {
+  inject: ['$validator'],
+  props: {
+    name: { type: String, required: true },
+    value: { type: String, default: null },
+    format: { type: String, default: DATE_FORMAT },
+    validate: { type: Object, default: () => ({}) },
+    disabled: { type: Boolean, default: false },
+    label: { type: String, default: null }
+  },
+  computed: {
+    normalizedValue() {
+      return this.normalize(this.value, this.format, DATE_FORMAT);
+    },
+    processedValidation() {
+      const { validate, format: inputFormat } = this;
+      if (!get(validate, 'before') && !get(validate, 'after')) {
+        return omit(validate, ['before', 'after']);
+      }
+      const tmp = { ...validate, date_format: DATE_FORMAT };
+      ['before', 'after'].forEach(k => {
+        tmp[k] && (tmp[k] = this.normalize(tmp[k], inputFormat, DATE_FORMAT));
+      });
+      return tmp;
+    }
+  },
+  methods: {
+    save(value) {
+      this.$emit('input', this.normalize(value, DATE_FORMAT, this.format));
+    },
+    normalize(value, inputFormat, outputFormat) {
+      if (!value) return;
+      const date = fecha.parse(value, inputFormat);
+      return fecha.format(date, outputFormat);
+    }
+  }
+};
+</script>