From d48a51f0e3f126422953706425e39ab2c2a709fd Mon Sep 17 00:00:00 2001
From: Katja Hedemann <k.hedemann@hedemann-stapler.de>
Date: Thu, 20 Apr 2023 10:38:55 +0200
Subject: [PATCH] Suchfunktion Adresse, Hilfe und Info Links

---
 app.vue                                 | 13 ++++++-
 {public => assets}/main.css             | 45 +++++++++++++++++++++++++
 assets/search.svg                       | 22 ++++++++++++
 index.html                              |  2 +-
 main.js                                 |  2 ++
 pages/adresses/adresses_index.vue       | 33 ++++++++++++++++++
 pages/adresses/customer_mask.vue        | 14 ++++++++
 pages/header/help.vue                   | 14 ++++++++
 pages/{adresses.vue => header/info.vue} |  6 ++--
 pages/index.vue                         |  8 +++--
 router/index.js                         | 19 -----------
 server/trpc/routers/index.js            | 23 +++++++++++++
 12 files changed, 176 insertions(+), 25 deletions(-)
 rename {public => assets}/main.css (62%)
 create mode 100644 assets/search.svg
 create mode 100644 pages/adresses/adresses_index.vue
 create mode 100644 pages/adresses/customer_mask.vue
 create mode 100644 pages/header/help.vue
 rename pages/{adresses.vue => header/info.vue} (62%)
 delete mode 100644 router/index.js
 create mode 100644 server/trpc/routers/index.js

diff --git a/app.vue b/app.vue
index 270cf64..4dbd473 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,15 @@
 <template>
   <div class="main-container">
+    <div class="header">
+      <p>
+        <router-link to="/header/help">
+          HILFE
+        </router-link>
+        <router-link to="/header/info">
+          INFO
+        </router-link>
+      </p>
+    </div>
     <div class="sidenav">
       <div class="sidenav-content">
         <h1 class="menu-heading">
@@ -9,7 +19,7 @@
           <router-link to="/">
             Home
           </router-link>
-          <router-link to="/adresses">
+          <router-link to="/adresses/adresses_index">
             Adressverwaltung
           </router-link>
         </p>
@@ -22,6 +32,7 @@
 </template>
 
 <script></script>
+
 <style scoped>
 .main-container {
   max-width: 70vw;
diff --git a/public/main.css b/assets/main.css
similarity index 62%
rename from public/main.css
rename to assets/main.css
index 92de306..42ba20b 100644
--- a/public/main.css
+++ b/assets/main.css
@@ -1,3 +1,14 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: "TimesNewRoman";
+}
+
+.heading {
+  background-color: beige;
+}
+
 .main-container {
   max-width: 45vw;
   margin: auto;
@@ -66,3 +77,37 @@
   .sidenav a {font-size: 18px;}
 }
 
+/* Styling for adresses */
+input {
+  display: block;
+  width: 350px;
+  margin: 20px auto;
+  padding: 10px 45px;
+  background: white url("assets/search.svg") no-repeat 15px center;
+  background-size: 15px 15px;
+  font-size: 16px;
+  border: none;
+  border-radius: 5px;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
+    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+}
+
+.item {
+  width: 350px;
+  margin: 0 auto 10px auto;
+  padding: 10px 20px;
+  color: white;
+  border-radius: 5px;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
+    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
+}
+
+.adresses {
+  background-color: #a5aeb5;
+  cursor: pointer;
+}
+
+.error {
+  background-color: tomato;
+}
+
diff --git a/assets/search.svg b/assets/search.svg
new file mode 100644
index 0000000..884067f
--- /dev/null
+++ b/assets/search.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 513.749 513.749" style="enable-background:new 0 0 513.749 513.749;" xml:space="preserve" width="512" height="512">
+<g>
+	<path d="M504.352,459.061l-99.435-99.477c74.402-99.427,54.115-240.344-45.312-314.746S119.261-9.277,44.859,90.15   S-9.256,330.494,90.171,404.896c79.868,59.766,189.565,59.766,269.434,0l99.477,99.477c12.501,12.501,32.769,12.501,45.269,0   c12.501-12.501,12.501-32.769,0-45.269L504.352,459.061z M225.717,385.696c-88.366,0-160-71.634-160-160s71.634-160,160-160   s160,71.634,160,160C385.623,314.022,314.044,385.602,225.717,385.696z"/>
+</g>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</svg>
diff --git a/index.html b/index.html
index e8f58d4..20b27d9 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-witdh, initial-scale=1.0" />
-        <link rel="stylesheet" href="/main.css" />
+        <link rel="stylesheet" href="assets/main.css">
         <title>WebAdmin</title>
     </head>
     <body>
