Merge branch 'fix-minor-issues' into 'master'

Fix minor issues

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

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

@@ -48,6 +48,24 @@
             />
           </BaseInputGroup>
 
+          <BaseInputGroup
+            :label="$tc('settings.company_info.company_slug')"
+            :help-text="$t('settings.company_info.company_slug_help_text')"
+            :error="
+              v$.newCompanyForm.slug.$error &&
+              v$.newCompanyForm.slug.$errors[0].$message
+            "
+            :content-loading="isFetchingInitialData"
+            required
+          >
+            <BaseInput
+              v-model="newCompanyForm.slug"
+              :invalid="v$.newCompanyForm.slug.$error"
+              :content-loading="isFetchingInitialData"
+              @input="v$.newCompanyForm.slug.$touch()"
+            />
+          </BaseInputGroup>
+
           <BaseInputGroup
             :content-loading="isFetchingInitialData"
             :label="$tc('settings.company_info.country')"
@@ -130,7 +148,7 @@
 
 <script setup>
 import { useModalStore } from '@/scripts/stores/modal'
-import { computed, onMounted, ref, reactive } from 'vue'
+import { computed, onMounted, ref, reactive, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { required, minLength, helpers } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
@@ -152,6 +170,7 @@ let companyLogoName = ref(null)
 
 const newCompanyForm = reactive({
   name: null,
+  slug: null,
   currency: '',
   address: {
     country_id: null,
@@ -162,6 +181,9 @@ const modalActive = computed(() => {
   return modalStore.active && modalStore.componentName === 'CompanyModal'
 })
 
+const slugValidator = (value) => {
+  return value == slugify(value)
+}
 const rules = {
   newCompanyForm: {
     name: {
@@ -171,6 +193,17 @@ const rules = {
         minLength(3)
       ),
     },
+    slug: {
+      required: helpers.withMessage(t('validation.required'), required),
+      minLength: helpers.withMessage(
+        t('validation.name_min_length', { count: 3 }),
+        minLength(3)
+      ),
+      slugValidator: helpers.withMessage(
+        t('validation.invalid_slug'),
+        slugValidator
+      ),
+    },
     address: {
       country_id: {
         required: helpers.withMessage(t('validation.required'), required),
@@ -243,6 +276,7 @@ async function submitCompanyData() {
 
 function resetNewCompanyForm() {
   newCompanyForm.name = ''
+  newCompanyForm.slug = ''
   newCompanyForm.currency = ''
   newCompanyForm.address.country_id = ''
 
@@ -257,4 +291,24 @@ function closeCompanyModal() {
     v$.value.$reset()
   }, 300)
 }
+
+// watcher for if change company name then auto fill company slug value
+watch(
+  () => newCompanyForm.name,
+  (currentValue) => {
+    newCompanyForm.slug = slugify(currentValue)
+  }
+)
+
+function slugify(string) {
+  return string
+    .toString()
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w\-]+/g, '')
+    .replace(/\-\-+/g, '-')
+    .replace(/^-+/, '')
+    .replace(/-+$/, '')
+}
 </script>

resources/scripts/admin/stores/company.js

@@ -184,6 +184,20 @@ export const useCompanyStore = (useWindow = false) => {
       setDefaultCurrency(data) {
         this.defaultCurrency = data.currency
       },
+
+      checkCompanyHasCurrencyTransactions() {
+        return new Promise((resolve, reject) => {
+          axios
+            .get(`/api/v1/company/has-transactions`)
+            .then((response) => {
+              resolve(response)
+            })
+            .catch((err) => {
+              handleError(err)
+              reject(err)
+            })
+        })
+      },
     },
   })()
 }

resources/scripts/admin/views/installation/Step7CompanyInfo.vue

@@ -34,6 +34,24 @@
           />
         </BaseInputGroup>
 
+        <BaseInputGroup
+          :label="$tc('wizard.company_slug')"
+          :help-text="$t('wizard.company_slug_help_text')"
+          :error="
+            v$.companyForm.slug.$error &&
+            v$.companyForm.slug.$errors[0].$message
+          "
+          required
+        >
+          <BaseInput
+            v-model="companyForm.slug"
+            :invalid="v$.companyForm.slug.$error"
+            type="text"
+            name="slug"
+            @input="v$.companyForm.slug.$touch()"
+          />
+        </BaseInputGroup>
+
         <BaseInputGroup
           :label="$t('wizard.country')"
           :error="
@@ -57,9 +75,7 @@
             track-by="name"
           />
         </BaseInputGroup>
-      </div>
 
-      <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 md:mb-6">
         <BaseInputGroup :label="$t('wizard.state')">
           <BaseInput
             v-model="companyForm.address.state"
@@ -144,9 +160,9 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, reactive } from 'vue'
+import { ref, computed, onMounted, reactive, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { required, maxLength, helpers } from '@vuelidate/validators'
+import { required, minLength, maxLength, helpers } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
@@ -162,6 +178,7 @@ let logoFileName = ref(null)
 
 const companyForm = reactive({
   name: null,
+  slug: null,
   address: {
     address_street_1: '',
     address_street_2: '',
@@ -188,10 +205,28 @@ onMounted(async () => {
   })?.id
 })
 
+const slugValidator = (value) => {
+  return value == slugify(value)
+}
 const rules = {
   companyForm: {
     name: {
       required: helpers.withMessage(t('validation.required'), required),
+      minLength: helpers.withMessage(
+        t('validation.name_min_length', { count: 3 }),
+        minLength(3)
+      ),
+    },
+    slug: {
+      required: helpers.withMessage(t('validation.required'), required),
+      minLength: helpers.withMessage(
+        t('validation.name_min_length', { count: 3 }),
+        minLength(3)
+      ),
+      slugValidator: helpers.withMessage(
+        t('validation.invalid_slug'),
+        slugValidator
+      ),
     },
     address: {
       country_id: {
@@ -249,4 +284,24 @@ async function next() {
     emit('next', 7)
   }
 }
+
+// watcher for if change company name then auto fill company slug value
+watch(
+  () => companyForm.name,
+  (currentValue) => {
+    companyForm.slug = slugify(currentValue)
+  }
+)
+
+function slugify(string) {
+  return string
+    .toString()
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w\-]+/g, '')
+    .replace(/\-\-+/g, '-')
+    .replace(/^-+/, '')
+    .replace(/-+$/, '')
+}
 </script>

resources/scripts/admin/views/settings/CompanyInfoSettings.vue

@@ -28,6 +28,19 @@
           />
         </BaseInputGroup>
 
+        <BaseInputGroup
+          :label="$tc('settings.company_info.company_slug')"
+          :help-text="$t('settings.company_info.company_slug_help_text')"
+          :error="v$.slug.$error && v$.slug.$errors[0].$message"
+          required
+        >
+          <BaseInput
+            v-model="companyForm.slug"
+            :invalid="v$.slug.$error"
+            @blur="v$.slug.$touch()"
+          />
+        </BaseInputGroup>
+
         <BaseInputGroup :label="$tc('settings.company_info.phone')">
           <BaseInput v-model="companyForm.address.phone" />
         </BaseInputGroup>
@@ -160,6 +173,7 @@ let isSaving = ref(false)
 
 const companyForm = reactive({
   name: null,
+  slug: null,
   logo: null,
   address: {
     address_street_1: '',
@@ -193,7 +207,14 @@ const rules = computed(() => {
     name: {
       required: helpers.withMessage(t('validation.required'), required),
       minLength: helpers.withMessage(
-        t('validation.name_min_length'),
+        t('validation.name_min_length', { count: 3 }),
+        minLength(3)
+      ),
+    },
+    slug: {
+      required: helpers.withMessage(t('validation.required'), required),
+      minLength: helpers.withMessage(
+        t('validation.name_min_length', { count: 3 }),
         minLength(3)
       ),
     },

resources/scripts/admin/views/settings/PreferencesSetting.vue

@@ -8,7 +8,11 @@
         <BaseInputGroup
           :content-loading="isFetchingInitialData"
           :label="$tc('settings.preferences.currency')"
-          :help-text="$t('settings.preferences.company_currency_unchangeable')"
+          :help-text="
+            isCurrencyDisabled
+              ? $t('settings.preferences.company_currency_unchangeable')
+              : ''
+          "
           :error="v$.currency.$error && v$.currency.$errors[0].$message"
           required
         >
@@ -21,7 +25,7 @@
             :searchable="true"
             track-by="name"
             :invalid="v$.currency.$error"
-            disabled
+            :disabled="isCurrencyDisabled"
             class="w-full"
           >
           </BaseMultiselect>
@@ -187,6 +191,7 @@ const { t, tm } = useI18n()
 let isSaving = ref(false)
 let isDataSaving = ref(false)
 let isFetchingInitialData = ref(false)
+let isCurrencyDisabled = ref(true)
 
 const settingsForm = reactive({ ...companyStore.selectedCompanySettings })
 
@@ -282,10 +287,14 @@ setInitialData()
 async function setInitialData() {
   isFetchingInitialData.value = true
   Promise.all([
+    companyStore.checkCompanyHasCurrencyTransactions(),
     globalStore.fetchCurrencies(),
     globalStore.fetchDateFormats(),
     globalStore.fetchTimeZones(),
   ]).then(([res1]) => {
+    if (res1.data?.has_transactions == false) {
+      isCurrencyDisabled.value = false
+    }
     isFetchingInitialData.value = false
   })
 }

resources/scripts/locales/en.json

@@ -863,6 +863,8 @@
     "company_info": {
       "company_info": "Company info",
       "company_name": "Company Name",
+      "company_slug": "Company Slug",
+      "company_slug_help_text": "A unique URL friendly name for your company (It will appear on Customer Portal URL)",
       "company_logo": "Company Logo",
       "section_description": "Information about your company that will be displayed on invoices, estimates and other documents created by Crater.",
       "phone": "Phone",
@@ -1324,6 +1326,8 @@
     "company_info": "Company Information",
     "company_info_desc": "This information will be displayed on invoices. Note that you can edit this later on settings page.",
     "company_name": "Company Name",
+    "company_slug": "Company Slug",
+    "company_slug_help_text": "A unique URL friendly name for your company (It will appear on Customer Portal URL)",
     "company_logo": "Company Logo",
     "logo_preview": "Logo Preview",
     "preferences": "Company Preferences",
@@ -1454,7 +1458,8 @@
     "at_least_one_ability": "Please select atleast one Permission.",
     "valid_driver_key": "Please enter a valid {driver} key.",
     "valid_exchange_rate": "Please enter a valid exchange rate.",
-    "company_name_not_same": "Company name must match with given name."
+    "company_name_not_same": "Company name must match with given name.",
+    "invalid_slug": "Invalid Slug"
   },
   "errors": {
     "starter_plan": "This feature is available on Starter plan and onwards!",
@@ -1523,4 +1528,4 @@
   "pdf_ship_to": "Ship to,",
   "pdf_received_from": "Received from:",
   "pdf_tax_label": "Tax"
-}
+}