Merge branch 'i11' of https://github.com/migueloliveiradev/living int…

…o i11
migueloliveiradev · Sep 16, 2024 · 018e346 · 018e346
2 parents 0ec8ea7 + 0c88b90
commit 018e346
Show file tree

Hide file tree

Showing 15 changed files with 481 additions and 391 deletions.
diff --git a/Living.WebAPP/api/types.ts b/Living.WebAPP/api/types.ts
@@ -0,0 +1,3 @@
+import type { components } from "~/api/schema";
+
+export type Post = components["schemas"]["CreatePostCommand"];
diff --git a/Living.WebAPP/assets/css/main.css b/Living.WebAPP/assets/css/main.css
@@ -1 +1,5 @@
-a { color: inherit; } 
+a { color: inherit; } 
+
+body {
+    margin: 0;
+}
diff --git a/Living.WebAPP/components/Posts/Post.vue b/Living.WebAPP/components/Posts/Post.vue
@@ -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" />
+    </Fieldset>
+  </div>
 </template>
diff --git a/Living.WebAPP/components/forms/FormError.vue b/Living.WebAPP/components/forms/FormError.vue
@@ -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">

diff --git a/Living.WebAPP/eslint.config.mjs b/Living.WebAPP/eslint.config.mjs
@@ -14,6 +14,26 @@ export default withNuxt(
 				},
 			}],
 			"vue/prop-name-casing": ["error", "camelCase"],
+			"vue/html-indent": [
+				"error",
+				2,
+				{
+					attribute: 1,
+					baseIndent: 1,
+					closeBracket: 0,
+					alignAttributesVertically: false,
+				},
+			],
+			"vue/block-order": ["error", {
+				order: ["script", "template", "style"],
+			}],
+			"vue/block-lang": ["error",
+				{
+					script: {
+						lang: "ts",
+					},
+				},
+			],
 		},
 		ignores: [
 			"api/schema.d.ts",

diff --git a/Living.WebAPP/layouts/Feed.vue b/Living.WebAPP/layouts/Feed.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import Card from "primevue/card";
 import type { MenuItem } from "primevue/menuitem";
 import { ref } from "vue";
 
@@ -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",
@@ -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>
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"];