feat(webapp): add add account modal

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "core",
+  "name": "kispi-core",
   "private": true,
   "version": "0.0.0",
   "scripts": {

src/components/atoms/AtomInput.vue

@@ -3,7 +3,9 @@
     ref="input"
     :type="type"
     :placeholder="placeholder"
-    class="input input-bordered w-full max-w-xs"
+    :value="modelValue"
+    class="input input-bordered w-full"
+    @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
   />
 </template>
 
@@ -17,7 +19,13 @@ defineProps({
     type: String,
     default: '',
   },
+  modelValue: {
+    type: String,
+    default: '',
+  },
 });
+
+defineEmits(['update:modelValue']);
 </script>
 
 <style lang="scss" scoped>

src/components/atoms/AtomSelect.vue

@@ -0,0 +1,30 @@
+<template>
+  <select class="select select-bordered w-full">
+    <option
+      disabled
+      selected
+    >
+      {{ placeholder }}
+    </option>
+    <option v-for="option in options">{{ option }}</option>
+  </select>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+
+defineProps({
+  placeholder: {
+    type: String,
+    required: true,
+  },
+  options: {
+    type: Array as PropType<string[]>,
+    required: true,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/components/molecules/MoleculeAddAccountModal.vue

@@ -0,0 +1,91 @@
+<template>
+  <AtomModal
+    :id="id"
+    title="Account hinzufügen"
+  >
+    <div class="flex flex-col gap-4">
+      <h4 class="text-md">Daten</h4>
+      <div class="flex gap-4">
+        <AtomInput
+          v-model="firstName"
+          placeholder="Vorname"
+        />
+        <AtomInput placeholder="Nachname" />
+      </div>
+      <AtomInput
+        placeholder="Kontonummer"
+        type="number"
+      />
+      <AtomInput
+        placeholder="Geburtsdatum"
+        type="number"
+      />
+      <div class="flex gap-4">
+        <AtomInput placeholder="Straße" />
+        <AtomInput
+          placeholder="Hnr."
+          class="w-3/12"
+        />
+      </div>
+      <div class="flex gap-4">
+        <AtomInput
+          placeholder="Postleitzahl"
+          class="w-6/12"
+        />
+        <AtomInput placeholder="Stadt" />
+      </div>
+      <h4 class="text-md">Kontakt</h4>
+      <div class="flex gap-4">
+        <AtomSelect
+          placeholder="Label"
+          :options="['Festnetz', 'Mobil', 'Arbeit']"
+          class="w-4/12"
+        />
+        <AtomInput placeholder="Telefonnummer" />
+      </div>
+    </div>
+    <template #action>
+      <label
+        ref="abortButton"
+        class="btn gap-2"
+        :for="id"
+      >
+        <XCircleIcon class="w-6 h-6" />
+        Abbrechen
+      </label>
+      <button
+        class="btn gap-2"
+        @click="handleSubmit()"
+      >
+        <CheckCircleIcon class="w-6 h-6" />
+        Speichern
+      </button>
+    </template>
+  </AtomModal>
+</template>
+
+<script lang="ts" setup>
+import { CheckCircleIcon, XCircleIcon } from '@heroicons/vue/outline';
+import AtomModal from '../atoms/AtomModal.vue';
+import AtomInput from '../atoms/AtomInput.vue';
+import AtomSelect from '../atoms/AtomSelect.vue';
+import { ref } from 'vue';
+
+const firstName = ref('');
+
+defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+});
+
+function handleSubmit() {
+  console.log('TODO: Submit');
+  console.log(firstName.value);
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/components/views/DataView.vue

@@ -1,13 +1,144 @@
 <template>
   <div class="lg:p-6">
     <MoleculeDataTable :data="data" />
+    <MoleculeAddAccountModal :id="addAccountModalId" />
+    <label
+      class="btn btn-primary btn-lg btn-circle shadow-2xl fixed bottom-8 right-8"
+      :for="addAccountModalId"
+    >
+      <PlusIcon class="w-7 h-7" />
+    </label>
   </div>
 </template>
 
 <script lang="ts" setup>
 import MoleculeDataTable from '../molecules/MoleculeDataTable.vue';
+import { PlusIcon } from '@heroicons/vue/outline';
+import MoleculeAddAccountModal from '../molecules/MoleculeAddAccountModal.vue';
+
+const addAccountModalId = 'add-account-modal';
 /* eslint-disable @typescript-eslint/naming-convention */
 const data = [
+  {
+    'Kontonummer': '0000123456',
+    'Name': 'John Doe',
+    'Geburtsdatum': '13.11.1998',
+    'Kontostand': '150,00 Öro',
+    'Adresse': 'Test-Straße 1, 74613 Öhringen',
+    'Letzter': '12.07.2022 17:39',
+    'Kontakt': null,
+    'Trans.': null,
+  },
+  {
+    'Kontonummer': '0000123456',
+    'Name': 'John Doe',
+    'Geburtsdatum': '13.11.1998',
+    'Kontostand': '150,00 Öro',
+    'Adresse': 'Test-Straße 1, 74613 Öhringen',
+    'Letzter': '12.07.2022 17:39',
+    'Kontakt': null,
+    'Trans.': null,
+  },
+  {
+    'Kontonummer': '0000123456',
+    'Name': 'John Doe',
+    'Geburtsdatum': '13.11.1998',
+    'Kontostand': '150,00 Öro',
+    'Adresse': 'Test-Straße 1, 74613 Öhringen',
+    'Letzter': '12.07.2022 17:39',
+    'Kontakt': null,
+    'Trans.': null,
+  },
+  {
+    'Kontonummer': '0000123456',
+    'Name': 'John Doe',
+    'Geburtsdatum': '13.11.1998',
+    'Kontostand': '150,00 Öro',
+    'Adresse': 'Test-Straße 1, 74613 Öhringen',
+    'Letzter': '12.07.2022 17:39',
+    'Kontakt': null,
+    'Trans.': null,
+  },
+  {
+    'Kontonummer': '0000123456',
+    'Name': 'John Doe',
+    'Geburtsdatum': '13.11.1998',
+    'Kontostand': '150,00 Öro',
+    'Adresse': 'Test-Straße 1, 74613 Öhringen',
+    'Letzter': '12.07.2022 17:39',
+    'Kontakt': null,
+    'Trans.': null,
+  },
+  {
+    'Kontonummer': '0000123456',
+    'Name': 'John Doe',
+    'Geburtsdatum': '13.11.1998',
+    'Kontostand': '150,00 Öro',
+    'Adresse': 'Test-Straße 1, 74613 Öhringen',
+    'Letzter': '12.07.2022 17:39',
+    'Kontakt': null,
+    'Trans.': null,
+  },
+  {
+    'Kontonummer': '0000123456',
+    'Name': 'John Doe',
+    'Geburtsdatum': '13.11.1998',
+    'Kontostand': '150,00 Öro',
+    'Adresse': 'Test-Straße 1, 74613 Öhringen',
+    'Letzter': '12.07.2022 17:39',
+    'Kontakt': null,
+    'Trans.': null,
+  },
+  {
+    'Kontonummer': '0000123456',
+    'Name': 'John Doe',
+    'Geburtsdatum': '13.11.1998',
+    'Kontostand': '150,00 Öro',
+    'Adresse': 'Test-Straße 1, 74613 Öhringen',
+    'Letzter': '12.07.2022 17:39',
+    'Kontakt': null,
+    'Trans.': null,
+  },
+  {
+    'Kontonummer': '0000123456',
+    'Name': 'John Doe',
+    'Geburtsdatum': '13.11.1998',
+    'Kontostand': '150,00 Öro',
+    'Adresse': 'Test-Straße 1, 74613 Öhringen',
+    'Letzter': '12.07.2022 17:39',
+    'Kontakt': null,
+    'Trans.': null,
+  },
+  {
+    'Kontonummer': '0000123456',
+    'Name': 'John Doe',
+    'Geburtsdatum': '13.11.1998',
+    'Kontostand': '150,00 Öro',
+    'Adresse': 'Test-Straße 1, 74613 Öhringen',
+    'Letzter': '12.07.2022 17:39',
+    'Kontakt': null,
+    'Trans.': null,
+  },
+  {
+    'Kontonummer': '0000123456',
+    'Name': 'John Doe',
+    'Geburtsdatum': '13.11.1998',
+    'Kontostand': '150,00 Öro',
+    'Adresse': 'Test-Straße 1, 74613 Öhringen',
+    'Letzter': '12.07.2022 17:39',
+    'Kontakt': null,
+    'Trans.': null,
+  },
+  {
+    'Kontonummer': '0000123456',
+    'Name': 'John Doe',
+    'Geburtsdatum': '13.11.1998',
+    'Kontostand': '150,00 Öro',
+    'Adresse': 'Test-Straße 1, 74613 Öhringen',
+    'Letzter': '12.07.2022 17:39',
+    'Kontakt': null,
+    'Trans.': null,
+  },
   {
     'Kontonummer': '0000123456',
     'Name': 'John Doe',