Merge branch 'fix-settings-menu' into 'master'

Fix settings menu

See merge request framasoft/mobilizon!494

js/src/components/Settings/SettingMenuItem.vue

@@ -1,24 +1,25 @@
 <template>
   <li class="setting-menu-item" :class="{ active: isActive }">
-    <router-link v-if="menuItem.to" :to="menuItem.to">
-      <span>{{ menuItem.title }}</span>
+    <router-link v-if="to" :to="to">
+      <span>{{ title }}</span>
     </router-link>
-    <span v-else>{{ menuItem.title }}</span>
+    <span v-else>{{ title }}</span>
   </li>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { ISettingMenuSection } from "@/types/setting-menu.model";
+import { Route } from "vue-router";
 
 @Component
 export default class SettingMenuItem extends Vue {
-  @Prop({ required: true, type: Object }) menuItem!: ISettingMenuSection;
+  @Prop({ required: false, type: String }) title!: string;
+  @Prop({ required: true, type: Object }) to!: Route;
 
   get isActive() {
-    if (!this.menuItem.to) return false;
-    if (this.menuItem.to.name === this.$route.name) {
-      if (this.menuItem.to.params) {
-        return this.menuItem.to.params.identityName === this.$route.params.identityName;
+    if (!this.to) return false;
+    if (this.to.name === this.$route.name) {
+      if (this.to.params) {
+        return this.to.params.identityName === this.$route.params.identityName;
       }
       return true;
     }

js/src/components/Settings/SettingMenuSection.vue

@@ -1,27 +1,35 @@
 <template>
   <li :class="{ active: sectionActive }">
-    <router-link v-if="menuSection.to" :to="menuSection.to">{{ menuSection.title }}</router-link>
-    <b v-else>{{ menuSection.title }}</b>
+    <router-link v-if="to" :to="to">{{ title }}</router-link>
+    <b v-else>{{ title }}</b>
     <ul>
-      <setting-menu-item :menu-item="item" v-for="item in menuSection.items" :key="item.title" />
+      <slot></slot>
     </ul>
   </li>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { ISettingMenuSection } from "@/types/setting-menu.model";
 import SettingMenuItem from "@/components/Settings/SettingMenuItem.vue";
+import { Route } from "vue-router";
 @Component({
   components: { SettingMenuItem },
 })
 export default class SettingMenuSection extends Vue {
-  @Prop({ required: true, type: Object }) menuSection!: ISettingMenuSection;
+  @Prop({ required: false, type: String }) title!: string;
+  @Prop({ required: true, type: Object }) to!: Route;
 
-  get sectionActive(): boolean | undefined {
-    return (
-      this.menuSection.items &&
-      this.menuSection.items.some(({ to }) => to && to.name === this.$route.name)
-    );
+  get sectionActive() {
+    if (this.$slots.default) {
+      return this.$slots.default.some(
+        ({
+          componentOptions: {
+            // @ts-ignore
+            propsData: { to },
+          },
+        }) => to && to.name === this.$route.name
+      );
+    }
+    return false;
   }
 }
 </script>

js/src/components/Settings/SettingsMenu.vue

@@ -1,27 +1,88 @@
 <template>
   <aside>
     <ul>
+      <SettingMenuSection :title="$t('Account')" :to="{ name: RouteName.ACCOUNT_SETTINGS }">
+        <SettingMenuItem
+          :title="this.$t('General')"
+          :to="{ name: RouteName.ACCOUNT_SETTINGS_GENERAL }"
+        />
+        <SettingMenuItem :title="$t('Preferences')" :to="{ name: RouteName.PREFERENCES }" />
+        <SettingMenuItem
+          :title="this.$t('Email notifications')"
+          :to="{ name: RouteName.NOTIFICATIONS }"
+        />
+      </SettingMenuSection>
+      <SettingMenuSection :title="$t('Profiles')" :to="{ name: RouteName.IDENTITIES }">
+        <SettingMenuItem
+          v-for="profile in identities"
+          :key="profile.preferredUsername"
+          :title="profile.preferredUsername"
+          :to="{
+            name: RouteName.UPDATE_IDENTITY,
+            params: { identityName: profile.preferredUsername },
+          }"
+        />
+        <SettingMenuItem :title="$t('New profile')" :to="{ name: RouteName.CREATE_IDENTITY }" />
+      </SettingMenuSection>
       <SettingMenuSection
-        v-for="section in menuValue"
-        :key="section.title"
-        :menu-section="section"
-      />
+        v-if="
+          [ICurrentUserRole.MODERATOR, ICurrentUserRole.ADMINISTRATOR].includes(
+            this.currentUser.role
+          )
+        "
+        :title="$t('Moderation')"
+        :to="{ name: RouteName.MODERATION }"
+      >
+        <SettingMenuItem :title="$t('Reports')" :to="{ name: RouteName.REPORTS }" />
+        <SettingMenuItem :title="$t('Moderation log')" :to="{ name: RouteName.REPORT_LOGS }" />
+        <SettingMenuItem :title="$t('Users')" :to="{ name: RouteName.USERS }" />
+        <SettingMenuItem :title="$t('Profiles')" :to="{ name: RouteName.PROFILES }" />
+      </SettingMenuSection>
+      <SettingMenuSection
+        v-if="this.currentUser.role == ICurrentUserRole.ADMINISTRATOR"
+        :title="$t('Admin')"
+        :to="{ name: RouteName.ADMIN }"
+      >
+        <SettingMenuItem :title="$t('Dashboard')" :to="{ name: RouteName.ADMIN_DASHBOARD }" />
+        <SettingMenuItem
+          :title="$t('Instance settings')"
+          :to="{ name: RouteName.ADMIN_SETTINGS }"
+        />
+        <SettingMenuItem :title="$t('Federation')" :to="{ name: RouteName.RELAYS }" />
+      </SettingMenuSection>
     </ul>
   </aside>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import SettingMenuSection from "@/components/Settings/SettingMenuSection.vue";
-import { ISettingMenuSection } from "@/types/setting-menu.model";
+import SettingMenuSection from "./SettingMenuSection.vue";
+import SettingMenuItem from "./SettingMenuItem.vue";
+import { IDENTITIES } from "../../graphql/actor";
+import { IPerson, Person } from "../../types/actor";
+import { CURRENT_USER_CLIENT } from "../../graphql/user";
+import { ICurrentUser, ICurrentUserRole } from "../../types/current-user.model";
+
+import RouteName from "../../router/name";
 @Component({
-  components: { SettingMenuSection },
+  components: { SettingMenuSection, SettingMenuItem },
+  apollo: {
+    identities: {
+      query: IDENTITIES,
+      update: (data) => data.identities.map((identity: IPerson) => new Person(identity)),
+    },
+    currentUser: CURRENT_USER_CLIENT,
+  },
 })
 export default class SettingsMenu extends Vue {
-  @Prop({ required: true, type: Array }) menu!: ISettingMenuSection[];
+  profiles = [];
 
-  get menuValue() {
-    return this.menu;
-  }
+  currentUser!: ICurrentUser;
+
+  identities!: IPerson[];
+
+  ICurrentUserRole = ICurrentUserRole;
+
+  RouteName = RouteName;
 }
 </script>
 <style lang="scss" scoped>