fix(#771): hide KtComment reply btn in readOnly mode (#775)

* refact(kt-comment): move dataTest from sharedSchema to propsSchema to make it clear that it is optional only externally in Props * feat(kt-comment): introduce isReadOnly prop to KtComment to hide all comments actions buttons. KtCommentInput not supperted. --------- Co-authored-by: Santiago Balladares <[email protected]>
3YOURMIND · Jun 20, 2023 · 916016e · 916016e
1 parent 167c7a7
commit 916016e
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 7 deletions.
diff --git a/packages/documentation/pages/usage/components/comment.vue b/packages/documentation/pages/usage/components/comment.vue
@@ -20,6 +20,7 @@
 					:allowInternal="settings.allowInternal"
 					class="mb-block"
 					:dataTest="settings.dataTest"
+					:isReadOnly="settings.isReadOnly"
 					:tabIndex="settings.tabIndex"
 					:userAvatar="currentUser.avatar"
 					@add="handleAdd($event)"
@@ -62,6 +63,13 @@
 							label="allowInternal"
 							type="switch"
 						/>
+						<KtFieldToggle
+							formKey="isReadOnly"
+							helpText="Hides KtComment action buttons"
+							isOptional
+							label="isReadOnly"
+							type="switch"
+						/>
 					</div>
 					<div>
 						<h4>Texts</h4>
@@ -77,6 +85,7 @@
 	v-bind=&quot;comment&quot;
 	allowInternal
 	dataTest=&quot;comments&quot;
+	:isReadOnly=&quot;false&quot;
 	:tabIndex=&quot;1&quot;
 	:userAvatar=&quot;currentUser.avatar&quot;
 	@add=&quot;handleAdd($event)&quot;
@@ -206,6 +215,7 @@
 					class="mb-block"
 					:dangerouslyOverrideParser="dangerouslyOverrideParser"
 					:dataTest="settings.dataTest"
+					:isReadOnly="settings.isReadOnly"
 					:postEscapeParser="postEscapeParser"
 					:tabIndex="settings.tabIndex"
 					:userAvatar="currentUser.avatar"
@@ -330,12 +340,14 @@ export default defineComponent({
 		const settings = ref<{
 			allowInternal: Kotti.FieldToggle.Value
 			dataTest: Kotti.FieldText.Value
+			isReadOnly: Kotti.FieldToggle.Value
 			locale: Kotti.I18n.SupportedLanguages
 			placeholder: Kotti.FieldText.Value
 			tabIndex: Kotti.FieldNumber.Value
 		}>({
 			allowInternal: true,
 			dataTest: null,
+			isReadOnly: false,
 			locale: 'en-US',
 			placeholder: 'Add a comment',
 			tabIndex: null,

diff --git a/packages/kotti-ui/source/kotti-comment/KtComment.vue b/packages/kotti-ui/source/kotti-comment/KtComment.vue
@@ -10,13 +10,16 @@
 			<CommentEntry
 				v-for="reply in replies"
 				:key="reply.id"
-				v-bind="reply"
-				:dangerouslyOverrideParser="dangerouslyOverrideParser"
+				v-bind="{
+					...reply,
+					dangerouslyOverrideParser,
+					isReadOnly,
+					postEscapeParser,
+					tabIndex,
+				}"
 				:dataTest="`${rootDataTest}.reply.${reply.id}`"
 				isReply
 				:parentId="id"
-				:postEscapeParser="postEscapeParser"
-				:tabIndex="tabIndex"
 				@delete="onDelete"
 				@edit="onEdit"
 			/>

diff --git a/packages/kotti-ui/source/kotti-comment/components/CommentEntry.vue b/packages/kotti-ui/source/kotti-comment/components/CommentEntry.vue
@@ -23,7 +23,7 @@
 				@update:isEditing="isEditing = $event"
 			/>
 			<CommentActions
-				v-if="!isEditing"
+				v-if="!isReadOnly && !isEditing"
 				v-bind="{ dataTest, isDeletable, isEditable, isReply, tabIndex }"
 				@delete="onDelete"
 				@reply="onReply"

diff --git a/packages/kotti-ui/source/kotti-comment/types.ts b/packages/kotti-ui/source/kotti-comment/types.ts
@@ -27,8 +27,8 @@ export namespace KottiComment {
 
 	const sharedSchema = commentSchema.extend({
 		allowInternal: z.boolean().default(false),
-		dataTest: z.string().optional(),
 		dangerouslyOverrideParser: parseFunctionSchema.default(defaultParser),
+		isReadOnly: z.boolean().default(false),
 		postEscapeParser: parseFunctionSchema.default(defaultPostEscapeParser),
 		tabIndex: z.number().default(0),
 		userAvatar: userSchema.shape.avatar,
@@ -41,14 +41,15 @@ export namespace KottiComment {
 	}
 
 	export const propsSchema = sharedSchema.extend({
+		dataTest: z.string().optional(),
 		replies: z.array(Reply.schema),
 	})
 	export type Props = z.input<typeof propsSchema>
 	export type PropsInternal = z.output<typeof propsSchema>
 
 	export namespace Entry {
 		export const schema = sharedSchema.omit({ userAvatar: true }).extend({
-			dataTest: z.string(), // Override dataTest and make it required
+			dataTest: z.string(),
 			isReply: z.boolean().default(false),
 			parentId: idSchema.optional(),
 		})