ami/tl-vikunja
1
0
Fork 0
Code

feat(components): align component name casing fancycheckbox

Browse Source
This commit is contained in:
Dominik Pschenitschni 2024-06-15 14:11:06 +02:00
parent 5d2c731c59
commit 541f608d3c
No known key found for this signature in database
GPG Key ID: B257AC0149F43A77
17 changed files with 79 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/cypress/e2e/project/project-view-gantt.spec.ts
View File

@ -52,7 +52,7 @@ describe('Project View Gantt', () => {
}) })
cy.visit('/projects/1/2') cy.visit('/projects/1/2')
cy.get('.gantt-options .fancycheckbox') cy.get('.gantt-options .fancy-checkbox')
.contains('Show tasks which don\'t have dates set') .contains('Show tasks which don\'t have dates set')
.click() .click()

4
frontend/cypress/e2e/project/project-view-table.spec.ts
View File

@ -24,10 +24,10 @@ describe('Project View Table', () => {
cy.get('.project-table .filter-container .button') cy.get('.project-table .filter-container .button')
.contains('Columns') .contains('Columns')
.click() .click()
cy.get('.project-table .filter-container .card.columns-filter .card-content .fancycheckbox') cy.get('.project-table .filter-container .card.columns-filter .card-content .fancy-checkbox')
.contains('Priority') .contains('Priority')
.click() .click()
cy.get('.project-table .filter-container .card.columns-filter .card-content .fancycheckbox') cy.get('.project-table .filter-container .card.columns-filter .card-content .fancy-checkbox')
.contains('Done') .contains('Done')
.click() .click()

2
frontend/cypress/e2e/task/task.spec.ts
View File

@ -97,7 +97,7 @@ describe('Task', () => {
TaskFactory.create(1) TaskFactory.create(1)
cy.visit('/projects/1/1') cy.visit('/projects/1/1')
cy.get('.tasks .task .fancycheckbox') cy.get('.tasks .task .fancy-checkbox')
.first() .first()
.click() .click()
cy.get('.global-notification') cy.get('.global-notification')

2
frontend/src/components/base/BaseCheckbox.vue
View File

@ -45,7 +45,7 @@ const emit = defineEmits<{
(event: 'update:modelValue', value: boolean): void (event: 'update:modelValue', value: boolean): void
}>() }>()
const checkboxId = ref(`fancycheckbox_${createRandomID()}`) const checkboxId = ref(`checkbox_${createRandomID()}`)
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

2
frontend/src/components/input/fancycheckbox.story.vue → frontend/src/components/input/FancyCheckbox.story.vue
View File

@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import {ref} from 'vue' import {ref} from 'vue'
import {logEvent} from 'histoire/client' import {logEvent} from 'histoire/client'
import FancyCheckbox from './fancycheckbox.vue' import FancyCheckbox from './FancyCheckbox.vue'
const isDisabled = ref<boolean | undefined>() const isDisabled = ref<boolean | undefined>()

20
frontend/src/components/input/fancycheckbox.vue → frontend/src/components/input/FancyCheckbox.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<BaseCheckbox <BaseCheckbox
class="fancycheckbox" class="fancy-checkbox"
:class="{ :class="{
'is-disabled': disabled, 'is-disabled': disabled,
'is-block': isBlock, 'is-block': isBlock,
@ -9,10 +9,10 @@
:model-value="modelValue" :model-value="modelValue"
@update:modelValue="value => emit('update:modelValue', value)" @update:modelValue="value => emit('update:modelValue', value)"
> >
<CheckboxIcon class="fancycheckbox__icon" /> <CheckboxIcon class="fancy-checkbox__icon" />
<span <span
v-if="$slots.default" v-if="$slots.default"
class="fancycheckbox__content" class="fancy-checkbox__content"
> >
<slot /> <slot />
</span> </span>
@ -44,7 +44,7 @@ const emit = defineEmits<{
<style lang="scss" scoped> <style lang="scss" scoped>
.fancycheckbox { .fancy-checkbox {
display: inline-block; display: inline-block;
padding-right: 5px; padding-right: 5px;
padding-top: 3px; padding-top: 3px;
@ -55,13 +55,13 @@ const emit = defineEmits<{
} }
} }
.fancycheckbox__content { .fancy-checkbox__content {
font-size: 0.8rem; font-size: 0.8rem;
vertical-align: top; vertical-align: top;
padding-left: .5rem; padding-left: .5rem;
} }
.fancycheckbox__icon:deep() { .fancy-checkbox__icon:deep() {
position: relative; position: relative;
z-index: 1; z-index: 1;
stroke: var(--stroke-color, #c8ccd4); stroke: var(--stroke-color, #c8ccd4);
@ -74,8 +74,8 @@ const emit = defineEmits<{
} }
} }
.fancycheckbox:not(:has(input:disabled)):hover .fancycheckbox__icon, .fancy-checkbox:not(:has(input:disabled)):hover .fancy-checkbox__icon,
.fancycheckbox:has(input:checked) .fancycheckbox__icon { .fancy-checkbox:has(input:checked) .fancy-checkbox__icon {
--stroke-color: var(--primary); --stroke-color: var(--primary);
} }
</style> </style>
@ -84,13 +84,13 @@ const emit = defineEmits<{
// Since css-has-pseudo doesn't work with deep classes, // Since css-has-pseudo doesn't work with deep classes,
// the following rules can't be scoped // the following rules can't be scoped
.fancycheckbox:has(:not(input:checked)) .fancycheckbox__icon { .fancy-checkbox:has(:not(input:checked)) .fancy-checkbox__icon {
path { path {
transition-delay: 0.05s; transition-delay: 0.05s;
} }
} }
.fancycheckbox:has(input:checked) .fancycheckbox__icon { .fancy-checkbox:has(input:checked) .fancy-checkbox__icon {
path { path {
stroke-dashoffset: 60; stroke-dashoffset: 60;
} }

6
frontend/src/components/project/partials/filters.vue
View File

@ -11,12 +11,12 @@
/> />
<div class="field is-flex is-flex-direction-column"> <div class="field is-flex is-flex-direction-column">
<Fancycheckbox <FancyCheckbox
v-model="params.filter_include_nulls" v-model="params.filter_include_nulls"
@blur="change()" @blur="change()"
> >
{{ $t('filters.attributes.includeNulls') }} {{ $t('filters.attributes.includeNulls') }}
</Fancycheckbox> </FancyCheckbox>
</div> </div>
<FilterInputDocs /> <FilterInputDocs />
@ -49,7 +49,7 @@ export const ALPHABETICAL_SORT = 'title'
<script setup lang="ts"> <script setup lang="ts">
import {computed, ref, watch} from 'vue' import {computed, ref, watch} from 'vue'
import Fancycheckbox from '@/components/input/fancycheckbox.vue' import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
import FilterInput from '@/components/project/partials/FilterInput.vue' import FilterInput from '@/components/project/partials/FilterInput.vue'
import {useRoute} from 'vue-router' import {useRoute} from 'vue-router'
import type {TaskFilterParams} from '@/services/taskCollection' import type {TaskFilterParams} from '@/services/taskCollection'

6
frontend/src/components/project/views/ProjectGantt.vue
View File

@ -37,12 +37,12 @@
</x-button> </x-button>
</div> </div>
</div> </div>
<Fancycheckbox <FancyCheckbox
v-model="filters.showTasksWithoutDates" v-model="filters.showTasksWithoutDates"
is-block is-block
> >
{{ $t('project.gantt.showTasksWithoutDates') }} {{ $t('project.gantt.showTasksWithoutDates') }}
</Fancycheckbox> </FancyCheckbox>
</div> </div>
</card> </card>
@ -81,7 +81,7 @@ import {getFlatpickrLanguage} from '@/helpers/flatpickrLanguage'
import Foo from '@/components/misc/flatpickr/Flatpickr.vue' import Foo from '@/components/misc/flatpickr/Flatpickr.vue'
import ProjectWrapper from '@/components/project/ProjectWrapper.vue' import ProjectWrapper from '@/components/project/ProjectWrapper.vue'
import Fancycheckbox from '@/components/input/fancycheckbox.vue' import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
import TaskForm from '@/components/tasks/TaskForm.vue' import TaskForm from '@/components/tasks/TaskForm.vue'
import {createAsyncComponent} from '@/helpers/createAsyncComponent' import {createAsyncComponent} from '@/helpers/createAsyncComponent'

58
frontend/src/components/project/views/ProjectTable.vue
View File

@ -22,48 +22,48 @@
class="columns-filter" class="columns-filter"
:class="{'is-open': isOpen}" :class="{'is-open': isOpen}"
> >
<Fancycheckbox v-model="activeColumns.index"> <FancyCheckbox v-model="activeColumns.index">
# #
</Fancycheckbox> </FancyCheckbox>
<Fancycheckbox v-model="activeColumns.done"> <FancyCheckbox v-model="activeColumns.done">
{{ $t('task.attributes.done') }} {{ $t('task.attributes.done') }}
</Fancycheckbox> </FancyCheckbox>
<Fancycheckbox v-model="activeColumns.title"> <FancyCheckbox v-model="activeColumns.title">
{{ $t('task.attributes.title') }} {{ $t('task.attributes.title') }}
</Fancycheckbox> </FancyCheckbox>
<Fancycheckbox v-model="activeColumns.priority"> <FancyCheckbox v-model="activeColumns.priority">
{{ $t('task.attributes.priority') }} {{ $t('task.attributes.priority') }}
</Fancycheckbox> </FancyCheckbox>
<Fancycheckbox v-model="activeColumns.labels"> <FancyCheckbox v-model="activeColumns.labels">
{{ $t('task.attributes.labels') }} {{ $t('task.attributes.labels') }}
</Fancycheckbox> </FancyCheckbox>
<Fancycheckbox v-model="activeColumns.assignees"> <FancyCheckbox v-model="activeColumns.assignees">
{{ $t('task.attributes.assignees') }} {{ $t('task.attributes.assignees') }}
</Fancycheckbox> </FancyCheckbox>
<Fancycheckbox v-model="activeColumns.dueDate"> <FancyCheckbox v-model="activeColumns.dueDate">
{{ $t('task.attributes.dueDate') }} {{ $t('task.attributes.dueDate') }}
</Fancycheckbox> </FancyCheckbox>
<Fancycheckbox v-model="activeColumns.startDate"> <FancyCheckbox v-model="activeColumns.startDate">
{{ $t('task.attributes.startDate') }} {{ $t('task.attributes.startDate') }}
</Fancycheckbox> </FancyCheckbox>
<Fancycheckbox v-model="activeColumns.endDate"> <FancyCheckbox v-model="activeColumns.endDate">
{{ $t('task.attributes.endDate') }} {{ $t('task.attributes.endDate') }}
</Fancycheckbox> </FancyCheckbox>
<Fancycheckbox v-model="activeColumns.percentDone"> <FancyCheckbox v-model="activeColumns.percentDone">
{{ $t('task.attributes.percentDone') }} {{ $t('task.attributes.percentDone') }}
</Fancycheckbox> </FancyCheckbox>
<Fancycheckbox v-model="activeColumns.doneAt"> <FancyCheckbox v-model="activeColumns.doneAt">
{{ $t('task.attributes.doneAt') }} {{ $t('task.attributes.doneAt') }}
</Fancycheckbox> </FancyCheckbox>
<Fancycheckbox v-model="activeColumns.created"> <FancyCheckbox v-model="activeColumns.created">
{{ $t('task.attributes.created') }} {{ $t('task.attributes.created') }}
</Fancycheckbox> </FancyCheckbox>
<Fancycheckbox v-model="activeColumns.updated"> <FancyCheckbox v-model="activeColumns.updated">
{{ $t('task.attributes.updated') }} {{ $t('task.attributes.updated') }}
</Fancycheckbox> </FancyCheckbox>
<Fancycheckbox v-model="activeColumns.createdBy"> <FancyCheckbox v-model="activeColumns.createdBy">
{{ $t('task.attributes.createdBy') }} {{ $t('task.attributes.createdBy') }}
</Fancycheckbox> </FancyCheckbox>
</card> </card>
</template> </template>
</Popup> </Popup>
@ -277,7 +277,7 @@ import User from '@/components/misc/user.vue'
import PriorityLabel from '@/components/tasks/partials/priorityLabel.vue' import PriorityLabel from '@/components/tasks/partials/priorityLabel.vue'
import Labels from '@/components/tasks/partials/labels.vue' import Labels from '@/components/tasks/partials/labels.vue'
import DateTableCell from '@/components/tasks/partials/date-table-cell.vue' import DateTableCell from '@/components/tasks/partials/date-table-cell.vue'
import Fancycheckbox from '@/components/input/fancycheckbox.vue' import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
import Sort from '@/components/tasks/partials/Sort.vue' import Sort from '@/components/tasks/partials/Sort.vue'
import FilterPopup from '@/components/project/partials/filter-popup.vue' import FilterPopup from '@/components/project/partials/filter-popup.vue'
import Pagination from '@/components/misc/Pagination.vue' import Pagination from '@/components/misc/Pagination.vue'

6
frontend/src/components/tasks/partials/relatedTasks.vue
View File

@ -120,7 +120,7 @@
class="task" class="task"
> >
<div class="is-flex is-align-items-center"> <div class="is-flex is-align-items-center">
<Fancycheckbox <FancyCheckbox
v-model="task.done" v-model="task.done"
class="task-done-checkbox" class="task-done-checkbox"
@update:modelValue="toggleTaskDone(t)" @update:modelValue="toggleTaskDone(t)"
@ -199,7 +199,7 @@ import TaskRelationModel from '@/models/taskRelation'
import CustomTransition from '@/components/misc/CustomTransition.vue' import CustomTransition from '@/components/misc/CustomTransition.vue'
import BaseButton from '@/components/base/BaseButton.vue' import BaseButton from '@/components/base/BaseButton.vue'
import Multiselect from '@/components/input/Multiselect.vue' import Multiselect from '@/components/input/Multiselect.vue'
import Fancycheckbox from '@/components/input/fancycheckbox.vue' import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
import {error, success} from '@/message' import {error, success} from '@/message'
import {useTaskStore} from '@/stores/tasks' import {useTaskStore} from '@/stores/tasks'
@ -469,7 +469,7 @@ async function toggleTaskDone(task: ITask) {
padding: 0.5rem; padding: 0.5rem;
} }
// FIXME: The height of the actual checkbox in the <Fancycheckbox/> component is too much resulting in a // FIXME: The height of the actual checkbox in the <FancyCheckbox/> component is too much resulting in a
// weired positioning of the checkbox. Setting the height here is a workaround until we fix the styling // weired positioning of the checkbox. Setting the height here is a workaround until we fix the styling
// of the component. // of the component.
.task-done-checkbox { .task-done-checkbox {

6
frontend/src/components/tasks/partials/singleTaskInProject.vue
View File

@ -8,7 +8,7 @@
@mouseup.stop.self="openTaskDetail" @mouseup.stop.self="openTaskDetail"
@mousedown.stop.self="focusTaskLink" @mousedown.stop.self="focusTaskLink"
> >
<Fancycheckbox <FancyCheckbox
v-model="task.done" v-model="task.done"
:disabled="(isArchived || disabled) && !canMarkAsDone" :disabled="(isArchived || disabled) && !canMarkAsDone"
@update:modelValue="markAsDone" @update:modelValue="markAsDone"
@ -189,7 +189,7 @@ import ChecklistSummary from '@/components/tasks/partials/checklist-summary.vue'
import ProgressBar from '@/components/misc/ProgressBar.vue' import ProgressBar from '@/components/misc/ProgressBar.vue'
import BaseButton from '@/components/base/BaseButton.vue' import BaseButton from '@/components/base/BaseButton.vue'
import Fancycheckbox from '@/components/input/fancycheckbox.vue' import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
import ColorBubble from '@/components/misc/ColorBubble.vue' import ColorBubble from '@/components/misc/ColorBubble.vue'
import CustomTransition from '@/components/misc/CustomTransition.vue' import CustomTransition from '@/components/misc/CustomTransition.vue'
@ -472,7 +472,7 @@ function focusTaskLink() {
opacity: 1; opacity: 1;
} }
:deep(.fancycheckbox) { :deep(.fancy-checkbox) {
height: 18px; height: 18px;
padding-top: 0; padding-top: 0;
padding-right: .5rem; padding-right: .5rem;

6
frontend/src/views/project/ListProjects.vue
View File

@ -5,12 +5,12 @@
:class="{'is-loading': loading}" :class="{'is-loading': loading}"
> >
<header class="project-header"> <header class="project-header">
<Fancycheckbox <FancyCheckbox
v-model="showArchived" v-model="showArchived"
v-cy="'show-archived-check'" v-cy="'show-archived-check'"
> >
{{ $t('project.showArchived') }} {{ $t('project.showArchived') }}
</Fancycheckbox> </FancyCheckbox>
<div class="action-buttons"> <div class="action-buttons">
<x-button <x-button
@ -40,7 +40,7 @@
import {computed} from 'vue' import {computed} from 'vue'
import {useI18n} from 'vue-i18n' import {useI18n} from 'vue-i18n'
import Fancycheckbox from '@/components/input/fancycheckbox.vue' import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
import ProjectCardGrid from '@/components/project/partials/ProjectCardGrid.vue' import ProjectCardGrid from '@/components/project/partials/ProjectCardGrid.vue'
import {useTitle} from '@/composables/useTitle' import {useTitle} from '@/composables/useTitle'

6
frontend/src/views/project/settings/webhooks.vue
View File

@ -21,7 +21,7 @@ import {formatDateShort} from '@/helpers/time/formatDate'
import User from '@/components/misc/user.vue' import User from '@/components/misc/user.vue'
import WebhookModel from '@/models/webhook' import WebhookModel from '@/models/webhook'
import BaseButton from '@/components/base/BaseButton.vue' import BaseButton from '@/components/base/BaseButton.vue'
import Fancycheckbox from '@/components/input/fancycheckbox.vue' import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
import {success} from '@/message' import {success} from '@/message'
import {isValidHttpUrl} from '@/helpers/isValidHttpUrl' import {isValidHttpUrl} from '@/helpers/isValidHttpUrl'
@ -192,7 +192,7 @@ function validateSelectedEvents() {
{{ $t('project.webhooks.eventsHint') }} {{ $t('project.webhooks.eventsHint') }}
</p> </p>
<div class="control"> <div class="control">
<Fancycheckbox <FancyCheckbox
v-for="event in availableEvents" v-for="event in availableEvents"
:key="event" :key="event"
v-model="newWebhookEvents[event]" v-model="newWebhookEvents[event]"
@ -200,7 +200,7 @@ function validateSelectedEvents() {
@update:modelValue="validateSelectedEvents" @update:modelValue="validateSelectedEvents"
> >
{{ event }} {{ event }}
</Fancycheckbox> </FancyCheckbox>
</div> </div>
<p <p
v-if="!selectedEventsValid" v-if="!selectedEventsValid"

10
frontend/src/views/tasks/ShowTasks.vue
View File

@ -22,19 +22,19 @@
</x-button> </x-button>
</template> </template>
</DatepickerWithRange> </DatepickerWithRange>
<Fancycheckbox <FancyCheckbox
:model-value="showNulls" :model-value="showNulls"
class="mr-2" class="mr-2"
@update:modelValue="setShowNulls" @update:modelValue="setShowNulls"
> >
{{ $t('task.show.noDates') }} {{ $t('task.show.noDates') }}
</Fancycheckbox> </FancyCheckbox>
<Fancycheckbox <FancyCheckbox
:model-value="showOverdue" :model-value="showOverdue"
@update:modelValue="setShowOverdue" @update:modelValue="setShowOverdue"
> >
{{ $t('task.show.overdue') }} {{ $t('task.show.overdue') }}
</Fancycheckbox> </FancyCheckbox>
</p> </p>
<template v-if="!loading && (!tasks || tasks.length === 0) && showNothingToDo"> <template v-if="!loading && (!tasks || tasks.length === 0) && showNothingToDo">
<h3 class="has-text-centered mt-6"> <h3 class="has-text-centered mt-6">
@ -76,7 +76,7 @@ import {useI18n} from 'vue-i18n'
import {formatDate} from '@/helpers/time/formatDate' import {formatDate} from '@/helpers/time/formatDate'
import {setTitle} from '@/helpers/setTitle' import {setTitle} from '@/helpers/setTitle'
import Fancycheckbox from '@/components/input/fancycheckbox.vue' import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
import SingleTaskInProject from '@/components/tasks/partials/singleTaskInProject.vue' import SingleTaskInProject from '@/components/tasks/partials/singleTaskInProject.vue'
import DatepickerWithRange from '@/components/date/DatepickerWithRange.vue' import DatepickerWithRange from '@/components/date/DatepickerWithRange.vue'
import {DATE_RANGES} from '@/components/date/dateRanges' import {DATE_RANGES} from '@/components/date/dateRanges'

6
frontend/src/views/teams/EditTeam.vue
View File

@ -45,13 +45,13 @@
class="control is-expanded" class="control is-expanded"
:class="{ 'is-loading': teamService.loading }" :class="{ 'is-loading': teamService.loading }"
> >
<Fancycheckbox <FancyCheckbox
v-model="team.isPublic" v-model="team.isPublic"
:disabled="teamMemberService.loading || undefined" :disabled="teamMemberService.loading || undefined"
:class="{ 'disabled': teamService.loading }" :class="{ 'disabled': teamService.loading }"
> >
{{ $t('team.attributes.isPublicDescription') }} {{ $t('team.attributes.isPublicDescription') }}
</Fancycheckbox> </FancyCheckbox>
</div> </div>
</div> </div>
<div class="field"> <div class="field">
@ -263,7 +263,7 @@ import {useI18n} from 'vue-i18n'
import {useRoute, useRouter} from 'vue-router' import {useRoute, useRouter} from 'vue-router'
import Editor from '@/components/input/AsyncEditor' import Editor from '@/components/input/AsyncEditor'
import Fancycheckbox from '@/components/input/fancycheckbox.vue' import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
import Multiselect from '@/components/input/Multiselect.vue' import Multiselect from '@/components/input/Multiselect.vue'
import User from '@/components/misc/user.vue' import User from '@/components/misc/user.vue'

6
frontend/src/views/teams/NewTeam.vue
View File

@ -37,12 +37,12 @@
class="control is-expanded" class="control is-expanded"
:class="{ 'is-loading': teamService.loading }" :class="{ 'is-loading': teamService.loading }"
> >
<Fancycheckbox <FancyCheckbox
v-model="team.isPublic" v-model="team.isPublic"
:class="{ 'disabled': teamService.loading }" :class="{ 'disabled': teamService.loading }"
> >
{{ $t('team.attributes.isPublicDescription') }} {{ $t('team.attributes.isPublicDescription') }}
</Fancycheckbox> </FancyCheckbox>
</div> </div>
</div> </div>
<p <p
@ -66,7 +66,7 @@ import TeamModel from '@/models/team'
import TeamService from '@/services/team' import TeamService from '@/services/team'
import CreateEdit from '@/components/misc/CreateEdit.vue' import CreateEdit from '@/components/misc/CreateEdit.vue'
import Fancycheckbox from '@/components/input/fancycheckbox.vue' import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
import {useTitle} from '@/composables/useTitle' import {useTitle} from '@/composables/useTitle'
import {useRouter} from 'vue-router' import {useRouter} from 'vue-router'

10
frontend/src/views/user/settings/ApiTokens.vue
View File

@ -5,7 +5,7 @@ import {formatDateShort, formatDateSince} from '@/helpers/time/formatDate'
import XButton from '@/components/input/button.vue' import XButton from '@/components/input/button.vue'
import BaseButton from '@/components/base/BaseButton.vue' import BaseButton from '@/components/base/BaseButton.vue'
import ApiTokenModel from '@/models/apiTokenModel' import ApiTokenModel from '@/models/apiTokenModel'
import Fancycheckbox from '@/components/input/fancycheckbox.vue' import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
import {MILLISECONDS_A_DAY} from '@/constants/date' import {MILLISECONDS_A_DAY} from '@/constants/date'
import flatPickr from 'vue-flatpickr-component' import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css' import 'flatpickr/dist/flatpickr.css'
@ -299,26 +299,26 @@ function toggleGroupPermissionsFromChild(group: string, checked: boolean) {
<template <template
v-if="Object.keys(routes).length >= 1" v-if="Object.keys(routes).length >= 1"
> >
<Fancycheckbox <FancyCheckbox
v-model="newTokenPermissionsGroup[group]" v-model="newTokenPermissionsGroup[group]"
class="mr-2 is-capitalized has-text-weight-bold" class="mr-2 is-capitalized has-text-weight-bold"
@update:modelValue="checked => selectPermissionGroup(group, checked)" @update:modelValue="checked => selectPermissionGroup(group, checked)"
> >
{{ formatPermissionTitle(group) }} {{ formatPermissionTitle(group) }}
</Fancycheckbox> </FancyCheckbox>
<br> <br>
</template> </template>
<template <template
v-for="(paths, route) in routes" v-for="(paths, route) in routes"
:key="group+'-'+route" :key="group+'-'+route"
> >
<Fancycheckbox <FancyCheckbox
v-model="newTokenPermissions[group][route]" v-model="newTokenPermissions[group][route]"
class="ml-4 mr-2 is-capitalized" class="ml-4 mr-2 is-capitalized"
@update:modelValue="checked => toggleGroupPermissionsFromChild(group, checked)" @update:modelValue="checked => toggleGroupPermissionsFromChild(group, checked)"
> >
{{ formatPermissionTitle(route) }} {{ formatPermissionTitle(route) }}
</Fancycheckbox> </FancyCheckbox>
<br> <br>
</template> </template>
</div> </div>