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