"Your User Data" Row instead of Page

website/client/src/components/settings/dataExport.vue

@@ -1,26 +0,0 @@
-<template>
-  <div class="row">
-    <div class="col-md-6">
-      <h2>{{ $t('dataExport') }}</h2>
-      <small>{{ $t('saveData') }}</small>
-      <h4>{{ $t('habitHistory') }}</h4>
-      {{ $t('exportHistory') }}
-      <a href="/export/history.csv">{{ $t('csv') }}</a>
-      <h4>{{ $t('userData') }}</h4>
-      {{ $t('exportUserData') }}
-      <a href="/export/userdata.xml">{{ $t('xml') }}</a>
-      <a href="/export/userdata.json">{{ $t('json') }}</a>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  mounted () {
-    this.$store.dispatch('common:setTitle', {
-      section: this.$t('settings'),
-      subSection: this.$t('dataExport'),
-    });
-  },
-};
-</script>

website/client/src/components/settings/index.vue

@@ -1,167 +0,0 @@
-<template>
-  <div class="row">
-    <secondary-menu class="col-12">
-      <router-link
-        class="nav-link"
-        :to="{name: 'siteData'}"
-        exact="exact"
-        :class="{'active': $route.name === 'siteData'}"
-      >
-        {{ $t('siteData') }}
-      </router-link>
-      <router-link
-        class="nav-link"
-        :to="{name: 'api'}"
-        :class="{'active': $route.name === 'api'}"
-      >
-        {{ $t('API') }}
-      </router-link>
-      <router-link
-        class="nav-link"
-        :to="{name: 'dataExport'}"
-        :class="{'active': $route.name === 'dataExport'}"
-      >
-        {{ $t('dataExport') }}
-      </router-link>
-      <router-link
-        class="nav-link"
-        :to="{name: 'promoCode'}"
-        :class="{'active': $route.name === 'promoCode'}"
-      >
-        {{ $t('promoCode') }}
-      </router-link>
-      <router-link
-        class="nav-link"
-        :to="{name: 'subscription'}"
-        :class="{'active': $route.name === 'subscription'}"
-      >
-        {{ $t('subscription') }}
-      </router-link>
-      <router-link
-        class="nav-link"
-        :to="{name: 'transactions'}"
-        :class="{'active': $route.name === 'transactions'}"
-      >
-        {{ $t('transactions') }}
-      </router-link>
-      <router-link
-        class="nav-link"
-        :to="{name: 'notifications'}"
-        :class="{'active': $route.name === 'notifications'}"
-      >
-        {{ $t('notifications') }}
-      </router-link>
-    </secondary-menu>
-    <div
-      v-if="$route.name === 'subscription' && promo === 'g1g1'"
-      class="g1g1-banner d-flex justify-content-center"
-      @click="showSelectUser"
-    >
-      <div
-        v-once
-        class="svg-icon svg-gifts left-gift"
-        v-html="icons.gifts"
-      >
-      </div>
-      <div class="d-flex flex-column align-items-center text-center">
-        <strong
-          class="mt-auto mb-1"
-        > {{ $t('g1g1Event') }} </strong>
-        <p
-          class="mb-auto"
-        >
-          {{ $t('g1g1Details') }}
-        </p>
-      </div>
-      <div
-        v-once
-        class="svg-icon svg-gifts right-gift"
-        v-html="icons.gifts"
-      >
-      </div>
-    </div>
-    <div class="col-12 d-flex justify-content-center">
-      <div :class="{'settings-content': applyNarrowView}">
-        <router-view />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-  @import '~@/assets/scss/colors.scss';
-
-  strong {
-    font-size: 1rem;
-    line-height: 1.25;
-  }
-
-  .g1g1-banner {
-    color: $white;
-    width: 100%;
-    height: 5.75rem;
-    background-image: linear-gradient(90deg, $teal-50 0%, $purple-400 100%);
-    cursor: pointer;
-  }
-
-  .left-gift {
-    margin: auto 3rem auto auto;
-  }
-
-  .right-gift {
-    margin: auto auto auto 3rem;
-    filter: flipH;
-    transform: scaleX(-1);
-  }
-
-  .svg-gifts {
-    width: 3.5rem;
-  }
-
-  .settings-content {
-    flex: 0 0 684px;
-    max-width: unset;
-  }
-</style>
-
-<script>
-import find from 'lodash/find';
-import { mapState } from '@/libs/store';
-import SecondaryMenu from '@/components/secondaryMenu';
-import gifts from '@/assets/svg/gifts-vertical.svg';
-import { userStateMixin } from '../../mixins/userState';
-
-export default {
-  components: {
-    SecondaryMenu,
-  },
-  mixins: [userStateMixin],
-  data () {
-    return {
-      icons: Object.freeze({
-        gifts,
-      }),
-    };
-  },
-  computed: {
-    ...mapState({
-      currentEventList: 'worldState.data.currentEventList',
-    }),
-    currentEvent () {
-      return find(this.currentEventList, event => Boolean(event.promo));
-    },
-    promo () {
-      if (!this.currentEvent || !this.currentEvent.promo) return 'none';
-      return this.currentEvent.promo;
-    },
-    applyNarrowView () {
-      return !['subscription', 'transactions'].includes(this.$route.name);
-    },
-  },
-  methods: {
-    showSelectUser () {
-      this.$root.$emit('bv::show::modal', 'select-user-modal');
-    },
-  },
-};
-</script>

