From 441efe7d832c0e510a81855e8fbbc882d638296d Mon Sep 17 00:00:00 2001
From: Mykyta Mykulskyi <my.garbage813@gmail.com>
Date: Mon, 23 Dec 2024 21:05:32 +0100
Subject: [PATCH] feat: add `mode` and `description` to quiz

---
 .../js/Helpers/vDynamicTextAreaHeight.ts      |  7 ++--
 resources/js/components/Crud/CrudInput.vue    |  7 +++-
 .../components/QuizzesPanel/QuizComponent.vue |  2 +-
 .../js/components/QuizzesPanel/QuizHeader.vue | 42 +++++++++++++++++++
 4 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/resources/js/Helpers/vDynamicTextAreaHeight.ts b/resources/js/Helpers/vDynamicTextAreaHeight.ts
index 08dd79b9..70d4c060 100644
--- a/resources/js/Helpers/vDynamicTextAreaHeight.ts
+++ b/resources/js/Helpers/vDynamicTextAreaHeight.ts
@@ -1,14 +1,13 @@
 import { type DirectiveBinding } from 'vue'
 
 function initDynamicHeightCalc(input: HTMLTextAreaElement & { _calculateDynamicHeight: () => void }, binding?: DirectiveBinding<boolean>) {
+  input.style.resize = 'none'
   input._calculateDynamicHeight = () => calculateDynamicHeight(input, binding)
 
   document.fonts.addEventListener('loadingdone', input._calculateDynamicHeight)
   input.addEventListener('transitionend', input._calculateDynamicHeight)
 
   input._calculateDynamicHeight()
-  input.style.resize = 'none'
-  input.style.overflowY = 'hidden'
 }
 
 function calculateDynamicHeight(input: HTMLTextAreaElement, binding?: DirectiveBinding<boolean>){
@@ -18,8 +17,8 @@ function calculateDynamicHeight(input: HTMLTextAreaElement, binding?: DirectiveB
 
   // Reset the height to a minimal value to refresh scrollHeight.
   // This ensures the textarea will shrink when text is removed.
-  input.style.height = '5px'
-  input.style.height = `${input.scrollHeight}px`
+  input.style.height = '0'
+  input.style.height = `${input.scrollHeight+1}px`
 }
 
 function removeDynamicHeightCalc(input: HTMLTextAreaElement & { _calculateDynamicHeight: () => void }) {
diff --git a/resources/js/components/Crud/CrudInput.vue b/resources/js/components/Crud/CrudInput.vue
index 8ddd9649..3c3dd09f 100644
--- a/resources/js/components/Crud/CrudInput.vue
+++ b/resources/js/components/Crud/CrudInput.vue
@@ -13,6 +13,8 @@ const props = defineProps<{
     error?: string
     password?: boolean
     large?: boolean
+    row?: boolean
+    column?: boolean
     format?: (value: T) => any
   } & InputProps>()
 
@@ -28,10 +30,12 @@ function handleInput() {
 <template>
   <div
     class="flex gap-1 duration-200 min-h-7"
-    :class="{ 'text-sm text-gray-600' : !selected && !editing && !large, 'text-lg h-8': large }"
+    :class="{ 'text-sm text-gray-600' : !selected && !editing && !large, 'text-lg min-h-8': large }"
   >
     <InputWrapper
       :label
+      :row
+      :column
       :hide-content="!value && !editing"
       :error="error"
       :hide-error="!editing"
@@ -41,6 +45,7 @@ function handleInput() {
           <b
             v-if="!editing"
             class="row-start-1 col-start-1"
+            :class="{'text-nowrap truncate': !selected}"
           >
             {{ format ? format(value) : value }}
           </b>
diff --git a/resources/js/components/QuizzesPanel/QuizComponent.vue b/resources/js/components/QuizzesPanel/QuizComponent.vue
index 35b6aaee..830247eb 100644
--- a/resources/js/components/QuizzesPanel/QuizComponent.vue
+++ b/resources/js/components/QuizzesPanel/QuizComponent.vue
@@ -112,7 +112,7 @@ function toggleEditing(isEditing: boolean){
       :errors="errors"
     />
 
-    <template v-if="selected">
+    <template v-if="selected && !quiz.isLocal">
       <InputWrapper
         v-for="(question, idx) of quiz.questions"
         :key="getKey(question)"
diff --git a/resources/js/components/QuizzesPanel/QuizHeader.vue b/resources/js/components/QuizzesPanel/QuizHeader.vue
index dd14b886..ac5eed1e 100644
--- a/resources/js/components/QuizzesPanel/QuizHeader.vue
+++ b/resources/js/components/QuizzesPanel/QuizHeader.vue
@@ -4,6 +4,7 @@ import CustomDatepicker from '@/components/Common/CustomDatepicker.vue'
 import { formatDate } from '@/Helpers/Format'
 import CrudInput from '@/components/Crud/CrudInput.vue'
 import { computed } from 'vue'
+import vDynamicTextAreaHeight from '@/Helpers/vDynamicTextAreaHeight'
 
 defineProps<{
   editing: boolean
@@ -12,6 +13,7 @@ defineProps<{
 }>()
 const quiz = defineModel<Quiz>({ required: true })
 const publicAvailabityString = computed(() => quiz.value.isPublic ? 'Dostępny dla wszystkich' : 'Dostępny tylko dla zaproszonych')
+const quizModeString = computed(() => quiz.value.isLocal ? 'Offline' : 'Online')
 </script>
 
 <template>
@@ -65,5 +67,45 @@ const publicAvailabityString = computed(() => quiz.value.isPublic ? 'Dostępny d
         {{ publicAvailabityString }}
       </button>
     </CrudInput>
+    
+    <CrudInput
+      v-model="quizModeString"
+      label="Tryb:"
+      :error="errors.is_local"
+      :editing
+      :selected
+    >
+      <button
+        class="font-bold text-primary border-b border-primary/30 hover:border-primary transition-colors"
+        @click="quiz.isLocal = !quiz.isLocal"
+      >
+        {{ quizModeString }}
+      </button>
+    </CrudInput>
+
+    <Transition>
+      <CrudInput
+        v-if="quiz.description || editing"
+        v-model="quiz.description"
+        label="Opis:"
+        :column="selected"
+        :error="errors.is_public"
+        :editing
+        :selected
+      >
+        <textarea
+          v-model="quiz.description"
+          v-dynamic-text-area-height
+          name="name"
+          autocomplete="off"
+          class="size-full bg-transparent outline-none font-bold"
+          :disabled="!editing"
+          :class="{
+            'border-b border-b-primary/30 duration-200 transition-colors hover:border-b-primary/60 text-primary' : editing,
+            'border-b-red' : errors.name
+          }"
+        />
+      </CrudInput>
+    </Transition>
   </div>
 </template>