From ddfc5fc38b528551af14f52f1ce7b1b81a4e7900 Mon Sep 17 00:00:00 2001
From: mnenie <121057011+mneniee@users.noreply.github.com>
Date: Fri, 12 Jul 2024 22:59:42 +0300
Subject: [PATCH] add: templates, fix: bugs, refactoring

---
 package.json                                  |  3 +-
 src/app/providers/router/index.ts             |  3 -
 src/app/styles/mixins/transition.scss         |  2 +-
 src/app/styles/primary/exceptions.scss        |  5 ++
 src/entities/chart/ui/ChartItem.vue           |  3 +-
 src/entities/template/config/index.ts         | 32 +++++++
 src/entities/template/index.ts                |  2 +
 src/entities/template/model/index.ts          |  1 +
 src/entities/template/model/types.ts          |  9 ++
 src/entities/template/ui/TemplateItem.vue     | 88 +++++++++++++++++++
 src/entities/template/ui/index.ts             |  3 +
 .../boards/add-board/ui/CreationBoard.vue     |  2 +-
 .../boards/charts/ui/ActivityBoardChart.vue   |  3 +
 .../members/leave-team/ui/LeaveButton.vue     | 13 ++-
 src/pages/Boards.vue                          |  2 +-
 src/pages/Login.vue                           |  2 +-
 src/pages/Registration.vue                    |  2 +-
 src/pages/Templates.vue                       | 28 +++++-
 src/pages/members/MembersOverview.vue         |  2 +-
 .../boards/ui/Activity\320\241harts.vue"      |  2 +-
 src/widgets/templates/index.ts                |  1 +
 src/widgets/templates/ui/AllTemplates.vue     | 18 ++++
 src/widgets/templates/ui/index.ts             |  3 +
 23 files changed, 215 insertions(+), 14 deletions(-)
 create mode 100644 src/entities/template/config/index.ts
 create mode 100644 src/entities/template/index.ts
 create mode 100644 src/entities/template/model/index.ts
 create mode 100644 src/entities/template/model/types.ts
 create mode 100644 src/entities/template/ui/TemplateItem.vue
 create mode 100644 src/entities/template/ui/index.ts
 create mode 100644 src/widgets/templates/index.ts
 create mode 100644 src/widgets/templates/ui/AllTemplates.vue
 create mode 100644 src/widgets/templates/ui/index.ts

diff --git a/package.json b/package.json
index 6001170..f3e719f 100644
--- a/package.json
+++ b/package.json
@@ -75,5 +75,6 @@
     "vite-plugin-vue-devtools": "^7.3.1",
     "vitest": "^1.6.0",
     "vue-tsc": "^2.0.21"
-  }
+  },
+  "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
 }
