mirror of https://github.com/wg-easy/wg-easy
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
4.5 KiB
113 lines
4.5 KiB
<template>
|
|
<!-- Create Dialog -->
|
|
<div
|
|
v-if="modalStore.clientCreate"
|
|
class="fixed z-10 inset-0 overflow-y-auto"
|
|
>
|
|
<div
|
|
class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
|
|
>
|
|
<!--
|
|
Background overlay, show/hide based on modal state.
|
|
|
|
Entering: "ease-out duration-300"
|
|
From: "opacity-0"
|
|
To: "opacity-100"
|
|
Leaving: "ease-in duration-200"
|
|
From: "opacity-100"
|
|
To: "opacity-0"
|
|
-->
|
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
|
<div
|
|
class="absolute inset-0 bg-gray-500 dark:bg-black opacity-75 dark:opacity-50"
|
|
/>
|
|
</div>
|
|
|
|
<!-- This element is to trick the browser into centering the modal contents. -->
|
|
<span
|
|
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
|
aria-hidden="true"
|
|
>​</span
|
|
>
|
|
<!--
|
|
Modal panel, show/hide based on modal state.
|
|
|
|
Entering: "ease-out duration-300"
|
|
From: "opacity-0 tranneutral-y-4 sm:tranneutral-y-0 sm:scale-95"
|
|
To: "opacity-100 tranneutral-y-0 sm:scale-100"
|
|
Leaving: "ease-in duration-200"
|
|
From: "opacity-100 tranneutral-y-0 sm:scale-100"
|
|
To: "opacity-0 tranneutral-y-4 sm:tranneutral-y-0 sm:scale-95"
|
|
-->
|
|
<div
|
|
class="inline-block align-bottom bg-white dark:bg-neutral-700 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="modal-headline"
|
|
>
|
|
<div class="bg-white dark:bg-neutral-700 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
|
<div class="sm:flex sm:items-start">
|
|
<div
|
|
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-800 sm:mx-0 sm:h-10 sm:w-10"
|
|
>
|
|
<IconsPlus class="h-6 w-6 text-white" />
|
|
</div>
|
|
<div
|
|
class="flex-grow mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"
|
|
>
|
|
<h3
|
|
id="modal-headline"
|
|
class="text-lg leading-6 font-medium text-gray-900 dark:text-neutral-200"
|
|
>
|
|
{{ $t('newClient') }}
|
|
</h3>
|
|
<div class="mt-2">
|
|
<p class="text-sm text-gray-500">
|
|
<input
|
|
v-model.trim="modalStore.clientCreateName"
|
|
class="rounded p-2 border-2 dark:bg-neutral-700 dark:text-neutral-200 border-gray-100 dark:border-neutral-600 focus:border-gray-200 focus:dark:border-neutral-500 dark:placeholder:text-neutral-400 outline-none w-full"
|
|
type="text"
|
|
:placeholder="$t('name')"
|
|
/>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="bg-gray-50 dark:bg-neutral-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"
|
|
>
|
|
<button
|
|
v-if="modalStore.clientCreateName.length"
|
|
type="button"
|
|
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-800 text-base font-medium text-white hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"
|
|
@click="
|
|
modalStore.createClient();
|
|
modalStore.clientCreate = null;
|
|
"
|
|
>
|
|
{{ $t('create') }}
|
|
</button>
|
|
<button
|
|
v-else
|
|
type="button"
|
|
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-200 dark:bg-neutral-400 text-base font-medium text-white dark:text-neutral-300 sm:ml-3 sm:w-auto sm:text-sm cursor-not-allowed"
|
|
>
|
|
{{ $t('create') }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-neutral-500 shadow-sm px-4 py-2 bg-white dark:bg-neutral-500 text-base font-medium text-gray-700 dark:text-neutral-50 hover:bg-gray-50 dark:hover:bg-neutral-600 dark:hover:border-neutral-600 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
|
|
@click="modalStore.clientCreate = null"
|
|
>
|
|
{{ $t('cancel') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const modalStore = useModalStore();
|
|
</script>
|
|
|