feat: read only mode
This commit is contained in:
Jannat Patel
@@ -4,134 +4,150 @@
|
||||
{{ __('My availability') }}
|
||||
</h2>
|
||||
|
||||
<div class="">
|
||||
<div
|
||||
class="grid grid-cols-3 md:grid-cols-4 gap-4 text-sm text-ink-gray-7 mb-4"
|
||||
>
|
||||
<div>
|
||||
{{ __('Day') }}
|
||||
</div>
|
||||
<div>
|
||||
{{ __('Start Time') }}
|
||||
</div>
|
||||
<div>
|
||||
{{ __('End Time') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="evaluator.data"
|
||||
v-for="slot in evaluator.data.slots.schedule"
|
||||
class="grid grid-cols-3 md:grid-cols-4 gap-4 mb-4 group"
|
||||
>
|
||||
<FormControl
|
||||
type="select"
|
||||
:options="days"
|
||||
v-model="slot.day"
|
||||
@focusout.stop="update(slot.name, 'day', slot.day)"
|
||||
/>
|
||||
<FormControl
|
||||
type="time"
|
||||
v-model="slot.start_time"
|
||||
@focusout.stop="update(slot.name, 'start_time', slot.start_time)"
|
||||
/>
|
||||
<FormControl
|
||||
type="time"
|
||||
v-model="slot.end_time"
|
||||
@focusout.stop="update(slot.name, 'end_time', slot.end_time)"
|
||||
/>
|
||||
<X
|
||||
@click="deleteRow(slot.name)"
|
||||
class="w-6 h-auto stroke-1.5 text-red-900 rounded-md cursor-pointer p-1 bg-surface-red-2 hidden group-hover:block"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="grid grid-cols-3 md:grid-cols-4 gap-4 mb-4"
|
||||
v-show="showSlotsTemplate"
|
||||
>
|
||||
<FormControl
|
||||
type="select"
|
||||
:options="days"
|
||||
v-model="newSlot.day"
|
||||
@focusout.stop="add()"
|
||||
/>
|
||||
<FormControl
|
||||
type="time"
|
||||
v-model="newSlot.start_time"
|
||||
@focusout.stop="add()"
|
||||
/>
|
||||
<FormControl
|
||||
type="time"
|
||||
v-model="newSlot.end_time"
|
||||
@focusout.stop="add()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button @click="showSlotsTemplate = 1">
|
||||
<template #prefix>
|
||||
<Plus class="w-4 h-4 stroke-1.5 text-ink-gray-7" />
|
||||
</template>
|
||||
{{ __('Add Slot') }}
|
||||
</Button>
|
||||
<div
|
||||
v-if="readOnlyMode"
|
||||
class="flex items-center space-x-2 text-sm text-ink-gray-7 bg-surface-gray-1 px-3 py-2 rounded-md w-full text-center"
|
||||
>
|
||||
<CircleAlert class="size-4 stroke-1.5" />
|
||||
<span>
|
||||
{{
|
||||
__(
|
||||
'You cannot change the availability when the site is being updated.'
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="my-10">
|
||||
<h2 class="mb-4 text-lg font-semibold text-ink-gray-9">
|
||||
{{ __('I am unavailable') }}
|
||||
</h2>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<FormControl
|
||||
type="date"
|
||||
:label="__('From')"
|
||||
v-model="from"
|
||||
@blur="
|
||||
() => {
|
||||
updateUnavailability.submit({
|
||||
field: 'unavailable_from',
|
||||
value: from,
|
||||
})
|
||||
}
|
||||
"
|
||||
/>
|
||||
<FormControl
|
||||
type="date"
|
||||
:label="__('To')"
|
||||
v-model="to"
|
||||
@blur="
|
||||
() => {
|
||||
updateUnavailability.submit({
|
||||
field: 'unavailable_to',
|
||||
value: to,
|
||||
})
|
||||
}
|
||||
"
|
||||
/>
|
||||
<div v-else>
|
||||
<div>
|
||||
<div
|
||||
class="grid grid-cols-3 md:grid-cols-4 gap-4 text-sm text-ink-gray-7 mb-4"
|
||||
>
|
||||
<div>
|
||||
{{ __('Day') }}
|
||||
</div>
|
||||
<div>
|
||||
{{ __('Start Time') }}
|
||||
</div>
|
||||
<div>
|
||||
{{ __('End Time') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="evaluator.data"
|
||||
v-for="slot in evaluator.data.slots.schedule"
|
||||
class="grid grid-cols-3 md:grid-cols-4 gap-4 mb-4 group"
|
||||
>
|
||||
<FormControl
|
||||
type="select"
|
||||
:options="days"
|
||||
v-model="slot.day"
|
||||
@focusout.stop="update(slot.name, 'day', slot.day)"
|
||||
/>
|
||||
<FormControl
|
||||
type="time"
|
||||
v-model="slot.start_time"
|
||||
@focusout.stop="update(slot.name, 'start_time', slot.start_time)"
|
||||
/>
|
||||
<FormControl
|
||||
type="time"
|
||||
v-model="slot.end_time"
|
||||
@focusout.stop="update(slot.name, 'end_time', slot.end_time)"
|
||||
/>
|
||||
<X
|
||||
@click="deleteRow(slot.name)"
|
||||
class="w-6 h-auto stroke-1.5 text-red-900 rounded-md cursor-pointer p-1 bg-surface-red-2 hidden group-hover:block"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="grid grid-cols-3 md:grid-cols-4 gap-4 mb-4"
|
||||
v-show="showSlotsTemplate"
|
||||
>
|
||||
<FormControl
|
||||
type="select"
|
||||
:options="days"
|
||||
v-model="newSlot.day"
|
||||
@focusout.stop="add()"
|
||||
/>
|
||||
<FormControl
|
||||
type="time"
|
||||
v-model="newSlot.start_time"
|
||||
@focusout.stop="add()"
|
||||
/>
|
||||
<FormControl
|
||||
type="time"
|
||||
v-model="newSlot.end_time"
|
||||
@focusout.stop="add()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button @click="showSlotsTemplate = 1">
|
||||
<template #prefix>
|
||||
<Plus class="w-4 h-4 stroke-1.5 text-ink-gray-7" />
|
||||
</template>
|
||||
{{ __('Add Slot') }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mb-4 text-lg font-semibold text-ink-gray-9">
|
||||
{{ __('My calendar') }}
|
||||
</h2>
|
||||
<div
|
||||
v-if="evaluator.data?.calendar && evaluator.data?.is_authorized"
|
||||
class="flex items-center bg-surface-green-2 text-green-900 text-sm p-1 rounded-md mb-4 w-fit"
|
||||
>
|
||||
<Check class="h-4 w-4 stroke-1.5 mr-2" />
|
||||
{{ __('Your calendar is set.') }}
|
||||
<div class="my-10">
|
||||
<h2 class="mb-4 text-lg font-semibold text-ink-gray-9">
|
||||
{{ __('I am unavailable') }}
|
||||
</h2>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<FormControl
|
||||
type="date"
|
||||
:label="__('From')"
|
||||
v-model="from"
|
||||
@blur="
|
||||
() => {
|
||||
updateUnavailability.submit({
|
||||
field: 'unavailable_from',
|
||||
value: from,
|
||||
})
|
||||
}
|
||||
"
|
||||
/>
|
||||
<FormControl
|
||||
type="date"
|
||||
:label="__('To')"
|
||||
v-model="to"
|
||||
@blur="
|
||||
() => {
|
||||
updateUnavailability.submit({
|
||||
field: 'unavailable_to',
|
||||
value: to,
|
||||
})
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mb-4 text-lg font-semibold text-ink-gray-9">
|
||||
{{ __('My calendar') }}
|
||||
</h2>
|
||||
<div
|
||||
v-if="evaluator.data?.calendar && evaluator.data?.is_authorized"
|
||||
class="flex items-center bg-surface-green-2 text-green-900 text-sm p-1 rounded-md mb-4 w-fit"
|
||||
>
|
||||
<Check class="h-4 w-4 stroke-1.5 mr-2" />
|
||||
{{ __('Your calendar is set.') }}
|
||||
</div>
|
||||
<Button @click="() => authorizeCalendar.submit()">
|
||||
{{ __('Authorize Google Calendar Access') }}
|
||||
</Button>
|
||||
</div>
|
||||
<Button @click="() => authorizeCalendar.submit()">
|
||||
{{ __('Authorize Google Calendar Access') }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { createResource, FormControl, Button } from 'frappe-ui'
|
||||
import { createResource, FormControl, Button, Badge } from 'frappe-ui'
|
||||
import { computed, reactive, ref, onMounted, inject } from 'vue'
|
||||
import { showToast, convertToTitleCase } from '@/utils'
|
||||
import { Plus, X, Check } from 'lucide-vue-next'
|
||||
import { Plus, X, Check, CircleAlert } from 'lucide-vue-next'
|
||||
|
||||
const user = inject('$user')
|
||||
const readOnlyMode = window.read_only_mode
|
||||
|
||||
const props = defineProps({
|
||||
profile: {
|
||||
|
||||
Reference in New Issue
Block a user