Initial commit
This commit is contained in:
353
src/app/pages/contacts/contacts.html
Normal file
353
src/app/pages/contacts/contacts.html
Normal file
@@ -0,0 +1,353 @@
|
||||
<div class="flex">
|
||||
<div class="flex-1 text-left">
|
||||
<div class="mb-5">
|
||||
<h1 i18n>Contacts</h1>
|
||||
<p class="my-4 text-lg text-gray-500">Verwalten Sie Personen und Organisationen in Ihrem Netzwerk</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 text-right">
|
||||
|
||||
<p-button i18n-label label="Exportieren" class="p-button-outlined">
|
||||
<span class="flex items-center gap-2">
|
||||
<span class="material-icons !text-base">download</span>
|
||||
</span>
|
||||
</p-button>
|
||||
|
||||
<p-button i18n-label label="Kontakt hinzufügen" class="p-button-outlined ml-4">
|
||||
<span class="flex items-center gap-2">
|
||||
<span class="material-icons !text-base">person_add</span>
|
||||
</span>
|
||||
</p-button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="grid grid-cols-12 gap-8 mb-8">
|
||||
|
||||
<div class="col-span-12 lg:col-span-3 xl:col-span-3">
|
||||
<div class="flex items-center p-0w-full max-w-sm">
|
||||
<!-- Search Input -->
|
||||
<p-iconfield class="h-10">
|
||||
<p-inputicon class="pi pi-search" />
|
||||
<input type="text" pInputText class="h-full" placeholder="Projekte durchsuchen..." />
|
||||
</p-iconfield>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3 xl:col-span-3">
|
||||
<div class="flex items-center p-0w-full max-w-sm">
|
||||
<!-- SelectButton -->
|
||||
<p-selectButton
|
||||
[options]="filterOptions"
|
||||
[(ngModel)]="filterBy"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
class="h-10">
|
||||
|
||||
<ng-template let-item pTemplate="item">
|
||||
<span class="inline-flex items-center gap-1 justify-center h-full">
|
||||
<mat-icon>{{ item.icon }}</mat-icon>
|
||||
<span>{{ item.label }}</span>
|
||||
</span>
|
||||
</ng-template>
|
||||
</p-selectButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-12 gap-8 mb-8">
|
||||
|
||||
<div class="col-span-12 lg:col-span-3 xl:col-span-3">
|
||||
<p-panel>
|
||||
<ng-template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<p-avatar label="AE" class="mr-2" size="normal" shape="circle" />
|
||||
<span class="font-bold">Amy Elsner</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #footer>
|
||||
<div class="flex">
|
||||
<div class="flex-1 text-left">
|
||||
<p-button label="Details" variant="text" />
|
||||
</div>
|
||||
<div class="flex-1 text-right">
|
||||
<p-button variant="outlined" aria-label="E-Mail">
|
||||
<ng-template #icon>
|
||||
<span class="material-icons !text-base">mail</span>
|
||||
</ng-template>
|
||||
</p-button>
|
||||
<p-button variant="outlined" aria-label="Phone" class="ml-2">
|
||||
<ng-template #icon>
|
||||
<span class="material-icons !text-base">phone</span>
|
||||
</ng-template>
|
||||
</p-button>
|
||||
<p-button variant="outlined" aria-label="Delete" class="ml-2">
|
||||
<ng-template #icon>
|
||||
<span class="material-icons !text-base">delete</span>
|
||||
</ng-template>
|
||||
</p-button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #icons>
|
||||
<p-chip class="!text-xs">Person</p-chip>
|
||||
</ng-template>
|
||||
<p class="flex flex-wrap items-center">
|
||||
<span class="material-icons !text-base mr-2">mail</span>j.boedige@gzm-mainz.de
|
||||
</p>
|
||||
<p class="flex flex-wrap items-center">
|
||||
<span class="material-icons !text-base mr-2">phone</span> 0171 3150850
|
||||
</p>
|
||||
</p-panel>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3 xl:col-span-3">
|
||||
<p-panel>
|
||||
<ng-template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<p-avatar label="AE" class="mr-2" size="normal" shape="circle" />
|
||||
<span class="font-bold">Amy Elsner</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #footer>
|
||||
<div class="flex">
|
||||
<div class="flex-1 text-left">
|
||||
<p-button label="Details" variant="text" />
|
||||
</div>
|
||||
<div class="flex-1 text-right">
|
||||
<p-button variant="outlined" aria-label="E-Mail">
|
||||
<ng-template #icon>
|
||||
<span class="material-icons !text-base">mail</span>
|
||||
</ng-template>
|
||||
</p-button>
|
||||
<p-button variant="outlined" aria-label="Phone" class="ml-2">
|
||||
<ng-template #icon>
|
||||
<span class="material-icons !text-base">phone</span>
|
||||
</ng-template>
|
||||
</p-button>
|
||||
<p-button variant="outlined" aria-label="Delete" class="ml-2">
|
||||
<ng-template #icon>
|
||||
<span class="material-icons !text-base">delete</span>
|
||||
</ng-template>
|
||||
</p-button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #icons>
|
||||
<p-chip class="!text-xs">Person</p-chip>
|
||||
</ng-template>
|
||||
<p class="flex flex-wrap items-center">
|
||||
<span class="material-icons !text-base mr-2">mail</span>j.boedige@gzm-mainz.de
|
||||
</p>
|
||||
<p class="flex flex-wrap items-center">
|
||||
<span class="material-icons !text-base mr-2">phone</span> 0171 3150850
|
||||
</p>
|
||||
</p-panel>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3 xl:col-span-3">
|
||||
<p-panel>
|
||||
<ng-template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<p-avatar label="AE" class="mr-2" size="normal" shape="circle" />
|
||||
<span class="font-bold">Amy Elsner</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #footer>
|
||||
<div class="flex">
|
||||
<div class="flex-1 text-left">
|
||||
<p-button label="Details" variant="text" />
|
||||
</div>
|
||||
<div class="flex-1 text-right">
|
||||
<p-button variant="outlined" aria-label="E-Mail">
|
||||
<ng-template #icon>
|
||||
<span class="material-icons !text-base">mail</span>
|
||||
</ng-template>
|
||||
</p-button>
|
||||
<p-button variant="outlined" aria-label="Phone" class="ml-2">
|
||||
<ng-template #icon>
|
||||
<span class="material-icons !text-base">phone</span>
|
||||
</ng-template>
|
||||
</p-button>
|
||||
<p-button variant="outlined" aria-label="Delete" class="ml-2">
|
||||
<ng-template #icon>
|
||||
<span class="material-icons !text-base">delete</span>
|
||||
</ng-template>
|
||||
</p-button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #icons>
|
||||
<p-chip class="!text-xs">Person</p-chip>
|
||||
</ng-template>
|
||||
<p class="flex flex-wrap items-center">
|
||||
<span class="material-icons !text-base mr-2">mail</span>j.boedige@gzm-mainz.de
|
||||
</p>
|
||||
<p class="flex flex-wrap items-center">
|
||||
<span class="material-icons !text-base mr-2">phone</span> 0171 3150850
|
||||
</p>
|
||||
</p-panel>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3 xl:col-span-3">
|
||||
<p-panel>
|
||||
<ng-template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<p-avatar label="AE" class="mr-2" size="normal" shape="circle" />
|
||||
<span class="font-bold">Amy Elsner</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #footer>
|
||||
<div class="flex">
|
||||
<div class="flex-1 text-left">
|
||||
<p-button label="Details" variant="text" />
|
||||
</div>
|
||||
<div class="flex-1 text-right">
|
||||
<p-button variant="outlined" aria-label="E-Mail">
|
||||
<ng-template #icon>
|
||||
<span class="material-icons !text-base">mail</span>
|
||||
</ng-template>
|
||||
</p-button>
|
||||
<p-button variant="outlined" aria-label="Phone" class="ml-2">
|
||||
<ng-template #icon>
|
||||
<span class="material-icons !text-base">phone</span>
|
||||
</ng-template>
|
||||
</p-button>
|
||||
<p-button variant="outlined" aria-label="Delete" class="ml-2">
|
||||
<ng-template #icon>
|
||||
<span class="material-icons !text-base">delete</span>
|
||||
</ng-template>
|
||||
</p-button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #icons>
|
||||
<p-chip class="!text-xs">Person</p-chip>
|
||||
</ng-template>
|
||||
<p class="flex flex-wrap items-center">
|
||||
<span class="material-icons !text-base mr-2">mail</span>j.boedige@gzm-mainz.de
|
||||
</p>
|
||||
<p class="flex flex-wrap items-center">
|
||||
<span class="material-icons !text-base mr-2">phone</span> 0171 3150850
|
||||
</p>
|
||||
</p-panel>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3 xl:col-span-3">
|
||||
<p-panel>
|
||||
<ng-template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<p-avatar label="AE" class="mr-2" size="normal" shape="circle" />
|
||||
<span class="font-bold">Amy Elsner</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #footer>
|
||||
<div class="flex">
|
||||
<div class="flex-1 text-left">
|
||||
<p-button label="Details" variant="text" />
|
||||
</div>
|
||||
<div class="flex-1 text-right">
|
||||
<p-button variant="outlined" aria-label="E-Mail">
|
||||
<ng-template #icon>
|
||||
<span class="material-icons !text-base">mail</span>
|
||||
</ng-template>
|
||||
</p-button>
|
||||
<p-button variant="outlined" aria-label="Phone" class="ml-2">
|
||||
<ng-template #icon>
|
||||
<span class="material-icons !text-base">phone</span>
|
||||
</ng-template>
|
||||
</p-button>
|
||||
<p-button variant="outlined" aria-label="Delete" class="ml-2">
|
||||
<ng-template #icon>
|
||||
<span class="material-icons !text-base">delete</span>
|
||||
</ng-template>
|
||||
</p-button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #icons>
|
||||
<p-chip class="!text-xs">Person</p-chip>
|
||||
</ng-template>
|
||||
<p class="flex flex-wrap items-center">
|
||||
<span class="material-icons !text-base mr-2">mail</span>j.boedige@gzm-mainz.de
|
||||
</p>
|
||||
<p class="flex flex-wrap items-center">
|
||||
<span class="material-icons !text-base mr-2">phone</span> 0171 3150850
|
||||
</p>
|
||||
</p-panel>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="grid grid-cols-12 gap-8">
|
||||
<!-- STATS -->
|
||||
<div class="col-span-12 lg:col-span-3 xl:col-span-3">
|
||||
<div class="flex items-center p-3 bg-white shadow rounded-lg w-full max-w-sm">
|
||||
<!-- Icon -->
|
||||
<div class="w-1 flex items-center justify-center bg-green-100 dark:bg-green-400/10 w-10 h-10 rounded-full">
|
||||
<span class="material-icons text-green-500">contact_phone</span>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="ml-4 flex flex-col">
|
||||
<span class="text-2xl font-bold text-gray-800 leading-none">1</span>
|
||||
<span class="text-sm text-gray-500" i18n>Contacts total</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3 xl:col-span-3">
|
||||
<div class="flex items-center p-3 bg-white shadow rounded-lg w-full max-w-sm">
|
||||
<!-- Icon -->
|
||||
<div class="w-1 flex items-center justify-center bg-green-100 dark:bg-green-400/10 w-10 h-10 rounded-full">
|
||||
<span class="material-icons text-green-500">group</span>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="ml-4 flex flex-col">
|
||||
<span class="text-2xl font-bold text-gray-800 leading-none">0</span>
|
||||
<span class="text-sm text-gray-500" i18n>Persons</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3 xl:col-span-3">
|
||||
<div class="flex items-center p-3 bg-white shadow rounded-lg w-full max-w-sm">
|
||||
<!-- Icon -->
|
||||
<div class="w-1 flex items-center justify-center bg-green-100 dark:bg-green-400/10 w-10 h-10 rounded-full">
|
||||
<span class="material-icons text-green-500">corporate_fare</span>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="ml-4 flex flex-col">
|
||||
<span class="text-2xl font-bold text-gray-800 leading-none">0</span>
|
||||
<span class="text-sm text-gray-500" i18n>Organisations</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3 xl:col-span-3">
|
||||
<div class="flex items-center p-3 bg-white shadow rounded-lg w-full max-w-sm">
|
||||
<!-- Icon -->
|
||||
<div class="w-1 flex items-center justify-center bg-green-100 dark:bg-green-400/10 w-10 h-10 rounded-full">
|
||||
<span class="material-icons text-green-500">note_alt</span>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="ml-4 flex flex-col">
|
||||
<span class="text-2xl font-bold text-gray-800 leading-none">12</span>
|
||||
<span class="text-sm text-gray-500" i18n>With notes</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user