Skip to content

Commit

Permalink
feat: created page create post
Browse files Browse the repository at this point in the history
  • Loading branch information
@migueloliveiradev
migueloliveiradev committed Sep 14, 2024
1 parent a1a5e9c commit 0c88b90
Show file tree
Hide file tree
Showing 12 changed files with 404 additions and 387 deletions.
3 changes: 3 additions & 0 deletions Living.WebAPP/api/types.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import type { components } from "~/api/schema";

export type Post = components["schemas"]["CreatePostCommand"];
6 changes: 5 additions & 1 deletion Living.WebAPP/assets/css/main.css
View file
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
a { color: inherit; }
a { color: inherit; }

body {
margin: 0;
}
89 changes: 14 additions & 75 deletions Living.WebAPP/components/Posts/Post.vue
View file
Original file line number Diff line number Diff line change
@@ -1,81 +1,20 @@
<script lang="ts" setup>
import { ref } from "vue";
import Menu from "primevue/menu";
const { content } = defineProps<{
content: string;
const items = ref([
{
label: "Refresh",
icon: "pi pi-refresh",
},
{
label: "Search",
icon: "pi pi-search",
},
{
separator: true,
},
{
label: "Delete",
icon: "pi pi-times",
},
]);
}>();
</script>

<template>
<div class="card">
<Toast />
<Panel toggleable>
<template #header>
<div class="flex items-center gap-2">
<Avatar
image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
size="large"
shape="circle"
/>
<span class="font-bold">Amy Elsner</span>
</div>
</template>
<template #footer>
<div class="flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center gap-2">
<Button
icon="pi pi-user"
rounded
text
/>
<Button
icon="pi pi-bookmark"
severity="secondary"
rounded
text
/>
</div>
<span class="text-surface-500 dark:text-surface-400">Updated 2 hours ago</span>
</div>
</template>
<template #icons>
<Button
icon="pi pi-cog"
severity="secondary"
rounded
text
@click="toggle"
/>
<Menu
id="config_menu"
:model="items"
popup
/>
</template>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Panel>
</div>
<div class="card">
<Fieldset>
<template #legend>
<div class="flex items-center pl-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold p-2">Amy Elsner</span>
</div>
</template>
<p class="m-0" v-html="content" />

Check warning on line 17 in Living.WebAPP/components/Posts/Post.vue

View workflow job for this annotation

GitHub Actions / checks 

