chore: refactor issue component

app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue

@@ -1,7 +1,7 @@
 <template>
   <div @submit.prevent="onSubmit">
     <woot-input
-      v-model="state.title"
+      v-model="formState.title"
       :class="{ error: v$.title.$error }"
       class="w-full"
       :styles="{ ...inputStyles, padding: '6px 12px' }"
@@ -15,10 +15,9 @@
     <label>
       {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.DESCRIPTION.LABEL') }}
       <textarea
-        v-model="state.description"
+        v-model="formState.description"
         :style="{ ...inputStyles, padding: '8px 12px' }"
         rows="3"
-        type="text"
         class="text-sm"
         :placeholder="
           $t(
@@ -30,9 +29,9 @@
     <label :class="{ error: v$.teamId.$error }">
       {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TEAM.LABEL') }}
       <select
-        v-model="state.teamId"
+        v-model="formState.teamId"
         :style="inputStyles"
-        @change="onChangeTeam($event)"
+        @change="onChangeTeam"
       >
         <option v-for="item in teams" :key="item.name" :value="item.id">
           {{ item.name }}
@@ -44,49 +43,44 @@
     </label>
     <label>
       {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.ASSIGNEE.LABEL') }}
-      <select v-model="state.assigneeId" :style="inputStyles">
+      <select v-model="formState.assigneeId" :style="inputStyles">
         <option v-for="item in assignees" :key="item.name" :value="item.id">
           {{ item.name }}
         </option>
       </select>
     </label>
-
     <label>
       {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.LABEL.LABEL') }}
-      <select v-model="state.labelId" :style="inputStyles">
+      <select v-model="formState.labelId" :style="inputStyles">
         <option v-for="item in labels" :key="item.name" :value="item.id">
           {{ item.name }}
         </option>
       </select>
     </label>
-
     <label>
       {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.PRIORITY.LABEL') }}
-      <select v-model="state.priority" :style="inputStyles">
+      <select v-model="formState.priority" :style="inputStyles">
         <option v-for="item in priorities" :key="item.name" :value="item.id">
           {{ item.name }}
         </option>
       </select>
     </label>
-
     <label>
       {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.PROJECT.LABEL') }}
-      <select v-model="state.projectId" :style="inputStyles">
+      <select v-model="formState.projectId" :style="inputStyles">
         <option v-for="item in projects" :key="item.name" :value="item.id">
           {{ item.name }}
         </option>
       </select>
     </label>
-
     <label>
       {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.STATUS.LABEL') }}
-      <select v-model="state.stateId" :style="inputStyles">
+      <select v-model="formState.stateId" :style="inputStyles">
         <option v-for="item in statuses" :key="item.name" :value="item.id">
           {{ item.name }}
         </option>
       </select>
     </label>
-
     <div class="flex items-center justify-end w-full gap-2 mt-8">
       <woot-button
         class="px-4 rounded-xl button clear outline-woot-200/50 outline"
@@ -105,12 +99,13 @@
     </div>
   </div>
 </template>
+
 <script setup>
-import LinearAPI from 'dashboard/api/integrations/linear';
 import { reactive, computed, onMounted, ref } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { useI18n } from 'dashboard/composables/useI18n';
 import { useAlert } from 'dashboard/composables';
+import LinearAPI from 'dashboard/api/integrations/linear';
 import validations from './validations';
 
 const props = defineProps({
@@ -124,6 +119,7 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['close']);
 const { t } = useI18n();
 
 const teams = ref([]);
@@ -133,37 +129,17 @@ const labels = ref([]);
 const statuses = ref([]);
 
 const priorities = [
-  {
-    id: 0,
-    name: 'No priority',
-  },
-  {
-    id: 1,
-    name: 'Urgent',
-  },
-  {
-    id: 2,
-    name: 'High',
-  },
-  {
-    id: 3,
-    name: 'Normal',
-  },
-  {
-    id: 4,
-    name: 'Low',
-  },
+  { id: 0, name: 'No priority' },
+  { id: 1, name: 'Urgent' },
+  { id: 2, name: 'High' },
+  { id: 3, name: 'Normal' },
+  { id: 4, name: 'Low' },
 ];
 
 const isCreating = ref(false);
+const inputStyles = { borderRadius: '12px', fontSize: '14px' };
 
-const inputStyles = {
-  borderRadius: '12px',
-  fontSize: '14px',
-};
-const emit = defineEmits(['close']);
-
-const state = reactive({
+const formState = reactive({
   title: '',
   description: '',
   teamId: '',
@@ -174,27 +150,24 @@ const state = reactive({
   projectId: '',
 });
 
-const v$ = useVuelidate(validations, state);
+const v$ = useVuelidate(validations, formState);
 
-const isSubmitDisabled = computed(() => {
-  return v$.value.title.$invalid || isCreating.value;
-});
-
-const nameError = computed(() => {
-  return v$.value.title.$error
+const isSubmitDisabled = computed(
+  () => v$.value.title.$invalid || isCreating.value
+);
+const nameError = computed(() =>
+  v$.value.title.$error
     ? t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.REQUIRED_ERROR')
-    : '';
-});
-
-const teamError = computed(() => {
-  return v$.value.teamId.$error
+    : ''
+);
+const teamError = computed(() =>
+  v$.value.teamId.$error
     ? t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TEAM.REQUIRED_ERROR')
-    : '';
-});
+    : ''
+);
+
+const onClose = () => emit('close');
 
-const onClose = () => {
-  emit('close');
-};
 const getTeams = async () => {
   try {
     const response = await LinearAPI.getTeams();
@@ -206,7 +179,7 @@ const getTeams = async () => {
 
 const getTeamEntities = async () => {
   try {
-    const response = await LinearAPI.getTeamEntities(state.teamId);
+    const response = await LinearAPI.getTeamEntities(formState.teamId);
     assignees.value = response.data.users;
     labels.value = response.data.labels;
     statuses.value = response.data.states;
@@ -219,40 +192,28 @@ const getTeamEntities = async () => {
 };
 
 const onChangeTeam = event => {
-  state.teamId = event.target.value;
-  state.assigneeId = '';
-  state.stateId = '';
-  state.labelId = '';
+  formState.teamId = event.target.value;
+  formState.assigneeId = '';
+  formState.stateId = '';
+  formState.labelId = '';
   getTeamEntities();
 };
 
 const createIssue = async () => {
   v$.value.$touch();
-  if (v$.value.$invalid) {
-    return;
-  }
+  if (v$.value.$invalid) return;
+
   const payload = {
-    team_id: state.teamId,
-    title: state.title,
+    team_id: formState.teamId,
+    title: formState.title,
+    description: formState.description || undefined,
+    assignee_id: formState.assigneeId || undefined,
+    project_id: formState.projectId || undefined,
+    state_id: formState.stateId || undefined,
+    priority: formState.priority || undefined,
+    label_ids: formState.labelId ? [formState.labelId] : undefined,
   };
-  if (state.description) {
-    payload.description = state.description;
-  }
-  if (state.assigneeId) {
-    payload.assignee_id = state.assigneeId;
-  }
-  if (state.projectId) {
-    payload.project_id = state.projectId;
-  }
-  if (state.stateId) {
-    payload.state_id = state.stateId;
-  }
-  if (state.priority) {
-    payload.priority = state.priority;
-  }
-  if (state.labelId) {
-    payload.label_ids = [state.labelId];
-  }
+
   try {
     isCreating.value = true;
     const response = await LinearAPI.createIssue(payload);
@@ -267,7 +228,5 @@ const createIssue = async () => {
   }
 };
 
-onMounted(() => {
-  getTeams();
-});
+onMounted(getTeams);
 </script>