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

<script setup>
import { Head, Link, 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({
    role: {
        type: Object,
        default: () => ({}),
    },
    permissions: {
        type: Object,
        default: () => ({}),
    },
    roleHasPermissions: {
        type: Object,
        default: () => ({}),
    },
});

const form = useForm({
    _method: 'put',
    name: props.role.name,
    description: props.role.description,
    permissions: props.roleHasPermissions,
});

const submit = async () => {
    // await Inertia.post(stardust.route('user.store'), form);
    await form.put(stardust.route('settings.role.update', [props.role.id]), form);
};
</script>

<template>
    <LayoutAuthenticated>
        <Head title="Update role" />
        <SectionMain>
            <SectionTitleLineWithButton :icon="mdiAccountKey" title="Update 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.put(stardust.route('role.update', [props.role.id]))"> -->
            <CardBox form @submit.prevent="submit()">
                <FormField label="Name" :class="{ 'text-red-400': form.errors.name }">
                    <FormControl v-model="form.name" type="text" placeholder="Enter Name" required :error="form.errors.name" is-read-only="true">
                        <div class="text-red-400 text-sm" v-if="form.errors.name">
                            {{ form.errors.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>
initial commit 2023-03-03 15:54:28 +00:00			`<script setup>`
- prettier formatting - npm updates - new SearchMap.vue component 2023-10-31 14:38:43 +00:00			`import { Head, Link, 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';`
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			`role: {`
			`type: Object,`
			`default: () => ({}),`
			`},`
			`permissions: {`
			`type: Object,`
			`default: () => ({}),`
			`},`
			`roleHasPermissions: {`
			`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			`_method: 'put',`
			`name: props.role.name,`
			`description: props.role.description,`
			`permissions: props.roleHasPermissions,`
			`});`
initial commit 2023-03-03 15:54:28 +00:00
			`const submit = async () => {`
			`// await Inertia.post(stardust.route('user.store'), form);`
- 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.put(stardust.route('settings.role.update', [props.role.id]), 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="Update role" />`
			`<SectionMain>`
			`<SectionTitleLineWithButton :icon="mdiAccountKey" title="Update 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.put(stardust.route('role.update', [props.role.id]))"> -->`
			`<CardBox form @submit.prevent="submit()">`
			`<FormField label="Name" :class="{ 'text-red-400': form.errors.name }">`
- npm updates - Admins can no longer delete any users or roles - Additionally, the name of a role in edit mode is now read-only - extra new SetupConfirmation.vue compoenent for verifying qrcode 2FA - adapted ci.yaml 2024-02-14 12:47:10 +00:00			`<FormControl v-model="form.name" type="text" placeholder="Enter Name" required :error="form.errors.name" is-read-only="true">`
- prettier formatting - npm updates - new SearchMap.vue component 2023-10-31 14:38:43 +00:00			`<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="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>`
- replaced validation library @adonisjs/validator with @vinejs/vine (performance) - npm updates 2024-05-16 11:47:06 +00:00			`<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>`