From 9ab93f959820317beb49b1f6cd5cbb223eb08a2a Mon Sep 17 00:00:00 2001
From: Gail Terman <gterman@gmail.com>
Date: Tue, 10 May 2022 09:13:24 -0400
Subject: [PATCH 01/40] wip edit modals

---
 app/javascript/components/edit_button.vue     | 18 ++++++++
 app/javascript/components/edit_modal.vue      | 26 +++++++++++
 .../components/email_addresses_editor.vue     |  8 ++--
 app/javascript/components/icon_button.vue     | 44 +++++++++++++++++++
 app/javascript/components/modal_form.vue      |  9 ++--
 app/javascript/components/plano_modal.vue     | 23 ++++++++++
 app/javascript/packs/application.js           |  2 +
 app/javascript/profile/person_summary.vue     | 35 ++++++++++++++-
 8 files changed, 158 insertions(+), 7 deletions(-)
 create mode 100644 app/javascript/components/edit_button.vue
 create mode 100644 app/javascript/components/edit_modal.vue
 create mode 100644 app/javascript/components/icon_button.vue
 create mode 100644 app/javascript/components/plano_modal.vue

diff --git a/app/javascript/components/edit_button.vue b/app/javascript/components/edit_button.vue
new file mode 100644
index 000000000..1fe946b54
--- /dev/null
+++ b/app/javascript/components/edit_button.vue
@@ -0,0 +1,18 @@
+<template>
+  <icon-button icon="pencil-fill" background="none"></icon-button>
+</template>
+
+<script>
+import IconButton from './icon_button';
+
+export default {
+  name: "EditButton",
+  components: {
+    IconButton
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/app/javascript/components/edit_modal.vue b/app/javascript/components/edit_modal.vue
new file mode 100644
index 000000000..483bdb879
--- /dev/null
+++ b/app/javascript/components/edit_modal.vue
@@ -0,0 +1,26 @@
+<template>
+  <plano-modal
+    no-close-on-backdrop
+    ok-title="Save"
+    v-on="$listeners"
+    v-bind="$attrs"
+  >
+    <slot v-for="(_, name) in $slots" :name="name" :slot="name" />
+    <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData"><slot :name="name" v-bind="slotData" /></template>
+  </plano-modal>
+</template>
+
+<script>
+import PlanoModal from './plano_modal';
+
+export default {
+  name: "EditModal",
+  components: {
+    PlanoModal
+  },
+}
+</script>
+
+<style>
+
+</style>
diff --git a/app/javascript/components/email_addresses_editor.vue b/app/javascript/components/email_addresses_editor.vue
index 6f577fe1a..fbc0b70f3 100644
--- a/app/javascript/components/email_addresses_editor.vue
+++ b/app/javascript/components/email_addresses_editor.vue
@@ -19,16 +19,16 @@
     </div>
     <div class="mt-3">
       Additional Emails
-      <div v-for="email in additional">
+      <div v-for="email in additional" :key="email.id">
         <email-address-editor
-          v-bind:value="email"
+          :value="email"
           @delete="onDelete(email)"
           @input="onInput(email)"
           :disabled="disabled"
         ></email-address-editor>
       </div>
     </div>
-    <b-button @click="onNew" variant="primary" title="New" class="mt-2" size="sm">
+    <b-button ref="add_email_button" @click="onNew" variant="primary" title="New" class="mt-2" size="sm">
       <b-icon-plus></b-icon-plus>
     </b-button>
   </div>
@@ -120,6 +120,8 @@ export default {
     },
     onNew() {
       this.additional.push({email: '', isdefault: false, person_id: this.person.id})
+      this.$emit('add')
+      this.$refs.add_email_button.scrollIntoView({behavior: 'smooth'});
     }
   },
   mounted() {
diff --git a/app/javascript/components/icon_button.vue b/app/javascript/components/icon_button.vue
new file mode 100644
index 000000000..1f789b625
--- /dev/null
+++ b/app/javascript/components/icon_button.vue
@@ -0,0 +1,44 @@
+<template>
+  <b-button size="sm" :class="['mx-1', {'px-0': variant === 'link', 'px-2': variant === 'primary'}]" :variant="variant" v-on="$listeners">
+    <b-icon v-if="icon" :icon="icon" :variant="iconVariant"></b-icon>
+  </b-button> 
+</template>
+
+<script>
+export default {
+  name: "IconButton",
+  props: {
+    background: {
+      type: String,
+      default: 'default'
+    },
+    icon: {
+      type: String,
+      required: false
+    }
+  },
+  computed: {
+    variant() {
+      switch(this.background) {
+        case "none":
+          return "link";
+        case "default":
+          return "primary";
+      }
+    },
+    iconVariant() {
+      switch(this.variant) {
+        case "link":
+          return "primary";
+        case "primary": {
+          return undefined;
+        }
+      }
+    }
+  },
+}
+</script>
+
+<style>
+
+</style>
diff --git a/app/javascript/components/modal_form.vue b/app/javascript/components/modal_form.vue
index 53bb09d31..cb73597e4 100644
--- a/app/javascript/components/modal_form.vue
+++ b/app/javascript/components/modal_form.vue
@@ -1,6 +1,5 @@
 <template>
-  <b-modal
-    size="xl"
+  <plano-modal
     :title="title"
     ref='model-form'
   >
@@ -8,13 +7,17 @@
     <template #modal-footer="{ ok, cancel, hide }">
       <slot name="footer" v-bind:ok="close" v-bind:cancel="onCancel"></slot>
     </template>
-  </b-modal>
+  </plano-modal>
 </template>
 
 <script>
+import PlanoModal from './plano_modal';
 
 export default {
   name: 'ModalForm',
+  components: {
+    PlanoModal
+  },
   props: {
     title: String
   },
diff --git a/app/javascript/components/plano_modal.vue b/app/javascript/components/plano_modal.vue
new file mode 100644
index 000000000..f962f4218
--- /dev/null
+++ b/app/javascript/components/plano_modal.vue
@@ -0,0 +1,23 @@
+<template>
+  <b-modal
+    cancel-variant="link"
+    button-size="sm"
+    centered
+    scrollable
+    v-on="$listeners"
+    v-bind="$attrs"
+  >
+    <slot v-for="(_, name) in $slots" :name="name" :slot="name" />
+    <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData"><slot :name="name" v-bind="slotData" /></template>
+  </b-modal>
+</template>
+
+<script>
+export default {
+  name: "PlanoModal",
+}
+</script>
+
+<style>
+
+</style>
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 53b364e6a..67814dddc 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -37,11 +37,13 @@ import { CustomIconsPlugin } from '../icons';
 import AsyncComputed from 'vue-async-computed';
 import CKEditor from 'ckeditor4-vue';
 import VuePluralize from 'vue-pluralize';
+/*
 Vue.config.errorHandler = (err, vm, info) => {
   console.error(err);
   window.alert("Whoops! We messed up! Click ok to reload the page.")
   window.location.reload();
 }
+*/
 
 Vue.use(BootstrapVue);
 Vue.use(BootstrapVueIcons);
diff --git a/app/javascript/profile/person_summary.vue b/app/javascript/profile/person_summary.vue
index 1fbb640d0..4619e9452 100644
--- a/app/javascript/profile/person_summary.vue
+++ b/app/javascript/profile/person_summary.vue
@@ -2,7 +2,7 @@
   <div class="container my-3" v-if="person">
     <div class="row">
       <div class="col-8">
-        <h3>{{person.published_name}}</h3>
+        <h3>{{person.published_name}}<edit-button v-b-modal.person-top-modal></edit-button></h3>
       </div>
       <div class="col-4 d-flex flex-row-reverse">
           <small>Last Login: {{formatLocaleDate(person.current_sign_in_at)}}</small>
@@ -18,14 +18,42 @@
         Primary email: <em>{{person.primary_email.email}}</em>
       </div>
     </div>
+    <edit-modal id="person-top-modal" body-class="formscroll">
+      <template #modal-title>Edit Profile - {{person.published_name}}</template>
+      <b-form-group label="Name">
+        <b-form-input type="text" v-model="person.name"></b-form-input>
+      </b-form-group>
+      <b-form-group label="Pseudonym">
+        <b-form-input type="text" v-model="person.pseudonym"></b-form-input>
+      </b-form-group>
+      <b-form-group label="Pronouns">
+        <b-form-input type="text" v-model="person.pronouns"></b-form-input>
+      </b-form-group>
+      <b-form-group>
+        <b-form-checkbox switch v-model="person.willing_to_moderate">Willing to moderate session</b-form-checkbox>
+      </b-form-group>
+      <email-addresses-editor
+        v-model="person"
+        model='email_address'
+        @add="scrollToBottom()"
+      ></email-addresses-editor>
+    </edit-modal>
   </div>
 </template>
 
 <script>
 const { DateTime } = require("luxon");
+import EditButton from '@/components/edit_button';
+import EditModal from '@/components/edit_modal';
+import EmailAddressesEditor from '@/components/email_addresses_editor';
 
 export default {
   name: "PersonSummary",
+  components: {
+    EditButton,
+    EditModal,
+    EmailAddressesEditor
+  },
   model: {
     prop: 'person',
     // event: 'blur'
@@ -45,6 +73,11 @@ export default {
     formatLocaleDate(date, config=DateTime.DATETIME_FULL) {
       let d = new Date(date)
       return DateTime.fromJSDate(d).toLocaleString(config)
+    },
+    scrollToBottom() {
+      const el = document.getElementsByClassName('formscroll')[0];
+      console.log(el, el.scrollTop, el.scrollHeight);
+      el.scrollTop = el.scrollHeight
     }
   }
 }

From 5993abdfd8f94a40949397370542ec7e33a06bbd Mon Sep 17 00:00:00 2001
From: Gail Terman <gterman@gmail.com>
Date: Thu, 12 May 2022 09:45:18 -0400
Subject: [PATCH 02/40] wip person edit modal

---
 app/javascript/profile/person_edit_modal.vue | 32 ++++++++++++++++++++
 app/javascript/store/person.store.js         | 11 ++++++-
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/profile/person_edit_modal.vue

diff --git a/app/javascript/profile/person_edit_modal.vue b/app/javascript/profile/person_edit_modal.vue
new file mode 100644
index 000000000..e6ef9678a
--- /dev/null
+++ b/app/javascript/profile/person_edit_modal.vue
@@ -0,0 +1,32 @@
+<template>
+  <edit-modal
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <!-- TODO pass model data to slots -->
+    <slot v-for="(_, name) in $slots" :name="name" :slot="name" />
+    <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData"><slot :name="name" v-bind="slotData" /></template>
+  </edit-modal>
+</template>
+
+<script>
+import EditModal from '@/components/edit_modal'
+export default {
+  name: "PersonEditModal",
+  components: {
+    EditModal
+  },
+  props: {
+    person: {
+      required: true,
+    },
+    model: {
+      required: true
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/app/javascript/store/person.store.js b/app/javascript/store/person.store.js
index 1df760c46..38ee8fec4 100644
--- a/app/javascript/store/person.store.js
+++ b/app/javascript/store/person.store.js
@@ -1,6 +1,7 @@
-import { NEW } from './model.store';
+import { NEW, PATCH_FIELDS } from './model.store';
 
 export const NEW_PERSON = 'NEW PERSON';
+export const PATCH_PERSON_MODEL = 'PATCH_PERSON_MODEL'
 
 export const personModel = 'person';
 
@@ -12,6 +13,14 @@ export const personStore = {
   actions: {
     [NEW_PERSON] ({dispatch}, attributes) {
       return dispatch(NEW, {model: personModel, selected: false, ...attributes})
+    },
+    [PATCH_PERSON_MODEL] ({dispatch}, {person, data}) {
+      const item = {
+        id: person.id,
+        lock_version: person.lock_version,
+        ...data
+      }
+      return dispatch(PATCH_FIELDS, {model: personModel, item, fields: Object.keys(data), selected: false })
     }
   },
   selected: {

From 0c7f63f43a383e3f7fa9a125b9e95440963de689 Mon Sep 17 00:00:00 2001
From: Gail Terman <gterman@gmail.com>
Date: Wed, 18 May 2022 10:33:40 -0400
Subject: [PATCH 03/40] working person top edit. still need to fix what is
 going on with the store use in the tabs.

---
 app/javascript/people/person_tabs.vue        | 12 +++--
 app/javascript/profile/person_edit_modal.vue | 32 +++++++++++-
 app/javascript/profile/person_summary.vue    | 53 +++++++++++---------
 app/javascript/profile/profile-tabs.vue      |  9 ++--
 4 files changed, 73 insertions(+), 33 deletions(-)

diff --git a/app/javascript/people/person_tabs.vue b/app/javascript/people/person_tabs.vue
index 8957ad0e4..3601b9681 100644
--- a/app/javascript/people/person_tabs.vue
+++ b/app/javascript/people/person_tabs.vue
@@ -7,6 +7,7 @@
     <b-tabs content-class="mt-3" @activate-tab="handleTabActivation" v-if="person">
       <b-tab title="General" :active="!tab" lazy>
         <person-details
+          v-if="person"
           v-model="person"
           :model="personModel"
         ></person-details>
@@ -17,6 +18,7 @@
       <!-- Can not make this lazy otherwise we have lock issues with the notes -->
       <b-tab title="Availability &amp; Interests" :active="tab === 'availability'">
         <availability-and-interests
+          v-if="person"
           v-model="person"
           @input="onPersonUpdate"
           :start_time="start_time"
@@ -27,6 +29,7 @@
       </b-tab>
       <b-tab title="Session Selection" :active="tab === 'session-selection'" lazy>
         <session-selector
+          v-if="person"
           v-model="person"
           defaultSortBy='sessions.title'
           :model="sessionModel"
@@ -35,6 +38,7 @@
       </b-tab>
       <b-tab title="Session Rankings" :active="tab === 'session-ranking'" lazy>
         <session-ranker
+          v-if="person"
           defaultSortBy='interest_ranking,session_assignments.updated_at'
           :defaultSortDesc="true"
           :perPage="null"
@@ -93,9 +97,11 @@ export default {
     personModel,
     sessionModel,
     sessionAssignmentModel,
-    person: null,
   }),
   computed: {
+    person() {
+      return this.selected_model(personModel);
+    },
     start_time() {
       if (this.currentSettings && this.currentSettings.configs) {
         let st = this.configByName('convention_start_time')
@@ -160,9 +166,7 @@ export default {
     // get id from URL if present
     let id = this.id ? this.id : this.currentUser.id
     this.fetch_model_by_id(personModel, id).then(
-      (obj) => {
-        this.person = obj
-      }
+      this.select_model(personModel, id)
     )
   },
 }
diff --git a/app/javascript/profile/person_edit_modal.vue b/app/javascript/profile/person_edit_modal.vue
index e6ef9678a..d9f82824a 100644
--- a/app/javascript/profile/person_edit_modal.vue
+++ b/app/javascript/profile/person_edit_modal.vue
@@ -1,28 +1,56 @@
 <template>
   <edit-modal
+    @show="mirrorFromPerson()"
+    @ok="patchPerson()"
     v-bind="$attrs"
     v-on="$listeners"
   >
     <!-- TODO pass model data to slots -->
     <slot v-for="(_, name) in $slots" :name="name" :slot="name" />
-    <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData"><slot :name="name" v-bind="slotData" /></template>
+    <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData"><slot :name="name" v-bind="{...slotData, fields: data}" /></template>
   </edit-modal>
 </template>
 
 <script>
 import EditModal from '@/components/edit_modal'
+import { PATCH_PERSON_MODEL } from '@/store/person.store';
+import { mapActions } from 'vuex';
+import toastMixin from '@/shared/toast-mixin';
+import { FETCH_BY_ID } from '@/store/model.store';
 export default {
   name: "PersonEditModal",
   components: {
     EditModal
   },
+  mixins: [
+    toastMixin
+  ],
   props: {
     person: {
       required: true,
     },
-    model: {
+    data: {
       required: true
     }
+  },
+  methods: {
+    ...mapActions({
+      patchPersonModel: PATCH_PERSON_MODEL,
+      fetchById: FETCH_BY_ID
+    }),
+    mirrorFromPerson() {
+      Object.keys(this.data).map(k => {
+        this.data[k] = this.person?.[k];
+      })
+    },
+    patchPerson() {
+      this.toastPromise(this.patchPersonModel({person: this.person, data: this.data}), "TODO SAVE MSSAGE", "TODO ERROR MESSAGE").then((savedPerson) => {
+        this.fetchById({model: 'person', id: savedPerson.id}).then((fetchedPerson) => {
+          // TODO do i need this
+          this.$emit('updated', fetchedPerson);
+        })
+      })
+    }
   }
 }
 </script>
diff --git a/app/javascript/profile/person_summary.vue b/app/javascript/profile/person_summary.vue
index 4619e9452..4e7b6fec5 100644
--- a/app/javascript/profile/person_summary.vue
+++ b/app/javascript/profile/person_summary.vue
@@ -18,46 +18,49 @@
         Primary email: <em>{{person.primary_email.email}}</em>
       </div>
     </div>
-    <edit-modal id="person-top-modal" body-class="formscroll">
+    <person-edit-modal id="person-top-modal" body-class="formscroll" :person="person" :data="editData">
       <template #modal-title>Edit Profile - {{person.published_name}}</template>
-      <b-form-group label="Name">
-        <b-form-input type="text" v-model="person.name"></b-form-input>
-      </b-form-group>
-      <b-form-group label="Pseudonym">
-        <b-form-input type="text" v-model="person.pseudonym"></b-form-input>
-      </b-form-group>
-      <b-form-group label="Pronouns">
-        <b-form-input type="text" v-model="person.pronouns"></b-form-input>
-      </b-form-group>
-      <b-form-group>
-        <b-form-checkbox switch v-model="person.willing_to_moderate">Willing to moderate session</b-form-checkbox>
-      </b-form-group>
-      <email-addresses-editor
-        v-model="person"
-        model='email_address'
-        @add="scrollToBottom()"
-      ></email-addresses-editor>
-    </edit-modal>
+      <template #default="slotData">
+        <b-form-group label="Name">
+          <b-form-input type="text" v-model="slotData.fields.name"></b-form-input>
+        </b-form-group>
+        <b-form-group label="Pseudonym">
+          <b-form-input type="text" v-model="slotData.fields.pseudonym"></b-form-input>
+        </b-form-group>
+        <b-form-group label="Pronouns">
+          <b-form-input type="text" v-model="slotData.fields.pronouns"></b-form-input>
+        </b-form-group>
+        <b-form-group>
+          <b-form-checkbox switch v-model="slotData.fields.willing_to_moderate" @change="log($event)">Willing to moderate session</b-form-checkbox>
+        </b-form-group>
+      </template>
+    </person-edit-modal>
   </div>
 </template>
 
 <script>
 const { DateTime } = require("luxon");
 import EditButton from '@/components/edit_button';
-import EditModal from '@/components/edit_modal';
-import EmailAddressesEditor from '@/components/email_addresses_editor';
+import PersonEditModal from './person_edit_modal';
 
 export default {
   name: "PersonSummary",
   components: {
     EditButton,
-    EditModal,
-    EmailAddressesEditor
+    PersonEditModal,
   },
   model: {
     prop: 'person',
     // event: 'blur'
   },
+  data: () => ({
+    editData: {
+      name: null,
+      pseudonym: null,
+      pronouns: null,
+      willing_to_moderate: null
+    }
+  }),
   props: {
     person: {
       type: Object,
@@ -78,6 +81,10 @@ export default {
       const el = document.getElementsByClassName('formscroll')[0];
       console.log(el, el.scrollTop, el.scrollHeight);
       el.scrollTop = el.scrollHeight
+    },
+    log(e) {
+      console.log(e)
+      console.log(this.editData)
     }
   }
 }
diff --git a/app/javascript/profile/profile-tabs.vue b/app/javascript/profile/profile-tabs.vue
index b8952c087..dabc6a806 100644
--- a/app/javascript/profile/profile-tabs.vue
+++ b/app/javascript/profile/profile-tabs.vue
@@ -86,9 +86,11 @@ export default {
     personModel,
     sessionModel,
     sessionAssignmentModel,
-    person: null,
   }),
   computed: {
+    person() {
+      return this.selected_model(personModel);
+    },
     start_time() {
       if (this.currentSettings && this.currentSettings.configs) {
         let st = this.configByName('convention_start_time')
@@ -149,10 +151,9 @@ export default {
   mounted() {
     // get id from URL if present
     let id = this.id ? this.id : this.currentUser.id
+    // changed this to select the person
     this.fetch_model_by_id(personModel, id).then(
-      (obj) => {
-        this.person = obj
-      }
+      this.select_model(personModel, id)
     )
   },
 }

From 63d83b16f7cb05aa7f9a408a8af70b7cb29598e5 Mon Sep 17 00:00:00 2001
From: Gail Terman <gterman@gmail.com>
Date: Thu, 19 May 2022 09:53:05 -0400
Subject: [PATCH 04/40] working first 2 tabs, edit button for demographics

---
 .../components/model_loading_overlay.vue      |  19 +++
 app/javascript/people/person_tabs.vue         |  32 +++--
 .../profile/person_demographics.vue           | 122 +++++++++++------
 app/javascript/profile/person_details.vue     | 129 +++++++-----------
 app/javascript/profile/person_edit_modal.vue  |   5 +-
 app/javascript/profile/person_summary.vue     |  86 ++++++------
 app/javascript/profile/profile-tabs.vue       |  15 +-
 app/javascript/store/model.mixin.js           |  20 ++-
 app/javascript/store/model_utils.mixin.js     |   5 +-
 9 files changed, 235 insertions(+), 198 deletions(-)
 create mode 100644 app/javascript/components/model_loading_overlay.vue

diff --git a/app/javascript/components/model_loading_overlay.vue b/app/javascript/components/model_loading_overlay.vue
new file mode 100644
index 000000000..93ba3b7c9
--- /dev/null
+++ b/app/javascript/components/model_loading_overlay.vue
@@ -0,0 +1,19 @@
+<template>
+  <b-overlay :show="!selected" spinner-variant="primary" variant="transparent">
+    <slot></slot>
+  </b-overlay>
+</template>
+
+<script>
+import { modelMixin } from '@/store/model.mixin'
+export default {
+  name: "ModelLoadingOverlay",
+  mixins: [
+    modelMixin
+  ]
+}
+</script>
+
+<style>
+
+</style>
diff --git a/app/javascript/people/person_tabs.vue b/app/javascript/people/person_tabs.vue
index 3601b9681..d4aa89f99 100644
--- a/app/javascript/people/person_tabs.vue
+++ b/app/javascript/people/person_tabs.vue
@@ -1,16 +1,14 @@
 <template>
   <div>
     <b-button variant="link" @click="back">Back</b-button>
-    <person-summary v-if="person"
-      v-model="person"
-    ></person-summary>
+    <model-loading-overlay :model="personModel">
+      <person-summary></person-summary>
+    </model-loading-overlay>
     <b-tabs content-class="mt-3" @activate-tab="handleTabActivation" v-if="person">
       <b-tab title="General" :active="!tab" lazy>
-        <person-details
-          v-if="person"
-          v-model="person"
-          :model="personModel"
-        ></person-details>
+        <model-loading-overlay :model="personModel">
+          <person-details></person-details>
+        </model-loading-overlay>
       </b-tab>
       <b-tab title="Demographics &amp; Community" :active="tab === 'other'" lazy>
         <person-demographics :selected="person"></person-demographics>
@@ -64,6 +62,7 @@ import AvailabilityAndInterests from '../profile/availability_and_interests.vue'
 import PersonDetails from '../profile/person_details.vue'
 import PersonSummary from '../profile/person_summary.vue';
 import PersonDemographics from '../profile/person_demographics.vue';
+import ModelLoadingOverlay from '@/components/model_loading_overlay.vue';
 
 import { personModel } from '@/store/person.store'
 import { sessionModel } from '@/store/session.store'
@@ -86,7 +85,8 @@ export default {
     SessionRanker,
     AvailabilityAndInterests,
     PersonDetails,
-    PersonDemographics
+    PersonDemographics,
+    ModelLoadingOverlay
   },
   mixins: [
     personSessionMixin,
@@ -164,10 +164,16 @@ export default {
   },
   mounted() {
     // get id from URL if present
-    let id = this.id ? this.id : this.currentUser.id
-    this.fetch_model_by_id(personModel, id).then(
-      this.select_model(personModel, id)
-    )
+    let id = this.id || this.currentUser.id;
+    let selectedPerson = this.selected_model(personModel);
+    // don't fetch if already here... todo figure out if we
+    // want to lazy fetch anyhow
+    if (selectedPerson?.id !== id) {
+      this.unselect_model(personModel);
+      this.fetch_model_by_id(personModel, id).then(
+        this.select_model(personModel, id)
+      );
+    }
   },
 }
 </script>
diff --git a/app/javascript/profile/person_demographics.vue b/app/javascript/profile/person_demographics.vue
index e24a32693..ecbea8dc1 100644
--- a/app/javascript/profile/person_demographics.vue
+++ b/app/javascript/profile/person_demographics.vue
@@ -1,49 +1,89 @@
 <template>
-<div>
-        <div class="d-flex flex-row mt-3">
-          <div class="w-50 mr-2">
-            <h5>Demographics</h5>
-            <dl>
-              <dt>Ethnicity</dt>
-              <dd class="ml-2">{{selected.ethnicity | na_if_empty}}</dd>
-              <dt>Gender</dt>
-              <dd class="ml-2">{{selected.gender | na_if_empty}}</dd>
-              <dt>Age at time of Event</dt>
-              <dd class="ml-2">{{selected.age_at_convention | na_if_empty}}</dd>
-              <dt>Romantic and/or sexual orientation</dt>
-              <dd class="ml-2">{{selected.romantic_sexual_orientation | na_if_empty}}</dd>
-            </dl>
-          </div>
-          <div class="w-50">
-            <h5>Community memberships</h5>
-            <dl>
-              <dt>Experience with being “othered”</dt>
-              <dd class="ml-2">{{selected.othered | na_if_empty }}</dd>
-              <dt>Member of an Indigenous community</dt>
-              <dd class="ml-2">{{selected.indigenous | na_if_empty}}</dd>
-              <dt>Member of the global Black diaspora</dt>
-              <dd class="ml-2">{{selected.black_diaspora | na_if_empty}}</dd>
-              <dt>Represent something other than a purely US-centric perspective</dt>
-              <dd class="ml-2">{{selected.non_us_centric_perspectives| na_if_empty}}</dd>
-              <dt>Other demographic categories</dt>
-              <dd class="ml-2">{{selected.demographic_categories | na_if_empty }}</dd>
-            </dl>
-          </div>
-          </div>
-        </div>
+  <section>
+    <div class="d-flex flex-row mt-3">
+      <div class="w-50 mr-2">
+        <h5>Demographics <edit-button v-b-modal.person-demo-modal></edit-button></h5>
+        <dl>
+          <dt>Ethnicity</dt>
+          <dd class="ml-2">{{ selected.ethnicity | na_if_empty }}</dd>
+          <dt>Gender</dt>
+          <dd class="ml-2">{{ selected.gender | na_if_empty }}</dd>
+          <dt>Age at time of event</dt>
+          <dd class="ml-2">{{ selected.age_at_convention | na_if_empty }}</dd>
+          <dt>Romantic and/or sexual orientation</dt>
+          <dd class="ml-2">
+            {{ selected.romantic_sexual_orientation | na_if_empty }}
+          </dd>
+        </dl>
+      </div>
+      <div class="w-50">
+        <h5>Community memberships</h5>
+        <dl>
+          <dt>Experience with being “othered”</dt>
+          <dd class="ml-2">{{ selected.othered | na_if_empty }}</dd>
+          <dt>Member of an Indigenous community</dt>
+          <dd class="ml-2">{{ selected.indigenous | na_if_empty }}</dd>
+          <dt>Member of the global Black diaspora</dt>
+          <dd class="ml-2">{{ selected.black_diaspora | na_if_empty }}</dd>
+          <dt>
+            Represent something other than a purely US-centric perspective
+          </dt>
+          <dd class="ml-2">
+            {{ selected.non_us_centric_perspectives | na_if_empty }}
+          </dd>
+          <dt>Other demographic categories</dt>
+          <dd class="ml-2">
+            {{ selected.demographic_categories | na_if_empty }}
+          </dd>
+        </dl>
+      </div>
+    </div>
+    <person-edit-modal id="person-demo-modal" :person="selected" :data="demoData">
+      <template #modal-title>Edit Demographics - {{selected.published_name}}</template>
+      <template #default="{fields}">
+        <b-form-group label="Ethnicity">
+          <b-form-input type="text" v-model="fields.ethnicity"></b-form-input>
+        </b-form-group>
+        <b-form-group label="Gender">
+          <b-form-input type="text" v-model="fields.gender"></b-form-input>
+        </b-form-group>
+        <b-form-group label="Age at time of event">
+          <b-form-input type="text" v-model="fields.age_at_convention"></b-form-input>
+        </b-form-group>
+        <b-form-group label="Romantic and/or sexual orientation">
+          <b-form-input type="text" v-model="fields.romantic_sexual_orientation"></b-form-input>
+        </b-form-group>
+      </template>
+    </person-edit-modal>
+  </section>
 </template>
 
-<script>import { modelMixin } from "@/mixins";
+<script>
+import { modelMixinNoProp } from "@/mixins";
+import { personModel as model } from "@/store/person.store";
+
+import PersonEditModal from "./person_edit_modal.vue";
+import EditButton from '@/components/edit_button';
 
 export default {
   name: "PersonDemographics",
-  props: ['selected'],
-  mounted() {
-    console.log("what gives yo")
-  }
-}
+  components: {
+    PersonEditModal,
+    EditButton
+  },
+  data: () => ({
+    model,
+    demoData: {
+      ethnicity: null,
+      gender: null,
+      age_at_convention: null,
+      romantic_sexual_orientation: null
+    }
+  }),
+  mixins: [
+    modelMixinNoProp
+  ]
+};
 </script>
 
-<style>
-
-</style>
+<style></style>
diff --git a/app/javascript/profile/person_details.vue b/app/javascript/profile/person_details.vue
index 9297b4509..b5323ed2b 100644
--- a/app/javascript/profile/person_details.vue
+++ b/app/javascript/profile/person_details.vue
@@ -1,50 +1,50 @@
 <template>
-  <div class="d-flex" v-if="editable_person">
+  <div class="d-flex" v-if="selected">
     <div class="d-flex flex-column w-50 p-2">
       <b-form-group label="Name">
-        <b-form-input type="text" v-model="editable_person.name" @blur="onInput"></b-form-input>
+        <b-form-input type="text" v-model="selected.name" @blur="saveSelected()"></b-form-input>
       </b-form-group>
       <b-form-group label="Pseudonym">
-        <b-form-input type="text" v-model="editable_person.pseudonym" @blur="onInput"></b-form-input>
+        <b-form-input type="text" v-model="selected.pseudonym" @blur="saveSelected()"></b-form-input>
       </b-form-group>
       <email-addresses-editor
         class="mb-4"
-        v-model="editable_person"
+        v-model="selected"
         model='email_address'
-        @input="$emit('input', editable_person)"
+        @input="$emit('input', selected)"
       ></email-addresses-editor>
       <b-form-group label="Anyone that should not be assigned to be on a panel with participant">
-        <b-form-textarea v-model="editable_person.do_not_assign_with" @blur="onInput"></b-form-textarea>
+        <b-form-textarea v-model="selected.do_not_assign_with" @blur="saveSelected()"></b-form-textarea>
       </b-form-group>
       <b-form-group label="Permission to be included in a livestreamed program">
           <b-form-radio-group
             stacked
-            v-model="editable_person.can_stream"
-            @change="onInput"
+            v-model="selected.can_stream"
+            @change="saveSelected()"
           >
             <b-form-radio :value="yesLabel.value">{{yesLabel.label}}</b-form-radio>
             <b-form-radio :value="noLabel.value">{{noLabel.label}}</b-form-radio>
             <b-form-radio :value="maybeLabel.value">{{maybeLabel.label}}</b-form-radio>
           </b-form-radio-group>
-          <b-textarea v-model="editable_person.can_stream_exceptions" @blur="onInput"></b-textarea>
+          <b-textarea v-model="selected.can_stream_exceptions" @blur="saveSelected()"></b-textarea>
       </b-form-group>
       <b-form-group label="Permission to be included in a recorded program">
           <b-form-radio-group
             stacked
-            v-model="editable_person.can_record"
-            @change="onInput"
+            v-model="selected.can_record"
+            @change="saveSelected()"
           >
             <b-form-radio :value="yesLabel.value">{{yesLabel.label}}</b-form-radio>
             <b-form-radio :value="noLabel.value">{{noLabel.label}}</b-form-radio>
             <b-form-radio :value="maybeLabel.value">{{maybeLabel.label}}</b-form-radio>
           </b-form-radio-group>
-          <b-textarea v-model="editable_person.can_record_exceptions" @blur="onInput"></b-textarea>
+          <b-textarea v-model="selected.can_record_exceptions" @blur="saveSelected()"></b-textarea>
       </b-form-group>
       <b-form-group>
-      <b-form-checkbox switch v-model="editable_person.is_local" @change="onInput">Local to the event</b-form-checkbox>
+      <b-form-checkbox switch v-model="selected.is_local" @change="saveSelected()">Local to the event</b-form-checkbox>
       </b-form-group>
       <b-form-group label="Moderating experience">
-        <b-form-textarea v-model="editable_person.moderation_experience" @blur="onInput"></b-form-textarea>
+        <b-form-textarea v-model="selected.moderation_experience" @blur="saveSelected()"></b-form-textarea>
       </b-form-group>
       <b-form-group label="Languages spoken">
         <b-form-checkbox-group stacked>
@@ -57,9 +57,9 @@
     <div class="d-flex flex-column w-50 p-2">
       <div><b>I plan to attend the convention:</b></div>
       <b-form-radio-group
-        v-model="editable_person.attendance_type"
+        v-model="selected.attendance_type"
         stacked
-        @change="attendanceChanged"
+        @change="saveSelected()"
       >
         <b-form-radio value="in person">In Person</b-form-radio>
         <b-form-radio value="hybrid">In Person AND Virtually</b-form-radio>
@@ -67,10 +67,10 @@
       </b-form-radio-group>
       <b-form-group label="At the time of the convention I will be at UTC Offset">
         <timezone-selector
-          v-model="editable_person.timezone"
-          @input="onInput"
+          v-model="selected.timezone"
+          @input="saveSelected()"
           class="mb-2"
-          :disabled="disabled || editable_person.attendance_type != 'virtual'"
+          :disabled="disabled || selected.attendance_type != 'virtual'"
         ></timezone-selector>
         <p>
           Your time now in the selected timezone is <b>{{youTimeNow}}</b>
@@ -84,14 +84,14 @@
           and check by specifying the date of September 1 2022 and your location as well as UTC/GMT
         </small>
       </b-form-group>
-      <!-- <b-form-checkbox v-model="editable_person.twelve_hour" @input="onInput">
+      <!-- <b-form-checkbox v-model="selected.twelve_hour" @input="saveSelected()">
         12 Hour Display
       </b-form-checkbox> -->
       <b-form-group label="Bio">
         <plano-editor
-          v-model="editable_person.bio"
+          v-model="selected.bio"
           type='classic'
-          @blur="onInput"
+          @blur="saveSelected()"
           :disabled="disabled"
         ></plano-editor>
       </b-form-group>
@@ -100,8 +100,8 @@
         :rules="{ regex: /^[a-z0-9_]{1,15}$/i }"
         label="Twitter"
         prepend="@"
-        v-model="editable_person.twitter"
-        @input="onInput"
+        v-model="selected.twitter"
+        @input="saveSelected()"
         :disabled="disabled"
         :message="TWITTER_ID_INVALID_MSG"
       ></validated-social>
@@ -109,8 +109,8 @@
         :rules="{ regex: /^[a-z\d.]{5,}$/i }"
         label="Facebook"
         prepend="facebook.com/"
-        v-model="editable_person.facebook"
-        @input="onInput"
+        v-model="selected.facebook"
+        @input="saveSelected()"
         :disabled="disabled"
         :message="FACEBOOK_ID_INVALID_MSG"
       ></validated-social>
@@ -118,8 +118,8 @@
         :rules="{ regex: /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-zA-Z0-9\/]+([\-\.]{1}[a-zA-Z0-9\/]+)*\.[a-zA-Z\/]{2,5}(:[0-9]{1,5})?(\/.*)?$/ }"
         label="Website"
         prepend="url"
-        v-model="editable_person.website"
-        @input="onInput"
+        v-model="selected.website"
+        @input="saveSelected()"
         :disabled="disabled"
         :message="WEBSITE_INVALID_MSG"
       ></validated-social>
@@ -127,8 +127,8 @@
         :rules="{ regex: /^[a-zA-Z0-9._]+$/ }"
         label="Instagram"
         prepend="instagram.com/"
-        v-model="editable_person.instagram"
-        @input="onInput"
+        v-model="selected.instagram"
+        @input="saveSelected()"
         :disabled="disabled"
         :message="INSTAGRAM_ID_INVALID_MSG"
       ></validated-social>
@@ -136,8 +136,8 @@
         :rules="{ regex: /^(#)?[a-zA-Z0-9][\w]{2,24}$/ }"
         label="Twitch"
         prepend="twitch.tv/"
-        v-model="editable_person.twitch"
-        @input="onInput"
+        v-model="selected.twitch"
+        @input="saveSelected()"
         :disabled="disabled"
         :message="TWITCH_ID_INVALID_MSG"
       ></validated-social>
@@ -145,8 +145,8 @@
         :rules="{ regex: /^[a-zA-Z0-9\/_]+([\-\.]{1}[a-zA-Z0-9\/_]+)*$/ }"
         label="YouTube"
         prepend="youtube.com/"
-        v-model="editable_person.youtube"
-        @input="onInput"
+        v-model="selected.youtube"
+        @input="saveSelected()"
         :disabled="disabled"
         :message="YOUTUBE_ID_INVALID_MSG"
       ></validated-social>
@@ -154,8 +154,8 @@
         :rules="{ regex:/^([a-zA-Z0-9._-])+$/ }"
         label="TikTok"
         prepend="@"
-        v-model="editable_person.tiktok"
-        @input="onInput"
+        v-model="selected.tiktok"
+        @input="saveSelected()"
         :disabled="disabled"
         :message="TIKTOK_ID_INVALID_MSG"
       ></validated-social>
@@ -163,15 +163,15 @@
         :rules="{ regex:/^([a-zA-Z0-9.\/_-])+$/ }"
         label="LinkedIn"
         prepend="linkedin.com/in/"
-        v-model="editable_person.linkedin"
-        @input="onInput"
+        v-model="selected.linkedin"
+        @input="saveSelected()"
         :disabled="disabled"
         :message="LINKEDIN_ID_INVALID_MSG"
       ></validated-social>
       <simple-social
         label="Other"
-        v-model="editable_person.othersocialmedia"
-        @input="onInput"
+        v-model="selected.othersocialmedia"
+        @input="saveSelected()"
       ></simple-social>
       <!-- We do not appear to cover flickr or reddit in the design -->
     </div>
@@ -194,7 +194,6 @@ import EmailAddressesEditor from "../components/email_addresses_editor.vue"
 import PlanoEditor from '../components/plano_editor'
 import ValidatedSocial from '../components/validated_social.vue';
 import SimpleSocial from '../social-media/simple-social.vue';
-import modelMixin from '../store/model.mixin';
 
 import {
   TWITTER_ID_INVALID_MSG,
@@ -207,8 +206,10 @@ import {
   LINKEDIN_ID_INVALID_MSG
 } from '../constants/strings';
 import settingsMixin from "@/store/settings.mixin";
+import { modelMixinNoProp } from '@/store/model.mixin';
+import { personModel as model } from "@/store/person.store";
 
-const { DateTime } = require("luxon");
+import { DateTime } from "luxon";
 
 export default {
   name: "PersonDetails",
@@ -220,20 +221,10 @@ export default {
     SimpleSocial
   },
   mixins: [
-    modelMixin,
-    settingsMixin
+    settingsMixin,
+    modelMixinNoProp
   ],
-  model: {
-    prop: 'person'
-  },
-  props: {
-    person: {
-      type: Object,
-      required: true
-    }
-  },
   data: () =>  ({
-    editable_person: null,
     disabled: false,
     TWITTER_ID_INVALID_MSG,
     FACEBOOK_ID_INVALID_MSG,
@@ -242,12 +233,13 @@ export default {
     TWITCH_ID_INVALID_MSG,
     YOUTUBE_ID_INVALID_MSG,
     TIKTOK_ID_INVALID_MSG,
-    LINKEDIN_ID_INVALID_MSG
+    LINKEDIN_ID_INVALID_MSG,
+    model
   }),
   computed: {
     youTimeNow() {
-      if (this.editable_person.timezone) {
-        return DateTime.now().setZone(this.editable_person.timezone).toLocaleString(DateTime.TIME_SIMPLE)
+      if (this.selected.timezone) {
+        return DateTime.now().setZone(this.selected.timezone).toLocaleString(DateTime.TIME_SIMPLE)
       }
       return 'Not Set'
     },
@@ -269,29 +261,6 @@ export default {
         value: "maybe"};
     },
   },
-  methods: {
-    attendanceChanged(arg) {
-      // console.debug("***** ATT CHNAGED", arg)
-      this.save(this.editable_person).then(
-        (obj) => {
-          this.editable_person = obj
-          this.$emit('input',this.editable_person)
-        }
-      )
-    },
-    onInput(arg) {
-      this.save(this.editable_person).then(
-        (obj) => {
-          console.log(obj);
-          this.editable_person = obj
-          this.$emit('input',this.editable_person)
-        }
-      )
-    }
-  },
-  mounted() {
-    this.editable_person = this.person
-  }
 }
 </script>
 
diff --git a/app/javascript/profile/person_edit_modal.vue b/app/javascript/profile/person_edit_modal.vue
index d9f82824a..808568a9c 100644
--- a/app/javascript/profile/person_edit_modal.vue
+++ b/app/javascript/profile/person_edit_modal.vue
@@ -45,10 +45,7 @@ export default {
     },
     patchPerson() {
       this.toastPromise(this.patchPersonModel({person: this.person, data: this.data}), "TODO SAVE MSSAGE", "TODO ERROR MESSAGE").then((savedPerson) => {
-        this.fetchById({model: 'person', id: savedPerson.id}).then((fetchedPerson) => {
-          // TODO do i need this
-          this.$emit('updated', fetchedPerson);
-        })
+        this.$emit('updated', savedPerson);
       })
     }
   }
diff --git a/app/javascript/profile/person_summary.vue b/app/javascript/profile/person_summary.vue
index 4e7b6fec5..5b0d4145f 100644
--- a/app/javascript/profile/person_summary.vue
+++ b/app/javascript/profile/person_summary.vue
@@ -1,47 +1,49 @@
 <template>
-  <div class="container my-3" v-if="person">
-    <div class="row">
-      <div class="col-8">
-        <h3>{{person.published_name}}<edit-button v-b-modal.person-top-modal></edit-button></h3>
+    <div class="container my-3" v-if="selected">
+      <div class="row">
+        <div class="col-8">
+          <h3>{{selected.published_name}}<edit-button v-b-modal.person-top-modal></edit-button></h3>
+        </div>
+        <div class="col-4 d-flex flex-row-reverse">
+            <small>Last Login: {{formatLocaleDate(selected.current_sign_in_at)}}</small>
+        </div>
       </div>
-      <div class="col-4 d-flex flex-row-reverse">
-          <small>Last Login: {{formatLocaleDate(person.current_sign_in_at)}}</small>
-      </div>
-    </div>
 
-      <div>
-        Pronouns: <em>{{person.pronouns}}</em>
-      <div>
-        Willing to moderate sessions: <em>{{willing_to_moderate}}</em>
-      </div>
-      <div>
-        Primary email: <em>{{person.primary_email.email}}</em>
+        <div>
+          Pronouns: <em>{{selected.pronouns}}</em>
+        <div>
+          Willing to moderate sessions: <em>{{willing_to_moderate}}</em>
+        </div>
+        <div>
+          Primary email: <em v-if="selected.primary_email">{{selected.primary_email.email}}</em>
+        </div>
       </div>
+      <person-edit-modal id="person-top-modal" body-class="formscroll" :person="selected" :data="editData">
+        <template #modal-title>Edit Profile - {{selected.published_name}}</template>
+        <template #default="slotData">
+          <b-form-group label="Name">
+            <b-form-input type="text" v-model="slotData.fields.name"></b-form-input>
+          </b-form-group>
+          <b-form-group label="Pseudonym">
+            <b-form-input type="text" v-model="slotData.fields.pseudonym"></b-form-input>
+          </b-form-group>
+          <b-form-group label="Pronouns">
+            <b-form-input type="text" v-model="slotData.fields.pronouns"></b-form-input>
+          </b-form-group>
+          <b-form-group>
+            <b-form-checkbox switch v-model="slotData.fields.willing_to_moderate" @change="log($event)">Willing to moderate session</b-form-checkbox>
+          </b-form-group>
+        </template>
+      </person-edit-modal>
     </div>
-    <person-edit-modal id="person-top-modal" body-class="formscroll" :person="person" :data="editData">
-      <template #modal-title>Edit Profile - {{person.published_name}}</template>
-      <template #default="slotData">
-        <b-form-group label="Name">
-          <b-form-input type="text" v-model="slotData.fields.name"></b-form-input>
-        </b-form-group>
-        <b-form-group label="Pseudonym">
-          <b-form-input type="text" v-model="slotData.fields.pseudonym"></b-form-input>
-        </b-form-group>
-        <b-form-group label="Pronouns">
-          <b-form-input type="text" v-model="slotData.fields.pronouns"></b-form-input>
-        </b-form-group>
-        <b-form-group>
-          <b-form-checkbox switch v-model="slotData.fields.willing_to_moderate" @change="log($event)">Willing to moderate session</b-form-checkbox>
-        </b-form-group>
-      </template>
-    </person-edit-modal>
-  </div>
 </template>
 
 <script>
 const { DateTime } = require("luxon");
 import EditButton from '@/components/edit_button';
 import PersonEditModal from './person_edit_modal';
+import { modelMixinNoProp } from '@/store/model.mixin';
+import { personModel } from '@/store/person.store';
 
 export default {
   name: "PersonSummary",
@@ -49,27 +51,21 @@ export default {
     EditButton,
     PersonEditModal,
   },
-  model: {
-    prop: 'person',
-    // event: 'blur'
-  },
   data: () => ({
     editData: {
       name: null,
       pseudonym: null,
       pronouns: null,
       willing_to_moderate: null
-    }
+    },
+    model: personModel
   }),
-  props: {
-    person: {
-      type: Object,
-      required: true
-    }
-  },
+  mixins: [
+    modelMixinNoProp
+  ],
   computed: {
     willing_to_moderate() {
-      return this.person.willing_to_moderate ? 'Yes' : 'No'
+      return this.selected.willing_to_moderate ? 'Yes' : 'No'
     }
   },
   methods: {
diff --git a/app/javascript/profile/profile-tabs.vue b/app/javascript/profile/profile-tabs.vue
index dabc6a806..b27ca5b2b 100644
--- a/app/javascript/profile/profile-tabs.vue
+++ b/app/javascript/profile/profile-tabs.vue
@@ -1,14 +1,13 @@
 <template>
   <div>
-    <person-summary v-if="person"
-      v-model="person"
-    ></person-summary>
+    <model-loading-overlay :model="personModel">
+      <person-summary></person-summary>
+    </model-loading-overlay>
     <b-tabs content-class="mt-3" @activate-tab="handleTabActivation" v-if="person">
       <b-tab title="General" :active="!tab" lazy>
-        <person-details
-          v-model="person"
-          :model="personModel"
-        ></person-details>
+        <model-loading-overlay :model="personModel">
+          <person-details></person-details>
+        </model-loading-overlay>
       </b-tab>
       <b-tab title="Demographics &amp; Community" :active="tab === 'other'" lazy>
         <person-demographics :selected="person"></person-demographics>
@@ -53,6 +52,7 @@ import AvailabilityAndInterests from './availability_and_interests.vue';
 import PersonDetails from './person_details.vue'
 import PersonSummary from './person_summary.vue';
 import PersonDemographics from './person_demographics';
+import ModelLoadingOverlay from '@/components/model_loading_overlay';
 
 import { personModel } from '@/store/person.store'
 import { sessionModel } from '@/store/session.store'
@@ -76,6 +76,7 @@ export default {
     AvailabilityAndInterests,
     PersonDetails,
     PersonDemographics,
+    ModelLoadingOverlay,
   },
   mixins: [
     personSessionMixin,
diff --git a/app/javascript/store/model.mixin.js b/app/javascript/store/model.mixin.js
index 31174a5c9..c16780938 100644
--- a/app/javascript/store/model.mixin.js
+++ b/app/javascript/store/model.mixin.js
@@ -3,16 +3,10 @@ import { mapActions } from 'vuex';
 import { toastMixin } from "@/mixins";
 import { MODEL_SAVE_ERROR, MODEL_SAVE_SUCCESS, MODEL_DELETE_SUCCESS, MODEL_DELETE_ERROR } from "@/constants/strings";
 
-export const modelMixin = {
+export const modelMixinNoProp = {
   mixins: [
     toastMixin
   ],
-  props: {
-    model: {
-      type: String,
-      required: true
-    }
-  },
   computed: {
     selected() {
       return this.$store.getters[SELECTED]({model: this.model})
@@ -67,6 +61,18 @@ export const modelMixin = {
   }
 }
 
+export const modelMixin = {
+  mixins:[
+    modelMixinNoProp
+  ],
+  props: {
+    model: {
+      type: String,
+      required: true
+    }
+  },
+}
+
 /**
  * Returns a mixin that provides a mirrored copy of the given field in
  * currently selected model, which updates when the selected
diff --git a/app/javascript/store/model_utils.mixin.js b/app/javascript/store/model_utils.mixin.js
index cc9559866..08b305628 100644
--- a/app/javascript/store/model_utils.mixin.js
+++ b/app/javascript/store/model_utils.mixin.js
@@ -5,7 +5,7 @@
 import { toastMixin } from "@/mixins";
 import { utils } from 'jsonapi-vuex'
 
-import { FETCH_BY_ID, DELETE, UPDATE_ALL, SAVE, SELECT, SELECTED, FETCH} from "./model.store";
+import { FETCH_BY_ID, DELETE, UPDATE_ALL, SAVE, SELECT, SELECTED, FETCH, UNSELECT} from "./model.store";
 import {
   MODEL_SAVE_ERROR, MODEL_SAVE_SUCCESS, MODEL_DELETE_SUCCESS, MODEL_DELETE_ERROR,
   MODEL_MASS_UPDATE_SUCCESS, MODEL_MASS_UPDATE_ERROR
@@ -23,6 +23,9 @@ export const modelUtilsMixin = {
     select_model(model, itemOrId) {
       return this.$store.commit(SELECT, {model: model, itemOrId});
     },
+    unselect_model(model) {
+      return this.$store.commit(UNSELECT, {model: model});
+    },
     selected_model(model) {
       return this.$store.getters[SELECTED]({model: model})
     },

From 062cad0d40c1e32e18f5d0e68fa80f3885932088 Mon Sep 17 00:00:00 2001
From: Gail Terman <gterman@gmail.com>
Date: Thu, 19 May 2022 10:15:36 -0400
Subject: [PATCH 05/40] community memberships editing

---
 .../profile/person_demographics.vue           | 31 +++++++++++++++++--
 app/javascript/profile/person_summary.vue     | 10 +++---
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/app/javascript/profile/person_demographics.vue b/app/javascript/profile/person_demographics.vue
index ecbea8dc1..d24da7b3b 100644
--- a/app/javascript/profile/person_demographics.vue
+++ b/app/javascript/profile/person_demographics.vue
@@ -17,7 +17,7 @@
         </dl>
       </div>
       <div class="w-50">
-        <h5>Community memberships</h5>
+        <h5>Community memberships <edit-button v-b-modal.person-community-modal></edit-button></h5>
         <dl>
           <dt>Experience with being “othered”</dt>
           <dd class="ml-2">{{ selected.othered | na_if_empty }}</dd>
@@ -51,7 +51,27 @@
           <b-form-input type="text" v-model="fields.age_at_convention"></b-form-input>
         </b-form-group>
         <b-form-group label="Romantic and/or sexual orientation">
-          <b-form-input type="text" v-model="fields.romantic_sexual_orientation"></b-form-input>
+          <b-form-textarea v-model="fields.romantic_sexual_orientation"></b-form-textarea>
+        </b-form-group>
+      </template>
+    </person-edit-modal>
+    <person-edit-modal id="person-community-modal" :person="selected" :data="communityData">
+      <template #modal-title>Edit community memberships - {{selected.published_name}}</template>
+      <template #default="{fields}">
+        <b-form-group label="Experience with being &quot;othered&quot;">
+          <b-form-textarea v-model="fields.othered"></b-form-textarea>
+        </b-form-group>
+        <b-form-group label="Member of an Indigenous community">
+          <b-form-textarea v-model="fields.indigenous"></b-form-textarea>
+        </b-form-group>
+        <b-form-group label="Member of the global Black diaspora">
+          <b-form-textarea v-model="fields.black_diaspora"></b-form-textarea>
+        </b-form-group>
+        <b-form-group label="Represent something other than a purely US-centric perspective">
+          <b-form-textarea v-model="fields.non_us_centric_perspectives"></b-form-textarea>
+        </b-form-group>
+        <b-form-group label="Other demographic categories">
+          <b-form-textarea v-model="fields.demographic_categories"></b-form-textarea>
         </b-form-group>
       </template>
     </person-edit-modal>
@@ -78,6 +98,13 @@ export default {
       gender: null,
       age_at_convention: null,
       romantic_sexual_orientation: null
+    },
+    communityData: {
+      othered: null,
+      indigenous: null,
+      black_diaspora: null,
+      non_us_centric_perspectives: null,
+      demographic_categories: null
     }
   }),
   mixins: [
diff --git a/app/javascript/profile/person_summary.vue b/app/javascript/profile/person_summary.vue
index 5b0d4145f..801551152 100644
--- a/app/javascript/profile/person_summary.vue
+++ b/app/javascript/profile/person_summary.vue
@@ -20,18 +20,18 @@
       </div>
       <person-edit-modal id="person-top-modal" body-class="formscroll" :person="selected" :data="editData">
         <template #modal-title>Edit Profile - {{selected.published_name}}</template>
-        <template #default="slotData">
+        <template #default="{fields}">
           <b-form-group label="Name">
-            <b-form-input type="text" v-model="slotData.fields.name"></b-form-input>
+            <b-form-input type="text" v-model="fields.name"></b-form-input>
           </b-form-group>
           <b-form-group label="Pseudonym">
-            <b-form-input type="text" v-model="slotData.fields.pseudonym"></b-form-input>
+            <b-form-input type="text" v-model="fields.pseudonym"></b-form-input>
           </b-form-group>
           <b-form-group label="Pronouns">
-            <b-form-input type="text" v-model="slotData.fields.pronouns"></b-form-input>
+            <b-form-input type="text" v-model="fields.pronouns"></b-form-input>
           </b-form-group>
           <b-form-group>
-            <b-form-checkbox switch v-model="slotData.fields.willing_to_moderate" @change="log($event)">Willing to moderate session</b-form-checkbox>
+            <b-form-checkbox switch v-model="fields.willing_to_moderate" @change="log($event)">Willing to moderate session</b-form-checkbox>
           </b-form-group>
         </template>
       </person-edit-modal>

From a01c2e3b0a80a88ee8c7f1377312d75fa32627f9 Mon Sep 17 00:00:00 2001
From: Gail Terman <gterman@gmail.com>
Date: Thu, 19 May 2022 10:32:08 -0400
Subject: [PATCH 06/40] consolidate people tabs

---
 app/javascript/app.router.js              |  22 ++-
 app/javascript/people/person_tabs.vue     |   8 +-
 app/javascript/profile/person_details.vue |   1 -
 app/javascript/profile/profile-tabs.vue   | 223 +++++++++++-----------
 db/structure.sql                          |   8 +
 5 files changed, 136 insertions(+), 126 deletions(-)

diff --git a/app/javascript/app.router.js b/app/javascript/app.router.js
index 462e3c84b..5ff6b4f12 100644
--- a/app/javascript/app.router.js
+++ b/app/javascript/app.router.js
@@ -24,19 +24,21 @@ import ProfileScreen from './profile/profile-screen.vue';
 import ProfileTabs from './profile/profile-tabs.vue';
 
 const profileRoutes = [
-  { path: 'session-selection', component: ProfileTabs, props: {tab: 'session-selection'} },
-  { path: 'session-ranking', component: ProfileTabs, props: {tab: 'session-ranking'} },
-  { path: 'availability', component: ProfileTabs, props: {tab: 'availability'} },
-  { path: 'other', component: ProfileTabs, props: {tab: 'other'} },
-  { path: '', component: ProfileTabs, props: true }
+  // { path: 'session-selection', component: PersonTabs, props: {tab: 'session-selection'} },
+  // { path: 'session-ranking', component: PersonTabs, props: {tab: 'session-ranking'} },
+  // { path: 'availability', component: PersonTabs, props: {tab: 'availability'} },
+  // { path: 'other', component: PersonTabs, props: {tab: 'other'} },
+  { path: ':tab', component: PersonTabs, props: true },
+  { path: '', component: PersonTabs, props: true }
 ]
 
 const personRoutes = [
-  { path: 'edit/:id', component: PersonTabs, props: route => ({id: route.params.id, tab: 'person-edit'}) },
-  { path: 'session-selection/:id', component: PersonTabs, props: route => ({id: route.params.id, tab: 'session-selection'}) },
-  { path: 'session-ranking/:id', component: PersonTabs, props: route => ({id: route.params.id, tab: 'session-ranking'}) },
-  { path: 'availability/:id', component: PersonTabs, props: route => ({id: route.params.id, tab: 'availability'}) },
-  { path: 'other/:id', component: PersonTabs, props: route => ({id: route.params.id, tab: 'other'}) },
+  { path: 'edit/:id', component: PersonTabs, props: true },
+  { path: ':tab/:id', component: PersonTabs, props: true },
+  // { path: 'session-selection/:id', component: PersonTabs, props: route => ({id: route.params.id, tab: 'session-selection'}) },
+  // { path: 'session-ranking/:id', component: PersonTabs, props: route => ({id: route.params.id, tab: 'session-ranking'}) },
+  // { path: 'availability/:id', component: PersonTabs, props: route => ({id: route.params.id, tab: 'availability'}) },
+  // { path: 'other/:id', component: PersonTabs, props: route => ({id: route.params.id, tab: 'other'}) },
   { path: '', component: PeopleList }
 ]
 
diff --git a/app/javascript/people/person_tabs.vue b/app/javascript/people/person_tabs.vue
index d4aa89f99..85a672909 100644
--- a/app/javascript/people/person_tabs.vue
+++ b/app/javascript/people/person_tabs.vue
@@ -11,14 +11,15 @@
         </model-loading-overlay>
       </b-tab>
       <b-tab title="Demographics &amp; Community" :active="tab === 'other'" lazy>
-        <person-demographics :selected="person"></person-demographics>
+        <model-loading-overlay :model="personModel">
+          <person-demographics></person-demographics>
+        </model-loading-overlay>
       </b-tab>
       <!-- Can not make this lazy otherwise we have lock issues with the notes -->
       <b-tab title="Availability &amp; Interests" :active="tab === 'availability'">
         <availability-and-interests
           v-if="person"
           v-model="person"
-          @input="onPersonUpdate"
           :start_time="start_time"
           :end_time="end_time"
           :timezone="timezone"
@@ -127,9 +128,6 @@ export default {
     }
   },
   methods: {
-    onPersonUpdate(arg) {
-      this.person = arg
-    },
     back() {
       this.$router.push('/people');
     },
diff --git a/app/javascript/profile/person_details.vue b/app/javascript/profile/person_details.vue
index b5323ed2b..806321852 100644
--- a/app/javascript/profile/person_details.vue
+++ b/app/javascript/profile/person_details.vue
@@ -208,7 +208,6 @@ import {
 import settingsMixin from "@/store/settings.mixin";
 import { modelMixinNoProp } from '@/store/model.mixin';
 import { personModel as model } from "@/store/person.store";
-
 import { DateTime } from "luxon";
 
 export default {
diff --git a/app/javascript/profile/profile-tabs.vue b/app/javascript/profile/profile-tabs.vue
index b27ca5b2b..1ffcc658e 100644
--- a/app/javascript/profile/profile-tabs.vue
+++ b/app/javascript/profile/profile-tabs.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+<!-- DO NOT USE! use person_tabs.vue instead 
     <model-loading-overlay :model="personModel">
       <person-summary></person-summary>
     </model-loading-overlay>
@@ -10,9 +11,10 @@
         </model-loading-overlay>
       </b-tab>
       <b-tab title="Demographics &amp; Community" :active="tab === 'other'" lazy>
-        <person-demographics :selected="person"></person-demographics>
+        <model-loading-overlay :model="personModel">
+          <person-demographics></person-demographics>
+        </model-loading-overlay>
       </b-tab>
-      <!-- Can not make this lazy otherwise we have lock issues with the notes -->
       <b-tab title="Availability &amp; Interests" :active="tab === 'availability'" v-if="currentSettings.configs">
         <availability-and-interests
           v-model="person"
@@ -42,122 +44,123 @@
         ></session-ranker>
       </b-tab>
     </b-tabs>
+    -->
   </div>
 </template>
 
 <script>
-import SessionSelector from './session_selector.vue';
-import SessionRanker from './session_ranker.vue';
-import AvailabilityAndInterests from './availability_and_interests.vue';
-import PersonDetails from './person_details.vue'
-import PersonSummary from './person_summary.vue';
-import PersonDemographics from './person_demographics';
-import ModelLoadingOverlay from '@/components/model_loading_overlay';
+// import SessionSelector from './session_selector.vue';
+// import SessionRanker from './session_ranker.vue';
+// import AvailabilityAndInterests from './availability_and_interests.vue';
+// import PersonDetails from './person_details.vue'
+// import PersonSummary from './person_summary.vue';
+// import PersonDemographics from './person_demographics';
+// import ModelLoadingOverlay from '@/components/model_loading_overlay';
 
-import { personModel } from '@/store/person.store'
-import { sessionModel } from '@/store/session.store'
-import { sessionAssignmentModel } from '@/store/session_assignment.store'
-import personSessionMixin from '@/auth/person_session.mixin';
-import settingsMixin from "@/store/settings.mixin";
-import modelUtilsMixin from '@/store/model_utils.mixin';
+// import { personModel } from '@/store/person.store'
+// import { sessionModel } from '@/store/session.store'
+// import { sessionAssignmentModel } from '@/store/session_assignment.store'
+// import personSessionMixin from '@/auth/person_session.mixin';
+// import settingsMixin from "@/store/settings.mixin";
+// import modelUtilsMixin from '@/store/model_utils.mixin';
 
-const { DateTime } = require("luxon");
+// const { DateTime } = require("luxon");
 
-import VueRouter from 'vue-router';
-const { isNavigationFailure, NavigationFailureType } = VueRouter;
+// import VueRouter from 'vue-router';
+// const { isNavigationFailure, NavigationFailureType } = VueRouter;
 
-export default {
-  name: "ProfileTabs",
-  props: ['tab', 'id'],
-  components: {
-    PersonSummary,
-    SessionSelector,
-    SessionRanker,
-    AvailabilityAndInterests,
-    PersonDetails,
-    PersonDemographics,
-    ModelLoadingOverlay,
-  },
-  mixins: [
-    personSessionMixin,
-    settingsMixin,
-    modelUtilsMixin
-  ],
-  data: () => ({
-    personModel,
-    sessionModel,
-    sessionAssignmentModel,
-  }),
-  computed: {
-    person() {
-      return this.selected_model(personModel);
-    },
-    start_time() {
-      if (this.currentSettings && this.currentSettings.configs) {
-        let st = this.configByName('convention_start_time')
-        return DateTime.fromISO(st)
-      } else {
-        return null
-      }
-    },
-    end_time() {
-      if (this.currentSettings && this.currentSettings.configs) {
-        let et = this.configByName('convention_end_time')
-        return DateTime.fromISO(et)
-      } else {
-        return null
-      }
-    },
-    rankedFilter() {
-      return `{"op":"all","queries":[["person_id", "=", "${this.person.id}"],["interested", "=", true]]}`
-    },
-    timezone() {
-      let tz = this.configByName('convention_timezone')
-      return tz
-    }
-  },
-  methods: {
-    onPersonUpdate(arg) {
-      this.person = arg
-    },
-    handleTabActivation(newTab, oldTab, bvEvent) {
-      let path = '';
-      switch(newTab) {
-        case 0:
-          path = '';
-          break;
-        case 1:
-          path = 'other';
-          break;
-        case 2:
-          path = 'availability';
-          break;
-        case 3:
-          path = 'session-selection';
-          break;
-        case 4:
-          path = 'session-ranking';
-          break;
-      }
-      // change the router path to match the current tab
-      // so that reloads work right
-      this.$router.push(`/profile/${path}`).catch(error => {
-        if(!isNavigationFailure(error, NavigationFailureType.duplicated)) {
-          // ignore the duplicates, otherwise -
-          throw error;
-        }
-      })
-    }
-  },
-  mounted() {
-    // get id from URL if present
-    let id = this.id ? this.id : this.currentUser.id
-    // changed this to select the person
-    this.fetch_model_by_id(personModel, id).then(
-      this.select_model(personModel, id)
-    )
-  },
-}
+// export default {
+//   name: "ProfileTabs",
+//   props: ['tab', 'id'],
+//   components: {
+//     PersonSummary,
+//     SessionSelector,
+//     SessionRanker,
+//     AvailabilityAndInterests,
+//     PersonDetails,
+//     PersonDemographics,
+//     ModelLoadingOverlay,
+//   },
+//   mixins: [
+//     personSessionMixin,
+//     settingsMixin,
+//     modelUtilsMixin
+//   ],
+//   data: () => ({
+//     personModel,
+//     sessionModel,
+//     sessionAssignmentModel,
+//   }),
+//   computed: {
+//     person() {
+//       return this.selected_model(personModel);
+//     },
+//     start_time() {
+//       if (this.currentSettings && this.currentSettings.configs) {
+//         let st = this.configByName('convention_start_time')
+//         return DateTime.fromISO(st)
+//       } else {
+//         return null
+//       }
+//     },
+//     end_time() {
+//       if (this.currentSettings && this.currentSettings.configs) {
+//         let et = this.configByName('convention_end_time')
+//         return DateTime.fromISO(et)
+//       } else {
+//         return null
+//       }
+//     },
+//     rankedFilter() {
+//       return `{"op":"all","queries":[["person_id", "=", "${this.person.id}"],["interested", "=", true]]}`
+//     },
+//     timezone() {
+//       let tz = this.configByName('convention_timezone')
+//       return tz
+//     }
+//   },
+//   methods: {
+//     onPersonUpdate(arg) {
+//       this.person = arg
+//     },
+//     handleTabActivation(newTab, oldTab, bvEvent) {
+//       let path = '';
+//       switch(newTab) {
+//         case 0:
+//           path = '';
+//           break;
+//         case 1:
+//           path = 'other';
+//           break;
+//         case 2:
+//           path = 'availability';
+//           break;
+//         case 3:
+//           path = 'session-selection';
+//           break;
+//         case 4:
+//           path = 'session-ranking';
+//           break;
+//       }
+//       // change the router path to match the current tab
+//       // so that reloads work right
+//       this.$router.push(`/profile/${path}`).catch(error => {
+//         if(!isNavigationFailure(error, NavigationFailureType.duplicated)) {
+//           // ignore the duplicates, otherwise -
+//           throw error;
+//         }
+//       })
+//     }
+//   },
+//   mounted() {
+//     // get id from URL if present
+//     let id = this.id ? this.id : this.currentUser.id
+//     // changed this to select the person
+//     this.fetch_model_by_id(personModel, id).then(
+//       this.select_model(personModel, id)
+//     )
+//   },
+// }
 </script>
 
 <style>
diff --git a/db/structure.sql b/db/structure.sql
index 9549dc1ab..247c7acd7 100644
--- a/db/structure.sql
+++ b/db/structure.sql
@@ -2463,6 +2463,14 @@ ALTER TABLE ONLY public.survey_submissions
     ADD CONSTRAINT fk_rails_cca09747da FOREIGN KEY (person_id) REFERENCES public.people(id);
 
 
+--
+-- Name: rooms fk_rails_d2498419d7; Type: FK CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.rooms
+    ADD CONSTRAINT fk_rails_d2498419d7 FOREIGN KEY (room_set_id) REFERENCES public.room_sets(id);
+
+
 --
 -- PostgreSQL database dump complete
 --

From 23a9d7df5d3b203439671c35b0244dc7f8c545ba Mon Sep 17 00:00:00 2001
From: Gail Terman <gterman@gmail.com>
Date: Thu, 19 May 2022 20:04:19 -0400
Subject: [PATCH 07/40] bio edit + tab combination fix

---
 app/javascript/people/people-screen.vue   |  2 +-
 app/javascript/people/person_tabs.vue     | 23 +++++++++----
 app/javascript/profile/person_details.vue | 40 +++++++++++------------
 3 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/app/javascript/people/people-screen.vue b/app/javascript/people/people-screen.vue
index be5935a6c..cc4480f14 100644
--- a/app/javascript/people/people-screen.vue
+++ b/app/javascript/people/people-screen.vue
@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  name: "PeopleScreen"
+  name: "PeopleScreen",
 }
 </script>
 
diff --git a/app/javascript/people/person_tabs.vue b/app/javascript/people/person_tabs.vue
index 85a672909..a1aaf5985 100644
--- a/app/javascript/people/person_tabs.vue
+++ b/app/javascript/people/person_tabs.vue
@@ -133,26 +133,30 @@ export default {
     },
     handleTabActivation(newTab, oldTab, bvEvent) {
       let path = '';
+      const pathStart = this.$route.path.split('/')[1];
       switch(newTab) {
         case 0:
-          path = `edit/${this.person.id}`;
+          path = pathStart === 'people' ? 'edit' : '';
           break;
         case 1:
-          path = `other/${this.person.id}`;
+          path = `other`;
           break;
         case 2:
-          path = `availability/${this.person.id}`;
+          path = `availability`;
           break;
         case 3:
-          path = `session-selection/${this.person.id}`;
+          path = `session-selection`;
           break;
         case 4:
-          path = `session-ranking/${this.person.id}`;
+          path = `session-ranking`;
           break;
       }
       // change the router path to match the current tab
       // so that reloads work right
-      this.$router.push(`/people/${path}`).catch(error => {
+      if(pathStart === 'people') {
+        path += `/${this.person.id}`
+      }
+      this.$router.push(`/${pathStart}/${path}`).catch(error => {
         if(!isNavigationFailure(error, NavigationFailureType.duplicated)) {
           // ignore the duplicates, otherwise -
           throw error;
@@ -173,6 +177,13 @@ export default {
       );
     }
   },
+  beforeRouteLeave(to, from, next) {
+    if (from.path.match(/.*profile.*/) && to.path === '/people') {
+      // going from profile to people, clear the selection
+      this.unselect_model(personModel)
+    }
+    next();
+  }
 }
 </script>
 
diff --git a/app/javascript/profile/person_details.vue b/app/javascript/profile/person_details.vue
index 806321852..1375e9a49 100644
--- a/app/javascript/profile/person_details.vue
+++ b/app/javascript/profile/person_details.vue
@@ -46,13 +46,6 @@
       <b-form-group label="Moderating experience">
         <b-form-textarea v-model="selected.moderation_experience" @blur="saveSelected()"></b-form-textarea>
       </b-form-group>
-      <b-form-group label="Languages spoken">
-        <b-form-checkbox-group stacked>
-          <b-form-checkbox value="polish">Polish</b-form-checkbox>
-          <b-form-checkbox value="spanish">Spanish</b-form-checkbox>
-        </b-form-checkbox-group>
-      </b-form-group>
-
     </div>
     <div class="d-flex flex-column w-50 p-2">
       <div><b>I plan to attend the convention:</b></div>
@@ -87,14 +80,8 @@
       <!-- <b-form-checkbox v-model="selected.twelve_hour" @input="saveSelected()">
         12 Hour Display
       </b-form-checkbox> -->
-      <b-form-group label="Bio">
-        <plano-editor
-          v-model="selected.bio"
-          type='classic'
-          @blur="saveSelected()"
-          :disabled="disabled"
-        ></plano-editor>
-      </b-form-group>
+      <h5>Bio <edit-button v-b-modal.person-bio-modal></edit-button></h5>
+      <div class="ml-2" v-html="selected.bio"></div>
       <b class="mt-3">Social Media</b>
       <validated-social
         :rules="{ regex: /^[a-z0-9_]{1,15}$/i }"
@@ -175,6 +162,15 @@
       ></simple-social>
       <!-- We do not appear to cover flickr or reddit in the design -->
     </div>
+    <person-edit-modal id="person-bio-modal" :person="selected" :data="{bio: null}">
+      <template #modal-title>Edit Bio - {{selected.published_name}}</template>
+      <template #default="{fields}">
+        <plano-editor
+          v-model="fields.bio"
+          type='classic'
+        ></plano-editor>
+      </template>
+    </person-edit-modal>
   </div>
   <!-- <br />
   {{person.pronouns}}
@@ -189,11 +185,13 @@
 </template>
 
 <script>
-import TimezoneSelector from "../components/timezone_selector.vue"
-import EmailAddressesEditor from "../components/email_addresses_editor.vue"
-import PlanoEditor from '../components/plano_editor'
-import ValidatedSocial from '../components/validated_social.vue';
+import TimezoneSelector from "@/components/timezone_selector.vue"
+import EmailAddressesEditor from "@/components/email_addresses_editor.vue"
+import PlanoEditor from '@/components/plano_editor'
+import ValidatedSocial from '@/components/validated_social.vue';
 import SimpleSocial from '../social-media/simple-social.vue';
+import EditButton from '@/components/edit_button.vue';
+import PersonEditModal from './person_edit_modal.vue';
 
 import {
   TWITTER_ID_INVALID_MSG,
@@ -217,7 +215,9 @@ export default {
     EmailAddressesEditor,
     PlanoEditor,
     ValidatedSocial,
-    SimpleSocial
+    SimpleSocial,
+    PersonEditModal,
+    EditButton,
   },
   mixins: [
     settingsMixin,

From ecd77616d85072478a14cc66d02e964249f75711 Mon Sep 17 00:00:00 2001
From: Henry <henry.balen@chicon.org>
Date: Wed, 25 May 2022 19:00:20 -0400
Subject: [PATCH 08/40] Availability WIP

---
 app/javascript/schedule/schedule_screen.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/javascript/schedule/schedule_screen.vue b/app/javascript/schedule/schedule_screen.vue
index 3b1916d65..59ced8bd1 100644
--- a/app/javascript/schedule/schedule_screen.vue
+++ b/app/javascript/schedule/schedule_screen.vue
@@ -10,10 +10,10 @@
           style="flex: 1 0 auto"
         >
         </schedulable-sessions>
-        <!-- <availability
+        <availability
           :model="sessionConflictModel"
           style="flex: 1 0 auto"
-        ></availability> -->
+        ></availability>
       </div>
       <div class="col-9">
         <room-selector

From 37ead3f36aae1a02039a5677ada6dd4e6d4b58e7 Mon Sep 17 00:00:00 2001
From: Henry <henry.balen@chicon.org>
Date: Fri, 27 May 2022 10:49:25 -0400
Subject: [PATCH 09/40] fix availability conflict view

---
 ...27143522_fix_availability_conflict_view.rb | 54 +++++++++++++++++++
 db/structure.sql                              | 43 ++++++++-------
 2 files changed, 78 insertions(+), 19 deletions(-)
 create mode 100644 db/migrate/20220527143522_fix_availability_conflict_view.rb

diff --git a/db/migrate/20220527143522_fix_availability_conflict_view.rb b/db/migrate/20220527143522_fix_availability_conflict_view.rb
new file mode 100644
index 000000000..420b1a3dc
--- /dev/null
+++ b/db/migrate/20220527143522_fix_availability_conflict_view.rb
@@ -0,0 +1,54 @@
+class FixAvailabilityConflictView < ActiveRecord::Migration[6.1]
+  def up
+    execute <<-SQL
+      CREATE OR REPLACE VIEW availability_conflicts AS
+        select distinct
+          session_assignments.id as session_assignment_id,
+          people.id as person_id,
+          sessions.id as session_id
+        from
+        	session_assignments
+        inner join sessions on
+        	sessions.id = session_assignments.session_id
+        inner join people on
+        	people.id = session_assignments.person_id
+        inner join availabilities on
+        	availabilities.person_id = people.id
+        where
+          session_assignments.person_id = availabilities.person_id
+        and
+          session_assignments.session_assignment_role_type_id is not null
+        and
+          sessions.start_time is not null
+        and
+          sessions.room_id is not null
+        and
+          session_assignments.id not in
+          (
+          	select
+          		session_assignments.id
+          	from
+          		session_assignments
+          	inner join sessions on
+          		sessions.id = session_assignments.session_id
+          	inner join people on
+          		people.id = session_assignments.person_id
+          	inner join availabilities on
+          		availabilities.person_id = people.id
+          	where
+          		session_assignments.person_id = availabilities.person_id
+          		and session_assignments.session_assignment_role_type_id is not null
+          		and (
+          			sessions.start_time > availabilities.start_time
+          			and (sessions.start_time + (sessions.duration || ' minute')::INTERVAL) < availabilities.end_time
+          		)
+          );
+    SQL
+  end
+
+  def down
+    execute <<-SQL
+      DROP VIEW IF EXISTS availability_conflicts;
+    SQL
+  end
+end
diff --git a/db/structure.sql b/db/structure.sql
index 06cdf0290..c2067f759 100644
--- a/db/structure.sql
+++ b/db/structure.sql
@@ -548,21 +548,6 @@ END) STORED,
 );
 
 
---
--- Name: session_assignment_role_type; Type: TABLE; Schema: public; Owner: -
---
-
-CREATE TABLE public.session_assignment_role_type (
-    id uuid DEFAULT public.gen_random_uuid() NOT NULL,
-    lock_version integer DEFAULT 0,
-    created_at timestamp without time zone,
-    updated_at timestamp without time zone,
-    name character varying(100) NOT NULL,
-    role_type public.assignment_role_enum,
-    default_visibility public.visibility_enum DEFAULT 'public'::public.visibility_enum
-);
-
-
 --
 -- Name: session_assignments; Type: TABLE; Schema: public; Owner: -
 --
@@ -628,12 +613,16 @@ CREATE VIEW public.availability_conflicts AS
  SELECT DISTINCT session_assignments.id AS session_assignment_id,
     people.id AS person_id,
     sessions.id AS session_id
-   FROM ((((public.session_assignments
+   FROM (((public.session_assignments
      JOIN public.sessions ON ((sessions.id = session_assignments.session_id)))
      JOIN public.people ON ((people.id = session_assignments.person_id)))
      JOIN public.availabilities ON ((availabilities.person_id = people.id)))
-     JOIN public.session_assignment_role_type ON ((session_assignment_role_type.id = session_assignments.session_assignment_role_type_id)))
-  WHERE (((sessions.start_time < availabilities.start_time) OR (sessions.start_time > availabilities.end_time)) AND (session_assignments.person_id = availabilities.person_id) AND (session_assignments.session_assignment_role_type_id IS NOT NULL) AND ((session_assignment_role_type.name)::text <> 'Reserve'::text));
+  WHERE ((session_assignments.person_id = availabilities.person_id) AND (session_assignments.session_assignment_role_type_id IS NOT NULL) AND (sessions.start_time IS NOT NULL) AND (sessions.room_id IS NOT NULL) AND (NOT (session_assignments.id IN ( SELECT session_assignments_1.id
+           FROM (((public.session_assignments session_assignments_1
+             JOIN public.sessions sessions_1 ON ((sessions_1.id = session_assignments_1.session_id)))
+             JOIN public.people people_1 ON ((people_1.id = session_assignments_1.person_id)))
+             JOIN public.availabilities availabilities_1 ON ((availabilities_1.person_id = people_1.id)))
+          WHERE ((session_assignments_1.person_id = availabilities_1.person_id) AND (session_assignments_1.session_assignment_role_type_id IS NOT NULL) AND ((sessions_1.start_time > availabilities_1.start_time) AND ((sessions_1.start_time + ((sessions_1.duration || ' minute'::text))::interval) < availabilities_1.end_time)))))));
 
 
 --
@@ -1123,6 +1112,21 @@ CREATE TABLE public.session_areas (
 );
 
 
+--
+-- Name: session_assignment_role_type; Type: TABLE; Schema: public; Owner: -
+--
+
+CREATE TABLE public.session_assignment_role_type (
+    id uuid DEFAULT public.gen_random_uuid() NOT NULL,
+    lock_version integer DEFAULT 0,
+    created_at timestamp without time zone,
+    updated_at timestamp without time zone,
+    name character varying(100) NOT NULL,
+    role_type public.assignment_role_enum,
+    default_visibility public.visibility_enum DEFAULT 'public'::public.visibility_enum
+);
+
+
 --
 -- Name: session_limits; Type: TABLE; Schema: public; Owner: -
 --
@@ -2601,6 +2605,7 @@ INSERT INTO "schema_migrations" (version) VALUES
 ('20220507210839'),
 ('20220510015131'),
 ('20220512004401'),
-('20220524195624');
+('20220524195624'),
+('20220527143522');
 
 

From a5bf1db2b6396b7327c2fd608a47784816db1460 Mon Sep 17 00:00:00 2001
From: Henry <henry.balen@chicon.org>
Date: Fri, 27 May 2022 10:50:33 -0400
Subject: [PATCH 10/40] WIP

---
 .../conflicts/session_conflicts_controller.rb       |  3 ++-
 app/models/conflicts/availability_conflict.rb       |  2 --
 .../conflicts/session_conflict_serializer.rb        | 13 ++++++++++++-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/app/controllers/conflicts/session_conflicts_controller.rb b/app/controllers/conflicts/session_conflicts_controller.rb
index 38bb1f10b..59b833af2 100644
--- a/app/controllers/conflicts/session_conflicts_controller.rb
+++ b/app/controllers/conflicts/session_conflicts_controller.rb
@@ -21,7 +21,8 @@ def index
       include: [
         :availability_conflicts,
         :'availability_conflicts.person',
-        :'availability_conflicts.session_assignment'
+        :'availability_conflicts.session_assignment',
+        :room
       ],
       # include: filtered_serializer_includes(fields: fields), # need to adjust based omn field
       params: {
diff --git a/app/models/conflicts/availability_conflict.rb b/app/models/conflicts/availability_conflict.rb
index 191fded01..7ace1d26a 100644
--- a/app/models/conflicts/availability_conflict.rb
+++ b/app/models/conflicts/availability_conflict.rb
@@ -6,5 +6,3 @@ class Conflicts::AvailabilityConflict < ApplicationRecord
   belongs_to :person
   belongs_to :session
 end
-
-# TODO: add conflict check to assignment role type - i.e. leave out reserve
diff --git a/app/serializers/conflicts/session_conflict_serializer.rb b/app/serializers/conflicts/session_conflict_serializer.rb
index 3b298c878..aaed87e8b 100644
--- a/app/serializers/conflicts/session_conflict_serializer.rb
+++ b/app/serializers/conflicts/session_conflict_serializer.rb
@@ -1,7 +1,18 @@
 class Conflicts::SessionConflictSerializer
   include JSONAPI::Serializer
 
-  attribute :id, :title
+  attribute :id, :title, :start_time
+
+  has_one :room, serializer: ::RoomSerializer,
+          if: Proc.new { |record| record.room },
+          links: {
+            self: -> (object, params) {
+              "#{params[:domain]}/session/#{object.id}"
+            },
+            related: -> (object, params) {
+              "#{params[:domain]}/room/#{object.room.id}"
+            }
+          }
 
   has_many :availability_conflicts, serializer: Conflicts::AvailabilityConflictSerializer do |record|
     # we need to do this to get the serializer to handle the composite id properly...

From 61fed6aa359919f77a0ada5f22efb1ad4c6c8444 Mon Sep 17 00:00:00 2001
From: Henry <henry.balen@chicon.org>
Date: Fri, 27 May 2022 11:45:42 -0400
Subject: [PATCH 11/40] select and back fixes

---
 app/javascript/conflicts/availability.vue   | 9 +++++++--
 app/javascript/people/person_tabs.vue       | 2 +-
 app/javascript/schedule/schedule_screen.vue | 4 ++++
 app/javascript/sessions/session_tabs.vue    | 5 +----
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/app/javascript/conflicts/availability.vue b/app/javascript/conflicts/availability.vue
index d14c10cda..86b17498b 100644
--- a/app/javascript/conflicts/availability.vue
+++ b/app/javascript/conflicts/availability.vue
@@ -6,6 +6,10 @@
         v-for="conflict in sortedCollection" :key="conflict.id"
       >
         <strong>{{conflict.title}}</strong>
+        <div>
+          {{conflict.room.name}},
+          {{ formatLocaleDate(conflict.start_time )}}
+        </div>
         <div><em>Outside the availability for:</em></div>
         <div v-for="availability in conflict.availability_conflicts" :key="availability.id">
           {{availability.person.published_name}}
@@ -26,13 +30,14 @@
 <script>
 import modelMixin from '../store/model.mixin';
 import tableMixin from '../store/table.mixin';
-// import { availabilityConflictModel as model } from '@/store/availability_conflict.store'
+import dateTimeMixin from '../components/date_time.mixin'
 
 export default {
   name: "Availability",
   mixins: [
     modelMixin,
-    tableMixin
+    tableMixin,
+    dateTimeMixin
   ],
   props: {
   },
diff --git a/app/javascript/people/person_tabs.vue b/app/javascript/people/person_tabs.vue
index 8957ad0e4..99056a0f6 100644
--- a/app/javascript/people/person_tabs.vue
+++ b/app/javascript/people/person_tabs.vue
@@ -125,7 +125,7 @@ export default {
       this.person = arg
     },
     back() {
-      this.$router.push('/people');
+      history.back()
     },
     handleTabActivation(newTab, oldTab, bvEvent) {
       let path = '';
diff --git a/app/javascript/schedule/schedule_screen.vue b/app/javascript/schedule/schedule_screen.vue
index 59ced8bd1..7e5d8c487 100644
--- a/app/javascript/schedule/schedule_screen.vue
+++ b/app/javascript/schedule/schedule_screen.vue
@@ -12,7 +12,9 @@
         </schedulable-sessions>
         <availability
           :model="sessionConflictModel"
+          :timezone="timezone"
           style="flex: 1 0 auto"
+          ref="conflict-reporting"
         ></availability>
       </div>
       <div class="col-9">
@@ -144,6 +146,8 @@ export default {
     },
     onScheduleChanged: function() {
       this.$refs["schedulable-sessions"].fetchPaged(false)
+      // update the conflicts
+      this.$refs["conflict-reporting"].fetchPaged()
     },
     init: function() {
       this.selectedRooms = this.rooms.map((r) => r.id)
diff --git a/app/javascript/sessions/session_tabs.vue b/app/javascript/sessions/session_tabs.vue
index 51c042014..a8567b9c5 100644
--- a/app/javascript/sessions/session_tabs.vue
+++ b/app/javascript/sessions/session_tabs.vue
@@ -93,10 +93,7 @@ export default {
       this.session = arg
     },
     back() {
-      this.$router.push('/sessions');
-    },
-    log(thing) {
-      console.log(thing)
+      history.back()
     },
     handleTabActivation(newTab, oldTab, bvEvent) {
       // console.debug("****** tab action", newTab, oldTab, bvEvent)

From 3c61da9804d716a7bd00757192de10c87f159091 Mon Sep 17 00:00:00 2001
From: Henry <henry.balen@chicon.org>
Date: Fri, 27 May 2022 12:47:19 -0400
Subject: [PATCH 12/40] hover, select colour, conflict indication

---
 app/javascript/schedule/schedule_day.vue | 72 ++++++++++++++++--------
 app/serializers/session_serializer.rb    |  4 ++
 2 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/app/javascript/schedule/schedule_day.vue b/app/javascript/schedule/schedule_day.vue
index a03862e70..ad4f38beb 100644
--- a/app/javascript/schedule/schedule_day.vue
+++ b/app/javascript/schedule/schedule_day.vue
@@ -17,26 +17,29 @@
     ref="dayRoomGrid"
     :events="events"
     @event-drop="onEventDrop"
-    @event-mouse-enter="onEventEnter"
-    @event-mouse-leave="onEventLeave"
     :on-event-click="onEventClick"
   >
-    <!-- TODO: change colour or something if selected ... class? -->
     <template v-slot:title="{ title, view }">
       {{ formatDate(view.selectedDate, { weekday: 'long' }) }},
       {{ formatDate(view.selectedDate, { day: 'numeric', month: 'short' }) }}
     </template>
     <template v-slot:event="{ event, view }">
-      <div class="d-flex flex-column">
-        <div class="d-flex flex-row p-1 justify-content-between">
-          <small class="event-time" v-if="event.actual_start && event.actual_end">
-            {{ formatDatetime(event.actual_start) }} - {{ formatDatetime(event.actual_end) }}
+      <div
+        class="d-flex flex-column"
+        style="height: 100%;"
+        v-bind:class="{ 'selected-event': (selected && (selected.id == event.id)), 'event-with-conflicts': (event.has_conflicts && !(selected && (selected.id == event.id))) }"
+      >
+        <div v-b-popover.hover="formatDatetime(event.actual_start) + ' - ' + formatDatetime(event.actual_end)" :title="event.title" >
+          <div class="d-flex flex-row p-1 justify-content-between">
+            <small class="event-time" v-if="event.actual_start && event.actual_end">
+              {{ formatDatetime(event.actual_start) }} - {{ formatDatetime(event.actual_end) }}
+            </small>
+            <b-icon-x @click="onDelete(event)"></b-icon-x>
+          </div>
+          <small>
+            {{event.title}}
           </small>
-          <b-icon-x @click="onDelete(event)"></b-icon-x>
         </div>
-        <small>
-          {{event.title}}
-        </small>
       </div>
     </template>
   </vue-cal>
@@ -101,16 +104,28 @@ export default {
         let start_time = DateTime.fromISO(session.start_time).setZone(this.timezone)
         let end_time = DateTime.fromISO(session.end_time).setZone(this.timezone)
         // check it is for the right day
-        if ((start_time.toFormat('yyyy-MM-dd') == this.selectedDate) || (end_time.toFormat('yyyy-MM-dd') == this.selectedDate)) {
+        if (
+          ((start_time.toFormat('yyyy-MM-dd') == this.selectedDate) || (end_time.toFormat('yyyy-MM-dd') == this.selectedDate))
+          ||
+          ((start_time.startOf('day') < DateTime.fromISO(this.selectedDate).startOf('day')) && (end_time.startOf('day') > DateTime.fromISO(this.selectedDate).startOf('day')))
+        ) {
           // We need to fudge the end or start time, otherwise the session is no draggable if either is
           // outside the limits for the day So we aslo keep the display start and end for the UI...
           let display_end_time = end_time
           let display_start_time = start_time
           if (end_time.toFormat('yyyy-MM-dd') != this.selectedDate) {
-            display_end_time = start_time.endOf('day')
+            if (end_time.startOf('day') > DateTime.fromISO(this.selectedDate).startOf('day')) {
+              display_end_time = DateTime.fromISO(this.selectedDate).endOf('day')
+            } else {
+              display_end_time = start_time.endOf('day')
+            }
           }
           if (start_time.toFormat('yyyy-MM-dd') != this.selectedDate) {
-            display_start_time = end_time.startOf('day')
+            if (start_time.startOf('day') < DateTime.fromISO(this.selectedDate).startOf('day')) {
+              display_start_time = DateTime.fromISO(this.selectedDate).startOf('day')
+            } else {
+              display_start_time = end_time.startOf('day')
+            }
           }
           let new_event = {
             start: display_start_time.toFormat('yyyy-MM-dd HH:mm'),
@@ -120,7 +135,8 @@ export default {
             id: session.id,
             duration_mins: session.duration_mins,
             actual_start: start_time,
-            actual_end: end_time
+            actual_end: end_time,
+            has_conflicts: session.has_conflicts
           }
           res.push(new_event)
         }
@@ -151,15 +167,6 @@ export default {
       e.stopPropagation()
       this.select(event.id)
     },
-    // Enter and leave to
-    onEventEnter(e) {
-      // console.debug("******* SESSION Entered", e)
-      // e.stopPropagation()
-    },
-    onEventLeave(e) {
-      // console.debug("******* SESSION Leave", e)
-      // e.stopPropagation()
-    },
     onEventDrop ({ event, originalEvent, external }) {
       this.updateSession(event.id, event.start, event.split)
     },
@@ -179,6 +186,9 @@ export default {
         }
       )
     }
+  },
+  mounted() {
+    this.unselect();
   }
 }
 </script>
@@ -186,6 +196,20 @@ export default {
 <style lang="scss">
 @import '../stylesheets/style.scss';
 
+.selected-event {
+  background-color: $color-secondary-2-2;
+}
+
+.event-with-conflicts {
+  background: repeating-linear-gradient(
+    45deg,
+    $color-secondary-2-1,
+    $color-secondary-2-1 10px,
+    $color-complement-1 10px,
+    $color-complement-1 20px
+  )
+}
+
 .vuecal {
   height: unset;
 }
diff --git a/app/serializers/session_serializer.rb b/app/serializers/session_serializer.rb
index 0a6420c94..4f91bea65 100644
--- a/app/serializers/session_serializer.rb
+++ b/app/serializers/session_serializer.rb
@@ -34,6 +34,10 @@ class SessionSerializer
     session.start_time ? session.start_time + session.duration.minutes : nil
   end
 
+  attribute :has_conflicts do |session|
+    session.availability_conflicts.count > 0
+  end
+
   has_many :session_areas, serializer: SessionAreaSerializer,
           links: {
             self: -> (object, params) {

From 60959b7794060badd810dc2c37a1dbb75228893b Mon Sep 17 00:00:00 2001
From: Henry <henry.balen@chicon.org>
Date: Sat, 28 May 2022 10:04:09 -0400
Subject: [PATCH 13/40] fix display sync issues

---
 app/javascript/schedule/schedule_day.vue | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/app/javascript/schedule/schedule_day.vue b/app/javascript/schedule/schedule_day.vue
index ad4f38beb..57706d40f 100644
--- a/app/javascript/schedule/schedule_day.vue
+++ b/app/javascript/schedule/schedule_day.vue
@@ -29,12 +29,12 @@
         style="height: 100%;"
         v-bind:class="{ 'selected-event': (selected && (selected.id == event.id)), 'event-with-conflicts': (event.has_conflicts && !(selected && (selected.id == event.id))) }"
       >
-        <div v-b-popover.hover="formatDatetime(event.actual_start) + ' - ' + formatDatetime(event.actual_end)" :title="event.title" >
+        <div v-b-popover.hover="hoverText(event)" :title="event.title" >
           <div class="d-flex flex-row p-1 justify-content-between">
             <small class="event-time" v-if="event.actual_start && event.actual_end">
               {{ formatDatetime(event.actual_start) }} - {{ formatDatetime(event.actual_end) }}
             </small>
-            <b-icon-x @click="onDelete(event)"></b-icon-x>
+            <b-icon-x @click="onDelete($event, event)"></b-icon-x>
           </div>
           <small>
             {{event.title}}
@@ -163,14 +163,25 @@ export default {
     },
   },
   methods: {
+    hoverText(ev) {
+      if (ev.actual_start && ev.actual_end) {
+        return this.formatDatetime(ev.actual_start) + ' - ' + this.formatDatetime(ev.actual_end)
+      } else {
+        return ''
+      }
+    },
     onEventClick(event, e) {
       e.stopPropagation()
-      this.select(event.id)
+      if (event.split) {
+        this.select(event.id)
+      }
     },
     onEventDrop ({ event, originalEvent, external }) {
       this.updateSession(event.id, event.start, event.split)
     },
-    onDelete(ev) {
+    onDelete(event, ev) {
+      event.stopPropagation()
+      this.unselect()
       this.updateSession(ev.id, null, null)
     },
     scrollBarElement: function() {

From d7365996e6b7d7d0c2e4ba31003a6437e667aef3 Mon Sep 17 00:00:00 2001
From: Henry <henry.balen@chicon.org>
Date: Sat, 28 May 2022 10:56:56 -0400
Subject: [PATCH 14/40] Fix edge cases for availability

---
 ...0220528145537_fix_avail_view_edge_cases.rb | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 db/migrate/20220528145537_fix_avail_view_edge_cases.rb

diff --git a/db/migrate/20220528145537_fix_avail_view_edge_cases.rb b/db/migrate/20220528145537_fix_avail_view_edge_cases.rb
new file mode 100644
index 000000000..4f77bc52c
--- /dev/null
+++ b/db/migrate/20220528145537_fix_avail_view_edge_cases.rb
@@ -0,0 +1,54 @@
+class FixAvailViewEdgeCases < ActiveRecord::Migration[6.1]
+  def up
+    execute <<-SQL
+      CREATE OR REPLACE VIEW availability_conflicts AS
+        select distinct
+          session_assignments.id as session_assignment_id,
+          people.id as person_id,
+          sessions.id as session_id
+        from
+        	session_assignments
+        inner join sessions on
+        	sessions.id = session_assignments.session_id
+        inner join people on
+        	people.id = session_assignments.person_id
+        inner join availabilities on
+        	availabilities.person_id = people.id
+        where
+          session_assignments.person_id = availabilities.person_id
+        and
+          session_assignments.session_assignment_role_type_id is not null
+        and
+          sessions.start_time is not null
+        and
+          sessions.room_id is not null
+        and
+          session_assignments.id not in
+          (
+          	select
+          		session_assignments.id
+          	from
+          		session_assignments
+          	inner join sessions on
+          		sessions.id = session_assignments.session_id
+          	inner join people on
+          		people.id = session_assignments.person_id
+          	inner join availabilities on
+          		availabilities.person_id = people.id
+          	where
+          		session_assignments.person_id = availabilities.person_id
+          		and session_assignments.session_assignment_role_type_id is not null
+          		and (
+          			sessions.start_time >= availabilities.start_time
+          			and (sessions.start_time + (sessions.duration || ' minute')::INTERVAL) <= availabilities.end_time
+          		)
+          );
+    SQL
+  end
+
+  def down
+    execute <<-SQL
+      DROP VIEW IF EXISTS availability_conflicts;
+    SQL
+  end
+end

From b2668a1090c387489ee4093439c4a084bc041b69 Mon Sep 17 00:00:00 2001
From: Henry <henry.balen@chicon.org>
Date: Sat, 28 May 2022 11:14:24 -0400
Subject: [PATCH 15/40] fix check pending in build

---
 db/structure.sql | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/db/structure.sql b/db/structure.sql
index c2067f759..f77c9cd5f 100644
--- a/db/structure.sql
+++ b/db/structure.sql
@@ -622,7 +622,7 @@ CREATE VIEW public.availability_conflicts AS
              JOIN public.sessions sessions_1 ON ((sessions_1.id = session_assignments_1.session_id)))
              JOIN public.people people_1 ON ((people_1.id = session_assignments_1.person_id)))
              JOIN public.availabilities availabilities_1 ON ((availabilities_1.person_id = people_1.id)))
-          WHERE ((session_assignments_1.person_id = availabilities_1.person_id) AND (session_assignments_1.session_assignment_role_type_id IS NOT NULL) AND ((sessions_1.start_time > availabilities_1.start_time) AND ((sessions_1.start_time + ((sessions_1.duration || ' minute'::text))::interval) < availabilities_1.end_time)))))));
+          WHERE ((session_assignments_1.person_id = availabilities_1.person_id) AND (session_assignments_1.session_assignment_role_type_id IS NOT NULL) AND ((sessions_1.start_time >= availabilities_1.start_time) AND ((sessions_1.start_time + ((sessions_1.duration || ' minute'::text))::interval) <= availabilities_1.end_time)))))));
 
 
 --
@@ -2606,6 +2606,7 @@ INSERT INTO "schema_migrations" (version) VALUES
 ('20220510015131'),
 ('20220512004401'),
 ('20220524195624'),
-('20220527143522');
+('20220527143522'),
+('20220528145537');
 
 

From bb29d776e3d4552159083f3510f5525c5ee2c5e9 Mon Sep 17 00:00:00 2001
From: Henry <henry.balen@chicon.org>
Date: Sat, 28 May 2022 14:35:56 -0400
Subject: [PATCH 16/40] fix for eager loading issue on survey reponse query

---
 app/controllers/survey/submissions_controller.rb | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/app/controllers/survey/submissions_controller.rb b/app/controllers/survey/submissions_controller.rb
index e2b34a2c3..133dc19b8 100644
--- a/app/controllers/survey/submissions_controller.rb
+++ b/app/controllers/survey/submissions_controller.rb
@@ -125,19 +125,13 @@ def serializer_includes
 
   def includes
     [
-      :person,
-      responses: [
-        :question
-      ]
+      :person
     ]
   end
 
   def references
     [
-      :person,
-      responses: [
-        :question
-      ]
+      :person
     ]
   end
 

From 90e706114f14102dcc83ef2e45590e30bb7ea3d7 Mon Sep 17 00:00:00 2001
From: Henry <henry.balen@chicon.org>
Date: Sat, 28 May 2022 16:07:57 -0400
Subject: [PATCH 17/40] fix policy scope for survey

---
 app/controllers/surveys_controller.rb | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/controllers/surveys_controller.rb b/app/controllers/surveys_controller.rb
index 0702fb885..83592ed0d 100644
--- a/app/controllers/surveys_controller.rb
+++ b/app/controllers/surveys_controller.rb
@@ -1,6 +1,7 @@
 class SurveysController < ResourceController
   SERIALIZER_CLASS = 'SurveySerializer'.freeze
   POLICY_CLASS = 'SurveysPolicy'.freeze
+  POLICY_SCOPE_CLASS = 'SurveysPolicy::Scope'.freeze
   DEFAULT_SORTBY = 'surveys.updated_at'.freeze
   DEFAULT_ORDER = 'desc'.freeze
 

From 8ba81aa7ac3643c9540495e8041def3b141aa0c6 Mon Sep 17 00:00:00 2001
From: Henry <henry.balen@chicon.org>
Date: Sat, 28 May 2022 16:17:15 -0400
Subject: [PATCH 18/40] prevent cache of json resources - as these are supposed
 to be db driven and can change (a lot)

---
 app/controllers/concerns/resource_methods.rb | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/controllers/concerns/resource_methods.rb b/app/controllers/concerns/resource_methods.rb
index a558b5253..80889a5b8 100644
--- a/app/controllers/concerns/resource_methods.rb
+++ b/app/controllers/concerns/resource_methods.rb
@@ -8,6 +8,8 @@ module ResourceMethods
   extend ActiveSupport::Concern
   include JSONAPI::Deserialization
 
+  before_action :prevent_cache
+
   def index
     authorize model_class, policy_class: policy_class
 

From 0406676f92298c9df50901d8770e58d12216a360 Mon Sep 17 00:00:00 2001
From: Henry <henry.balen@chicon.org>
Date: Sat, 28 May 2022 16:19:03 -0400
Subject: [PATCH 19/40] put cache prevent in correct place

---
 app/controllers/concerns/resource_methods.rb | 2 --
 app/controllers/resource_controller.rb       | 2 ++
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/controllers/concerns/resource_methods.rb b/app/controllers/concerns/resource_methods.rb
index 80889a5b8..a558b5253 100644
--- a/app/controllers/concerns/resource_methods.rb
+++ b/app/controllers/concerns/resource_methods.rb
@@ -8,8 +8,6 @@ module ResourceMethods
   extend ActiveSupport::Concern
   include JSONAPI::Deserialization
 
-  before_action :prevent_cache
-
   def index
     authorize model_class, policy_class: policy_class
 
diff --git a/app/controllers/resource_controller.rb b/app/controllers/resource_controller.rb
index b3c15d3d0..e476f1786 100644
--- a/app/controllers/resource_controller.rb
+++ b/app/controllers/resource_controller.rb
@@ -3,5 +3,7 @@ class ResourceController < ApplicationController
 
   respond_to :json
 
+  before_action :prevent_cache
+
   include ResourceMethods
 end

From 47f74d46d12e58672a41e8a57520f0d43e96efbc Mon Sep 17 00:00:00 2001
From: Gail Terman <gterman@gmail.com>
Date: Sat, 28 May 2022 22:21:32 -0400
Subject: [PATCH 20/40] PLAN-275 room picker local persistance

- If you refresh the page, you'll have to pick them again
- Bonus: room picker uses the store for data
---
 app/javascript/schedule/room_selector.vue   | 42 ++++++++++++---------
 app/javascript/schedule/schedule_screen.vue | 39 ++++++++-----------
 app/javascript/store/model.store.js         |  6 ++-
 app/javascript/store/room.store.js          | 12 ++++++
 4 files changed, 56 insertions(+), 43 deletions(-)

diff --git a/app/javascript/schedule/room_selector.vue b/app/javascript/schedule/room_selector.vue
index 0d2df2cc6..2354b7290 100644
--- a/app/javascript/schedule/room_selector.vue
+++ b/app/javascript/schedule/room_selector.vue
@@ -1,7 +1,7 @@
 <template> 
   <div class="d-flex justify-content-end">
     <icon-button class="mt-1 mr-3" icon="gear" v-b-modal.room-selector-modal></icon-button>
-    <plano-modal id="room-selector-modal" @ok="ok">
+    <plano-modal id="room-selector-modal" @ok="ok" @show="show">
       <template #modal-title>Displayed Rooms</template>
       <div class="room-list">
         <b-form-checkbox
@@ -10,7 +10,7 @@
           ref="select-all"
         >Select All</b-form-checkbox>
         <hr />
-        <div v-for="room in rooms" :key="room.id">
+        <div v-for="room in collection" :key="room.id">
           <b-form-checkbox
             v-model="selectedRooms"
             :value="room.id"
@@ -25,46 +25,52 @@
 <script>
 import IconButton from '@/components/icon_button.vue';
 import PlanoModal from '@/components/plano_modal.vue';
+import { modelMixinNoProp } from '@/store/model.mixin';
+import { mapMutations, mapState } from 'vuex';
+import { SET_ROOMS_FOR_SCHEDULING } from '@/store/room.store';
+
 
 
 export default {
   name: "RoomSelector",
-  props: {
-    rooms: {
-      type: Array
-    }
-  },
+  mixins: [
+    modelMixinNoProp
+  ],
   components: {
     PlanoModal,
     IconButton
   },
   data: () =>  ({
     selectAll: true,
-    selectedRooms: []
+    model: 'room',
+    selectedRooms: [],
   }),
+  computed: {
+    ...mapState(['roomsForScheduling']),
+  },
   methods: {
+    ...mapMutations({
+      setRoomsForScheduling: SET_ROOMS_FOR_SCHEDULING
+    }),
     onSelectAll(v) {
       if (v) {
-        this.selectedRooms = this.rooms.map((r) => r.id)
+        this.selectedRooms = this.collection.map((r) => r.id)
       } else {
         this.selectedRooms = []
       }
 
-      // this.$emit('change', this.selectedRooms)
     },
     updateSelectRooms() {
-      this.$refs['select-all'].checked = this.selectedRooms.length == this.rooms.length
-      // this.$emit('change', this.selectedRooms)
+      this.selectAll = this.selectedRooms?.length === this.collection?.length
     },
     ok() {
-      this.$emit('change', this.selectedRooms)
+      this.setRoomsForScheduling(this.selectedRooms);
+    },
+    show() {
+      this.selectedRooms = this.roomsForScheduling;
+      this.updateSelectRooms();
     }
   },
-  mounted() {
-    if (this.rooms) {
-      this.selectedRooms = this.rooms.map((r) => r.id)
-    }
-  }
 }
 </script>
 
diff --git a/app/javascript/schedule/schedule_screen.vue b/app/javascript/schedule/schedule_screen.vue
index 7e5d8c487..f320e61d4 100644
--- a/app/javascript/schedule/schedule_screen.vue
+++ b/app/javascript/schedule/schedule_screen.vue
@@ -18,11 +18,7 @@
         ></availability>
       </div>
       <div class="col-9">
-        <room-selector
-          v-if="rooms"
-          :rooms="rooms"
-          @change="onRoomChange"
-        ></room-selector>
+        <room-selector></room-selector>
         <div class="scrollable minus31">
           <schedule-calendar
             :rooms="rooms"
@@ -49,13 +45,15 @@ import SchedulableSessions from './schedulable_sessions'
 import ScheduleCalendar from './schedule_calendar'
 import modelUtilsMixin from "@/store/model_utils.mixin";
 import settingsMixin from "@/store/settings.mixin";
-import { roomModel } from '../store/room.store.js';
+import { roomModel, SET_ROOMS_FOR_SCHEDULING } from '../store/room.store.js';
 import { sessionModel } from '@/store/session.store'
 import { sessionConflictModel } from '@/store/session_conflict.store'
 import SessionSidebar from '../sessions/session_sidebar.vue';
 import Availability from '../conflicts/availability.vue'
 
 import { DateTime } from "luxon";
+import { mapActions, mapState, mapGetters } from 'vuex';
+import { FETCH } from '@/store/model.store';
 
 export default {
   name: "ScheduleScreen",
@@ -71,12 +69,16 @@ export default {
     settingsMixin
   ],
   data: () =>  ({
-    rooms: null,
     sessionModel: sessionModel,
     sessionConflictModel: sessionConflictModel,
-    selectedRooms: []
   }),
   computed: {
+    ...mapState({
+      selectedRooms: 'roomsForScheduling'
+    }),
+    ...mapGetters({
+      rooms: 'fetchedRooms'
+    }),
     start_time() {
       if (this.currentSettings && this.currentSettings.configs) {
         let st = this.configByName('convention_start_time')
@@ -141,29 +143,20 @@ export default {
     }
   },
   methods: {
-    onRoomChange: function(rooms) {
-      this.selectedRooms = rooms
-    },
+    ...mapActions({
+      fetch: FETCH
+    }),
     onScheduleChanged: function() {
       this.$refs["schedulable-sessions"].fetchPaged(false)
       // update the conflicts
       this.$refs["conflict-reporting"].fetchPaged()
     },
-    init: function() {
-      this.selectedRooms = this.rooms.map((r) => r.id)
-    },
   },
   mounted() {
-    this.fetch_models(
-      roomModel,
-      {
-        perPage: 1000
+    this.fetch({model: roomModel}).then((rooms) => {
+      if (!this.selectedRooms.length) {
+        this.$store.commit(SET_ROOMS_FOR_SCHEDULING, Object.values(rooms).map(r => r.id).filter(r => r))
       }
-    ).then(data => {
-      this.rooms = Object.values(data).filter(
-        obj => (typeof obj.json === 'undefined')
-      )
-      this.init()
     })
   }
 }
diff --git a/app/javascript/store/model.store.js b/app/javascript/store/model.store.js
index 91c23aef5..7215c7bbd 100644
--- a/app/javascript/store/model.store.js
+++ b/app/javascript/store/model.store.js
@@ -139,7 +139,8 @@ export const store = new Vuex.Store({
     ...searchStateStore.state,
     ...availabilityStore.state,
     ...personExclusionStore.state,
-    ...emailAddressStore.state
+    ...emailAddressStore.state,
+    ...roomStore.state,
     // ...mailingStore.state
   },
   getters: {
@@ -194,7 +195,8 @@ export const store = new Vuex.Store({
     ...personSessionStore.mutations,
     ...settingsStore.mutations,
     ...surveyStore.mutations,
-    ...searchStateStore.mutations
+    ...searchStateStore.mutations,
+    ...roomStore.mutations,
   },
   actions: {
     /**
diff --git a/app/javascript/store/room.store.js b/app/javascript/store/room.store.js
index 104aa1993..aa03dcb18 100644
--- a/app/javascript/store/room.store.js
+++ b/app/javascript/store/room.store.js
@@ -1,6 +1,7 @@
 import { NEW } from './model.store';
 
 export const NEW_ROOM = 'NEW ROOM';
+export const SET_ROOMS_FOR_SCHEDULING = 'SET_ROOMS_FOR_SCHEDULING';
 
 export const roomModel = 'room';
 
@@ -14,9 +15,20 @@ export const roomStore = {
       return dispatch(NEW, {model: roomModel, selected: false, ...attributes})
     },
   },
+  state: {
+    roomsForScheduling: []
+  },
   selected: {
     [roomModel]: undefined
   },
   getters: {
+    fetchedRooms(state, getters) {
+      return Object.values(getters['jv/get']({_jv: { type: roomModel }}))
+    }
   },
+  mutations: {
+    [SET_ROOMS_FOR_SCHEDULING] (state, rooms) {
+      state.roomsForScheduling = rooms;
+    }
+  }
 }

From 2344d42a38cdcfc47189424181ee7c86d9e00f35 Mon Sep 17 00:00:00 2001
From: Gail Terman <gterman@gmail.com>
Date: Sat, 28 May 2022 22:49:57 -0400
Subject: [PATCH 21/40] PLAN-228 put user email in top nav

- had to adjust the placement of the buttons a bit, but i think it's still close enough
---
 app/javascript/navbar/top-navbar.vue | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/app/javascript/navbar/top-navbar.vue b/app/javascript/navbar/top-navbar.vue
index cd6cebb56..3019b8261 100644
--- a/app/javascript/navbar/top-navbar.vue
+++ b/app/javascript/navbar/top-navbar.vue
@@ -1,15 +1,18 @@
 <template>
   <div class="col-12 px-0">
-    <b-navbar toggleable="lg" type="light" class="align-items-baseline">
+    <b-navbar toggleable="lg" type="light" class="justify-content-between">
       <b-navbar-brand to="/">Planorama</b-navbar-brand>
-      <b-navbar-nav class="ml-auto">
-        <b-nav-form>
-          <help-link></help-link>
-          <a href="https://chicagoworldcon.github.io/planorama" target="_blank" class="btn btn-link text-light my-2 my-sm-0 mx-2">About</a>
-          <!-- TODO logout button -->
-          <b-button v-if="loggedIn" @click="logout" variant="primary">Logout</b-button>
-        </b-nav-form>
-      </b-navbar-nav>
+      <div class="d-flex flex-column h-100">
+        <div class="text-light mb-2">Logged in as: {{currentUser.primary_email.email}}</div>
+        <b-navbar-nav class="ml-auto">
+          <b-nav-form>
+            <help-link></help-link>
+            <a href="https://chicagoworldcon.github.io/planorama" target="_blank" class="btn btn-link text-light my-2 my-sm-0 mx-2">About</a>
+            <!-- TODO logout button -->
+            <b-button v-if="loggedIn" @click="logout" variant="primary">Logout</b-button>
+          </b-nav-form>
+        </b-navbar-nav>
+      </div>
     </b-navbar>
     <!-- TODO fix toaster -->
     <b-toaster id="planotoast" name="planotoast"></b-toaster>

From 503a79ec9b63af4d61b2b1aea68de51578a87e60 Mon Sep 17 00:00:00 2001
From: Gail Terman <gterman@gmail.com>
Date: Sun, 29 May 2022 10:21:27 -0400
Subject: [PATCH 22/40] PLAN-25 edit people modals

And a bunch of other things like a dl-person component.
---
 app/javascript/constants/strings.js           |  32 +-
 app/javascript/packs/application.js           |   6 +-
 .../profile/availability_and_interests.vue    |   4 +-
 app/javascript/profile/dl_person.vue          |  38 +++
 .../profile/dl_person_with_edit.vue           |  66 ++++
 .../profile/person_demographics.vue           |  24 +-
 app/javascript/profile/person_details.vue     | 287 ++++++++++--------
 app/javascript/profile/person_edit_modal.vue  |   4 +-
 8 files changed, 329 insertions(+), 132 deletions(-)
 create mode 100644 app/javascript/profile/dl_person.vue
 create mode 100644 app/javascript/profile/dl_person_with_edit.vue

diff --git a/app/javascript/constants/strings.js b/app/javascript/constants/strings.js
index 806f67ec7..1f2997b3a 100644
--- a/app/javascript/constants/strings.js
+++ b/app/javascript/constants/strings.js
@@ -203,5 +203,35 @@ module.exports = {
     TWITCH_ID_INVALID_MSG: "Twitch id is not in a valid format",
     YOUTUBE_ID_INVALID_MSG: "Youtube is not in a valid format",
     TIKTOK_ID_INVALID_MSG: "TikTok id is not in a valid format",
-    LINKEDIN_ID_INVALID_MSG: "LinkedIn id is not in a valid format"
+    LINKEDIN_ID_INVALID_MSG: "LinkedIn id is not in a valid format",
+    PROFILE_FIELD_LABELS: {
+        ethnicity: "Ethnicity",
+        gender: "Gender",
+        age_at_convention: "Age at time of event",
+        romantic_sexual_orientation: "Romantic and/or sexual orientation",
+        othered: "Experience with being \"othered\"",
+        indigenous: "Member of an Indigenous community",
+        black_diaspora: "Member of the global Black diaspora",
+        non_us_centric_perspectives: "Represent something other than a purely US-centric perspective",
+        demographic_categories: "Other demographic categories",
+        twitter: "Twitter",
+        facebook: "Facebook",
+        website: "Website",
+        instagram: "Instagram",
+        twitch: "Twitch",
+        youtube: "YouTube",
+        tiktok: "TikTok",
+        linkedin: "LinkedIn",
+        othersocialmedia: "Other",
+        do_not_assign_with: "Anyone that should not be assigned to be on a panel with participant",
+        is_local: "Local to the event",
+        moderation_experience: "Moderating Experience",
+        can_stream: "Permission to be included in a livestreamed program",
+        can_record: "Permission to be included in a recorded program",
+        can_stream_exceptions: "ANNA WORDS livestream excluded topics",
+        can_record_exceptions: "ANNA WORDS record excluded topics",
+        name: "Name",
+        pseudonym: "Pseudonym"
+    },
+    PERSON_SAVE_SUCCESS: "ANNA WORDS peron saved"
 }
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 7b9b43c7a..b822c0fa7 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -37,13 +37,11 @@ import { CustomIconsPlugin } from '../icons';
 import AsyncComputed from 'vue-async-computed';
 import CKEditor from 'ckeditor4-vue';
 import VuePluralize from 'vue-pluralize';
-/*
 Vue.config.errorHandler = (err, vm, info) => {
   console.error(err);
   window.alert("Whoops! We messed up! Click ok to reload the page.")
   window.location.reload();
 }
-*/
 
 Vue.use(BootstrapVue);
 Vue.use(BootstrapVueIcons);
@@ -57,7 +55,9 @@ Vue.component("v-select", vSelect);
 import "vue-select/dist/vue-select.css";
 
 Vue.filter('na_if_empty', function (value) {
-  if (!value) return 'N/A'
+  if (value === undefined || value === null) return 'N/A'
+  if (value === true) return "Yes"
+  if (value === false) return "No"
   if (value.trim().length == 0) return 'N/A'
   return value
 })
diff --git a/app/javascript/profile/availability_and_interests.vue b/app/javascript/profile/availability_and_interests.vue
index 7bd377fc8..6cb2aadd7 100644
--- a/app/javascript/profile/availability_and_interests.vue
+++ b/app/javascript/profile/availability_and_interests.vue
@@ -100,12 +100,12 @@ export default {
       required: true
     },
     start_time: {
-      type: DateTime,
+      //type: DateTime,
       // default: null
       required: true
     },
     end_time: {
-      type: DateTime,
+      //type: DateTime,
       required: true
     },
     timezone: {
diff --git a/app/javascript/profile/dl_person.vue b/app/javascript/profile/dl_person.vue
new file mode 100644
index 000000000..81833c246
--- /dev/null
+++ b/app/javascript/profile/dl_person.vue
@@ -0,0 +1,38 @@
+<template>
+  <dl>
+    <template v-for="(field, i) in fields">
+        <dt :key="'dt-' + i">
+          <slot :name="field + '-label'">
+            {{PROFILE_FIELD_LABELS[field]}}
+          </slot>
+        </dt>
+        <dd :key="'dd-' + i" class="ml-2">
+          <slot :name="field + '-val'" :slot-scope="{value: selected[field]}">
+            {{selected[field] | na_if_empty }}
+          </slot>
+        </dd>
+    </template>
+    <slot></slot>
+  </dl>
+</template>
+
+<script>
+import { modelMixinNoProp } from '@/store/model.mixin'
+import { personModel as model } from '@/store/person.store'
+import { PROFILE_FIELD_LABELS } from '@/constants/strings';
+export default {
+  name: "DlPerson",
+  props: {
+    fields: {
+      default: []
+    }
+  },
+  mixins: [
+    modelMixinNoProp
+  ],
+  data: () => ({
+    model,
+    PROFILE_FIELD_LABELS
+  }),
+}
+</script>
diff --git a/app/javascript/profile/dl_person_with_edit.vue b/app/javascript/profile/dl_person_with_edit.vue
new file mode 100644
index 000000000..3d4ae69c6
--- /dev/null
+++ b/app/javascript/profile/dl_person_with_edit.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <h5>{{title}} <edit-button v-b-modal="modalName"></edit-button></h5>
+    <slot name="dl" :slot-scope="{fields}">
+      <dl-person :fields="fields"></dl-person>
+    </slot>
+    <person-edit-modal :id="modalName" :person="selected" :data="modalData">
+      <template #modal-title>Edit {{title}} - {{selected.published_name}}</template>
+      <template #default="slotData">
+        <template v-for="field, i in fields">
+          <b-form-group :key="i" :label="PROFILE_FIELD_LABELS[field]">
+            <slot :name="field" :slot-scope="{field: slotData.fields[field]}">
+              <b-form-input type="text" v-model="slotData.fields[field]"></b-form-input>
+            </slot>
+          </b-form-group>
+        </template>
+      </template>
+    </person-edit-modal>
+  </div>
+</template>
+
+<script>
+import DlPerson from './dl_person.vue';
+import EditButton from '@/components/edit_button';
+import PersonEditModal from './person_edit_modal.vue';
+import { modelMixinNoProp } from '@/mixins';
+import { personModel as model } from '@/store/person.store';
+
+export default {
+  name: "DlPersonWithEdit",
+  props: {
+    fields: {
+      required: true,
+      type: Array
+    },
+    modalName: {
+      required: true,
+      type: String
+    },
+    title: {
+      required: true,
+      type: String
+    }
+  },
+  components: {
+    DlPerson,
+    EditButton,
+    PersonEditModal
+  },
+  mixins: [
+    modelMixinNoProp
+  ],
+  computed: {
+    modalData() {
+      return this.fields.reduce((p, c) => ({...p, [c]: null}), {})
+    }
+  },
+  data: () => ({
+    model
+  })
+}
+</script>
+
+<style>
+
+</style>
diff --git a/app/javascript/profile/person_demographics.vue b/app/javascript/profile/person_demographics.vue
index d24da7b3b..3334f7087 100644
--- a/app/javascript/profile/person_demographics.vue
+++ b/app/javascript/profile/person_demographics.vue
@@ -3,7 +3,8 @@
     <div class="d-flex flex-row mt-3">
       <div class="w-50 mr-2">
         <h5>Demographics <edit-button v-b-modal.person-demo-modal></edit-button></h5>
-        <dl>
+        <dl-person :fields="demoFields"></dl-person>
+        <!-- <dl>
           <dt>Ethnicity</dt>
           <dd class="ml-2">{{ selected.ethnicity | na_if_empty }}</dd>
           <dt>Gender</dt>
@@ -14,11 +15,12 @@
           <dd class="ml-2">
             {{ selected.romantic_sexual_orientation | na_if_empty }}
           </dd>
-        </dl>
+        </dl> -->
       </div>
       <div class="w-50">
         <h5>Community memberships <edit-button v-b-modal.person-community-modal></edit-button></h5>
-        <dl>
+        <dl-person :fields="communityFields"></dl-person>
+        <!-- <dl>
           <dt>Experience with being “othered”</dt>
           <dd class="ml-2">{{ selected.othered | na_if_empty }}</dd>
           <dt>Member of an Indigenous community</dt>
@@ -35,7 +37,7 @@
           <dd class="ml-2">
             {{ selected.demographic_categories | na_if_empty }}
           </dd>
-        </dl>
+        </dl> -->
       </div>
     </div>
     <person-edit-modal id="person-demo-modal" :person="selected" :data="demoData">
@@ -84,12 +86,14 @@ import { personModel as model } from "@/store/person.store";
 
 import PersonEditModal from "./person_edit_modal.vue";
 import EditButton from '@/components/edit_button';
+import DlPerson from './dl_person.vue';
 
 export default {
   name: "PersonDemographics",
   components: {
     PersonEditModal,
-    EditButton
+    EditButton,
+    DlPerson
   },
   data: () => ({
     model,
@@ -109,7 +113,15 @@ export default {
   }),
   mixins: [
     modelMixinNoProp
-  ]
+  ],
+  computed: {
+    demoFields() {
+      return Object.keys(this.demoData);
+    },
+    communityFields() {
+      return Object.keys(this.communityData);
+    }
+  }
 };
 </script>
 
diff --git a/app/javascript/profile/person_details.vue b/app/javascript/profile/person_details.vue
index 1375e9a49..a3e7865ea 100644
--- a/app/javascript/profile/person_details.vue
+++ b/app/javascript/profile/person_details.vue
@@ -1,51 +1,18 @@
 <template>
   <div class="d-flex" v-if="selected">
     <div class="d-flex flex-column w-50 p-2">
-      <b-form-group label="Name">
-        <b-form-input type="text" v-model="selected.name" @blur="saveSelected()"></b-form-input>
-      </b-form-group>
-      <b-form-group label="Pseudonym">
-        <b-form-input type="text" v-model="selected.pseudonym" @blur="saveSelected()"></b-form-input>
-      </b-form-group>
+      <dl-person :fields="['name', 'pseudonym']"></dl-person>
       <email-addresses-editor
         class="mb-4"
         v-model="selected"
         model='email_address'
         @input="$emit('input', selected)"
       ></email-addresses-editor>
-      <b-form-group label="Anyone that should not be assigned to be on a panel with participant">
-        <b-form-textarea v-model="selected.do_not_assign_with" @blur="saveSelected()"></b-form-textarea>
-      </b-form-group>
-      <b-form-group label="Permission to be included in a livestreamed program">
-          <b-form-radio-group
-            stacked
-            v-model="selected.can_stream"
-            @change="saveSelected()"
-          >
-            <b-form-radio :value="yesLabel.value">{{yesLabel.label}}</b-form-radio>
-            <b-form-radio :value="noLabel.value">{{noLabel.label}}</b-form-radio>
-            <b-form-radio :value="maybeLabel.value">{{maybeLabel.label}}</b-form-radio>
-          </b-form-radio-group>
-          <b-textarea v-model="selected.can_stream_exceptions" @blur="saveSelected()"></b-textarea>
-      </b-form-group>
-      <b-form-group label="Permission to be included in a recorded program">
-          <b-form-radio-group
-            stacked
-            v-model="selected.can_record"
-            @change="saveSelected()"
-          >
-            <b-form-radio :value="yesLabel.value">{{yesLabel.label}}</b-form-radio>
-            <b-form-radio :value="noLabel.value">{{noLabel.label}}</b-form-radio>
-            <b-form-radio :value="maybeLabel.value">{{maybeLabel.label}}</b-form-radio>
-          </b-form-radio-group>
-          <b-textarea v-model="selected.can_record_exceptions" @blur="saveSelected()"></b-textarea>
-      </b-form-group>
-      <b-form-group>
-      <b-form-checkbox switch v-model="selected.is_local" @change="saveSelected()">Local to the event</b-form-checkbox>
-      </b-form-group>
-      <b-form-group label="Moderating experience">
-        <b-form-textarea v-model="selected.moderation_experience" @blur="saveSelected()"></b-form-textarea>
-      </b-form-group>
+      <h5>Preferences <edit-button v-b-modal.person-misc-modal></edit-button></h5>
+      <dl-person :fields="miscFields">
+        <template #can_stream-val>{{can_stream_label}}</template>
+        <template #can_record-val>{{can_record_label}}</template>
+      </dl-person>
     </div>
     <div class="d-flex flex-column w-50 p-2">
       <div><b>I plan to attend the convention:</b></div>
@@ -82,85 +49,8 @@
       </b-form-checkbox> -->
       <h5>Bio <edit-button v-b-modal.person-bio-modal></edit-button></h5>
       <div class="ml-2" v-html="selected.bio"></div>
-      <b class="mt-3">Social Media</b>
-      <validated-social
-        :rules="{ regex: /^[a-z0-9_]{1,15}$/i }"
-        label="Twitter"
-        prepend="@"
-        v-model="selected.twitter"
-        @input="saveSelected()"
-        :disabled="disabled"
-        :message="TWITTER_ID_INVALID_MSG"
-      ></validated-social>
-      <validated-social
-        :rules="{ regex: /^[a-z\d.]{5,}$/i }"
-        label="Facebook"
-        prepend="facebook.com/"
-        v-model="selected.facebook"
-        @input="saveSelected()"
-        :disabled="disabled"
-        :message="FACEBOOK_ID_INVALID_MSG"
-      ></validated-social>
-      <validated-social
-        :rules="{ regex: /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-zA-Z0-9\/]+([\-\.]{1}[a-zA-Z0-9\/]+)*\.[a-zA-Z\/]{2,5}(:[0-9]{1,5})?(\/.*)?$/ }"
-        label="Website"
-        prepend="url"
-        v-model="selected.website"
-        @input="saveSelected()"
-        :disabled="disabled"
-        :message="WEBSITE_INVALID_MSG"
-      ></validated-social>
-      <validated-social
-        :rules="{ regex: /^[a-zA-Z0-9._]+$/ }"
-        label="Instagram"
-        prepend="instagram.com/"
-        v-model="selected.instagram"
-        @input="saveSelected()"
-        :disabled="disabled"
-        :message="INSTAGRAM_ID_INVALID_MSG"
-      ></validated-social>
-      <validated-social
-        :rules="{ regex: /^(#)?[a-zA-Z0-9][\w]{2,24}$/ }"
-        label="Twitch"
-        prepend="twitch.tv/"
-        v-model="selected.twitch"
-        @input="saveSelected()"
-        :disabled="disabled"
-        :message="TWITCH_ID_INVALID_MSG"
-      ></validated-social>
-      <validated-social
-        :rules="{ regex: /^[a-zA-Z0-9\/_]+([\-\.]{1}[a-zA-Z0-9\/_]+)*$/ }"
-        label="YouTube"
-        prepend="youtube.com/"
-        v-model="selected.youtube"
-        @input="saveSelected()"
-        :disabled="disabled"
-        :message="YOUTUBE_ID_INVALID_MSG"
-      ></validated-social>
-      <validated-social
-        :rules="{ regex:/^([a-zA-Z0-9._-])+$/ }"
-        label="TikTok"
-        prepend="@"
-        v-model="selected.tiktok"
-        @input="saveSelected()"
-        :disabled="disabled"
-        :message="TIKTOK_ID_INVALID_MSG"
-      ></validated-social>
-      <validated-social
-        :rules="{ regex:/^([a-zA-Z0-9.\/_-])+$/ }"
-        label="LinkedIn"
-        prepend="linkedin.com/in/"
-        v-model="selected.linkedin"
-        @input="saveSelected()"
-        :disabled="disabled"
-        :message="LINKEDIN_ID_INVALID_MSG"
-      ></validated-social>
-      <simple-social
-        label="Other"
-        v-model="selected.othersocialmedia"
-        @input="saveSelected()"
-      ></simple-social>
-      <!-- We do not appear to cover flickr or reddit in the design -->
+      <b class="mt-3">Social Media <edit-button v-b-modal.person-social-modal></edit-button></b>
+      <dl-person :fields="socialFields"></dl-person>
     </div>
     <person-edit-modal id="person-bio-modal" :person="selected" :data="{bio: null}">
       <template #modal-title>Edit Bio - {{selected.published_name}}</template>
@@ -171,6 +61,112 @@
         ></plano-editor>
       </template>
     </person-edit-modal>
+    <person-edit-modal id="person-misc-modal" :person="selected" :data="miscData">
+      <template #modal-title>Edit Preferences - {{selected.published_name}}</template>
+      <template #default="{fields}">
+        <b-form-group label="Anyone that should not be assigned to be on a panel with participant">
+          <b-form-textarea v-model="fields.do_not_assign_with"></b-form-textarea>
+        </b-form-group>
+        <b-form-group label="Permission to be included in a livestreamed program">
+            <b-form-radio-group
+              stacked
+              v-model="fields.can_stream"
+            >
+              <b-form-radio :value="yesLabel.value">{{yesLabel.label}}</b-form-radio>
+              <b-form-radio :value="noLabel.value">{{noLabel.label}}</b-form-radio>
+              <b-form-radio :value="maybeLabel.value">{{maybeLabel.label}}</b-form-radio>
+            </b-form-radio-group>
+            <b-textarea v-model="fields.can_stream_exceptions"></b-textarea>
+        </b-form-group>
+        <b-form-group label="Permission to be included in a recorded program">
+            <b-form-radio-group stacked v-model="fields.can_record" >
+              <b-form-radio :value="yesLabel.value">{{yesLabel.label}}</b-form-radio>
+              <b-form-radio :value="noLabel.value">{{noLabel.label}}</b-form-radio>
+              <b-form-radio :value="maybeLabel.value">{{maybeLabel.label}}</b-form-radio>
+            </b-form-radio-group>
+            <b-textarea v-model="fields.can_record_exceptions"></b-textarea>
+        </b-form-group>
+        <b-form-group>
+        <b-form-checkbox switch v-model="fields.is_local">Local to the event</b-form-checkbox>
+        </b-form-group>
+        <b-form-group label="Moderating experience">
+          <b-form-textarea v-model="fields.moderation_experience"></b-form-textarea>
+        </b-form-group>
+      </template>
+    </person-edit-modal>
+    <person-edit-modal id="person-social-modal" :person="selected" :data="socialsData">
+      <template #modal-title>Edit Socials - {{selected.published_name}}</template>
+      <template #default="{fields}">
+        <validated-social
+          :rules="{ regex: /^[a-z0-9_]{1,15}$/i }"
+          label="Twitter"
+          prepend="@"
+          v-model="fields.twitter"
+          :disabled="disabled"
+          :message="TWITTER_ID_INVALID_MSG"
+        ></validated-social>
+        <validated-social
+          :rules="{ regex: /^[a-z\d.]{5,}$/i }"
+          label="Facebook"
+          prepend="facebook.com/"
+          v-model="fields.facebook"
+          :disabled="disabled"
+          :message="FACEBOOK_ID_INVALID_MSG"
+        ></validated-social>
+        <validated-social
+          :rules="{ regex: /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-zA-Z0-9\/]+([\-\.]{1}[a-zA-Z0-9\/]+)*\.[a-zA-Z\/]{2,5}(:[0-9]{1,5})?(\/.*)?$/ }"
+          label="Website"
+          prepend="url"
+          v-model="fields.website"
+          :disabled="disabled"
+          :message="WEBSITE_INVALID_MSG"
+        ></validated-social>
+        <validated-social
+          :rules="{ regex: /^[a-zA-Z0-9._]+$/ }"
+          label="Instagram"
+          prepend="instagram.com/"
+          v-model="fields.instagram"
+          :disabled="disabled"
+          :message="INSTAGRAM_ID_INVALID_MSG"
+        ></validated-social>
+        <validated-social
+          :rules="{ regex: /^(#)?[a-zA-Z0-9][\w]{2,24}$/ }"
+          label="Twitch"
+          prepend="twitch.tv/"
+          v-model="fields.twitch"
+          :disabled="disabled"
+          :message="TWITCH_ID_INVALID_MSG"
+        ></validated-social>
+        <validated-social
+          :rules="{ regex: /^[a-zA-Z0-9\/_]+([\-\.]{1}[a-zA-Z0-9\/_]+)*$/ }"
+          label="YouTube"
+          prepend="youtube.com/"
+          v-model="fields.youtube"
+          :disabled="disabled"
+          :message="YOUTUBE_ID_INVALID_MSG"
+        ></validated-social>
+        <validated-social
+          :rules="{ regex:/^([a-zA-Z0-9._-])+$/ }"
+          label="TikTok"
+          prepend="@"
+          v-model="fields.tiktok"
+          :disabled="disabled"
+          :message="TIKTOK_ID_INVALID_MSG"
+        ></validated-social>
+        <validated-social
+          :rules="{ regex:/^([a-zA-Z0-9.\/_-])+$/ }"
+          label="LinkedIn"
+          prepend="linkedin.com/in/"
+          v-model="fields.linkedin"
+          :disabled="disabled"
+          :message="LINKEDIN_ID_INVALID_MSG"
+        ></validated-social>
+        <simple-social
+          label="Other"
+          v-model="fields.othersocialmedia"
+        ></simple-social>
+      </template>
+    </person-edit-modal>
   </div>
   <!-- <br />
   {{person.pronouns}}
@@ -192,6 +188,7 @@ import ValidatedSocial from '@/components/validated_social.vue';
 import SimpleSocial from '../social-media/simple-social.vue';
 import EditButton from '@/components/edit_button.vue';
 import PersonEditModal from './person_edit_modal.vue';
+import DlPerson from './dl_person.vue';
 
 import {
   TWITTER_ID_INVALID_MSG,
@@ -218,6 +215,7 @@ export default {
     SimpleSocial,
     PersonEditModal,
     EditButton,
+    DlPerson,
   },
   mixins: [
     settingsMixin,
@@ -233,9 +231,60 @@ export default {
     YOUTUBE_ID_INVALID_MSG,
     TIKTOK_ID_INVALID_MSG,
     LINKEDIN_ID_INVALID_MSG,
-    model
+    model,
+    miscData: {
+      do_not_assign_with: null,
+      can_stream: null,
+      can_stream_exceptions: null,
+      can_record: null,
+      can_record_exceptions: null,
+      is_local: null,
+      moderation_experience: null
+    },
+    socialsData: {
+      twitter: null,
+      facebook: null,
+      website: null,
+      instagram: null,
+      twitch: null,
+      youtube: null,
+      tiktok: null,
+      linkedin: null,
+      othersocialmedia: null
+    },
   }),
   computed: {
+    socialFields() {
+      return Object.keys(this.socialsData);
+    },
+    miscFields() {
+      return Object.keys(this.miscData);
+    },
+    can_stream_label() {
+      switch(this.selected.can_stream) {
+        case this.noLabel.value:
+          return this.noLabel.label;
+        case this.yesLabel.value:
+          return this.yesLabel.label;
+        case this.maybeLabel.value:
+          return this.maybeLabel.label;
+        default:
+          return this.selected.can_stream;
+      }
+    },
+    can_record_label() {
+      switch(this.selected.can_record) {
+        case this.noLabel.value:
+          return this.noLabel.label;
+        case this.yesLabel.value:
+          return this.yesLabel.label;
+        case this.maybeLabel.value:
+          return this.maybeLabel.label;
+        default:
+          return this.selected.can_record;
+      }
+
+    },
     youTimeNow() {
       if (this.selected.timezone) {
         return DateTime.now().setZone(this.selected.timezone).toLocaleString(DateTime.TIME_SIMPLE)
diff --git a/app/javascript/profile/person_edit_modal.vue b/app/javascript/profile/person_edit_modal.vue
index 808568a9c..97d10cbc7 100644
--- a/app/javascript/profile/person_edit_modal.vue
+++ b/app/javascript/profile/person_edit_modal.vue
@@ -17,6 +17,8 @@ import { PATCH_PERSON_MODEL } from '@/store/person.store';
 import { mapActions } from 'vuex';
 import toastMixin from '@/shared/toast-mixin';
 import { FETCH_BY_ID } from '@/store/model.store';
+import { PERSON_SAVE_SUCCESS } from '@/constants/strings';
+
 export default {
   name: "PersonEditModal",
   components: {
@@ -44,7 +46,7 @@ export default {
       })
     },
     patchPerson() {
-      this.toastPromise(this.patchPersonModel({person: this.person, data: this.data}), "TODO SAVE MSSAGE", "TODO ERROR MESSAGE").then((savedPerson) => {
+      this.toastPromise(this.patchPersonModel({person: this.person, data: this.data}), PERSON_SAVE_SUCCESS).then((savedPerson) => {
         this.$emit('updated', savedPerson);
       })
     }

From 793b6321a058b30d3887892db0cb1993fe5d3565 Mon Sep 17 00:00:00 2001
From: Henry <henry.balen@chicon.org>
Date: Sun, 29 May 2022 12:16:19 -0400
Subject: [PATCH 23/40] fix sync error with email display

---
 app/javascript/navbar/top-navbar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/navbar/top-navbar.vue b/app/javascript/navbar/top-navbar.vue
index 3019b8261..4e654b0c0 100644
--- a/app/javascript/navbar/top-navbar.vue
+++ b/app/javascript/navbar/top-navbar.vue
@@ -3,7 +3,7 @@
     <b-navbar toggleable="lg" type="light" class="justify-content-between">
       <b-navbar-brand to="/">Planorama</b-navbar-brand>
       <div class="d-flex flex-column h-100">
-        <div class="text-light mb-2">Logged in as: {{currentUser.primary_email.email}}</div>
+        <div class="text-light mb-2">Logged in as: {{currentUser.primary_email ? currentUser.primary_email.email : ''}}</div>
         <b-navbar-nav class="ml-auto">
           <b-nav-form>
             <help-link></help-link>

From 90d63475034dfa7495c96a4ad9944bf4883c06e0 Mon Sep 17 00:00:00 2001
From: Henry <henry.balen@chicon.org>
Date: Sun, 29 May 2022 15:46:59 -0400
Subject: [PATCH 24/40] PLAN-297 only selectable surveys are ones that are
 public

---
 app/javascript/components/model_select.vue | 6 ++++--
 app/javascript/mailings/mailing_editor.vue | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/javascript/components/model_select.vue b/app/javascript/components/model_select.vue
index 711c39d1c..58291a7df 100644
--- a/app/javascript/components/model_select.vue
+++ b/app/javascript/components/model_select.vue
@@ -27,7 +27,8 @@ export default {
     },
     size: {
       type: String
-    }
+    },
+    filter: null
   },
   mixins: [
     modelMixin
@@ -95,7 +96,8 @@ export default {
       this.search({
         fields: field_name,
         "sortBy": sort_by,
-        "sortOrder": 'asc'
+        "sortOrder": 'asc',
+        "filter": this.filter
       }).then(data => {
         this.data = data
         this.loading = false
diff --git a/app/javascript/mailings/mailing_editor.vue b/app/javascript/mailings/mailing_editor.vue
index ac64d16a5..d633d9176 100644
--- a/app/javascript/mailings/mailing_editor.vue
+++ b/app/javascript/mailings/mailing_editor.vue
@@ -60,10 +60,10 @@
         label="Select Survey:"
         label-for="email-survey"
       >
-        <!-- TODO: only published surveys -->
         <model-select
           v-model="mailing.survey_id"
           model="survey"
+          filter='{"op":"all","queries":[["public", "=", "true"]]}'
           field="name"
           :disabled="has_survey == false"
         ></model-select>

From 95487b9662612caf5b82108afdeb354a8d437702 Mon Sep 17 00:00:00 2001
From: Henry <henry.balen@chicon.org>
Date: Sun, 29 May 2022 15:52:33 -0400
Subject: [PATCH 25/40] Fix survey download when there are no submissions

---
 app/controllers/survey/submissions_controller.rb | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/controllers/survey/submissions_controller.rb b/app/controllers/survey/submissions_controller.rb
index 133dc19b8..84f331c9d 100644
--- a/app/controllers/survey/submissions_controller.rb
+++ b/app/controllers/survey/submissions_controller.rb
@@ -61,7 +61,9 @@ def collection_to_xls
     styles = [date_time_style,date_time_style]
     # Get the survey questions
     submission = @collection.first
-    survey = submission.survey
+
+    survey = Survey.find params[:survey_id] if params[:survey_id]
+    survey ||= submission.survey
     header = ['Created At', 'Updated At', 'Email']
     response_columns = {}
     posn = 3

From f9f10d5ae7522e87d304d461719b502771c9a77b Mon Sep 17 00:00:00 2001
From: Henry <henry.balen@chicon.org>
Date: Sun, 29 May 2022 17:06:54 -0400
Subject: [PATCH 26/40] do not try to assigne person more than once to a survey

---
 app/services/mail_service.rb | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/services/mail_service.rb b/app/services/mail_service.rb
index 49ee2f3de..14929488d 100644
--- a/app/services/mail_service.rb
+++ b/app/services/mail_service.rb
@@ -154,6 +154,7 @@ def self.generate_survey_url(survey:, person:)
   # if there is a survey then assign it to the person
   def self.post_mail_assign_survey(person:, survey:)
     return unless survey
+    return if survey.assigned_people.where(id: person.id).count > 0
 
     survey.assigned_people << person
   end

From d0cca195b98ae5390c5de65f7e973e056de05400 Mon Sep 17 00:00:00 2001
From: Henry <henry.balen@chicon.org>
Date: Mon, 30 May 2022 11:32:12 -0400
Subject: [PATCH 27/40] deal with sensitive fields deal with Rails sec patch

---
 Gemfile.lock                           | 24 ++++++++++++----------
 app/services/access_control_service.rb | 28 +++++++++++++-------------
 2 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index b9ab63282..f6183e2d6 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -77,11 +77,11 @@ GEM
     ast (2.4.2)
     bcrypt (3.1.18)
     bindex (0.8.1)
-    bootsnap (1.11.1)
+    bootsnap (1.12.0)
       msgpack (~> 1.2)
     brakeman (5.2.3)
     builder (3.2.4)
-    bundler-audit (0.9.0.1)
+    bundler-audit (0.9.1)
       bundler (>= 1.2.0, < 3)
       thor (~> 1.0)
     byebug (11.1.3)
@@ -190,7 +190,7 @@ GEM
     mini_mime (1.1.2)
     mini_portile2 (2.8.0)
     minitest (5.15.0)
-    msgpack (1.5.1)
+    msgpack (1.5.2)
     multi_json (1.15.0)
     nenv (0.3.0)
     nilify_blanks (1.4.0)
@@ -225,7 +225,7 @@ GEM
       activesupport (>= 3.0.0)
     raabro (1.4.0)
     racc (1.6.0)
-    rack (2.2.3)
+    rack (2.2.3.1)
     rack-cors (1.1.1)
       rack (>= 2.0.0)
     rack-livereload (0.3.17)
@@ -264,7 +264,7 @@ GEM
     rake (13.0.6)
     ranked-model (0.4.8)
       activerecord (>= 4.2)
-    ransack (3.2.0)
+    ransack (3.2.1)
       activerecord (>= 6.1.5)
       activesupport (>= 6.1.5)
       i18n
@@ -272,7 +272,7 @@ GEM
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     redis (4.6.0)
-    regexp_parser (2.4.0)
+    regexp_parser (2.5.0)
     request_store (1.5.1)
       rack (>= 1.4)
     responders (3.0.1)
@@ -303,13 +303,13 @@ GEM
       rspec-mocks (~> 3.10)
       rspec-support (~> 3.10)
     rspec-support (3.11.0)
-    rubocop (1.29.1)
+    rubocop (1.30.0)
       parallel (~> 1.10)
       parser (>= 3.1.0.0)
       rainbow (>= 2.2.2, < 4.0)
       regexp_parser (>= 1.8, < 3.0)
       rexml (>= 3.2.5, < 4.0)
-      rubocop-ast (>= 1.17.0, < 2.0)
+      rubocop-ast (>= 1.18.0, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 1.4.0, < 3.0)
     rubocop-ast (1.18.0)
@@ -332,10 +332,11 @@ GEM
       tilt
     seedbank (0.5.0)
       rake (>= 10.0)
-    selenium-webdriver (4.1.0)
+    selenium-webdriver (4.2.0)
       childprocess (>= 0.5, < 5.0)
       rexml (~> 3.2, >= 3.2.5)
-      rubyzip (>= 1.2.2)
+      rubyzip (>= 1.2.2, < 3.0)
+      websocket (~> 1.0)
     semantic_range (3.0.0)
     shellany (0.0.1)
     sidekiq (6.4.2)
@@ -368,7 +369,7 @@ GEM
       concurrent-ruby (~> 1.0)
     unf (0.1.4)
       unf_ext
-    unf_ext (0.0.8.1)
+    unf_ext (0.0.8.2)
     unicode-display_width (2.1.0)
     warden (1.2.9)
       rack (>= 2.0.9)
@@ -388,6 +389,7 @@ GEM
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)
       semantic_range (>= 2.3.0)
+    websocket (1.2.9)
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
diff --git a/app/services/access_control_service.rb b/app/services/access_control_service.rb
index a1bfb2d27..58b70f50c 100644
--- a/app/services/access_control_service.rb
+++ b/app/services/access_control_service.rb
@@ -13,19 +13,19 @@ def self.attribute_meta_data
         contact_email: { sensitive: false, linkable: true, type: :email},
         last_sign_in_at: { sensitive: true, linkable: false, type: :datetime},
         current_sign_in_at: { sensitive: true, linkable: false, type: :datetime},
-        pronouns: { sensitive: true, linkable: true, type: :string},
+        pronouns: { sensitive: false, linkable: true, type: :string},
         year_of_birth: { sensitive: true, linkable: false, type: :integer},
         gender: { sensitive: true, linkable: true, type: :string},
         ethnicity: { sensitive: true, linkable: true, type: :string},
         opted_in: { sensitive: true, linkable: false, type: :boolean},
         comments: { sensitive: true, linkable: false, type: :text},
-        can_share: { sensitive: true, linkable: true, type: :boolean, values: [true, false]}, # PROB???
-        con_state: { sensitive: true, linkable: false, type: :enum},
+        can_share: { sensitive: false, linkable: true, type: :boolean, values: [true, false]}, # PROB???
+        con_state: { sensitive: false, linkable: false, type: :enum},
         registered: { sensitive: false, linkable: false, type: :boolean},
         registration_type: { sensitive: true, linkable: false, type: :string},
         registration_number: { sensitive: true, linkable: false, type: :string},
         attendance_type: { sensitive: false, linkable: true, type: :attendance_type, values: ['in person', 'virtual', 'hybrid']},
-        bio: { sensitive: true, linkable: true, type: :text},
+        bio: { sensitive: false, linkable: true, type: :text},
         website: { sensitive: false, linkable: true, type: :string},
         twitter: { sensitive: false, linkable: true, type: :string},
         othersocialmedia: { sensitive: false, linkable: true, type: :string},
@@ -37,26 +37,26 @@ def self.attribute_meta_data
         flickr: { sensitive: false, linkable: true, type: :string},
         reddit: { sensitive: false, linkable: true, type: :string},
         tiktok: { sensitive: false, linkable: true, type: :string},
-        can_stream: { sensitive: true, linkable: true, type: :yesnomaybe, values: ['yes', 'no', 'maybe']},
-        can_record: { sensitive: true, linkable: true, type: :yesnomaybe, values: ['yes', 'no', 'maybe']},
-        can_photo: { sensitive: true, linkable: true, type: :yesnomaybe, values: ['yes', 'no', 'maybe']},
+        can_stream: { sensitive: false, linkable: true, type: :yesnomaybe, values: ['yes', 'no', 'maybe']},
+        can_record: { sensitive: false, linkable: true, type: :yesnomaybe, values: ['yes', 'no', 'maybe']},
+        can_photo: { sensitive: false, linkable: true, type: :yesnomaybe, values: ['yes', 'no', 'maybe']},
         age_at_convention: { sensitive: true, linkable: true, type: :string},
         romantic_sexual_orientation: { sensitive: true, linkable: true, type: :string},
         needs_accommodations: { sensitive: true, linkable: true, type: :boolean, values: [true, false]}, # PROB???
         accommodations: { sensitive: true, linkable: true, type: :text},
-        willing_to_moderate: { sensitive: true, linkable: true, type: :boolean, values: [true, false]}, # PROB???
-        moderation_experience: { sensitive: true, linkable: true, type: :text},
+        willing_to_moderate: { sensitive: false, linkable: true, type: :boolean, values: [true, false]}, # PROB???
+        moderation_experience: { sensitive: false, linkable: true, type: :text},
         othered: { sensitive: true, linkable: true, type: :text},
         indigenous: { sensitive: true, linkable: true, type: :text},
         black_diaspora: { sensitive: true, linkable: true, type: :text},
         non_us_centric_perspectives: { sensitive: true, linkable: true, type: :text},
         demographic_categories: { sensitive: true, linkable: true, type: :text},
         do_not_assign_with: { sensitive: true, linkable: true, type: :text},
-        can_stream_exceptions: { sensitive: true, linkable: true, type: :text},
-        can_record_exceptions: { sensitive: true, linkable: true, type: :text},
-        can_photo_exceptions: { sensitive: true, linkable: true, type: :text},
-        is_local: { sensitive: true, linkable: true, type: :boolean, values: [true, false]}, # PROB???
-        languages_fluent_in: { sensitive: true, linkable: true, type: :string},
+        can_stream_exceptions: { sensitive: false, linkable: true, type: :text},
+        can_record_exceptions: { sensitive: false, linkable: true, type: :text},
+        can_photo_exceptions: { sensitive: false, linkable: true, type: :text},
+        is_local: { sensitive: false, linkable: true, type: :boolean, values: [true, false]}, # PROB???
+        languages_fluent_in: { sensitive: false, linkable: true, type: :string},
         socialmedia: { sensitive: false, linkable: true, type: :socialmedia}
       }
     }

From e995ab7c6c9234e615ec7680f11257b80539d3d6 Mon Sep 17 00:00:00 2001
From: Henry <henry.balen@chicon.org>
Date: Mon, 30 May 2022 13:18:35 -0400
Subject: [PATCH 28/40] hide conflicts for now

---
 app/javascript/schedule/schedule_day.vue    | 14 +++++++-------
 app/javascript/schedule/schedule_screen.vue |  6 +++---
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/javascript/schedule/schedule_day.vue b/app/javascript/schedule/schedule_day.vue
index 57706d40f..34cfaf655 100644
--- a/app/javascript/schedule/schedule_day.vue
+++ b/app/javascript/schedule/schedule_day.vue
@@ -212,13 +212,13 @@ export default {
 }
 
 .event-with-conflicts {
-  background: repeating-linear-gradient(
-    45deg,
-    $color-secondary-2-1,
-    $color-secondary-2-1 10px,
-    $color-complement-1 10px,
-    $color-complement-1 20px
-  )
+  // background: repeating-linear-gradient(
+  //   45deg,
+  //   $color-secondary-2-1,
+  //   $color-secondary-2-1 10px,
+  //   $color-complement-1 10px,
+  //   $color-complement-1 20px
+  // )
 }
 
 .vuecal {
diff --git a/app/javascript/schedule/schedule_screen.vue b/app/javascript/schedule/schedule_screen.vue
index f320e61d4..8ea1f1ff5 100644
--- a/app/javascript/schedule/schedule_screen.vue
+++ b/app/javascript/schedule/schedule_screen.vue
@@ -10,12 +10,12 @@
           style="flex: 1 0 auto"
         >
         </schedulable-sessions>
-        <availability
+        <!-- <availability
           :model="sessionConflictModel"
           :timezone="timezone"
           style="flex: 1 0 auto"
           ref="conflict-reporting"
-        ></availability>
+        ></availability> -->
       </div>
       <div class="col-9">
         <room-selector></room-selector>
@@ -149,7 +149,7 @@ export default {
     onScheduleChanged: function() {
       this.$refs["schedulable-sessions"].fetchPaged(false)
       // update the conflicts
-      this.$refs["conflict-reporting"].fetchPaged()
+      // this.$refs["conflict-reporting"].fetchPaged()
     },
   },
   mounted() {

From 3d01698fdf3ba1b2968af2997f624999b48102da Mon Sep 17 00:00:00 2001
From: annA <597368+arbradley@users.noreply.github.com>
Date: Mon, 30 May 2022 15:17:40 -0400
Subject: [PATCH 29/40] updated error message for profile editing and error
 message on social media fields validation

---
 app/javascript/constants/strings.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/javascript/constants/strings.js b/app/javascript/constants/strings.js
index 1f2997b3a..159d65a91 100644
--- a/app/javascript/constants/strings.js
+++ b/app/javascript/constants/strings.js
@@ -196,14 +196,14 @@ module.exports = {
     `Please contact the server administrator at ${email} and let them know the time and date the error occurred.`),
 
     // Social Links Errors
-    TWITTER_ID_INVALID_MSG: "Twitter id is not in a valid format",
-    FACEBOOK_ID_INVALID_MSG: "Facebook id is not in a valid format",
+    TWITTER_ID_INVALID_MSG: "Twitter ID is not in a valid format",
+    FACEBOOK_ID_INVALID_MSG: "Facebook ID is not in a valid format",
     WEBSITE_INVALID_MSG: "Website is not in a valid format",
-    INSTAGRAM_ID_INVALID_MSG: "Instagram id is not in a valid format",
-    TWITCH_ID_INVALID_MSG: "Twitch id is not in a valid format",
+    INSTAGRAM_ID_INVALID_MSG: "Instagram ID is not in a valid format",
+    TWITCH_ID_INVALID_MSG: "Twitch ID is not in a valid format",
     YOUTUBE_ID_INVALID_MSG: "Youtube is not in a valid format",
-    TIKTOK_ID_INVALID_MSG: "TikTok id is not in a valid format",
-    LINKEDIN_ID_INVALID_MSG: "LinkedIn id is not in a valid format",
+    TIKTOK_ID_INVALID_MSG: "TikTok ID is not in a valid format",
+    LINKEDIN_ID_INVALID_MSG: "LinkedIn ID is not in a valid format",
     PROFILE_FIELD_LABELS: {
         ethnicity: "Ethnicity",
         gender: "Gender",
@@ -228,10 +228,10 @@ module.exports = {
         moderation_experience: "Moderating Experience",
         can_stream: "Permission to be included in a livestreamed program",
         can_record: "Permission to be included in a recorded program",
-        can_stream_exceptions: "ANNA WORDS livestream excluded topics",
-        can_record_exceptions: "ANNA WORDS record excluded topics",
+        can_stream_exceptions: "Livestream excluded topics",
+        can_record_exceptions: "Record excluded topics",
         name: "Name",
         pseudonym: "Pseudonym"
     },
-    PERSON_SAVE_SUCCESS: "ANNA WORDS peron saved"
+    PERSON_SAVE_SUCCESS: "Profile record saved successfully"
 }

From a9cc7279a90a1a20348aabaec69c8f5139ceaf26 Mon Sep 17 00:00:00 2001
From: annA <597368+arbradley@users.noreply.github.com>
Date: Mon, 30 May 2022 15:22:53 -0400
Subject: [PATCH 30/40] Update app/javascript/constants/strings.js

Co-authored-by: Gail Terman <Gailbear@users.noreply.github.com>
---
 app/javascript/constants/strings.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/constants/strings.js b/app/javascript/constants/strings.js
index 159d65a91..7936d9343 100644
--- a/app/javascript/constants/strings.js
+++ b/app/javascript/constants/strings.js
@@ -229,7 +229,7 @@ module.exports = {
         can_stream: "Permission to be included in a livestreamed program",
         can_record: "Permission to be included in a recorded program",
         can_stream_exceptions: "Livestream excluded topics",
-        can_record_exceptions: "Record excluded topics",
+        can_record_exceptions: "Recordings excluded topics",
         name: "Name",
         pseudonym: "Pseudonym"
     },

From 8ae04cbaa5c3eab7217d378876fd6ae0732e165d Mon Sep 17 00:00:00 2001
From: annA <597368+arbradley@users.noreply.github.com>
Date: Mon, 30 May 2022 15:23:01 -0400
Subject: [PATCH 31/40] Update app/javascript/constants/strings.js

Co-authored-by: Gail Terman <Gailbear@users.noreply.github.com>
---
 app/javascript/constants/strings.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/constants/strings.js b/app/javascript/constants/strings.js
index 7936d9343..fc09bb351 100644
--- a/app/javascript/constants/strings.js
+++ b/app/javascript/constants/strings.js
@@ -228,7 +228,7 @@ module.exports = {
         moderation_experience: "Moderating Experience",
         can_stream: "Permission to be included in a livestreamed program",
         can_record: "Permission to be included in a recorded program",
-        can_stream_exceptions: "Livestream excluded topics",
+        can_stream_exceptions: "Livestreams excluded topics",
         can_record_exceptions: "Recordings excluded topics",
         name: "Name",
         pseudonym: "Pseudonym"

From e92d5d1e50ca8d04a29f41b87aa05624a8b38859 Mon Sep 17 00:00:00 2001
From: Gail Terman <gterman@gmail.com>
Date: Mon, 30 May 2022 16:55:11 -0400
Subject: [PATCH 32/40] PLAN-282 change N/A to other things

---
 .../components/model_loading_overlay.vue      |  2 +-
 app/javascript/constants/strings.js           |  3 +-
 app/javascript/packs/application.js           |  4 +-
 app/javascript/people/person_tabs.vue         | 98 +++++++++----------
 app/javascript/profile/dl_person.vue          |  6 +-
 app/javascript/profile/person_summary.vue     |  2 +-
 app/javascript/sessions/person_details.vue    | 52 +++-------
 7 files changed, 70 insertions(+), 97 deletions(-)

diff --git a/app/javascript/components/model_loading_overlay.vue b/app/javascript/components/model_loading_overlay.vue
index 93ba3b7c9..9252cced0 100644
--- a/app/javascript/components/model_loading_overlay.vue
+++ b/app/javascript/components/model_loading_overlay.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-overlay :show="!selected" spinner-variant="primary" variant="transparent">
+  <b-overlay :show="!selected" spinner-variant="primary" variant="white" opacity="1">
     <slot></slot>
   </b-overlay>
 </template>
diff --git a/app/javascript/constants/strings.js b/app/javascript/constants/strings.js
index fc09bb351..42c78a1ce 100644
--- a/app/javascript/constants/strings.js
+++ b/app/javascript/constants/strings.js
@@ -231,7 +231,8 @@ module.exports = {
         can_stream_exceptions: "Livestreams excluded topics",
         can_record_exceptions: "Recordings excluded topics",
         name: "Name",
-        pseudonym: "Pseudonym"
+        pseudonym: "Pseudonym",
+        languages_fluent_in: "Languages spoken"
     },
     PERSON_SAVE_SUCCESS: "Profile record saved successfully"
 }
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index b822c0fa7..340c3973d 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -55,10 +55,10 @@ Vue.component("v-select", vSelect);
 import "vue-select/dist/vue-select.css";
 
 Vue.filter('na_if_empty', function (value) {
-  if (value === undefined || value === null) return 'N/A'
+  if (value === undefined) return 'Restricted'
   if (value === true) return "Yes"
   if (value === false) return "No"
-  if (value.trim().length == 0) return 'N/A'
+  if (value === null || value.trim().length == 0) return 'Not Specified'
   return value
 })
 
diff --git a/app/javascript/people/person_tabs.vue b/app/javascript/people/person_tabs.vue
index e0c81e766..a7cc1cab6 100644
--- a/app/javascript/people/person_tabs.vue
+++ b/app/javascript/people/person_tabs.vue
@@ -1,58 +1,54 @@
 <template>
   <div>
-    <b-button variant="link" @click="back">Back</b-button>
     <model-loading-overlay :model="personModel">
-      <person-summary></person-summary>
-    </model-loading-overlay>
-    <b-tabs content-class="mt-3" @activate-tab="handleTabActivation" v-if="person">
-      <b-tab title="General" :active="!tab" lazy>
-        <model-loading-overlay :model="personModel">
+      <b-button variant="link" @click="back">Back</b-button>
+        <person-summary></person-summary>
+      <b-tabs content-class="mt-3" @activate-tab="handleTabActivation" v-if="person">
+        <b-tab title="General" :active="!tab" lazy>
           <person-details></person-details>
-        </model-loading-overlay>
-      </b-tab>
-      <b-tab title="Demographics &amp; Community" :active="tab === 'other'" lazy>
-        <model-loading-overlay :model="personModel">
+        </b-tab>
+        <b-tab title="Demographics &amp; Community" :active="tab === 'other'" lazy>
           <person-demographics></person-demographics>
-        </model-loading-overlay>
-      </b-tab>
-      <!-- Can not make this lazy otherwise we have lock issues with the notes -->
-      <b-tab title="Availability &amp; Interests" :active="tab === 'availability'">
-        <availability-and-interests
-          v-if="person"
-          v-model="person"
-          :start_time="start_time"
-          :end_time="end_time"
-          :timezone="timezone"
-          class="mb-5"
-        ></availability-and-interests>
-      </b-tab>
-      <b-tab title="Session Selection" :active="tab === 'session-selection'" lazy>
-        <session-selector
-          v-if="person"
-          v-model="person"
-          defaultSortBy='sessions.title'
-          :model="sessionModel"
-          defaultFilter='{"op":"all","queries":[["open_for_interest", "=", true]]}'
-        ></session-selector>
-      </b-tab>
-      <b-tab title="Session Rankings" :active="tab === 'session-ranking'" lazy>
-        <session-ranker
-          v-if="person"
-          defaultSortBy='interest_ranking,session_assignments.updated_at'
-          :defaultSortDesc="true"
-          :perPage="null"
-          :model="sessionAssignmentModel"
-          :defaultFilter="rankedFilter"
-          :person_id="person.id"
-        ></session-ranker>
-      </b-tab>
-      <b-tab title="Admin" disabled lazy>
-      </b-tab>
-      <b-tab title="Surveys" disabled lazy>
-      </b-tab>
-      <b-tab title="Emails" disabled lazy>
-      </b-tab>
-    </b-tabs>
+        </b-tab>
+        <!-- Can not make this lazy otherwise we have lock issues with the notes -->
+        <b-tab title="Availability &amp; Interests" :active="tab === 'availability'">
+          <availability-and-interests
+            v-if="person"
+            v-model="person"
+            :start_time="start_time"
+            :end_time="end_time"
+            :timezone="timezone"
+            class="mb-5"
+          ></availability-and-interests>
+        </b-tab>
+        <b-tab title="Session Selection" :active="tab === 'session-selection'" lazy>
+          <session-selector
+            v-if="person"
+            v-model="person"
+            defaultSortBy='sessions.title'
+            :model="sessionModel"
+            defaultFilter='{"op":"all","queries":[["open_for_interest", "=", true]]}'
+          ></session-selector>
+        </b-tab>
+        <b-tab title="Session Rankings" :active="tab === 'session-ranking'" lazy>
+          <session-ranker
+            v-if="person"
+            defaultSortBy='interest_ranking,session_assignments.updated_at'
+            :defaultSortDesc="true"
+            :perPage="null"
+            :model="sessionAssignmentModel"
+            :defaultFilter="rankedFilter"
+            :person_id="person.id"
+          ></session-ranker>
+        </b-tab>
+        <b-tab title="Admin" disabled lazy>
+        </b-tab>
+        <b-tab title="Surveys" disabled lazy>
+        </b-tab>
+        <b-tab title="Emails" disabled lazy>
+        </b-tab>
+      </b-tabs>
+    </model-loading-overlay>
   </div>
 </template>
 
@@ -172,7 +168,7 @@ export default {
     // want to lazy fetch anyhow
     if (selectedPerson?.id !== id) {
       this.unselect_model(personModel);
-      this.fetch_model_by_id(personModel, id).then(
+      this.fetch_model_by_id(personModel, id).then(() =>
         this.select_model(personModel, id)
       );
     }
diff --git a/app/javascript/profile/dl_person.vue b/app/javascript/profile/dl_person.vue
index 81833c246..753d8822d 100644
--- a/app/javascript/profile/dl_person.vue
+++ b/app/javascript/profile/dl_person.vue
@@ -8,7 +8,11 @@
         </dt>
         <dd :key="'dd-' + i" class="ml-2">
           <slot :name="field + '-val'" :slot-scope="{value: selected[field]}">
-            {{selected[field] | na_if_empty }}
+            <span v-if="selected[field] === undefined" class="text-muted font-italic">Restricted</span>
+            <span v-else-if="selected[field] === true">Yes</span>
+            <span v-else-if="selected[field] === false">No</span>
+            <span v-else-if="selected[field] === null || selected[field].trim().length === 0" class="text-muted font-italic">Not Specified</span>
+            <span v-else class="keep-format">{{selected[field]}}</span>
           </slot>
         </dd>
     </template>
diff --git a/app/javascript/profile/person_summary.vue b/app/javascript/profile/person_summary.vue
index 801551152..df453aefe 100644
--- a/app/javascript/profile/person_summary.vue
+++ b/app/javascript/profile/person_summary.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="container my-3" v-if="selected">
+    <div class="container-fluid my-3" v-if="selected">
       <div class="row">
         <div class="col-8">
           <h3>{{selected.published_name}}<edit-button v-b-modal.person-top-modal></edit-button></h3>
diff --git a/app/javascript/sessions/person_details.vue b/app/javascript/sessions/person_details.vue
index c6ac79b65..31c5273fa 100644
--- a/app/javascript/sessions/person_details.vue
+++ b/app/javascript/sessions/person_details.vue
@@ -20,57 +20,27 @@
             <dt>Bio:</dt>
             <dd class='ml-2'>
               <span v-html="selected.bio" v-if="selected.bio"></span>
-              <span v-else>N/A</span>
+              <span v-else class="text-muted font-italic">Not Specified</span>
             </dd>
           </dl>
         </div>
         <div class="d-flex flex-row mt-3">
           <div class="w-50 mr-2">
             <h5>Demographics</h5>
-            <dl>
-              <dt>Ethnicity:</dt>
-              <dd class="ml-2">{{selected.ethnicity | na_if_empty}}</dd>
-              <dt>Gender:</dt>
-              <dd class="ml-2">{{selected.gender | na_if_empty}}</dd>
-              <dt>Age at time of Event:</dt>
-              <dd class="ml-2">{{selected.age_at_convention | na_if_empty}}</dd>
-              <dt>Romantic and/or sexual orientation:</dt>
-              <dd class="ml-2">{{selected.romantic_sexual_orientation | na_if_empty}}</dd>
-            </dl>
+            <dl-person :fields="['ethnicity', 'gender', 'age_at_convention', 'romantic_sexual_orientation']"></dl-person>
           </div>
           <div class="w-50">
             <h5>Community Memberships</h5>
-            <dl>
-              <dt>Experience with being “othered”:</dt>
-              <dd class="ml-2">{{selected.othered | na_if_empty }}</dd>
-              <dt>Member of an Indigenous community:</dt>
-              <dd class="ml-2">{{selected.indigenous | na_if_empty}}</dd>
-              <dt>Member of the global Black diaspora:</dt>
-              <dd class="ml-2">{{selected.black_diaspora | na_if_empty}}</dd>
-              <dt>Represent something other than a purely US-centric perspective:</dt>
-              <dd class="ml-2">{{selected.non_us_centric_perspectives| na_if_empty}}</dd>
-            </dl>
+            <dl-person :fields="['othered', 'indigenous', 'black_diaspora', 'non_us_centric_perspectives']"></dl-person>
           </div>
         </div>
         <h5>Other Information</h5>
-        <dl>
-          <dt>Anyone that should not be assigned to be on a panel with participant:</dt>
-          <dd class="ml-2">{{selected.do_not_assign_with | na_if_empty}}</dd>
-          <dt>Permission to be included in live streamed program:</dt>
-          <dd class="ml-2">{{selected.can_stream | capitalize | na_if_empty}}</dd>
-          <dt>Topics participant does not want to be streamed while talking about are:</dt>
-          <dd class="ml-2">{{selected.can_stream_exceptions | na_if_empty}}</dd>
-          <dt>Permission to be included in recorded program:</dt>
-          <dd class="ml-2">{{selected.can_record | capitalize | na_if_empty}}</dd>
-          <dt>Topics participant does not want to be recorded talking about:</dt>
-          <dd class="ml-2">{{selected.can_record_exceptions | na_if_empty}}</dd>
-          <dt>Local to the Event:</dt>
-          <dd class="ml-2">{{selected.is_local ? 'Yes' : 'No'}}</dd>
-          <dt>Moderating experience:</dt>
-          <dd class="ml-2">{{selected.moderation_experience | na_if_empty}}</dd>
-          <dt>Languages spoken:</dt>
-          <dd class="ml-2">{{selected.languages_fluent_in | na_if_empty}}</dd>
-        </dl>
+        <dl-person :fields="['do_not_assign_with', 'can_stream', 'can_stream_exceptions', 'can_record', 'can_record_exceptions', 'is_local', 'moderation_experience', 'languages_fluent_in']">
+          <template #can_stream-val>{{selected.can_stream | capitalize}}</template>
+          <template #can_record-val>{{selected.can_record | capitalize}}</template>
+          <template #can_stream_exceptions-label>Topics participant does not want to be streamed while talking about</template>
+          <template #can_record_exceptions-label>Topics participant does not want to be recorded while talking about</template>
+        </dl-person>
       </div>
     </template>
   </sidebar-vue>
@@ -80,12 +50,14 @@
 import SidebarVue from '../components/sidebar_vue';
 import {modelMixin} from '@/mixins';
 import modelUtilsMixin from "@/store/model_utils.mixin";
+import DlPerson from "@/profile/dl_person.vue";
 
 // Seacrh for people to add as participants
 export default {
   name: "PersonDetails",
   components: {
-    SidebarVue
+    SidebarVue,
+    DlPerson
   },
   mixins: [
     modelMixin,

From daf69f67630a83475c0bc0259c8a9f810e69af56 Mon Sep 17 00:00:00 2001
From: Henry <henry.balen@chicon.org>
Date: Mon, 30 May 2022 17:33:35 -0400
Subject: [PATCH 33/40] If the attribute is sensitive leave it out

---
 app/serializers/plano/serializer.rb | 49 +++++++++++++++--------------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/app/serializers/plano/serializer.rb b/app/serializers/plano/serializer.rb
index 9c06585c0..c55dfe015 100644
--- a/app/serializers/plano/serializer.rb
+++ b/app/serializers/plano/serializer.rb
@@ -4,33 +4,34 @@ module Serializer
 
     class_methods do
       def protected_attribute(*attributes_list, &block)
-        # proc = Proc.new { |record, params|
-        #   # logic to test if the person has access
-        #   AccessControlService.allowed_attribute_access?(
-        #     instance: record,
-        #     attributes: attributes_list,
-        #     person: params[:current_person]
-        #   )
-        # }
+        proc = Proc.new { |record, params|
+          # logic to test if the person has access
+          AccessControlService.allowed_attribute_access?(
+            instance: record,
+            attributes: attributes_list,
+            person: params[:current_person]
+          )
+        }
         # if proc is at the end remove it and add the new one
-        # new_list = attributes_list #+ [{if: proc}]
+        new_list = attributes_list + [{if: proc}]
+        attributes(*new_list, &block)
 
         # TODO: check how many args we could have
-        attributes(*attributes_list) do |record, params|
-          if AccessControlService.allowed_attribute_access?(
-              instance: record,
-              attributes: attributes_list,
-              person: params[:current_person]
-            )
-            if (block)
-              block.call(record, params)
-            else
-              record.send attributes_list.first
-            end
-          else
-            'n/a'
-          end
-        end
+        # attributes(*attributes_list) do |record, params|
+        #   if AccessControlService.allowed_attribute_access?(
+        #       instance: record,
+        #       attributes: attributes_list,
+        #       person: params[:current_person]
+        #     )
+        #     if (block)
+        #       block.call(record, params)
+        #     else
+        #       record.send attributes_list.first
+        #     end
+        #   else
+        #     'n/a'
+        #   end
+        # end
       end
 
       def protected_attributes(*attributes_list, &block)

From a015e0614dc94752bdeff273257996cb4864120f Mon Sep 17 00:00:00 2001
From: Henry <henry.balen@chicon.org>
Date: Tue, 31 May 2022 15:26:52 -0400
Subject: [PATCH 34/40] fix methods for modal

---
 app/javascript/components/plano_modal.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/app/javascript/components/plano_modal.vue b/app/javascript/components/plano_modal.vue
index f962f4218..8c6413d06 100644
--- a/app/javascript/components/plano_modal.vue
+++ b/app/javascript/components/plano_modal.vue
@@ -6,6 +6,7 @@
     scrollable
     v-on="$listeners"
     v-bind="$attrs"
+    ref="plano-modal"
   >
     <slot v-for="(_, name) in $slots" :name="name" :slot="name" />
     <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData"><slot :name="name" v-bind="slotData" /></template>
@@ -15,6 +16,14 @@
 <script>
 export default {
   name: "PlanoModal",
+  methods: {
+    show() {
+      this.$refs['plano-modal'].show()
+    },
+    hide() {
+      this.$refs['plano-modal'].hide()
+    }
+  }
 }
 </script>
 

From d992a8bf1ec1092ecebd2b53515d40b1ef5061b8 Mon Sep 17 00:00:00 2001
From: Henry <henry.balen@chicon.org>
Date: Wed, 1 Jun 2022 11:50:52 -0400
Subject: [PATCH 35/40] tweak relationship access

---
 app/serializers/person_serializer.rb | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/app/serializers/person_serializer.rb b/app/serializers/person_serializer.rb
index ca2474487..470334e6c 100644
--- a/app/serializers/person_serializer.rb
+++ b/app/serializers/person_serializer.rb
@@ -56,7 +56,6 @@ class PersonSerializer #< ActiveModel::Serializer
   end
 
   has_many  :email_addresses, serializer: EmailAddressSerializer,
-              if: Proc.new { |record, params| AccessControlService.allowed_access?(instance: record, person: params[:current_person]) },
               links: {
                 self: -> (object, params) {
                   "#{params[:domain]}/person/#{object.id}"
@@ -67,7 +66,6 @@ class PersonSerializer #< ActiveModel::Serializer
               }
 
   has_many :convention_roles, serializer: ConventionRoleSerializer,
-              if: Proc.new { |record, params| AccessControlService.allowed_access?(instance: record, person: params[:current_person]) },
               links: {
                 self: -> (object, params) {
                   "#{params[:domain]}/person/#{object.id}"
@@ -78,7 +76,6 @@ class PersonSerializer #< ActiveModel::Serializer
               }
 
   has_many  :submissions, serializer: Survey::SubmissionSerializer,
-              if: Proc.new { |record, params| AccessControlService.allowed_access?(instance: record, person: params[:current_person]) },
               links: {
                 self: -> (object, params) {
                   "#{params[:domain]}/person/#{object.id}"
@@ -174,7 +171,6 @@ class PersonSerializer #< ActiveModel::Serializer
   #            }
 
   has_many :mail_histories, serializer: MailHistorySerializer,
-             if: Proc.new { |record, params| AccessControlService.allowed_access?(instance: record, person: params[:current_person]) },
              links: {
               self: -> (object, params) {
                 "#{params[:domain]}/person/#{object.id}"

From 198b45b447ce6601bb12519f2374116d8dd6ef27 Mon Sep 17 00:00:00 2001
From: Gail Terman <gterman@gmail.com>
Date: Sat, 4 Jun 2022 14:05:14 -0400
Subject: [PATCH 36/40] PLAN-314 back buttons do different things

- people edit back button always goes to people list, regardless of how you got there
- sessions edit back button always goes to sessions list, regardless of how you got there
---
 app/javascript/people/person_tabs.vue    | 2 +-
 app/javascript/sessions/session_tabs.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/javascript/people/person_tabs.vue b/app/javascript/people/person_tabs.vue
index a7cc1cab6..6b3ac28d1 100644
--- a/app/javascript/people/person_tabs.vue
+++ b/app/javascript/people/person_tabs.vue
@@ -125,7 +125,7 @@ export default {
   },
   methods: {
     back() {
-      history.back()
+      this.$router.push('/people')
     },
     handleTabActivation(newTab, oldTab, bvEvent) {
       let path = '';
diff --git a/app/javascript/sessions/session_tabs.vue b/app/javascript/sessions/session_tabs.vue
index a8567b9c5..3aa244d16 100644
--- a/app/javascript/sessions/session_tabs.vue
+++ b/app/javascript/sessions/session_tabs.vue
@@ -93,7 +93,7 @@ export default {
       this.session = arg
     },
     back() {
-      history.back()
+      this.$router.push('/sessions')
     },
     handleTabActivation(newTab, oldTab, bvEvent) {
       // console.debug("****** tab action", newTab, oldTab, bvEvent)

From 41b98b094217c2b384d1cc3ee919208452222725 Mon Sep 17 00:00:00 2001
From: Gail Terman <gterman@gmail.com>
Date: Sat, 4 Jun 2022 14:11:43 -0400
Subject: [PATCH 37/40] PLAN-310 hide admin tab like in the flyout

- only people who can see the admin page can see the admin tab.
(not that there is anything on it yet)
---
 app/javascript/people/person_tabs.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/people/person_tabs.vue b/app/javascript/people/person_tabs.vue
index a7cc1cab6..f5bc77c52 100644
--- a/app/javascript/people/person_tabs.vue
+++ b/app/javascript/people/person_tabs.vue
@@ -41,7 +41,7 @@
             :person_id="person.id"
           ></session-ranker>
         </b-tab>
-        <b-tab title="Admin" disabled lazy>
+        <b-tab title="Admin" disabled lazy v-if="currentUserIsAdmin">
         </b-tab>
         <b-tab title="Surveys" disabled lazy>
         </b-tab>

From 4452c7b0100a957728ac7f9d4abde9be65afacab Mon Sep 17 00:00:00 2001
From: Gail Terman <gterman@gmail.com>
Date: Sat, 4 Jun 2022 14:20:53 -0400
Subject: [PATCH 38/40] PLAN-324 disallow editing of sensitive fields

- unless you are an admin. in the future, this should be the sensitive data bit.
---
 .../profile/person_demographics.vue           | 40 ++++---------------
 app/javascript/profile/person_details.vue     |  9 ++++-
 2 files changed, 14 insertions(+), 35 deletions(-)

diff --git a/app/javascript/profile/person_demographics.vue b/app/javascript/profile/person_demographics.vue
index 3334f7087..014c83841 100644
--- a/app/javascript/profile/person_demographics.vue
+++ b/app/javascript/profile/person_demographics.vue
@@ -2,42 +2,14 @@
   <section>
     <div class="d-flex flex-row mt-3">
       <div class="w-50 mr-2">
-        <h5>Demographics <edit-button v-b-modal.person-demo-modal></edit-button></h5>
+        <!-- TODO change edit permissions to sensitive data tickybox -->
+        <h5>Demographics <edit-button v-b-modal.person-demo-modal v-if="currentUserIsAdmin"></edit-button></h5>
         <dl-person :fields="demoFields"></dl-person>
-        <!-- <dl>
-          <dt>Ethnicity</dt>
-          <dd class="ml-2">{{ selected.ethnicity | na_if_empty }}</dd>
-          <dt>Gender</dt>
-          <dd class="ml-2">{{ selected.gender | na_if_empty }}</dd>
-          <dt>Age at time of event</dt>
-          <dd class="ml-2">{{ selected.age_at_convention | na_if_empty }}</dd>
-          <dt>Romantic and/or sexual orientation</dt>
-          <dd class="ml-2">
-            {{ selected.romantic_sexual_orientation | na_if_empty }}
-          </dd>
-        </dl> -->
       </div>
       <div class="w-50">
-        <h5>Community memberships <edit-button v-b-modal.person-community-modal></edit-button></h5>
+        <!-- TODO change edit permissions to sensitive data tickybox -->
+        <h5>Community memberships <edit-button v-b-modal.person-community-modal v-if="currentUserIsAdmin"></edit-button></h5>
         <dl-person :fields="communityFields"></dl-person>
-        <!-- <dl>
-          <dt>Experience with being “othered”</dt>
-          <dd class="ml-2">{{ selected.othered | na_if_empty }}</dd>
-          <dt>Member of an Indigenous community</dt>
-          <dd class="ml-2">{{ selected.indigenous | na_if_empty }}</dd>
-          <dt>Member of the global Black diaspora</dt>
-          <dd class="ml-2">{{ selected.black_diaspora | na_if_empty }}</dd>
-          <dt>
-            Represent something other than a purely US-centric perspective
-          </dt>
-          <dd class="ml-2">
-            {{ selected.non_us_centric_perspectives | na_if_empty }}
-          </dd>
-          <dt>Other demographic categories</dt>
-          <dd class="ml-2">
-            {{ selected.demographic_categories | na_if_empty }}
-          </dd>
-        </dl> -->
       </div>
     </div>
     <person-edit-modal id="person-demo-modal" :person="selected" :data="demoData">
@@ -87,6 +59,7 @@ import { personModel as model } from "@/store/person.store";
 import PersonEditModal from "./person_edit_modal.vue";
 import EditButton from '@/components/edit_button';
 import DlPerson from './dl_person.vue';
+import personSessionMixin from '@/auth/person_session.mixin';
 
 export default {
   name: "PersonDemographics",
@@ -112,7 +85,8 @@ export default {
     }
   }),
   mixins: [
-    modelMixinNoProp
+    modelMixinNoProp,
+    personSessionMixin
   ],
   computed: {
     demoFields() {
diff --git a/app/javascript/profile/person_details.vue b/app/javascript/profile/person_details.vue
index a3e7865ea..c7ec97469 100644
--- a/app/javascript/profile/person_details.vue
+++ b/app/javascript/profile/person_details.vue
@@ -65,8 +65,11 @@
       <template #modal-title>Edit Preferences - {{selected.published_name}}</template>
       <template #default="{fields}">
         <b-form-group label="Anyone that should not be assigned to be on a panel with participant">
-          <b-form-textarea v-model="fields.do_not_assign_with"></b-form-textarea>
+          <!-- TODO change edit permissions to sensitive data tickybox -->
+          <b-form-textarea v-if="currentUserIsAdmin" v-model="fields.do_not_assign_with"></b-form-textarea>
+          <b-form-textarea v-if="!currentUserIsAdmin" disabled value="Restricted"></b-form-textarea>
         </b-form-group>
+
         <b-form-group label="Permission to be included in a livestreamed program">
             <b-form-radio-group
               stacked
@@ -204,6 +207,7 @@ import settingsMixin from "@/store/settings.mixin";
 import { modelMixinNoProp } from '@/store/model.mixin';
 import { personModel as model } from "@/store/person.store";
 import { DateTime } from "luxon";
+import personSessionMixin from '@/auth/person_session.mixin';
 
 export default {
   name: "PersonDetails",
@@ -219,7 +223,8 @@ export default {
   },
   mixins: [
     settingsMixin,
-    modelMixinNoProp
+    modelMixinNoProp,
+    personSessionMixin
   ],
   data: () =>  ({
     disabled: false,

From 95cd4f184c74fc74919e0ba5826a99440c5426ee Mon Sep 17 00:00:00 2001
From: Gail Terman <gterman@gmail.com>
Date: Sat, 4 Jun 2022 14:25:58 -0400
Subject: [PATCH 39/40] PLAN-324 still allow editing your own data

- you can see and edit your own restricted data
- you cannot see and edit the restricted data of others unless you are an admin
---
 app/javascript/profile/person_demographics.vue | 10 ++++++----
 app/javascript/profile/person_details.vue      |  8 ++++++--
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/app/javascript/profile/person_demographics.vue b/app/javascript/profile/person_demographics.vue
index 014c83841..187bbc7c6 100644
--- a/app/javascript/profile/person_demographics.vue
+++ b/app/javascript/profile/person_demographics.vue
@@ -2,13 +2,11 @@
   <section>
     <div class="d-flex flex-row mt-3">
       <div class="w-50 mr-2">
-        <!-- TODO change edit permissions to sensitive data tickybox -->
-        <h5>Demographics <edit-button v-b-modal.person-demo-modal v-if="currentUserIsAdmin"></edit-button></h5>
+        <h5>Demographics <edit-button v-b-modal.person-demo-modal v-if="canEditInfo"></edit-button></h5>
         <dl-person :fields="demoFields"></dl-person>
       </div>
       <div class="w-50">
-        <!-- TODO change edit permissions to sensitive data tickybox -->
-        <h5>Community memberships <edit-button v-b-modal.person-community-modal v-if="currentUserIsAdmin"></edit-button></h5>
+        <h5>Community memberships <edit-button v-b-modal.person-community-modal v-if="canEditInfo"></edit-button></h5>
         <dl-person :fields="communityFields"></dl-person>
       </div>
     </div>
@@ -94,6 +92,10 @@ export default {
     },
     communityFields() {
       return Object.keys(this.communityData);
+    },
+    canEditInfo() {
+      // TODO use sensitive data permission in the future
+      return this.currentUserIsAdmin || this.currentUser.id === this.selected.id;
     }
   }
 };
diff --git a/app/javascript/profile/person_details.vue b/app/javascript/profile/person_details.vue
index c7ec97469..41f123a08 100644
--- a/app/javascript/profile/person_details.vue
+++ b/app/javascript/profile/person_details.vue
@@ -66,8 +66,8 @@
       <template #default="{fields}">
         <b-form-group label="Anyone that should not be assigned to be on a panel with participant">
           <!-- TODO change edit permissions to sensitive data tickybox -->
-          <b-form-textarea v-if="currentUserIsAdmin" v-model="fields.do_not_assign_with"></b-form-textarea>
-          <b-form-textarea v-if="!currentUserIsAdmin" disabled value="Restricted"></b-form-textarea>
+          <b-form-textarea v-if="canEditSensitiveInfo" v-model="fields.do_not_assign_with"></b-form-textarea>
+          <b-form-textarea v-if="!canEditSensitiveInfo" disabled value="Restricted"></b-form-textarea>
         </b-form-group>
 
         <b-form-group label="Permission to be included in a livestreamed program">
@@ -313,6 +313,10 @@ export default {
         label: "Yes, except for items focused on the topics listed below.",
         value: "maybe"};
     },
+    canEditSensitiveInfo() {
+      // TODO in the future use the sensitive data permission instead of the admin setting
+      return this.currentUserIsAdmin || this.currentUser.id === this.selected.id;
+    }
   },
 }
 </script>

From 6cc8094de6a1dbec9dcdf47c0567121db26b7e35 Mon Sep 17 00:00:00 2001
From: Henry <henry.balen@chicon.org>
Date: Tue, 31 May 2022 07:34:04 -0400
Subject: [PATCH 40/40] use nextTick to ensure DOM is loaded before selecting
 person so that reactivity will be ok.

---
 app/javascript/app.router.js            |   1 -
 app/javascript/people/person_tabs.vue   |  27 ++--
 app/javascript/profile/profile-tabs.vue | 168 ------------------------
 3 files changed, 16 insertions(+), 180 deletions(-)
 delete mode 100644 app/javascript/profile/profile-tabs.vue

diff --git a/app/javascript/app.router.js b/app/javascript/app.router.js
index 5ff6b4f12..157c6cb9e 100644
--- a/app/javascript/app.router.js
+++ b/app/javascript/app.router.js
@@ -21,7 +21,6 @@ import PersonTabs from './people/person_tabs.vue';
 
 // profile
 import ProfileScreen from './profile/profile-screen.vue';
-import ProfileTabs from './profile/profile-tabs.vue';
 
 const profileRoutes = [
   // { path: 'session-selection', component: PersonTabs, props: {tab: 'session-selection'} },
diff --git a/app/javascript/people/person_tabs.vue b/app/javascript/people/person_tabs.vue
index a7cc1cab6..4b63848ab 100644
--- a/app/javascript/people/person_tabs.vue
+++ b/app/javascript/people/person_tabs.vue
@@ -161,17 +161,22 @@ export default {
     }
   },
   mounted() {
-    // get id from URL if present
-    let id = this.id || this.currentUser.id;
-    let selectedPerson = this.selected_model(personModel);
-    // don't fetch if already here... todo figure out if we
-    // want to lazy fetch anyhow
-    if (selectedPerson?.id !== id) {
-      this.unselect_model(personModel);
-      this.fetch_model_by_id(personModel, id).then(() =>
-        this.select_model(personModel, id)
-      );
-    }
+    this.$nextTick(
+      () => {
+        // get id from URL if present
+        let id = this.id || this.currentUser.id;
+        let selectedPerson = this.selected_model(personModel);
+        // don't fetch if already here... todo figure out if we
+        // want to lazy fetch anyhow
+        if (selectedPerson?.id !== id) {
+          // tick
+          this.unselect_model(personModel);
+          this.fetch_model_by_id(personModel, id).then(() =>
+            this.select_model(personModel, id)
+          );
+        }
+      }
+    )
   },
   beforeRouteLeave(to, from, next) {
     if (from.path.match(/.*profile.*/) && to.path === '/people') {
diff --git a/app/javascript/profile/profile-tabs.vue b/app/javascript/profile/profile-tabs.vue
deleted file mode 100644
index 1ffcc658e..000000000
--- a/app/javascript/profile/profile-tabs.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<template>
-  <div>
-<!-- DO NOT USE! use person_tabs.vue instead 
-    <model-loading-overlay :model="personModel">
-      <person-summary></person-summary>
-    </model-loading-overlay>
-    <b-tabs content-class="mt-3" @activate-tab="handleTabActivation" v-if="person">
-      <b-tab title="General" :active="!tab" lazy>
-        <model-loading-overlay :model="personModel">
-          <person-details></person-details>
-        </model-loading-overlay>
-      </b-tab>
-      <b-tab title="Demographics &amp; Community" :active="tab === 'other'" lazy>
-        <model-loading-overlay :model="personModel">
-          <person-demographics></person-demographics>
-        </model-loading-overlay>
-      </b-tab>
-      <b-tab title="Availability &amp; Interests" :active="tab === 'availability'" v-if="currentSettings.configs">
-        <availability-and-interests
-          v-model="person"
-          @input="onPersonUpdate"
-          :start_time="start_time"
-          :end_time="end_time"
-          :timezone="timezone"
-          class="mb-5"
-        ></availability-and-interests>
-      </b-tab>
-      <b-tab title="Session Selection" :active="tab === 'session-selection'" lazy>
-        <session-selector
-          v-model="person"
-          defaultSortBy='sessions.title'
-          :model="sessionModel"
-          defaultFilter='{"op":"all","queries":[["open_for_interest", "=", true]]}'
-        ></session-selector>
-      </b-tab>
-      <b-tab title="Session Rankings" :active="tab === 'session-ranking'" lazy>
-        <session-ranker
-          defaultSortBy='interest_ranking,session_assignments.updated_at'
-          :person_id="person.id"
-          :defaultSortDesc="true"
-          :perPage="null"
-          :model="sessionAssignmentModel"
-          :defaultFilter="rankedFilter"
-        ></session-ranker>
-      </b-tab>
-    </b-tabs>
-    -->
-  </div>
-</template>
-
-<script>
-// import SessionSelector from './session_selector.vue';
-// import SessionRanker from './session_ranker.vue';
-// import AvailabilityAndInterests from './availability_and_interests.vue';
-// import PersonDetails from './person_details.vue'
-// import PersonSummary from './person_summary.vue';
-// import PersonDemographics from './person_demographics';
-// import ModelLoadingOverlay from '@/components/model_loading_overlay';
-
-// import { personModel } from '@/store/person.store'
-// import { sessionModel } from '@/store/session.store'
-// import { sessionAssignmentModel } from '@/store/session_assignment.store'
-// import personSessionMixin from '@/auth/person_session.mixin';
-// import settingsMixin from "@/store/settings.mixin";
-// import modelUtilsMixin from '@/store/model_utils.mixin';
-
-// const { DateTime } = require("luxon");
-
-// import VueRouter from 'vue-router';
-// const { isNavigationFailure, NavigationFailureType } = VueRouter;
-
-// export default {
-//   name: "ProfileTabs",
-//   props: ['tab', 'id'],
-//   components: {
-//     PersonSummary,
-//     SessionSelector,
-//     SessionRanker,
-//     AvailabilityAndInterests,
-//     PersonDetails,
-//     PersonDemographics,
-//     ModelLoadingOverlay,
-//   },
-//   mixins: [
-//     personSessionMixin,
-//     settingsMixin,
-//     modelUtilsMixin
-//   ],
-//   data: () => ({
-//     personModel,
-//     sessionModel,
-//     sessionAssignmentModel,
-//   }),
-//   computed: {
-//     person() {
-//       return this.selected_model(personModel);
-//     },
-//     start_time() {
-//       if (this.currentSettings && this.currentSettings.configs) {
-//         let st = this.configByName('convention_start_time')
-//         return DateTime.fromISO(st)
-//       } else {
-//         return null
-//       }
-//     },
-//     end_time() {
-//       if (this.currentSettings && this.currentSettings.configs) {
-//         let et = this.configByName('convention_end_time')
-//         return DateTime.fromISO(et)
-//       } else {
-//         return null
-//       }
-//     },
-//     rankedFilter() {
-//       return `{"op":"all","queries":[["person_id", "=", "${this.person.id}"],["interested", "=", true]]}`
-//     },
-//     timezone() {
-//       let tz = this.configByName('convention_timezone')
-//       return tz
-//     }
-//   },
-//   methods: {
-//     onPersonUpdate(arg) {
-//       this.person = arg
-//     },
-//     handleTabActivation(newTab, oldTab, bvEvent) {
-//       let path = '';
-//       switch(newTab) {
-//         case 0:
-//           path = '';
-//           break;
-//         case 1:
-//           path = 'other';
-//           break;
-//         case 2:
-//           path = 'availability';
-//           break;
-//         case 3:
-//           path = 'session-selection';
-//           break;
-//         case 4:
-//           path = 'session-ranking';
-//           break;
-//       }
-//       // change the router path to match the current tab
-//       // so that reloads work right
-//       this.$router.push(`/profile/${path}`).catch(error => {
-//         if(!isNavigationFailure(error, NavigationFailureType.duplicated)) {
-//           // ignore the duplicates, otherwise -
-//           throw error;
-//         }
-//       })
-//     }
-//   },
-//   mounted() {
-//     // get id from URL if present
-//     let id = this.id ? this.id : this.currentUser.id
-//     // changed this to select the person
-//     this.fetch_model_by_id(personModel, id).then(
-//       this.select_model(personModel, id)
-//     )
-//   },
-// }
-</script>
-
-<style>
-
-</style>