From 3d4a9913c5c094c3e82ec0960e4d6a1cfab323b8 Mon Sep 17 00:00:00 2001
From: Christian Carlsson <hello@crlssn.com>
Date: Thu, 21 Nov 2024 21:45:09 +0000
Subject: [PATCH] refact: update style for exercise forms (#59)

---
 .../src/views/Exercises/CreateExercise.vue    |  33 +----
 .../src/views/Exercises/UpdateExercise.vue    | 129 +++++++-----------
 2 files changed, 48 insertions(+), 114 deletions(-)

diff --git a/apps/web/src/views/Exercises/CreateExercise.vue b/apps/web/src/views/Exercises/CreateExercise.vue
index 820c3d96..939c64d1 100644
--- a/apps/web/src/views/Exercises/CreateExercise.vue
+++ b/apps/web/src/views/Exercises/CreateExercise.vue
@@ -11,19 +11,6 @@ const resError = ref('')
 const resOK = ref(false)
 const rest = ref(0)
 
-const restOptions = [
-  { value: 30, label: '30 seconds' },
-  { value: 60, label: '1 minute' },
-  { value: 90, label: '1 minute 30 seconds' },
-  { value: 120, label: '2 minutes' },
-  { value: 150, label: '2 minutes 30 seconds' },
-  { value: 180, label: '3 minutes' },
-  { value: 210, label: '3 minutes 30 seconds' },
-  { value: 240, label: '4 minutes' },
-  { value: 270, label: '4 minutes 30 seconds' },
-  { value: 300, label: '5 minutes' },
-]
-
 async function createExercise() {
   const request = new CreateExerciseRequest({
     name: name.value,
@@ -88,30 +75,12 @@ async function createExercise() {
             v-model="label"
             id="label"
             type="text"
+            placeholder="Optional"
             class="block w-full rounded-md border-0 bg-white px-3 py-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
           />
         </div>
       </div>
 
-      <div>
-        <div>
-          <label for="rest" class="block text-xs font-semibold text-gray-900 uppercase">
-            Rest between sets
-          </label>
-        </div>
-        <div class="mt-2">
-          <select
-            v-model="rest"
-            id="rest"
-            class="block w-full rounded-md border-0 bg-white px-3 py-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
-          >
-            <option :value="0" selected>Unspecified</option>
-            <option v-for="rest in restOptions" :key="rest.value" :value="rest.value">
-              {{ rest.label }}
-            </option>
-          </select>
-        </div>
-      </div>
       <AppButton text="Create" type="submit" colour="primary" class="mt-6">Save Exercise</AppButton>
     </form>
   </div>
diff --git a/apps/web/src/views/Exercises/UpdateExercise.vue b/apps/web/src/views/Exercises/UpdateExercise.vue
index d76afff8..fe5b490e 100644
--- a/apps/web/src/views/Exercises/UpdateExercise.vue
+++ b/apps/web/src/views/Exercises/UpdateExercise.vue
@@ -11,24 +11,9 @@ const name = ref('')
 const label = ref('')
 const resError = ref('')
 const resOK = ref(false)
-const rest = ref(0)
 
 const route = useRoute()
 
-console.log(route.params.id)
-const restOptions = [
-  { value: 30, label: '30 seconds' },
-  { value: 60, label: '1 minute' },
-  { value: 90, label: '1 minute 30 seconds' },
-  { value: 120, label: '2 minutes' },
-  { value: 150, label: '2 minutes 30 seconds' },
-  { value: 180, label: '3 minutes' },
-  { value: 210, label: '3 minutes 30 seconds' },
-  { value: 240, label: '4 minutes' },
-  { value: 270, label: '4 minutes 30 seconds' },
-  { value: 300, label: '5 minutes' },
-]
-
 async function loadExercise() {
   const request = new GetExerciseRequest({
     id: route.params.id as string,
@@ -57,11 +42,11 @@ onMounted(() => {
 async function updateExercise() {
   const request = new UpdateExerciseRequest({
     exercise: new Exercise({
-      id: route.params.id[0],
+      id: route.params.id as string,
       name: name.value,
       label: label.value,
     }),
-    updateMask: new FieldMask({ paths: ['name', 'label', 'rest_between_sets'] }),
+    updateMask: new FieldMask({ paths: ['name', 'label'] }),
   })
   try {
     await ExerciseClient.update(request)
@@ -79,75 +64,55 @@ async function updateExercise() {
 </script>
 
 <template>
-  <form class="space-y-6" method="POST" @submit.prevent="updateExercise">
-    <div class="divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow mb-4">
-      <div class="px-4 py-4 sm:px-6">
-        <span class="font-semibold">Update Exercise</span>
-      </div>
-      <div class="px-4 py-4 sm:px-6">
-        <div
-          v-if="resOK"
-          class="bg-green-200 rounded-md py-3 px-5 mb-2 text-sm/6 text-green-800"
-          role="alert"
-        >
-          Exercise updated
-        </div>
-        <div
-          v-if="resError"
-          class="bg-red-200 rounded-md py-3 px-5 mb-2 text-sm/6 text-red-800"
-          role="alert"
-        >
-          {{ resError }}
-        </div>
-        <div>
-          <label for="name" class="block text-sm/6 font-medium text-gray-900">Name</label>
-          <div class="mt-2">
-            <input
-              v-model="name"
-              type="text"
-              required
-              class="block w-full rounded-md border-0 bg-white/5 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
-            />
-          </div>
+  <div class="">
+    <div
+      v-if="resOK"
+      class="border-2 border-green-400 bg-green-300 rounded-md py-3 px-5 mb-4 text-sm text-green-800 font-medium"
+      role="alert"
+    >
+      Exercise updated successfully.
+    </div>
+    <div
+      v-if="resError"
+      class="border-2 border-red-400 bg-red-300 mb-4 rounded-md py-3 px-5 mb-2 text-sm text-red-800"
+      role="alert"
+    >
+      {{ resError }}
+    </div>
+    <form class="space-y-6" @submit.prevent="updateExercise">
+      <div>
+        <label for="name" class="block text-xs font-semibold text-gray-900 uppercase">Name</label>
+        <div class="mt-2">
+          <input
+            v-model="name"
+            id="name"
+            type="text"
+            required
+            class="block w-full rounded-md border-0 bg-white px-3 py-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
+          />
         </div>
+      </div>
 
+      <div>
         <div>
-          <div>
-            <label for="label" class="block text-sm/6 font-medium text-gray-900">Label</label>
-          </div>
-          <div class="mt-2">
-            <input
-              v-model="label"
-              id="label"
-              type="text"
-              class="block w-full rounded-md border-0 bg-white/5 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
-            />
-          </div>
+          <label for="label" class="block text-xs font-semibold text-gray-900 uppercase">
+            Label
+          </label>
         </div>
-
-        <div>
-          <div>
-            <label for="rest" class="block text-sm/6 font-medium text-gray-900">
-              Rest between sets
-            </label>
-          </div>
-          <div class="mt-2">
-            <select
-              v-model="rest"
-              id="rest"
-              class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
-            >
-              <option :value="0" selected>Unspecified</option>
-              <option v-for="rest in restOptions" :key="rest.value" :value="rest.value">
-                {{ rest.label }}
-              </option>
-            </select>
-          </div>
+        <div class="mt-2">
+          <input
+            v-model="label"
+            id="label"
+            type="text"
+            placeholder="Optional"
+            class="block w-full rounded-md border-0 bg-white px-3 py-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
+          />
         </div>
       </div>
-      <div class="px-4 py-4 sm:px-6">
-        <AppButton colour="primary" type="submit">Update Exercise</AppButton>
-      </div>
-    </div>
-  </form>
+
+      <AppButton text="Create" type="submit" colour="primary" class="mt-6"
+        >Update Exercise</AppButton
+      >
+    </form>
+  </div>
 </template>