@oxygen-cms/ui 1.5.0

package/src/store/index.js

@@ -0,0 +1,70 @@
+import Vuex from 'vuex';
+
+import UserPermissions from "../UserPermissions";
+import AuthApi from "../AuthApi";
+import UserPreferences from "../UserPreferences";
+
+export default (vue) => {
+    vue.use(Vuex);
+
+    return new Vuex.Store({
+        state: {
+            user: null,
+            loginStatus: null,
+            impersonating: false
+        },
+        mutations: {
+            setUser(state, user) {
+                state.user = user;
+                state.loginStatus = user !== null;
+            },
+            setImpersonating(state, user) {
+                state.user = user;
+                state.loginStatus = user !== null;
+                state.impersonating = true;
+            },
+            stopImpersonating(state, user) {
+                state.user = user;
+                state.loginStatus = user !== null;
+                state.impersonating = false;
+            }
+        },
+        getters: {
+            userPermissions: state => {
+                if(!state.user) { return null; }
+                return new UserPermissions(state.user.permissions);
+            },
+            userPreferences: state => {
+                if(!state.user) { return null; }
+                return new UserPreferences(state.user.preferences);
+            }
+        },
+        actions: {
+            determineLoginStatus({ commit, state }) {
+                return new Promise((resolve) => {
+                    if(state.loginStatus != null) {
+                        resolve(state.loginStatus);
+                        return;
+                    }
+
+                    console.log('Determining login status');
+
+                    let authApi = new AuthApi(null);
+                    authApi.login(null, null, null).then((response) => {
+                        console.log(response);
+                        if(response.impersonating === true) {
+                            commit('setImpersonating', response.user);
+                        } else {
+                            commit('setUser', response.user);
+                        }
+                        resolve(true);
+                    }).catch(() => {
+                        commit('setUser', null);
+                        resolve(false);
+                    })
+                });
+
+            }
+        }
+    });
+};

package/src/styles/_variables.scss

@@ -0,0 +1,23 @@
+// Set your colors
+$primary: #0053b1;
+//$twitter: #4099FF;
+
+@import "~bulma/sass/utilities/_all";
+
+$menu-item-color: darken($grey, 5%);
+$menu-item-active-background-color: transparent;
+$menu-item-active-color: lighten($grey, 4%);
+
+// $menu-item-hover-background-color: rgba(255, 255, 255, 0.1);
+// $menu-item-hover-color: $white-bis;
+
+//$navbar-item-active-color: #fff;
+//$navbar-item-hover-background-color: #f3f3f9;
+//
+//// Links
+//$link: $primary;
+//$link-focus-border: $primary;
+
+// Import Bulma's core
+// TODO: wtf is going on here??
+@import "~bulma/sass/utilities/_all";

package/src/styles/app.scss

