tethys.backend/resources/js/Pages/Admin/Role/Create.vue

<script lang="ts" setup>
import { Head, useForm } from '@inertiajs/vue3';
import { mdiAccountKey, mdiArrowLeftBoldOutline, mdiFormTextarea } from '@mdi/js';
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import SectionMain from '@/Components/SectionMain.vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
import CardBox from '@/Components/CardBox.vue';
import FormField from '@/Components/FormField.vue';
import FormControl from '@/Components/FormControl.vue';
import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue';
import BaseDivider from '@/Components/BaseDivider.vue';
import BaseButton from '@/Components/BaseButton.vue';
import BaseButtons from '@/Components/BaseButtons.vue';
import { stardust } from '@eidellev/adonis-stardust/client';

const props = defineProps({
    permissions: {
        type: Object,
        default: () => ({}),
    },
});

const form = useForm({
    name: '',
    display_name: '',
    description: '',
    permissions: [],
});

const submit = async () => {
    await form.post(stardust.route('settings.role.store'), form);
};
</script>

<template>
    <LayoutAuthenticated>
        <Head title="Add role" />
        <SectionMain>
            <SectionTitleLineWithButton :icon="mdiAccountKey" title="Add role" main>
                <BaseButton
                    :route-name="stardust.route('settings.role.index')"
                    :icon="mdiArrowLeftBoldOutline"
                    label="Back"
                    color="white"
                    rounded-full
                    small
                />
            </SectionTitleLineWithButton>
            <!-- <CardBox form @submit.prevent="form.post(stardust.route('role.store'))"> -->
            <CardBox form @submit.prevent="submit()">
                <FormField label="Name" help="Required. Role name" :class="{ 'text-red-400': form.errors.name }">
                    <FormControl v-model="form.name" type="text" placeholder="Enter Name" required :error="form.errors.name">
                        <div class="text-red-400 text-sm" v-if="form.errors.name">
                            {{ form.errors.name }}
                        </div>
                    </FormControl>
                </FormField>

                <FormField label="Display Name" help="Optional. Display name" :class="{ 'text-red-400': form.errors.display_name }">
                    <FormControl v-model="form.display_name" name="display_name" :error="form.errors.display_name">
                        <div class="text-red-400 text-sm" v-if="form.errors.display_name">
                            {{ form.errors.display_name }}
                        </div>
                    </FormControl>
                </FormField>

                <FormField
                    label="Description"
                    help="Optional. Description of new role"
                    :class="{ 'text-red-400': form.errors.description }"
                >
                    <FormControl
                        v-model="form.description"
                        v-bind:icon="mdiFormTextarea"
                        name="display_name"
                        :type="'textarea'"
                        :error="form.errors.description"
                    >
                        <div class="text-red-400 text-sm" v-if="form.errors.description">
                            {{ form.errors.description }}
                        </div>
                    </FormControl>
                </FormField>

                <BaseDivider />

                <FormField label="Permissions" wrap-body>
                    <FormCheckRadioGroup v-model="form.permissions" name="permissions" is-column :options="props.permissions" />
                </FormField>
                <div class="text-red-400 text-sm" v-if="form.errors.permissions && Array.isArray(form.errors.permissions)">
                    <!-- {{ errors.password_confirmation }} -->
                    {{ form.errors.permissions.join(', ') }}
                </div>

                <template #footer>
                    <BaseButtons>
                        <BaseButton
                            type="submit"
                            color="info"
                            label="Submit"
                            :class="{ 'opacity-25': form.processing }"
                            :disabled="form.processing"
                        />
                    </BaseButtons>
                </template>
            </CardBox>
        </SectionMain>
    </LayoutAuthenticated>
</template>
- added own provider for drive methods - renamed middleware Role and Can to role_middleware and can_middleware - added some typing for inertia vue3 components - npm updates 2024-04-23 17:36:45 +00:00			`<script lang="ts" setup>`
			`import { Head, useForm } from '@inertiajs/vue3';`
			`import { mdiAccountKey, mdiArrowLeftBoldOutline, mdiFormTextarea } from '@mdi/js';`
- prettier formatting - npm updates - new SearchMap.vue component 2023-10-31 14:38:43 +00:00			`import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';`
			`import SectionMain from '@/Components/SectionMain.vue';`
			`import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';`
			`import CardBox from '@/Components/CardBox.vue';`
			`import FormField from '@/Components/FormField.vue';`
			`import FormControl from '@/Components/FormControl.vue';`
			`import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue';`
			`import BaseDivider from '@/Components/BaseDivider.vue';`
			`import BaseButton from '@/Components/BaseButton.vue';`
			`import BaseButtons from '@/Components/BaseButtons.vue';`
initial commit 2023-03-03 15:54:28 +00:00			`import { stardust } from '@eidellev/adonis-stardust/client';`

			`const props = defineProps({`
- prettier formatting - npm updates - new SearchMap.vue component 2023-10-31 14:38:43 +00:00			`permissions: {`
			`type: Object,`
			`default: () => ({}),`
			`},`
initial commit 2023-03-03 15:54:28 +00:00			`});`

			`const form = useForm({`
- prettier formatting - npm updates - new SearchMap.vue component 2023-10-31 14:38:43 +00:00			`name: '',`
			`display_name: '',`
			`description: '',`
			`permissions: [],`
