Repository navigation
feat: migrate react to vue - #5149
kristian-zendato wants to merge 1 commit into
Conversation
Signed-off-by: kristian-zendato <kristian.zendato@nextcloud.com>
| </script> | ||
|
|
||
| <template> | ||
| <div id="groupfolders-app-root" |
There was a problem hiding this comment.
This is a settings section, as such the root should rather be a NcSettingsSection
There was a problem hiding this comment.
Please adjust the app to match our general app structure.
This belongs to views/AdminSettings.vue or similar
There was a problem hiding this comment.
This rather belongs to src/admin-settings.ts following the usual file structure
There was a problem hiding this comment.
This rather should be a NcSelect
There was a problem hiding this comment.
I guess it makes sense to add a groups pinia store to cache all available groups for rendering them and not reload everytime the component is loaded
There was a problem hiding this comment.
This is not needed, see for example the files app how it does it.
We just use the proper icon rendered with NcIconSvgWrapper, then on the table header where you use this we use aria-sort so no alt text is needed here.
You can also check the "Usage example: Sorting table columns" here:
https://nextcloud-vue-components.netlify.app/#/Components/NcButton
| <template #search="{ attributes, events }"> | ||
| <input class="vs__search" | ||
| v-bind="attributes" | ||
| v-on="events" | ||
| @input="onSearchInput"> | ||
| </template> |
There was a problem hiding this comment.
Why this? just use the NcSelect @search event?
https://vue-select.org/api/events.html#search
| <button v-else | ||
| type="button" | ||
| class="action-rename" | ||
| :aria-label="renameLabel(folder)" | ||
| @click.stop="editingMountPoint = folder.id"> | ||
| {{ folder.mount_point }} | ||
| </button> |
There was a problem hiding this comment.
All the buttons here should be rather NcButton for consistent design.
There was a problem hiding this comment.
with SFC we use with Vue this rather belongs to the <style> section of App.vue
susnux
left a comment
susnux
left a comment
There was a problem hiding this comment.
Great start!
But please follow our usual app layout:
- Proper file structure (
/views,/components,/store,/services...) - Make use of Vue SFC, styles do not need to be in separate stylesheets but if they belong to a component they should directly be within the component.
- Use
@nextcloud/vuecomponents where appropriate, e.g. all normal buttons should beNcButtonetc. - Split API calls out to a service or a store depending on the requirements
2 participants
Summary
Resolves: #3140
App,FolderGroups,QuotaSelect,SortArrow,SubmitInput,AdminGroupSelect, andSubAdminGroupSelectare rewritten as Vue components.ManageAclSelectandDelegatedGroupSelectare added as a new componentapiError.tsis added to report API failure.packages.jsonfor Vite and TypeScript build the Vue entry🤖 AI (if applicable)