Merge branch 'master' into master

app/Http/Controllers/V1/Admin/Invoice/InvoicesController.php

@@ -21,12 +21,11 @@ class InvoicesController extends Controller
     {
         $this->authorize('viewAny', Invoice::class);
 
-        $limit = $request->has('limit') ? $request->limit : 10;
+        $limit = $request->input('limit', 10);
 
         $invoices = Invoice::whereCompany()
-            ->join('customers', 'customers.id', '=', 'invoices.customer_id')
             ->applyFilters($request->all())
-            ->select('invoices.*', 'customers.name')
+            ->with('customer')
             ->latest()
             ->paginateData($limit);
 

app/Http/Requests/CustomerRequest.php

@@ -49,8 +49,10 @@ class CustomerRequest extends FormRequest
             'prefix' => [
                 'nullable',
             ],
+            'tax_id' => [
+                'nullable',
+            ],
             'enable_portal' => [
-
                 'boolean',
             ],
             'currency_id' => [
@@ -133,6 +135,7 @@ class CustomerRequest extends FormRequest
                 'password',
                 'phone',
                 'prefix',
+                'tax_id',
                 'company_name',
                 'contact_name',
                 'website',

app/Http/Resources/Customer/CustomerResource.php

@@ -30,6 +30,7 @@ class CustomerResource extends JsonResource
             'formatted_created_at' => $this->formattedCreatedAt,
             'avatar' => $this->avatar,
             'prefix' => $this->prefix,
+            'tax_id' => $this->tax_id,
             'billing' => $this->when($this->billingAddress()->exists(), function () {
                 return new AddressResource($this->billingAddress);
             }),

app/Http/Resources/CustomerResource.php

@@ -35,6 +35,7 @@ class CustomerResource extends JsonResource
             'due_amount' => $this->due_amount,
             'base_due_amount' => $this->base_due_amount,
             'prefix' => $this->prefix,
+            'tax_id' => $this->tax_id,
             'billing' => $this->when($this->billingAddress()->exists(), function () {
                 return new AddressResource($this->billingAddress);
             }),

app/Models/Invoice.php

@@ -248,53 +248,34 @@ class Invoice extends Model implements HasMedia
 
     public function scopeApplyFilters($query, array $filters)
     {
-        $filters = collect($filters);
+        $filters = collect($filters)->filter()->all();
 
-        if ($filters->get('search')) {
-            $query->whereSearch($filters->get('search'));
-        }
-
-        if ($filters->get('status')) {
-            if (
-                $filters->get('status') == self::STATUS_UNPAID ||
-                $filters->get('status') == self::STATUS_PARTIALLY_PAID ||
-                $filters->get('status') == self::STATUS_PAID
-            ) {
-                $query->wherePaidStatus($filters->get('status'));
-            } elseif ($filters->get('status') == 'DUE') {
-                $query->whereDueStatus($filters->get('status'));
-            } else {
-                $query->whereStatus($filters->get('status'));
-            }
-        }
-
-        if ($filters->get('paid_status')) {
-            $query->wherePaidStatus($filters->get('status'));
-        }
-
-        if ($filters->get('invoice_id')) {
-            $query->whereInvoice($filters->get('invoice_id'));
-        }
-
-        if ($filters->get('invoice_number')) {
-            $query->whereInvoiceNumber($filters->get('invoice_number'));
-        }
-
-        if ($filters->get('from_date') && $filters->get('to_date')) {
-            $start = Carbon::createFromFormat('Y-m-d', $filters->get('from_date'));
-            $end = Carbon::createFromFormat('Y-m-d', $filters->get('to_date'));
+        return $query->when($filters['search'] ?? null, function ($query, $search) {
+            $query->whereSearch($search);
+        })->when($filters['status'] ?? null, function ($query, $status) {
+            match ($status) {
+                self::STATUS_UNPAID, self::STATUS_PARTIALLY_PAID, self::STATUS_PAID => $query->wherePaidStatus($status),
+                'DUE' => $query->whereDueStatus($status),
+                default => $query->whereStatus($status),
+            };
+        })->when($filters['paid_status'] ?? null, function ($query, $paidStatus) {
+            $query->wherePaidStatus($paidStatus);
+        })->when($filters['invoice_id'] ?? null, function ($query, $invoiceId) {
+            $query->whereInvoice($invoiceId);
+        })->when($filters['invoice_number'] ?? null, function ($query, $invoiceNumber) {
+            $query->whereInvoiceNumber($invoiceNumber);
+        })->when(($filters['from_date'] ?? null) && ($filters['to_date'] ?? null), function ($query) use ($filters) {
+            $start = Carbon::parse($filters['from_date']);
+            $end = Carbon::parse($filters['to_date']);
             $query->invoicesBetween($start, $end);
-        }
-
-        if ($filters->get('customer_id')) {
-            $query->whereCustomer($filters->get('customer_id'));
-        }
-
-        if ($filters->get('orderByField') || $filters->get('orderBy')) {
-            $field = $filters->get('orderByField') ? $filters->get('orderByField') : 'sequence_number';
-            $orderBy = $filters->get('orderBy') ? $filters->get('orderBy') : 'desc';
-            $query->whereOrder($field, $orderBy);
-        }
+        })->when($filters['customer_id'] ?? null, function ($query, $customerId) {
+            $query->where('customer_id', $customerId);
+        })->when($filters['orderByField'] ?? null, function ($query, $orderByField) use ($filters) {
+            $orderBy = $filters['orderBy'] ?? 'desc';
+            $query->orderBy($orderByField, $orderBy);
+        }, function ($query) {
+            $query->orderBy('sequence_number', 'desc');
+        });
     }
 
     public function scopeWhereInvoice($query, $invoice_id)

app/Traits/GeneratesPdfTrait.php

@@ -145,6 +145,7 @@ trait GeneratesPdfTrait
             '{CONTACT_EMAIL}' => $customer->email,
             '{CONTACT_PHONE}' => $customer->phone,
             '{CONTACT_WEBSITE}' => $customer->website,
+            '{CONTACT_TAX_ID}' => __('pdf_tax_id').': '.$customer->tax_id,
         ];
 
         $customFields = $this->fields;

database/migrations/2024_10_04_093723_add_tax_id_field_to_customers_table.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('customers', function (Blueprint $table) {
+            $table->string('tax_id')->nullable()->after('github_id');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('customers', function (Blueprint $table) {
+            $table->dropColumn('tax_id');
+        });
+    }
+};

lang/en.json

@@ -172,6 +172,7 @@
   "customers": {
     "title": "Customers",
     "prefix": "Prefix",
+    "tax_id": "Tax ID",
     "add_customer": "Add Customer",
     "contacts_list": "Customer List",
     "name": "Name",

package.json

@@ -2,7 +2,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite --host",
+    "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
     "test": "eslint ./resources/scripts --ext .js,.vue"
@@ -30,11 +30,12 @@
     "@heroicons/vue": "^1.0.6",
     "@popperjs/core": "^2.11.8",
     "@stripe/stripe-js": "^2.4.0",
-    "@tiptap/core": "^2.1.16",
-    "@tiptap/extension-text-align": "^2.1.16",
-    "@tiptap/pm": "^2.0.0",
-    "@tiptap/starter-kit": "^2.1.16",
-    "@tiptap/vue-3": "^2.1.16",
+    "@tiptap/core": "^2.8.0",
+    "@tiptap/extension-link": "^2.8.0",
+    "@tiptap/extension-text-align": "^2.8.0",
+    "@tiptap/pm": "^2.8.0",
+    "@tiptap/starter-kit": "^2.8.0",
+    "@tiptap/vue-3": "^2.8.0",
     "@types/node": "^20.11.9",
     "@vuelidate/components": "^1.2.6",
     "@vuelidate/core": "^2.0.3",

resources/scripts/admin/components/modal-components/CustomerModal.vue

@@ -116,6 +116,15 @@
                   />
                 </BaseInputGroup>
               </BaseInputGrid>
+
+              <BaseInputGroup :label="$t('customers.tax_id')">
+                <BaseInput
+                  v-model="customerStore.currentCustomer.tax_id"
+                  type="text"
+                  class="mt-1 md:mt-0"
+                />
+              </BaseInputGroup>
+
             </BaseInputGrid>
           </BaseTab>
 

resources/scripts/admin/views/customers/Create.vue

@@ -157,6 +157,24 @@
                 @input="v$.currentCustomer.prefix.$touch()"
               />
             </BaseInputGroup>
+
+            <BaseInputGroup
+              :label="$t('customers.tax_id')"
+              :error="
+                v$.currentCustomer.tax_id.$error &&
+                v$.currentCustomer.tax_id.$errors[0].$message
+              "
+              :content-loading="isFetchingInitialData"
+            >
+              <BaseInput
+                v-model="customerStore.currentCustomer.tax_id"
+                :content-loading="isFetchingInitialData"
+                type="text"
+                name="tax_id"
+                :invalid="v$.currentCustomer.tax_id.$error"
+                @input="v$.currentCustomer.tax_id.$touch()"
+              />
+            </BaseInputGroup>
           </BaseInputGrid>
         </div>
 
@@ -645,6 +663,9 @@ const rules = computed(() => {
           minLength(3)
         ),
       },
+      tax_id: {
+        required: helpers.withMessage(t('validation.required'), required),
+      },
       currency_id: {
         required: helpers.withMessage(t('validation.required'), required),
       },

resources/scripts/admin/views/estimates/Index.vue

@@ -174,6 +174,7 @@
         :data="fetchData"
         :columns="estimateColumns"
         :placeholder-count="estimateStore.totalEstimateCount >= 20 ? 10 : 5"
+        :key="tableKey"
         class="mt-10"
       >
         <template #header>
@@ -256,6 +257,7 @@ const dialogStore = useDialogStore()
 const userStore = useUserStore()
 
 const tableComponent = ref(null)
+const tableKey = ref(0)
 const { t } = useI18n()
 const showFilters = ref(false)
 const status = ref([
@@ -408,6 +410,8 @@ function setFilters() {
     state.selectAllField = false
   })
 
+  tableKey.value += 1
+
   refreshTable()
 }
 

resources/scripts/admin/views/invoices/Index.vue

@@ -172,6 +172,7 @@
         :data="fetchData"
         :columns="invoiceColumns"
         :placeholder-count="invoiceStore.invoiceTotalCount >= 20 ? 10 : 5"
+        :key="tableKey"
         class="mt-10"
       >
         <!-- Select All Checkbox -->
@@ -288,6 +289,7 @@ const { t } = useI18n()
 // Local State
 const utils = inject('$utils')
 const table = ref(null)
+const tableKey = ref(0)
 const showFilters = ref(false)
 
 const status = ref([
@@ -416,9 +418,12 @@ async function fetchData({ page, filter, sort }) {
     page,
   }
 
+  console.log(data)
+
   isRequestOngoing.value = true
 
   let response = await invoiceStore.fetchInvoices(data)
+  console.log('API response:', response.data.data)
 
   isRequestOngoing.value = false
 
@@ -464,6 +469,8 @@ function setFilters() {
     state.selectAllField = false
   })
 
+  tableKey.value += 1
+
   refreshTable()
 }
 

resources/scripts/components/base/BaseCustomInput.vue

@@ -180,6 +180,7 @@ async function getFields() {
           { label: 'Email', value: 'CONTACT_EMAIL' },
           { label: 'Phone', value: 'CONTACT_PHONE' },
           { label: 'Website', value: 'CONTACT_WEBSITE' },
+          { label: 'Tax ID', value: 'CONTACT_TAX_ID' },
           ...customerFields.value.map((i) => ({
             label: i.label,
             value: i.slug,

resources/scripts/components/base/base-editor/BaseEditor.vue

@@ -8,598 +8,73 @@
   </BaseContentPlaceholders>
   <div
     v-else
-    class="
-      box-border
-      w-full
-      text-sm
-      leading-8
-      text-left
-      bg-white
-      border border-gray-200
-      rounded-md
-      min-h-[200px]
-      overflow-hidden
-    "
+    class="box-border w-full text-sm leading-8 text-left bg-white border border-gray-200 rounded-md min-h-[200px] overflow-hidden"
   >
     <div v-if="editor" class="editor-content">
       <div class="flex justify-end p-2 border-b border-gray-200 md:hidden">
         <BaseDropdown width-class="w-48">
           <template #activator>
             <div
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                ml-2
-                text-sm text-black
-                bg-white
-                rounded-sm
-                md:h-9 md:w-9
-              "
+              class="flex items-center justify-center w-6 h-6 ml-2 text-sm text-black bg-white rounded-sm md:h-9 md:w-9"
             >
               <dots-vertical-icon class="w-6 h-6 text-gray-600" />
             </div>
           </template>
           <div class="flex flex-wrap space-x-1">
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-              "
-              :class="{ 'bg-gray-200': editor.isActive('bold') }"
-              @click="editor.chain().focus().toggleBold().run()"
+            <button
+              v-for="button in editorButtons"
+              type="button"
+              :key="button.name"
+              class="p-1 rounded hover:bg-gray-100"
+              @click="button.action"
             >
-              <bold-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-              "
-              :class="{ 'bg-gray-200': editor.isActive('italic') }"
-              @click="editor.chain().focus().toggleItalic().run()"
-            >
-              <italic-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-              "
-              :class="{ 'bg-gray-200': editor.isActive('strike') }"
-              @click="editor.chain().focus().toggleStrike().run()"
-            >
-              <strikethrough-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-              "
-              :class="{ 'bg-gray-200': editor.isActive('code') }"
-              @click="editor.chain().focus().toggleCode().run()"
-            >
-              <coding-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-              "
-              :class="{ 'bg-gray-200': editor.isActive('paragraph') }"
-              @click="editor.chain().focus().setParagraph().run()"
-            >
-              <paragraph-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-              "
-              :class="{
-                'bg-gray-200': editor.isActive('heading', { level: 1 }),
-              }"
-              @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
-            >
-              H1
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-              "
-              :class="{
-                'bg-gray-200': editor.isActive('heading', { level: 2 }),
-              }"
-              @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
-            >
-              H2
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-              "
-              :class="{
-                'bg-gray-200': editor.isActive('heading', { level: 3 }),
-              }"
-              @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
-            >
-              H3
-            </span>
-
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-              "
-              :class="{ 'bg-gray-200': editor.isActive('bulletList') }"
-              @click="editor.chain().focus().toggleBulletList().run()"
-            >
-              <list-ul-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-              "
-              :class="{ 'bg-gray-200': editor.isActive('orderedList') }"
-              @click="editor.chain().focus().toggleOrderedList().run()"
-            >
-              <list-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-              "
-              :class="{ 'bg-gray-200': editor.isActive('blockquote') }"
-              @click="editor.chain().focus().toggleBlockquote().run()"
-            >
-              <quote-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-              "
-              :class="{ 'bg-gray-200': editor.isActive('codeBlock') }"
-              @click="editor.chain().focus().toggleCodeBlock().run()"
-            >
-              <code-block-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-              "
-              :class="{ 'bg-gray-200': editor.isActive('undo') }"
-              @click="editor.chain().focus().undo().run()"
-            >
-              <undo-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-              "
-              :class="{ 'bg-gray-200': editor.isActive('redo') }"
-              @click="editor.chain().focus().redo().run()"
-            >
-              <redo-icon class="h-3 cursor-pointer fill-current" />
-            </span>
+              <component
+                :is="button.icon"
+                v-if="button.icon"
+                class="w-4 h-4 text-gray-700 fill-gray-700"
+              />
+              <span v-else-if="button.text" class="px-1 text-sm font-medium text-gray-600">
+                {{ button.text }}
+              </span>
+            </button>
           </div>
         </BaseDropdown>
       </div>
       <div class="hidden p-2 border-b border-gray-200 md:flex">
         <div class="flex flex-wrap space-x-1">
-          <span
-            class="
-              flex
-              items-center
-              justify-center
-              w-6
-              h-6
-              rounded-sm
-              cursor-pointer
-              hover:bg-gray-100
-            "
-            :class="{ 'bg-gray-200': editor.isActive('bold') }"
-            @click="editor.chain().focus().toggleBold().run()"
-          >
-            <bold-icon class="h-3 cursor-pointer fill-current" />
-          </span>
-          <span
-            class="
-              flex
-              items-center
-              justify-center
-              w-6
-              h-6
-              rounded-sm
-              cursor-pointer
-              hover:bg-gray-100
-            "
-            :class="{ 'bg-gray-200': editor.isActive('italic') }"
-            @click="editor.chain().focus().toggleItalic().run()"
-          >
-            <italic-icon class="h-3 cursor-pointer fill-current" />
-          </span>
-          <span
-            class="
-              flex
-              items-center
-              justify-center
-              w-6
-              h-6
-              rounded-sm
-              cursor-pointer
-              hover:bg-gray-100
-            "
-            :class="{ 'bg-gray-200': editor.isActive('strike') }"
-            @click="editor.chain().focus().toggleStrike().run()"
-          >
-            <strikethrough-icon class="h-3 cursor-pointer fill-current" />
-          </span>
-          <span
-            class="
-              flex
-              items-center
-              justify-center
-              w-6
-              h-6
-              rounded-sm
-              cursor-pointer
-              hover:bg-gray-100
-            "
-            :class="{ 'bg-gray-200': editor.isActive('code') }"
-            @click="editor.chain().focus().toggleCode().run()"
-          >
-            <coding-icon class="h-3 cursor-pointer fill-current" />
-          </span>
-          <span
-            class="
-              flex
-              items-center
-              justify-center
-              w-6
-              h-6
-              rounded-sm
-              cursor-pointer
-              hover:bg-gray-100
-            "
-            :class="{ 'bg-gray-200': editor.isActive('paragraph') }"
-            @click="editor.chain().focus().setParagraph().run()"
-          >
-            <paragraph-icon class="h-3 cursor-pointer fill-current" />
-          </span>
-          <span
-            class="
-              flex
-              items-center
-              justify-center
-              w-6
-              h-6
-              rounded-sm
-              cursor-pointer
-              hover:bg-gray-100
-            "
-            :class="{ 'bg-gray-200': editor.isActive('heading', { level: 1 }) }"
-            @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
-          >
-            H1
-          </span>
-          <span
-            class="
-              flex
-              items-center
-              justify-center
-              w-6
-              h-6
-              rounded-sm
-              cursor-pointer
-              hover:bg-gray-100
-            "
-            :class="{ 'bg-gray-200': editor.isActive('heading', { level: 2 }) }"
-            @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
-          >
-            H2
-          </span>
-          <span
-            class="
-              flex
-              items-center
-              justify-center
-              w-6
-              h-6
-              rounded-sm
-              cursor-pointer
-              hover:bg-gray-100
-            "
-            :class="{ 'bg-gray-200': editor.isActive('heading', { level: 3 }) }"
-            @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
-          >
-            H3
-          </span>
-
-          <span
-            class="
-              flex
-              items-center
-              justify-center
-              w-6
-              h-6
-              rounded-sm
-              cursor-pointer
-              hover:bg-gray-100
-            "
-            :class="{ 'bg-gray-200': editor.isActive('bulletList') }"
-            @click="editor.chain().focus().toggleBulletList().run()"
-          >
-            <list-ul-icon class="h-3 cursor-pointer fill-current" />
-          </span>
-          <span
-            class="
-              flex
-              items-center
-              justify-center
-              w-6
-              h-6
-              rounded-sm
-              cursor-pointer
-              hover:bg-gray-100
-            "
-            :class="{ 'bg-gray-200': editor.isActive('orderedList') }"
-            @click="editor.chain().focus().toggleOrderedList().run()"
-          >
-            <list-icon class="h-3 cursor-pointer fill-current" />
-          </span>
-          <span
-            class="
-              flex
-              items-center
-              justify-center
-              w-6
-              h-6
-              rounded-sm
-              cursor-pointer
-              hover:bg-gray-100
-            "
-            :class="{ 'bg-gray-200': editor.isActive('blockquote') }"
-            @click="editor.chain().focus().toggleBlockquote().run()"
-          >
-            <quote-icon class="h-3 cursor-pointer fill-current" />
-          </span>
-          <span
-            class="
-              flex
-              items-center
-              justify-center
-              w-6
-              h-6
-              rounded-sm
-              cursor-pointer
-              hover:bg-gray-100
-            "
-            :class="{ 'bg-gray-200': editor.isActive('codeBlock') }"
-            @click="editor.chain().focus().toggleCodeBlock().run()"
-          >
-            <code-block-icon class="h-3 cursor-pointer fill-current" />
-          </span>
-          <span
-            class="
-              flex
-              items-center
-              justify-center
-              w-6
-              h-6
-              rounded-sm
-              cursor-pointer
-              hover:bg-gray-100
-            "
-            :class="{ 'bg-gray-200': editor.isActive('undo') }"
-            @click="editor.chain().focus().undo().run()"
-          >
-            <undo-icon class="h-3 cursor-pointer fill-current" />
-          </span>
-          <span
-            class="
-              flex
-              items-center
-              justify-center
-              w-6
-              h-6
-              rounded-sm
-              cursor-pointer
-              hover:bg-gray-100
-            "
-            :class="{ 'bg-gray-200': editor.isActive('redo') }"
-            @click="editor.chain().focus().redo().run()"
-          >
-            <redo-icon class="h-3 cursor-pointer fill-current" />
-          </span>
-          <span
-            class="
-              flex
-              items-center
-              justify-center
-              w-6
-              h-6
-              rounded-sm
-              cursor-pointer
-              hover:bg-gray-100
-            "
-            :class="{ 'bg-gray-200': editor.isActive({ textAlign: 'left' }) }"
-            @click="editor.chain().focus().setTextAlign('left').run()"
-          >
-            <menu-alt2-icon class="h-5 cursor-pointer fill-current" />
-          </span>
-          <span
-            class="
-              flex
-              items-center
-              justify-center
-              w-6
-              h-6
-              rounded-sm
-              cursor-pointer
-              hover:bg-gray-100
-            "
-            :class="{ 'bg-gray-200': editor.isActive({ textAlign: 'right' }) }"
-            @click="editor.chain().focus().setTextAlign('right').run()"
-          >
-            <menu-alt3-icon class="h-5 cursor-pointer fill-current" />
-          </span>
-          <span
-            class="
-              flex
-              items-center
-              justify-center
-              w-6
-              h-6
-              rounded-sm
-              cursor-pointer
-              hover:bg-gray-100
-            "
-            :class="{
-              'bg-gray-200': editor.isActive({ textAlign: 'justify' }),
-            }"
-            @click="editor.chain().focus().setTextAlign('justify').run()"
-          >
-            <menu-icon class="h-5 cursor-pointer fill-current" />
-          </span>
-          <span
-            class="
-              flex
-              items-center
-              justify-center
-              w-6
-              h-6
-              rounded-sm
-              cursor-pointer
-              hover:bg-gray-100
-            "
-            :class="{ 'bg-gray-200': editor.isActive({ textAlign: 'center' }) }"
-            @click="editor.chain().focus().setTextAlign('center').run()"
-          >
-            <menu-center-icon class="h-5 cursor-pointer fill-current" />
-          </span>
+          <button
+              v-for="button in editorButtons"
+              type="button"
+              :key="button.name"
+              class="p-1 rounded hover:bg-gray-100"
+              @click="button.action"
+            >
+              <component
+                :is="button.icon"
+                v-if="button.icon"
+                class="w-4 h-4 text-gray-700 fill-gray-700"
+              />
+              <span v-else-if="button.text" class="px-1 text-sm font-medium text-gray-600">
+                {{ button.text }}
+              </span>
+            </button>
         </div>
       </div>
       <editor-content
         :editor="editor"
-        class="
-          box-border
-          relative
-          w-full
-          text-sm
-          leading-8
-          text-left
-          editor__content
-        "
+        class="box-border relative w-full text-sm leading-8 text-left editor__content"
       />
     </div>
   </div>
 </template>
 
 <script>
-import { onUnmounted, watch } from 'vue'
+import { ref, onUnmounted, watch, markRaw } from 'vue'
 import { useEditor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
-import {
-  DotsVerticalIcon,
-  MenuAlt2Icon,
-  MenuAlt3Icon,
-  MenuIcon,
-} from '@heroicons/vue/outline'
 import TextAlign from '@tiptap/extension-text-align'
-
+import Link from '@tiptap/extension-link'
+import { DotsVerticalIcon } from '@heroicons/vue/outline'
 import {
   BoldIcon,
   CodingIcon,
@@ -614,26 +89,12 @@ import {
   CodeBlockIcon,
   MenuCenterIcon,
 } from './icons/index.js'
+import { MenuAlt2Icon, MenuAlt3Icon, MenuIcon, LinkIcon } from '@heroicons/vue/solid'
 
 export default {
   components: {
     EditorContent,
-    BoldIcon,
-    CodingIcon,
-    ItalicIcon,
-    ListIcon,
-    ListUlIcon,
-    ParagraphIcon,
-    QuoteIcon,
-    StrikethroughIcon,
-    UndoIcon,
-    RedoIcon,
-    CodeBlockIcon,
     DotsVerticalIcon,
-    MenuCenterIcon,
-    MenuAlt2Icon,
-    MenuAlt3Icon,
-    MenuIcon,
   },
 
   props: {
@@ -646,7 +107,9 @@ export default {
       default: false,
     },
   },
+
   emits: ['update:modelValue'],
+
   setup(props, { emit }) {
     const editor = useEditor({
       content: props.modelValue,
@@ -656,38 +119,62 @@ export default {
           types: ['heading', 'paragraph'],
           alignments: ['left', 'right', 'center', 'justify'],
         }),
+        Link.configure({
+          openOnClick: false,
+        }),
       ],
-
-      onUpdate: () => {
-        emit('update:modelValue', editor.value.getHTML())
+      onUpdate: ({ editor }) => {
+        emit('update:modelValue', editor.getHTML())
       },
     })
 
-    watch(
-      () => props.modelValue,
-      (value) => {
-        const isSame = editor.value.getHTML() === value
-
-        if (isSame) {
-          return
+    const editorButtons = ref([
+      { name: 'bold', icon: markRaw(BoldIcon), action: () => editor.value.chain().focus().toggleBold().run() },
+      { name: 'italic', icon: markRaw(ItalicIcon), action: () => editor.value.chain().focus().toggleItalic().run() },
+      { name: 'strike', icon: markRaw(StrikethroughIcon), action: () => editor.value.chain().focus().toggleStrike().run() },
+      { name: 'code', icon: markRaw(CodingIcon), action: () => editor.value.chain().focus().toggleCode().run() },
+      { name: 'paragraph', icon: markRaw(ParagraphIcon), action: () => editor.value.chain().focus().setParagraph().run() },
+      { name: 'h1', text: 'H1', action: () => editor.value.chain().focus().toggleHeading({ level: 1 }).run() },
+      { name: 'h2', text: 'H2', action: () => editor.value.chain().focus().toggleHeading({ level: 2 }).run() },
+      { name: 'h3', text: 'H3', action: () => editor.value.chain().focus().toggleHeading({ level: 3 }).run() },
+      { name: 'bulletList', icon: markRaw(ListUlIcon), action: () => editor.value.chain().focus().toggleBulletList().run() },
+      { name: 'orderedList', icon: markRaw(ListIcon), action: () => editor.value.chain().focus().toggleOrderedList().run() },
+      { name: 'blockquote', icon: markRaw(QuoteIcon), action: () => editor.value.chain().focus().toggleBlockquote().run() },
+      { name: 'codeBlock', icon: markRaw(CodeBlockIcon), action: () => editor.value.chain().focus().toggleCodeBlock().run() },
+      { name: 'undo', icon: markRaw(UndoIcon), action: () => editor.value.chain().focus().undo().run() },
+      { name: 'redo', icon: markRaw(RedoIcon), action: () => editor.value.chain().focus().redo().run() },
+      { name: 'alignLeft', icon: markRaw(MenuAlt2Icon), action: () => editor.value.chain().focus().setTextAlign('left').run() },
+      { name: 'alignRight', icon: markRaw(MenuAlt3Icon), action: () => editor.value.chain().focus().setTextAlign('right').run() },
+      { name: 'alignJustify', icon: markRaw(MenuIcon), action: () => editor.value.chain().focus().setTextAlign('justify').run() },
+      { name: 'alignCenter', icon: markRaw(MenuCenterIcon), action: () => editor.value.chain().focus().setTextAlign('center').run() },
+      { name: 'addLink', icon: markRaw(LinkIcon), action: () => {
+        const url = window.prompt('URL')
+        if (url) {
+          editor.value.chain().focus().setLink({ href: url }).run()
         }
+      }},
+    ])
 
-        editor.value.commands.setContent(props.modelValue, false)
+    watch(() => props.modelValue, (newValue) => {
+      if (editor.value && newValue !== editor.value.getHTML()) {
+        editor.value.commands.setContent(newValue, false)
       }
-    )
+    })
 
     onUnmounted(() => {
-      setTimeout(() => {
+      if (editor.value) {
         editor.value.destroy()
-      }, 500)
+      }
     })
 
     return {
       editor,
+      editorButtons,
     }
   },
 }
 </script>
+
 <style lang="scss">
 .ProseMirror {
   min-height: 200px;
@@ -747,6 +234,11 @@ export default {
       font-size: 0.8rem;
     }
   }
+
+  a {
+    color: rgb(var(--color-primary-500));
+    text-decoration: underline;
+  }
 }
 
 .ProseMirror:focus {

resources/scripts/components/base/base-table/BaseTable.vue

@@ -188,7 +188,7 @@ const props = defineProps({
   },
 })
 
-let rows = reactive([])
+const rows = ref([])
 let isLoading = ref(false)
 
 let tableColumns = reactive(props.columns.map((column) => new Column(column)))
@@ -339,14 +339,13 @@ function lodashGet(array, key) {
   return get(array, key)
 }
 
-if (usesLocalData.value) {
-  watch(
-    () => props.data,
-    () => {
-      mapDataToRows()
-    }
-  )
-}
+watch(
+  () => props.data,
+  () => {
+    mapDataToRows()
+  },
+  { deep: true }
+)
 
 onMounted(async () => {
   await mapDataToRows()

resources/scripts/main.js

@@ -14,11 +14,10 @@ import.meta.glob([
 
 window.pinia = pinia
 window.Vuelidate = Vuelidate
-
-import InvoiceShelf from './InvoiceShelf'
+import InvoiceShelf from './InvoiceShelf.js'
 
 window.Vue = Vue
 window.router = router
 window.VueRouter = VueRouter
 
-window.InvoiceShelf = new InvoiceShelf()
+window.InvoiceShelf = new InvoiceShelf()

vite.config.js

@@ -32,11 +32,8 @@ export default defineConfig({
                 },
             },
         }),
-        laravel({
-            input: [
-                'resources/scripts/main.js',
-            ],
-            refresh: true,
-        })
+        laravel([
+            'resources/scripts/main.js'
+        ])
     ]
 });