initial commit 2023-03-03 15:54:28 +00:00			`});`

			`const submit = async () => {`
- add AvatarController.ts - adapted menu.ts, NavBar.vue, NavBarItem.vue for highlighting active nav item - NavBarItemLabel.vue for app menu highlighting - adapted routes.ts - adapted app.edge for new favicon - adapted LayoutAuthenticated.vue (:showAsideMenu="false") for showing AsideMenu optional - new material icons: BriefcaseCheck.vue, SwapHorizontal.vue, AccountGroup.vue, Lock.vue - started with FirstRunWizard 2023-12-15 16:17:33 +00:00			`await form.post(stardust.route('settings.role.store'), form);`
initial commit 2023-03-03 15:54:28 +00:00			`};`
			`</script>`

			`<template>`
- prettier formatting - npm updates - new SearchMap.vue component 2023-10-31 14:38:43 +00:00			`<LayoutAuthenticated>`
			`<Head title="Add role" />`
			`<SectionMain>`
			`<SectionTitleLineWithButton :icon="mdiAccountKey" title="Add role" main>`
			`<BaseButton`
- add AvatarController.ts - adapted menu.ts, NavBar.vue, NavBarItem.vue for highlighting active nav item - NavBarItemLabel.vue for app menu highlighting - adapted routes.ts - adapted app.edge for new favicon - adapted LayoutAuthenticated.vue (:showAsideMenu="false") for showing AsideMenu optional - new material icons: BriefcaseCheck.vue, SwapHorizontal.vue, AccountGroup.vue, Lock.vue - started with FirstRunWizard 2023-12-15 16:17:33 +00:00			`:route-name="stardust.route('settings.role.index')"`
- prettier formatting - npm updates - new SearchMap.vue component 2023-10-31 14:38:43 +00:00			`:icon="mdiArrowLeftBoldOutline"`
			`label="Back"`
			`color="white"`
			`rounded-full`
			`small`
			`/>`
			`</SectionTitleLineWithButton>`
			`<!-- <CardBox form @submit.prevent="form.post(stardust.route('role.store'))"> -->`
			`<CardBox form @submit.prevent="submit()">`
			`<FormField label="Name" help="Required. Role name" :class="{ 'text-red-400': form.errors.name }">`
			`<FormControl v-model="form.name" type="text" placeholder="Enter Name" required :error="form.errors.name">`
			`<div class="text-red-400 text-sm" v-if="form.errors.name">`
			`{{ form.errors.name }}`
			`</div>`
			`</FormControl>`
			`</FormField>`
initial commit 2023-03-03 15:54:28 +00:00
- prettier formatting - npm updates - new SearchMap.vue component 2023-10-31 14:38:43 +00:00			`<FormField label="Display Name" help="Optional. Display name" :class="{ 'text-red-400': form.errors.display_name }">`
			`<FormControl v-model="form.display_name" name="display_name" :error="form.errors.display_name">`
			`<div class="text-red-400 text-sm" v-if="form.errors.display_name">`
			`{{ form.errors.display_name }}`
			`</div>`
			`</FormControl>`
			`</FormField>`
initial commit 2023-03-03 15:54:28 +00:00
- prettier formatting - npm updates - new SearchMap.vue component 2023-10-31 14:38:43 +00:00			`<FormField`
			`label="Description"`
			`help="Optional. Description of new role"`
			`:class="{ 'text-red-400': form.errors.description }"`
			`>`
			`<FormControl`
			`v-model="form.description"`
			`v-bind:icon="mdiFormTextarea"`
			`name="display_name"`
			`:type="'textarea'"`
			`:error="form.errors.description"`
			`>`
			`<div class="text-red-400 text-sm" v-if="form.errors.description">`
			`{{ form.errors.description }}`
			`</div>`
			`</FormControl>`
			`</FormField>`
initial commit 2023-03-03 15:54:28 +00:00
- prettier formatting - npm updates - new SearchMap.vue component 2023-10-31 14:38:43 +00:00			`<BaseDivider />`
initial commit 2023-03-03 15:54:28 +00:00
- prettier formatting - npm updates - new SearchMap.vue component 2023-10-31 14:38:43 +00:00			`<FormField label="Permissions" wrap-body>`
			`<FormCheckRadioGroup v-model="form.permissions" name="permissions" is-column :options="props.permissions" />`
			`</FormField>`
			`<div class="text-red-400 text-sm" v-if="form.errors.permissions && Array.isArray(form.errors.permissions)">`
			`<!-- {{ errors.password_confirmation }} -->`
			`{{ form.errors.permissions.join(', ') }}`
			`</div>`
initial commit 2023-03-03 15:54:28 +00:00
- prettier formatting - npm updates - new SearchMap.vue component 2023-10-31 14:38:43 +00:00			`<template #footer>`
			`<BaseButtons>`
			`<BaseButton`
			`type="submit"`
			`color="info"`
			`label="Submit"`
			`:class="{ 'opacity-25': form.processing }"`
			`:disabled="form.processing"`
			`/>`
			`</BaseButtons>`
			`</template>`
			`</CardBox>`
			`</SectionMain>`
			`</LayoutAuthenticated>`
initial commit 2023-03-03 15:54:28 +00:00			`</template>`