Project

A sample project modlue is available with the script.

Here is sample code for listing projects:

<template>
    <ListItem
        :init-url="initUrl"
        @setItems="setItems"
    >
        <ParentTransition appear :visibility="true">
            <DataTable
                :header="projects.headers"
                :meta="projects.meta"
                module="project"
            >
                <DataRow v-for="project in projects.data" :key="project.uuid">
                    <DataCell name="title">
                        {{ project.title }}
                    </DataCell>
                    <DataCell name="action">
                        <DropdownMenu>
                            <DropdownItem icon="fas fa-arrow-circle-right" @click="router.push({name: 'ProjectShow', params: {uuid: project.uuid}})">Show</DropdownItem>
                        </DropdownMenu>
                    </DataCell>
                </DataRow>
            </DataTable>
        </ParentTransition>
    </ListItem>
</template>

<script>
export default {
    name: 'ProjectList'
}
</script>

<script setup>
import { reactive } from "vue"
import { useRouter } from "vue-router"

const router = useRouter()

const initUrl = "project/"

const projects = reactive({
    data: []
})

const setItems = (data) => {
    Object.assign(projects, data)
}
</script>

Here is a sample code for project form:

<template>
    <FormAction
        :init-url="initUrl"
        :init-form="initForm"
        :form="form"
        redirect="Project"
    >
        <div class="grid grid-cols-2 gap-6">
            <div class="col-span-2">
                <BaseInput
                    type="text"
                    v-model="form.title"
                    name="title"
                    :label="Title"
                    v-model:error="formErrors.title"
                />
            </div>
        </div>
    </FormAction>
</template>

<script>
export default {
    name: 'ProjectForm'
}
</script>

<script setup>
import { reactive } from "vue";
import { getFormErrors } from "@core/helpers/action"

const initForm = {
    title: "",
};

const initUrl = "project/"
const formErrors = getFormErrors(initUrl)

const form = reactive({ ...initForm });
</script>

To create a media upload button, use following code:

<MediaUpload
    multiple
    label="Upload File"
    module="project"
    :media="form.media"
    @setHash="hash => form.mediaHash = hash"
    @setToken="token => form.mediaToken = token"
    />