thunderbird7756 Posts - Answer Overflow

thunderbird7756

•Created by thunderbird7756 on 7/12/2024 in #❓・help

i18n with NuxtUI component

Hey everyone, i work on a multilanguage project, i'd like to use i18n and nuxtui. I have a problem because when i try to change the langauge on nuxtui component definition, the language doesn't change, all the localized string into the template is changing but the title of the UTable defined in the item const is not changing

<script setup lang="ts">
const { t } = useI18n()

import type { Contract } from '~/types'
const props = defineProps({
  contract: {
    type: Object as PropType<Contract>,
    required: true
  },
  selected: {
    type: Boolean,
    default: false
  }
})

const items = [{
  label: t('ui_contract_details_details'),
  icon: 'i-material-symbols-contract-edit-outline',
  key: 'contract-data',
}, {
  label: t('ui_contract_details_actualSIV'),
  icon: 'i-heroicons-check-circle',
  key: 'actual-siv',
}, {
  label: t('ui_contract_details_action_history'),
  icon: 'i-material-symbols-history-rounded',
  key: 'history',
}]

const getLetterStartDate =  () => {
  const month = new Date(props.contract.start_date).toLocaleDateString('fr-FR',{month: 'long'})
  const upperCasedMonth = month.charAt(0).toUpperCase() + month.slice(1)
  return upperCasedMonth + ' ' +  new Date(props.contract.start_date).getFullYear().toString()
}
      <UTabs :items="items" :ui="{container:'overflow-x-auto'}">
        <template #default="{ item }">
          <div class="flex items-center gap-2 relative truncate">
            <UIcon :name="item.icon" class="w-4 h-4 flex-shrink-1" />
            <span class="truncate">{{ item.label }}</span>
          </div>
        </template>

        <template #item="{ item }">
          <ContractDataTable v-if="item.key === 'contract-data'" :contract="contract" />
          <SivDetailsTable v-if="item.key === 'actual-siv'" :vehicle="vehicle" />
          <VehicleActionsHistory v-if="item.key === 'history'" :vehicle="vehicle" />
        </template>
      </UTabs>

</script>

<script setup lang="ts">
const { t } = useI18n()

import type { Contract } from '~/types'
const props = defineProps({
  contract: {
    type: Object as PropType<Contract>,
    required: true
  },
  selected: {
    type: Boolean,
    default: false
  }
})

const items = [{
  label: t('ui_contract_details_details'),
  icon: 'i-material-symbols-contract-edit-outline',
  key: 'contract-data',
}, {
  label: t('ui_contract_details_actualSIV'),
  icon: 'i-heroicons-check-circle',
  key: 'actual-siv',
}, {
  label: t('ui_contract_details_action_history'),
  icon: 'i-material-symbols-history-rounded',
  key: 'history',
}]

const getLetterStartDate =  () => {
  const month = new Date(props.contract.start_date).toLocaleDateString('fr-FR',{month: 'long'})
  const upperCasedMonth = month.charAt(0).toUpperCase() + month.slice(1)
  return upperCasedMonth + ' ' +  new Date(props.contract.start_date).getFullYear().toString()
}
      <UTabs :items="items" :ui="{container:'overflow-x-auto'}">
        <template #default="{ item }">
          <div class="flex items-center gap-2 relative truncate">
            <UIcon :name="item.icon" class="w-4 h-4 flex-shrink-1" />
            <span class="truncate">{{ item.label }}</span>
          </div>
        </template>

        <template #item="{ item }">
          <ContractDataTable v-if="item.key === 'contract-data'" :contract="contract" />
          <SivDetailsTable v-if="item.key === 'actual-siv'" :vehicle="vehicle" />
          <VehicleActionsHistory v-if="item.key === 'history'" :vehicle="vehicle" />
        </template>
      </UTabs>

</script>

2 replies

NNuxt

•Created by thunderbird7756 on 5/9/2024 in #❓・help

Pinia store not making actions

Hi, i'm builing a online store with shopping cart managment. To do so i decided to implement a pinia store to handle the custoimer cart for example The problem is that my actions are never making change to the state and i don't understand why Here is the code of the store

<script>
import { defineStore } from 'pinia'
import type { AccessoryPurchaseInfo, ShoppingCart } from '~/types'
export const useShoppingStore = defineStore('shop', {
  state: () => ({
      cart: {
          accessories: [],
          brasero_computed_price: 0,
          brasero: {}
      } as ShoppingCart
  }),
      totalPrice(state) {
          let accessoriesPrice = 0
          for (const accessory of state.cart.accessories) {
              accessoriesPrice = accessoriesPrice + accessory.displayed_price
          }
          return accessoriesPrice + state.cart.brasero_computed_price
      }
  },
  actions: {
      addAccessory(accessory: AccessoryPurchaseInfo) {

          console.log(accessory, 'from index')
          console.log(this.cart)
          this.cart.accessories.push(accessory)
      }
  },
})

<script>
import { defineStore } from 'pinia'
import type { AccessoryPurchaseInfo, ShoppingCart } from '~/types'
export const useShoppingStore = defineStore('shop', {
  state: () => ({
      cart: {
          accessories: [],
          brasero_computed_price: 0,
          brasero: {}
      } as ShoppingCart
  }),
      totalPrice(state) {
          let accessoriesPrice = 0
          for (const accessory of state.cart.accessories) {
              accessoriesPrice = accessoriesPrice + accessory.displayed_price
          }
          return accessoriesPrice + state.cart.brasero_computed_price
      }
  },
  actions: {
      addAccessory(accessory: AccessoryPurchaseInfo) {

          console.log(accessory, 'from index')
          console.log(this.cart)
          this.cart.accessories.push(accessory)
      }
  },
})

Then in my component i call the addAccessory method, but nothing happen in the state,

<script setup lang="ts">
import { useShoppingStore } from '~/store'
import { storeToRefs } from 'pinia'

import type { Accessory, AccessoryPurchaseInfo } from '~/types'

const storeShop = useShoppingStore()
const {addAccessory} = storeShop

const {data: accessories} = await useFetch<Accessory[]>('/api/accessories')

const addAccessoryToCart = (accessory: Accessory) => {
  const accessoryToAdd: AccessoryPurchaseInfo = {
    id: accessory.id,
    name: accessory.name,
    quantity: 1,
    displayed_price: accessory.unit_price,
  }
  console.log(accessoryToAdd)
  addAccessory(accessoryToAdd)
}

</script>

<script setup lang="ts">
import { useShoppingStore } from '~/store'
import { storeToRefs } from 'pinia'

import type { Accessory, AccessoryPurchaseInfo } from '~/types'

const storeShop = useShoppingStore()
const {addAccessory} = storeShop

const {data: accessories} = await useFetch<Accessory[]>('/api/accessories')

const addAccessoryToCart = (accessory: Accessory) => {
  const accessoryToAdd: AccessoryPurchaseInfo = {
    id: accessory.id,
    name: accessory.name,
    quantity: 1,
    displayed_price: accessory.unit_price,
  }
  console.log(accessoryToAdd)
  addAccessory(accessoryToAdd)
}

</script>

I have no error, but this --> internal server error /node_modules/tailwindcss/tailwind.css?direct:12335:20 I shouldn't be related but.. Hope it's pretty clear !

1 replies

NNuxt

•Created by thunderbird7756 on 4/18/2024 in #❓・help

NuxtUI / Utable component : question about nested data and slot customization

4 replies

Gaming

Programming