Merge pull request #20 from simple-retro/feat/feedback-improvements

feat: improvements from feedbacks

mock/simple-api.json

@@ -12,56 +12,22 @@
       "uuid": "de4b66da-06ed-4fad-b044-705339fb40c1",
       "type": "http",
       "documentation": "",
-      "method": "post",
-      "endpoint": "question",
+      "method": "get",
+      "endpoint": "limits",
       "responses": [
         {
           "uuid": "39c8ef9d-0227-4903-ae7f-34d77267785f",
-          "body": "{\n  \"id\": \"question-123\"\n}",
+          "body": "{\n  \"retrospective\": {\n  \"name\": 100,\n  \"description\": 300,\n    }\n  },\n  \"question\": {\n    \"text\": 300\n  },\n  \"answer\": {\n    \"text\": 600\n  }\n}",
           "latency": 0,
-          "statusCode": 201,
-          "label": "",
-          "headers": [],
-          "bodyType": "INLINE",
-          "filePath": "",
-          "databucketID": "",
-          "sendFileAsBody": false,
-          "rules": [
-            {
-              "target": "body",
-              "modifier": "question",
-              "value": "",
-              "invert": true,
-              "operator": "null"
-            },
-            {
-              "target": "cookie",
-              "modifier": "retrospective_id",
-              "value": "retro-123",
-              "invert": false,
-              "operator": "equals"
-            }
-          ],
-          "rulesOperator": "AND",
-          "disableTemplating": false,
-          "fallbackTo404": false,
-          "default": false,
-          "crudKey": "id",
-          "callbacks": []
-        },
-        {
-          "uuid": "13bb66ee-5827-48e9-945b-f3477716bebf",
-          "body": "{\n  \"error\": \"This retro doesnt exists\"\n}",
-          "latency": 0,
-          "statusCode": 404,
+          "statusCode": 200,
           "label": "",
           "headers": [],
           "bodyType": "INLINE",
           "filePath": "",
           "databucketID": "",
           "sendFileAsBody": false,
           "rules": [],
-          "rulesOperator": "OR",
+          "rulesOperator": "AND",
           "disableTemplating": false,
           "fallbackTo404": false,
           "default": true,
@@ -96,13 +62,21 @@
       "key": "Content-Type",
       "value": "application/json"
     },
+    {
+      "key": "Access-Control-Allow-Methods",
+      "value": "GET,POST,PUT,PATCH,DELETE,HEAD,OPTIONS"
+    },
+    {
+      "key": "Access-Control-Allow-Headers",
+      "value": "Content-Type, Origin, Accept, Authorization, Content-Length, X-Requested-With"
+    },
     {
       "key": "Access-Control-Allow-Origin",
-      "value": "*"
+      "value": "http://localhost:5173"
     },
     {
-      "key": "Set-Cookie",
-      "value": "retrospective_id=retro-123"
+      "key": "Access-Control-Allow-Credentials",
+      "value": "true"
     }
   ],
   "proxyReqHeaders": [
@@ -119,4 +93,4 @@
   ],
   "data": [],
   "callbacks": []
-}
+}

src/components/answer/AnswerInputs.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { useLimistStore } from '../../stores/limitsStore';
+  import BaseButton from '../core/BaseButton.vue';
+  import LimitLabel from '../core/LimitLabel.vue';
+
+  const limitsStore = useLimistStore();
+
+  const props = defineProps<{
+    answer: string;
+    label: string;
+    placeholder: string;
+    buttonLabel: string;
+    disabled: boolean;
+  }>();
+
+  const charactersLeft = computed(() => {
+    const limit = limitsStore.limits?.answer.text ?? 0;
+
+    return limit - props.answer.length;
+  });
+
+  const emit = defineEmits<{
+    'update:answer': [string];
+    clicked: [];
+  }>();
+</script>
+
+<template>
+  <LimitLabel :characters-left="charactersLeft" :label="label" label-for="answer" />
+
+  <textarea
+    id="answer"
+    aria-describedby="left-question"
+    :value="answer"
+    :disabled="disabled || !limitsStore.limits"
+    :maxlength="limitsStore.limits?.answer.text"
+    rows="4"
+    class="block mb-5 p-2.5 resize-none w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 disabled:opacity-75"
+    :placeholder="placeholder"
+    @input="emit('update:answer', ($event.target as HTMLInputElement).value)"
+  />
+
+  <BaseButton
+    :disabled="
+      disabled ||
+      answer.length < 1 ||
+      !limitsStore.limits ||
+      answer.length > limitsStore.limits.answer.text
+    "
+    class="w-full"
+    @click="emit('clicked')"
+  >
+    {{ buttonLabel }}
+  </BaseButton>
+</template>

src/components/answer/AnswerLayout.vue

@@ -6,7 +6,7 @@
   import PageDivider from '../core/PageDivider.vue';
   import DeleteAnswer from './DeleteAnswer.vue';
 
