chore: add input constraints

qcp · Feb 10, 2024 · 28e3d00 · 28e3d00
1 parent 09f4ca2
commit 28e3d00
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 77 deletions.
diff --git a/src/components/GameSettings.vue b/src/components/GameSettings.vue
diff --git a/src/components/SettingsDialog.vue b/src/components/SettingsDialog.vue
@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import type { IVoteSystems } from '@/constants/voteSystem'
 
+const voteSystemOptions = computed(() =>
+  VoteSystems.map(name => ({
+    name,
+    description: VoteSystemConfig[name].description,
+  })),
+)
+
 const gameName = defineModel<string>('gameName')
 const voteSystemName = defineModel<IVoteSystems>('voteSystemName')
 
@@ -9,6 +16,24 @@ const voteSystemNameDraft = ref<IVoteSystems>('fibonachi')
 
 const [visible, toggle] = useToggle()
 
+const constraint = computed(() => {
+  const errors = new Map<'gameName' | 'voteSystemName', string>()
+  const gameName = gameNameDraft.value?.trim()
+  if (!gameName) {
+    errors.set('gameName', `Name must be non empty`)
+  }
+  else if (gameName.length < 3) {
+    errors.set('gameName', `Name must be at least 3 symbol length`)
+  }
+  else if (gameName.length > 15) {
+    errors.set('gameName', `Name must be less 15 symbol length`)
+  }
+  if (!voteSystemNameDraft.value) {
+    errors.set('voteSystemName', `Select prefered vote system`)
+  }
+  return errors
+})
+
 watch(
   gameName,
   () => {
@@ -19,7 +44,7 @@ watch(
   { immediate: true },
 )
 watch(
-  gameName,
+  voteSystemName,
   () => {
     if (voteSystemName.value) {
       voteSystemNameDraft.value = voteSystemName.value
@@ -28,16 +53,8 @@ watch(
   { immediate: true },
 )
 
-const saveReady = computed(
-  () =>
-    // Required field exist
-    gameNameDraft.value
-    && voteSystemNameDraft.value
-    // Has any changes in fields
-    && !(gameName.value === gameNameDraft.value && voteSystemName.value === voteSystemNameDraft.value),
-)
 function save() {
-  gameName.value = gameNameDraft.value
+  gameName.value = gameNameDraft.value.trim()
   voteSystemName.value = voteSystemNameDraft.value
 
   visible.value = false
@@ -56,23 +73,58 @@ defineExpose({ toggle })
       content: { style: 'padding: unset' },
     }"
   >
-    <game-settings
-      v-model:game-name="gameNameDraft"
-      v-model:vote-system-name="voteSystemNameDraft"
-    />
+    <div class="settings">
+      <div class="group">
+        <span>Game name</span>
+        <p-input-text
+          id="game-name"
+          v-model="gameNameDraft"
+          :class="{ 'p-invalid': constraint.has('gameName') }"
+          :maxlength="20"
+        />
+        <small v-if="constraint.has('gameName')" id="game-name-help">{{ constraint.get('gameName') }}</small>
+      </div>
+      <div class="group">
+        <span>Game vote system</span>
+        <p-dropdown
+          id="vote-system"
+          v-model="voteSystemNameDraft"
+          :options="voteSystemOptions"
+          :class="{ 'p-invalid': constraint.has('voteSystemName') }"
+          option-value="name"
+          option-label="description"
+        />
+        <small v-if="constraint.has('voteSystemName')" id="vote-systemc">{{ constraint.get('voteSystemName') }}</small>
+      </div>
+      <div class="group">
+        <span>Vote system preview</span>
+        <cards-selector :vote-system-name="voteSystemNameDraft" />
+      </div>
+    </div>
     <div class="actions">
       <p-button
         icon="pi pi-save"
         label="save"
         severity="success"
-        :disabled="!saveReady"
+        :disabled="constraint.size > 0"
         @click="save"
       />
     </div>
   </p-dialog>
 </template>
 
 <style scoped>
+.settings {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--content-padding) * 1.5);
+  padding: var(--content-padding);
+}
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--inline-spacing);
+}
 .actions {
   display: flex;
   align-items: center;

diff --git a/src/components/UserSettings.vue b/src/components/UserSettings.vue
@@ -7,26 +7,56 @@ watch(
   () => (usernameDraft.value = username.value),
   { immediate: true },
 )
+const constraint = computed(() => {
+  const errors = new Map<'username', string>()
+  const name = usernameDraft.value?.trim()
+  if (!name) {
+    errors.set('username', `Name must be non empty`)
+  }
+  else if (name.length < 3) {
+    errors.set('username', `Name must be at least 3 symbol length`)
+  }
+  else if (name.length > 15) {
+    errors.set('username', `Name must be less 15 symbol length`)
+  }
+  return errors
+})
 watchDebounced(
   () => usernameDraft.value,
-  (name) => {
-    if (name) {
-      username.value = name
+  () => {
+    const name = usernameDraft.value?.trim()
+    if (name && constraint.value.size === 0) {
+      username.value = name.trim()
     }
   },
   { debounce: 1000 },
 )
 </script>
 
 <template>
-  <span class="p-input-icon-right">
-    <i v-show="usernameDraft !== username" class="pi pi-spin pi-spinner" />
-    <p-input-text
-      v-model="usernameDraft"
-      :class="{ 'p-invalid': !usernameDraft }"
-      :maxlength="10"
-    />
-  </span>
+  <div class="username-container">
+    <span class="usename-input">
+      <p-input-text
+        id="username"
+        v-model="usernameDraft"
+        :class="{ 'p-invalid': constraint.has('username') }"
+        :maxlength="20"
+      />
+      <i v-show="usernameDraft !== username && constraint.size === 0" class="pi pi-spin pi-spinner" />
+    </span>
+    <small v-if="constraint.has('username')" id="username-help">{{ constraint.get('username') }}</small>
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.username-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--inline-spacing);
+}
+.usename-input {
+  display: flex;
+  align-items: center;
+  gap: var(--inline-spacing);
+}
+</style>
diff --git a/src/composables/useGame.ts b/src/composables/useGame.ts
@@ -1,5 +1,6 @@
 import { object, optional, parse, picklist, string } from 'valibot'
 import type { PostgrestError } from '@supabase/supabase-js'
+import type { Ref } from 'vue'
 import supabase from '@/plugins/supabase'
 
 function throwIfNok(res: string, event: string) {

diff --git a/src/views/GameView.vue b/src/views/GameView.vue
@@ -72,7 +72,10 @@ const groupedView = ref(false)
           />
         </div>
 
-        <p-overlay-panel ref="userSettingsEl">
+        <p-overlay-panel
+          ref="userSettingsEl"
+          :pt="{ content: { style: { padding: 'var(--inline-spacing)' } } }"
+        >
           <user-settings v-model:username="user.name" />
         </p-overlay-panel>
         <share-dialog ref="shareDialogEl" />