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.

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

feat: User/group column frontend #1113

Merged
merged 9 commits into from
Aug 1, 2024
66 changes: 66 additions & 0 deletions cypress/e2e/column-usergroup.cy.js
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
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
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
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