From eeb0113dc5430af8b0edb8d9de34fb3138a4fb5c Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 30 Jan 2024 11:38:33 +0530
Subject: [PATCH] feat: Inbox item header component (#8810)

---
 .../inbox/components/InboxItemHeader.vue      | 53 ++++++++++++++
 .../inbox/components/PaginationButton.vue     | 73 +++++++++++++++++++
 2 files changed, 126 insertions(+)
 create mode 100644 app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue

diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
new file mode 100644
index 000000000..7fe60702e
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
@@ -0,0 +1,53 @@
+<script setup>
+import PaginationButton from './PaginationButton.vue';
+
+const props = defineProps({
+  totalLength: {
+    type: Number,
+    default: 0,
+  },
+  currentIndex: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const onSnooze = () => {
+  // TODO: Implement snooze
+};
+
+const onDelete = () => {
+  // TODO: Implement delete
+};
+</script>
+
+<template>
+  <div
+    class="flex gap-2 py-2 pl-4 pr-2 justify-between items-center w-full border-b border-slate-200 dark:border-slate-500"
+  >
+    <pagination-button
+      :total-length="props.totalLength"
+      :current-index="props.currentIndex"
+    />
+    <div class="flex items-center gap-2">
+      <woot-button
+        variant="hollow"
+        size="small"
+        color-scheme="secondary"
+        icon="snooze"
+        @click="onSnooze"
+      >
+        Snooze
+      </woot-button>
+      <woot-button
+        icon="delete"
+        size="small"
+        color-scheme="secondary"
+        variant="hollow"
+        @click="onDelete"
+      >
+        Delete notification
+      </woot-button>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue
new file mode 100644
index 000000000..d347ca3fa
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue
@@ -0,0 +1,73 @@
+<script setup>
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+  totalLength: {
+    type: Number,
+    default: 0,
+  },
+  currentIndex: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const totalItems = ref(props.totalLength);
+const currentPage = ref(Math.floor(props.currentIndex / totalItems.value) + 1);
+
+const isUpDisabled = computed(() => currentPage.value === 1);
+
+const isDownDisabled = computed(
+  () => currentPage.value === totalItems.value || totalItems.value <= 1
+);
+
+const handleUpClick = () => {
+  if (currentPage.value > 1) {
+    currentPage.value -= 1;
+    // need to update it based on usage
+  }
+};
+const handleDownClick = () => {
+  if (currentPage.value < totalItems.value) {
+    currentPage.value += 1;
+    // need to update it based on usage
+  }
+};
+</script>
+
+<template>
+  <div class="flex gap-2 items-center">
+    <div class="flex gap-1 items-center">
+      <woot-button
+        size="tiny"
+        variant="hollow"
+        color-scheme="secondary"
+        icon="chevron-up"
+        :disabled="isUpDisabled"
+        @click="handleUpClick"
+      />
+      <woot-button
+        size="tiny"
+        variant="hollow"
+        color-scheme="secondary"
+        icon="chevron-down"
+        :disabled="isDownDisabled"
+        @click="handleDownClick"
+      />
+    </div>
+    <div class="flex items-center gap-1 whitespace-nowrap">
+      <span class="text-sm font-medium text-gray-600">
+        {{ totalItems <= 1 ? '1' : currentPage }}
+      </span>
+      <span
+        v-if="totalItems > 1"
+        class="text-sm text-slate-400 relative -top-px"
+      >
+        /
+      </span>
+      <span v-if="totalItems > 1" class="text-sm text-slate-400">
+        {{ totalItems }}
+      </span>
+    </div>
+  </div>
+</template>