diff --git a/main.js b/main.js
index e69de29..2d501a4 100644
--- a/main.js
+++ b/main.js
@@ -0,0 +1,2 @@
+import './assets/main.css'
+// require('@/assets/main.css')
diff --git a/pages/adresses/adresses_index.vue b/pages/adresses/adresses_index.vue
new file mode 100644
index 0000000..f6d482c
--- /dev/null
+++ b/pages/adresses/adresses_index.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="main-container">
+    <div class="heading">
+      <h1>
+        Willkommen in der Adressverwaltung
+      </h1>
+    </div>
+    <div class="content">
+      <input v-model="input" type="text" placeholder="Suche...">
+      <div v-for="adresses in filteredList()" :key="adresses" class="adresses">
+        <p>{{ adresses }}</p>
+      </div>
+      <div v-if="input&&!filteredList().length" class="item error">
+        <p>Nicht gefunden</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const input = ref('')
+const adresses = ['Hedemann', 'Nietiedt', 'Schoon']
+function filteredList () {
+  return adresses.filter(adresses =>
+    adresses.toLowerCase().includes(input.value.toLowerCase())
+  )
+}
+</script>
+
+<style scoped src="@/assets/main.css">
+</style>
diff --git a/pages/adresses/customer_mask.vue b/pages/adresses/customer_mask.vue
new file mode 100644
index 0000000..df2f2f9
--- /dev/null
+++ b/pages/adresses/customer_mask.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="main-container">
+    <div class="heading">
+      <h1>
+        Kundenname
+      </h1>
+    </div>
+    <div class="content">
+      <p>Hier findest einen Kunden</p>
+    </div>
+  </div>
+</template>
+
+  <style scoped src="@/assets/main.css"></style>
diff --git a/pages/header/help.vue b/pages/header/help.vue
new file mode 100644
index 0000000..2424ae2
--- /dev/null
+++ b/pages/header/help.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="main-container">
+    <div class="heading">
+      <h1>
+        Hilfe
+      </h1>
+    </div>
+    <div class="content">
+      <p>Hier findest du Hilfe</p>
+    </div>
+  </div>
+</template>
+
+<style scoped src="@/assets/main.css"></style>
diff --git a/pages/adresses.vue b/pages/header/info.vue
similarity index 62%
rename from pages/adresses.vue
rename to pages/header/info.vue
index b528df3..f92f4a6 100644
--- a/pages/adresses.vue
+++ b/pages/header/info.vue
@@ -2,11 +2,13 @@
   <div class="main-container">
     <div class="heading">
       <h1>
-        Willkommen in der Adressverwaltung
+        Info
       </h1>
     </div>
     <div class="content">
-      <p>fill this with content</p>
+      <p>Hier findest du Infos</p>
     </div>
   </div>
 </template>
+
+<style scoped src="@/assets/main.css"></style>
diff --git a/pages/index.vue b/pages/index.vue
index a395fc6..07cabcc 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="index">
-    <h1>Willkommen</h1>
+  <div class="main-container">
+    <div class="heading">
+      <h1>Willkommen</h1>
+    </div>
   </div>
 </template>
+
+<style scoped src="@/assets/main.css"></style>
diff --git a/router/index.js b/router/index.js
deleted file mode 100644
index ea75dea..0000000
--- a/router/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import index from '@/pages/index.vue'
-import adresses from '@/pages/adresses.vue'
-
-const routes = [
-  { path: '/', name: 'Home', component: index },
-  { path: '/adresses', name: 'Adressverwaltung', component: adresses }
-]
-
-const router = createRouter({
-  history: createWebHistory(),
-  routes
-})
-
-const app = createApp({})
-
-app.use(router)
-
-export default router
diff --git a/server/trpc/routers/index.js b/server/trpc/routers/index.js
new file mode 100644
index 0000000..b35a0ac
--- /dev/null
+++ b/server/trpc/routers/index.js
@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import index from '@/pages/index.vue'
+import adresses from '@/pages/adresses/adresses_index.vue'
+import help from '@/pages/header/help'
+import info from '@/pages/header/info'
+
+const routes = [
+  { path: '/', name: 'Home', component: index },
+  { path: 'adresses/adresses_index', name: 'Adressverwaltung', component: adresses },
+  { path: 'header/help', name: 'Hilfe', component: help },
+  { path: 'header/info', name: 'Info', component: info }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+const app = createApp({})
+
+app.use(router)
+
+export default router