feat: Changes Design of the defect page

src/components/Defect.vue

@@ -1,30 +1,68 @@
 <template>
-  <v-card
-    class="mx-auto my-4"
-    elevation="16"
-    max-width="1000"
-  >
-    <v-card-item>
-      <v-card-title>
-        {{ msg }}
-      </v-card-title>
-
-      <v-card-subtitle>
-        {{ descr }}
-      </v-card-subtitle>
-    </v-card-item>
-
-    <v-card-text>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-    </v-card-text>
-  </v-card>
+  <v-expansion-panel>
+    <v-expansion-panel-title>
+        <v-row no-gutters>
+          <v-col class="d-flex justify-start" cols="6">
+            <span class="font-weight-bold">{{ defect.name }}</span>
+          </v-col>
+          <v-col cols="6" class="text-right">
+            <span> {{ defect.descriptionShort }} </span>
+          </v-col>
+        </v-row>
+    </v-expansion-panel-title>
+
+    <v-expansion-panel-text>
+      <v-row no-gutters>
+        <v-col cols="12">
+          <p><strong>Long Description:</strong> {{ defect.descriptionLong }}</p>
+          <p><strong>Location:</strong> {{ defect.location }}</p>
+        </v-col>
+      </v-row>
+    </v-expansion-panel-text>
+  </v-expansion-panel>
 </template>
 
 <script lang="ts" setup>
+defineProps({
+  defect: Object
+})
+</script>
 
-  defineProps({
-    msg: String,
-    descr: String,
-  })
+<style scoped>
+.defect-card {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Slight shadow for better visibility */
+  border-radius: 8px; /* Rounded corners */
+  transition: all 0.3s ease-in-out; /* Smooth hover effect */
+  margin-bottom: 16px; /* Spacing between cards */
+}
 
-</script>
+.v-card-title {
+  cursor: pointer;
+  padding: 16px;
+  border-radius: 8px 8px 0 0; /* Rounded top corners */
+}
+
+.v-card-text {
+  padding: 16px;
+}
+
+.v-divider {
+  margin-top: 0;
+}
+
+.card-details {
+  padding-top: 0;
+}
+
+.v-btn {
+  transition: transform 0.3s ease; /* Smooth button animation */
+}
+
+.v-btn:hover {
+  transform: scale(1.1); /* Slightly enlarge button on hover */
+}
+
+.v-expand-transition {
+  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Smoother expansion */
+}
+</style>

src/main.ts

@@ -12,9 +12,12 @@ import App from './App.vue'
 
 // Composables
 import { createApp } from 'vue'
+import vuetify from './plugins/vuetify'
 
 const app = createApp(App)
 
 registerPlugins(app)
 
+app.use(vuetify)
+
 app.mount('#app')

src/pages/defects.vue

@@ -6,48 +6,97 @@
           Defects
         </v-card-title>
         <v-card-text>
-          <v-list
-            v-if="!loading"
-          >
-            <v-list-item
+          <div v-if="!loading">
+            <v-expansion-panels>
+              <Defect
               v-for="defect in defects"
               :key="defect.id"
-            >
-              <v-list-item-title>
-                {{ defect.name }}
-              </v-list-item-title>
-              <v-list-item-subtitle>
-                {{ defect.location }}
-              </v-list-item-subtitle>
-            </v-list-item>
-          </v-list>
-          <v-progress-circular
-            v-if="loading"
-            indeterminate
-          />
+                :defect="defect"
+              />
+            </v-expansion-panels> 
+          </div>
+          <v-progress-circular v-if="loading" indeterminate />
         </v-card-text>
         <v-card-actions>
-          <v-btn
-            color="primary"
-            @click="refetch()"
-          >
-            Refresh
-          </v-btn>
+          <v-btn color="primary" @click="refetch()">Refresh</v-btn>
         </v-card-actions>
       </v-card>
+
+      <v-row>
+        <v-col class="mt-4 text-left">
+          <v-btn @click="dialog = true">
+            Add Defect
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-dialog v-model="dialog" max-width="600">
+        <v-card>
+          <v-card-title>
+            Add New Defect
+          </v-card-title>
+          <v-card-text>
+            <v-row dense>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  label="Defect Name*"
+                  required
+                />
+              </v-col>
+
+              <v-col cols="12" md="6">
+                <v-text-field
+                  label="Location*"
+                  required
+                />
+              </v-col>
+
+              <v-col cols="12">
+                <v-text-field
+                  label="Short Description*"
+                  required
+                />
+              </v-col>
+
+              <v-col cols="12">
+                <v-textarea
+                  label="Long Description*"
+                  required
+                />
+              </v-col>
+              <!-- TODO: Add a textfield that acts as datepicker here -->
+            </v-row>
+
+            <small class="text-caption">*indicates required field</small>
+          </v-card-text>
+
+          <v-divider />
+
+          <v-card-actions>
+            <v-spacer />
+            <v-btn text="Cancel" @click="dialog = false">Cancel</v-btn>
+            <v-btn color="primary" @click="saveDefect">Save</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
     </v-container>
   </v-responsive>
 </template>
 
 <script lang="ts" setup>
   const loading = ref(true)
   const defects = ref([])
+  const dialog = ref(false)
 
   refetch()
 
+  function saveDefect () {
+    dialog.value = false
+  }
+
   function refetch () {
     loading.value = true
-    fetch('http://localhost:8080/defects')
+    fetch('http://localhost:8080/v1/defects')
       .then(response => response.json())
       .then(data => {
         defects.value = data

src/plugins/vuetify.ts

@@ -9,11 +9,48 @@ import '@mdi/font/css/materialdesignicons.css'
 import 'vuetify/styles'
 
 // Composables
+// Imports
 import { createVuetify } from 'vuetify'
+import 'vuetify/styles'
+
+// Vuetify icons (optional)
+import { aliases, mdi } from 'vuetify/iconsets/mdi'
 
-// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
-export default createVuetify({
+// Create Vuetify theme configuration
+const vuetify = createVuetify({
   theme: {
-    defaultTheme: 'dark',
+    themes: {
+      light: {
+        colors: {
+          primary: '#1976D2', // Blue
+          secondary: '#424242', // Dark gray
+          accent: '#82B1FF', // Light blue
+          error: '#FF5252', // Red
+          info: '#2196F3', // Blue
+          success: '#4CAF50', // Green
+          warning: '#FB8C00' // Orange
+        },
+      },
+      dark: {
+        colors: {
+          primary: '#BB86FC', // Purple
+          secondary: '#03DAC6', // Teal
+          accent: '#82B1FF', 
+          error: '#CF6679', // Pinkish-red
+          info: '#2196F3',
+          success: '#03DAC6', // Teal
+          warning: '#FBC02D' // Yellow
+        },
+      },
+    },
+  },
+  icons: {
+    defaultSet: 'mdi',
+    aliases,
+    sets: {
+      mdi,
+    },
   },
 })
+
+export default vuetify