Merge branch 'add_status' into 'master'

add status dropdown and due tab

See merge request mohit.panjvani/crater-web!1312

resources/scripts/components/base/BaseFilterWrapper.vue

@@ -27,10 +27,11 @@
       </label>
 
       <div
-        class="
+        class="flex flex-col space-y-3"
-          flex flex-col
+        :class="
-          space-y-3
+          rowOnXl
-          lg:flex-row lg:space-x-4 lg:space-y-0 lg:items-center
+            ? 'xl:flex-row xl:space-x-4 xl:space-y-0 xl:items-center'
+            : 'lg:flex-row lg:space-x-4 lg:space-y-0 lg:items-center'
         "
       >
         <slot />
@@ -45,6 +46,10 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  rowOnXl: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 defineEmits(['clear'])

resources/scripts/views/invoices/Index.vue

@@ -38,7 +38,11 @@
       </template>
     </BasePageHeader>
 
-    <BaseFilterWrapper v-show="showFilters" @clear="clearFilter">
+    <BaseFilterWrapper
+      v-show="showFilters"
+      :row-on-xl="true"
+      @clear="clearFilter"
+    >
       <BaseInputGroup :label="$tc('customers.customer', 1)">
         <BaseCustomerSelectInput
           v-model="filters.customer_id"
@@ -48,6 +52,18 @@
         />
       </BaseInputGroup>
 
+      <BaseInputGroup :label="$t('invoices.status')">
+        <BaseMultiselect
+          v-model="filters.status"
+          :groups="true"
+          :options="status"
+          searchable
+          :placeholder="$t('general.select_a_status')"
+          @update:modelValue="setActiveTab"
+          @remove="clearStatusSearch()"
+        />
+      </BaseInputGroup>
+
       <BaseInputGroup :label="$t('general.from')">
         <BaseDatePicker
           v-model="filters.from_date"
@@ -116,6 +132,7 @@
         <!-- Tabs -->
         <BaseTabGroup class="-mb-5" @change="setStatusFilter">
           <BaseTab :title="$t('general.draft')" filter="DRAFT" />
+          <BaseTab :title="$t('general.due')" filter="DUE" />
           <BaseTab :title="$t('general.sent')" filter="SENT" />
           <BaseTab :title="$t('general.all')" filter="" />
         </BaseTabGroup>
@@ -265,12 +282,15 @@ const table = ref(null)
 const showFilters = ref(false)
 
 const status = ref([
-  'DRAFT',
+  {
-  'SENT',
+    label: 'Status',
-  'VIEWED',
+    options: ['DRAFT', 'DUE', 'SENT', 'VIEWED', 'OVERDUE', 'COMPLETED'],
-  'EXPIRED',
+  },
-  'ACCEPTED',
+  {
-  'REJECTED',
+    label: 'Paid Status',
+    options: ['UNPAID', 'PAID', 'PARTIALLY_PAID'],
+  },
+  ,
 ])
 const isRequestOngoing = ref(true)
 const activeTab = ref('general.draft')
@@ -357,6 +377,11 @@ function hasAtleastOneAbility() {
   ])
 }
 
+async function clearStatusSearch(removedOption, id) {
+  filters.status = ''
+  refreshTable()
+}
+
 function refreshTable() {
   table.value && table.value.refresh()
 }
@@ -404,6 +429,11 @@ function setStatusFilter(val) {
     case t('general.sent'):
       filters.status = 'SENT'
       break
+
+    case t('general.due'):
+      filters.status = 'DUE'
+      break
+
     default:
       filters.status = ''
       break
@@ -472,6 +502,35 @@ function setActiveTab(val) {
     case 'SENT':
       activeTab.value = t('general.sent')
       break
+
+    case 'DUE':
+      activeTab.value = t('general.due')
+      break
+
+    case 'COMPLETED':
+      activeTab.value = t('invoices.completed')
+      break
+
+    case 'PAID':
+      activeTab.value = t('invoices.paid')
+      break
+
+    case 'UNPAID':
+      activeTab.value = t('invoices.unpaid')
+      break
+
+    case 'PARTIALLY_PAID':
+      activeTab.value = t('invoices.partially_paid')
+      break
+
+    case 'VIEWED':
+      activeTab.value = t('invoices.viewed')
+      break
+
+    case 'OVERDUE':
+      activeTab.value = t('invoices.overdue')
+      break
+
     default:
       activeTab.value = t('general.all')
       break