- Add "Set Visibility" dialog for meeting members who need visibility settings - Filter members to show only those not in contacts or without seesMe set - Implement checkbox selection with "Select All" functionality - Add reactive checkbox behavior with proper state management - Default all checkboxes to checked when dialog opens - Implement "Set Visibility" action to add contacts and set seesMe property - Add success notifications with count of affected members - Disable "Set Visibility" button when no members are selected - Use notification callbacks for data refresh - Hide "Set Visibility" buttons when no members need visibility settings - Add proper dialog state management and cleanup - Ensure dialog closes before triggering data refresh to prevent stale states The implementation provides a smooth user experience for managing member visibility settings with proper state synchronization between components.
89 lines
2.7 KiB
Vue
89 lines
2.7 KiB
Vue
<template>
|
|
<div
|
|
class="min-h-screen bg-gray-50 flex flex-col justify-start pt-2 sm:px-6 lg:px-8"
|
|
>
|
|
<div class="sm:mx-auto sm:w-full sm:max-w-md">
|
|
<div class="text-center">
|
|
<div class="mx-auto h-24 w-24 text-gray-400">
|
|
<svg
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle cx="12" cy="12" r="10" stroke-width="1.5" />
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M12 8v4m0 4h.01"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h1 class="mt-4 text-3xl font-extrabold text-gray-900">Not Found</h1>
|
|
<p class="text-sm text-gray-600">
|
|
The page you're looking for doesn't exist.
|
|
</p>
|
|
<div class="mt-1">
|
|
<button
|
|
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
|
@click="goBack"
|
|
>
|
|
<svg
|
|
class="-ml-1 mr-2 h-5 w-5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M10 19l-7-7m0 0l7-7m-7 7h18"
|
|
/>
|
|
</svg>
|
|
Go Back
|
|
</button>
|
|
</div>
|
|
<div class="mt-16">
|
|
<button
|
|
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
|
@click="goHome"
|
|
>
|
|
<svg
|
|
class="-ml-1 mr-2 h-5 w-5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2
|
|
2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1
|
|
1 0 011 1v4a1 1 0 001 1m-6 0h6"
|
|
></path>
|
|
</svg>
|
|
Go Home
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useRouter } from "vue-router";
|
|
|
|
const router = useRouter();
|
|
|
|
const goHome = () => {
|
|
router.push("/");
|
|
};
|
|
|
|
const goBack = () => {
|
|
router.go(-1);
|
|
};
|
|
</script>
|