mirror of
https://github.com/ArthurDanjou/arthome.git
synced 2026-01-26 17:40:25 +01:00
Working on arthome
This commit is contained in:
70
app/components/Modal/CreateCategory.vue
Normal file
70
app/components/Modal/CreateCategory.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormSubmitEvent } from '#ui/types'
|
||||
import type { CreateCategorySchemaType } from '~~/types/types'
|
||||
import { COLORS, CreateCategorySchema } from '~~/types/types'
|
||||
|
||||
const emit = defineEmits(['closeModal'])
|
||||
const { createCategory } = await useCategories()
|
||||
const state = reactive({
|
||||
name: undefined,
|
||||
icon: undefined,
|
||||
color: COLORS[0],
|
||||
nameVisible: true,
|
||||
})
|
||||
|
||||
async function handleCreate(event: FormSubmitEvent<CreateCategorySchemaType>) {
|
||||
await createCategory(event.data)
|
||||
emit('closeModal')
|
||||
state.color = COLORS[0]
|
||||
state.nameVisible = true
|
||||
state.icon = undefined
|
||||
state.name = undefined
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UModal :ui="{ width: 'w-full sm:max-w-md' }">
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
|
||||
Create a new category
|
||||
</h3>
|
||||
<UButton
|
||||
color="gray"
|
||||
variant="soft"
|
||||
icon="i-heroicons-x-mark-20-solid"
|
||||
class="p-1"
|
||||
@click="$emit('closeModal')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<UForm :schema="CreateCategorySchema" :state="state" class="space-y-4" @submit="handleCreate">
|
||||
<UFormGroup label="Name" name="name">
|
||||
<UInput v-model="state.name" type="text" variant="outline" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Icon " name="icon" help="Get icon from the Phosphor Collection">
|
||||
<UInput v-model="state.icon" type="text" variant="outline" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Color " name="color">
|
||||
<USelect v-model="state.color" :options="COLORS" variant="outline" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup>
|
||||
<UCheckbox v-model="state.nameVisible" :color="state.color" label="Is the category name visible?" />
|
||||
</UFormGroup>
|
||||
|
||||
<UButton
|
||||
type="submit"
|
||||
:color="state.color"
|
||||
block
|
||||
label="Create category"
|
||||
/>
|
||||
</UForm>
|
||||
</template>
|
||||
</UCard>
|
||||
</UModal>
|
||||
</template>
|
||||
91
app/components/Modal/CreateTab.vue
Normal file
91
app/components/Modal/CreateTab.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormSubmitEvent } from '#ui/types'
|
||||
import { COLORS, type CategoryType, CreateTabSchema, type CreateTabSchemaType } from '~~/types/types'
|
||||
|
||||
const props = defineProps<{
|
||||
category: CategoryType | undefined
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['closeModal'])
|
||||
const { createTab } = await useTabs()
|
||||
const { categories } = await useCategories()
|
||||
|
||||
const state = reactive({
|
||||
name: undefined,
|
||||
icon: undefined,
|
||||
link: undefined,
|
||||
color: COLORS[0],
|
||||
primary: false,
|
||||
categoryId: props.category?.id,
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
state.categoryId = props.category?.id
|
||||
})
|
||||
|
||||
async function handleCreate(event: FormSubmitEvent<CreateTabSchemaType>) {
|
||||
await createTab(event.data)
|
||||
emit('closeModal')
|
||||
state.name = undefined
|
||||
state.icon = undefined
|
||||
state.link = undefined
|
||||
state.color = COLORS[0]
|
||||
state.primary = false
|
||||
state.categoryId = props.category?.id
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UModal :ui="{ width: 'w-full sm:max-w-md' }">
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
|
||||
Create a new tab
|
||||
</h3>
|
||||
<UButton
|
||||
color="gray"
|
||||
variant="soft"
|
||||
icon="i-heroicons-x-mark-20-solid"
|
||||
class="p-1"
|
||||
@click="$emit('closeModal')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<UForm :schema="CreateTabSchema" :state="state" class="space-y-4" @submit="handleCreate">
|
||||
<UFormGroup label="Name" name="name">
|
||||
<UInput v-model="state.name" type="text" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Icon " name="icon">
|
||||
<UInput v-model="state.icon" type="text" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Color " name="color">
|
||||
<USelect v-model="state.color" :options="COLORS" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Category " name="category">
|
||||
<USelect v-model="state.categoryId" :options="categories" option-attribute="name" value-attribute="id" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Link " name="link">
|
||||
<UInput v-model="state.link" type="text" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup>
|
||||
<UCheckbox v-model="state.primary" :color="state.color" label="Is the tab primary?" />
|
||||
</UFormGroup>
|
||||
|
||||
<UButton
|
||||
type="submit"
|
||||
:color="state.color"
|
||||
block
|
||||
label="Create tab"
|
||||
/>
|
||||
</UForm>
|
||||
</template>
|
||||
</UCard>
|
||||
</UModal>
|
||||
</template>
|
||||
58
app/components/Modal/DeleteCategory.vue
Normal file
58
app/components/Modal/DeleteCategory.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<script setup lang="ts">
|
||||
import type { CategoryType } from '~~/types/types'
|
||||
|
||||
const props = defineProps<{
|
||||
category: CategoryType | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['closeModal'])
|
||||
const { deleteCategory } = await useCategories()
|
||||
|
||||
async function handleDelete() {
|
||||
await deleteCategory(props.category.id)
|
||||
emit('closeModal')
|
||||
}
|
||||
|
||||
defineShortcuts({
|
||||
enter: async () => await handleDelete(),
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UModal :ui="{ width: 'w-full sm:max-w-md' }">
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
|
||||
Confirm deletion of '{{ category.name }}'
|
||||
</h3>
|
||||
<UButton
|
||||
color="gray"
|
||||
variant="soft"
|
||||
icon="i-heroicons-x-mark-20-solid"
|
||||
class="p-1"
|
||||
@click="$emit('closeModal')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<div class="space-y-4">
|
||||
<UButton
|
||||
color="red"
|
||||
variant="solid"
|
||||
label="Delete"
|
||||
block
|
||||
@click.prevent="handleDelete"
|
||||
/>
|
||||
<UButton
|
||||
color="gray"
|
||||
variant="solid"
|
||||
label="Cancel"
|
||||
block
|
||||
@click.prevent="$emit('closeModal')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</UCard>
|
||||
</UModal>
|
||||
</template>
|
||||
58
app/components/Modal/DeleteTab.vue
Normal file
58
app/components/Modal/DeleteTab.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<script setup lang="ts">
|
||||
import type { TabType } from '~~/types/types'
|
||||
|
||||
const props = defineProps<{
|
||||
tab: TabType | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['closeModal'])
|
||||
const { deleteTab } = await useTabs()
|
||||
|
||||
async function handleDelete() {
|
||||
await deleteTab(props.tab.id)
|
||||
emit('closeModal')
|
||||
}
|
||||
|
||||
defineShortcuts({
|
||||
enter: async () => await handleDelete(),
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UModal :ui="{ width: 'w-full sm:max-w-md' }">
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
|
||||
Confirm deletion of '{{ tab.name }}'
|
||||
</h3>
|
||||
<UButton
|
||||
color="gray"
|
||||
variant="soft"
|
||||
icon="i-heroicons-x-mark-20-solid"
|
||||
class="p-1"
|
||||
@click="$emit('closeModal')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<div class="space-y-4">
|
||||
<UButton
|
||||
color="red"
|
||||
variant="solid"
|
||||
label="Delete"
|
||||
block
|
||||
@click.prevent="handleDelete"
|
||||
/>
|
||||
<UButton
|
||||
color="gray"
|
||||
variant="solid"
|
||||
label="Cancel"
|
||||
block
|
||||
@click.prevent="$emit('closeModal')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</UCard>
|
||||
</UModal>
|
||||
</template>
|
||||
80
app/components/Modal/UpdateCategory.vue
Normal file
80
app/components/Modal/UpdateCategory.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<script setup lang="ts">
|
||||
import { COLORS, type CategoryType, UpdateCategorySchema } from '~~/types/types'
|
||||
import type { FormSubmitEvent } from '#ui/types'
|
||||
|
||||
const props = defineProps<{
|
||||
category: CategoryType | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['closeModal'])
|
||||
const { updateCategory } = await useCategories()
|
||||
|
||||
const state = reactive({
|
||||
name: props.category?.name,
|
||||
icon: props.category?.icon,
|
||||
color: props.category?.color,
|
||||
nameVisible: props.category?.nameVisible,
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
state.name = props.category?.name
|
||||
state.icon = props.category?.icon
|
||||
state.color = props.category?.color
|
||||
state.nameVisible = props.category?.nameVisible
|
||||
})
|
||||
|
||||
async function handleUpdate(event: FormSubmitEvent<UpdateCategorySchema>) {
|
||||
await updateCategory({
|
||||
id: props.category!.id,
|
||||
...event.data,
|
||||
})
|
||||
emit('closeModal')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UModal :ui="{ width: 'w-full sm:max-w-md' }">
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
|
||||
Update category '{{ category.name }}'
|
||||
</h3>
|
||||
<UButton
|
||||
color="gray"
|
||||
variant="soft"
|
||||
icon="i-heroicons-x-mark-20-solid"
|
||||
class="p-1"
|
||||
@click="$emit('closeModal')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<UForm :schema="UpdateCategorySchema" :state="state" class="space-y-4" @submit="handleUpdate">
|
||||
<UFormGroup label="Name" name="name">
|
||||
<UInput v-model="state.name" type="text" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Color " name="color">
|
||||
<USelect v-model="state.color" :options="COLORS" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Icon " name="icon">
|
||||
<UInput v-model="state.icon" type="text" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup>
|
||||
<UCheckbox v-model="state.nameVisible" :color="state.color" label="Is the category name visible?" />
|
||||
</UFormGroup>
|
||||
|
||||
<UButton
|
||||
type="submit"
|
||||
:color="state.color"
|
||||
block
|
||||
label="Update category"
|
||||
/>
|
||||
</UForm>
|
||||
</template>
|
||||
</UCard>
|
||||
</UModal>
|
||||
</template>
|
||||
89
app/components/Modal/UpdateTab.vue
Normal file
89
app/components/Modal/UpdateTab.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormSubmitEvent } from '#ui/types'
|
||||
import type { COLORS, TabType, UpdateTabSchemaType } from '~~/types/types'
|
||||
import { UpdateTabSchema } from '~~/types/types'
|
||||
|
||||
const props = defineProps<{
|
||||
tab: TabType | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['closeModal'])
|
||||
const { categories } = await useCategories()
|
||||
const { updateTab } = await useTabs()
|
||||
|
||||
const state = reactive({
|
||||
name: props.tab?.name,
|
||||
icon: props.tab?.icon,
|
||||
color: props.tab?.color,
|
||||
primary: props.tab?.primary,
|
||||
categoryId: props.tab?.categoryId,
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
state.name = props.tab?.name
|
||||
state.icon = props.tab?.icon
|
||||
state.color = props.tab?.color
|
||||
state.primary = props.tab?.primary
|
||||
state.categoryId = props.tab?.categoryId
|
||||
})
|
||||
|
||||
async function handleUpdate(event: FormSubmitEvent<UpdateTabSchemaType>) {
|
||||
await updateTab({
|
||||
id: props.tab!.id,
|
||||
...event.data,
|
||||
categoryId: Number(event.data.categoryId),
|
||||
})
|
||||
emit('closeModal')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UModal :ui="{ width: 'w-full sm:max-w-md' }">
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
|
||||
Update category '{{ tab.name }}'
|
||||
</h3>
|
||||
<UButton
|
||||
color="gray"
|
||||
variant="soft"
|
||||
icon="i-heroicons-x-mark-20-solid"
|
||||
class="p-1"
|
||||
@click="$emit('closeModal')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<UForm :schema="UpdateTabSchema" :state="state" class="space-y-4" @submit="handleUpdate">
|
||||
<UFormGroup label="Name" name="name">
|
||||
<UInput v-model="state.name" type="text" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Color " name="color">
|
||||
<USelect v-model="state.color" :options="COLORS" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Icon " name="icon">
|
||||
<UInput v-model="state.icon" type="text" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Category " name="category">
|
||||
<USelect v-model="state.categoryId" :options="categories" option-attribute="name" value-attribute="id" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup>
|
||||
<UCheckbox v-model="state.primary" :color="state.color" label="Is the category primary?" />
|
||||
</UFormGroup>
|
||||
|
||||
<UButton
|
||||
type="submit"
|
||||
:color="state.color"
|
||||
block
|
||||
label="Update tab"
|
||||
/>
|
||||
</UForm>
|
||||
</template>
|
||||
</UCard>
|
||||
</UModal>
|
||||
</template>
|
||||
Reference in New Issue
Block a user