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

refactor(components): add data-testid attribute to some components

Browse Source
This commit is contained in:
✑ ☙◦❀ The Tablet ☯ GamerGirlandCo ❀◦❧ 2024-03-16 21:18:07 -04:00
parent bf44122abe
commit 6fd6d7cbb1
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
8 changed files with 54 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/baseEditor.vue
View File

@ -11,12 +11,26 @@
wrapCol?: any;
}>();
let dark = inject<boolean>("dark");
const stop = (e, ed) => {
console.log(e.type.toUpperCase(), e, ed);
e.preventDefault();
e.cancel();
e.stopImmediatePropagation();
e.stopPropagation();
};
</script>
<template>
<ClientOnly>
<vee-field :name="props.name" v-slot="{ errorMessage, field, value }" :model-value="props.val">
<a-form-item :validate-status="!!errorMessage ? 'error' : ''" :name="props.name" :label="props.label as any" :help="errorMessage">
<vee-field :name="props.name" v-slot="{ errorMessage, field, value, setValue }" :model-value="props.val">
<a-form-item
:data-testid="$attrs['data-testid']"
:validate-status="!!errorMessage ? 'error' : ''"
:name="props.name"
:label="props.label as any"
:help="errorMessage"
>
<tinymce-editor
model-events="drag dragdrop dragend draggesture dragover dragstart drop change"
v-bind="field"
width="100%"
@change="
@ -27,6 +41,16 @@
"
:initial-value="value"
v-model:model-value="field.value"
@drag="stop"
@deactivate="(e) => console.log(e)"
@dragOver="stop"
@dragEnter="stop"
@dragEnd="stop"
@dragDrop="stop"
@draggesture="stop"
@dragGesture="stop"
@dragstart="stop"
@drop="stop"
tinymce-script-src="/tinymce/tinymce.min.js"
:init="{
...props.init,

1
components/findUser.vue
View File

@ -67,6 +67,7 @@
:options="state.data"
v-model:value="value"
:allow-clear="true"
v-bind="$attrs"
>
<template v-if="state.fetching" #notFoundContent>
<a-spin size="small" />

1
components/story/atoms/bands.vue
View File

@ -24,6 +24,7 @@
<template>
<a-form-item :validate-status="!!errorMessage ? 'error' : undefined" :help="errorMessage as any" label="Bands">
<a-select
v-bind="$attrs"
:allow-clear="true"
mode="multiple"
option-filter-prop="label"

2
components/story/atoms/characters.vue
View File

@ -18,7 +18,7 @@
</script>
<template>
<a-form-item :help="errorMessage" label="Characters" :name="bandName as string" :validate-status="!!errorMessage ? 'error' : undefined">
<a-select mode="multiple" :options="opts" v-model:value="value">
<a-select v-bind="$attrs" mode="multiple" :options="opts" v-model:value="value">
<template #removeIcon>
<i class="far fa-circle-x" />
</template>

2
components/story/atoms/genre.vue
View File

@ -10,7 +10,7 @@
</script>
<template>
<a-form-item :help="errorMessage" label="Genre(s)" :validate-status="!!errorMessage ? 'error' : undefined">
<a-select :allow-clear="true" :options="opts" v-model:value="value" mode="multiple">
<a-select v-bind="$attrs" :allow-clear="true" :options="opts" v-model:value="value" mode="multiple">
<template #removeIcon>
<i class="far fa-circle-x" />
</template>

6
components/story/atoms/pairings.vue
View File

@ -19,19 +19,19 @@
<a-form-item label="Pairings">
<a-row :gutter="5" :wrap="true" v-for="(field, idx) in fields" :key="field.key">
<Field :name="fname + 'relationships' + `[${idx}]`">
<a-select mode="multiple" :options="opts" v-model:value="field.value as string[]" @change="(val) => update(idx, val as string[])">
<a-select mode="multiple" v-bind="$attrs" :options="opts" v-model:value="field.value as string[]" @change="(val) => update(idx, val as string[])">
<template #removeIcon>
<i class="far fa-circle-x" />
</template>
</a-select>
</Field>
<a-col :span="4">
<a-button @click="(e) => remove(idx)"> - </a-button>
<a-button :data-testid="`${$attrs['data-testid']}.${idx}.remove`" @click="(e) => remove(idx)"> - </a-button>
</a-col>
</a-row>
<a-row justify="end">
<a-col :span="2">
<a-button @click="(e) => push([])"> + </a-button>
<a-button :data-testid="`${$attrs['data-testid']}.add`" @click="(e) => push([])"> + </a-button>
</a-col>
</a-row>
</a-form-item>

30
components/story/create/singleChapter.vue
View File