'v-html' directive can lead to XSS attack
</Fieldset>
</div>
</template>
40 changes: 20 additions & 20 deletions Living.WebAPP/components/forms/FormError.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,26 +9,26 @@ const { t } = useI18n({
</script>

<template>
<div
v-if="errors"
class="mt-2"
>
<div
v-for="(codes, key) in errors"
:key="key"
>
<div v-if="keys.includes(key as unknown as string)">
<div
v-for="code in codes"
:key="`${key}.${code}`"
>
<div class="text-red-500">
{{ t(`${key}.${code}`) }}
</div>
</div>
</div>
</div>
</div>
<div
v-if="errors"
class="mt-2"
>
<div
v-for="(codes, key) in errors"
:key="key"
>
<div v-if="keys.includes(key as unknown as string)">
<div
v-for="code in codes"
:key="`${key}.${code}`"
>
<div class="text-red-500">
{{ t(`${key}.${code}`) }}
</div>
</div>
</div>
</div>
</div>
</template>

<i18n lang="json">
Expand Down
115 changes: 75 additions & 40 deletions Living.WebAPP/layouts/Feed.vue
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script lang="ts" setup>
import Card from "primevue/card";
import type { MenuItem } from "primevue/menuitem";
import { ref } from "vue";
Expand All @@ -9,6 +10,11 @@ const items = ref<MenuItem[]>([
url: "/feed",
},
{
label: "Criar",
icon: "pi pi-pencil",
url: "/posts/create",
},
{
label: "Explorar",
icon: "pi pi-objects-column",
Expand All @@ -22,52 +28,81 @@ const items = ref<MenuItem[]>([
icon: "pi pi-inbox",
},
{
label: "Profile",
icon: "pi pi-user",
url: "/me",
label: "Settings",
icon: "pi pi-cog",
},
{
label: "Mais",
icon: "pi pi-ellipsis-h",
items: [
{
label: "Settings",
icon: "pi pi-cog",
},
{
label: "Logout",
icon: "pi pi-sign-out",
},
],
label: "Logout",
icon: "pi pi-sign-out",
},
]);
</script>

<template>
<div class="card flex justify-center">
<PanelMenu
:model="items"
class="w-full md:w-80 max-w-19rem mt-8 "
>
<template #item="{ item }">
<NuxtLink
v-ripple
class="flex items-center px-4 py-2 cursor-pointer group"
:to="item.url"
>
<span :class="[item.icon, 'text-primary group-hover:text-inherit']" />
<span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
<Badge
v-if="item.badge"
class="ml-auto"
:value="item.badge"
/>
</NuxtLink>
</template>
</PanelMenu>
<div class="ml-5 w-full">
<slot />
</div>
</div>
<div class="card flex justify-center">
<div class="sidebar">
<PanelMenu
:model="items"
class="w-full md:w-80 max-w-19rem mt-8 "
>
<template #item="{ item }">
<NuxtLink
v-ripple
class="flex items-center px-4 py-2 cursor-pointer group"
:to="item.url"
>
<span :class="[item.icon, 'text-primary group-hover:text-inherit']" />
<span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
<Badge
v-if="item.badge"
class="ml-auto"
:value="item.badge"
/>
</NuxtLink>
</template>
</PanelMenu>
<div class="profile-card">
<Card>
<template #title>
Perfil
</template>
<template #content>
<div class="flex">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" class="mt-2" />
<p class="ml-2">
Miguel Oliveira
</p>
</div>
</template>
</Card>
</div>
</div>
<div class="m-5 w-full">
<slot />
</div>
</div>
</template>

<style lang="css" scoped>
.sidebar {
border-right: 0.3px solid #e0e0e0;
padding-right: 5px;
height: 100vh;
overflow-y: auto;
width: 19rem;
z-index: 100;
position: relative;
}
.profile-card {
position: absolute;
bottom: 0;
width: 100%;
padding: 1rem;
box-sizing: border-box;
border-top: 0.3px solid #e0e0e0;
}
</style>
80 changes: 40 additions & 40 deletions Living.WebAPP/layouts/Home.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,44 +28,44 @@ const items = computed<MenuItem[]>(() => [
</script>

<template>
<div>
<Menubar :model="items">
<template #item="{ item, hasSubmenu, root }">
<NuxtLink
v-ripple
class="flex items-center"
:to="item.url"
>
<span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span>
<Badge
v-if="item.badge"
:class="{ 'ml-auto': !root, 'ml-2': root }"
:value="item.badge"
/>
<span
v-if="item.shortcut"
class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1"
>
{{ item.shortcut }}
</span>
<i
v-if="hasSubmenu"
:class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"
/>
</NuxtLink>
</template>
<template #end>
<Dropdown
model-value="locale"
:options="languages"
option-label="option"
placeholder="Selecione um idioma"
class="w-full md:w-14rem"
@change="(e) => (locale = e.value.code)"
/>
</template>
</Menubar>
<slot />
</div>
<div>
<Menubar :model="items">
<template #item="{ item, hasSubmenu, root }">
<NuxtLink
v-ripple
class="flex items-center"
:to="item.url"
>
<span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span>
<Badge
v-if="item.badge"
:class="{ 'ml-auto': !root, 'ml-2': root }"
:value="item.badge"
/>
<span
v-if="item.shortcut"
class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1"
>
{{ item.shortcut }}
</span>
<i
v-if="hasSubmenu"
:class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"
/>
</NuxtLink>
</template>
<template #end>
<Dropdown
model-value="locale"
:options="languages"
option-label="option"
placeholder="Selecione um idioma"
class="w-full md:w-14rem"
@change="(e) => (locale = e.value.code)"
/>
</template>
</Menubar>
<slot />
</div>
</template>
12 changes: 9 additions & 3 deletions Living.WebAPP/pages/feed/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,13 @@
</script>

<template>
<NuxtLayout name="feed">
<Post v-for="number in Array(5)" :key="number" class="mt-2" />
</NuxtLayout>
<NuxtLayout name="feed">
<Post
v-for="number in Array(5)"
:key="number"
class="mt-2"
content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
/>
</NuxtLayout>
</template>
Loading

0 comments on commit 0c88b90

Please sign in to comment.