add frontend test about group - #1879
This commit is contained in:
Laurent GAY
@@ -26,7 +26,7 @@
|
||||
<script lang="ts" setup>
|
||||
import BlurhashImg from "./BlurhashImg.vue";
|
||||
|
||||
import { computed, ref, onMounted, onUnmounted, watchEffect } from "vue";
|
||||
import { computed, ref, watchEffect } from "vue";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
@@ -40,15 +40,12 @@ const props = withDefaults(
|
||||
);
|
||||
|
||||
const isLoaded = ref(false);
|
||||
const observer = ref<IntersectionObserver | null>(null);
|
||||
|
||||
const wrapper = ref<HTMLElement | null>(null);
|
||||
const image = ref<HTMLImageElement | null>(null);
|
||||
|
||||
const src = computed(() => props.src);
|
||||
|
||||
const isIntersecting = ref(false);
|
||||
|
||||
const blurhashOpacity = computed(() =>
|
||||
isLoaded.value ? "opacity-0 hidden" : "opacity-100"
|
||||
);
|
||||
@@ -57,22 +54,6 @@ const imageOpacity = computed(() =>
|
||||
isLoaded.value ? "opacity-100" : "opacity-0"
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
observer.value = new IntersectionObserver((entries) => {
|
||||
isIntersecting.value = entries[0].isIntersecting;
|
||||
});
|
||||
|
||||
if (wrapper.value) {
|
||||
observer.value.observe(wrapper.value);
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (observer.value) {
|
||||
observer.value.disconnect();
|
||||
}
|
||||
});
|
||||
|
||||
watchEffect(() => {
|
||||
// Image is visible (means: has entered the viewport),
|
||||
// so start loading by setting the src attribute
|
||||
|
||||
238
tests/unit/specs/views/Event/ParticipantsView.spec.ts
Normal file
238
tests/unit/specs/views/Event/ParticipantsView.spec.ts
Normal file
@@ -0,0 +1,238 @@
|
||||
import { beforeEach, describe, it, expect, vi } from "vitest";
|
||||
import { enUS } from "date-fns/locale";
|
||||
import { routes } from "@/router";
|
||||
import { createRouter, createWebHistory, Router } from "vue-router";
|
||||
import { config, mount } from "@vue/test-utils";
|
||||
import { Oruga } from "@oruga-ui/oruga-next";
|
||||
import flushPromises from "flush-promises";
|
||||
import { getMockClient, requestHandlers } from "../../mocks/client";
|
||||
import { htmlRemoveId } from "../../common";
|
||||
import ParticipantsView from "@/views/Event/ParticipantsView.vue";
|
||||
import {
|
||||
EXPORT_EVENT_PARTICIPATIONS,
|
||||
PARTICIPANTS,
|
||||
UPDATE_PARTICIPANT,
|
||||
} from "@/graphql/event";
|
||||
import { computed } from "vue";
|
||||
|
||||
vi.mock("@/composition/apollo/actor", () => {
|
||||
return {
|
||||
useCurrentActorClient: () => {
|
||||
const error = null;
|
||||
const loading = null;
|
||||
const currentActor = computed(() => {
|
||||
return {
|
||||
id: 123,
|
||||
name: "test",
|
||||
domain: null,
|
||||
preferredUsername: "test",
|
||||
};
|
||||
});
|
||||
return { currentActor, error, loading };
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
config.global.plugins.push(Oruga);
|
||||
|
||||
let router: Router;
|
||||
|
||||
beforeEach(async () => {
|
||||
router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: routes,
|
||||
});
|
||||
|
||||
// await router.isReady();
|
||||
});
|
||||
|
||||
const mock_event_part = {
|
||||
data: {
|
||||
event: {
|
||||
__typename: "Event",
|
||||
attributedTo: null,
|
||||
id: "2",
|
||||
organizerActor: {
|
||||
__typename: "Person",
|
||||
avatar: null,
|
||||
domain: null,
|
||||
id: "2",
|
||||
name: "test",
|
||||
preferredUsername: "test",
|
||||
summary: null,
|
||||
type: "PERSON",
|
||||
url: "http://mobilizon.test/@test",
|
||||
},
|
||||
participantStats: {
|
||||
__typename: "ParticipantStats",
|
||||
going: 2,
|
||||
notApproved: 0,
|
||||
participant: 1,
|
||||
rejected: 0,
|
||||
},
|
||||
participants: {
|
||||
__typename: "PaginatedParticipantList",
|
||||
elements: [
|
||||
{
|
||||
__typename: "Participant",
|
||||
actor: {
|
||||
__typename: "Person",
|
||||
avatar: null,
|
||||
domain: null,
|
||||
id: "2",
|
||||
name: "Test",
|
||||
preferredUsername: "test",
|
||||
summary: null,
|
||||
type: "PERSON",
|
||||
url: "http://mobilizon.test/@test",
|
||||
},
|
||||
event: {
|
||||
__typename: "Event",
|
||||
id: "2",
|
||||
uuid: "67e9b659-84d9-4414-99f3-a1baaa88cf2d",
|
||||
},
|
||||
id: "c058b4ca-3fb5-4601-9f71-3940da1d4bcc",
|
||||
insertedAt: "2025-11-12T14:51:01Z",
|
||||
metadata: null,
|
||||
role: "CREATOR",
|
||||
},
|
||||
],
|
||||
total: 0,
|
||||
},
|
||||
title: "event-test",
|
||||
uuid: "67e9b659-84d9-4414-99f3-a1baaa88cf2d",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const generateWrapper = (eventExtra: any) => {
|
||||
const global_data = getMockClient([
|
||||
EXPORT_EVENT_PARTICIPATIONS,
|
||||
[PARTICIPANTS, eventExtra],
|
||||
UPDATE_PARTICIPANT,
|
||||
]);
|
||||
global_data.provide.dateFnsLocale = enUS;
|
||||
global_data.plugins = [router];
|
||||
return mount(ParticipantsView, {
|
||||
props: {
|
||||
eventId: "67e9b659-84d9-4414-99f3-a1baaa88cf2d",
|
||||
},
|
||||
global: {
|
||||
...global_data,
|
||||
stubs: {
|
||||
RouterLink: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
describe("ParticipantsView", () => {
|
||||
it("Show simple", async () => {
|
||||
const wrapper = generateWrapper(mock_event_part);
|
||||
await wrapper.vm.$nextTick();
|
||||
await flushPromises();
|
||||
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
|
||||
expect(requestHandlers.handle_0).toHaveBeenCalledTimes(0);
|
||||
expect(requestHandlers.handle_1).toHaveBeenCalledTimes(1);
|
||||
expect(requestHandlers.handle_2).toHaveBeenCalledTimes(0);
|
||||
expect(requestHandlers.handle_1).toHaveBeenCalledWith({
|
||||
limit: 10,
|
||||
page: 1,
|
||||
roles: undefined,
|
||||
uuid: "67e9b659-84d9-4414-99f3-a1baaa88cf2d",
|
||||
});
|
||||
});
|
||||
|
||||
it("Show event's group / user admin", async () => {
|
||||
const new_event = structuredClone(mock_event_part);
|
||||
new_event.data.event.attributedTo = {
|
||||
__typename: "Group",
|
||||
id: 123,
|
||||
uuid: "987654314231132",
|
||||
allowSeeParticipants: false,
|
||||
members: {
|
||||
__typename: "PaginatedMemberList",
|
||||
elements: [
|
||||
{
|
||||
__typename: "Member",
|
||||
actor: {
|
||||
__typename: "Person",
|
||||
id: "7",
|
||||
},
|
||||
id: "399a0f7a-7cfa-405d-8408-a3d1f316ab9b",
|
||||
role: "MEMBER",
|
||||
},
|
||||
{
|
||||
__typename: "Member",
|
||||
actor: {
|
||||
__typename: "Person",
|
||||
id: "123",
|
||||
},
|
||||
id: "95807e0a-7a7e-4403-90ea-d883e51e9db4",
|
||||
role: "ADMINISTRATOR",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
const wrapper = generateWrapper(new_event);
|
||||
await wrapper.vm.$nextTick();
|
||||
await flushPromises();
|
||||
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
|
||||
expect(requestHandlers.handle_0).toHaveBeenCalledTimes(0);
|
||||
expect(requestHandlers.handle_1).toHaveBeenCalledTimes(1);
|
||||
expect(requestHandlers.handle_2).toHaveBeenCalledTimes(0);
|
||||
expect(requestHandlers.handle_1).toHaveBeenCalledWith({
|
||||
limit: 10,
|
||||
page: 1,
|
||||
roles: undefined,
|
||||
uuid: "67e9b659-84d9-4414-99f3-a1baaa88cf2d",
|
||||
});
|
||||
});
|
||||
|
||||
it("Show event's group / user member", async () => {
|
||||
const new_event = structuredClone(mock_event_part);
|
||||
new_event.data.event.attributedTo = {
|
||||
__typename: "Group",
|
||||
id: 123,
|
||||
uuid: "987654314231132",
|
||||
allowSeeParticipants: true,
|
||||
members: {
|
||||
__typename: "PaginatedMemberList",
|
||||
elements: [
|
||||
{
|
||||
__typename: "Member",
|
||||
actor: {
|
||||
__typename: "Person",
|
||||
id: "123",
|
||||
},
|
||||
id: "399a0f7a-7cfa-405d-8408-a3d1f316ab9b",
|
||||
role: "MEMBER",
|
||||
},
|
||||
{
|
||||
__typename: "Member",
|
||||
actor: {
|
||||
__typename: "Person",
|
||||
id: "2",
|
||||
},
|
||||
id: "95807e0a-7a7e-4403-90ea-d883e51e9db4",
|
||||
role: "ADMINISTRATOR",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const wrapper = generateWrapper(new_event);
|
||||
await wrapper.vm.$nextTick();
|
||||
await flushPromises();
|
||||
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
|
||||
expect(requestHandlers.handle_0).toHaveBeenCalledTimes(0);
|
||||
expect(requestHandlers.handle_1).toHaveBeenCalledTimes(1);
|
||||
expect(requestHandlers.handle_2).toHaveBeenCalledTimes(0);
|
||||
expect(requestHandlers.handle_1).toHaveBeenCalledWith({
|
||||
limit: 10,
|
||||
page: 1,
|
||||
roles: undefined,
|
||||
uuid: "67e9b659-84d9-4414-99f3-a1baaa88cf2d",
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,331 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`ParticipantsView > Show event's group / user admin 1`] = `
|
||||
"<section data-v-6bee7c76="" class="container mx-auto">
|
||||
<breadcrumbs-nav data-v-6bee7c76="" links="[object Object],[object Object],[object Object]"></breadcrumbs-nav>
|
||||
<h1 data-v-6bee7c76="">Participants</h1>
|
||||
<div data-v-6bee7c76="" class="">
|
||||
<div data-v-6bee7c76="" class="">
|
||||
<div data-v-6bee7c76="" class="">
|
||||
<div data-v-6bee7c76="" data-oruga="field" class="o-field o-field--horizontal">
|
||||
<div class="o-field__horizontal-label"><label id="v-0-0" for="role-select" class="o-field__label">Status</label></div>
|
||||
<div class="o-field__horizontal-body">
|
||||
<div data-oruga="field" class="o-field o-field--filled">
|
||||
<!---->
|
||||
<div data-v-6bee7c76="" data-oruga="select" class="o-select">
|
||||
<!----><select aria-labelledby="v-0-0" id="role-select" data-oruga-input="select" class="o-select__input o-select__input--arrowed" autocomplete="off">
|
||||
<!---->
|
||||
<option data-v-6bee7c76="" value="EVERYTHING">Everything</option>
|
||||
<option data-v-6bee7c76="" value="CREATOR">Organizer</option>
|
||||
<option data-v-6bee7c76="" value="PARTICIPANT">Participant</option>
|
||||
<option data-v-6bee7c76="" value="NOT_APPROVED">Not approved</option>
|
||||
<option data-v-6bee7c76="" value="REJECTED">Rejected</option>
|
||||
</select>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-6bee7c76="" data-oruga="table" class="o-table__root">
|
||||
<div style="display: none;"><span data-v-6bee7c76="" data-oruga="table-column" data-id="table-1">Participant <!----></span><span data-v-6bee7c76="" data-oruga="table-column" data-id="table-2">Role <!----></span><span data-v-6bee7c76="" data-oruga="table-column" data-id="table-3" class="column-message">Message <!----></span><span data-v-6bee7c76="" data-oruga="table-column" data-id="table-4">Date <!----></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="o-table__wrapper">
|
||||
<table detail-key="id" class="o-table" aria-rowcount="1" aria-colcount="5">
|
||||
<!---->
|
||||
<thead>
|
||||
<tr aria-rowindex="1">
|
||||
<!---->
|
||||
<th class="o-table__th o-table__th-checkbox" aria-colindex="1">
|
||||
<div data-oruga="checkbox" class="o-checkbox o-checkbox--disabled"><input aria-label="Check all" id="v-0-2" type="checkbox" data-oruga-input="checkbox" class="o-checkbox__input" name="row_check_all" true-value="true" false-value="false" disabled="" autocomplete="off" aria-checked="false">
|
||||
<!---->
|
||||
</div>
|
||||
</th>
|
||||
<th class="o-table__th" draggable="false" aria-colindex="2"><span class="o-table__th__label">Participant</span>
|
||||
<!---->
|
||||
</th>
|
||||
<th class="o-table__th" draggable="false" aria-colindex="3"><span class="o-table__th__label">Role</span>
|
||||
<!---->
|
||||
</th>
|
||||
<th class="o-table__th" draggable="false" aria-colindex="4"><span class="o-table__th__label">Message</span>
|
||||
<!---->
|
||||
</th>
|
||||
<th class="o-table__th" draggable="false" aria-colindex="5"><span class="o-table__th__label">Date</span>
|
||||
<!---->
|
||||
</th>
|
||||
<!---->
|
||||
</tr>
|
||||
<!---->
|
||||
<!---->
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="" draggable="false" aria-rowindex="2">
|
||||
<!---->
|
||||
<td class="o-table__td o-table__td-checkbox">
|
||||
<div data-oruga="checkbox" class="o-checkbox o-checkbox--disabled"><input aria-label="Check row 0" id="v-0-3" type="checkbox" data-oruga-input="checkbox" class="o-checkbox__input" name="row_0_check" true-value="true" false-value="false" disabled="" autocomplete="off" aria-checked="false">
|
||||
<!---->
|
||||
</div>
|
||||
</td>
|
||||
<td class="o-table__td" data-label="Participant">
|
||||
<article data-v-6bee7c76="" class="flex gap-2"><span data-v-6bee7c76="" aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span>
|
||||
<div data-v-6bee7c76="">
|
||||
<div data-v-6bee7c76="" class="prose dark:prose-invert">
|
||||
<p data-v-6bee7c76=""><span data-v-6bee7c76="">test</span><br data-v-6bee7c76=""><span data-v-6bee7c76="" class="text-sm">@test</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</td>
|
||||
<td class="o-table__td" data-label="Role"><span data-v-6955ca87="" data-v-6bee7c76="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">Organizer</span></td>
|
||||
<td class="o-table__td" data-label="Message">
|
||||
<p data-v-6bee7c76="" class="has-text-grey-dark">No message</p>
|
||||
</td>
|
||||
<td class="o-table__td" data-label="Date"><span data-v-6bee7c76="" class="text-center">Wednesday, November 12, 2025<br data-v-6bee7c76="">3:51 PM</span></td>
|
||||
<!---->
|
||||
</tr>
|
||||
<transition-group-stub name="slide" appear="false" persisted="false" css="true">
|
||||
<!---->
|
||||
</transition-group-stub>
|
||||
<!---->
|
||||
</tbody>
|
||||
<!---->
|
||||
</table>
|
||||
<transition-stub name="fade" appear="false" persisted="false" css="true">
|
||||
<!---->
|
||||
</transition-stub>
|
||||
</div>
|
||||
<div class="o-table__pagination">
|
||||
<div></div>
|
||||
<div>
|
||||
<nav data-oruga="pagination" class="o-pagination o-pagination--right o-pagination--right o-pagination--small o-pagination--simple"><button type="button" role="button" disabled="" class="o-pagination__button-previous o-pagination__button--disabled o-pagination__button" aria-label="Previous page" aria-current="false"><span data-oruga="icon" class="o-icon" aria-hidden="true"><i class="mdi mdi-chevron-left mdi-24px"></i></span></button><button type="button" role="button" disabled="" class="o-pagination__button-next o-pagination__button--disabled o-pagination__button" aria-label="Next page" aria-current="false"><span data-oruga="icon" class="o-icon" aria-hidden="true"><i class="mdi mdi-chevron-right mdi-24px"></i></span></button><small class="o-pagination__info">1-0 / 0</small></nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-6bee7c76="" class="flex flex-wrap gap-2"><button data-v-6bee7c76="" data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--outlined-success"><span class="o-button__wrapper"><!----><span class="o-button__label">No participant to approve</span>
|
||||
<!----></span>
|
||||
</button><button data-v-6bee7c76="" data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--outlined-danger"><span class="o-button__wrapper"><!----><span class="o-button__label">No participant to reject</span>
|
||||
<!----></span>
|
||||
</button></div>
|
||||
</section>"
|
||||
`;
|
||||
|
||||
exports[`ParticipantsView > Show event's group / user member 1`] = `
|
||||
"<section data-v-6bee7c76="" class="container mx-auto">
|
||||
<breadcrumbs-nav data-v-6bee7c76="" links="[object Object],[object Object],[object Object]"></breadcrumbs-nav>
|
||||
<h1 data-v-6bee7c76="">Participants</h1>
|
||||
<div data-v-6bee7c76="" class="">
|
||||
<div data-v-6bee7c76="" class="">
|
||||
<div data-v-6bee7c76="" class="">
|
||||
<div data-v-6bee7c76="" data-oruga="field" class="o-field o-field--horizontal">
|
||||
<div class="o-field__horizontal-label"><label id="v-0-0" for="role-select" class="o-field__label">Status</label></div>
|
||||
<div class="o-field__horizontal-body">
|
||||
<div data-oruga="field" class="o-field o-field--filled">
|
||||
<!---->
|
||||
<div data-v-6bee7c76="" data-oruga="select" class="o-select">
|
||||
<!----><select aria-labelledby="v-0-0" id="role-select" data-oruga-input="select" class="o-select__input o-select__input--arrowed" autocomplete="off">
|
||||
<!---->
|
||||
<option data-v-6bee7c76="" value="EVERYTHING">Everything</option>
|
||||
<option data-v-6bee7c76="" value="CREATOR">Organizer</option>
|
||||
<option data-v-6bee7c76="" value="PARTICIPANT">Participant</option>
|
||||
<option data-v-6bee7c76="" value="NOT_APPROVED">Not approved</option>
|
||||
<option data-v-6bee7c76="" value="REJECTED">Rejected</option>
|
||||
</select>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-6bee7c76="" data-oruga="table" class="o-table__root">
|
||||
<div style="display: none;"><span data-v-6bee7c76="" data-oruga="table-column" data-id="table-1">Participant <!----></span><span data-v-6bee7c76="" data-oruga="table-column" data-id="table-2">Role <!----></span><span data-v-6bee7c76="" data-oruga="table-column" data-id="table-3" class="column-message">Message <!----></span><span data-v-6bee7c76="" data-oruga="table-column" data-id="table-4">Date <!----></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="o-table__wrapper">
|
||||
<table detail-key="id" class="o-table" aria-rowcount="1" aria-colcount="4">
|
||||
<!---->
|
||||
<thead>
|
||||
<tr aria-rowindex="1">
|
||||
<!---->
|
||||
<!---->
|
||||
<th class="o-table__th" draggable="false" aria-colindex="1"><span class="o-table__th__label">Participant</span>
|
||||
<!---->
|
||||
</th>
|
||||
<th class="o-table__th" draggable="false" aria-colindex="2"><span class="o-table__th__label">Role</span>
|
||||
<!---->
|
||||
</th>
|
||||
<th class="o-table__th" draggable="false" aria-colindex="3"><span class="o-table__th__label">Message</span>
|
||||
<!---->
|
||||
</th>
|
||||
<th class="o-table__th" draggable="false" aria-colindex="4"><span class="o-table__th__label">Date</span>
|
||||
<!---->
|
||||
</th>
|
||||
<!---->
|
||||
</tr>
|
||||
<!---->
|
||||
<!---->
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="" draggable="false" aria-rowindex="2">
|
||||
<!---->
|
||||
<!---->
|
||||
<td class="o-table__td" data-label="Participant">
|
||||
<article data-v-6bee7c76="" class="flex gap-2"><span data-v-6bee7c76="" aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span>
|
||||
<div data-v-6bee7c76="">
|
||||
<div data-v-6bee7c76="" class="prose dark:prose-invert">
|
||||
<p data-v-6bee7c76=""><span data-v-6bee7c76="">test</span><br data-v-6bee7c76=""><span data-v-6bee7c76="" class="text-sm">@test</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</td>
|
||||
<td class="o-table__td" data-label="Role"><span data-v-6955ca87="" data-v-6bee7c76="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">Organizer</span></td>
|
||||
<td class="o-table__td" data-label="Message">
|
||||
<p data-v-6bee7c76="" class="has-text-grey-dark">No message</p>
|
||||
</td>
|
||||
<td class="o-table__td" data-label="Date"><span data-v-6bee7c76="" class="text-center">Wednesday, November 12, 2025<br data-v-6bee7c76="">3:51 PM</span></td>
|
||||
<!---->
|
||||
</tr>
|
||||
<transition-group-stub name="slide" appear="false" persisted="false" css="true">
|
||||
<!---->
|
||||
</transition-group-stub>
|
||||
<!---->
|
||||
</tbody>
|
||||
<!---->
|
||||
</table>
|
||||
<transition-stub name="fade" appear="false" persisted="false" css="true">
|
||||
<!---->
|
||||
</transition-stub>
|
||||
</div>
|
||||
<div class="o-table__pagination">
|
||||
<div></div>
|
||||
<div>
|
||||
<nav data-oruga="pagination" class="o-pagination o-pagination--right o-pagination--right o-pagination--small o-pagination--simple"><button type="button" role="button" disabled="" class="o-pagination__button-previous o-pagination__button--disabled o-pagination__button" aria-label="Previous page" aria-current="false"><span data-oruga="icon" class="o-icon" aria-hidden="true"><i class="mdi mdi-chevron-left mdi-24px"></i></span></button><button type="button" role="button" disabled="" class="o-pagination__button-next o-pagination__button--disabled o-pagination__button" aria-label="Next page" aria-current="false"><span data-oruga="icon" class="o-icon" aria-hidden="true"><i class="mdi mdi-chevron-right mdi-24px"></i></span></button><small class="o-pagination__info">1-0 / 0</small></nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</section>"
|
||||
`;
|
||||
|
||||
exports[`ParticipantsView > Show simple 1`] = `
|
||||
"<section data-v-6bee7c76="" class="container mx-auto">
|
||||
<breadcrumbs-nav data-v-6bee7c76="" links="[object Object],[object Object],[object Object]"></breadcrumbs-nav>
|
||||
<h1 data-v-6bee7c76="">Participants</h1>
|
||||
<div data-v-6bee7c76="" class="">
|
||||
<div data-v-6bee7c76="" class="">
|
||||
<div data-v-6bee7c76="" class="">
|
||||
<div data-v-6bee7c76="" data-oruga="field" class="o-field o-field--horizontal">
|
||||
<div class="o-field__horizontal-label"><label id="v-0-0" for="role-select" class="o-field__label">Status</label></div>
|
||||
<div class="o-field__horizontal-body">
|
||||
<div data-oruga="field" class="o-field o-field--filled">
|
||||
<!---->
|
||||
<div data-v-6bee7c76="" data-oruga="select" class="o-select">
|
||||
<!----><select aria-labelledby="v-0-0" id="role-select" data-oruga-input="select" class="o-select__input o-select__input--arrowed" autocomplete="off">
|
||||
<!---->
|
||||
<option data-v-6bee7c76="" value="EVERYTHING">Everything</option>
|
||||
<option data-v-6bee7c76="" value="CREATOR">Organizer</option>
|
||||
<option data-v-6bee7c76="" value="PARTICIPANT">Participant</option>
|
||||
<option data-v-6bee7c76="" value="NOT_APPROVED">Not approved</option>
|
||||
<option data-v-6bee7c76="" value="REJECTED">Rejected</option>
|
||||
</select>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-6bee7c76="" data-oruga="table" class="o-table__root">
|
||||
<div style="display: none;"><span data-v-6bee7c76="" data-oruga="table-column" data-id="table-1">Participant <!----></span><span data-v-6bee7c76="" data-oruga="table-column" data-id="table-2">Role <!----></span><span data-v-6bee7c76="" data-oruga="table-column" data-id="table-3" class="column-message">Message <!----></span><span data-v-6bee7c76="" data-oruga="table-column" data-id="table-4">Date <!----></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="o-table__wrapper">
|
||||
<table detail-key="id" class="o-table" aria-rowcount="1" aria-colcount="5">
|
||||
<!---->
|
||||
<thead>
|
||||
<tr aria-rowindex="1">
|
||||
<!---->
|
||||
<th class="o-table__th o-table__th-checkbox" aria-colindex="1">
|
||||
<div data-oruga="checkbox" class="o-checkbox o-checkbox--disabled"><input aria-label="Check all" id="v-0-2" type="checkbox" data-oruga-input="checkbox" class="o-checkbox__input" name="row_check_all" true-value="true" false-value="false" disabled="" autocomplete="off" aria-checked="false">
|
||||
<!---->
|
||||
</div>
|
||||
</th>
|
||||
<th class="o-table__th" draggable="false" aria-colindex="2"><span class="o-table__th__label">Participant</span>
|
||||
<!---->
|
||||
</th>
|
||||
<th class="o-table__th" draggable="false" aria-colindex="3"><span class="o-table__th__label">Role</span>
|
||||
<!---->
|
||||
</th>
|
||||
<th class="o-table__th" draggable="false" aria-colindex="4"><span class="o-table__th__label">Message</span>
|
||||
<!---->
|
||||
</th>
|
||||
<th class="o-table__th" draggable="false" aria-colindex="5"><span class="o-table__th__label">Date</span>
|
||||
<!---->
|
||||
</th>
|
||||
<!---->
|
||||
</tr>
|
||||
<!---->
|
||||
<!---->
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="" draggable="false" aria-rowindex="2">
|
||||
<!---->
|
||||
<td class="o-table__td o-table__td-checkbox">
|
||||
<div data-oruga="checkbox" class="o-checkbox o-checkbox--disabled"><input aria-label="Check row 0" id="v-0-3" type="checkbox" data-oruga-input="checkbox" class="o-checkbox__input" name="row_0_check" true-value="true" false-value="false" disabled="" autocomplete="off" aria-checked="false">
|
||||
<!---->
|
||||
</div>
|
||||
</td>
|
||||
<td class="o-table__td" data-label="Participant">
|
||||
<article data-v-6bee7c76="" class="flex gap-2"><span data-v-6bee7c76="" aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span>
|
||||
<div data-v-6bee7c76="">
|
||||
<div data-v-6bee7c76="" class="prose dark:prose-invert">
|
||||
<p data-v-6bee7c76=""><span data-v-6bee7c76="">test</span><br data-v-6bee7c76=""><span data-v-6bee7c76="" class="text-sm">@test</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</td>
|
||||
<td class="o-table__td" data-label="Role"><span data-v-6955ca87="" data-v-6bee7c76="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">Organizer</span></td>
|
||||
<td class="o-table__td" data-label="Message">
|
||||
<p data-v-6bee7c76="" class="has-text-grey-dark">No message</p>
|
||||
</td>
|
||||
<td class="o-table__td" data-label="Date"><span data-v-6bee7c76="" class="text-center">Wednesday, November 12, 2025<br data-v-6bee7c76="">3:51 PM</span></td>
|
||||
<!---->
|
||||
</tr>
|
||||
<transition-group-stub name="slide" appear="false" persisted="false" css="true">
|
||||
<!---->
|
||||
</transition-group-stub>
|
||||
<!---->
|
||||
</tbody>
|
||||
<!---->
|
||||
</table>
|
||||
<transition-stub name="fade" appear="false" persisted="false" css="true">
|
||||
<!---->
|
||||
</transition-stub>
|
||||
</div>
|
||||
<div class="o-table__pagination">
|
||||
<div></div>
|
||||
<div>
|
||||
<nav data-oruga="pagination" class="o-pagination o-pagination--right o-pagination--right o-pagination--small o-pagination--simple"><button type="button" role="button" disabled="" class="o-pagination__button-previous o-pagination__button--disabled o-pagination__button" aria-label="Previous page" aria-current="false"><span data-oruga="icon" class="o-icon" aria-hidden="true"><i class="mdi mdi-chevron-left mdi-24px"></i></span></button><button type="button" role="button" disabled="" class="o-pagination__button-next o-pagination__button--disabled o-pagination__button" aria-label="Next page" aria-current="false"><span data-oruga="icon" class="o-icon" aria-hidden="true"><i class="mdi mdi-chevron-right mdi-24px"></i></span></button><small class="o-pagination__info">1-0 / 0</small></nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-6bee7c76="" class="flex flex-wrap gap-2"><button data-v-6bee7c76="" data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--outlined-success"><span class="o-button__wrapper"><!----><span class="o-button__label">No participant to approve</span>
|
||||
<!----></span>
|
||||
</button><button data-v-6bee7c76="" data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--outlined-danger"><span class="o-button__wrapper"><!----><span class="o-button__label">No participant to reject</span>
|
||||
<!----></span>
|
||||
</button></div>
|
||||
</section>"
|
||||
`;
|
||||
@@ -44,6 +44,26 @@ describe("CreateView", () => {
|
||||
await wrapper.vm.$nextTick();
|
||||
await flushPromises();
|
||||
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
|
||||
expect(requestHandlers.handle_0).toHaveBeenCalledTimes(0);
|
||||
|
||||
expect(wrapper.find("form").exists()).toBe(true);
|
||||
wrapper.find('input[id="group-display-name"]').setValue("New Group");
|
||||
wrapper.find('input[id="group-preferred-username"]').setValue("new_group");
|
||||
wrapper.find('input[id="full-address-autocomplete-1"]').setValue("");
|
||||
wrapper.find('input[name="groupVisibility"]:nth-of-type(1)').setChecked();
|
||||
wrapper.findAll('input[name="groupOpenness"]')[1].setChecked();
|
||||
wrapper.find("form").trigger("submit");
|
||||
await wrapper.vm.$nextTick();
|
||||
await flushPromises();
|
||||
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
|
||||
expect(requestHandlers.handle_0).toHaveBeenCalledTimes(1);
|
||||
expect(requestHandlers.handle_0).toHaveBeenCalledWith({
|
||||
allowSeeParticipants: true,
|
||||
manuallyApprovesFollowers: false,
|
||||
name: "New Group",
|
||||
openness: "MODERATED",
|
||||
preferredUsername: "new_group",
|
||||
summary: "",
|
||||
visibility: "PUBLIC",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { beforeEach, describe, it, expect } from "vitest";
|
||||
import { beforeEach, describe, it, expect, vi } from "vitest";
|
||||
import { enUS } from "date-fns/locale";
|
||||
import { routes } from "@/router";
|
||||
import { createRouter, createWebHistory, Router } from "vue-router";
|
||||
@@ -9,6 +9,8 @@ import { getMockClient, requestHandlers } from "../../mocks/client";
|
||||
import { htmlRemoveId } from "../../common";
|
||||
import GroupFollowers from "@/views/Group/GroupFollowers.vue";
|
||||
import { GROUP_FOLLOWERS, UPDATE_FOLLOWER } from "@/graphql/followers";
|
||||
import { MemberRole } from "@/types/enums";
|
||||
import { computed } from "vue";
|
||||
|
||||
config.global.plugins.push(Oruga);
|
||||
|
||||
@@ -23,8 +25,104 @@ beforeEach(async () => {
|
||||
// await router.isReady();
|
||||
});
|
||||
|
||||
vi.mock("@/composition/apollo/actor", () => {
|
||||
return {
|
||||
useCurrentActorClient: () => {
|
||||
const error = null;
|
||||
const loading = null;
|
||||
const currentActor = computed(() => {
|
||||
return {
|
||||
id: 123,
|
||||
name: "test",
|
||||
domain: null,
|
||||
preferredUsername: "test",
|
||||
};
|
||||
});
|
||||
return { currentActor, error, loading };
|
||||
},
|
||||
usePersonStatusGroup: () => {
|
||||
const error = null;
|
||||
const loading = null;
|
||||
const person = computed(() => {
|
||||
return {
|
||||
memberships: {
|
||||
total: 1,
|
||||
elements: [
|
||||
{
|
||||
role: MemberRole.ADMINISTRATOR,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
});
|
||||
return { person, error, loading };
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
const groupFollowersMock = {
|
||||
data: {
|
||||
group: {
|
||||
__typename: "Group",
|
||||
avatar: null,
|
||||
domain: null,
|
||||
id: "6",
|
||||
followers: {
|
||||
__typename: "PaginatedFollowerList",
|
||||
elements: [
|
||||
{
|
||||
__typename: "Member",
|
||||
actor: {
|
||||
__typename: "Person",
|
||||
avatar: null,
|
||||
domain: null,
|
||||
id: "7",
|
||||
name: "autre",
|
||||
preferredUsername: "autre",
|
||||
summary: null,
|
||||
type: "PERSON",
|
||||
url: "http://mobilizon.test/@autre",
|
||||
},
|
||||
id: "399a0f7a-7cfa-405d-8408-a3d1f316ab9b",
|
||||
insertedAt: "2025-11-12T14:57:27",
|
||||
approved: true,
|
||||
updatedAt: "2025-11-12T14:57:27",
|
||||
},
|
||||
{
|
||||
__typename: "Member",
|
||||
actor: {
|
||||
__typename: "Person",
|
||||
avatar: null,
|
||||
domain: null,
|
||||
id: "2",
|
||||
name: "Test",
|
||||
preferredUsername: "test",
|
||||
summary: null,
|
||||
type: "PERSON",
|
||||
url: "http://mobilizon.test/@test",
|
||||
},
|
||||
id: "95807e0a-7a7e-4403-90ea-d883e51e9db4",
|
||||
insertedAt: "2025-11-12T12:04:07",
|
||||
approved: true,
|
||||
updatedAt: "2025-11-12T12:04:07",
|
||||
},
|
||||
],
|
||||
total: 2,
|
||||
},
|
||||
name: "mygroup",
|
||||
preferredUsername: "mygroup",
|
||||
summary: null,
|
||||
type: "GROUP",
|
||||
url: "http://mobilizon.test/@mygroup",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const generateWrapper = () => {
|
||||
const global_data = getMockClient([GROUP_FOLLOWERS, UPDATE_FOLLOWER]);
|
||||
const global_data = getMockClient([
|
||||
[GROUP_FOLLOWERS, groupFollowersMock],
|
||||
UPDATE_FOLLOWER,
|
||||
]);
|
||||
global_data.provide.dateFnsLocale = enUS;
|
||||
global_data.plugins = [router];
|
||||
return mount(GroupFollowers, {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { beforeEach, describe, it, expect } from "vitest";
|
||||
import { beforeEach, describe, it, expect, vi } from "vitest";
|
||||
import { enUS } from "date-fns/locale";
|
||||
import { routes } from "@/router";
|
||||
import { createRouter, createWebHistory, Router } from "vue-router";
|
||||
@@ -15,6 +15,43 @@ import {
|
||||
UPDATE_MEMBER,
|
||||
APPROVE_MEMBER,
|
||||
} from "@/graphql/member";
|
||||
import { computed } from "vue";
|
||||
import { MemberRole } from "@/types/enums";
|
||||
|
||||
vi.mock("@/composition/apollo/actor", () => {
|
||||
return {
|
||||
useCurrentActorClient: () => {
|
||||
const error = null;
|
||||
const loading = null;
|
||||
const currentActor = computed(() => {
|
||||
return {
|
||||
id: 123,
|
||||
name: "test",
|
||||
domain: null,
|
||||
preferredUsername: "test",
|
||||
};
|
||||
});
|
||||
return { currentActor, error, loading };
|
||||
},
|
||||
usePersonStatusGroup: () => {
|
||||
const error = null;
|
||||
const loading = null;
|
||||
const person = computed(() => {
|
||||
return {
|
||||
memberships: {
|
||||
total: 1,
|
||||
elements: [
|
||||
{
|
||||
role: MemberRole.ADMINISTRATOR,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
});
|
||||
return { person, error, loading };
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
config.global.plugins.push(Oruga);
|
||||
|
||||
@@ -29,10 +66,66 @@ beforeEach(async () => {
|
||||
// await router.isReady();
|
||||
});
|
||||
|
||||
const groupMembersMock = {
|
||||
data: {
|
||||
group: {
|
||||
__typename: "Group",
|
||||
avatar: null,
|
||||
domain: null,
|
||||
id: "6",
|
||||
members: {
|
||||
__typename: "PaginatedMemberList",
|
||||
elements: [
|
||||
{
|
||||
__typename: "Member",
|
||||
actor: {
|
||||
__typename: "Person",
|
||||
avatar: null,
|
||||
domain: null,
|
||||
id: "7",
|
||||
name: "autre",
|
||||
preferredUsername: "autre",
|
||||
summary: null,
|
||||
type: "PERSON",
|
||||
url: "http://mobilizon.test/@autre",
|
||||
},
|
||||
id: "399a0f7a-7cfa-405d-8408-a3d1f316ab9b",
|
||||
insertedAt: "2025-11-12T14:57:27",
|
||||
role: "MEMBER",
|
||||
},
|
||||
{
|
||||
__typename: "Member",
|
||||
actor: {
|
||||
__typename: "Person",
|
||||
avatar: null,
|
||||
domain: null,
|
||||
id: "2",
|
||||
name: "Test",
|
||||
preferredUsername: "test",
|
||||
summary: null,
|
||||
type: "PERSON",
|
||||
url: "http://mobilizon.test/@test",
|
||||
},
|
||||
id: "95807e0a-7a7e-4403-90ea-d883e51e9db4",
|
||||
insertedAt: "2025-11-12T12:04:07",
|
||||
role: "ADMINISTRATOR",
|
||||
},
|
||||
],
|
||||
total: 2,
|
||||
},
|
||||
name: "mygroup",
|
||||
preferredUsername: "mygroup",
|
||||
summary: null,
|
||||
type: "GROUP",
|
||||
url: "http://mobilizon.test/@mygroup",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const generateWrapper = () => {
|
||||
const global_data = getMockClient([
|
||||
INVITE_MEMBER,
|
||||
GROUP_MEMBERS,
|
||||
[GROUP_MEMBERS, groupMembersMock],
|
||||
REMOVE_MEMBER,
|
||||
UPDATE_MEMBER,
|
||||
APPROVE_MEMBER,
|
||||
@@ -70,4 +163,81 @@ describe("GroupMembers", () => {
|
||||
roles: undefined,
|
||||
});
|
||||
});
|
||||
|
||||
it("Remove", async () => {
|
||||
const wrapper = generateWrapper();
|
||||
await wrapper.vm.$nextTick();
|
||||
await flushPromises();
|
||||
wrapper.find("button.o-button--danger").trigger("click");
|
||||
await wrapper.vm.$nextTick();
|
||||
await flushPromises();
|
||||
expect(requestHandlers.handle_0).toHaveBeenCalledTimes(0);
|
||||
expect(requestHandlers.handle_1).toHaveBeenCalledTimes(2);
|
||||
expect(requestHandlers.handle_2).toHaveBeenCalledTimes(1);
|
||||
expect(requestHandlers.handle_3).toHaveBeenCalledTimes(0);
|
||||
expect(requestHandlers.handle_4).toHaveBeenCalledTimes(0);
|
||||
expect(requestHandlers.handle_2).toHaveBeenCalledWith({
|
||||
groupId: "6",
|
||||
memberId: "399a0f7a-7cfa-405d-8408-a3d1f316ab9b",
|
||||
});
|
||||
});
|
||||
|
||||
it("Promote", async () => {
|
||||
const wrapper = generateWrapper();
|
||||
await wrapper.vm.$nextTick();
|
||||
await flushPromises();
|
||||
wrapper.findAll("button")[1].trigger("click");
|
||||
await wrapper.vm.$nextTick();
|
||||
await flushPromises();
|
||||
expect(requestHandlers.handle_0).toHaveBeenCalledTimes(0);
|
||||
expect(requestHandlers.handle_1).toHaveBeenCalledTimes(2);
|
||||
expect(requestHandlers.handle_2).toHaveBeenCalledTimes(0);
|
||||
expect(requestHandlers.handle_3).toHaveBeenCalledTimes(1);
|
||||
expect(requestHandlers.handle_4).toHaveBeenCalledTimes(0);
|
||||
expect(requestHandlers.handle_3).toHaveBeenCalledWith({
|
||||
memberId: "399a0f7a-7cfa-405d-8408-a3d1f316ab9b",
|
||||
oldRole: "MEMBER",
|
||||
role: "MODERATOR",
|
||||
});
|
||||
});
|
||||
|
||||
it("Demote", async () => {
|
||||
const wrapper = generateWrapper();
|
||||
await wrapper.vm.$nextTick();
|
||||
await flushPromises();
|
||||
wrapper.findAll("button")[3].trigger("click");
|
||||
await wrapper.vm.$nextTick();
|
||||
await flushPromises();
|
||||
expect(requestHandlers.handle_0).toHaveBeenCalledTimes(0);
|
||||
expect(requestHandlers.handle_1).toHaveBeenCalledTimes(2);
|
||||
expect(requestHandlers.handle_2).toHaveBeenCalledTimes(0);
|
||||
expect(requestHandlers.handle_3).toHaveBeenCalledTimes(1);
|
||||
expect(requestHandlers.handle_4).toHaveBeenCalledTimes(0);
|
||||
expect(requestHandlers.handle_3).toHaveBeenCalledWith({
|
||||
memberId: "95807e0a-7a7e-4403-90ea-d883e51e9db4",
|
||||
oldRole: "ADMINISTRATOR",
|
||||
role: "MODERATOR",
|
||||
});
|
||||
});
|
||||
|
||||
it("Invite", async () => {
|
||||
const wrapper = generateWrapper();
|
||||
await wrapper.vm.$nextTick();
|
||||
await flushPromises();
|
||||
wrapper
|
||||
.find('input[id="new-member-field"]')
|
||||
.setValue("invite@mobilizon.test");
|
||||
wrapper.find("form").trigger("submit");
|
||||
await wrapper.vm.$nextTick();
|
||||
await flushPromises();
|
||||
expect(requestHandlers.handle_0).toHaveBeenCalledTimes(1);
|
||||
expect(requestHandlers.handle_1).toHaveBeenCalledTimes(2);
|
||||
expect(requestHandlers.handle_2).toHaveBeenCalledTimes(0);
|
||||
expect(requestHandlers.handle_3).toHaveBeenCalledTimes(0);
|
||||
expect(requestHandlers.handle_4).toHaveBeenCalledTimes(0);
|
||||
expect(requestHandlers.handle_0).toHaveBeenCalledWith({
|
||||
groupId: "6",
|
||||
targetActorUsername: "invite@mobilizon.test",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { beforeEach, describe, it, expect } from "vitest";
|
||||
import { beforeEach, describe, it, expect, vi } from "vitest";
|
||||
import { enUS } from "date-fns/locale";
|
||||
import { routes } from "@/router";
|
||||
import { createRouter, createWebHistory, Router } from "vue-router";
|
||||
@@ -8,8 +8,45 @@ import flushPromises from "flush-promises";
|
||||
import { getMockClient, requestHandlers } from "../../mocks/client";
|
||||
import { htmlRemoveId } from "../../common";
|
||||
import GroupSettings from "@/views/Group/GroupSettings.vue";
|
||||
import { FETCH_GROUP_PUBLIC } from "@/graphql/group";
|
||||
import { FETCH_GROUP_PUBLIC, UPDATE_GROUP } from "@/graphql/group";
|
||||
import { DELETE_GROUP } from "@/graphql/group";
|
||||
import { computed } from "vue";
|
||||
import { MemberRole } from "@/types/enums";
|
||||
|
||||
vi.mock("@/composition/apollo/actor", () => {
|
||||
return {
|
||||
useCurrentActorClient: () => {
|
||||
const error = null;
|
||||
const loading = null;
|
||||
const currentActor = computed(() => {
|
||||
return {
|
||||
id: 123,
|
||||
name: "test",
|
||||
domain: null,
|
||||
preferredUsername: "test",
|
||||
};
|
||||
});
|
||||
return { currentActor, error, loading };
|
||||
},
|
||||
usePersonStatusGroup: () => {
|
||||
const error = null;
|
||||
const loading = null;
|
||||
const person = computed(() => {
|
||||
return {
|
||||
memberships: {
|
||||
total: 1,
|
||||
elements: [
|
||||
{
|
||||
role: MemberRole.ADMINISTRATOR,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
});
|
||||
return { person, error, loading };
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
config.global.plugins.push(Oruga);
|
||||
|
||||
@@ -64,6 +101,7 @@ const mock_group = {
|
||||
const generateWrapper = () => {
|
||||
const global_data = getMockClient([
|
||||
[FETCH_GROUP_PUBLIC, mock_group],
|
||||
UPDATE_GROUP,
|
||||
DELETE_GROUP,
|
||||
]);
|
||||
global_data.provide.dateFnsLocale = enUS;
|
||||
@@ -87,10 +125,29 @@ describe("GroupSettings", () => {
|
||||
await wrapper.vm.$nextTick();
|
||||
await flushPromises();
|
||||
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
|
||||
|
||||
wrapper.findAll('input[name="groupVisibility"]')[1].setChecked();
|
||||
wrapper.findAll('input[name="groupOpenness"]')[0].setChecked();
|
||||
wrapper.find("form").trigger("submit");
|
||||
await wrapper.vm.$nextTick();
|
||||
await flushPromises();
|
||||
expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
|
||||
|
||||
expect(requestHandlers.handle_0).toHaveBeenCalledTimes(1);
|
||||
expect(requestHandlers.handle_1).toHaveBeenCalledTimes(0);
|
||||
expect(requestHandlers.handle_1).toHaveBeenCalledTimes(1);
|
||||
expect(requestHandlers.handle_2).toHaveBeenCalledTimes(0);
|
||||
expect(requestHandlers.handle_0).toHaveBeenCalledWith({
|
||||
name: "my-group",
|
||||
});
|
||||
expect(requestHandlers.handle_1).toHaveBeenCalledWith({
|
||||
allowSeeParticipants: false,
|
||||
id: "123",
|
||||
manuallyApprovesFollowers: true,
|
||||
name: "ssss",
|
||||
openness: "OPEN",
|
||||
physicalAddress: null,
|
||||
summary: null,
|
||||
visibility: "UNLISTED",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -5,7 +5,11 @@ import { createRouter, createWebHistory, Router } from "vue-router";
|
||||
import { config, mount } from "@vue/test-utils";
|
||||
import { Oruga } from "@oruga-ui/oruga-next";
|
||||
import flushPromises from "flush-promises";
|
||||
import { getMockClient, requestHandlers } from "../../mocks/client";
|
||||
import {
|
||||
createMockIntersectionObserver,
|
||||
getMockClient,
|
||||
requestHandlers,
|
||||
} from "../../mocks/client";
|
||||
import { htmlRemoveId } from "../../common";
|
||||
import GroupView from "@/views/Group/GroupView.vue";
|
||||
import { FETCH_GROUP_PUBLIC } from "@/graphql/group";
|
||||
@@ -33,9 +37,46 @@ beforeEach(async () => {
|
||||
// await router.isReady();
|
||||
});
|
||||
|
||||
const mock_group = {
|
||||
data: {
|
||||
group: {
|
||||
__typename: "Group",
|
||||
avatar: null,
|
||||
banner: null,
|
||||
domain: null,
|
||||
id: "123",
|
||||
manuallyApprovesFollowers: true,
|
||||
allowSeeParticipants: false,
|
||||
members: {
|
||||
__typename: "PaginatedMemberList",
|
||||
total: 1,
|
||||
},
|
||||
name: "ssss",
|
||||
openness: "MODERATED",
|
||||
organizedEvents: {
|
||||
__typename: "PaginatedEventList",
|
||||
elements: [],
|
||||
total: 0,
|
||||
},
|
||||
physicalAddress: null,
|
||||
posts: {
|
||||
__typename: "PaginatedPostList",
|
||||
elements: [],
|
||||
total: 0,
|
||||
},
|
||||
preferredUsername: "example",
|
||||
summary: null,
|
||||
suspended: false,
|
||||
type: "GROUP",
|
||||
url: "https://mobilizon.test/@example",
|
||||
visibility: "PUBLIC",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const generateWrapper = () => {
|
||||
const global_data = getMockClient([
|
||||
FETCH_GROUP_PUBLIC,
|
||||
[FETCH_GROUP_PUBLIC, mock_group],
|
||||
JOIN_GROUP,
|
||||
GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED,
|
||||
PERSON_STATUS_GROUP,
|
||||
|
||||
@@ -120,3 +120,124 @@ exports[`CreateView > Show simple 1`] = `
|
||||
</form>
|
||||
</section>"
|
||||
`;
|
||||
|
||||
exports[`CreateView > Show simple 2`] = `
|
||||
"<section class="container mx-auto">
|
||||
<h1>Create a new group</h1>
|
||||
<form>
|
||||
<div data-oruga="field" class="o-field o-field--filled"><label id="v-0-0" for="group-display-name" class="o-field__label">Group display name</label>
|
||||
<div data-oruga="input" class="o-input o-input--expanded">
|
||||
<!----><input aria-labelledby="v-0-0" aria-required="true" required="" id="group-display-name" type="text" data-oruga-input="text" class="o-input__input" autocomplete="off">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="field"><label class="label" for="group-preferred-username">Federated Group Name</label>
|
||||
<div class="field-body">
|
||||
<div data-oruga="field" class="o-field o-field--filled">
|
||||
<!---->
|
||||
<div data-oruga="input" class="o-input o-input--expanded">
|
||||
<!----><input aria-labelledby="v-0-2" aria-describedby="v-0-3" aria-required="true" required="" pattern="[a-z0-9_]+" id="group-preferred-username" type="text" data-oruga-input="text" class="o-input__input" autocomplete="off" validation-message="Only alphanumeric lowercased characters and underscores are supported.">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<p class="control"><span class="button is-static">@localhost</span></p>
|
||||
<p id="v-0-3" class="o-field__message">Only alphanumeric lowercased characters and underscores are supported.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div data-oruga="field" class="o-field"><label id="v-0-4" for="group-summary" class="o-field__label">Description</label>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="address-autocomplete">
|
||||
<div data-oruga="field" class="o-field !-mt-2 flex" id="FullAddressAutoComplete-o-field"><label id="v-0-0-0" for="full-address-autocomplete-1" class="o-field__label">Group address</label>
|
||||
<!--v-if-->
|
||||
<div data-oruga="autocomplete" class="o-dropdown o-dropdown--expanded o-dropdown--position-auto o-autocomplete">
|
||||
<div class="o-dropdown__trigger" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-disabled="false" aria-controls="v-0-0-2" aria-labelledby="v-0-0-0">
|
||||
<div data-oruga="input" class="o-input o-input--expanded"><span data-oruga="icon" class="o-icon o-input__icon-left"><i class="mdi mdi-map-marker mdi-24px"></i></span><input aria-labelledby="v-0-0-0" class="FullAddressAutoComplete-o-autocomplete !mt-0 !h-full o-input__input o-input__input--iconspace-left o-input__input--placeholder" aria-autocomplete="list" aria-controls="v-0-0-2" enterkeyhint="enter" id="full-address-autocomplete-1" type="text" data-oruga-input="text" autocomplete="off" placeholder="e.g. 10 Rue Jangot">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!--teleport start-->
|
||||
<!---->
|
||||
<transition-stub name="fade" appear="false" persisted="false" css="true">
|
||||
<div id="v-0-0-2" tabindex="-1" class="o-dropdown__menu o-dropdown__menu--auto" style="max-height: 200px; overflow: auto; display: none;" role="listbox" aria-labelledby="v-0-0-0" aria-multiselectable="false">
|
||||
<!---->
|
||||
<!---->
|
||||
<div id="v-0-0-2-1" data-oruga="dropdown-item" data-id="dropdown-1" class="o-dropdown__item o-dropdown__item--clickable o-autocomplete__item o-autocomplete__item--empty" role="option" tabindex="-1" aria-selected="false" aria-disabled="false"></div>
|
||||
<!---->
|
||||
</div>
|
||||
</transition-stub>
|
||||
<!--teleport end-->
|
||||
</div><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--disabled reset-area !h-auto" disabled="" title="Clear address field"><span class="o-button__wrapper"><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-left"><i class="mdi mdi-close mdi-24px"></i></span>
|
||||
<!---->
|
||||
<!----></span>
|
||||
</button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<div class="field"><b class="field-label">Avatar</b>
|
||||
<div><label data-oruga="upload" class="o-upload !flex">
|
||||
<div class="o-upload__draggable" role="button" tabindex="0">
|
||||
<div class="w-100 text-center p-4 rounded-xl border-dashed border-2 border-gray-600"><span class="mx-auto flex w-fit"><span aria-hidden="true" class="material-design-icon upload-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z"><!--v-if--></path></svg></span><span class="capitalize">Click to upload Avatar</span></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div><input type="file" data-oruga-input="file" accept="image/gif,image/png,image/jpeg,image/webp">
|
||||
</label></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="field"><b class="field-label">Banner</b>
|
||||
<div><label data-oruga="upload" class="o-upload !flex">
|
||||
<div class="o-upload__draggable" role="button" tabindex="0">
|
||||
<div class="w-100 text-center p-4 rounded-xl border-dashed border-2 border-gray-600"><span class="mx-auto flex w-fit"><span aria-hidden="true" class="material-design-icon upload-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z"><!--v-if--></path></svg></span><span class="capitalize">Click to upload Banner</span></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div><input type="file" data-oruga-input="file" accept="image/gif,image/png,image/jpeg,image/webp">
|
||||
</label></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<fieldset>
|
||||
<legend class="field-label !mb-0 mt-2">Group visibility</legend>
|
||||
<div data-oruga="radio" class="o-radio o-radio--checked"><input id="v-0-6" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupVisibility" autocomplete="off" aria-checked="true" aria-labelledby="v-0-7" value="PUBLIC"><label id="v-0-7" for="v-0-6" class="o-radio__label">Visible everywhere on the web<br><small>The group will be publicly listed in search results and may be suggested in the explore section. Only public informations will be shown on it's page.</small></label></div>
|
||||
<div data-oruga="radio" class="o-radio"><input id="v-0-8" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupVisibility" autocomplete="off" aria-checked="false" aria-labelledby="v-0-9" value="UNLISTED"><label id="v-0-9" for="v-0-8" class="o-radio__label">Only accessible through link<br><small>You'll need to transmit the group URL so people may access the group's profile. The group won't be findable in Mobilizon's search or regular search engines.</small></label></div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend class="mt-2"><span class="field-label !mb-0">New members</span><span>Members will also access private sections like discussions, resources and restricted posts.</span></legend>
|
||||
<div data-oruga="field" class="o-field">
|
||||
<!---->
|
||||
<div data-oruga="radio" class="o-radio"><input aria-labelledby="v-0-10" id="v-0-12" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupOpenness" autocomplete="off" aria-checked="false" value="OPEN"><label id="v-0-10" for="v-0-12" class="o-radio__label">Anyone can join freely<br><small>Anyone wanting to be a member from your group will be able to from your group page.</small></label></div>
|
||||
<!---->
|
||||
</div>
|
||||
<div data-oruga="field" class="o-field">
|
||||
<!---->
|
||||
<div data-oruga="radio" class="o-radio o-radio--checked"><input aria-labelledby="v-0-13" id="v-0-15" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupOpenness" autocomplete="off" aria-checked="true" value="MODERATED"><label id="v-0-13" for="v-0-15" class="o-radio__label">Moderate new members<br><small>Anyone can request being a member, but an administrator needs to approve the membership.</small></label></div>
|
||||
<!---->
|
||||
</div>
|
||||
<div data-oruga="field" class="o-field">
|
||||
<!---->
|
||||
<div data-oruga="radio" class="o-radio"><input aria-labelledby="v-0-16" id="v-0-18" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupOpenness" autocomplete="off" aria-checked="false" value="INVITE_ONLY"><label id="v-0-16" for="v-0-18" class="o-radio__label">Manually invite new members<br><small>The only way for your group to get new members is if an admininistrator invites them.</small></label></div>
|
||||
<!---->
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend class="mt-2"><span class="field-label !mb-0">Followers</span><span>Followers will receive new public events and posts.</span></legend>
|
||||
<div data-oruga="checkbox" class="o-checkbox"><input id="v-0-19" type="checkbox" data-oruga-input="checkbox" class="o-checkbox__input" true-value="true" false-value="false" autocomplete="off" aria-checked="false" aria-labelledby="v-0-20"><label id="v-0-20" for="v-0-19" class="o-checkbox__label">Manually approve new followers</label></div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend class="mt-2"><span class="field-label !mb-0">Permission</span></legend>
|
||||
<div data-oruga="checkbox" class="o-checkbox o-checkbox--checked"><input id="v-0-21" type="checkbox" data-oruga-input="checkbox" class="o-checkbox__input" true-value="true" false-value="false" autocomplete="off" aria-checked="true" aria-labelledby="v-0-22"><label id="v-0-22" for="v-0-21" class="o-checkbox__label">Members can see events' participants</label></div>
|
||||
</fieldset><button data-oruga="button" type="submit" role="button" tabindex="0" class="o-button o-button--primary mt-3"><span class="o-button__wrapper"><!----><span class="o-button__label">Create my group</span>
|
||||
<!----></span>
|
||||
</button>
|
||||
</form>
|
||||
</section>"
|
||||
`;
|
||||
|
||||
@@ -2,10 +2,106 @@
|
||||
|
||||
exports[`GroupFollowers > Show simple 1`] = `
|
||||
"<div>
|
||||
<!--v-if-->
|
||||
<breadcrumbs-nav links="[object Object],[object Object],[object Object]"></breadcrumbs-nav>
|
||||
<transition-stub name="fade" appear="false" persisted="false" css="true">
|
||||
<!---->
|
||||
</transition-stub>
|
||||
<!--v-if-->
|
||||
<section class="container mx-auto section">
|
||||
<h1>Group Followers (2)</h1>
|
||||
<div data-oruga="field" class="o-field o-field--horizontal">
|
||||
<div class="o-field__horizontal-label"><label id="v-0-0" class="o-field__label">Status</label></div>
|
||||
<div class="o-field__horizontal-body">
|
||||
<div data-oruga="field" class="o-field">
|
||||
<!---->
|
||||
<div data-oruga="switch" class="o-switch o-switch--position o-switch--rounded"><input aria-labelledby="v-0-0" id="v-0-2" type="checkbox" role="switch" data-oruga-input="switch" class="o-switch__input" true-value="true" false-value="false" autocomplete="off" aria-checked="false"><label id="v-0-0" for="v-0-2" class="o-switch__label">Pending</label></div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div data-oruga="table" class="o-table__root">
|
||||
<div style="display: none;"><span data-oruga="table-column" data-id="table-1">Follower <!----></span><span data-oruga="table-column" data-id="table-2">Date <!----></span><span data-oruga="table-column" data-id="table-3">Actions <!----></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="o-table__wrapper">
|
||||
<table class="o-table" aria-rowcount="3" aria-colcount="3">
|
||||
<!---->
|
||||
<thead>
|
||||
<tr aria-rowindex="1">
|
||||
<!---->
|
||||
<!---->
|
||||
<th class="o-table__th" draggable="false" aria-colindex="1"><span class="o-table__th__label">Follower</span>
|
||||
<!---->
|
||||
</th>
|
||||
<th class="o-table__th" draggable="false" aria-colindex="2"><span class="o-table__th__label">Date</span>
|
||||
<!---->
|
||||
</th>
|
||||
<th class="o-table__th" draggable="false" aria-colindex="3"><span class="o-table__th__label">Actions</span>
|
||||
<!---->
|
||||
</th>
|
||||
<!---->
|
||||
</tr>
|
||||
<!---->
|
||||
<!---->
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="" draggable="false" aria-rowindex="2">
|
||||
<!---->
|
||||
<!---->
|
||||
<td class="o-table__td" data-label="Follower">
|
||||
<article class="flex gap-1"><span aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span>
|
||||
<div class="">
|
||||
<div class=""><span>autre</span><br><span class="">@autre</span></div>
|
||||
</div>
|
||||
</article>
|
||||
</td>
|
||||
<td class="o-table__td" data-label="Date"><span class="has-text-centered">Wednesday, November 12, 2025<br>2:57 PM</span></td>
|
||||
<td class="o-table__td" data-label="Actions">
|
||||
<div class="flex gap-2">
|
||||
<!--v-if--><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--danger"><span class="o-button__wrapper"><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-left"><i class="mdi mdi-close mdi-24px"></i></span><span class="o-button__label">Reject</span>
|
||||
<!----></span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<!---->
|
||||
</tr>
|
||||
<!---->
|
||||
<tr class="" draggable="false" aria-rowindex="3">
|
||||
<!---->
|
||||
<!---->
|
||||
<td class="o-table__td" data-label="Follower">
|
||||
<article class="flex gap-1"><span aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span>
|
||||
<div class="">
|
||||
<div class=""><span>Test</span><br><span class="">@test</span></div>
|
||||
</div>
|
||||
</article>
|
||||
</td>
|
||||
<td class="o-table__td" data-label="Date"><span class="has-text-centered">Wednesday, November 12, 2025<br>12:04 PM</span></td>
|
||||
<td class="o-table__td" data-label="Actions">
|
||||
<div class="flex gap-2">
|
||||
<!--v-if--><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--danger"><span class="o-button__wrapper"><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-left"><i class="mdi mdi-close mdi-24px"></i></span><span class="o-button__label">Reject</span>
|
||||
<!----></span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<!---->
|
||||
</tr>
|
||||
<!---->
|
||||
<!---->
|
||||
</tbody>
|
||||
<!---->
|
||||
</table>
|
||||
<transition-stub name="fade" appear="false" persisted="false" css="true">
|
||||
<!---->
|
||||
</transition-stub>
|
||||
</div>
|
||||
<div class="o-table__pagination">
|
||||
<div></div>
|
||||
<div>
|
||||
<nav data-oruga="pagination" class="o-pagination o-pagination--right o-pagination--right o-pagination--small o-pagination--simple"><button type="button" role="button" disabled="" class="o-pagination__button-previous o-pagination__button--disabled o-pagination__button" aria-label="Previous page" aria-current="false"><span data-oruga="icon" class="o-icon" aria-hidden="true"><i class="mdi mdi-chevron-left mdi-24px"></i></span></button><button type="button" role="button" disabled="" class="o-pagination__button-next o-pagination__button--disabled o-pagination__button" aria-label="Next page" aria-current="false"><span data-oruga="icon" class="o-icon" aria-hidden="true"><i class="mdi mdi-chevron-right mdi-24px"></i></span></button><small class="o-pagination__info">1-2 / 2</small></nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
@@ -2,10 +2,164 @@
|
||||
|
||||
exports[`GroupMembers > Show simple 1`] = `
|
||||
"<div>
|
||||
<!--v-if-->
|
||||
<breadcrumbs-nav links="[object Object],[object Object],[object Object]"></breadcrumbs-nav>
|
||||
<transition-stub name="fade" appear="false" persisted="false" css="true">
|
||||
<!---->
|
||||
</transition-stub>
|
||||
<!--v-if-->
|
||||
<section class="container mx-auto section">
|
||||
<h1>Group Members (2)</h1>
|
||||
<form>
|
||||
<div data-oruga="field" class="o-field o-field--horizontal" custom-class="add-relay">
|
||||
<div class="o-field__horizontal-label"><label id="v-0-0" for="new-member-field" class="o-field__label">Invite a new member</label></div>
|
||||
<div class="o-field__horizontal-body">
|
||||
<div data-oruga="field" class="o-field">
|
||||
<!---->
|
||||
<div class="o-field__body">
|
||||
<div class="o-field">
|
||||
<div data-oruga="field" class="o-field" expanded="" size="large">
|
||||
<!---->
|
||||
<div class="o-field__body">
|
||||
<div class="o-field o-field--grouped">
|
||||
<p class="control">
|
||||
<div data-oruga="input" class="o-input">
|
||||
<!----><input aria-labelledby="v-0-6" id="new-member-field" type="text" data-oruga-input="text" class="o-input__input o-input__input--placeholder" autocomplete="off" placeholder="Ex: someone@mobilizon.org">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</p>
|
||||
<p class="control"><button data-oruga="button" type="submit" role="button" tabindex="0" class="o-button o-button--primary"><span class="o-button__wrapper"><!----><span class="o-button__label">Invite member</span>
|
||||
<!----></span>
|
||||
</button></p>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</form>
|
||||
<div data-oruga="field" class="o-field o-field--horizontal my-2">
|
||||
<div class="o-field__horizontal-label"><label id="v-0-4" for="group-members-status-filter" class="o-field__label">Status</label></div>
|
||||
<div class="o-field__horizontal-body">
|
||||
<div data-oruga="field" class="o-field">
|
||||
<!---->
|
||||
<div data-oruga="select" class="o-select">
|
||||
<!----><select aria-labelledby="v-0-4" id="group-members-status-filter" data-oruga-input="select" class="o-select__input o-select__input--placeholder o-select__input--arrowed" autocomplete="off">
|
||||
<!---->
|
||||
<option>Everything</option>
|
||||
<option value="ADMINISTRATOR">Administrator</option>
|
||||
<option value="MODERATOR">Moderator</option>
|
||||
<option value="MEMBER">Member</option>
|
||||
<option value="INVITED">Invited</option>
|
||||
<option value="NOT_APPROVED">Not approved</option>
|
||||
<option value="REJECTED">Rejected</option>
|
||||
</select>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div data-oruga="table" class="o-table__root">
|
||||
<div style="display: none;"><span data-oruga="table-column" data-id="table-1">Member <!----></span><span data-oruga="table-column" data-id="table-2">Role <!----></span><span data-oruga="table-column" data-id="table-3">Date <!----></span><span data-oruga="table-column" data-id="table-4">Actions <!----></span></div>
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="o-table__wrapper">
|
||||
<table class="o-table" aria-rowcount="3" aria-colcount="4">
|
||||
<!---->
|
||||
<thead>
|
||||
<tr aria-rowindex="1">
|
||||
<!---->
|
||||
<!---->
|
||||
<th class="o-table__th" draggable="false" aria-colindex="1"><span class="o-table__th__label">Member</span>
|
||||
<!---->
|
||||
</th>
|
||||
<th class="o-table__th" draggable="false" aria-colindex="2"><span class="o-table__th__label">Role</span>
|
||||
<!---->
|
||||
</th>
|
||||
<th class="o-table__th" draggable="false" aria-colindex="3"><span class="o-table__th__label">Date</span>
|
||||
<!---->
|
||||
</th>
|
||||
<th class="o-table__th" draggable="false" aria-colindex="4"><span class="o-table__th__label">Actions</span>
|
||||
<!---->
|
||||
</th>
|
||||
<!---->
|
||||
</tr>
|
||||
<!---->
|
||||
<!---->
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="" draggable="false" aria-rowindex="2">
|
||||
<!---->
|
||||
<!---->
|
||||
<td class="o-table__td" data-label="Member">
|
||||
<article class="flex"><span aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span>
|
||||
<div class="">
|
||||
<div class="text-start"><span>autre</span><br><span class="">@autre</span></div>
|
||||
</div>
|
||||
</article>
|
||||
</td>
|
||||
<td class="o-table__td" data-label="Role"><span data-v-6955ca87="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">Member</span></td>
|
||||
<td class="o-table__td" data-label="Date"><span class="has-text-centered">Wednesday, November 12, 2025<br>2:57 PM</span></td>
|
||||
<td class="o-table__td" data-label="Actions">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<!--v-if-->
|
||||
<!--v-if--><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button"><span class="o-button__wrapper"><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-left"><i class="mdi mdi-chevron-double-up mdi-24px"></i></span><span class="o-button__label">Promote</span>
|
||||
<!----></span>
|
||||
</button>
|
||||
<!--v-if--><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--danger"><span class="o-button__wrapper"><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-left"><i class="mdi mdi-exit-to-app mdi-24px"></i></span><span class="o-button__label">Remove</span>
|
||||
<!----></span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<!---->
|
||||
</tr>
|
||||
<!---->
|
||||
<tr class="" draggable="false" aria-rowindex="3">
|
||||
<!---->
|
||||
<!---->
|
||||
<td class="o-table__td" data-label="Member">
|
||||
<article class="flex"><span aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span>
|
||||
<div class="">
|
||||
<div class="text-start"><span>Test</span><br><span class="">@test</span></div>
|
||||
</div>
|
||||
</article>
|
||||
</td>
|
||||
<td class="o-table__td" data-label="Role"><span data-v-6955ca87="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-mbz-info dark:text-black">Administrator</span></td>
|
||||
<td class="o-table__td" data-label="Date"><span class="has-text-centered">Wednesday, November 12, 2025<br>12:04 PM</span></td>
|
||||
<td class="o-table__td" data-label="Actions">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if--><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button"><span class="o-button__wrapper"><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-left"><i class="mdi mdi-chevron-double-down mdi-24px"></i></span><span class="o-button__label">Demote</span>
|
||||
<!----></span>
|
||||
</button>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</td>
|
||||
<!---->
|
||||
</tr>
|
||||
<!---->
|
||||
<!---->
|
||||
</tbody>
|
||||
<!---->
|
||||
</table>
|
||||
<transition-stub name="fade" appear="false" persisted="false" css="true">
|
||||
<!---->
|
||||
</transition-stub>
|
||||
</div>
|
||||
<div class="o-table__pagination">
|
||||
<div></div>
|
||||
<div>
|
||||
<nav data-oruga="pagination" class="o-pagination o-pagination--right o-pagination--right o-pagination--small o-pagination--simple"><button type="button" role="button" disabled="" class="o-pagination__button-previous o-pagination__button--disabled o-pagination__button" aria-label="Previous page" aria-current="false"><span data-oruga="icon" class="o-icon" aria-hidden="true"><i class="mdi mdi-chevron-left mdi-24px"></i></span></button><button type="button" role="button" disabled="" class="o-pagination__button-next o-pagination__button--disabled o-pagination__button" aria-label="Next page" aria-current="false"><span data-oruga="icon" class="o-icon" aria-hidden="true"><i class="mdi mdi-chevron-right mdi-24px"></i></span></button><small class="o-pagination__info">1-2 / 2</small></nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
@@ -6,14 +6,162 @@ exports[`GroupSettings > Show simple 1`] = `
|
||||
<transition-stub name="fade" appear="false" persisted="false" css="true">
|
||||
<!---->
|
||||
</transition-stub>
|
||||
<transition-stub name="fade" appear="false" persisted="false" css="true">
|
||||
<article data-oruga="notification" class="o-notification o-notification--top">
|
||||
<!---->
|
||||
<div class="o-notification__wrapper">
|
||||
<section class="container mx-auto mb-6">
|
||||
<form>
|
||||
<div data-oruga="field" class="o-field o-field--filled"><label id="v-0-0" for="group-settings-name" class="o-field__label">Group name</label>
|
||||
<div data-oruga="input" class="o-input o-input--expanded">
|
||||
<!----><input aria-labelledby="v-0-0" id="group-settings-name" type="text" data-oruga-input="text" class="o-input__input" autocomplete="off">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
<div class="o-notification__content">You are not an administrator for this group.</div>
|
||||
</div>
|
||||
</article>
|
||||
</transition-stub>
|
||||
<div data-oruga="field" class="o-field"><label id="v-0-2" class="o-field__label">Group short description</label>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div data-oruga="field" class="o-field"><label id="v-0-4" class="o-field__label">Avatar</label>
|
||||
<div><label data-oruga="upload" class="o-upload !flex">
|
||||
<div class="o-upload__draggable" role="button" tabindex="0">
|
||||
<div class="w-100 text-center p-4 rounded-xl border-dashed border-2 border-gray-600"><span class="mx-auto flex w-fit"><span aria-hidden="true" class="material-design-icon upload-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z"><!--v-if--></path></svg></span><span class="capitalize">Click to upload Avatar</span></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div><input aria-labelledby="v-0-4" type="file" data-oruga-input="file" accept="image/gif,image/png,image/jpeg,image/webp">
|
||||
</label></div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>
|
||||
<div data-oruga="field" class="o-field"><label id="v-0-6" class="o-field__label">Banner</label>
|
||||
<div><label data-oruga="upload" class="o-upload !flex">
|
||||
<div class="o-upload__draggable" role="button" tabindex="0">
|
||||
<div class="w-100 text-center p-4 rounded-xl border-dashed border-2 border-gray-600"><span class="mx-auto flex w-fit"><span aria-hidden="true" class="material-design-icon upload-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z"><!--v-if--></path></svg></span><span class="capitalize">Click to upload Banner</span></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div><input aria-labelledby="v-0-6" type="file" data-oruga-input="file" accept="image/gif,image/png,image/jpeg,image/webp">
|
||||
</label></div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>
|
||||
<p class="label">Group visibility</p>
|
||||
<div class="field">
|
||||
<div data-oruga="radio" class="o-radio o-radio--checked"><input id="v-0-8" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupVisibility" autocomplete="off" aria-checked="true" aria-labelledby="v-0-9" value="PUBLIC"><label id="v-0-9" for="v-0-8" class="o-radio__label">Visible everywhere on the web<br><small>The group will be publicly listed in search results and may be suggested in the explore section. Only public informations will be shown on it's page.</small></label></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div data-oruga="radio" class="o-radio"><input id="v-0-10" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupVisibility" autocomplete="off" aria-checked="false" aria-labelledby="v-0-11" value="UNLISTED"><label id="v-0-11" for="v-0-10" class="o-radio__label">Only accessible through link<br><small>You'll need to transmit the group URL so people may access the group's profile. The group won't be findable in Mobilizon's search or regular search engines.</small></label></div>
|
||||
<p class="pl-6 flex items-center gap-2"><code>https://mobilizon.test/@example</code>
|
||||
<!--v-if--><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--primary" native-type="button"><span class="o-button__wrapper"><!----><!----><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-right"><i class="mdi mdi-content-paste mdi-24px"></i></span></span></button>
|
||||
</p>
|
||||
</div>
|
||||
<p class="label">New members</p>
|
||||
<div class="field">
|
||||
<div data-oruga="radio" class="o-radio"><input id="v-0-12" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupOpenness" autocomplete="off" aria-checked="false" aria-labelledby="v-0-13" value="OPEN"><label id="v-0-13" for="v-0-12" class="o-radio__label">Anyone can join freely<br><small>Anyone wanting to be a member from your group will be able to from your group page.</small></label></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div data-oruga="radio" class="o-radio o-radio--checked"><input id="v-0-14" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupOpenness" autocomplete="off" aria-checked="true" aria-labelledby="v-0-15" value="MODERATED"><label id="v-0-15" for="v-0-14" class="o-radio__label">Moderate new members<br><small>Anyone can request being a member, but an administrator needs to approve the membership.</small></label></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div data-oruga="radio" class="o-radio"><input id="v-0-16" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupOpenness" autocomplete="off" aria-checked="false" aria-labelledby="v-0-17" value="INVITE_ONLY"><label id="v-0-17" for="v-0-16" class="o-radio__label">Manually invite new members<br><small>The only way for your group to get new members is if an admininistrator invites them.</small></label></div>
|
||||
</div>
|
||||
<div data-oruga="field" class="o-field"><label id="v-0-18" class="o-field__label" for="v-0-20">Followers</label>
|
||||
<div data-oruga="checkbox" class="o-checkbox o-checkbox--checked"><input aria-labelledby="v-0-18" aria-describedby="v-0-19" id="v-0-20" type="checkbox" data-oruga-input="checkbox" class="o-checkbox__input" true-value="true" false-value="false" autocomplete="off" aria-checked="true"><label id="v-0-18" for="v-0-20" class="o-checkbox__label">Manually approve new followers</label></div>
|
||||
<p id="v-0-19" class="o-field__message">Followers will receive new public events and posts.</p>
|
||||
</div>
|
||||
<div data-oruga="field" class="o-field"><label id="v-0-21" class="o-field__label" for="v-0-23">Permission</label>
|
||||
<div data-oruga="checkbox" class="o-checkbox"><input aria-labelledby="v-0-21" id="v-0-23" type="checkbox" data-oruga-input="checkbox" class="o-checkbox__input" true-value="true" false-value="false" autocomplete="off" aria-checked="false"><label id="v-0-21" for="v-0-23" class="o-checkbox__label">Members can see events' participants</label></div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
<div class="flex flex-wrap gap-2 my-2"><button data-oruga="button" type="submit" role="button" tabindex="0" class="o-button o-button--primary"><span class="o-button__wrapper"><!----><span class="o-button__label">Update group</span>
|
||||
<!----></span>
|
||||
</button><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--danger"><span class="o-button__wrapper"><!----><span class="o-button__label">Delete group</span>
|
||||
<!----></span>
|
||||
</button></div>
|
||||
</form>
|
||||
</section>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`GroupSettings > Show simple 2`] = `
|
||||
"<div>
|
||||
<breadcrumbs-nav links="[object Object],[object Object],[object Object]"></breadcrumbs-nav>
|
||||
<transition-stub name="fade" appear="false" persisted="false" css="true">
|
||||
<!---->
|
||||
</transition-stub>
|
||||
<section class="container mx-auto mb-6">
|
||||
<form>
|
||||
<div data-oruga="field" class="o-field o-field--filled"><label id="v-0-0" for="group-settings-name" class="o-field__label">Group name</label>
|
||||
<div data-oruga="input" class="o-input o-input--expanded">
|
||||
<!----><input aria-labelledby="v-0-0" id="group-settings-name" type="text" data-oruga-input="text" class="o-input__input" autocomplete="off">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div data-oruga="field" class="o-field"><label id="v-0-2" class="o-field__label">Group short description</label>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div data-oruga="field" class="o-field"><label id="v-0-4" class="o-field__label">Avatar</label>
|
||||
<div><label data-oruga="upload" class="o-upload !flex">
|
||||
<div class="o-upload__draggable" role="button" tabindex="0">
|
||||
<div class="w-100 text-center p-4 rounded-xl border-dashed border-2 border-gray-600"><span class="mx-auto flex w-fit"><span aria-hidden="true" class="material-design-icon upload-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z"><!--v-if--></path></svg></span><span class="capitalize">Click to upload Avatar</span></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div><input aria-labelledby="v-0-4" type="file" data-oruga-input="file" accept="image/gif,image/png,image/jpeg,image/webp">
|
||||
</label></div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>
|
||||
<div data-oruga="field" class="o-field"><label id="v-0-6" class="o-field__label">Banner</label>
|
||||
<div><label data-oruga="upload" class="o-upload !flex">
|
||||
<div class="o-upload__draggable" role="button" tabindex="0">
|
||||
<div class="w-100 text-center p-4 rounded-xl border-dashed border-2 border-gray-600"><span class="mx-auto flex w-fit"><span aria-hidden="true" class="material-design-icon upload-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z"><!--v-if--></path></svg></span><span class="capitalize">Click to upload Banner</span></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div><input aria-labelledby="v-0-6" type="file" data-oruga-input="file" accept="image/gif,image/png,image/jpeg,image/webp">
|
||||
</label></div>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>
|
||||
<p class="label">Group visibility</p>
|
||||
<div class="field">
|
||||
<div data-oruga="radio" class="o-radio"><input id="v-0-8" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupVisibility" autocomplete="off" aria-checked="false" aria-labelledby="v-0-9" value="PUBLIC"><label id="v-0-9" for="v-0-8" class="o-radio__label">Visible everywhere on the web<br><small>The group will be publicly listed in search results and may be suggested in the explore section. Only public informations will be shown on it's page.</small></label></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div data-oruga="radio" class="o-radio o-radio--checked"><input id="v-0-10" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupVisibility" autocomplete="off" aria-checked="true" aria-labelledby="v-0-11" value="UNLISTED"><label id="v-0-11" for="v-0-10" class="o-radio__label">Only accessible through link<br><small>You'll need to transmit the group URL so people may access the group's profile. The group won't be findable in Mobilizon's search or regular search engines.</small></label></div>
|
||||
<p class="pl-6 flex items-center gap-2"><code>https://mobilizon.test/@example</code>
|
||||
<!--v-if--><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--primary" native-type="button"><span class="o-button__wrapper"><!----><!----><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-right"><i class="mdi mdi-content-paste mdi-24px"></i></span></span></button>
|
||||
</p>
|
||||
</div>
|
||||
<p class="label">New members</p>
|
||||
<div class="field">
|
||||
<div data-oruga="radio" class="o-radio o-radio--checked"><input id="v-0-12" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupOpenness" autocomplete="off" aria-checked="true" aria-labelledby="v-0-13" value="OPEN"><label id="v-0-13" for="v-0-12" class="o-radio__label">Anyone can join freely<br><small>Anyone wanting to be a member from your group will be able to from your group page.</small></label></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div data-oruga="radio" class="o-radio"><input id="v-0-14" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupOpenness" autocomplete="off" aria-checked="false" aria-labelledby="v-0-15" value="MODERATED"><label id="v-0-15" for="v-0-14" class="o-radio__label">Moderate new members<br><small>Anyone can request being a member, but an administrator needs to approve the membership.</small></label></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div data-oruga="radio" class="o-radio"><input id="v-0-16" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupOpenness" autocomplete="off" aria-checked="false" aria-labelledby="v-0-17" value="INVITE_ONLY"><label id="v-0-17" for="v-0-16" class="o-radio__label">Manually invite new members<br><small>The only way for your group to get new members is if an admininistrator invites them.</small></label></div>
|
||||
</div>
|
||||
<div data-oruga="field" class="o-field"><label id="v-0-18" class="o-field__label" for="v-0-20">Followers</label>
|
||||
<div data-oruga="checkbox" class="o-checkbox o-checkbox--checked"><input aria-labelledby="v-0-18" aria-describedby="v-0-19" id="v-0-20" type="checkbox" data-oruga-input="checkbox" class="o-checkbox__input" true-value="true" false-value="false" autocomplete="off" aria-checked="true"><label id="v-0-18" for="v-0-20" class="o-checkbox__label">Manually approve new followers</label></div>
|
||||
<p id="v-0-19" class="o-field__message">Followers will receive new public events and posts.</p>
|
||||
</div>
|
||||
<div data-oruga="field" class="o-field"><label id="v-0-21" class="o-field__label" for="v-0-23">Permission</label>
|
||||
<div data-oruga="checkbox" class="o-checkbox"><input aria-labelledby="v-0-21" id="v-0-23" type="checkbox" data-oruga-input="checkbox" class="o-checkbox__input" true-value="true" false-value="false" autocomplete="off" aria-checked="false"><label id="v-0-21" for="v-0-23" class="o-checkbox__label">Members can see events' participants</label></div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
<div class="flex flex-wrap gap-2 my-2"><button data-oruga="button" type="submit" role="button" tabindex="0" class="o-button o-button--primary"><span class="o-button__wrapper"><!----><span class="o-button__label">Update group</span>
|
||||
<!----></span>
|
||||
</button><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--danger"><span class="o-button__wrapper"><!----><span class="o-button__label">Delete group</span>
|
||||
<!----></span>
|
||||
</button></div>
|
||||
</form>
|
||||
</section>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
@@ -3,23 +3,265 @@
|
||||
exports[`GroupView > Show simple 1`] = `
|
||||
"<div data-v-63850a71="" class="container mx-auto is-widescreen">
|
||||
<!--v-if-->
|
||||
<transition-stub data-v-63850a71="" name="fade" appear="false" persisted="false" css="true">
|
||||
<article data-oruga="notification" class="o-notification o-notification--danger o-notification--top">
|
||||
<!---->
|
||||
<div class="o-notification__wrapper">
|
||||
<!---->
|
||||
<div class="o-notification__content">No group found</div>
|
||||
<!--v-if-->
|
||||
<div data-v-63850a71="" class="header flex flex-col">
|
||||
<breadcrumbs-nav data-v-63850a71="" links="[object Object],[object Object]"></breadcrumbs-nav>
|
||||
<header data-v-63850a71="" class="block-container presentation">
|
||||
<div data-v-63850a71="" class="banner-container">
|
||||
<div data-v-63850a71="" class="flex-1">
|
||||
<div class="h-full w-full max-w-100 min-h-[10rem]">
|
||||
<!-- Show the placeholder as background --><canvas width="32" height="32" class="transition-opacity duration-500 opacity-100"></canvas><!-- Show the real image on the top and fade in after loading --><img class="transition-opacity duration-500 rounded-lg object-cover mx-auto h-full opacity-0" alt="" src="/img/mobilizon_default_card.png" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</transition-stub>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<div data-v-63850a71="" class="header flex flex-col">
|
||||
<div data-v-63850a71="" class="flex self-center h-0 mt-4 items-end"><span data-v-63850a71="" aria-hidden="true" class="material-design-icon account-group-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="128" height="128" viewBox="0 0 24 24"><path d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z"><!--v-if--></path></svg></span></div>
|
||||
<div data-v-63850a71="" class="title-container flex flex-1 flex-col text-center">
|
||||
<h1 data-v-63850a71="" class="m-1">ssss</h1><span data-v-63850a71="" dir="ltr" class="m-1">@example</span>
|
||||
</div>
|
||||
<div data-v-63850a71="" class="flex flex-wrap justify-center flex-col md:flex-row">
|
||||
<div data-v-63850a71="" class="flex flex-wrap gap-3 justify-center">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<div data-v-63850a71="" data-oruga="dropdown" class="o-dropdown o-dropdown--position-bottom-left" aria-role="list">
|
||||
<div class="o-dropdown__trigger" aria-haspopup="menu" aria-disabled="false" aria-controls="v-0-0"><button data-v-63850a71="" data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--primary"><span class="o-button__wrapper"><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-left"><i class="mdi mdi-rss mdi-24px"></i></span><span class="o-button__label">Follow</span><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-right"><i class="mdi mdi-menu-down mdi-24px"></i></span></span></button></div>
|
||||
<!--teleport start-->
|
||||
<!---->
|
||||
<transition-stub name="fade" appear="false" persisted="false" css="true">
|
||||
<div id="v-0-0" tabindex="-1" class="o-dropdown__menu o-dropdown__menu--bottom-left" role="menu" aria-hidden="true" style="display: none;">
|
||||
<div data-v-63850a71="" id="v-0-0-1" data-oruga="dropdown-item" data-id="dropdown-1" class="o-dropdown__item o-dropdown__item--clickable p-0" role="menuitem" tabindex="-1" aria-disabled="false" aria-role="listitem" custom="" focusable="false"><button data-v-63850a71="" class="flex gap-1 text-start py-4 px-2 w-full"><span data-v-63850a71="" aria-hidden="true" class="material-design-icon rss-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.18,15.64A2.18,2.18 0 0,1 8.36,17.82C8.36,19 7.38,20 6.18,20C5,20 4,19 4,17.82A2.18,2.18 0 0,1 6.18,15.64M4,4.44A15.56,15.56 0 0,1 19.56,20H16.73A12.73,12.73 0 0,0 4,7.27V4.44M4,10.1A9.9,9.9 0 0,1 13.9,20H11.07A7.07,7.07 0 0,0 4,12.93V10.1Z"><!--v-if--></path></svg></span>
|
||||
<div data-v-63850a71="" class="pl-2">
|
||||
<h3 data-v-63850a71="" class="font-medium text-lg">Follow</h3>
|
||||
<p data-v-63850a71="" class="whitespace-normal md:whitespace-nowrap text-sm">Get informed of the upcoming public events</p>
|
||||
<p data-v-63850a71="" class="whitespace-normal md:whitespace-nowrap text-sm italic">Follow requests will be approved by a group moderator</p>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</button></div>
|
||||
<div data-v-63850a71="" id="v-0-0-2" data-oruga="dropdown-item" data-id="dropdown-2" class="o-dropdown__item o-dropdown__item--clickable p-0 border-t border-solid" role="menuitem" tabindex="-1" aria-disabled="false" aria-role="listitem" custom="" focusable="false"><button data-v-63850a71="" class="flex gap-1 text-start py-4 px-2 w-full"><span data-v-63850a71="" aria-hidden="true" class="material-design-icon account-multiple-plus-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 17V19H7V17S7 13 13 13 19 17 19 17M16 8A3 3 0 1 0 13 11A3 3 0 0 0 16 8M19.2 13.06A5.6 5.6 0 0 1 21 17V19H24V17S24 13.55 19.2 13.06M18 5A2.91 2.91 0 0 0 17.11 5.14A5 5 0 0 1 17.11 10.86A2.91 2.91 0 0 0 18 11A3 3 0 0 0 18 5M8 10H5V7H3V10H0V12H3V15H5V12H8Z"><!--v-if--></path></svg></span>
|
||||
<div data-v-63850a71="" class="pl-2">
|
||||
<h3 data-v-63850a71="" class="font-medium text-lg">Join</h3>
|
||||
<div data-v-63850a71="">
|
||||
<p data-v-63850a71="" class="whitespace-normal md:whitespace-nowrap text-sm">Become part of the community and start organizing events</p>
|
||||
<!--v-if-->
|
||||
<p data-v-63850a71="" class="whitespace-normal md:whitespace-nowrap text-sm italic">Membership requests will be approved by a group moderator</p>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
</button></div>
|
||||
</div>
|
||||
</transition-stub>
|
||||
<!--teleport end-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if--><a data-v-63850a71="" href="/conversations?newMessage=true&groupMentions=example" class="o-button o-button--outlined" data-oruga="button" role="button" tabindex="0"><span class="o-button__wrapper"><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-left"><i class="mdi mdi-email mdi-24px"></i></span><span class="o-button__label">Contact</span>
|
||||
<!----></span>
|
||||
</a><button data-v-63850a71="" data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--outlined"><span class="o-button__wrapper"><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-left"><i class="mdi mdi-share mdi-24px"></i></span><span class="o-button__label">Share</span>
|
||||
<!----></span>
|
||||
</button>
|
||||
<div data-v-63850a71="" data-oruga="tooltip" class="o-tooltip">
|
||||
<div class="o-tooltip__trigger" aria-haspopup="true" aria-describedby="v-0-3"></div>
|
||||
<!--teleport start-->
|
||||
<transition-stub name="fade" appear="false" persisted="false" css="true">
|
||||
<div id="v-0-3" class="o-tooltip__content o-tooltip__content--right o-tooltip__content--success" role="tooltip" style="display: none;"><span class="o-tooltip__arrow o-tooltip__arrow--right o-tooltip__arrow--success"></span>URL copied to clipboard</div>
|
||||
</transition-stub>
|
||||
<!--teleport end-->
|
||||
</div>
|
||||
<div data-v-63850a71="" data-oruga="dropdown" class="o-dropdown o-dropdown--position-bottom-left" aria-role="list">
|
||||
<div class="o-dropdown__trigger" aria-haspopup="menu" aria-disabled="false" aria-controls="v-0-4"><button data-v-63850a71="" data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--outlined" aria-label="Other actions"><span class="o-button__wrapper"><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-left"><i class="mdi mdi-dots-horizontal mdi-24px"></i></span>
|
||||
<!---->
|
||||
<!----></span>
|
||||
</button></div>
|
||||
<!--teleport start-->
|
||||
<!---->
|
||||
<transition-stub name="fade" appear="false" persisted="false" css="true">
|
||||
<div id="v-0-4" tabindex="-1" class="o-dropdown__menu o-dropdown__menu--bottom-left" role="menu" aria-hidden="true" style="display: none;">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<div data-v-63850a71="" id="v-0-4-1" data-oruga="dropdown-item" data-id="dropdown-1" class="o-dropdown__item o-dropdown__item--clickable" role="menuitem" tabindex="-1" aria-disabled="false" has-link="" aria-role="menuitem"><a data-v-63850a71="" href="http://localhost:3000/@my-group/feed/atom" title="Atom feed for events and posts" class="inline-flex gap-1"><span data-v-63850a71="" aria-hidden="true" class="material-design-icon rss-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.18,15.64A2.18,2.18 0 0,1 8.36,17.82C8.36,19 7.38,20 6.18,20C5,20 4,19 4,17.82A2.18,2.18 0 0,1 6.18,15.64M4,4.44A15.56,15.56 0 0,1 19.56,20H16.73A12.73,12.73 0 0,0 4,7.27V4.44M4,10.1A9.9,9.9 0 0,1 13.9,20H11.07A7.07,7.07 0 0,0 4,12.93V10.1Z"><!--v-if--></path></svg></span> RSS/Atom Feed</a></div>
|
||||
<div data-v-63850a71="" id="v-0-4-2" data-oruga="dropdown-item" data-id="dropdown-2" class="o-dropdown__item o-dropdown__item--clickable" role="menuitem" tabindex="-1" aria-disabled="false" has-link="" aria-role="menuitem"><a data-v-63850a71="" href="http://localhost:3000/@my-group/feed/ics" title="ICS feed for events" class="inline-flex gap-1"><span data-v-63850a71="" aria-hidden="true" class="material-design-icon calendar-sync-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18,11V12.5C21.19,12.5 23.09,16.05 21.33,18.71L20.24,17.62C21.06,15.96 19.85,14 18,14V15.5L15.75,13.25L18,11M18,22V20.5C14.81,20.5 12.91,16.95 14.67,14.29L15.76,15.38C14.94,17.04 16.15,19 18,19V17.5L20.25,19.75L18,22M19,3H18V1H16V3H8V1H6V3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H14C13.36,20.45 12.86,19.77 12.5,19H5V8H19V10.59C19.71,10.7 20.39,10.94 21,11.31V5A2,2 0 0,0 19,3Z"><!--v-if--></path></svg></span> ICS/WebCal Feed</a></div>
|
||||
<hr data-v-63850a71="" role="presentation" class="dropdown-divider">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</transition-stub>
|
||||
<!--teleport end-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
<div data-v-63850a71="" class="grid grid-cols-1 md:grid-cols-3 gap-2 mb-2">
|
||||
<!-- Public thing: Members -->
|
||||
<section data-v-63850a71="" class="flex flex-col border-2 border-yellow-1 rounded-lg">
|
||||
<div class="flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title">
|
||||
<div class="flex flex-1 gap-1"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-account-group 36"></i></span>
|
||||
<h2 class="text-2xl font-medium mt-0">Members</h2>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex-1 min-h-40">
|
||||
<div data-v-63850a71="" class="flex flex-col justify-center h-full">
|
||||
<!--v-if-->
|
||||
<div data-v-63850a71="" class="">
|
||||
<h2 data-v-63850a71="" class="text-center">1 members</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-end p-2"></div>
|
||||
</section><!-- Public thing: About -->
|
||||
<section data-v-63850a71="" class="flex flex-col border-2 border-yellow-1 rounded-lg">
|
||||
<div class="flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title">
|
||||
<div class="flex flex-1 gap-1"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-information 36"></i></span>
|
||||
<h2 class="text-2xl font-medium mt-0">About</h2>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex-1 min-h-40">
|
||||
<div data-v-63850a71="" class="flex flex-col items-center mt-20 mb-10 text-center" role="note"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-information 48"></i></span>
|
||||
<h2 class="mb-3">
|
||||
<!-- @slot Mandatory title -->No about content yet
|
||||
</h2>
|
||||
<p class="" style="display: none;">
|
||||
<!-- @slot Optional description -->
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-end p-2"></div>
|
||||
</section><!-- Public thing: Location -->
|
||||
<section data-v-63850a71="" class="flex flex-col border-2 border-yellow-1 rounded-lg">
|
||||
<div class="flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title">
|
||||
<div class="flex flex-1 gap-1"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-earth 36"></i></span>
|
||||
<h2 class="text-2xl font-medium mt-0">Location</h2>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex-1 min-h-40">
|
||||
<div data-v-63850a71="" class="flex flex-col items-center mt-20 mb-10 text-center" role="note"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-earth 48"></i></span>
|
||||
<h2 class="mb-3">
|
||||
<!-- @slot Mandatory title -->No location yet
|
||||
</h2>
|
||||
<p class="" style="display: none;">
|
||||
<!-- @slot Optional description -->
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-end p-2"></div>
|
||||
</section>
|
||||
</div>
|
||||
<div data-v-63850a71="">
|
||||
<div data-v-63850a71="" class="grid grid-cols-1 gap-2 mb-2 md:grid-cols-2">
|
||||
<!-- Public thing: Long Events -->
|
||||
<!--v-if-->
|
||||
<!-- Public thing: Events -->
|
||||
<section data-v-63850a71="" class="flex flex-col border-2 border-yellow-1 rounded-lg">
|
||||
<div class="flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title">
|
||||
<div class="flex flex-1 gap-1"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-calendar 36"></i></span>
|
||||
<h2 class="text-2xl font-medium mt-0">Events</h2>
|
||||
</div><a href="/@example/events" class="self-center">View all</a>
|
||||
</div>
|
||||
<div class="flex-1 min-h-40">
|
||||
<div class="flex flex-col items-center mt-20 mb-10" role="note"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-calendar 48"></i></span>
|
||||
<h2 class="mb-3">
|
||||
<!-- @slot Mandatory title -->No public upcoming events
|
||||
</h2>
|
||||
<p class="" style="display: none;">
|
||||
<!-- @slot Optional description -->
|
||||
</p>
|
||||
</div><!-- <o-skeleton animated v-else></o-skeleton> -->
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-end p-2"><a href="/@example/events?showPassedEvents=true" class="o-button o-button--text button" data-oruga="button" role="button" tabindex="0"><span class="o-button__wrapper"><!----><span class="o-button__label">Past events</span>
|
||||
<!----></span>
|
||||
</a>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</section><!-- Public thing: Posts -->
|
||||
<section data-v-63850a71="" class="flex flex-col border-2 border-yellow-1 rounded-lg">
|
||||
<div class="flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title">
|
||||
<div class="flex flex-1 gap-1"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-bullhorn 36"></i></span>
|
||||
<h2 class="text-2xl font-medium mt-0">Announcements</h2>
|
||||
</div><a href="/@example/p" class="self-center">View all</a>
|
||||
</div>
|
||||
<div class="flex-1 min-h-40">
|
||||
<div class="p-2">
|
||||
<div class="flex flex-col items-center mt-20 mb-10" role="note"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-bullhorn 48"></i></span>
|
||||
<h2 class="mb-3">
|
||||
<!-- @slot Mandatory title -->No posts yet
|
||||
</h2>
|
||||
<p class="" style="display: none;">
|
||||
<!-- @slot Optional description -->
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-end p-2"></div>
|
||||
</section>
|
||||
</div>
|
||||
<div data-v-63850a71="" class="grid grid-cols-1 gap-2 mb-2 md:grid-cols-2">
|
||||
<!-- Private thing: Group discussions -->
|
||||
<!--v-if-->
|
||||
<!-- Private thing: Resources -->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-63850a71="" class="my-2">
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<div data-v-63850a71="" class="public-container flex flex-col">
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--teleport start-->
|
||||
<transition-stub name="zoom-out" appear="false" persisted="false" css="true">
|
||||
<div data-oruga="modal" class="o-modal" tabindex="-1" role="dialog" aria-modal="false" style="display: none;">
|
||||
<div class="o-modal__overlay" tabindex="-1"></div>
|
||||
<div class="o-modal__content" style="max-width: 960px;">
|
||||
<div data-v-e0cceef3="" data-v-63850a71="" class="p-2">
|
||||
<header data-v-e0cceef3="" class="mb-3">
|
||||
<h2 data-v-e0cceef3="" class="text-2xl">Report this group</h2>
|
||||
</header>
|
||||
<section data-v-e0cceef3="">
|
||||
<div data-v-e0cceef3="" class="flex gap-1 flex-row mb-3 bg-mbz-yellow dark:text-black p-3 rounded items-center"><span data-v-e0cceef3="" data-oruga="icon" class="o-icon o-icon--warning hidden md:block flex-1"><i class="mdi mdi-alert 48"></i></span>
|
||||
<p data-v-e0cceef3="">The report will be sent to the moderators of your instance. You can explain why you report this content below.</p>
|
||||
</div>
|
||||
<div data-v-e0cceef3="">
|
||||
<!--v-if-->
|
||||
<div data-v-e0cceef3="" data-oruga="field" class="o-field"><label id="v-0-7" for="additional-comments" class="o-field__label">Additional comments</label>
|
||||
<div data-v-e0cceef3="" data-oruga="input" class="o-input o-input--expanded o-input--textarea">
|
||||
<!----><textarea aria-labelledby="v-0-7" autofocus="" id="additional-comments" data-oruga-input="textarea" class="o-input__input o-input__input--placeholder"></textarea>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</section>
|
||||
<footer data-v-e0cceef3="" class="flex gap-2 py-3"><button data-v-e0cceef3="" data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--outlined"><span class="o-button__wrapper"><!----><span class="o-button__label">Cancel</span>
|
||||
<!----></span>
|
||||
</button><button data-v-e0cceef3="" data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--primary"><span class="o-button__wrapper"><!----><span class="o-button__label">Send the report</span>
|
||||
<!----></span>
|
||||
</button></footer>
|
||||
</div><button type="button" class="o-modal__close" aria-label="Close" data-oruga="close" style="display: none;"><span data-oruga="icon" class="o-icon o-icon--medium"><i class="mdi mdi-close mdi-36px"></i></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</transition-stub>
|
||||
<!--teleport end-->
|
||||
<!--teleport start-->
|
||||
<transition-stub name="zoom-out" appear="false" persisted="false" css="true">
|
||||
<div data-oruga="modal" class="o-modal" tabindex="-1" role="dialog" aria-modal="false" style="display: none;">
|
||||
<div class="o-modal__overlay" tabindex="-1"></div>
|
||||
<div class="o-modal__content" style="max-width: 960px;">
|
||||
<!----><button type="button" class="o-modal__close" aria-label="Close" data-oruga="close" style="display: none;"><span data-oruga="icon" class="o-icon o-icon--medium"><i class="mdi mdi-close mdi-36px"></i></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</transition-stub>
|
||||
<!--teleport end-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user