mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-17 12:42:15 +01:00
add format check, update prettier rules, apply rules consistently
This commit is contained in:
Gregor Vostrak
@@ -70,9 +70,7 @@ const page = usePage<{
|
||||
</template>
|
||||
|
||||
<template #actions>
|
||||
<PrimaryButton
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing">
|
||||
<PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
|
||||
Create
|
||||
</PrimaryButton>
|
||||
</template>
|
||||
|
||||
@@ -28,22 +28,17 @@ const deleteTeam = () => {
|
||||
<ActionSection>
|
||||
<template #title> Delete Organization </template>
|
||||
|
||||
<template #description>
|
||||
Permanently delete this organization.
|
||||
</template>
|
||||
<template #description> Permanently delete this organization. </template>
|
||||
|
||||
<template #content>
|
||||
<div class="max-w-xl text-sm text-text-secondary">
|
||||
Once a organization is deleted, all of its resources and data
|
||||
will be permanently deleted. Before deleting this organization,
|
||||
please download any data or information regarding this
|
||||
organization that you wish to retain.
|
||||
Once a organization is deleted, all of its resources and data will be permanently
|
||||
deleted. Before deleting this organization, please download any data or information
|
||||
regarding this organization that you wish to retain.
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<DangerButton @click="confirmTeamDeletion">
|
||||
Delete Organization
|
||||
</DangerButton>
|
||||
<DangerButton @click="confirmTeamDeletion"> Delete Organization </DangerButton>
|
||||
</div>
|
||||
|
||||
<!-- Delete Organization Confirmation Modal -->
|
||||
@@ -53,9 +48,8 @@ const deleteTeam = () => {
|
||||
<template #title> Delete Organization </template>
|
||||
|
||||
<template #content>
|
||||
Are you sure you want to delete this organization? Once a
|
||||
organization is deleted, all of its resources and data will
|
||||
be permanently deleted.
|
||||
Are you sure you want to delete this organization? Once a organization is
|
||||
deleted, all of its resources and data will be permanently deleted.
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
|
||||
@@ -6,10 +6,7 @@ import { api, type OrganizationExportResponse } from '@/packages/api/src';
|
||||
import { getCurrentOrganizationId } from '@/utils/useUser';
|
||||
import DialogModal from '@/packages/ui/src/DialogModal.vue';
|
||||
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
|
||||
import {
|
||||
ArrowUpOnSquareIcon,
|
||||
InformationCircleIcon,
|
||||
} from '@heroicons/vue/24/outline';
|
||||
import { ArrowUpOnSquareIcon, InformationCircleIcon } from '@heroicons/vue/24/outline';
|
||||
import { CardTitle } from '@/packages/ui/src';
|
||||
import Card from '@/Components/Common/Card.vue';
|
||||
import { useOrganizationStore } from '@/utils/useOrganization';
|
||||
@@ -28,14 +25,11 @@ async function exportData() {
|
||||
try {
|
||||
const response = await handleApiRequestNotifications(
|
||||
() =>
|
||||
api.exportOrganization(
|
||||
undefined,
|
||||
{
|
||||
params: {
|
||||
organization: organizationId,
|
||||
},
|
||||
}
|
||||
),
|
||||
api.exportOrganization(undefined, {
|
||||
params: {
|
||||
organization: organizationId,
|
||||
},
|
||||
}),
|
||||
'Organization data exported successfully.',
|
||||
'Exporting organization data failed.'
|
||||
);
|
||||
@@ -52,10 +46,7 @@ async function exportData() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogModal
|
||||
closeable
|
||||
:show="showResultModal"
|
||||
@close="showResultModal = false">
|
||||
<DialogModal closeable :show="showResultModal" @close="showResultModal = false">
|
||||
<template #title>The export was successful!</template>
|
||||
<template #content>
|
||||
<div class="pb-6">
|
||||
@@ -69,32 +60,26 @@ async function exportData() {
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<SecondaryButton @click="showResultModal = false">
|
||||
Close
|
||||
</SecondaryButton>
|
||||
<SecondaryButton @click="showResultModal = false"> Close </SecondaryButton>
|
||||
</template>
|
||||
</DialogModal>
|
||||
<div>
|
||||
<CardTitle title="Export Data" :icon="ArrowUpOnSquareIcon"></CardTitle>
|
||||
<Card class="mb-3">
|
||||
<div class="py-2 px-3 sm:px-4 text-sm flex items-center space-x-3">
|
||||
<InformationCircleIcon
|
||||
class="h-5 min-w-0 w-5 text-bg-tertiary" />
|
||||
<InformationCircleIcon class="h-5 min-w-0 w-5 text-bg-tertiary" />
|
||||
<p class="flex-1">
|
||||
Export your solidtime organization data. This will include
|
||||
all clients, projects, tasks, and time entries. You will
|
||||
receive a zip file with json files for each entity.
|
||||
Export your solidtime organization data. This will include all clients,
|
||||
projects, tasks, and time entries. You will receive a zip file with json files
|
||||
for each entity.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
<div
|
||||
class="py-6 flex-col items-center flex space-y-5 text-center text-sm">
|
||||
<div class="py-6 flex-col items-center flex space-y-5 text-center text-sm">
|
||||
<div>
|
||||
The following organization will be exported: <br />
|
||||
<strong class="font-semibold">{{
|
||||
organization?.name
|
||||
}}</strong>
|
||||
<strong class="font-semibold">{{ organization?.name }}</strong>
|
||||
</div>
|
||||
<PrimaryButton :loading @click="exportData"
|
||||
>Export Organization Data
|
||||
|
||||
@@ -5,10 +5,7 @@ import { useNotificationsStore } from '@/utils/notification';
|
||||
import { api } from '@/packages/api/src';
|
||||
import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
|
||||
import { DocumentIcon } from '@heroicons/vue/24/solid';
|
||||
import {
|
||||
ArrowDownOnSquareIcon,
|
||||
InformationCircleIcon,
|
||||
} from '@heroicons/vue/24/outline';
|
||||
import { ArrowDownOnSquareIcon, InformationCircleIcon } from '@heroicons/vue/24/outline';
|
||||
|
||||
import { getCurrentOrganizationId } from '@/utils/useUser';
|
||||
import type { ImportReport, ImportType } from '@/packages/api/src';
|
||||
@@ -46,16 +43,11 @@ async function importData() {
|
||||
return;
|
||||
}
|
||||
if (files.value?.length !== 1) {
|
||||
addNotification(
|
||||
'error',
|
||||
'Please select the CSV or ZIP file that you want to import'
|
||||
);
|
||||
addNotification('error', 'Please select the CSV or ZIP file that you want to import');
|
||||
return;
|
||||
}
|
||||
const rawBase64String = await toBase64(files.value[0]);
|
||||
const base64String = rawBase64String
|
||||
.split(';')[1]
|
||||
.replace('base64,', '') as string;
|
||||
const base64String = rawBase64String.split(';')[1].replace('base64,', '') as string;
|
||||
const organizationId = getCurrentOrganizationId();
|
||||
if (organizationId !== null) {
|
||||
const { handleApiRequestNotifications } = useNotificationsStore();
|
||||
@@ -129,65 +121,48 @@ const showResultModal = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogModal
|
||||
closeable
|
||||
:show="showResultModal"
|
||||
@close="showResultModal = false">
|
||||
<DialogModal closeable :show="showResultModal" @close="showResultModal = false">
|
||||
<template #title>Import Result</template>
|
||||
<template #content>
|
||||
<div class="pb-6">
|
||||
The import was successful! Here is an overview of the imported
|
||||
data:
|
||||
The import was successful! Here is an overview of the imported data:
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="py-2.5 px-3 border-t border-t-card-background-separator">
|
||||
<div class="py-2.5 px-3 border-t border-t-card-background-separator">
|
||||
<span class="text-text-primary font-semibold">Clients created:</span>
|
||||
{{ reportResult?.report.clients.created }}
|
||||
</div>
|
||||
<div
|
||||
class="py-2.5 px-3 border-t border-t-card-background-separator">
|
||||
<div class="py-2.5 px-3 border-t border-t-card-background-separator">
|
||||
<span class="text-text-primary font-semibold">Projects created:</span>
|
||||
{{ reportResult?.report.projects.created }}
|
||||
</div>
|
||||
<div
|
||||
class="py-2.5 px-3 border-t border-t-card-background-separator">
|
||||
<div class="py-2.5 px-3 border-t border-t-card-background-separator">
|
||||
<span class="text-text-primary font-semibold">Tasks created:</span>
|
||||
{{ reportResult?.report.tasks.created }}
|
||||
</div>
|
||||
<div
|
||||
class="py-2.5 px-3 border-t border-t-card-background-separator">
|
||||
<span class="text-text-primary font-semibold"
|
||||
>Time entries created:</span
|
||||
>
|
||||
<div class="py-2.5 px-3 border-t border-t-card-background-separator">
|
||||
<span class="text-text-primary font-semibold">Time entries created:</span>
|
||||
{{ reportResult?.report.time_entries.created }}
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<SecondaryButton @click="showResultModal = false">
|
||||
Close
|
||||
</SecondaryButton>
|
||||
<SecondaryButton @click="showResultModal = false"> Close </SecondaryButton>
|
||||
</template>
|
||||
</DialogModal>
|
||||
<div>
|
||||
<CardTitle
|
||||
title="Import Data"
|
||||
:icon="ArrowDownOnSquareIcon"></CardTitle>
|
||||
<CardTitle title="Import Data" :icon="ArrowDownOnSquareIcon"></CardTitle>
|
||||
<Card class="mb-3">
|
||||
<div class="py-2 px-3 sm:px-4 text-sm flex items-center space-x-3">
|
||||
<InformationCircleIcon
|
||||
class="h-5 min-w-0 w-5 text-bg-tertiary" />
|
||||
<InformationCircleIcon class="h-5 min-w-0 w-5 text-bg-tertiary" />
|
||||
<p class="flex-1">
|
||||
Import existing data from Toggl, Clockify or a different
|
||||
solidtime instance. Please select the type of data you want
|
||||
to import and follow the instructions.
|
||||
Import existing data from Toggl, Clockify or a different solidtime instance.
|
||||
Please select the type of data you want to import and follow the instructions.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<div
|
||||
class="px-4 py-5 sm:px-5">
|
||||
<div class="px-4 py-5 sm:px-5">
|
||||
<div>
|
||||
<InputLabel for="importType" value="Import Type" />
|
||||
<select
|
||||
@@ -205,15 +180,9 @@ const showResultModal = ref(false);
|
||||
{{ importTypeOption.name }}
|
||||
</option>
|
||||
</select>
|
||||
<div
|
||||
v-if="currentImporterDescription"
|
||||
class="py-3 text-text-primary">
|
||||
<div class="font-semibold text-text-secondary py-1">
|
||||
Instructions:
|
||||
</div>
|
||||
<div
|
||||
class="max-w-2xl"
|
||||
v-html="currentImporterDescription"></div>
|
||||
<div v-if="currentImporterDescription" class="py-3 text-text-primary">
|
||||
<div class="font-semibold text-text-secondary py-1">Instructions:</div>
|
||||
<div class="max-w-2xl" v-html="currentImporterDescription"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -229,9 +198,7 @@ const showResultModal = ref(false);
|
||||
for="file-upload"
|
||||
class="relative cursor-pointer rounded-md font-semibold text-text-primary focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 focus-within:ring-offset-gray-900 hover:text-indigo-500">
|
||||
<span v-if="files">{{ filenames }}</span>
|
||||
<span v-else
|
||||
>Upload a Toggl/Clockify Export</span
|
||||
>
|
||||
<span v-else>Upload a Toggl/Clockify Export</span>
|
||||
<input
|
||||
id="file-upload"
|
||||
ref="importFile"
|
||||
@@ -250,9 +217,7 @@ const showResultModal = ref(false);
|
||||
|
||||
<div
|
||||
class="flex items-center justify-end px-4 py-3 bg-card-background border-t border-card-background-separator text-end sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md">
|
||||
<PrimaryButton :loading @click="importData"
|
||||
>Import Data
|
||||
</PrimaryButton>
|
||||
<PrimaryButton :loading @click="importData">Import Data </PrimaryButton>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@@ -40,10 +40,7 @@ async function submit() {
|
||||
}
|
||||
|
||||
function checkForConfirmationModal() {
|
||||
if (
|
||||
organizationBody.value.billable_rate ===
|
||||
organization.value?.billable_rate
|
||||
) {
|
||||
if (organizationBody.value.billable_rate === organization.value?.billable_rate) {
|
||||
submit();
|
||||
} else {
|
||||
showConfirmationModal.value = true;
|
||||
@@ -62,9 +59,7 @@ function checkForConfirmationModal() {
|
||||
<template #form>
|
||||
<OrganizationBillableRateModal
|
||||
v-model:show="showConfirmationModal"
|
||||
:new-billable-rate="
|
||||
organizationBody.billable_rate
|
||||
"
|
||||
:new-billable-rate="organizationBody.billable_rate"
|
||||
@submit="submit"></OrganizationBillableRateModal>
|
||||
<!-- Organization Owner Information -->
|
||||
<div class="col-span-6">
|
||||
@@ -98,9 +93,7 @@ function checkForConfirmationModal() {
|
||||
</div>
|
||||
</template>
|
||||
<template #actions>
|
||||
<PrimaryButton @click="checkForConfirmationModal"
|
||||
>Save</PrimaryButton
|
||||
>
|
||||
<PrimaryButton @click="checkForConfirmationModal">Save</PrimaryButton>
|
||||
</template>
|
||||
</FormSection>
|
||||
</template>
|
||||
|
||||
@@ -14,11 +14,7 @@ import {
|
||||
SelectValue,
|
||||
} from '@/Components/ui/select';
|
||||
import { useMutation, useQueryClient } from '@tanstack/vue-query';
|
||||
import type {
|
||||
DateFormat,
|
||||
TimeFormat,
|
||||
IntervalFormat,
|
||||
} from '@/packages/ui/src/utils/time';
|
||||
import type { DateFormat, TimeFormat, IntervalFormat } from '@/packages/ui/src/utils/time';
|
||||
import type { CurrencyFormat } from '@/packages/ui/src/utils/money';
|
||||
import type { NumberFormat } from '@/packages/ui/src/utils/number';
|
||||
|
||||
@@ -44,8 +40,7 @@ const form = ref<FormValues>({
|
||||
});
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: (values: FormValues) =>
|
||||
updateOrganization(values as UpdateOrganizationBody),
|
||||
mutationFn: (values: FormValues) => updateOrganization(values as UpdateOrganizationBody),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['organization'] });
|
||||
},
|
||||
@@ -56,12 +51,10 @@ onMounted(async () => {
|
||||
if (organization.value) {
|
||||
form.value = {
|
||||
number_format: organization.value.number_format as NumberFormat,
|
||||
currency_format: organization.value
|
||||
.currency_format as CurrencyFormat,
|
||||
currency_format: organization.value.currency_format as CurrencyFormat,
|
||||
date_format: organization.value.date_format as DateFormat,
|
||||
time_format: organization.value.time_format as TimeFormat,
|
||||
interval_format: organization?.value
|
||||
.interval_format as IntervalFormat,
|
||||
interval_format: organization?.value.interval_format as IntervalFormat,
|
||||
};
|
||||
}
|
||||
});
|
||||
@@ -83,30 +76,17 @@ async function submit() {
|
||||
<!-- Number Format -->
|
||||
<div class="col-span-6">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel
|
||||
for="numberFormat"
|
||||
class="mb-2"
|
||||
value="Number Format" />
|
||||
<InputLabel for="numberFormat" class="mb-2" value="Number Format" />
|
||||
<Select v-model="form.number_format">
|
||||
<SelectTrigger id="numberFormat">
|
||||
<SelectValue placeholder="Select number format" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="point-comma"
|
||||
>1.111,11</SelectItem
|
||||
>
|
||||
<SelectItem value="comma-point"
|
||||
>1,111.11</SelectItem
|
||||
>
|
||||
<SelectItem value="space-comma"
|
||||
>1 111,11</SelectItem
|
||||
>
|
||||
<SelectItem value="space-point"
|
||||
>1 111.11</SelectItem
|
||||
>
|
||||
<SelectItem value="apostrophe-point"
|
||||
>1'111.11</SelectItem
|
||||
>
|
||||
<SelectItem value="point-comma">1.111,11</SelectItem>
|
||||
<SelectItem value="comma-point">1,111.11</SelectItem>
|
||||
<SelectItem value="space-comma">1 111,11</SelectItem>
|
||||
<SelectItem value="space-point">1 111.11</SelectItem>
|
||||
<SelectItem value="apostrophe-point">1'111.11</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
@@ -115,29 +95,18 @@ async function submit() {
|
||||
<!-- Currency Format -->
|
||||
<div class="col-span-6">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel
|
||||
for="currencyFormat"
|
||||
class="mb-2"
|
||||
value="Currency Format" />
|
||||
<InputLabel for="currencyFormat" class="mb-2" value="Currency Format" />
|
||||
<Select v-model="form.currency_format">
|
||||
<SelectTrigger id="currencyFormat">
|
||||
<SelectValue placeholder="Select currency format" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="iso-code-before-with-space"
|
||||
>EUR 111</SelectItem
|
||||
>
|
||||
<SelectItem value="iso-code-after-with-space"
|
||||
>111 EUR</SelectItem
|
||||
>
|
||||
<SelectItem value="iso-code-before-with-space">EUR 111</SelectItem>
|
||||
<SelectItem value="iso-code-after-with-space">111 EUR</SelectItem>
|
||||
<SelectItem value="symbol-before">€111</SelectItem>
|
||||
<SelectItem value="symbol-after">111€</SelectItem>
|
||||
<SelectItem value="symbol-before-with-space"
|
||||
>€ 111</SelectItem
|
||||
>
|
||||
<SelectItem value="symbol-after-with-space"
|
||||
>111 €</SelectItem
|
||||
>
|
||||
<SelectItem value="symbol-before-with-space">€ 111</SelectItem>
|
||||
<SelectItem value="symbol-after-with-space">111 €</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
@@ -146,33 +115,18 @@ async function submit() {
|
||||
<!-- Date Format -->
|
||||
<div class="col-span-6">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel
|
||||
for="dateFormat"
|
||||
class="mb-2"
|
||||
value="Date Format" />
|
||||
<InputLabel for="dateFormat" class="mb-2" value="Date Format" />
|
||||
<Select v-model="form.date_format">
|
||||
<SelectTrigger id="dateFormat">
|
||||
<SelectValue placeholder="Select date format" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="point-separated-d-m-yyyy"
|
||||
>D.M.YYYY</SelectItem
|
||||
>
|
||||
<SelectItem value="slash-separated-mm-dd-yyyy"
|
||||
>MM/DD/YYYY</SelectItem
|
||||
>
|
||||
<SelectItem value="slash-separated-dd-mm-yyyy"
|
||||
>DD/MM/YYYY</SelectItem
|
||||
>
|
||||
<SelectItem value="hyphen-separated-dd-mm-yyyy"
|
||||
>DD-MM-YYYY</SelectItem
|
||||
>
|
||||
<SelectItem value="hyphen-separated-mm-dd-yyyy"
|
||||
>MM-DD-YYYY</SelectItem
|
||||
>
|
||||
<SelectItem value="hyphen-separated-yyyy-mm-dd"
|
||||
>YYYY-MM-DD</SelectItem
|
||||
>
|
||||
<SelectItem value="point-separated-d-m-yyyy">D.M.YYYY</SelectItem>
|
||||
<SelectItem value="slash-separated-mm-dd-yyyy">MM/DD/YYYY</SelectItem>
|
||||
<SelectItem value="slash-separated-dd-mm-yyyy">DD/MM/YYYY</SelectItem>
|
||||
<SelectItem value="hyphen-separated-dd-mm-yyyy">DD-MM-YYYY</SelectItem>
|
||||
<SelectItem value="hyphen-separated-mm-dd-yyyy">MM-DD-YYYY</SelectItem>
|
||||
<SelectItem value="hyphen-separated-yyyy-mm-dd">YYYY-MM-DD</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
@@ -181,21 +135,14 @@ async function submit() {
|
||||
<!-- Time Format -->
|
||||
<div class="col-span-6">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel
|
||||
for="timeFormat"
|
||||
class="mb-2"
|
||||
value="Time Format" />
|
||||
<InputLabel for="timeFormat" class="mb-2" value="Time Format" />
|
||||
<Select v-model="form.time_format">
|
||||
<SelectTrigger id="timeFormat">
|
||||
<SelectValue placeholder="Select time format" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="12-hours"
|
||||
>12-hour clock</SelectItem
|
||||
>
|
||||
<SelectItem value="24-hours"
|
||||
>24-hour clock</SelectItem
|
||||
>
|
||||
<SelectItem value="12-hours">12-hour clock</SelectItem>
|
||||
<SelectItem value="24-hours">24-hour clock</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
@@ -204,24 +151,16 @@ async function submit() {
|
||||
<!-- Interval Format -->
|
||||
<div class="col-span-6">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel
|
||||
for="intervalFormat"
|
||||
class="mb-2"
|
||||
value="Time Duration Format" />
|
||||
<InputLabel for="intervalFormat" class="mb-2" value="Time Duration Format" />
|
||||
<Select v-model="form.interval_format">
|
||||
<SelectTrigger id="intervalFormat">
|
||||
<SelectValue placeholder="Select interval format" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="decimal">Decimal</SelectItem>
|
||||
<SelectItem value="hours-minutes"
|
||||
>12h 3m</SelectItem
|
||||
>
|
||||
<SelectItem value="hours-minutes-colon-separated"
|
||||
>12:03</SelectItem
|
||||
>
|
||||
<SelectItem
|
||||
value="hours-minutes-seconds-colon-separated"
|
||||
<SelectItem value="hours-minutes">12h 3m</SelectItem>
|
||||
<SelectItem value="hours-minutes-colon-separated">12:03</SelectItem>
|
||||
<SelectItem value="hours-minutes-seconds-colon-separated"
|
||||
>12:03:45</SelectItem
|
||||
>
|
||||
</SelectContent>
|
||||
|
||||
@@ -13,11 +13,7 @@ import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
|
||||
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
|
||||
import SectionBorder from '@/Components/SectionBorder.vue';
|
||||
import TextInput from '@/packages/ui/src/Input/TextInput.vue';
|
||||
import type {
|
||||
Organization,
|
||||
OrganizationInvitation,
|
||||
User,
|
||||
} from '@/types/models';
|
||||
import type { Organization, OrganizationInvitation, User } from '@/types/models';
|
||||
import type { Membership, Permissions, Role } from '@/types/jetstream';
|
||||
import { filterRoles } from '@/utils/roles';
|
||||
|
||||
@@ -94,9 +90,7 @@ const confirmLeavingTeam = () => {
|
||||
};
|
||||
|
||||
const leaveTeam = () => {
|
||||
leaveTeamForm.delete(
|
||||
route('team-members.destroy', [props.team.id, page.props.auth.user.id])
|
||||
);
|
||||
leaveTeamForm.delete(route('team-members.destroy', [props.team.id, page.props.auth.user.id]));
|
||||
};
|
||||
|
||||
const confirmTeamMemberRemoval = (teamMember: User) => {
|
||||
@@ -133,15 +127,14 @@ const displayableRole = (role: string) => {
|
||||
<template #title> Add Organization Member</template>
|
||||
|
||||
<template #description>
|
||||
Add a new member to your organization, allowing them to
|
||||
collaborate with you.
|
||||
Add a new member to your organization, allowing them to collaborate with you.
|
||||
</template>
|
||||
|
||||
<template #form>
|
||||
<div class="col-span-6">
|
||||
<div class="max-w-xl text-sm text-muted">
|
||||
Please provide the email address of the person you
|
||||
would like to add to this organization.
|
||||
Please provide the email address of the person you would like to add to
|
||||
this organization.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -153,19 +146,13 @@ const displayableRole = (role: string) => {
|
||||
v-model="addTeamMemberForm.email"
|
||||
type="email"
|
||||
class="mt-1 block w-full" />
|
||||
<InputError
|
||||
:message="addTeamMemberForm.errors.email"
|
||||
class="mt-2" />
|
||||
<InputError :message="addTeamMemberForm.errors.email" class="mt-2" />
|
||||
</div>
|
||||
|
||||
<!-- Role -->
|
||||
<div
|
||||
v-if="availableRoles.length > 0"
|
||||
class="col-span-6 lg:col-span-4">
|
||||
<div v-if="availableRoles.length > 0" class="col-span-6 lg:col-span-4">
|
||||
<InputLabel for="roles" value="Role" />
|
||||
<InputError
|
||||
:message="addTeamMemberForm.errors.role"
|
||||
class="mt-2" />
|
||||
<InputError :message="addTeamMemberForm.errors.role" class="mt-2" />
|
||||
|
||||
<div
|
||||
class="relative z-0 mt-1 border border-card-border rounded-lg cursor-pointer">
|
||||
@@ -177,9 +164,7 @@ const displayableRole = (role: string) => {
|
||||
:class="{
|
||||
'border-t border-card-border focus:border-none rounded-t-none':
|
||||
i > 0,
|
||||
'rounded-b-none':
|
||||
i !=
|
||||
Object.keys(availableRoles).length - 1,
|
||||
'rounded-b-none': i != Object.keys(availableRoles).length - 1,
|
||||
}"
|
||||
@click="addTeamMemberForm.role = role.key">
|
||||
<div
|
||||
@@ -193,18 +178,13 @@ const displayableRole = (role: string) => {
|
||||
<div
|
||||
class="text-sm text-text-primary"
|
||||
:class="{
|
||||
'font-semibold':
|
||||
addTeamMemberForm.role ==
|
||||
role.key,
|
||||
'font-semibold': addTeamMemberForm.role == role.key,
|
||||
}">
|
||||
{{ role.name }}
|
||||
</div>
|
||||
|
||||
<svg
|
||||
v-if="
|
||||
addTeamMemberForm.role ==
|
||||
role.key
|
||||
"
|
||||
v-if="addTeamMemberForm.role == role.key"
|
||||
class="ms-2 h-5 w-5 text-green-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
@@ -219,8 +199,7 @@ const displayableRole = (role: string) => {
|
||||
</div>
|
||||
|
||||
<!-- Role Description -->
|
||||
<div
|
||||
class="mt-2 text-xs text-muted text-start">
|
||||
<div class="mt-2 text-xs text-muted text-start">
|
||||
{{ role.description }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -230,9 +209,7 @@ const displayableRole = (role: string) => {
|
||||
</template>
|
||||
|
||||
<template #actions>
|
||||
<ActionMessage
|
||||
:on="addTeamMemberForm.recentlySuccessful"
|
||||
class="me-3">
|
||||
<ActionMessage :on="addTeamMemberForm.recentlySuccessful" class="me-3">
|
||||
Added.
|
||||
</ActionMessage>
|
||||
|
||||
@@ -245,11 +222,7 @@ const displayableRole = (role: string) => {
|
||||
</FormSection>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="
|
||||
team.team_invitations.length > 0 &&
|
||||
userPermissions.canAddTeamMembers
|
||||
">
|
||||
<div v-if="team.team_invitations.length > 0 && userPermissions.canAddTeamMembers">
|
||||
<SectionBorder />
|
||||
|
||||
<!-- Organization Member Invitations -->
|
||||
@@ -257,9 +230,9 @@ const displayableRole = (role: string) => {
|
||||
<template #title> Pending Organization Invitations</template>
|
||||
|
||||
<template #description>
|
||||
These people have been invited to your organization and have
|
||||
been sent an invitation email. They may join the
|
||||
organization by accepting the email invitation.
|
||||
These people have been invited to your organization and have been sent an
|
||||
invitation email. They may join the organization by accepting the email
|
||||
invitation.
|
||||
</template>
|
||||
|
||||
<!-- Pending Organization Member Invitation List -->
|
||||
@@ -344,9 +317,7 @@ const displayableRole = (role: string) => {
|
||||
|
||||
<!-- Remove Organization Member -->
|
||||
<button
|
||||
v-else-if="
|
||||
userPermissions.canRemoveTeamMembers
|
||||
"
|
||||
v-else-if="userPermissions.canRemoveTeamMembers"
|
||||
class="cursor-pointer ms-6 text-sm text-red-500"
|
||||
@click="confirmTeamMemberRemoval(user)">
|
||||
Remove
|
||||
@@ -359,9 +330,7 @@ const displayableRole = (role: string) => {
|
||||
</div>
|
||||
|
||||
<!-- Role Management Modal -->
|
||||
<DialogModal
|
||||
:show="currentlyManagingRole"
|
||||
@close="currentlyManagingRole = false">
|
||||
<DialogModal :show="currentlyManagingRole" @close="currentlyManagingRole = false">
|
||||
<template #title> Manage Role</template>
|
||||
|
||||
<template #content>
|
||||
@@ -376,25 +345,20 @@ const displayableRole = (role: string) => {
|
||||
:class="{
|
||||
'border-t border-card-border focus:border-none rounded-t-none':
|
||||
i > 0,
|
||||
'rounded-b-none':
|
||||
i !==
|
||||
Object.keys(availableRoles).length - 1,
|
||||
'rounded-b-none': i !== Object.keys(availableRoles).length - 1,
|
||||
}"
|
||||
@click="updateRoleForm.role = role.key">
|
||||
<div
|
||||
:class="{
|
||||
'opacity-50':
|
||||
updateRoleForm.role &&
|
||||
updateRoleForm.role !== role.key,
|
||||
updateRoleForm.role && updateRoleForm.role !== role.key,
|
||||
}">
|
||||
<!-- Role Name -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="text-sm text-muted"
|
||||
:class="{
|
||||
'font-semibold':
|
||||
updateRoleForm.role ===
|
||||
role.key,
|
||||
'font-semibold': updateRoleForm.role === role.key,
|
||||
}">
|
||||
{{ role.name }}
|
||||
</div>
|
||||
@@ -425,9 +389,7 @@ const displayableRole = (role: string) => {
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<SecondaryButton @click="currentlyManagingRole = false">
|
||||
Cancel
|
||||
</SecondaryButton>
|
||||
<SecondaryButton @click="currentlyManagingRole = false"> Cancel </SecondaryButton>
|
||||
|
||||
<PrimaryButton
|
||||
class="ms-3"
|
||||
@@ -440,19 +402,13 @@ const displayableRole = (role: string) => {
|
||||
</DialogModal>
|
||||
|
||||
<!-- Leave Organization Confirmation Modal -->
|
||||
<ConfirmationModal
|
||||
:show="confirmingLeavingTeam"
|
||||
@close="confirmingLeavingTeam = false">
|
||||
<ConfirmationModal :show="confirmingLeavingTeam" @close="confirmingLeavingTeam = false">
|
||||
<template #title> Leave Organization</template>
|
||||
|
||||
<template #content>
|
||||
Are you sure you would like to leave this organization?
|
||||
</template>
|
||||
<template #content> Are you sure you would like to leave this organization? </template>
|
||||
|
||||
<template #footer>
|
||||
<SecondaryButton @click="confirmingLeavingTeam = false">
|
||||
Cancel
|
||||
</SecondaryButton>
|
||||
<SecondaryButton @click="confirmingLeavingTeam = false"> Cancel </SecondaryButton>
|
||||
|
||||
<DangerButton
|
||||
class="ms-3"
|
||||
@@ -465,20 +421,15 @@ const displayableRole = (role: string) => {
|
||||
</ConfirmationModal>
|
||||
|
||||
<!-- Remove Organization Member Confirmation Modal -->
|
||||
<ConfirmationModal
|
||||
:show="!!teamMemberBeingRemoved"
|
||||
@close="teamMemberBeingRemoved = null">
|
||||
<ConfirmationModal :show="!!teamMemberBeingRemoved" @close="teamMemberBeingRemoved = null">
|
||||
<template #title> Remove Organization Member</template>
|
||||
|
||||
<template #content>
|
||||
Are you sure you would like to remove this person from the
|
||||
organization?
|
||||
Are you sure you would like to remove this person from the organization?
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<SecondaryButton @click="teamMemberBeingRemoved = null">
|
||||
Cancel
|
||||
</SecondaryButton>
|
||||
<SecondaryButton @click="teamMemberBeingRemoved = null"> Cancel </SecondaryButton>
|
||||
|
||||
<DangerButton
|
||||
class="ms-3"
|
||||
|
||||
@@ -34,9 +34,7 @@ const updateTeamName = () => {
|
||||
<FormSection @submitted="updateTeamName">
|
||||
<template #title> Organization Name</template>
|
||||
|
||||
<template #description>
|
||||
The organization's name and owner information.
|
||||
</template>
|
||||
<template #description> The organization's name and owner information. </template>
|
||||
|
||||
<template #form>
|
||||
<!-- Organization Owner Information -->
|
||||
@@ -61,9 +59,7 @@ const updateTeamName = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Link
|
||||
v-if="isBillingActivated() && canManageBilling()"
|
||||
href="/billing">
|
||||
<Link v-if="isBillingActivated() && canManageBilling()" href="/billing">
|
||||
<PrimaryButton :icon="CreditCardIcon" type="button">
|
||||
Go to Billing
|
||||
</PrimaryButton>
|
||||
@@ -96,8 +92,7 @@ const updateTeamName = () => {
|
||||
class="mt-1 block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
|
||||
<option value="" disabled>Select a currency</option>
|
||||
<option
|
||||
v-for="(currencyTranslated, currencyKey) in $page.props
|
||||
.currencies"
|
||||
v-for="(currencyTranslated, currencyKey) in $page.props.currencies"
|
||||
:key="currencyKey"
|
||||
:value="currencyKey">
|
||||
{{ currencyKey }} - {{ currencyTranslated }}
|
||||
@@ -108,13 +103,9 @@ const updateTeamName = () => {
|
||||
</template>
|
||||
|
||||
<template v-if="permissions.canUpdateTeam" #actions>
|
||||
<ActionMessage :on="form.recentlySuccessful" class="me-3">
|
||||
Saved.
|
||||
</ActionMessage>
|
||||
<ActionMessage :on="form.recentlySuccessful" class="me-3"> Saved. </ActionMessage>
|
||||
|
||||
<PrimaryButton
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing">
|
||||
<PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
|
||||
Save
|
||||
</PrimaryButton>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user