website/client/src/pages/settings-overview.vue

@@ -184,7 +184,6 @@ export default {
         'subscription',
         'siteData',
         'api',
-        'dataExport',
         'promoCode',
         'transactions',
         'notifications',

website/client/src/pages/settings/components/saveCancelButtons.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="buttons">
     <button
+      v-if="!hideSave"
       class="btn btn-save"
       :class="primaryButtonColor ?? 'btn-primary'"
       type="submit"
@@ -22,7 +23,7 @@
 <script>
 export default {
   name: 'SaveCancelButtons',
-  props: ['disableSave', 'primaryButtonLabel', 'primaryButtonColor'],
+  props: ['hideSave', 'disableSave', 'primaryButtonLabel', 'primaryButtonColor'],
 };
 </script>
 
@@ -34,7 +35,6 @@ export default {
   flex-direction: column;
 }
 
-
 .btn-save {
   margin-bottom: 1rem;
 }

website/client/src/pages/settings/generalSettings.vue

@@ -163,5 +163,11 @@ export default {
     sharedInlineSettingStore.markAsClosed();
     next();
   },
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      section: this.$t('settings'),
+      subSection: this.$t('generalSettings'),
+    });
+  },
 };
 </script>

website/client/src/pages/settings/siteData.vue

@@ -15,6 +15,20 @@
 
       <table class="table">
         <user-id-row />
+        <user-data-row />
+        <tr>
+          <td colspan="3">
+          </td>
+        </tr>
+      </table>
+    </div>
+
+    <div class="col-12">
+      <h2 v-once>
+        {{ $t('api') }}
+      </h2>
+
+      <table class="table">
         <tr>
           <td colspan="3">
           </td>
@@ -26,10 +40,16 @@
 
 <script>
 import UserIdRow from '@/pages/settings/siteDataRows/userIdRow.vue';
+import UserDataRow from '@/pages/settings/siteDataRows/userDataRow.vue';
 
 export default {
-  components: { UserIdRow },
-
+  components: { UserDataRow, UserIdRow },
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      section: this.$t('settings'),
+      subSection: this.$t('siteData'),
+    });
+  },
 };
 </script>
 

website/client/src/pages/settings/siteDataRows/userDataRow.vue