@ -9,6 +9,7 @@
import elCharacters from "../atoms/characters.vue";
import elPairings from "../atoms/pairings.vue";
import uploadOrPaste from "./uploadOrPaste.vue";
import { IBand } from "@models/band";
// import test1 from
let { name, data } = defineProps<{
@ -16,7 +17,7 @@
data: FormChapter;
}>();
let acData = toRef(data);
let { data: _bands } = await useApiFetch("/band/all");
let { data: _bands } = await useApiFetch<IBand[]>("/band/all");
let bands = ref(_bands);
provide("curName", name + ".");
provide("bandlist", bands);
@ -30,58 +31,59 @@
updateBands,
});
const wrapc = { span: 12 };
const tbase = `storyform.${name}.form`;
</script>
<template>
<div>
<div :data-testid="tbase">
<a-row :gutter="[10, 0]">
<a-col :span="12">
<Field :name="name + '.chapterTitle'" v-slot="{ value, field, errorMessage }">
<a-form-item :name="[field.name as string]" label="Chapter title" :help="errorMessage" :status="!!errorMessage ? 'error' : undefined">
<a-input v-bind="field" />
<a-input :data-testid="`${tbase}.title`" v-bind="field" />
</a-form-item>
</Field>
</a-col>
<a-col :span="12">
<el-bands />
<el-bands :data-testid="`${tbase}.bands`" />
</a-col>
</a-row>
<a-row :gutter="[10, 0]">
<a-col :span="12">
<base-editor v-model:val="acData.summary" :name="name + '.summary'" :wrap-col="wrapc" label="Summary" :init="bare" />
<base-editor :data-testid="`${tbase}.summary`" v-model:val="acData.summary" :name="name + '.summary'" :wrap-col="wrapc" label="Summary" :init="bare" />
</a-col>
<a-col :span="12">
<base-editor v-model:val="acData.notes" :name="name + '.notes'" :wrap-col="wrapc" label="Author's notes" :init="bare" />
<base-editor :data-testid="`${tbase}.notes`" v-model:val="acData.notes" :name="name + '.notes'" :wrap-col="wrapc" label="Author's notes" :init="bare" />
</a-col>
</a-row>
<a-row :gutter="[10, 0]">
<a-col :span="12">
<el-characters />
<el-characters :data-testid="`${tbase}.characters`" />
</a-col>
<a-col :span="12">
<el-pairings />
<el-pairings :data-testid="`${tbase}.relationships`" />
</a-col>
</a-row>
<Field :name="name + '.nsfw'" type="checkbox" :unchecked-value="false" :value="true" v-slot="{ value, field, errorMessage }">
<a-checkbox v-bind="field" v-model="field.value"> Has NSFW content </a-checkbox>
<a-checkbox :data-testid="`${tbase}.nsfw`" v-bind="field" v-model="field.value"> Has NSFW content </a-checkbox>
<error-message :name="field.name" />
</Field>
<Field :name="name + '.loggedInOnly'" type="checkbox" :unchecked-value="false" :value="true" v-slot="{ value, field, errorMessage }">
<a-checkbox v-bind="field"> Visible only to registered users </a-checkbox>
<a-checkbox :data-testid="`${tbase}.loggedInOnly`" v-bind="field"> Visible only to registered users </a-checkbox>
<error-message :name="field.name" />
</Field>
<Field :name="name + '.hidden'" type="checkbox" :unchecked-value="false" :value="true" v-slot="{ value, field, errorMessage }">
<a-tooltip>
<template #title> Hides your story from everyone except you and site admins. </template>
<a-checkbox v-bind="field"> Hidden </a-checkbox>
<a-checkbox v-bind="field" :data-testid="`${tbase}.hidden`"> Hidden </a-checkbox>
</a-tooltip>
</Field>
<a-row>
<a-col :span="24">
<genre />
<genre :data-testid="`${tbase}.genre`" />
</a-col>
</a-row>
<a-divider> Contents </a-divider>
<upload-or-paste />
<Field :name="name + '.id'" v-if="!!data.id" :model-value="data.id" />
<upload-or-paste :data-testid="`${tbase}.uploadOrPaste`" />
<Field :hidden="true" :name="name + '.id'" v-if="!!data.id" :model-value="data.id" />
</div>
</template>

8
components/story/create/uploadOrPaste.vue
View File

@ -11,14 +11,15 @@
</script>
<template>
<a-radio-group v-model:value="pvalue">
<a-radio value="pasteOrType">Paste or type content</a-radio>
<a-radio value="upload">Upload a file</a-radio>
<a-radio value="pasteOrType" :data-testid="$attrs['data-testid'] + '.radio.pasteOrType'">Paste or type content</a-radio>
<a-radio value="upload" :data-testid="$attrs['data-testid'] + '.radio.upload'">Upload a file</a-radio>
</a-radio-group>
<br />
<br />
<base-editor label="" v-if="pvalue === 'pasteOrType'" :init="story" :name="fname + 'content'" />
<base-editor :data-testid="$attrs['data-testid'] + '.type'" label="" v-if="pvalue === 'pasteOrType'" :init="story" :name="fname + 'content'" />
<a-upload
v-model:file-list="fileList"
:data-testid="$attrs['data-testid'] + '.upload'"
v-else-if="pvalue === 'upload'"
:name="fname + 'file'"
accept=".doc,.docx,.md,.markdown"
@ -32,6 +33,7 @@
let resp;
try {
resp = bap.file.response;
console.log('RESPONSE', resp);
if (resp.success) {
fileField.setValue(resp.fileName);
console.log(fileField.value);