Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: User/group column frontend #1113

Merged
merged 9 commits into from
Aug 1, 2024
Merged

feat: User/group column frontend #1113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2f6cf5a
feat: add usergroup column FE elements
enjeck May 31, 2024
41d1e41
fix: update usergroup column elements
enjeck Jun 3, 2024
0ba840c
enh: refactor items for searching users and groups
enjeck May 13, 2024
39e997e
feat: add usergroup column FE elements
enjeck May 31, 2024
6495881
fix: update usergroup column elements
enjeck Jun 3, 2024
cd2a77f
enh: update usergroup column elements
enjeck Jul 8, 2024
6c370f5
test: add Cypress tests for usergroup column
enjeck Jul 8, 2024
82373c1
feat: Implement view filter types for usergroup column
juliushaertl Jul 25, 2024
da0857d
enh: correct spelling
enjeck Jul 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 66 additions & 0 deletions cypress/e2e/column-usergroup.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
let localUser
let nonLocalUser
const columnTitle = 'usergroup'
const tableTitlePrefix = 'Test usergroup'
let tableTitle = tableTitlePrefix
let testNumber = 0

describe('Test column ' + columnTitle, () => {

before(function() {
cy.createRandomUser().then(user => {
localUser = user
})

cy.createRandomUser().then(user => {
nonLocalUser = user
})
})

beforeEach(function() {
testNumber += 1
tableTitle = `${tableTitlePrefix} ${testNumber}`
cy.login(localUser)
cy.visit('apps/tables')
})

it('Create column and rows with default values', () => {
cy.createTable(tableTitle)
cy.loadTable(tableTitle)
cy.createUsergroupColumn(columnTitle, true, true, true, [localUser.userId, nonLocalUser.userId], true)
cy.get('button').contains('Create row').click()
cy.get('[data-cy="createRowSaveButton"]').click()
cy.get('[data-cy="ncTable"] table tr td .userInfo').contains(localUser.userId).should('be.visible')
cy.get('[data-cy="ncTable"] table tr td .userInfo').contains(nonLocalUser.userId).should('be.visible')
})

it('Create column and rows without default values', () => {
cy.createTable(tableTitle)
cy.loadTable(tableTitle)
cy.createUsergroupColumn(columnTitle, true, false, false, [], true)

cy.get('button').contains('Create row').click()
cy.get('[data-cy="usergroupRowSelect"] input').type(nonLocalUser.userId)
cy.get(`.vs__dropdown-menu [id="${nonLocalUser.userId}"]`).click()
cy.get('[data-cy="createRowSaveButton"]').click()
cy.get('[data-cy="ncTable"] table tr td .userInfo').contains(nonLocalUser.userId).should('be.visible')
})

it('Create and edit rows', () => {
cy.createTable(tableTitle)
cy.loadTable(tableTitle)
cy.createUsergroupColumn(columnTitle, true, true, true, [localUser.userId], true)
cy.get('button').contains('Create row').click()
cy.get('[data-cy="createRowSaveButton"]').click()
cy.get('[data-cy="ncTable"] table tr td .userInfo').contains(localUser.userId).should('be.visible')

cy.get('[data-cy="ncTable"] [data-cy="editRowBtn"]').click()
cy.get('[data-cy="usergroupRowSelect"] input').clear().type(nonLocalUser.userId)
cy.get(`.vs__dropdown-menu [id="${nonLocalUser.userId}"]`).click()
cy.get('[data-cy="editRowSaveButton"]').click()
cy.get('[data-cy="ncTable"] table tr td .userInfo').contains(localUser.userId).should('not.exist')
cy.get('[data-cy="ncTable"] table tr td .userInfo').contains(nonLocalUser.userId).should('be.visible')
})


})
165 changes: 74 additions & 91 deletions cypress/support/commands.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,15 @@ Cypress.Commands.add('createView', (title) => {
cy.contains('.app-navigation-entry-link span', title).should('exist')
})

Cypress.Commands.add('openCreateColumnModal', (isFirstColumn) => {
if (isFirstColumn) {
cy.get('.button-vue__text').contains('Create column').click({ force: true })
} else {
cy.get('[data-cy="customTableAction"] button').click()
cy.get('[data-cy="dataTableCreateColumnBtn"]').contains('Create column').click({ force: true })
}
})

