diff --git a/handlenett-frontend/app.vue b/handlenett-frontend/app.vue index 032ea85..5b5760e 100644 --- a/handlenett-frontend/app.vue +++ b/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> \ No newline at end of file diff --git a/handlenett-frontend/components/Item.vue b/handlenett-frontend/components/Item.vue index 59c607f..69dc967 100644 --- a/handlenett-frontend/components/Item.vue +++ b/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> diff --git a/handlenett-frontend/pages/index.vue b/handlenett-frontend/pages/index.vue index 928c11f..2244f18 100644 --- a/handlenett-frontend/pages/index.vue +++ b/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> diff --git a/handlenett-frontend/pages/login.vue b/handlenett-frontend/pages/login.vue index 58f9efe..2554db2 100644 --- a/handlenett-frontend/pages/login.vue +++ b/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>