From 48ca360c3c30d6fd09d7aaf2f04ec8b04ba5df8e Mon Sep 17 00:00:00 2001
From: srijitcoder <srijitsm123@gmail.com>
Date: Thu, 24 Oct 2024 01:26:04 +0530
Subject: [PATCH] feat: Added session tab, action buttons, clubbed similar code
 from session list and file list

---
 src/App.vue                                   |   9 ++
 src/components/global/ListPlaceholder.vue     |  59 ++++++++++
 src/components/session/Delete.vue             |  66 +++++++++++
 src/components/session/index.js               |   1 +
 .../sessions-view/check-status-method.js      |   2 +-
 src/views/SessionView.vue                     | 104 +++++++++++++-----
 src/views/SessionsView.vue                    |  84 ++------------
 7 files changed, 221 insertions(+), 104 deletions(-)
 create mode 100644 src/components/global/ListPlaceholder.vue
 create mode 100644 src/components/session/Delete.vue
 create mode 100644 src/components/session/index.js

diff --git a/src/App.vue b/src/App.vue
index 76b1e55..904cf17 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/global/ListPlaceholder.vue b/src/components/global/ListPlaceholder.vue
new file mode 100644
index 0000000..3b45cfb
--- /dev/null
+++ b/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>
diff --git a/src/components/session/Delete.vue b/src/components/session/Delete.vue
new file mode 100644
index 0000000..0853943
--- /dev/null
+++ b/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>
diff --git a/src/components/session/index.js b/src/components/session/index.js
new file mode 100644
index 0000000..525e541
--- /dev/null
+++ b/src/components/session/index.js
@@ -0,0 +1 @@
+export { default as DeleteSession } from "./Delete.vue";
diff --git a/src/methods/sessions-view/check-status-method.js b/src/methods/sessions-view/check-status-method.js
index c1a59aa..538be8f 100644
--- a/src/methods/sessions-view/check-status-method.js
+++ b/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,
diff --git a/src/views/SessionView.vue b/src/views/SessionView.vue
index fcd603a..9df7bb3 100644
--- a/src/views/SessionView.vue
+++ b/src/views/SessionView.vue
@@ -13,6 +13,8 @@ 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();
@@ -20,11 +22,12 @@ 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>
diff --git a/src/views/SessionsView.vue b/src/views/SessionsView.vue
index d0aa4e0..08bdd6d 100644
--- a/src/views/SessionsView.vue
+++ b/src/views/SessionsView.vue
@@ -14,6 +14,8 @@ import {
 import { useRoute, useRouter } from "vue-router";
 import Tooltip from "@/components/global/Tooltip.vue";
 import { useLoader } from "@/helpers/index.js";
+import { DeleteSession } from "@/components/session";
+import ListPlaceholder from "@/components/global/ListPlaceholder.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -23,10 +25,11 @@ const totalPage = ref(0);
 const page = ref(route.query.page ? parseInt(route.query.page, 10) : 1);
 const deleteSession = ref(false);
 const reviewSession = ref(false);
-const snackbar = ref(false);
 const createNewSession = ref(false);
 const newSessionName = ref("");
 const loader = ref({});
+
+const snackbar = inject("set-snackbar");
 const navButtonConfig = inject("set-nav-button-config");
 const navPaginationItems = inject("set-nav-pagination-items");
 
@@ -90,16 +93,6 @@ const onPageChange = async (newPage) => {
   await updateSessionsList(true);
 };
 
-const deleteSessionHandle = async () => {
-  if (deleteSession.value) {
-    loader.value = useLoader().show();
-    snackbar.value = await deleteBySessionNumber(deleteSession.value.number);
-    deleteSession.value = false;
-    loader.value.hide();
-    await updateSessionsList();
-  }
-};
-
 const reviewSessionHandle = async () => {
   if (reviewSession.value) {
     loader.value = useLoader().show();
@@ -199,16 +192,11 @@ const reviewSessionHandle = async () => {
             variant="text"
           ></v-btn>
         </Tooltip>
-        <Tooltip text="Delete Session">
-          <v-btn
-            color="blue-grey-darken-4"
-            icon="mdi-delete-outline"
-            size="large"
-            variant="text"
-            :disabled="session.state === 'closed'"
-            @click="deleteSession = session"
-          ></v-btn>
-        </Tooltip>
+        <DeleteSession
+          :session="session"
+          :snackbar="snackbar"
+          :callBack="updateSessionsList"
+        />
         <Tooltip text="Checkout Preview">
           <v-btn
             color="blue-grey-darken-4"
@@ -231,34 +219,8 @@ const reviewSessionHandle = async () => {
     </v-list-item>
 
     <!-- Placeholder for session's list -->
-    <v-list-item
-      v-else-if="sessions === null"
-      v-for="n in 10"
-      :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 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 4"
-          :key="a"
-          width="24"
-          type="heading"
-          class="mx-3"
-        ></v-skeleton-loader>
-      </template>
-    </v-list-item>
+    <ListPlaceholder v-else-if="sessions === null" />
+
     <v-empty-state
       v-else
       headline="Whoops, No sessions found."
@@ -291,22 +253,6 @@ const reviewSessionHandle = async () => {
     ></v-pagination>
   </div>
 
-  <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>
-
   <v-dialog v-model="reviewSession" width="auto">
     <v-card
       max-width="400"
@@ -326,14 +272,6 @@ const reviewSessionHandle = async () => {
       </template>
     </v-card>
   </v-dialog>
-
-  <v-snackbar
-    v-model="snackbar"
-    timeout="3000"
-    :color="snackbar.status"
-    :text="snackbar.text"
-  >
-  </v-snackbar>
 </template>
 
 <style>