diff --git a/src/app/providers/router/index.ts b/src/app/providers/router/index.ts
index ea9c0ff..2d1dfe7 100644
--- a/src/app/providers/router/index.ts
+++ b/src/app/providers/router/index.ts
@@ -81,7 +81,4 @@ export const router = createRouter({
 router.beforeEach((to, from) => {
   // TODO(@mnenie): Add guards logic
   // Needs to add guard auth logic in router
-  if (to.meta.requiresAuth === true) {
-    return router.push({ name: RouteNames.login });
-  }
 });
diff --git a/src/app/styles/mixins/transition.scss b/src/app/styles/mixins/transition.scss
index a98ffed..f8d1010 100644
--- a/src/app/styles/mixins/transition.scss
+++ b/src/app/styles/mixins/transition.scss
@@ -1,5 +1,5 @@
 @mixin transition {
-  transition-property: color, background-color, text-decoration-color, fill, stroke, opacity;
+  transition-property: color, background-color, text-decoration-color, border-color, fill, stroke, opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
diff --git a/src/app/styles/primary/exceptions.scss b/src/app/styles/primary/exceptions.scss
index 8550482..1a90d27 100644
--- a/src/app/styles/primary/exceptions.scss
+++ b/src/app/styles/primary/exceptions.scss
@@ -24,3 +24,8 @@ a {
 .v-popper__arrow-container{
   display: none !important;
 }
+
+canvas{
+  width: 100% !important;
+  height: 100% !important;
+}
diff --git a/src/entities/chart/ui/ChartItem.vue b/src/entities/chart/ui/ChartItem.vue
index 4a47ba4..8f7e787 100644
--- a/src/entities/chart/ui/ChartItem.vue
+++ b/src/entities/chart/ui/ChartItem.vue
@@ -22,10 +22,11 @@ defineProps<{
 .chart_container {
   display: flex;
   flex-direction: column;
+  width: 100%;
 }
 
 .chart {
-  width: 760px;
+  width: 100%;
   height: 100%;
   margin-top: 20px;
 }
diff --git a/src/entities/template/config/index.ts b/src/entities/template/config/index.ts
new file mode 100644
index 0000000..724b87e
--- /dev/null
+++ b/src/entities/template/config/index.ts
@@ -0,0 +1,32 @@
+import { reactive } from 'vue';
+import type { Template } from '../model';
+
+export const templates = reactive<Template[]>([
+  {
+    id: '0',
+    title: 'Base Kanban',
+    img: 'https://storage.weeek.net/templates/tm/development-and-product/scrum.png',
+    tag: 'Recommended',
+    description: `Create a basic project with "Base Kanban" template`,
+    date: 'June 12, 2024',
+    user: 'https://avatars.githubusercontent.com/u/121057011?v=4'
+  },
+  {
+    id: '1',
+    title: 'Roadmap',
+    img: 'https://storage.weeek.net/templates/tm/development-and-product/roadmap.png',
+    tag: 'New',
+    description: `Create a project based on our "Roadmap" template`,
+    date: 'June 12, 2024',
+    user: 'https://avatars.githubusercontent.com/u/121057011?v=4'
+  },
+  {
+    id: '2',
+    title: 'Web Development',
+    img: 'https://storage.weeek.net/templates/tm/development-and-product/web-development.png',
+    tag: 'New',
+    description: `Create a basic project with "Web Development" template`,
+    date: 'June 12, 2024',
+    user: 'https://avatars.githubusercontent.com/u/121057011?v=4'
+  }
+]);
diff --git a/src/entities/template/index.ts b/src/entities/template/index.ts
new file mode 100644
index 0000000..e05e29e
--- /dev/null
+++ b/src/entities/template/index.ts
@@ -0,0 +1,2 @@
+export * from './ui';
+export * from './config';
diff --git a/src/entities/template/model/index.ts b/src/entities/template/model/index.ts
new file mode 100644
index 0000000..fcb073f
--- /dev/null
+++ b/src/entities/template/model/index.ts
@@ -0,0 +1 @@
+export * from './types';
diff --git a/src/entities/template/model/types.ts b/src/entities/template/model/types.ts
new file mode 100644
index 0000000..b15f9a2
--- /dev/null
+++ b/src/entities/template/model/types.ts
@@ -0,0 +1,9 @@
+export interface Template {
+  id: string;
+  img: string;
+  title: string;
+  tag: string;
+  description: string;
+  date: string;
+  user: string;
+}
diff --git a/src/entities/template/ui/TemplateItem.vue b/src/entities/template/ui/TemplateItem.vue
new file mode 100644
index 0000000..c9b559f
--- /dev/null
+++ b/src/entities/template/ui/TemplateItem.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { UiBadge } from '@/shared/ui';
+import type { Template } from '../model';
+
+defineProps<{
+  template: Template;
+}>();
+</script>
+
+<template>
+  <div :class="$style.item">
+    <div :class="$style.img_wrapper">
+      <img :src="template.img" :alt="template.title" />
+    </div>
+    <div :class="$style.main_content">
+      <UiBadge :variant="'secondary'" style="margin-bottom: 12px">{{ template.tag }}</UiBadge>
+      <div :class="$style.text">
+        <p class="text-base" style="font-weight: 500">{{ template.title }}</p>
+        <span>{{ template.description }}</span>
+      </div>
+      <div :class="$style.bottom">
+        <span class="text-xs">{{ template.date }}</span>
+        <img v-tooltip.bottom-end="'creator'" :src="template.user" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style module lang="scss">
+@import '@/app/styles/mixins';
+
+.item {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: white;
+  border: 1px solid var(--zinc-200);
+  width: 100%;
+  height: fit-content;
+  border-radius: 10px;
+  cursor: pointer;
+  align-items: flex-start;
+  @include transition;
+
+  &:hover{
+    border: 1px solid var(--purple-main);
+  }
+
+  .img_wrapper {
+    width: 100%;
+    height: 130px;
+    border-radius: 10px 10px 0 0;
+    border-bottom: 1px solid var(--zinc-200);
+
+    & img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  .main_content {
+    padding: 15px;
+
+    .text {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      margin-bottom: 15px;
+    }
+
+    & span {
+      color: var(--zinc-500);
+    }
+  }
+
+  .bottom {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    & img {
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+    }
+  }
+}
+</style>
diff --git a/src/entities/template/ui/index.ts b/src/entities/template/ui/index.ts
new file mode 100644
index 0000000..3433fc1
--- /dev/null
+++ b/src/entities/template/ui/index.ts
@@ -0,0 +1,3 @@
+import TemplateItem from './TemplateItem.vue';
+
+export { TemplateItem };
diff --git a/src/features/boards/add-board/ui/CreationBoard.vue b/src/features/boards/add-board/ui/CreationBoard.vue
index de0cfb1..7f59ba9 100644
--- a/src/features/boards/add-board/ui/CreationBoard.vue
+++ b/src/features/boards/add-board/ui/CreationBoard.vue
@@ -15,7 +15,7 @@ const open = () => {
 
 <template>
   <div :class="$style.creation" @click="open">
-    <span>+ Create new board</span>
+    <span style="font-weight: 500;">+ Create new board</span>
   </div>
   <UiSheet ref="sheet">
     <template #header>
diff --git a/src/features/boards/charts/ui/ActivityBoardChart.vue b/src/features/boards/charts/ui/ActivityBoardChart.vue
index 7678cb7..3dca1d8 100644
--- a/src/features/boards/charts/ui/ActivityBoardChart.vue
+++ b/src/features/boards/charts/ui/ActivityBoardChart.vue
@@ -27,6 +27,9 @@ onMounted(() => {
           grid: {
             display: false,
             color: 'rgb(244 244 245)'
+          },
+          ticks: {
+            precision: 0
           }
         }
       }
diff --git a/src/features/members/leave-team/ui/LeaveButton.vue b/src/features/members/leave-team/ui/LeaveButton.vue
index 1da0b36..b6026da 100644
--- a/src/features/members/leave-team/ui/LeaveButton.vue
+++ b/src/features/members/leave-team/ui/LeaveButton.vue
@@ -1,10 +1,21 @@
 <script setup lang="ts">
+import { RouteNames } from '@/shared/config/consts';
 import { UiButton } from '@/shared/ui';
 import { X } from 'lucide-vue-next';
+import { useRouter } from 'vue-router';
+import { toast } from 'vue-sonner';
+
+const router = useRouter();
+const leaveTeam = () => {
+  toast.info('You left the team', {
+    description: 'Find suitable or become an admin of new team'
+  });
+  router.push({ name: RouteNames.boards });
+};
 </script>
 
 <template>
-  <UiButton :variant="'destructive'">
+  <UiButton :variant="'destructive'" @click="leaveTeam">
     <X :size="17" style="margin-right: 6px" />
     Leave...
   </UiButton>
diff --git a/src/pages/Boards.vue b/src/pages/Boards.vue
index 81714f3..6cd315a 100644
--- a/src/pages/Boards.vue
+++ b/src/pages/Boards.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ActivityСharts, TeamBoards } from '@/widgets/boards';
 import { useHead } from '@unhead/vue';
+import { ActivityСharts, TeamBoards } from '@/widgets/boards';
 
 useHead({
   title: 'Jenda - cloud program for project and task management'
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
index e521b20..c393bb6 100644
--- a/src/pages/Login.vue
+++ b/src/pages/Login.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { useHead } from '@unhead/vue';
 import { BgPanel, SignInForm } from '@/features/auth';
 import { AuthContainer } from '@/widgets/auth';
-import { useHead } from '@unhead/vue';
 
 useHead({
   title: 'Jenda | Login'
diff --git a/src/pages/Registration.vue b/src/pages/Registration.vue
index 851e351..67ea852 100644
--- a/src/pages/Registration.vue
+++ b/src/pages/Registration.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { useHead } from '@unhead/vue';
 import { BgPanel, SignUpForm } from '@/features/auth';
 import { AuthContainer } from '@/widgets/auth';
-import { useHead } from '@unhead/vue';
 
 useHead({
   title: 'Jenda | Registration'
diff --git a/src/pages/Templates.vue b/src/pages/Templates.vue
index ba52a33..96d530e 100644
--- a/src/pages/Templates.vue
+++ b/src/pages/Templates.vue
@@ -1 +1,27 @@
-<template>templates</template>
+<script setup lang="ts">
+import { useHead } from '@unhead/vue';
+import { AllTemplates } from '@/widgets/templates';
+
+useHead({
+  title: 'Jenda | Templates'
+});
+</script>
+
+<template>
+  <div v-once :class="$style.top">
+    <h4 class="heading-4">Templates</h4>
+    <p class="text-sm" style="color: var(--zinc-500)">
+      Choose one of the available templates to create your project
+    </p>
+  </div>
+  <AllTemplates />
+</template>
+
+<style module lang="scss">
+.top {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-bottom: 20px;
+}
+</style>
diff --git a/src/pages/members/MembersOverview.vue b/src/pages/members/MembersOverview.vue
index 8615e40..204557e 100644
--- a/src/pages/members/MembersOverview.vue
+++ b/src/pages/members/MembersOverview.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { MainWrapper } from '@/widgets/members';
 import { useHead } from '@unhead/vue';
+import { MainWrapper } from '@/widgets/members';
 
 useHead({
   title: 'Jenda | Members'
diff --git "a/src/widgets/boards/ui/Activity\320\241harts.vue" "b/src/widgets/boards/ui/Activity\320\241harts.vue"
index d2b4380..8992329 100644
--- "a/src/widgets/boards/ui/Activity\320\241harts.vue"
+++ "b/src/widgets/boards/ui/Activity\320\241harts.vue"
@@ -14,7 +14,7 @@ import { ChartItem } from '@/entities/chart';
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 15px;
+  gap: 50px;
   padding-top: 20px;
   border-radius: 10px;
 }
diff --git a/src/widgets/templates/index.ts b/src/widgets/templates/index.ts
new file mode 100644
index 0000000..5ecdd1f
--- /dev/null
+++ b/src/widgets/templates/index.ts
@@ -0,0 +1 @@
+export * from './ui';
diff --git a/src/widgets/templates/ui/AllTemplates.vue b/src/widgets/templates/ui/AllTemplates.vue
new file mode 100644
index 0000000..f9e353b
--- /dev/null
+++ b/src/widgets/templates/ui/AllTemplates.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { TemplateItem, templates } from '@/entities/template';
+</script>
+
+<template>
+  <div :class="$style.container">
+    <TemplateItem v-for="template in templates" :key="template.id" :template="template" />
+  </div>
+</template>
+
+<style module lang="scss">
+.container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  width: 100%;
+}
+</style>
diff --git a/src/widgets/templates/ui/index.ts b/src/widgets/templates/ui/index.ts
new file mode 100644
index 0000000..2bafa33
--- /dev/null
+++ b/src/widgets/templates/ui/index.ts
@@ -0,0 +1,3 @@
+import AllTemplates from './AllTemplates.vue';
+
+export { AllTemplates };