style(sidebar): set style and functionment for the sidebar (#1090)

yaki_admin/src/components/ButtonIcon.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const props = defineProps({
+  icon: {
+    type: String,
+    required: true,
+  },
+});
+
+const classList = ["button--general", "button--color-secondary", "button--height-secondary", "button--icon-text-style"];
+</script>
+
+<template>
+  <button :class="classList">
+    <figure>
+      <img
+        :src="icon"
+        alt="arrow-left" />
+    </figure>
+  </button>
+</template>

yaki_admin/src/components/buttonPrimary.vue → yaki_admin/src/components/ButtonPrimary.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const props = defineProps({
-  buttonText: {
+  text: {
     type: String,
     required: true,
   },
@@ -19,6 +19,6 @@ const classList = [
 
 <template>
   <button :class="classList">
-    {{ props.buttonText }}
+    {{ props.text }}
   </button>
 </template>

yaki_admin/src/components/buttonSecondary.vue → yaki_admin/src/components/ButtonSecondary.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const props = defineProps({
-  buttonText: {
+  text: {
     type: String,
     required: true,
   },
@@ -19,6 +19,6 @@ const classList = [
 
 <template>
   <button :class="classList">
-    {{ props.buttonText }}
+    {{ props.text }}
   </button>
 </template>

yaki_admin/src/components/ButtonTextIcon.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const props = defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  icon: {
+    type: String,
+    required: true,
+  },
+});
+
+const classList = [
+  "button--general",
+  "button--color-delete",
+  "button--sized-content",
+  "button--height-secondary",
+  "button--icon-text-style",
+];
+</script>
+
+<template>
+  <button :class="classList">
+    <figure>
+      <img
+        :src="icon"
+        alt="arrow-left" />
+    </figure>
+    <p class="button--text text-uppercase unselectabla-text">{{ text }}</p>
+  </button>
+</template>

yaki_admin/src/components/LoggedUserCard.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import avatarIcon from "@/assets/images/avatar_2.png";
+</script>
+
+<template>
+  <article class="user-card__container logged_user_card">
+    <figure class="user-card__avatar">
+      <img
+        :src="avatarIcon"
+        alt="user-card" />
+    </figure>
+    <div class="user-card__wrapper-user-infos">
+      <p class="user-card__name-text">Admin</p>
+      <p>Administrator</p>
+    </div>
+  </article>
+</template>

yaki_admin/src/components/SideBarMenuDropDown.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import sideBarMenuDropDownElement from "./SideBarMenuDropDownElement.vue";
+import groupIcon from "@/assets/images/group-regular-24.png";
+import arrowIcon from "@/assets/images/chevron-down-regular-24.png";
+
+import {useTeamStore} from "@/stores/teamStore";
+import {useRoleStore} from "@/stores/roleStore";
+import {onBeforeMount} from "vue";
+import {selectTeamAndFetchTeammates} from "@/features/captain/services/teamList.service";
+import router from "@/router/router";
+
+const teamStore = useTeamStore();
+const roleStore = useRoleStore();
+
+//before mount, fetch teams, select first team from the saved list, get team name, fetch teammates.
+onBeforeMount(async () => {
+  await teamStore.setTeamListOfACaptain(roleStore.getCaptainsId);
+  // automaticaly select first team right after team fetch, and save name
+
+  if (teamStore.getTeamList.length > 0) {
+    selectTeamAndFetchTeammates(teamStore.getTeamList[0].id);
+  }
+});
+
+const onClickSelectTeam = (id: number) => {
+  selectTeamAndFetchTeammates(id);
+  router.push({path: "/captain/manage-team"});
+};
+
+const props = defineProps({
+  innerText: {
+    type: String,
+    required: true,
+  },
+  iconPath: {
+    type: String,
+    required: true,
+  },
+  isSelected: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+});
+</script>
+
+<template>
+  <section class="drop-down__container">
+    <div class="text-icon__container text-icon__container-height--padding text_icon--icon drop-down--sidebar-color">
+      <figure>
+        <img
+          :src="groupIcon"
+          alt="group icon" />
+      </figure>
+      <p class="text-icon--text">{{ props.innerText }}</p>
+    </div>
+    <input
+      class="drop-down__checkbox"
+      type="checkbox"
+      id="sidebar-dropdown" />
+    <figure class="drop-down__icon">
+      <img
+        :src="arrowIcon"
+        alt="drop down menu arrow" />
+    </figure>
+    <section
+      v-if="teamStore.getTeamList && teamStore.getTeamList.length > 0"
+      class="drop-down__menu">
+      <side-bar-menu-drop-down-element
+        v-for="(team, index) in teamStore.getTeamList"
+        :key="index"
+        v-bind:id="team.id"
+        v-bind:teamName="team.teamName"
+        @click.prevent="() => onClickSelectTeam(team.id)" />
+    </section>
+    <section
+      v-else
+      class="drop-down__menu">
+      <p class="no-teams">There is no team yet</p>
+    </section>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.no-teams {
+  padding-inline-start: 16px;
+  padding-block: 8px;
+  color: rgb(238, 237, 237);
+}
+</style>

yaki_admin/src/components/SideBarMenuDropDownElement.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import {useTeamStore} from "@/stores/teamStore";
+
+const teamStore = useTeamStore();
+
+const props = defineProps({
+  teamName: {
+    type: String,
+    required: true,
+  },
+  id: {
+    type: Number,
+    required: true,
+  },
+});
+
+const classList = ["text-icon__container", "drop-down__menu_item--height-padding-color"];
+</script>
+
+<template>
+  <p
+    :class="[
+      classList,
+      {
+        'team-selected': teamStore.isSameTeamId(props.id),
+      },
+    ]">
+    {{ props.teamName }}
+  </p>
+</template>
+
+<style scoped lang="scss">
+.team-selected {
+  padding-inline-start: 16px;
+  background-color: #ffffff;
+
+  &:hover {
+    background-color: #f0eeee;
+  }
+}
+</style>

yaki_admin/src/components/SideBarMenuLink.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const props = defineProps({
+  icon: {
+    type: String,
+    required: true,
+  },
+  text: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="text-icon__container text-icon__container-height--padding text_icon--icon text-icon--sidebar-color">
+    <figure>
+      <img
+        :src="icon"
+        alt="close" />
+    </figure>
+    <p class="text-icon--text">{{ props.text }}</p>
+  </div>
+</template>

yaki_admin/src/features/captain/CaptainPage.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import PageLayout from "@/global-layouts/PageLayout.vue";
-import SideBarCaptainContent from "@/features/captain/components/SideBarCaptainContent.vue";
+import SideBarContent from "@/features/shared/components/SideBarContent.vue";
 
 import {RouterView} from "vue-router";
 </script>
 
 <template>
   <page-layout>
     <template v-slot:sidebarContent>
-      <side-bar-captain-content />
+      <side-bar-content />
     </template>
 
     <template v-slot:pageContent>

yaki_admin/src/features/customer/components/SideBarCustomer.vue

@@ -12,20 +12,22 @@ const navigateTo = (route: string) => {
 </script>
 
 <template>
-  <side-bar-element
-    v-bind:innerText="'Manage Captains'"
-    v-bind:iconPath="security"
-    v-bind:isSelected="true"
-    @click="navigateTo('/customer/manage-captain')" />
+  <div>
+    <side-bar-element
+      v-bind:innerText="'Manage Captains'"
+      v-bind:iconPath="security"
+      v-bind:isSelected="true"
+      @click="navigateTo('/customer/manage-captain')" />
 
-  <side-bar-element
-    v-bind:innerText="'Manage Teams'"
-    v-bind:iconPath="vector"
-    v-bind:isSelected="true"
-    @click="navigateTo('/customer/manage-team')" />
+    <side-bar-element
+      v-bind:innerText="'Manage Teams'"
+      v-bind:iconPath="vector"
+      v-bind:isSelected="true"
+      @click="navigateTo('/customer/manage-team')" />
 
-  <side-bar-element
-    v-bind:inner-text="'Grant admin rights'"
-    v-bind:icon-path="plusIcon"
-    @click="navigateTo('/customer/admin-invitation')" />
+    <side-bar-element
+      v-bind:inner-text="'Grant admin rights'"
+      v-bind:icon-path="plusIcon"
+      @click="navigateTo('/customer/admin-invitation')" />
+  </div>
 </template>