feat: Added session tab, action buttons, clubbed similar code from se…

…ssion list and file list

src/App.vue

@@ -14,9 +14,11 @@ const navPaginationItems = ref([
     to: { path: "/" },
   },
 ]);
+const snackbar = ref(false);
 const isOctokitInitialised = ref(false);
 provide("set-nav-button-config", navButtonConfig);
 provide("set-nav-pagination-items", navPaginationItems);
+provide("set-snackbar", snackbar);
 
 onMounted(async () => {
   const loader = useLoader().show();
@@ -36,6 +38,13 @@ onMounted(async () => {
       <template v-if="isOctokitInitialised">
         <RouterView />
       </template>
+      <v-snackbar
+        v-model="snackbar"
+        timeout="3000"
+        :color="snackbar.status"
+        :text="snackbar.text"
+      >
+      </v-snackbar>
     </v-main>
   </v-app>
 </template>

src/components/global/ListPlaceholder.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { defineProps } from "vue";
+
+const props = defineProps({
+  items: {
+    type: Number,
+    default: 10,
+  },
+  avatar: {
+    type: Boolean,
+    default: true,
+  },
+  button: {
+    type: Number,
+    default: 4,
+  },
+  subTitle: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>
+
+<template>
+  <v-list-item
+    v-for="n in props.items"
+    :key="n"
+    :title="n"
+    class="sessions-view py-4 border-b-thin"
+  >
+    <template v-slot:title>
+      <div class="d-flex align-start px-5">
+        <v-skeleton-loader
+          v-if="props.avatar"
+          type="avatar"
+        ></v-skeleton-loader>
+        <div class="ml-4">
+          <v-skeleton-loader width="300px" type="heading"></v-skeleton-loader>
+          <div
+            v-if="props.subTitle"
+            class="v-list-item-subtitle d-flex align-center pt-2"
+          >
+            <v-skeleton-loader width="200px" type="text"></v-skeleton-loader>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-slot:append>
+      <v-skeleton-loader
+        v-if="props.button"
+        v-for="a in props.button"
+        :key="a"
+        width="24"
+        type="heading"
+        class="mx-3"
+      ></v-skeleton-loader>
+    </template>
+  </v-list-item>
+</template>

src/components/session/Delete.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { defineProps, inject, ref } from "vue";
+import Tooltip from "@/components/global/Tooltip.vue";
+import { useLoader } from "@/helpers/index.js";
+import { deleteBySessionNumber } from "@/api/index.js";
+
+const props = defineProps({
+  session: {
+    type: Object,
+    default: {},
+  },
+  size: {
+    type: String,
+    default: "large",
+  },
+  text: {
+    type: String,
+    default: "",
+  },
+  callBack: Function,
+});
+const snackbar = inject("set-snackbar");
+const deleteSession = ref(false);
+
+const deleteSessionHandle = async () => {
+  if (deleteSession.value) {
+    const loader = useLoader().show();
+    snackbar.value = await deleteBySessionNumber(deleteSession.value.number);
+    deleteSession.value = false;
+    loader.hide();
+    await props.callBack();
+  }
+};
+</script>
+
+<template>
+  <Tooltip text="Delete Session">
+    <v-btn
+      color="blue-grey-darken-4"
+      :icon="props.text ? false : 'mdi-delete-outline'"
+      prepend-icon="mdi-delete-outline"
+      :size="props.size"
+      :text="props.text"
+      variant="text"
+      :disabled="props.session.state === 'closed'"
+      @click="deleteSession = props.session"
+      class="text-capitalize font-weight-medium"
+    ></v-btn>
+  </Tooltip>
+
+  <v-dialog v-model="deleteSession" width="auto">
+    <v-card max-width="400" prepend-icon="mdi-alert" title="Delete Session">
+      <template v-slot:text>
+        Are you sure you want to delete session:
+        <strong>{{ deleteSession.title }}</strong>
+      </template>
+      <template v-slot:actions>
+        <v-spacer></v-spacer>
+        <v-btn @click="deleteSession = false"> Cancel </v-btn>
+        <v-btn color="red" variant="flat" @click="deleteSessionHandle">
+          Delete
+        </v-btn>
+      </template>
+    </v-card>
+  </v-dialog>
+</template>

src/components/session/index.js

@@ -0,0 +1 @@
+export { default as DeleteSession } from "./Delete.vue";

src/methods/sessions-view/check-status-method.js

@@ -10,7 +10,7 @@ export default async function checkStatusMethod(
       const check = await getCheckStatus(session.number);
       const requestedChanges = await getSessionReviewStatus(session.number);
 
-      if (currPage === updatedPage.value) {
+      if (currPage === updatedPage.value && sessions.value) {
         sessions.value[index] = {
           ...session,
           requested_changes: requestedChanges,

src/views/SessionView.vue

@@ -13,18 +13,21 @@ import {
 import OctIcon from "@/components/global/OctIcon.vue";
 import Tooltip from "@/components/global/Tooltip.vue";
 import { useLoader } from "@/helpers/index.js";
+import ListPlaceholder from "@/components/global/ListPlaceholder.vue";
+import { DeleteSession } from "@/components/session/index.js";
 
 const route = useRoute();
 const router = useRouter();
 const sessionNumber = route.params.sessionNumber;
 
 const session = ref(null);
 const fileChangesList = ref(null);
-const snackbar = ref(false);
 const loader = ref({});
 const totalPage = ref(0);
 const deleteFile = ref(false);
 const page = ref(route.query.page ? parseInt(route.query.page, 10) : 1);
+
+const snackbar = inject("set-snackbar");
 const navButtonConfig = inject("set-nav-button-config");
 const navPaginationItems = inject("set-nav-pagination-items");
 
@@ -89,6 +92,61 @@ const deleteFileHandle = async () => {
 </script>
 
 <template>
+  <div
+    v-if="session"
+    class="bg-secondary px-5 py-4 d-flex align-center ga-1 session-tab"
+  >
+    <v-btn
+      :href="session.html_url"
+      target="_blank"
+      color="blue-grey-darken-4"
+      prepend-icon="mdi-github"
+      size="x-large"
+      variant="text"
+      text="Github"
+      class="text-capitalize font-weight-medium"
+    ></v-btn>
+    <DeleteSession
+      text="Delete Session"
+      size="x-large"
+      :session="session"
+      :snackbar="snackbar"
+      :callBack="updateSessionDetails"
+    />
+    <v-btn
+      target="_blank"
+      color="blue-grey-darken-4"
+      prepend-icon="mdi-monitor-eye"
+      size="x-large"
+      variant="text"
+      text="Preview"
+      class="text-capitalize font-weight-medium"
+    ></v-btn>
+    <v-divider inset vertical></v-divider>
+    <v-btn
+      v-if="!session.draft || session.state === 'closed'"
+      target="_blank"
+      color="primary"
+      prepend-icon="mdi-dots-horizontal-circle-outline"
+      size="x-large"
+      variant="flat"
+      text="Pending Review"
+      class="text-capitalize font-weight-medium ml-5"
+      disabled
+    ></v-btn>
+    <v-btn
+      v-else
+      target="_blank"
+      color="blue-grey-lighten-4"
+      prepend-icon="mdi-file-document-edit"
+      size="x-large"
+      variant="flat"
+      text="Submit for Review"
+      class="text-capitalize font-weight-medium ml-5"
+      :disabled="!session.draft || session.state === 'closed'"
+    ></v-btn>
+  </div>
+
   <v-list class="py-0">
     <!-- file's list -->
     <v-list-item
@@ -152,34 +210,8 @@ const deleteFileHandle = async () => {
     </v-list-item>
 
     <!-- Placeholder for file's list -->
-    <v-list-item
-      v-else-if="fileChangesList === null"
-      v-for="n in 10"
-      :key="n"
-      :title="n"
-      class="files-view py-4 border-b-thin"
-    >
-      <template v-slot:title>
-        <div class="d-flex align-start px-5">
-          <v-skeleton-loader type="avatar"></v-skeleton-loader>
-          <div class="ml-4">
-            <v-skeleton-loader width="300px" type="heading"></v-skeleton-loader>
-            <div class="v-list-item-subtitle d-flex align-center pt-2">
-              <v-skeleton-loader width="200px" type="text"></v-skeleton-loader>
-            </div>
-          </div>
-        </div>
-      </template>
-      <template v-slot:append>
-        <v-skeleton-loader
-          v-for="a in 2"
-          :key="a"
-          width="24"
-          type="heading"
-          class="mx-3"
-        ></v-skeleton-loader>
-      </template>
-    </v-list-item>
+    <ListPlaceholder :button="2" v-else-if="fileChangesList === null" />
+
     <v-empty-state
       v-else
       headline="Whoops, No File changes found."
@@ -237,4 +269,16 @@ const deleteFileHandle = async () => {
   </v-snackbar>
 </template>
 
-<style></style>
+<style>
+.session-tab .v-btn__content {
+  font-size: 16px;
+}
+.session-tab .v-btn--disabled.v-btn--variant-flat .v-btn__overlay {
+  opacity: 0;
+}
+
+.session-tab .v-btn__prepend {
+  font-size: 20px;
+  margin-inline-end: 6px;
+}
+</style>