add archiving for clients, fixes ST-279

resources/js/Pages/Clients.vue

@@ -1,27 +1,62 @@
 <script setup lang="ts">
 import MainContainer from '@/packages/ui/src/MainContainer.vue';
 import AppLayout from '@/Layouts/AppLayout.vue';
-import { PlusIcon } from '@heroicons/vue/16/solid';
+import { FolderIcon, PlusIcon } from '@heroicons/vue/16/solid';
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import { UserCircleIcon } from '@heroicons/vue/20/solid';
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useClientsStore } from '@/utils/useClients';
 import ClientTable from '@/Components/Common/Client/ClientTable.vue';
 import ClientCreateModal from '@/Components/Common/Client/ClientCreateModal.vue';
 import PageTitle from '@/Components/Common/PageTitle.vue';
 import { canCreateClients } from '@/utils/permissions';
+import TabBarItem from '@/Components/Common/TabBar/TabBarItem.vue';
+import TabBar from '@/Components/Common/TabBar/TabBar.vue';
+import { storeToRefs } from 'pinia';
 
 onMounted(() => {
     useClientsStore().fetchClients();
 });
 
+const activeTab = ref<'active' | 'archived'>('active');
+
+function isActiveTab(tab: string) {
+    return activeTab.value === tab;
+}
+
 const createClient = ref(false);
+
+const { clients } = storeToRefs(useClientsStore());
+
+const shownClients = computed(() => {
+    return clients.value.filter((client) => {
+        if (activeTab.value === 'active') {
+            return !client.is_archived;
+        }
+        return client.is_archived;
+    });
+});
 </script>
 
 <template>
     <AppLayout title="Clients" data-testid="clients_view">
         <MainContainer
             class="py-5 border-b border-default-background-separator flex justify-between items-center">
+            <div class="flex items-center space-x-3 sm:space-x-6">
+                <PageTitle :icon="FolderIcon" title="Projects"></PageTitle>
+                <TabBar>
+                    <TabBarItem
+                        :active="isActiveTab('active')"
+                        @click="activeTab = 'active'"
+                        >Active</TabBarItem
+                    >
+                    <TabBarItem
+                        :active="isActiveTab('archived')"
+                        @click="activeTab = 'archived'">
+                        Archived
+                    </TabBarItem>
+                </TabBar>
+            </div>
             <div class="flex items-center space-x-6">
                 <PageTitle :icon="UserCircleIcon" title="Clients"> </PageTitle>
             </div>
@@ -33,6 +68,6 @@ const createClient = ref(false);
             >
             <ClientCreateModal v-model:show="createClient"></ClientCreateModal>
         </MainContainer>
-        <ClientTable></ClientTable>
+        <ClientTable :clients="shownClients"></ClientTable>
     </AppLayout>
 </template>