forked from Kispi/Core
feat(webapp): add add account modal
This commit is contained in:
parent
4555ca1140
commit
cc043acad5
5 changed files with 262 additions and 2 deletions
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "core",
|
||||
"name": "kispi-core",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
30
src/components/atoms/AtomSelect.vue
Normal file
30
src/components/atoms/AtomSelect.vue
Normal file
|
|
@ -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>
|
||||
91
src/components/molecules/MoleculeAddAccountModal.vue
Normal file
91
src/components/molecules/MoleculeAddAccountModal.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Reference in a new issue