handlenett-frontend: crud items

handlenett-frontend/app.vue

@@ -1,43 +1,5 @@
 <template>
-  <h1>Handlenett</h1>
   <div>
-    <div style="margin-bottom: 2rem;">
-      <Item v-for="i in items" :name="i.name" :isComplete="i.isComplete" :id="i.id" :key="i.id"
-        @changed="updatedItem" />
-    </div>
-    <NewItem @changed="newItem"></NewItem>
-
-    <!-- <pre>
-      {{ items }}
-    </pre> -->
     <NuxtPage />
   </div>
-</template>
-<script setup>
-import { ref } from 'vue'
-const items = ref([])
-
-const updatedItem = (updatedItem) => {
-  useHttp(`Item/${updatedItem.id}`, 'PUT', { name: updatedItem.name, isComplete: updatedItem.isComplete }).then(data => {
-    let i = items.value.find(i => i.id === updatedItem.id)
-    const idx = items.value.indexOf(i)
-    items.value[idx] = updatedItem;
-  });
-}
-
-const newItem = (newItem) => {
-  if (newItem.name === '') return
-
-  useHttp('Item', 'POST', { name: newItem.name }).then(data => {
-    items.value.push({ name: data.name, isComplete: data.isComplete, id: data.id })
-  });
-
-}
-
-onMounted(async () => {
-  useHttp('Item', 'GET').then(data => {
-    items.value = data;
-  });
-})
-
-</script>
+</template>

handlenett-frontend/components/Item.vue

@@ -3,6 +3,7 @@
         <label :class="{ 'complete': props.isComplete }">
             <input type="checkbox" :checked="props.isComplete" @change="update"> {{ props.name }}
         </label>
+        <button @click="deleteItem">X</button>
     </div>
 </template>
 <script setup>
@@ -18,6 +19,9 @@ const props = defineProps({
 const update = () => {
     emit('changed', { name: props.name, isComplete: !props.isComplete, id: props.id })
 }
+const deleteItem = () => {
+    emit('delete', { id: props.id })
+}
 
 </script>
 <style scoped>

handlenett-frontend/pages/index.vue

@@ -2,54 +2,55 @@
     <div v-if="loading" class="loadData">
         <div class="loader"></div>
     </div>
-    <div class="home-container" v-else>
-        <!-- <div class="profile" v-if="profileImg">
-            <img :src="profileImg" width="250" class="profile-image" />
-        </div>
-        <div class="initials-container" v-else>
-            <div class="initials">{{ initials }}</div>
-        </div>
-        <div class="name">
-            <h1>Welcome, {{ profile.displayName }}!</h1>
-        </div>
-        <div class="email">
-            <h4>{{ profile.mail }}</h4>
-        </div>
-        <div class="username">
-            <h2>{{ profile.jobTitle }}</h2>
-        </div>
-        <div class="phone" v-if="profile.mobilePhone">
-            <h4>Phone no. : {{ profile.mobilePhone }}</h4>
-        </div> -->
-        <div class="button" @click="logout">
-            <button class="logout-btn">Logout</button>
+
+    <h1>Handlenett</h1>
+    <div>
+        <div style="margin-bottom: 2rem;">
+            <Item v-for="i in items" :name="i.name" :isComplete="i.isComplete" :id="i.id" :key="i.id"
+                @changed="updatedItem" @delete="deleteItem" />
         </div>
+        <NewItem @changed="newItem"></NewItem>
     </div>
 
-    <!-- <pre>
-        {{ profile }}
-    </pre> -->
 </template>
 <script setup>
-const { $profileInfo, $logout } = useNuxtApp()
-const profile = ref()
-const profileImg = ref()
+import { ref } from 'vue'
+const items = ref([])
+
 const loading = ref(true)
 
-const logout = async () => {
-    await $logout()
-}
 onMounted(async () => {
+
     loading.value = true
-    const profileInfo = await $profileInfo()
-    profile.value = profileInfo
+    useHttp('Item', 'GET').then(data => {
+        items.value = data;
+    });
     loading.value = false
 })
-const initials = ref()
-const getInitials = () => {
-    const nameArray = profile.value.displayName.split(' ')
-    const fletter = nameArray[0].charAt(0)
-    const lletter = nameArray[1].charAt(0)
-    initials.value = fletter + lletter
+
+const updatedItem = (updatedItem) => {
+    useHttp(`Item/${updatedItem.id}`, 'PUT', { name: updatedItem.name, isComplete: updatedItem.isComplete }).then(data => {
+        let i = items.value.find(i => i.id === updatedItem.id)
+        const idx = items.value.indexOf(i)
+        items.value[idx] = updatedItem;
+    });
+}
+
+const newItem = (newItem) => {
+    if (newItem.name === '') return
+
+    useHttp('Item', 'POST', { name: newItem.name }).then(data => {
+        items.value.push({ name: data.name, isComplete: data.isComplete, id: data.id })
+    });
+
+}
+
+const deleteItem = (deleteItem) => {
+    useHttp(`Item/${deleteItem.id}`, 'DELETE').then(data => {
+        let i = items.value.find(i => i.id === deleteItem.id)
+        const idx = items.value.indexOf(i)
+        items.value.splice(idx, 1)
+    });
 }
+
 </script>

handlenett-frontend/pages/login.vue

@@ -5,7 +5,7 @@
                 <!-- <img src="~/assets/images/microsoft.png" height="180" /> -->
             </div>
             <div class="text">
-                <h1>MSAL Authentication in Nuxt3</h1>
+                <h1>Login</h1>
             </div>
             <div class="button">
                 <button class="btn" @click="loginUser">Login with Microsoft 365</button>