refactor(dashboard): new input with variables (#732)

* refactor(dashboard): new input with variables * feat(dashboard): refactor variables input
twirapp · May 23, 2024 · 6acf787 · 6acf787
1 parent 8e58ada
commit 6acf787
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 49 deletions.
diff --git a/apps/api-gql/schema/games.graphqls b/apps/api-gql/schema/games.graphqls
@@ -86,7 +86,7 @@ type SeppukuGame {
 
 input SeppukuGameOpts {
 	enabled: Boolean
-	timeoutSeconds: Int @validate(constraint: "max=84600,min=1")
+	timeoutSeconds: Int @validate(constraint: "max=86400,min=1")
 	timeoutModerators: Boolean
 	message: String @validate(constraint: "max=500")
 	messageModerators: String @validate(constraint: "max=500")
@@ -115,15 +115,15 @@ type VotebanGame {
 
 input VotebanGameOpts {
 	enabled: Boolean
-	timeoutSeconds: Int @validate(constraint: "min=1,max=84600")
+	timeoutSeconds: Int @validate(constraint: "min=1,max=86400")
 	timeoutModerators: Boolean
 	initMessage: String @validate(constraint: "max=500")
 	banMessage: String @validate(constraint: "max=500")
 	banMessageModerators: String @validate(constraint: "max=500")
 	surviveMessage: String @validate(constraint: "max=500")
 	surviveMessageModerators: String @validate(constraint: "max=500")
 	neededVotes: Int @validate(constraint: "min=1,max=999999")
-	voteDuration: Int @validate(constraint: "min=1,max=84600")
+	voteDuration: Int @validate(constraint: "min=1,max=86400")
 	votingMode: VoteBanGameVotingMode @validate(constraint: "max=500")
 	chatVotesWordsPositive: [String!] @validate(constraint: "dive,max=500")
 	chatVotesWordsNegative: [String!] @validate(constraint: "dive,max=500")

diff --git a/frontend/dashboard/src/components/games/russianRoulette.vue b/frontend/dashboard/src/components/games/russianRoulette.vue
@@ -124,7 +124,7 @@ function resetSettings() {
 			</NFormItem>
 
 			<NFormItem :label="t('games.russianRoulette.timeoutSeconds')">
-				<NInputNumber v-model:value="formValue.timeoutSeconds" :max="1209600" />
+				<NInputNumber v-model:value="formValue.timeoutSeconds" :max="86400" />
 			</NFormItem>
 
 			<NFormItem :label="t('games.russianRoulette.decisionSeconds')">

diff --git a/frontend/dashboard/src/components/games/seppuku.vue b/frontend/dashboard/src/components/games/seppuku.vue
@@ -98,7 +98,7 @@ async function save() {
 			<NInputNumber
 				v-model:value="formValue.timeoutSeconds"
 				min="1"
-				max="84600"
+				max="86400"
 			/>
 		</NFormItem>
 

diff --git a/frontend/dashboard/src/components/games/voteban.vue b/frontend/dashboard/src/components/games/voteban.vue
@@ -146,15 +146,15 @@ async function save() {
 			</TagsInput>
 
 			<NFormItem :label="t('games.voteban.voteDuration')">
-				<NInputNumber v-model:value="formValue.voteDuration" style="width: 100%" :min="1" :max="84600" />
+				<NInputNumber v-model:value="formValue.voteDuration" style="width: 100%" :min="1" :max="86400" />
 			</NFormItem>
 
 			<NFormItem :label="t('games.voteban.neededVotes')">
 				<NInputNumber v-model:value="formValue.neededVotes" style="width: 100%" :min="1" :max="999999" />
 			</NFormItem>
 
 			<NFormItem :label="t('games.voteban.banDuration')">
-				<NInputNumber v-model:value="formValue.timeoutSeconds" style="width: 100%" :min="1" :max="84600" />
+				<NInputNumber v-model:value="formValue.timeoutSeconds" style="width: 100%" :min="1" :max="86400" />
 			</NFormItem>
 		</div>
 

diff --git a/frontend/dashboard/src/components/variable-input.vue b/frontend/dashboard/src/components/variable-input.vue
@@ -1,12 +1,23 @@
-<script setup lang='ts'>
-import { NMention, NText } from 'naive-ui'
-import { computed, h } from 'vue'
+<script setup lang="ts">
+import { Variable } from 'lucide-vue-next'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import type { MentionOption } from 'naive-ui'
-import type { FunctionalComponent, VNodeChild } from 'vue'
+import type { FunctionalComponent } from 'vue'
 
-import { useVariablesApi } from '@/api/variables.js'
+import { useVariablesApi } from '@/api/variables'
+import { Button } from '@/components/ui/button'
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from '@/components/ui/command'
+import { Input } from '@/components/ui/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Textarea } from '@/components/ui/textarea'
 
 withDefaults(defineProps<{
 	inputType?: 'text' | 'textarea'
@@ -25,39 +36,56 @@ const { t } = useI18n()
 
 const { allVariables } = useVariablesApi()
 
-const selectVariables = computed<MentionOption[]>(() => {
+const selectVariables = computed(() => {
 	return allVariables.value.map((variable) => ({
-		label: `(${variable.example})`,
-		value: `(${variable.example})`,
+		label: `$(${variable.example})`,
+		value: `$(${variable.example})`,
 		description: variable.description,
 	}))
 })
 
-function renderVariableSelectLabel(option: {
-	type: string
-	label: string
-	description: string
-}): VNodeChild {
-	if (!option.description) return `$${option.label}`
-	const variable = `$${option.label}`
-	const description = h(NText, { depth: 3 }, option.description)
-	return h('span', {}, [variable, ' ', description])
+const open = ref(false)
+
+function handleSelect(value: string) {
+	text.value += ` ${value}`
 }
 </script>
 
 <template>
-	<NMention
-		v-model:value="text"
-		:render-label="renderVariableSelectLabel"
-		placeholder="Response"
-		prefix="$"
-		class="w-full"
-		:type="inputType"
-		:options="selectVariables"
-		:autosize="inputType === 'text' ? {} : { minRows, maxRows }"
-	>
-		<template #empty>
-			{{ t('sharedTexts.placeCursorMessage') }}
-		</template>
-	</NMention>
+	<Popover v-model:open="open">
+		<component :is="inputType === 'textarea' ? Textarea : Input" v-model="text" :maxlength="500" />
+		<PopoverTrigger as-child>
+			<Button class="ml-2" variant="ghost" size="icon">
+				<Variable class="size-auto opacity-50" />
+			</Button>
+		</PopoverTrigger>
+		<PopoverContent
+			align="start"
+			class="p-0 z-[9999] max-w-[400px]"
+		>
+			<Command
+				:reset-search-term-on-blur="false"
+			>
+				<CommandInput class="h-9" :placeholder="t('sharedTexts.searchPlaceholder')" />
+				<CommandEmpty>
+					Not found
+				</CommandEmpty>
+				<CommandList>
+					<CommandGroup>
+						<CommandItem
+							v-for="option in selectVariables"
+							:key="option.value"
+							:value="option.value"
+							@select="handleSelect(option.value)"
+						>
+							<div class="flex flex-wrap flex-col gap-0.5">
+								<span>{{ option.label }}</span>
+								<span v-if="option.description" class="text-xs">{{ option.description }}</span>
+							</div>
+						</CommandItem>
+					</CommandGroup>
+				</CommandList>
+			</Command>
+		</PopoverContent>
+	</Popover>
 </template>
diff --git a/frontend/dashboard/src/features/greetings/ui/greetings-dialog.vue b/frontend/dashboard/src/features/greetings/ui/greetings-dialog.vue
@@ -70,17 +70,20 @@ async function save() {
 		userId: data.userId,
 	}
 
-	if (data.id) {
-		await greetingsUpdate.executeMutation({
-			id: data.id,
-			opts,
-		})
-	} else {
-		await greetingsCreate.executeMutation({ opts })
+	try {
+		if (data.id) {
+			await greetingsUpdate.executeMutation({
+				id: data.id,
+				opts,
+			})
+		} else {
+			await greetingsCreate.executeMutation({ opts })
+		}
+		emits('close')
+		open.value = false
+	} catch (e) {
+		console.error(e)
 	}
-
-	emits('close')
-	open.value = false
 }
 
 const { t } = useI18n()