@@ -0,0 +1,132 @@
+<template>
+  <fragment>
+    <tr
+      v-if="!modalVisible"
+    >
+      <td class="settings-label">
+        {{ $t("yourUserData") }}
+      </td>
+      <td class="settings-value">
+      </td>
+      <td class="settings-button">
+        <a
+          class="edit-link"
+          @click.prevent="openModal()"
+        >
+          {{ $t('learnMore') }}
+        </a>
+      </td>
+    </tr>
+    <tr
+      v-if="modalVisible"
+      class="expanded"
+    >
+      <td colspan="3">
+        <div
+          v-once
+          class="dialog-title"
+        >
+          {{ $t("yourUserData") }}
+        </div>
+        <div
+          v-once
+          class="dialog-disclaimer"
+        >
+          {{ $t("yourUserDataDisclaimer") }}
+        </div>
+
+        <div class="d-flex justify-content-center data-download-selection">
+          <table>
+            <tr>
+              <td>Task History</td>
+              <td>
+                <a
+                  href="/export/history.csv"
+                  class="btn btn-secondary"
+                >
+                  Download CSV
+                </a>
+              </td>
+            </tr>
+            <tr>
+              <td>User Data</td>
+              <td>
+                <b-dropdown
+                  :text="$t('downloadAs')"
+                  right="right"
+                >
+                  <b-dropdown-item
+                    href="/export/userdata.xml"
+                  >
+                    {{ $t('xml') }}
+                  </b-dropdown-item>
+                  <b-dropdown-item
+                    href="/export/userdata.json"
+                  >
+                    {{ $t('json') }}
+                  </b-dropdown-item>
+                </b-dropdown>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <save-cancel-buttons
+          :hide-save="true"
+          @cancelClicked="requestCloseModal()"
+        />
+      </td>
+    </tr>
+  </fragment>
+</template>
+
+<style lang="scss" scoped>
+@import '~@/assets/scss/colors.scss';
+
+.data-download-selection {
+  margin-top: 20px;
+  margin-bottom: 0.5rem;
+
+  td {
+    border: 0;
+    padding: 0 0 1rem !important;
+
+    &:first-of-type {
+      text-align: end;
+      vertical-align: middle;
+      padding-right: 1rem !important;
+
+      font-weight: bold;
+      line-height: 1.71;
+      color: $gray-50;
+    }
+  }
+
+  ::v-deep {
+    .dropdown-menu {
+      min-width: 0;
+    }
+  }
+}
+</style>
+
+<script>
+import { mapState } from '@/libs/store';
+
+import { InlineSettingMixin } from '../components/inlineSettingMixin';
+import SaveCancelButtons from '@/pages/settings/components/saveCancelButtons.vue';
+
+export default {
+  components: { SaveCancelButtons },
+  mixins: [InlineSettingMixin],
+  data () {
+    return {};
+  },
+  computed: {
+    ...mapState({
+      user: 'user.data',
+    }),
+  },
+
+  methods: {},
+};
+</script>

website/client/src/router/user-routes.js

@@ -17,7 +17,6 @@ const SiteData = () => import(/* webpackChunkName: "settings" */'@/pages/setting
 
 // not converted yet
 const API = () => import(/* webpackChunkName: "settings" */'@/components/settings/api');
-const DataExport = () => import(/* webpackChunkName: "settings" */'@/components/settings/dataExport');
 const PromoCode = () => import(/* webpackChunkName: "settings" */'@/components/settings/promoCode');
 const Subscription = () => import(/* webpackChunkName: "settings" */'@/components/settings/subscription');
 
@@ -49,11 +48,6 @@ export const USER_ROUTES = {
           path: 'api',
           component: API,
         },
-        {
-          name: 'dataExport',
-          path: 'data-export',
-          component: DataExport,
-        },
         {
           name: 'promoCode',
           path: 'promo-code',

website/common/locales/en/settings.json

@@ -44,12 +44,17 @@
     "habitHistory": "Habit History",
     "exportHistory": "Export History:",
     "csv": "(CSV)",
+    "downloadCSV": "Download CSV",
+    "downloadAs": "Download as",
     "userData": "User Data",
+    "yourUserData": "Your User Data",
+    "yourUserDataDisclaimer": "Here you can download a copy of your task history or your full user data.",
     "exportUserData": "Export User Data:",
     "useridCopied": "User ID copied to clipboard.",
     "export": "Export",
-    "xml": "(XML)",
-    "json": "(JSON)",
+    "xml": "XML",
+    "json": "JSON",
+    "api": "API",
     "customDayStart": "Custom Day Start",
     "adjustment": "Adjustment",
     "dayStartAdjustment": "Day Start Adjustment",