Skip to content

Commit

Permalink
Removed all the client-only component tags as the hydration mismatche…
Browse files Browse the repository at this point in the history 
…s have been fixed.
  • Loading branch information
@rizen
rizen committed Apr 26, 2024
1 parent aef6f37 commit c0665e4
Show file tree
Hide file tree
Showing 7 changed files with 85 additions and 110 deletions.
3 changes: 3 additions & 0 deletions docs/change-log.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ outline: deep
---
# Change Log

## 2024-04-26
* Removed all the client-only component tags as the hydration mismatches have been fixed.

## 2024-04-25
* Fixed a bug where ving record fields of type 'int' were not being initialized properly.
* Removed unnecessary validation on Dropzone.
Expand Down
22 changes: 5 additions & 17 deletions docs/subsystems/ui.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,12 +71,8 @@ Props:
### Dropzone
Creates a user interface for uploading [S3Files](/rest/S3File). It handles the resizing of images on the client side, restriction of file types on the client side, requesting the presigned upload URL, uploading the file to S3. The only thing you need to do is specify via `afterUpload` what happens to the file after the user uploads it.

Note that you should always wrap this in a `<client-only>` tag.

```html
<client-only>
<Dropzone :acceptedFiles="['pdf','zip']" :afterUpload="doThisFunc"></Dropzone>
</client-only>
<Dropzone :acceptedFiles="['pdf','zip']" :afterUpload="doThisFunc"></Dropzone>
```
Props:
Expand Down Expand Up @@ -203,9 +199,7 @@ Props:
### Notify
Place this in your layouts so that users can receive toasts that will be triggered via the `useNotifyStore()` composable.
```html
<client-only>
<Notify/>
</client-only>
<Notify/>
```

### Pager
Expand Down Expand Up @@ -252,17 +246,13 @@ Slots:
### SystemWideAlert
Place this in your layouts where you would like the system wide alert to be displayed when an admin has configured one. It is triggered by the `useSystemWideAlertStore()` composable.
```html
<client-only>
<SystemWideAlert/>
</client-only>
<SystemWideAlert/>
```

### Throbber
Place this in your layouts so the user has an indication that there are some background activites such as rest calls happening. It is triggered by the `useThrobberStore()` composable.
```html
<client-only>
<Throbber />
</client-only>
<Throbber />
```


