@data-fair/lib-vuetify 0.1.0

package/personal-menu.vue

@@ -0,0 +1,260 @@
+<template>
+  <v-toolbar-items class="personal-menu">
+    <v-btn
+      v-if="!user || !account"
+      v-t="'login'"
+      depressed
+      color="primary"
+      :href="session.loginUrl()"
+    />
+    <v-menu
+      v-else
+      offset-y
+      nudge-left
+      max-height="700"
+    >
+      <template #activator="{props: activatorProps}">
+        <v-btn
+          class="px-0"
+          :title="t('openPersonalMenu')"
+          v-bind="activatorProps"
+        >
+          <user-avatar show-account />
+          <v-icon
+            v-if="user.pd"
+            color="warning"
+            style="position:absolute;"
+          >
+            mdi-alert
+          </v-icon>
+        </v-btn>
+      </template>
+
+      <v-list
+        outlined
+        class="py-0"
+      >
+        <!-- current account, not actionable -->
+        <v-list-item
+          disabled
+          :style="account.type !== 'user' ? 'padding-left:0' : ''"
+          class="text--secondary"
+        >
+          <template #prepend>
+            <user-avatar
+              show-account
+              style="margin-right: 16px;"
+            />
+          </template>
+
+          <v-list-item-title>
+            {{ account.type === 'user' ? t('personalAccount') : account.name }}
+          </v-list-item-title>
+          <v-list-item-subtitle v-if="account.department">
+            {{ account.departmentName || account.department }}
+          </v-list-item-subtitle>
+          <v-list-item-subtitle>{{ user.name }}</v-list-item-subtitle>
+        </v-list-item>
+
+        <!-- cancel a planned deletion ? -->
+        <template v-if="user.pd">
+          <v-alert
+            :value="true"
+            type="warning"
+            tile
+            :outlined="theme.current.value.dark"
+            style="max-width:440px;"
+          >
+            {{ t('plannedDeletion', {name: user.name, plannedDeletion: $d(new Date(user.pd))}) }}
+          </v-alert>
+
+          <v-row class="justify-center ma-0 mb-2">
+            <v-btn
+              color="warning"
+              @click="session.cancelDeletion"
+            >
+              {{ t('cancelDeletion') }}
+            </v-btn>
+          </v-row>
+        </template>
+
+        <!-- account switching (personal account and organizations) -->
+        <template v-if="user.organizations.length > 1 || (user.organizations.length === 1 && (!user.ipa || account.type === 'user'))">
+          <v-list-subheader
+            v-t="'switchAccount'"
+            style="height: 24px"
+          />
+          <v-list-item
+            v-if="account.type !== 'user' && !user.ipa"
+            id="toolbar-menu-switch-user"
+            @click="session.switchOrganization(null)"
+          >
+            <template #prepend>
+              <v-avatar :size="28">
+                <img :src="`${session.options.directoryUrl}/api/avatars/user/${user.id}/avatar.png`">
+              </v-avatar>
+            </template>
+            <v-list-item-title v-t="'personalAccount'" />
+          </v-list-item>
+          <v-list-item
+            v-for="organization in switchableOrganizations"
+            :id="'toolbar-menu-switch-orga-' + organization.id"
+            :key="organization.id"
+            @click="session.switchOrganization(organization.id , organization.department)"
+          >
+            <template #prepend>
+              <v-avatar :size="28">
+                <img
+                  v-if="organization.department"
+                  :src="`${session.options.directoryUrl}/api/avatars/organization/${organization.id}/${organization.department}/avatar.png`"
+                >
+                <img
+                  v-else
+                  :src="`${session.options.directoryUrl}/api/avatars/organization/${organization.id}/avatar.png`"
+                >
+              </v-avatar>
+            </template>
+            <v-list-item-title>
+              {{ organization.name }}
+            </v-list-item-title>
+            <v-list-item-subtitle v-if="organization.department">
+              {{ organization.departmentName || organization.department }}
+            </v-list-item-subtitle>
+          </v-list-item>
+        </template>
+
+        <v-divider />
+
+        <slot name="actions-before" />
+
+        <!-- toggle admin mode -->
+        <v-list-item
+          v-if="user.isAdmin"
+          density="compact"
+          class="personal-menu-switch-list-item"
+        >
+          <template #prepend>
+            <v-icon>mdi-shield-alert</v-icon>
+          </template>
+          <v-list-item-title>
+            <v-switch
+              v-model="user.adminMode"
+              color="admin"
+              hide-details
+              class="mt-0"
+              density="compact"
+              :label="t('adminMode')"
+              @change="session.setAdminMode"
+            />
+          </v-list-item-title>
+        </v-list-item>
+
+        <!-- get back to normal admin session after impersonating a user -->
+        <v-list-item
+          v-if="user.asAdmin"
+          color="admin"
+          density="compact"
+          @click="session.asAdmin(null)"
+        >
+          <template #prepend>
+            <v-icon>mdi-account-switch-outline</v-icon>
+          </template>
+          <v-list-item-title>{{ t('backToAdmin') }}</v-list-item-title>
+        </v-list-item>
+
+        <!-- switch dark mode -->
+        <v-list-item
+          v-if="darkModeSwitch"
+          density="compact"
+          class="personal-menu-switch-list-item"
+        >
+          <template #prepend>
+            <v-icon>mdi-weather-night</v-icon>
+          </template>
+          <v-list-item-title>
+            <v-switch
+              :input-value="session.state.dark"
+              hide-details
+              class="mt-0"
+              density="compact"
+              :label="t('darkMode')"
+              color="white"
+              @change="() => session.switchDark(!session.state.dark)"
+            />
+          </v-list-item-title>
+        </v-list-item>
+
+        <!-- logout button -->
+        <v-divider />
+        <v-list-item
+          @click="() => session.logout()"
+        >
+          <template #prepend>
+            <v-icon>mdi-logout</v-icon>
+          </template>
+          <v-list-item-title v-t="'logout'" />
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </v-toolbar-items>
+</template>
+
+<i18n lang="yaml">
+fr:
+  login: Se connecter / S'inscrire
+  logout: Se déconnecter
+  openPersonalMenu: Ouvrez le menu personnel
+  personalAccount: Compte personnel
+  switchAccount: Changer de compte
+  adminMode: mode admin
+  backToAdmin: Revenir à ma session administrateur
+  darkMode: mode nuit
+  plannedDeletion: La suppression de l'utilisateur {name} et toutes ses informations est programmée le {plannedDeletion}.
+  cancelDeletion: Annuler la suppression de l'utilisateur
+en:
+  login: Login / Sign up
+  logout: Logout
+  openPersonalMenu: Open personal menu
+  personalAccount: Personal account
+  switchAccount: Switch account
+  adminMode: admin mode
+  backToAdmin: Return to administrator session
+  darkMode: night mode
+  plannedDeletion: The deletion of the user {name} and all its data is planned on the {plannedDeletion}.
+  cancelDeletion: Cancel the deletion of the user
+</i18n>
+
+<script setup>
+import { computed, toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useSession } from '@data-fair/lib/vue/session.js'
+import { useTheme } from 'vuetify'
+import UserAvatar from './user-avatar.vue'
+
+const theme = useTheme()
+const session = useSession()
+
+defineProps({
+  darkModeSwitch: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const { t } = useI18n({ useScope: 'local' })
+const { user, account } = toRefs(session.state)
+const switchableOrganizations = computed(() => {
+  const { user, account } = session.state
+  if (!user || !account) return
+  return user.organizations.filter(o => account.type === 'user' || account.id !== o.id || (account.department || null) !== (o.department || null))
+})
+</script>
+
+<style>
+.personal-menu-switch-list-item .v-list-item__content {
+  overflow: visible!important;
+}
+.personal-menu-switch-list-item .v-list-item__content .v-list-item-title {
+  overflow: visible!important;
+}
+</style>

package/personal-menu.vue.d.ts

@@ -0,0 +1,19 @@
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    darkModeSwitch: boolean;
+    $props: {
+        readonly darkModeSwitch?: boolean | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_TemplateResult = {
+    slots: {
+        "actions-before"?(_: {}): any;
+    };
+    refs: {};
+    attrs: Partial<typeof __VLS_inheritedAttrs>;
+};
+declare var __VLS_inheritedAttrs: {};