@@ -0,0 +1,76 @@
+@import "_variables.scss";
+
+// Import Bulma and Buefy styles
+@import "~bulma";
+@import "~buefy/src/scss/buefy";
+
+.navbar {
+  box-shadow: 0px 0px 2px $dark;
+}
+
+.navbar-item {
+  transition: background-color 0.5s ease;
+}
+
+html, body {
+  height: 100%;
+  overflow-y: hidden;
+}
+
+pre.no-pre {
+  background-color: transparent;
+  color: inherit;
+  padding: 0;
+}
+
+.transition-container {
+  position: relative;
+  height: 100%;
+}
+
+.transition-container > * {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.25s;
+}
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+.quick-fade-enter-active, .quick-fade-leave-active {
+  transition: opacity 0.1s;
+}
+.quick-fade-enter, .quick-fade-leave-to {
+  opacity: 0;
+}
+
+.slide-left-enter-active, .slide-left-leave-active {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+.slide-left-leave-to {
+  transform: translateX(1em);
+  opacity: 0;
+}
+
+.slide-left-enter {
+  transform: translateX(-1em);
+  opacity: 0;
+}
+
+.slide-up-enter-active, .slide-up-leave-active {
+  transition: transform 0.4s ease, opacity 0.4s ease;
+}
+.slide-up-leave-to {
+  transform: translateY(2em);
+  opacity: 0;
+}
+
+.slide-up-enter {
+  transform: translateY(-2em);
+  opacity: 0;
+}

package/src/unsavedChanges.js

@@ -0,0 +1,16 @@
+
+export const checkForUnsavedChanges = (model, serverModel, $buefy, next) => {
+    if(JSON.stringify(model) === JSON.stringify(serverModel)) {
+        next();
+        return;
+    }
+    $buefy.dialog.confirm({
+        message: 'If you leave now, you\'ll lose any unsaved changes',
+        onConfirm: () => {
+            next();
+        },
+        onCancel: () => {
+            next(false);
+        }
+    });
+};

package/src/util.js

@@ -0,0 +1,65 @@
+import { titleCase } from "title-case";
+import { parsePhoneNumberFromString } from "libphonenumber-js";
+
+const convertStr = (input) => {
+    if(!input) {
+        return null;
+    }
+    return titleCase(input.trim());
+};
+
+const strEquals = (s1, s2) => {
+    return s1.trim().toLowerCase() === s2.trim().toLowerCase();
+};
+
+const nestedGet = (object, key) => {
+    let parts = key.split('.');
+
+    for(let part of parts) {
+        if(object === null || typeof object === 'undefined') {
+            return null;
+        }
+
+        object = object[part];
+    }
+    
+    if(typeof object === 'undefined') {
+        return null;
+    }
+
+    return object;
+};
+
+const nestedSet = (object, key, value) => {
+    let parts = key.split('.');
+
+    for(let i = 0; i < parts.length; i++) {
+        if(i < parts.length - 1) {
+            if(object[parts[i]] === null || typeof object[parts[i]] === 'undefined') {
+                object[parts[i]] = {};
+            }
+            object = object[parts[i]];
+        } else {
+            object[parts[i]] = value;
+        }
+    }
+};
+
+const tryParseTelephone = (telephone) => {
+    if(typeof telephone !== 'string') {
+        return null;
+    }
+    let result = parsePhoneNumberFromString(telephone, 'AU');
+    if(typeof result === 'undefined' || !result.isValid()) {
+        // manual fix for telephone numbers like 9123 4567 which are considered valid by most Australians
+        let localPhone = telephone.replace(' ', '');
+        if(localPhone.length === 8 && localPhone.match(/^\d+$/)) {
+            return telephone;
+        }
+        return null;
+    } else {
+        return result.formatNational();
+    }
+};
+
+export { strEquals, convertStr, nestedGet, nestedSet, tryParseTelephone };

package/src/util.test.js

@@ -0,0 +1,39 @@
+import { strEquals, convertStr, nestedGet, nestedSet, tryParseTelephone } from './util';
+
+test('string equality', () => {
+    expect(strEquals('hello ', '  HeLLo '));
+    expect(!strEquals('hallo ', '  HeLLo '));
+    expect(!strEquals('he llo ', '  HeLLo '));
+});
+
+test('converting strings to title case', () => {
+    expect(convertStr('babel street ')).toBe('Babel Street');
+    expect(convertStr('18 foobar lane')).toBe('18 Foobar Lane');
+});
+
+test('nested get', () => {
+    expect(nestedGet({
+        foo: { bar: { baz: 'qux' }}
+    }, 'foo.bar.baz')).toBe('qux');
+    expect(nestedGet({
+        foo: { bar: { baz: 'qux' }}
+    }, 'foo.bar.bez')).toBeNull();
+});
+
+test('nested set', () => {
+    let v = {
+        foo: { bar: { baz: 'qux' }}
+    };
+    nestedSet(v, 'foo.bar.baz', 'qux2');
+    expect(v.foo.bar.baz).toBe('qux2');
+
+    nestedSet(v, 'foo.b.c', 'qux3');
+    expect(v.foo.b.c).toBe('qux3');
+});
+
+test('telephone parsing', () => {
+    expect(tryParseTelephone('+61 0423 456 789')).toBe('0423 456 789');
+    expect(tryParseTelephone('0412 456 789')).toBe('0412 456 789');
+    expect(tryParseTelephone('03 9876 5432')).toBe('(03) 9876 5432');
+    expect(tryParseTelephone('03 9876 54322')).toBeNull();
+});