Cypress.Commands.add('createContext', (title) => {
cy.get('ul:nth-of-type(2) [data-cy="createContextIcon"]').click({ force: true })
cy.get('[data-cy="createContextModal"]').should('be.visible')
Expand All @@ -67,10 +76,6 @@ Cypress.Commands.add('createContext', (title) => {
cy.contains('h1', title).should('exist')
})

Cypress.Commands.add('loadContext', (title) => {
cy.get('[data-cy="navigationContextItem"]').contains(title).click({ force: true })
})

Cypress.Commands.add('openContextEditModal', (title) => {
cy.get(`[data-cy="navigationContextItem"]:contains("${title}")`).find('button').click({ force: true })
cy.get('[data-cy="navigationContextEditBtn"]').contains('Edit application').click({ force: true })
Expand Down Expand Up @@ -99,21 +104,48 @@ Cypress.Commands.add('loadView', (name) => {
cy.get('[data-cy="navigationViewItem"] a[title="' + name + '"]').click({ force: true })
})

Cypress.Commands.add('loadContext', (title) => {
cy.get('[data-cy="navigationContextItem"]').contains(title).click({ force: true })
})

Cypress.Commands.add('unifiedSearch', (term) => {
cy.get('#unified-search').click()
cy.get('#unified-search__input').type(term)
cy.get('.unified-search__results .unified-search__result-line-one span').contains(term, { matchCase: false }).should('exist')
})

Cypress.Commands.add('createTextLinkColumn', (title, ressourceProvider, firstColumn) => {
if (firstColumn) {
cy.get('.button-vue__text').contains('Create column').click({ force: true })
} else {
cy.get('[data-cy="customTableAction"] button').click()
cy.get('[data-cy="dataTableCreateColumnBtn"]').contains('Create column').click({ force: true })
Cypress.Commands.add('createUsergroupColumn', (title, selectUsers, selectGroups, hasMultipleValues, defaultValue, isFirstColumn) => {
cy.openCreateColumnModal(isFirstColumn)
cy.get('[data-cy="columnTypeFormInput"]').clear().type(title)
cy.get('.columnTypeSelection .vs__open-indicator').click({ force: true })
cy.get('.multiSelectOptionLabel').contains('Users and groups').click({ force: true })

if (hasMultipleValues) {
cy.get('[data-cy="usergroupMultipleSwitch"] .checkbox-content').click({ force: true })
}

if (selectUsers && selectGroups) {
cy.get('[data-cy="userAndGroupSwitch"] .checkbox-content').click()
} else if (selectUsers) {
cy.get('[data-cy="userSwitch"] .checkbox-content').click()
} else if (selectGroups) {
cy.get('[data-cy="groupSwitch"] .checkbox-content').click()
}

cy.get('.modal-container').get('input[placeholder*="Enter a column title"]').clear().type(title)
defaultValue.forEach((value) => {
cy.get('[data-cy="usergroupDefaultSelect"] input').type(value)
cy.get(`.vs__dropdown-menu [id="${value}"]`).click()
})

cy.get('[data-cy="createColumnSaveBtn"]').click()
cy.wait(10).get('.toastify.toast-success').should('be.visible')
cy.get('[data-cy="ncTable"] table tr th').contains(title).should('exist')
})

Cypress.Commands.add('createTextLinkColumn', (title, ressourceProvider, isFirstColumn) => {
cy.openCreateColumnModal(isFirstColumn)

cy.get('[data-cy="columnTypeFormInput"]').clear().type(title)
cy.get('.columnTypeSelection .vs__open-indicator').click({ force: true })
cy.get('.multiSelectOptionLabel').contains('Link').click({ force: true })
// deactivate unwanted provider
Expand All @@ -131,15 +163,10 @@ Cypress.Commands.add('createTextLinkColumn', (title, ressourceProvider, firstCol
cy.get('.custom-table table tr th .cell').contains(title).should('exist')
})

Cypress.Commands.add('createSelectionColumn', (title, options, defaultOption, firstColumn) => {
if (firstColumn) {
cy.get('.button-vue__text').contains('Create column').click({ force: true })
} else {
cy.get('[data-cy="customTableAction"] button').click()
cy.get('[data-cy="dataTableCreateColumnBtn"]').contains('Create column').click({ force: true })
}
Cypress.Commands.add('createSelectionColumn', (title, options, defaultOption, isFirstColumn) => {
cy.openCreateColumnModal(isFirstColumn)

cy.get('.modal-container').get('input[placeholder*="Enter a column title"]').clear().type(title)
cy.get('[data-cy="columnTypeFormInput"]').clear().type(title)
cy.get('.columnTypeSelection .vs__open-indicator').click({ force: true })
cy.get('.multiSelectOptionLabel').contains('Selection').click({ force: true })
// remove default option
Expand All @@ -160,15 +187,11 @@ Cypress.Commands.add('createSelectionColumn', (title, options, defaultOption, fi
cy.get('.custom-table table tr th .cell').contains(title).should('exist')
})

Cypress.Commands.add('createSelectionMultiColumn', (title, options, defaultOptions, firstColumn) => {
if (firstColumn) {
cy.get('.button-vue__text').contains('Create column').click({ force: true })
} else {
cy.get('[data-cy="customTableAction"] button').click()
cy.get('[data-cy="dataTableCreateColumnBtn"]').contains('Create column').click({ force: true })
}

cy.get('.modal-container').get('input[placeholder*="Enter a column title"]').clear().type(title)
Cypress.Commands.add('createSelectionMultiColumn', (title, options, defaultOptions, isFirstColumn) => {
cy.openCreateColumnModal(isFirstColumn)

cy.get('[data-cy="columnTypeFormInput"]').clear().type(title)
cy.get('.columnTypeSelection .vs__open-indicator').click({ force: true })
cy.get('.multiSelectOptionLabel').contains('Selection').click({ force: true })
cy.get('[data-cy="createColumnMultipleSelectionSwitch"]').contains('Multiple selection').click()
Expand All @@ -191,14 +214,9 @@ Cypress.Commands.add('createSelectionMultiColumn', (title, options, defaultOptio
cy.get('.custom-table table tr th .cell').contains(title).should('exist')
})

Cypress.Commands.add('createTextLineColumn', (title, defaultValue, maxLength, firstColumn) => {
if (firstColumn) {
cy.get('.button-vue__text').contains('Create column').click({ force: true })
} else {
cy.get('[data-cy="customTableAction"] button').click()
cy.get('[data-cy="dataTableCreateColumnBtn"]').contains('Create column').click({ force: true })
}
cy.get('.modal-container').get('input[placeholder*="Enter a column title"]').clear().type(title)
Cypress.Commands.add('createTextLineColumn', (title, defaultValue, maxLength, isFirstColumn) => {
cy.openCreateColumnModal(isFirstColumn)
cy.get('[data-cy="columnTypeFormInput"]').clear().type(title)
if (defaultValue) {
cy.get('[data-cy="TextLineForm"] input').first().type(defaultValue)
}
Expand All @@ -210,14 +228,9 @@ Cypress.Commands.add('createTextLineColumn', (title, defaultValue, maxLength, fi
cy.get('.custom-table table tr th .cell').contains(title).should('exist')
})

Cypress.Commands.add('createDatetimeColumn', (title, setNow, firstColumn) => {
if (firstColumn) {
cy.get('.button-vue__text').contains('Create column').click({ force: true })
} else {
cy.get('[data-cy="customTableAction"] button').click()
cy.get('[data-cy="dataTableCreateColumnBtn"]').contains('Create column').click({ force: true })
}
cy.get('.modal-container').get('input[placeholder*="Enter a column title"]').clear().type(title)
Cypress.Commands.add('createDatetimeColumn', (title, setNow, isFirstColumn) => {
cy.openCreateColumnModal(isFirstColumn)
cy.get('[data-cy="columnTypeFormInput"]').clear().type(title)
cy.get('.columnTypeSelection .vs__open-indicator').click({ force: true })
cy.get('.multiSelectOptionLabel').contains('Date and time').click({ force: true })

Expand All @@ -230,14 +243,9 @@ Cypress.Commands.add('createDatetimeColumn', (title, setNow, firstColumn) => {
cy.get('.custom-table table tr th .cell').contains(title).should('exist')
})

Cypress.Commands.add('createDatetimeDateColumn', (title, setNow, firstColumn) => {
if (firstColumn) {
cy.get('.button-vue__text').contains('Create column').click({ force: true })
} else {
cy.get('[data-cy="customTableAction"] button').click()
cy.get('[data-cy="dataTableCreateColumnBtn"]').contains('Create column').click({ force: true })
}
cy.get('.modal-container').get('input[placeholder*="Enter a column title"]').clear().type(title)
Cypress.Commands.add('createDatetimeDateColumn', (title, setNow, isFirstColumn) => {
cy.openCreateColumnModal(isFirstColumn)
cy.get('[data-cy="columnTypeFormInput"]').clear().type(title)
cy.get('.columnTypeSelection .vs__open-indicator').click({ force: true })
cy.get('.multiSelectOptionLabel').contains('Date and time').click({ force: true })
cy.get('[data-cy="createColumnDateSwitch"]').contains('Date').click()
Expand All @@ -251,14 +259,9 @@ Cypress.Commands.add('createDatetimeDateColumn', (title, setNow, firstColumn) =>
cy.get('.custom-table table tr th .cell').contains(title).should('exist')
})

Cypress.Commands.add('createDatetimeTimeColumn', (title, setNow, firstColumn) => {
if (firstColumn) {
cy.get('.button-vue__text').contains('Create column').click({ force: true })
} else {
cy.get('[data-cy="customTableAction"] button').click()
cy.get('[data-cy="dataTableCreateColumnBtn"]').contains('Create column').click({ force: true })
}
cy.get('.modal-container').get('input[placeholder*="Enter a column title"]').clear().type(title)
Cypress.Commands.add('createDatetimeTimeColumn', (title, setNow, isFirstColumn) => {
cy.openCreateColumnModal(isFirstColumn)
cy.get('[data-cy="columnTypeFormInput"]').clear().type(title)
cy.get('.columnTypeSelection .vs__open-indicator').click({ force: true })
cy.get('.multiSelectOptionLabel').contains('Date and time').click({ force: true })
cy.get('[data-cy="createColumnTimeSwitch"]').contains('Time').click()
Expand All @@ -272,14 +275,9 @@ Cypress.Commands.add('createDatetimeTimeColumn', (title, setNow, firstColumn) =>
cy.get('.custom-table table tr th .cell').contains(title).should('exist')
})

Cypress.Commands.add('createNumberColumn', (title, defaultValue, decimals, min, max, prefix, suffix, firstColumn) => {
if (firstColumn) {
cy.get('.button-vue__text').contains('Create column').click({ force: true })
} else {
cy.get('[data-cy="customTableAction"] button').click()
cy.get('[data-cy="dataTableCreateColumnBtn"]').contains('Create column').click({ force: true })
}
cy.get('.modal-container').get('input[placeholder*="Enter a column title"]').clear().type(title)
Cypress.Commands.add('createNumberColumn', (title, defaultValue, decimals, min, max, prefix, suffix, isFirstColumn) => {
cy.openCreateColumnModal(isFirstColumn)
cy.get('[data-cy="columnTypeFormInput"]').clear().type(title)
cy.get('.columnTypeSelection .vs__open-indicator').click({ force: true })
cy.get('.multiSelectOptionLabel').contains('Number').click({ force: true })

Expand All @@ -306,14 +304,9 @@ Cypress.Commands.add('createNumberColumn', (title, defaultValue, decimals, min,
cy.get('.custom-table table tr th .cell').contains(title).should('exist')
})

Cypress.Commands.add('createNumberProgressColumn', (title, defaultValue, firstColumn) => {
if (firstColumn) {
cy.get('.button-vue__text').contains('Create column').click({ force: true })
} else {
cy.get('[data-cy="customTableAction"] button').click()
cy.get('[data-cy="dataTableCreateColumnBtn"]').contains('Create column').click({ force: true })
}
cy.get('.modal-container').get('input[placeholder*="Enter a column title"]').clear().type(title)
Cypress.Commands.add('createNumberProgressColumn', (title, defaultValue, isFirstColumn) => {
cy.openCreateColumnModal(isFirstColumn)
cy.get('[data-cy="columnTypeFormInput"]').clear().type(title)
cy.get('.columnTypeSelection .vs__open-indicator').click({ force: true })
cy.get('.multiSelectOptionLabel').contains('Progress').click({ force: true })

Expand All @@ -325,14 +318,9 @@ Cypress.Commands.add('createNumberProgressColumn', (title, defaultValue, firstCo
cy.get('.custom-table table tr th .cell').contains(title).should('exist')
})

Cypress.Commands.add('createNumberStarsColumn', (title, defaultValue, firstColumn) => {
if (firstColumn) {
cy.get('.button-vue__text').contains('Create column').click({ force: true })
} else {
cy.get('[data-cy="customTableAction"] button').click()
cy.get('[data-cy="dataTableCreateColumnBtn"]').contains('Create column').click({ force: true })
}
cy.get('.modal-container').get('input[placeholder*="Enter a column title"]').clear().type(title)
Cypress.Commands.add('createNumberStarsColumn', (title, defaultValue, isFirstColumn) => {
cy.openCreateColumnModal(isFirstColumn)
cy.get('[data-cy="columnTypeFormInput"]').clear().type(title)
cy.get('.columnTypeSelection .vs__open-indicator').click({ force: true })
cy.get('.multiSelectOptionLabel').contains('Stars rating').click({ force: true })

Expand All @@ -346,14 +334,9 @@ Cypress.Commands.add('createNumberStarsColumn', (title, defaultValue, firstColum
cy.get('.custom-table table tr th .cell').contains(title).should('exist')
})

Cypress.Commands.add('createSelectionCheckColumn', (title, defaultValue, firstColumn) => {
if (firstColumn) {
cy.get('.button-vue__text').contains('Create column').click({ force: true })
} else {
cy.get('[data-cy="customTableAction"] button').click()
cy.get('[data-cy="dataTableCreateColumnBtn"]').contains('Create column').click({ force: true })
}
cy.get('.modal-container').get('input[placeholder*="Enter a column title"]').clear().type(title)
Cypress.Commands.add('createSelectionCheckColumn', (title, defaultValue, isFirstColumn) => {
cy.openCreateColumnModal(isFirstColumn)
cy.get('[data-cy="columnTypeFormInput"]').clear().type(title)
cy.get('.columnTypeSelection .vs__open-indicator').click({ force: true })
cy.get('.multiSelectOptionLabel').contains('Selection').click({ force: true })
cy.get('[data-cy="createColumnYesNoSwitch"').contains('Yes/No').click()
Expand Down
2 changes: 2 additions & 0 deletions src/modules/main/partials/ColumnFormComponent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import DatetimeForm from '../../../shared/components/ncTable/partials/rowTypePar
import DatetimeDateForm from '../../../shared/components/ncTable/partials/rowTypePartials/DatetimeDateForm.vue'
import DatetimeTimeForm from '../../../shared/components/ncTable/partials/rowTypePartials/DatetimeTimeForm.vue'
import TextRichForm from '../../../shared/components/ncTable/partials/rowTypePartials/TextRichForm.vue'
import UsergroupForm from '../../../shared/components/ncTable/partials/rowTypePartials/UsergroupForm.vue'

export default {
name: 'ColumnFormComponent',
Expand All @@ -34,6 +35,7 @@ export default {
DatetimeForm,
DatetimeDateForm,
DatetimeTimeForm,
UsergroupForm,
},
props: {
column: {
Expand Down
5 changes: 5 additions & 0 deletions src/modules/main/partials/ColumnTypeSelection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
<ProgressIcon v-if="props.id === 'number-progress'" />
<SelectionIcon v-if="props.id === 'selection'" />
<DatetimeIcon v-if="props.id === 'datetime'" />
<ContactsIcon v-if="props.id === 'usergroup'" />
<div class="multiSelectOptionLabel">
{{ props.label }}
</div>
Expand All @@ -27,6 +28,7 @@
<ProgressIcon v-if="props.id === 'number-progress'" />
<SelectionIcon v-if="props.id === 'selection'" />
<DatetimeIcon v-if="props.id === 'datetime'" />
<ContactsIcon v-if="props.id === 'usergroup'" />
<div class="multiSelectOptionLabel">
{{ props.label }}
</div>
Expand All @@ -43,6 +45,7 @@ import StarIcon from 'vue-material-design-icons/Star.vue'
import ProgressIcon from 'vue-material-design-icons/ArrowRightThin.vue'
import SelectionIcon from 'vue-material-design-icons/FormSelect.vue'
import DatetimeIcon from 'vue-material-design-icons/ClipboardTextClockOutline.vue'
import ContactsIcon from 'vue-material-design-icons/Contacts.vue'
import { NcSelect } from '@nextcloud/vue'

export default {
Expand All @@ -55,6 +58,7 @@ export default {
LinkIcon,
TextLongIcon,
NcSelect,
ContactsIcon,
},
props: {
columnId: {
Expand All @@ -77,6 +81,7 @@ export default {
{ id: 'selection', label: t('tables', 'Selection') },

{ id: 'datetime', label: t('tables', 'Date and time') },
{ id: 'usergroup', label: t('tables', 'Users and groups') },
],
}
},
Expand Down
Loading
Loading