User settings and stage direction style overrides

client/src/App.vue

@@ -80,6 +80,9 @@
             <template #button-content>
               <em>{{ CURRENT_USER.username }}</em>
             </template>
+            <b-dropdown-item to="/me">
+              Settings
+            </b-dropdown-item>
             <b-dropdown-item-button @click.stop.prevent="USER_LOGOUT">
               Sign Out
             </b-dropdown-item-button>
@@ -99,7 +102,7 @@
         </b-navbar-nav>
       </b-collapse>
     </b-navbar>
     <template>
       <div
         v-if="!loaded"
         class="text-center center-spinner"
@@ -234,7 +237,7 @@
       }
     },
   },
   computed: {
     isAdminUser() {
       return this.CURRENT_USER != null && this.CURRENT_USER.is_admin;
     },
@@ -263,7 +266,7 @@
     ...mapGetters(['WEBSOCKET_HEALTHY', 'CURRENT_SHOW_SESSION', 'SETTINGS', 'CURRENT_USER',
       'RBAC_ROLES', 'CURRENT_USER_RBAC', 'INTERNAL_UUID']),
   },
   async created() {
     this.$router.beforeEach(async (to, from, next) => {
       if (!this.SETTINGS.has_admin_user) {
         this.$toast.error('Please create an admin user before continuing');

client/src/router/index.js

@@ -84,7 +84,12 @@ const routes = [
   {
     path: '/login',
     name: 'login',
-    component: () => import('../views/LoginView.vue'),
+    component: () => import('../views/user/LoginView.vue'),
+  },
+  {
+    path: '/me',
+    name: 'user_settings',
+    component: () => import('../views/user/Settings.vue'),
   },
   {
     path: '*',

client/src/store/modules/user/settings.js

@@ -0,0 +1,84 @@
+import Vue from 'vue';
+import log from 'loglevel';
+
+import { makeURL } from '@/js/utils';
+
+export default {
+  state: {
+    stageDirectionStyleOverrides: [],
+  },
+  mutations: {
+    SET_STAGE_DIRECTION_STYLE_OVERRIDES(state, overrides) {
+      state.stageDirectionStyleOverrides = overrides;
+    },
+  },
+  actions: {
+    async GET_STAGE_DIRECTION_STYLE_OVERRIDES(context) {
+      const response = await fetch(`${makeURL('/api/v1/user/settings/stage_direction_overrides')}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+      if (response.ok) {
+        const respJson = await response.json();
+        context.commit('SET_STAGE_DIRECTION_STYLE_OVERRIDES', respJson.overrides);
+      } else {
+        log.error('Unable to load stage direction style overrides');
+      }
+    },
+    async ADD_STAGE_DIRECTION_STYLE_OVERRIDE(context, style) {
+      const response = await fetch(`${makeURL('/api/v1/user/settings/stage_direction_overrides')}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(style),
+      });
+      if (response.ok) {
+        context.dispatch('GET_STAGE_DIRECTION_STYLE_OVERRIDES');
+        Vue.$toast.success('Added new stage direction style override!');
+      } else {
+        log.error('Unable to add new stage direction style override');
+        Vue.$toast.error('Unable to add new stage direction style override');
+      }
+    },
+    async DELETE_STAGE_DIRECTION_STYLE_OVERRIDE(context, styleId) {
+      const response = await fetch(`${makeURL('/api/v1/user/settings/stage_direction_overrides')}`, {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ id: styleId }),
+      });
+      if (response.ok) {
+        context.dispatch('GET_STAGE_DIRECTION_STYLE_OVERRIDES');
+        Vue.$toast.success('Deleted stage direction style override!');
+      } else {
+        log.error('Unable to delete stage direction style override');
+        Vue.$toast.error('Unable to delete stage direction style override');
+      }
+    },
+    async UPDATE_STAGE_DIRECTION_STYLE_OVERRIDE(context, style) {
+      const response = await fetch(`${makeURL('/api/v1/user/settings/stage_direction_overrides')}`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(style),
+      });
+      if (response.ok) {
+        context.dispatch('GET_STAGE_DIRECTION_STYLE_OVERRIDES');
+        Vue.$toast.success('Updated stage direction style override!');
+      } else {
+        log.error('Unable to edit stage direction style override');
+        Vue.$toast.error('Unable to edit stage direction style override');
+      }
+    },
+  },
+  getters: {
+    STAGE_DIRECTION_STYLE_OVERRIDES(state) {
+      return state.stageDirectionStyleOverrides;
+    },
+  },
+};

client/src/store/modules/user.js → client/src/store/modules/user/user.js

@@ -3,6 +3,7 @@ import log from 'loglevel';
 
 import { makeURL } from '@/js/utils';
 import router from '@/router';
+import settings from './settings';
 
 export default {
   state: {
@@ -129,4 +130,7 @@ export default {
       return state.currentRbac;
     },
   },
+  modules: {
+    settings,
+  },
 };

client/src/store/store.js

@@ -4,7 +4,7 @@ import createPersistedState from 'vuex-persistedstate';
 import log from 'loglevel';
 
 import { makeURL } from '@/js/utils';
-import user from '@/store/modules/user';
+import user from '@/store/modules/user/user';
 import websocket from './modules/websocket';
 import system from './modules/system';
 import show from './modules/show';

client/src/views/user/Settings.vue

@@ -0,0 +1,34 @@
+<template>
+  <b-container
+    fluid
+    class="mx-0"
+  >
+    <h1>User Settings</h1>
+    <b-tabs
+      pills
+      vertical
+    >
+      <b-tab
+        active
+        title="About"
+      >
+        <about-user />
+      </b-tab>
+      <b-tab
+        title="Stage Direction Styles"
+      >
+        <stage-direction-styles />
+      </b-tab>
+    </b-tabs>
+  </b-container>
+</template>
+
+<script>
+import StageDirectionStyles from '@/vue_components/user/settings/StageDirectionStyles.vue';
+import AboutUserUser from '@/vue_components/user/settings/AboutUser.vue';
+
+export default {
+  name: 'UserSettings',
+  components: { AboutUser: AboutUserUser, StageDirectionStyles },
+};
+</script>

client/src/vue_components/show/config/script/StageDirectionStyles.vue

@@ -513,7 +513,7 @@ export default {
         event.preventDefault();
       } else {
         await this.ADD_STAGE_DIRECTION_STYLE(this.createPayload);
-        this.resetNewCueTypeForm();
+        this.resetNewFormState();
       }
     },
     async onSubmitEditStyle(event) {

client/src/vue_components/user/settings/AboutUser.vue

@@ -0,0 +1,40 @@
+<template>
+  <b-table-simple>
+    <b-tr
+      v-for="key in orderedKeys"
+      :key="key"
+    >
+      <b-th>{{ key }}</b-th>
+      <b-td>{{ tableData[key] != null ? tableData[key] : 'N/A' }}</b-td>
+    </b-tr>
+  </b-table-simple>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex';
+import { titleCase } from '@/js/utils';
+
+export default {
+  name: 'AboutUser',
+  computed: {
+    tableData() {
+      const data = {};
+      Object.keys(this.CURRENT_USER).forEach(function (key) {
+        data[this.titleCase(key, '_')] = this.CURRENT_USER[key];
+      }, this);
+      return data;
+    },
+    orderedKeys() {
+      return Object.keys(this.tableData).sort();
+    },
+    ...mapGetters(['CURRENT_USER']),
+  },
+  async beforeMount() {
+    await this.GET_CURRENT_USER();
+  },
+  methods: {
+    titleCase,
+    ...mapActions(['GET_CURRENT_USER']),
+  },
+};
+</script>