Expand Down Expand Up @@ -356,9 +346,7 @@ Allows you to notify the user via toasts.
```
You would then use the Notify Component in your layout.
```html
<client-only>
<Notify />
</client-only>
<Notify />
```

### useRest()
Expand Down
10 changes: 2 additions & 8 deletions layouts/default.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<template>
<div>
<client-only>
<Menubar :model="topNav" class="bg-gray-900">
<Menubar id="topnav" :model="topNav" class="bg-gray-900">
<template #start>
<img :src="config.public.site.logoUrl" :alt="config.public.site.name" height="40"
class="mr-0 lg:mr-6">
Expand Down Expand Up @@ -51,21 +50,16 @@
</div>
</template>
</Menubar>
</client-only>

<client-only>
<SystemWideAlert />
</client-only>
<SystemWideAlert />
<div class="px-0 py-4 md:px-4">
<div style="min-height: 20rem">
<slot />
</div>
</div>
</div>
<client-only>
<Notify />
<Throbber />
</client-only>
</template>

<script setup>
Expand Down
10 changes: 3 additions & 7 deletions layouts/empty.vue
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
<template>
<client-only>
<SystemWideAlert />
</client-only>
<SystemWideAlert />
<slot />
<client-only>
<Notify />
<Throbber />
</client-only>
<Notify />
<Throbber />
</template>

<script setup>
Expand Down
136 changes: 67 additions & 69 deletions pages/user/admin/[id].vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,75 +2,73 @@
<AdminNav :crumbs="breadcrumbs" />
<h1>Edit User {{ user.props?.username }}</h1>

<client-only>
<FieldsetNav v-if="user.props?.id">
<FieldsetItem name="Account">
<div class="mb-4">
<FormInput name="username" v-model="user.props.username" required label="Username"
@change="user.update()" />
</div>
<div class="mb-4">
<FormInput type="email" name="email" v-model="user.props.email" label="Email" required
@change="user.update()" />
</div>
<div class="mb-4">
<FormInput name="realName" v-model="user.props.realName" label="Real Name"
@change="user.update()" />
</div>

<div class="mb-4">
<FormInput name="password" v-model="password" label="Password"
@change="user.partialUpdate({ password: password })" />
</div>
</FieldsetItem>

<FieldsetItem name="Privileges">
<div class="mb-4">
<FormInput type="select" @change="user.update()" v-model="user.props.admin" :options="user.options?.admin"
name="admin" label="Admin" />
</div>
</FieldsetItem>

<FieldsetItem name="Preferences">
<div class="mb-4">
<FormInput type="select" @change="user.update()" v-model="user.props.useAsDisplayName"
:options="user.options?.useAsDisplayName" name="useAsDisplayName" label="Use As Display Name" />
</div>

<div class="mb-4">
<FormInput type="select" @change="user.update()" v-model="user.props.developer"
:options="user.options?.developer" label="Are you a software developer?" name="developer" />
</div>

<div class="mb-4">
<span class="font-medium text-900 mb-2">Profile Picture</span><br>
<Avatar :image="user.meta?.avatarUrl" alt="user avatar" class="h-10rem w-10rem" shape="circle" />
</div>
</FieldsetItem>

<FieldsetItem name="Statistics">
<div class="mb-4"><b>Id</b>: {{ user.props?.id }}
<CopyToClipboard :text="user.props.id" size="xs" />
</div>

<div class="mb-4">
Created at {{ dt.formatDateTime(user.props.createdAt) }}
</div>

<div class="mb-4">
Updated at {{ dt.formatDateTime(user.props.updatedAt) }}
</div>
</FieldsetItem>

<FieldsetItem name="Actions">
<Button @click="user.delete()" severity="danger" class="mr-2 mb-2" title="Delete" alt="Delete User"><i
class="pi pi-trash mr-1"></i> Delete</Button>
<Button @click="become" severity="warn" class="mr-2 mb-2" title="Become" alt="Become User"><i
class="pi pi-arrow-right-arrow-left mr-1"></i> Become</Button>
</FieldsetItem>

</FieldsetNav>
</client-only>
<FieldsetNav v-if="user.props?.id">
<FieldsetItem name="Account">
<div class="mb-4">
<FormInput name="username" v-model="user.props.username" required label="Username"
@change="user.update()" />
</div>
<div class="mb-4">
<FormInput type="email" name="email" v-model="user.props.email" label="Email" required
@change="user.update()" />
</div>
<div class="mb-4">
<FormInput name="realName" v-model="user.props.realName" label="Real Name"
@change="user.update()" />
</div>

<div class="mb-4">
<FormInput name="password" v-model="password" label="Password"
@change="user.partialUpdate({ password: password })" />
</div>
</FieldsetItem>

<FieldsetItem name="Privileges">
<div class="mb-4">
<FormInput type="select" @change="user.update()" v-model="user.props.admin" :options="user.options?.admin"
name="admin" label="Admin" />
</div>
</FieldsetItem>

<FieldsetItem name="Preferences">
<div class="mb-4">
<FormInput type="select" @change="user.update()" v-model="user.props.useAsDisplayName"
:options="user.options?.useAsDisplayName" name="useAsDisplayName" label="Use As Display Name" />
</div>

<div class="mb-4">
<FormInput type="select" @change="user.update()" v-model="user.props.developer"
:options="user.options?.developer" label="Are you a software developer?" name="developer" />
</div>

<div class="mb-4">
<span class="font-medium text-900 mb-2">Profile Picture</span><br>
<Avatar :image="user.meta?.avatarUrl" alt="user avatar" class="h-10rem w-10rem" shape="circle" />
</div>
</FieldsetItem>

<FieldsetItem name="Statistics">
<div class="mb-4"><b>Id</b>: {{ user.props?.id }}
<CopyToClipboard :text="user.props.id" size="xs" />
</div>

<div class="mb-4">
Created at {{ dt.formatDateTime(user.props.createdAt) }}
</div>

<div class="mb-4">
Updated at {{ dt.formatDateTime(user.props.updatedAt) }}
</div>
</FieldsetItem>

<FieldsetItem name="Actions">
<Button @click="user.delete()" severity="danger" class="mr-2 mb-2" title="Delete" alt="Delete User"><i
class="pi pi-trash mr-1"></i> Delete</Button>
<Button @click="become" severity="warn" class="mr-2 mb-2" title="Become" alt="Become User"><i
class="pi pi-arrow-right-arrow-left mr-1"></i> Become</Button>
</FieldsetItem>

</FieldsetNav>
</template>

<script setup>
Expand Down
8 changes: 3 additions & 5 deletions pages/user/settings/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,9 @@
:options="currentUser.options?.avatarType" name="avatarType" label="Avatar Type" />
</div>
<div v-if="currentUser.props.avatarType == 'uploaded'" class="mb-4">
<client-only>
<Dropzone :acceptedFiles="currentUser.meta?.acceptedFileExtensions?.avatar"
:afterUpload="currentUser.importAvatar" :maxFiles="1" :resizeHeight="300"
:resizeWidth="300" resizeMethod="crop"></Dropzone>
</client-only>
<Dropzone id="avatar" :acceptedFiles="currentUser.meta?.acceptedFileExtensions?.avatar"
:afterUpload="currentUser.importAvatar" :maxFiles="1" :resizeHeight="300"
:resizeWidth="300" resizeMethod="crop"></Dropzone>
</div>
<div class="mb-4">
<FormInput type="markdown" @change="currentUser.update()" label="Bio" v-model="currentUser.props.bio" name="bio" />
Expand Down
6 changes: 2 additions & 4 deletions ving/generator/nuxtpages.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -298,10 +298,8 @@ const editProps = (schema) => {
else if (prop.type == 'id' && prop?.relation?.type == 'parent' && prop.relation?.kind == 'S3File') {
out += `
<div class="mb-4">
<client-only>
<Dropzone :acceptedFiles="${schema.kind.toLowerCase()}.meta?.acceptedFileExtensions?.${prop?.relation?.name}" :afterUpload="(s3file) => ${schema.kind.toLowerCase()}.importS3File('${prop?.relation?.name}', s3file.props?.id)"
:maxFiles="1" :resizeHeight="300" :resizeWidth="300" resizeMethod="crop"></Dropzone>
</client-only>
<Dropzone id="${prop?.relation?.name}" :acceptedFiles="${schema.kind.toLowerCase()}.meta?.acceptedFileExtensions?.${prop?.relation?.name}" :afterUpload="(s3file) => ${schema.kind.toLowerCase()}.importS3File('${prop?.relation?.name}', s3file.props?.id)"
:maxFiles="1" :resizeHeight="300" :resizeWidth="300" resizeMethod="crop"></Dropzone>
</div>`;
}
else if (prop.type != 'virtual') {
Expand Down

0 comments on commit c0665e4

Please sign in to comment.