rockfic/next
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(components): wrap draggable in client-only

Browse Source
This commit is contained in:
☙◦ The Tablet ❀ GamerGirlandCo ◦❧ 2024-03-16 15:29:21 -04:00
parent 85169dba3e
commit b10928fcf7
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
1 changed files with 70 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
components/story/create/storyForm.vue
View File

@ -12,6 +12,8 @@
import singleChapter from "./singleChapter.vue";
import icon from "~/components/icon.vue";
const router = useRouter();
const props = defineProps<{
canDraft?: boolean;
endpoint: string;
@ -47,6 +49,9 @@
method: "post",
body: values,
});
if (dat.success) {
await router.push(`/story/${dat.story._id}/1`);
}
}
} else {
await autoEdit(values, props.endpoint, props.endpointMethod);
@ -107,70 +112,74 @@
<a-divider />
<!-- <test1/> -->
<field-array name="chapters" v-slot="{ fields, push, remove, move }">
<div>
<div v-for="(element, index) in values.chapters">
<client-only>
<Teleport :to="`#chapter-\\[${element.uuidKey}\\]`">
<a-collapse v-model:active-key="expandos" collapsible="icon">
<template #expandIcon="{ isActive }">
<span :data-testid="`storyform.chapters[${index}].collapse`"> <RightOutlined :rotate="isActive ? 90 : undefined" /></span>
</template>
<a-collapse-panel :key="`${element.uuidKey}`">
<template #header>
<div :data-testid="`storyform.chapters[${index}].header`" style="display: flex; justify-content: space-between">
<span :data-testid="`storyform.chapters[${index}].titleEl`">{{ values.chapters[index]?.chapterTitle || "Untitled" }}</span>
<a-button
@click="
(e) => {
// let localFields = toRaw(fields);
// log.debug(`${index} | ${element.index}`);
// log.debug('fields->', localFields);
data.chapters.splice(index, 1);
remove(index);
// todo renumber
// renumber()
}
"
>
<icon istyle="regular" name="trash" />
</a-button>
</div>
<client-only>
<div>
<div v-for="(element, index) in data.chapters">
<client-only>
<Teleport :to="`#chapter-\\[${element.uuidKey}\\]`">
<a-collapse v-model:active-key="expandos" collapsible="icon">
<template #expandIcon="{ isActive }">
<span :data-testid="`storyform.chapters[${index}].collapse`"> <RightOutlined :rotate="isActive ? 90 : undefined" /></span>
</template>
<single-chapter :data="element" :name="`chapters[${index}]`" />
</a-collapse-panel>
</a-collapse>
</Teleport>
</client-only>
<a-collapse-panel :key="`${element.uuidKey}`">
<template #header>
<div :data-testid="`storyform.chapters[${index}].header`" style="display: flex; justify-content: space-between">
<span :data-testid="`storyform.chapters[${index}].titleEl`">{{ values.chapters[index]?.chapterTitle || "Untitled" }}</span>
<a-button
@click="
(e) => {
// let localFields = toRaw(fields);
// log.debug(`${index} | ${element.index}`);
// log.debug('fields->', localFields);
data.chapters.splice(index, 1);
remove(index);
// todo renumber
// renumber()
}
"
>
<icon istyle="regular" name="trash" />
</a-button>
</div>
</template>
<single-chapter :data="element" :name="`chapters[${index}]`" />
</a-collapse-panel>
</a-collapse>
</Teleport>
</client-only>
</div>
</div>
</div>
<draggable
:component-data="{ type: 'transtion-group', 'data-testid': 'storyform.chapters' }"
@start="drag = true"
@end="drag = false"
v-model="values.chapters"
tag="div"
data-testid="storyform.chapters"
item-key="uuidKey"
@change="
(e) => {
console.log(e);
if (e.moved) {
console.debug(e.moved);
move(e.moved.oldIndex, e.moved.newIndex);
data.chapters = lmove(data.chapters, e.moved.oldIndex, e.moved.newIndex);
// w.tinymce.remove();
// log.debug(toRaw(acData.chapters.map((a) => toRaw(a))));
</client-only>
<client-only>
<draggable
:component-data="{ type: 'transtion-group', 'data-testid': 'storyform.chapters' }"
@start="drag = true"
@end="drag = false"
v-model="values.chapters"
tag="div"
data-testid="storyform.chapters"
item-key="uuidKey"
@change="
(e) => {
console.log(e);
if (e.moved) {
console.debug(e.moved);
move(e.moved.oldIndex, e.moved.newIndex);
data.chapters = lmove(data.chapters, e.moved.oldIndex, e.moved.newIndex);
// w.tinymce.remove();
// log.debug(toRaw(acData.chapters.map((a) => toRaw(a))));
}
}
}
"
>
<template #item="{ element, index }">
<div :id="`chapter-[${element.uuidKey}]`"></div>
</template>
<template #footer>
<a-button data-testid="storyform.addChapter" :onClick="pushHOF(push)"> Add chapter </a-button>
</template>
</draggable>
"
>
<template #item="{ element, index }">
<div :id="`chapter-[${element.uuidKey}]`"></div>
</template>
<template #footer>
<a-button data-testid="storyform.addChapter" :onClick="pushHOF(push)"> Add chapter </a-button>
</template>
</draggable>
</client-only>
</field-array>
<a-button type="primary" html-type="submit">{{ submitText || "Post" }}</a-button>
<a-button html-type="submit" v-if="canDraft" @click="() => (otherBtnInvoked = true)"> Save for Later </a-button>