Files
solidtime/resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue
Gregor Vostrak 27140d4ffc add linter, prettier and typescript support for jetstream (#1)
* add linter, prettier and typescript support for jetstream

* add github actions for lint, build and typecheck

* add composer install to build action

* fix composer lock

* add ext-intl and fixed php version

* fix intl php extension install

* add tip php extension to github npm build action

* fix php version to 8.3.1

* change github php base action

* fix primary button default type

* updated typescript types from Team to Organization

---------

Co-authored-by: Gregor Vostrak <gregorvostrak@Gregors-MacBook-Pro.local>
2024-01-21 22:35:43 +01:00

87 lines
2.7 KiB
Vue

<script setup lang="ts">
import { useForm } from '@inertiajs/vue3';
import ActionMessage from '@/Components/ActionMessage.vue';
import FormSection from '@/Components/FormSection.vue';
import InputError from '@/Components/InputError.vue';
import InputLabel from '@/Components/InputLabel.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import TextInput from '@/Components/TextInput.vue';
import type { Organization } from '@/types/models';
import type { Permissions } from '@/types/jetstream';
const props = defineProps<{
team: Organization;
permissions: Permissions;
}>();
const form = useForm({
name: props.team.name,
});
const updateTeamName = () => {
form.put(route('teams.update', props.team.id), {
errorBag: 'updateTeamName',
preserveScroll: true,
});
};
</script>
<template>
<FormSection @submitted="updateTeamName">
<template #title> Team Name</template>
<template #description>
The team's name and owner information.
</template>
<template #form>
<!-- Organization Owner Information -->
<div class="col-span-6">
<InputLabel value="Team Owner" />
<div class="flex items-center mt-2">
<img
class="w-12 h-12 rounded-full object-cover"
:src="team.owner.profile_photo_url"
:alt="team.owner.name" />
<div class="ms-4 leading-tight">
<div class="text-gray-900 dark:text-white">
{{ team.owner.name }}
</div>
<div class="text-gray-700 dark:text-gray-300 text-sm">
{{ team.owner.email }}
</div>
</div>
</div>
</div>
<!-- Organization Name -->
<div class="col-span-6 sm:col-span-4">
<InputLabel for="name" value="Team Name" />
<TextInput
id="name"
v-model="form.name"
type="text"
class="mt-1 block w-full"
:disabled="!permissions.canUpdateTeam" />
<InputError :message="form.errors.name" class="mt-2" />
</div>
</template>
<template v-if="permissions.canUpdateTeam" #actions>
<ActionMessage :on="form.recentlySuccessful" class="me-3">
Saved.
</ActionMessage>
<PrimaryButton
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing">
Save
</PrimaryButton>
</template>
</FormSection>
</template>