Skip to content

Commit

Permalink
Merge pull request #1113 from nextcloud/usergroup-frontend
Browse files Browse the repository at this point in the history 
feat: User/group column frontend
  • Loading branch information
@juliusknorr
juliusknorr authored Aug 1, 2024
2 parents 6acb355 + da0857d commit fe3cd70
Show file tree
Hide file tree
Showing 18 changed files with 548 additions and 97 deletions.
66 changes: 66 additions & 0 deletions cypress/e2e/column-usergroup.cy.js
View file
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
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
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
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

0 comments on commit fe3cd70

Please sign in to comment.