-  const { answer } = defineProps<{
+  defineProps<{
     answer: Answer;
   }>();
 
@@ -24,7 +24,7 @@
   <div>
     <div class="flex flex-col cursor-pointer" @click="controlAnswerModal(answer)">
       <i class="absolute">•</i>
-      <div class="text-black ml-5">{{ answer.text }}</div>
+      <div class="text-black ml-5 whitespace-pre-line break-all">{{ answer.text }}</div>
     </div>
 
     <ModalifyComponent v-if="isControlModalOpen" @close="isControlModalOpen = false">

src/components/answer/CreateAnswer.vue

@@ -3,14 +3,15 @@
   import answerApi from '../../services/answerApi';
   import { NotificationType, useNotifyStore } from '../../stores/notifyStore';
   import { Question, useRetrospectiveStore } from '../../stores/retrospectiveStore';
-  import BaseButton from '../core/BaseButton.vue';
+  import AnswerInputs from './AnswerInputs.vue';
 
   const notifyStore = useNotifyStore();
   const retroStore = useRetrospectiveStore();
+
   const answer = ref('');
-  const disableIntearction = ref(false);
+  const disableInteraction = ref(false);
 
-  const { question, questionIndex } = defineProps<{
+  const props = defineProps<{
     question: Question;
     questionIndex: number;
   }>();
@@ -20,40 +21,29 @@
   const createAnswer = async () => {
     if (answer.value.length < 1) return;
 
-    disableIntearction.value = true;
+    disableInteraction.value = true;
 
-    const res = await answerApi.createAnswer(answer.value, question.id);
+    const res = await answerApi.createAnswer(answer.value, props.question.id);
 
     emits('fetched', { success: res.error === undefined });
 
-    disableIntearction.value = false;
+    disableInteraction.value = false;
 
     if (res.error)
       return notifyStore.notify('An error occured to create the question', NotificationType.Error);
 
-    retroStore.answer.createAnswer({ ...res, question_id: question.id });
+    retroStore.answer.createAnswer({ ...res, question_id: props.question.id });
   };
 </script>
 
 <template>
-  <label for="answer" class="block mb-2 text-md font-bold text-gray-900">
-    {{ `Q${questionIndex}. Your answer` }}
-  </label>
-
-  <textarea
-    id="answer"
-    v-model="answer"
-    :disabled="disableIntearction"
-    rows="4"
-    class="block mb-5 p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 disabled:opacity-75"
+  <AnswerInputs
+    :label="`Q${questionIndex}. Your answer`"
+    :answer="answer"
     :placeholder="question.text"
+    button-label="Send answer"
+    :disabled="disableInteraction"
+    @clicked="createAnswer"
+    @update:answer="($event) => (answer = $event)"
   />
-
-  <BaseButton
-    :disabled="disableIntearction || answer.length < 1"
-    class="w-full"
-    @click="createAnswer"
-  >
-    Send answer
-  </BaseButton>
 </template>

src/components/answer/DeleteAnswer.vue

@@ -12,24 +12,24 @@
     close: [];
   }>();
 
-  const { answer } = defineProps<{
+  const props = defineProps<{
     answer: Answer;
   }>();
 
   const confirmedId = ref('');
 
   const deleteAnswer = async () => {
-    if (confirmedId.value !== answer.id) {
-      confirmedId.value = answer.id;
+    if (confirmedId.value !== props.answer.id) {
+      confirmedId.value = props.answer.id;
       return;
     }
 
-    const res = await answerApi.deleteAnswer(answer.id);
+    const res = await answerApi.deleteAnswer(props.answer.id);
 
     if (res?.error)
       return notifyStore.notify('An error occured to delete the answer', NotificationType.Error);
 
-    retroStore.answer.deleteAnswer(answer);
+    retroStore.answer.deleteAnswer(props.answer);
 
     emits('close');
   };

src/components/answer/UpdateAnswer.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
   import { ref } from 'vue';
-  import BaseButton from '../core/BaseButton.vue';
   import { NotificationType, useNotifyStore } from '../../stores/notifyStore';
   import { Answer, useRetrospectiveStore } from '../../stores/retrospectiveStore';
   import answerApi from '../../services/answerApi';
+  import AnswerInputs from './AnswerInputs.vue';
 
   const retroStore = useRetrospectiveStore();
   const notifyStore = useNotifyStore();
@@ -12,19 +12,22 @@
     close: [];
   }>();
 
-  const { answer } = defineProps<{
+  const props = defineProps<{
     answer: Answer;
   }>();
 
-  const updatedText = ref(answer.text);
+  const updatedText = ref(props.answer.text);
+  const disableInteraction = ref(false);
 
   const updateAnswer = async () => {
-    if (updatedText.value === answer.text) {
+    if (updatedText.value === props.answer.text) {
       emits('close');
       return;
     }
 
-    const res = await answerApi.editAnswer({ ...answer, text: updatedText.value });
+    disableInteraction.value = true;
+    const res = await answerApi.editAnswer({ ...props.answer, text: updatedText.value });
+    disableInteraction.value = false;
 
     if (res.error)
       return notifyStore.notify(
@@ -39,14 +42,13 @@
 </script>
 
 <template>
-  <label for="answer" class="block mb-2 text-md font-bold text-gray-900">Update answer</label>
-  <textarea
-    id="answer"
-    v-model="updatedText"
-    rows="6"
-    class="flex mb-5 p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 disabled:opacity-75"
+  <AnswerInputs
+    label="Update answer"
+    :answer="updatedText"
     placeholder="Eat potato..."
+    button-label="Update answer"
+    :disabled="disableInteraction"
+    @clicked="updateAnswer"
+    @update:answer="($event) => (updatedText = $event)"
   />
-
-  <BaseButton class="w-full" @click="updateAnswer">Update answer</BaseButton>
 </template>

src/components/core/ContactInfo.vue

@@ -3,7 +3,7 @@
   import LinkedinIcon from '../icons/LinkedinIcon.vue';
   import WebsiteIcon from '../icons/WebsiteIcon.vue';
 
-  const { name, role, avatar, githubUser, linkedinUser, websiteLink } = defineProps<{
+  defineProps<{
     name: string;
     role: string;
     avatar: string;

src/components/core/KnownRetros.vue

@@ -3,7 +3,7 @@
   import { useRouter } from 'vue-router';
 
   const router = useRouter();
-  const { retros } = defineProps<{ retros: KnownRetro[] }>();
+  defineProps<{ retros: KnownRetro[] }>();
 
   const redirectToRetro = (retroId: string) => {
     router.push({ name: 'retrospective.view', params: { id: retroId } });