webui: improve retiring confirmation (#1220)

verdie-g · Aug 2, 2023 · 8a06b58 · 8a06b58
1 parent 6f2de07
commit 8a06b58
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 104 deletions.
diff --git a/src/WebUI/src/components/app/ConfirmActionForm.vue b/src/WebUI/src/components/app/ConfirmActionForm.vue
@@ -3,15 +3,15 @@ import { useVuelidate } from '@vuelidate/core';
 import { sameAs } from '@/services/validators-service';
 
 const props = defineProps<{
-  title: string;
+  title?: string;
   description?: string;
   name: string;
   confirmLabel: string;
 }>();
 
 const emit = defineEmits<{
-  (e: 'cancel'): void;
-  (e: 'confirm'): void;
+  cancel: [];
+  confirm: [];
 }>();
 
 const confirmNameModel = ref<string>('');
@@ -39,11 +39,14 @@ const onConfirm = async () => {
 
 <template>
   <div class="max-w-lg space-y-6 px-12 py-11 text-center">
-    <h4 class="text-xl">{{ title }}</h4>
+    <slot name="title">
+      <h4 class="text-xl">{{ title }}</h4>
+    </slot>
 
     <div class="space-y-4">
-      <slot v-if="$slots.description" name="description"></slot>
-      <p v-else-if="description !== undefined">{{ description }}</p>
+      <slot name="description">
+        <p>{{ description }}</p>
+      </slot>
 
       <i18n-t scope="global" keypath="confirm.name" tag="p">
         <template #name>

diff --git a/src/WebUI/src/components/character/CharacterMedia.vue b/src/WebUI/src/components/character/CharacterMedia.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { type Character } from '@/models/character';
+import { characterClassToIcon } from '@/services/characters-service';
+
+const { character, isActive = false } = defineProps<{
+  character: Character;
+  isActive: boolean;
+}>();
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <OIcon
+      :icon="characterClassToIcon[character.class]"
+      size="lg"
+      v-tooltip="$t(`character.class.${character.class}`)"
+    />
+
+    <div class="flex items-center gap-1">
+      <div class="max-w-[150px] overflow-x-hidden text-ellipsis whitespace-nowrap">
+        {{ character.name }}
+      </div>
+
+      <div>({{ character.level }})</div>
+    </div>
+
+    <Tag
+      v-if="isActive"
+      :label="$t('character.status.active.short')"
+      v-tooltip="$t('character.status.active.title')"
+      variant="success"
+      size="sm"
+    />
+
+    <Tag
+      v-if="character.forTournament"
+      :label="$t('character.status.forTournament.short')"
+      v-tooltip="$t('character.status.forTournament.title')"
+      variant="warning"
+      size="sm"
+    />
+  </div>
+</template>
diff --git a/src/WebUI/src/components/character/CharacterSelectItem.vue b/src/WebUI/src/components/character/CharacterSelectItem.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { type Character } from '@/models/character';
-import { characterClassToIcon } from '@/services/characters-service';
 
 const { character } = defineProps<{
   character: Character;
@@ -10,36 +9,20 @@ const modelValue = defineModel<boolean>();
 </script>
 
 <template>
-  <div class="flex items-center gap-2">
-    <OIcon
-      :icon="characterClassToIcon[character.class]"
-      size="lg"
-      v-tooltip="$t(`character.class.${character.class}`)"
-    />
+  <div class="flex flex-1 items-center gap-2">
+    <VTooltip placement="auto">
+      <OSwitch v-model="modelValue" @click.stop />
 
-    {{ $t('character.format.select', { name: character.name, level: character.level }) }}
+      <template #popper>
+        <div class="prose prose-invert">
+          <h5 class="text-content-100">
+            {{ $t('character.settings.active.tooltip.title') }}
+          </h5>
+          <div v-html="$t('character.settings.active.tooltip.desc')"></div>
+        </div>
+      </template>
+    </VTooltip>
 
-    <div class="flex items-center gap-0.5">
-      <Tag
-        v-if="character.forTournament"
-        :label="$t('character.status.forTournament.short')"
-        v-tooltip="$t('character.status.forTournament.title')"
-        variant="warning"
-        size="sm"
-      />
-
-      <VTooltip v-else placement="auto">
-        <OSwitch v-model="modelValue" @click.stop />
-
-        <template #popper>
-          <div class="prose prose-invert">
-            <h5 class="text-content-100">
-              {{ $t('character.settings.active.tooltip.title') }}
-            </h5>
-            <div v-html="$t('character.settings.active.tooltip.desc')"></div>
-          </div>
-        </template>
-      </VTooltip>
-    </div>
+    <CharacterMedia :character="character" :isActive="modelValue!" />
   </div>
 </template>
diff --git a/src/WebUI/src/pages/characters.vue b/src/WebUI/src/pages/characters.vue
@@ -100,40 +100,10 @@ if (userStore.characters.length === 0) {
       <div class="order-1 flex items-center gap-4">
         <VDropdown :triggers="['click']" placement="bottom-end">
           <template #default="{ shown }">
-            <OButton
-              variant="primary"
-              outlined
-              :label="`${currentCharacter.name} (${currentCharacter.level})`"
-              size="lg"
-            >
-              <OIcon
-                :icon="characterClassToIcon[currentCharacter.class]"
-                size="lg"
-                v-tooltip="$t(`character.class.${currentCharacter.class}`)"
-              />
-
-              <div class="flex items-center gap-1">
-                <div class="max-w-[150px] overflow-x-hidden text-ellipsis whitespace-nowrap">
-                  {{ currentCharacter.name }}
-                </div>
-
-                <div>({{ currentCharacter.level }})</div>
-              </div>
-
-              <Tag
-                v-if="currentCharacter.id === user?.activeCharacterId"
-                :label="$t('character.status.active.short')"
-                v-tooltip="$t('character.status.active.title')"
-                variant="success"
-                size="sm"
-              />
-
-              <Tag
-                v-if="currentCharacter.forTournament"
-                :label="$t('character.status.forTournament.short')"
-                v-tooltip="$t('character.status.forTournament.title')"
-                variant="warning"
-                size="sm"
+            <OButton variant="primary" outlined size="lg">
+              <CharacterMedia
+                :character="currentCharacter"
+                :isActive="currentCharacter.id === user?.activeCharacterId"
               />
 
               <div class="h-4 w-px select-none bg-border-300"></div>
@@ -148,32 +118,35 @@ if (userStore.characters.length === 0) {
           </template>
 
           <template #popper="{ hide }">
-            <DropdownItem
-              v-for="char in characters"
-              :checked="char.id === currentCharacterId"
-              tag="RouterLink"
-              :to="{ name: route.name, params: { id: char.id } }"
-              @click="hide"
-            >
-              <CharacterSelectItem
-                :character="char"
-                :modelValue="user!.activeCharacterId === char.id"
-                @update:modelValue="(val: boolean) => onActivateCharacter(char.id, val)"
-              />
-            </DropdownItem>
-
-            <DropdownItem
-              class="text-primary hover:text-primary-hover"
-              @click="
-                () => {
-                  onCreateNewCharacter();
-                  hide();
-                }
-              "
-            >
-              <OIcon icon="add" size="lg" />
-              {{ $t('character.create.title') }}
-            </DropdownItem>
+            <div class="min-w-[24rem]">
+              <DropdownItem
+                v-for="char in characters"
+                :checked="char.id === currentCharacterId"
+                tag="RouterLink"
+                :to="{ name: route.name, params: { id: char.id } }"
+                class="justify-between"
+                @click="hide"
+              >
+                <CharacterSelectItem
+                  :character="char"
+                  :modelValue="user!.activeCharacterId === char.id"
+                  @update:modelValue="(val: boolean) => onActivateCharacter(char.id, val)"
+                />
+              </DropdownItem>
+
+              <DropdownItem
+                class="text-primary hover:text-primary-hover"
+                @click="
+                  () => {
+                    onCreateNewCharacter();
+                    hide();
+                  }
+                "
+              >
+                <OIcon icon="add" size="lg" />
+                {{ $t('character.create.title') }}
+              </DropdownItem>
+            </div>
           </template>
         </VDropdown>
 

diff --git a/src/WebUI/src/pages/characters/[id]/index.vue b/src/WebUI/src/pages/characters/[id]/index.vue
@@ -85,6 +85,7 @@ const onRetireCharacter = async () => {
   ]);
   notify(t('character.settings.retire.notify.success'));
 };
+const shownRetireConfirmTooltip = ref<boolean>(false);
 
 const canSetCharacterForTournament = computed(() =>
   canSetCharacterForTournamentValidate(character.value)
@@ -205,7 +206,11 @@ await fetchPageData(character.value.id);
 
           <SimpleTableRow
             :label="$t('character.statistics.expMultiplier.title')"
-            :value="$t('character.format.expMultiplier', { multiplier: $n(userStore.user!.experienceMultiplier) })"
+            :value="
+              $t('character.format.expMultiplier', {
+                multiplier: $n(userStore.user!.experienceMultiplier),
+              })
+            "
             :tooltip="{
               title: $t('character.statistics.expMultiplier.tooltip.title', {
                 maxExpMulti: $t('character.format.expMultiplier', {
@@ -236,12 +241,14 @@ await fetchPageData(character.value.id);
 
           <SimpleTableRow
             :label="$t('character.statistics.kda.title')"
-            :value="$t('character.format.kda', {
+            :value="
+              $t('character.format.kda', {
                 kills: characterStatistics!.kills,
                 deaths: characterStatistics!.deaths,
                 assists: characterStatistics!.assists,
                 ratio: kdaRatio,
-              })"
+              })
+            "
             :tooltip="{
               title: $t('character.statistics.kda.tooltip.title'),
             }"
@@ -407,7 +414,13 @@ await fetchPageData(character.value.id);
 
         <template v-if="!character.forTournament">
           <!--  -->
-          <Modal>
+          <Modal
+            @applyHide="
+              () => {
+                shownRetireConfirmTooltip = false;
+              }
+            "
+          >
             <VTooltip placement="auto">
               <div>
                 <OButton
@@ -512,17 +525,25 @@ await fetchPageData(character.value.id);
 
             <template #popper="{ hide }">
               <ConfirmActionForm
-                :title="$t('character.settings.retire.dialog.title')"
-                :name="character.name"
+                :name="`${character.name} - ${character.level}`"
                 :confirmLabel="$t('action.apply')"
                 @cancel="hide"
                 @confirm="
                   () => {
-                    onRetireCharacter();
-                    hide();
+                    shownRetireConfirmTooltip = true;
                   }
                 "
               >
+                <template #title>
+                  <div class="flex flex-col items-center gap-2">
+                    <h4 class="text-xl">{{ $t('character.settings.retire.dialog.title') }}</h4>
+                    <CharacterMedia
+                      class="rounded-full border-border-300 bg-base-500/20 px-3 py-2.5 text-primary"
+                      :character="character"
+                      :isActive="character.id === userStore.user?.activeCharacterId"
+                    />
+                  </div>
+                </template>
                 <template #description>
                   <p>
                     {{ $t('character.settings.retire.dialog.desc') }}
@@ -549,6 +570,16 @@ await fetchPageData(character.value.id);
                   </i18n-t>
                 </template>
               </ConfirmActionForm>
+
+              <ConfirmActionTooltip
+                :shown="shownRetireConfirmTooltip"
+                @confirm="
+                  () => {
+                    onRetireCharacter();
+                    hide();
+                  }
+                "
+              />
             </template>
           </Modal>
 

diff --git a/src/WebUI/src/types/vite-components.d.ts b/src/WebUI/src/types/vite-components.d.ts
@@ -19,6 +19,7 @@ declare module 'vue' {
     CharacterInventoryItemDetail: typeof import('./../components/character/inventory/CharacterInventoryItemDetail.vue')['default']
     CharacterInventoryItemList: typeof import('./../components/character/inventory/CharacterInventoryItemList.vue')['default']
     CharacterInventoryItemUpgrades: typeof import('./../components/character/inventory/CharacterInventoryItemUpgrades.vue')['default']
+    CharacterMedia: typeof import('./../components/character/CharacterMedia.vue')['default']
     CharacterSelectItem: typeof import('./../components/character/CharacterSelectItem.vue')['default']
     CharacterStats: typeof import('./../components/character/CharacterStats.vue')['default']
     ClanForm: typeof import('./../components/clan/ClanForm.vue')['default']