Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: inisiasi penggunaan package creasi/laravel-base #25

Merged
merged 41 commits into from
Oct 3, 2023

Conversation

feryardiant
Copy link
Contributor

Notable changes

Dalam PR ini kita memindahkan beberapa app-specific functionality ke package, antara lain :

  • Semua static assets yang ada di folder public/assets, menjadikan static assets tersebut reusable & memungkinkan kita cukup mengelola 1 package jika diperlukan adanya perubahan pada asset tersebut.
  • Root layout inertia,
  • View composers
  • Laravel dusk Browser macro

To be considered

Untuk saat ini, walaupun package base yang sedang dibangun sudah dilengkapi dengan fungsional dasar untuk management user dan company yang sudah mendukung untuk digunakan pada berbagai skenario, namun saya belum melihat potensi untuk dapat di integrasikan langsung dengan inertia.

Integrasi langsung yang dimaksud adalah sebuah fitur dimana UI dari package dapat di load langsung oleh inertia. Misalnya untuk load translasi dari package, kita bisa "mendaftarkan" translasi tersebut dengan namespace creasico agar translasi tersebut dapat di load dengan cara __('creasico::dashboard.page'), see docs

Hal tersebut menjadikan (setidaknya untuk saat ini) kita masih perlu melakukan implementasi routing dan controller dari app, bukan dari package.

To-do

  • Investigasi lebih lanjut terkait loading view component (pages) dari package.
  • Implementasi UI dari setiap basic functionality yang disediakan oleh package.

@feryardiant feryardiant added enhancement New feature or request chore A task that needs to be done integration When multiple functionalities should works together experience The way users interact with the product labels Jul 14, 2023
@feryardiant feryardiant marked this pull request as draft July 14, 2023 01:20
Signed-off-by: Fery Wardiyanto <[email protected]>
Signed-off-by: Fery Wardiyanto <[email protected]>
instead of centralized in `shim.d.ts`

Signed-off-by: Fery Wardiyanto <[email protected]>
let maintainers decide whether to customize the `creasi-config`
on each projects

Signed-off-by: Fery Wardiyanto <[email protected]>
sometimes it problematic when run alongside `pnpm dev`

Signed-off-by: Fery Wardiyanto <[email protected]>
use `useNaiveDiscreteApi()` inside script setup
to get access to `MessageApi`, `NotificationApi`, `DialogApi`
and `LoadingBarApi`

Signed-off-by: Fery Wardiyanto <[email protected]>
Comment on lines 47 to 54
export function useNaiveDiscreteApi() {
return {
message: inject('$message') as MessageApi,
notification: inject('$notification') as NotificationApi,
dialog: inject('$dialog') as DialogApi,
loading: inject('$loading') as LoadingBarApi,
}
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This lines enable us to have access to the naive-ui discrete API. Simply by invoke it inside the vue component setup

<script setup lang="ts">
import type { NotificationType } from 'naive-ui'

const { notification } = useNaiveDiscreteApi()

function notify(type: NotificationType, content: string) {
  notification[type]({ content })
}
</script>

<template>
  <n-button @click="notify('error', 'Error notification here')">
    Show error via composable
  </n-button>

  <n-button @click="$notification.error({ content: 'Error notification here' })">
    Show error via global property
  </n-button>
</template>

@feryardiant
Copy link
Contributor Author

It feels so inconvenience if we have to do import alias every time we create a page just to change the page title.

<script setup lang="ts">
import { Head as iHead } from '@inertiajs/vue3'
</script>

<template>
  <i-head :title="$t('account.profile.page')" />
</template>

Here I decided to use defineOptions() instead

<script setup lang="ts">
defineOptions({
  pageName: 'account.settings.page',
})
</script>

<template>
  <!-- the page content -->
</template>

Notice that the value of pageName option is actually a translation key instead of plain page title.

Caveats

  • Though it's only usable in page components (the components that in pages directory) but the autocomplete is generally available for all vue components (including components directory).
  • At this state, I couldn't figure out how to make autocompletion for the value

Signed-off-by: Fery Wardiyanto <[email protected]>
Signed-off-by: Fery Wardiyanto <[email protected]>
but it looks akward indeed 😅

Signed-off-by: Fery Wardiyanto <[email protected]>
as mentioned that before we run `pnpm build` we need to run
`composer ziggy:generate` just to ensure all routes are generated
property as json. Since that inertia.js is actually generating
full `APP_URL` there's no way to easily switch between url while
we run `artisan serve` or throught nginx especially when running
`pnpm dev`.

We need to run `composer ziggy:generate` everytime we change the
`APP_URL` in our `.env` file. Here we can change the `APP_URL`
anytime without bothering to run `composer ziggy:generate` unless
we actually update our routes definition

Signed-off-by: Fery Wardiyanto <[email protected]>
based on updates from alfu-space projects

Signed-off-by: Fery Wardiyanto <[email protected]>
Signed-off-by: Fery Wardiyanto <[email protected]>
@feryardiant feryardiant marked this pull request as ready for review October 3, 2023 19:38
@feryardiant feryardiant requested a review from a team October 3, 2023 19:38
@feryardiant feryardiant merged commit 6d81368 into main Oct 3, 2023
5 checks passed
@feryardiant feryardiant deleted the feat-base branch October 3, 2023 19:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
chore A task that needs to be done enhancement New feature or request experience The way users interact with the product integration When multiple functionalities should works together
Projects
Status: ✅ Done
Development

Successfully merging this pull request may close these issues.

1 participant