mirror of
https://github.com/directus/directus.git
synced 2026-02-19 10:14:33 -05:00
Change print width to 120 (#671)
* Increase line-width to 120 * Auto-fix 100->120 columns
This commit is contained in:
@@ -1,10 +1,5 @@
|
||||
<template>
|
||||
<v-textarea
|
||||
class="new-comment"
|
||||
:placeholder="$t('leave_comment')"
|
||||
v-model="newCommentContent"
|
||||
expand-on-focus
|
||||
>
|
||||
<v-textarea class="new-comment" :placeholder="$t('leave_comment')" v-model="newCommentContent" expand-on-focus>
|
||||
<template #append>
|
||||
<v-icon name="alternate_email" class="add-mention" />
|
||||
<v-icon name="insert_emoticon" class="add-emoji" />
|
||||
|
||||
@@ -10,10 +10,7 @@
|
||||
</v-avatar>
|
||||
|
||||
<div class="name">
|
||||
<user-popover
|
||||
v-if="activity.action_by && activity.action_by.id"
|
||||
:user="activity.action_by.id"
|
||||
>
|
||||
<user-popover v-if="activity.action_by && activity.action_by.id" :user="activity.action_by.id">
|
||||
<span>
|
||||
<template v-if="activity.action_by && activity.action_by">
|
||||
{{ activity.action_by.first_name }} {{ activity.action_by.last_name }}
|
||||
@@ -31,11 +28,7 @@
|
||||
<template #activator="{ toggle, active }">
|
||||
<v-icon class="more" :class="{ active }" name="more_horiz" @click="toggle" />
|
||||
<div class="time">
|
||||
<span
|
||||
class="dot"
|
||||
v-if="activity.edited_on !== null"
|
||||
v-tooltip="editedOnFormatted"
|
||||
/>
|
||||
<span class="dot" v-if="activity.edited_on !== null" v-tooltip="editedOnFormatted" />
|
||||
{{ formattedTime }}
|
||||
</div>
|
||||
</template>
|
||||
@@ -121,9 +114,8 @@ export default defineComponent({
|
||||
if (!props.activity.action_by?.avatar) return null;
|
||||
|
||||
return (
|
||||
props.activity.action_by.avatar.data.thumbnails.find(
|
||||
(thumb) => thumb.key === 'directus-small-crop'
|
||||
)?.url || null
|
||||
props.activity.action_by.avatar.data.thumbnails.find((thumb) => thumb.key === 'directus-small-crop')
|
||||
?.url || null
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@@ -9,12 +9,7 @@
|
||||
{{ $t('cancel') }}
|
||||
</v-button>
|
||||
|
||||
<v-button
|
||||
:loading="savingEdits"
|
||||
class="post-comment"
|
||||
@click="saveEdits"
|
||||
x-small
|
||||
>
|
||||
<v-button :loading="savingEdits" class="post-comment" @click="saveEdits" x-small>
|
||||
{{ $t('save') }}
|
||||
</v-button>
|
||||
</div>
|
||||
@@ -55,9 +50,7 @@ export default defineComponent({
|
||||
setup(props) {
|
||||
const projectsStore = useProjectsStore();
|
||||
|
||||
const htmlContent = computed(() =>
|
||||
props.activity.comment ? marked(props.activity.comment) : null
|
||||
);
|
||||
const htmlContent = computed(() => (props.activity.comment ? marked(props.activity.comment) : null));
|
||||
|
||||
const { edits, editing, savingEdits, saveEdits, cancelEditing } = useEdits();
|
||||
|
||||
@@ -190,8 +183,7 @@ export default defineComponent({
|
||||
font-size: 12px;
|
||||
background-color: var(--background-normal);
|
||||
border-radius: 12px;
|
||||
transition: color var(--fast) var(--transition),
|
||||
background-color var(--fast) var(--transition);
|
||||
transition: color var(--fast) var(--transition), background-color var(--fast) var(--transition);
|
||||
}
|
||||
|
||||
&:hover span {
|
||||
|
||||
@@ -51,10 +51,7 @@ export default defineComponent({
|
||||
setup(props) {
|
||||
const projectsStore = useProjectsStore();
|
||||
|
||||
const { activity, loading, error, refresh } = useActivity(
|
||||
props.collection,
|
||||
props.primaryKey
|
||||
);
|
||||
const { activity, loading, error, refresh } = useActivity(props.collection, props.primaryKey);
|
||||
|
||||
return {
|
||||
activity,
|
||||
@@ -77,29 +74,26 @@ export default defineComponent({
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
const response = await api.get(
|
||||
`/${projectsStore.state.currentProjectKey}/activity`,
|
||||
{
|
||||
params: {
|
||||
'filter[collection][eq]': collection,
|
||||
'filter[item][eq]': primaryKey,
|
||||
'filter[action][in]': 'comment',
|
||||
'filter[comment_deleted_on][null]': 1,
|
||||
sort: '-id', // directus_activity has auto increment and is therefore in chronological order
|
||||
fields: [
|
||||
'id',
|
||||
'action',
|
||||
'action_on',
|
||||
'action_by.id',
|
||||
'action_by.first_name',
|
||||
'action_by.last_name',
|
||||
'action_by.avatar.data',
|
||||
'comment',
|
||||
'edited_on',
|
||||
],
|
||||
},
|
||||
}
|
||||
);
|
||||
const response = await api.get(`/${projectsStore.state.currentProjectKey}/activity`, {
|
||||
params: {
|
||||
'filter[collection][eq]': collection,
|
||||
'filter[item][eq]': primaryKey,
|
||||
'filter[action][in]': 'comment',
|
||||
'filter[comment_deleted_on][null]': 1,
|
||||
sort: '-id', // directus_activity has auto increment and is therefore in chronological order
|
||||
fields: [
|
||||
'id',
|
||||
'action',
|
||||
'action_on',
|
||||
'action_by.id',
|
||||
'action_by.first_name',
|
||||
'action_by.last_name',
|
||||
'action_by.avatar.data',
|
||||
'comment',
|
||||
'edited_on',
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
const activityByDate = groupBy(response.data.data, (activity: Activity) => {
|
||||
// activity's action_on date is in iso-8601
|
||||
@@ -120,15 +114,8 @@ export default defineComponent({
|
||||
if (today) dateFormatted = i18n.t('today');
|
||||
else if (yesterday) dateFormatted = i18n.t('yesterday');
|
||||
else if (thisYear)
|
||||
dateFormatted = await formatLocalized(
|
||||
date,
|
||||
String(i18n.t('date-fns_date_short_no_year'))
|
||||
);
|
||||
else
|
||||
dateFormatted = await formatLocalized(
|
||||
date,
|
||||
String(i18n.t('date-fns_date_short'))
|
||||
);
|
||||
dateFormatted = await formatLocalized(date, String(i18n.t('date-fns_date_short_no_year')));
|
||||
else dateFormatted = await formatLocalized(date, String(i18n.t('date-fns_date_short')));
|
||||
|
||||
activityGrouped.push({
|
||||
date: date,
|
||||
|
||||
@@ -28,12 +28,7 @@
|
||||
<v-icon class="remove" name="close" @click="$emit('remove')" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<filter-input
|
||||
v-model="value"
|
||||
:type="parsedField.type"
|
||||
:operator="activeOperator"
|
||||
:disabled="disabled"
|
||||
/>
|
||||
<filter-input v-model="value" :type="parsedField.type" :operator="activeOperator" :disabled="disabled" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -18,13 +18,7 @@
|
||||
|
||||
<v-menu attached close-on-content-click :disabled="loading">
|
||||
<template #activator="{ toggle, active }">
|
||||
<v-input
|
||||
@click="toggle"
|
||||
:class="{ active }"
|
||||
readonly
|
||||
:value="$t('add_filter')"
|
||||
:disabled="loading"
|
||||
>
|
||||
<v-input @click="toggle" :class="{ active }" readonly :value="$t('add_filter')" :disabled="loading">
|
||||
<template #prepend><v-icon name="add" /></template>
|
||||
<template #append><v-icon name="expand_more" /></template>
|
||||
</v-input>
|
||||
@@ -78,10 +72,7 @@ export default defineComponent({
|
||||
const fieldTree = computed<FieldTree[]>(() => {
|
||||
return fieldsStore
|
||||
.getFieldsForCollection(props.collection)
|
||||
.filter(
|
||||
(field: Field) =>
|
||||
field.hidden_browse === false && field.type.toLowerCase() !== 'alias'
|
||||
)
|
||||
.filter((field: Field) => field.hidden_browse === false && field.type.toLowerCase() !== 'alias')
|
||||
.map((field: Field) => parseField(field, []));
|
||||
|
||||
function parseField(field: Field, parents: Field[]) {
|
||||
@@ -94,10 +85,7 @@ export default defineComponent({
|
||||
return fieldInfo;
|
||||
}
|
||||
|
||||
const relations = relationsStore.getRelationsForField(
|
||||
field.collection,
|
||||
field.field
|
||||
);
|
||||
const relations = relationsStore.getRelationsForField(field.collection, field.field);
|
||||
|
||||
if (relations.length > 0) {
|
||||
const relatedFields = relations
|
||||
@@ -113,8 +101,7 @@ export default defineComponent({
|
||||
.getFieldsForCollection(relatedCollection)
|
||||
.filter(
|
||||
(field: Field) =>
|
||||
field.hidden_browse === false &&
|
||||
field.type.toLowerCase() !== 'alias'
|
||||
field.hidden_browse === false && field.type.toLowerCase() !== 'alias'
|
||||
);
|
||||
})
|
||||
.flat()
|
||||
|
||||
@@ -45,13 +45,7 @@
|
||||
</template>
|
||||
<template v-else-if="['empty', 'nempty'].includes(operator) === false">
|
||||
<v-checkbox v-if="type === 'checkbox'" :inputValue="_value" :disabled="disabled" />
|
||||
<v-input
|
||||
:disabled="disabled"
|
||||
v-else
|
||||
v-model="_value"
|
||||
:type="type"
|
||||
:placeholder="$t('enter_a_value')"
|
||||
/>
|
||||
<v-input :disabled="disabled" v-else v-model="_value" :type="type" :placeholder="$t('enter_a_value')" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -8,14 +8,7 @@
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<v-button
|
||||
class="drawer-toggle"
|
||||
icon
|
||||
rounded
|
||||
secondary
|
||||
outlined
|
||||
@click="$emit('toggle:drawer')"
|
||||
>
|
||||
<v-button class="drawer-toggle" icon rounded secondary outlined @click="$emit('toggle:drawer')">
|
||||
<v-icon name="info" />
|
||||
</v-button>
|
||||
</div>
|
||||
|
||||
@@ -16,18 +16,9 @@
|
||||
error
|
||||
</v-notice>
|
||||
|
||||
<div
|
||||
v-show="imageData && imageData.data.full_url && !loading && !error"
|
||||
class="editor-container"
|
||||
>
|
||||
<div v-show="imageData && imageData.data.full_url && !loading && !error" class="editor-container">
|
||||
<div class="editor">
|
||||
<img
|
||||
ref="imageElement"
|
||||
:src="imageURL"
|
||||
role="presentation"
|
||||
alt=""
|
||||
@load="onImageLoad"
|
||||
/>
|
||||
<img ref="imageElement" :src="imageURL" role="presentation" alt="" @load="onImageLoad" />
|
||||
</div>
|
||||
|
||||
<div class="toolbar">
|
||||
@@ -40,11 +31,7 @@
|
||||
<v-icon name="crop" :class="{ active: dragMode === 'crop' }" />
|
||||
</div>
|
||||
|
||||
<v-icon
|
||||
name="rotate_90_degrees_ccw"
|
||||
@click="rotate"
|
||||
v-tooltip.bottom.inverted="$t('rotate')"
|
||||
/>
|
||||
<v-icon name="rotate_90_degrees_ccw" @click="rotate" v-tooltip.bottom.inverted="$t('rotate')" />
|
||||
|
||||
<v-icon
|
||||
name="flip_horizontal"
|
||||
@@ -182,16 +169,7 @@ export default defineComponent({
|
||||
},
|
||||
});
|
||||
|
||||
const {
|
||||
loading,
|
||||
error,
|
||||
imageData,
|
||||
imageElement,
|
||||
save,
|
||||
saving,
|
||||
fetchImage,
|
||||
onImageLoad,
|
||||
} = useImage();
|
||||
const { loading, error, imageData, imageElement, save, saving, fetchImage, onImageLoad } = useImage();
|
||||
|
||||
const {
|
||||
cropperInstance,
|
||||
@@ -268,14 +246,7 @@ export default defineComponent({
|
||||
loading.value = true;
|
||||
const response = await api.get(`/${currentProjectKey}/files/${props.id}`, {
|
||||
params: {
|
||||
fields: [
|
||||
'data',
|
||||
'type',
|
||||
'filesize',
|
||||
'filename_download',
|
||||
'width',
|
||||
'height',
|
||||
],
|
||||
fields: ['data', 'type', 'filesize', 'filename_download', 'width', 'height'],
|
||||
},
|
||||
});
|
||||
|
||||
@@ -425,10 +396,7 @@ export default defineComponent({
|
||||
crop: throttle((event) => {
|
||||
if (!imageData.value) return;
|
||||
|
||||
if (
|
||||
cropping.value === false &&
|
||||
(event.detail.width || event.detail.height)
|
||||
) {
|
||||
if (cropping.value === false && (event.detail.width || event.detail.height)) {
|
||||
cropping.value = true;
|
||||
}
|
||||
|
||||
|
||||
@@ -19,14 +19,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent,
|
||||
PropType,
|
||||
ref,
|
||||
computed,
|
||||
toRefs,
|
||||
onUnmounted,
|
||||
} from '@vue/composition-api';
|
||||
import { defineComponent, PropType, ref, computed, toRefs, onUnmounted } from '@vue/composition-api';
|
||||
import { Filter } from '@/stores/collection-presets/types';
|
||||
import useCollectionPreset from '@/composables/use-collection-preset';
|
||||
|
||||
|
||||
@@ -56,10 +56,8 @@ export const withCustomLogo = () =>
|
||||
project_logo: {
|
||||
full_url:
|
||||
'https://demo.directus.io/uploads/thumper/originals/19acff06-4969-5c75-9cd5-dc3f27506de2.svg',
|
||||
url:
|
||||
'/uploads/thumper/originals/19acff06-4969-5c75-9cd5-dc3f27506de2.svg',
|
||||
asset_url:
|
||||
'/uploads/thumper/originals/19acff06-4969-5c75-9cd5-dc3f27506de2.svg',
|
||||
url: '/uploads/thumper/originals/19acff06-4969-5c75-9cd5-dc3f27506de2.svg',
|
||||
asset_url: '/uploads/thumper/originals/19acff06-4969-5c75-9cd5-dc3f27506de2.svg',
|
||||
},
|
||||
project_color: '#4CAF50',
|
||||
project_foreground: null,
|
||||
|
||||
@@ -1,21 +1,10 @@
|
||||
<template>
|
||||
<component
|
||||
:is="url ? 'a' : 'div'"
|
||||
:href="url"
|
||||
target="_blank"
|
||||
ref="noopener noreferer"
|
||||
class="module-bar-logo"
|
||||
>
|
||||
<component :is="url ? 'a' : 'div'" :href="url" target="_blank" ref="noopener noreferer" class="module-bar-logo">
|
||||
<template v-if="customLogoPath">
|
||||
<v-progress-circular indeterminate v-if="showLoader" />
|
||||
<img v-else class="custom-logo" :src="customLogoPath" alt="Project Logo" />
|
||||
</template>
|
||||
<div
|
||||
v-else
|
||||
class="logo"
|
||||
:class="{ running: showLoader }"
|
||||
@animationiteration="stopRunningIfQueueIsEmpty"
|
||||
/>
|
||||
<div v-else class="logo" :class="{ running: showLoader }" @animationiteration="stopRunningIfQueueIsEmpty" />
|
||||
</component>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -48,11 +48,7 @@ export default defineComponent({
|
||||
const _modules = computed(() => {
|
||||
const customModuleListing = userStore.state.currentUser?.role.module_listing;
|
||||
|
||||
if (
|
||||
customModuleListing &&
|
||||
Array.isArray(customModuleListing) &&
|
||||
customModuleListing.length > 0
|
||||
) {
|
||||
if (customModuleListing && Array.isArray(customModuleListing) && customModuleListing.length > 0) {
|
||||
return customModuleListing.map((custom) => {
|
||||
if (custom.link.startsWith('http') || custom.link.startsWith('//')) {
|
||||
return {
|
||||
@@ -76,10 +72,7 @@ export default defineComponent({
|
||||
}))
|
||||
.filter((module) => {
|
||||
if (module.hidden !== undefined) {
|
||||
if (
|
||||
(module.hidden as boolean) === true ||
|
||||
(module.hidden as Ref<boolean>).value === true
|
||||
) {
|
||||
if ((module.hidden as boolean) === true || (module.hidden as Ref<boolean>).value === true) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,11 +3,7 @@
|
||||
<transition-expand tag="div">
|
||||
<div v-if="active" class="inline">
|
||||
<div class="padding-box">
|
||||
<router-link
|
||||
class="link"
|
||||
:to="activityLink"
|
||||
:class="{ 'has-items': lastFour.length > 0 }"
|
||||
>
|
||||
<router-link class="link" :to="activityLink" :class="{ 'has-items': lastFour.length > 0 }">
|
||||
{{ $t('show_all_activity') }}
|
||||
</router-link>
|
||||
<transition-group tag="div" name="notification" class="transition">
|
||||
|
||||
@@ -1,11 +1,6 @@
|
||||
<template>
|
||||
<div class="project-chooser" :class="{ active }">
|
||||
<button
|
||||
ref="activator"
|
||||
class="toggle"
|
||||
:disabled="projects.length === 1"
|
||||
@click="active = !active"
|
||||
>
|
||||
<button ref="activator" class="toggle" :disabled="projects.length === 1" @click="active = !active">
|
||||
<latency-indicator />
|
||||
<span class="name">{{ currentProject.name }}</span>
|
||||
<v-icon class="icon" name="expand_more" />
|
||||
@@ -114,8 +109,7 @@ export default defineComponent({
|
||||
color: var(--foreground-subdued);
|
||||
transform: rotate(0deg);
|
||||
opacity: 0;
|
||||
transition: opacity var(--fast) var(--transition),
|
||||
transform var(--medium) var(--transition);
|
||||
transition: opacity var(--fast) var(--transition), transform var(--medium) var(--transition);
|
||||
}
|
||||
|
||||
&:hover .icon {
|
||||
|
||||
@@ -59,9 +59,7 @@ export default defineComponent({
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const displayInfo = computed(
|
||||
() => displays.find((display) => display.id === props.display) || null
|
||||
);
|
||||
const displayInfo = computed(() => displays.find((display) => display.id === props.display) || null);
|
||||
return { displayInfo };
|
||||
},
|
||||
});
|
||||
|
||||
@@ -54,17 +54,11 @@ export default defineComponent({
|
||||
});
|
||||
|
||||
const time = computed(() => {
|
||||
return format(
|
||||
new Date(props.revision.activity.action_on),
|
||||
String(i18n.t('date-fns_time'))
|
||||
);
|
||||
return format(new Date(props.revision.activity.action_on), String(i18n.t('date-fns_time')));
|
||||
});
|
||||
|
||||
const user = computed(() => {
|
||||
if (
|
||||
props.revision.activity.action_by !== null &&
|
||||
typeof props.revision.activity.action_by === 'object'
|
||||
) {
|
||||
if (props.revision.activity.action_by !== null && typeof props.revision.activity.action_by === 'object') {
|
||||
const { first_name, last_name } = props.revision.activity.action_by as {
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
|
||||
@@ -138,16 +138,11 @@ export default defineComponent({
|
||||
}
|
||||
);
|
||||
|
||||
const revisionsGroupedByDate = groupBy(
|
||||
response.data.data,
|
||||
(revision: Revision) => {
|
||||
// revision's action_on date is in iso-8601
|
||||
const date = new Date(
|
||||
new Date(revision.activity.action_on).toDateString()
|
||||
);
|
||||
return date;
|
||||
}
|
||||
);
|
||||
const revisionsGroupedByDate = groupBy(response.data.data, (revision: Revision) => {
|
||||
// revision's action_on date is in iso-8601
|
||||
const date = new Date(new Date(revision.activity.action_on).toDateString());
|
||||
return date;
|
||||
});
|
||||
|
||||
const revisionsGrouped: RevisionsByDate[] = [];
|
||||
|
||||
@@ -162,15 +157,8 @@ export default defineComponent({
|
||||
if (today) dateFormatted = i18n.t('today');
|
||||
else if (yesterday) dateFormatted = i18n.t('yesterday');
|
||||
else if (thisYear)
|
||||
dateFormatted = await formatLocalized(
|
||||
date,
|
||||
String(i18n.t('date-fns_date_short_no_year'))
|
||||
);
|
||||
else
|
||||
dateFormatted = await formatLocalized(
|
||||
date,
|
||||
String(i18n.t('date-fns_date_short'))
|
||||
);
|
||||
dateFormatted = await formatLocalized(date, String(i18n.t('date-fns_date_short_no_year')));
|
||||
else dateFormatted = await formatLocalized(date, String(i18n.t('date-fns_date_short')));
|
||||
|
||||
revisionsGrouped.push({
|
||||
date: date,
|
||||
|
||||
@@ -79,15 +79,9 @@ export default defineComponent({
|
||||
return { _current, options, selectedOption };
|
||||
|
||||
async function getFormattedDate(revision: Revision) {
|
||||
const date = await localizedFormat(
|
||||
new Date(revision!.activity.action_on),
|
||||
String(i18n.t('date-fns_date'))
|
||||
);
|
||||
const date = await localizedFormat(new Date(revision!.activity.action_on), String(i18n.t('date-fns_date')));
|
||||
|
||||
const time = await localizedFormat(
|
||||
new Date(revision!.activity.action_on),
|
||||
String(i18n.t('date-fns_time'))
|
||||
);
|
||||
const time = await localizedFormat(new Date(revision!.activity.action_on), String(i18n.t('date-fns_time')));
|
||||
|
||||
return `${date} (${time})`;
|
||||
}
|
||||
|
||||
@@ -1,10 +1,5 @@
|
||||
<template>
|
||||
<v-form
|
||||
disabled
|
||||
:collection="revision.collection"
|
||||
:primary-key="revision.item"
|
||||
:initial-values="revision.data"
|
||||
/>
|
||||
<v-form disabled :collection="revision.collection" :primary-key="revision.item" :initial-values="revision.data" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@@ -31,9 +31,7 @@ export default defineComponent({
|
||||
const fieldsStore = useFieldsStore();
|
||||
|
||||
const previousRevision = computed(() => {
|
||||
const currentIndex = props.revisions.findIndex(
|
||||
(revision) => revision.id === props.revision.id
|
||||
);
|
||||
const currentIndex = props.revisions.findIndex((revision) => revision.id === props.revision.id);
|
||||
|
||||
// This is assuming props.revisions is in chronological order from newest to oldest
|
||||
return props.revisions[currentIndex + 1];
|
||||
|
||||
@@ -13,10 +13,7 @@
|
||||
</template>
|
||||
|
||||
<div class="content">
|
||||
<revisions-modal-preview
|
||||
v-if="currentTab[0] === 'preview'"
|
||||
:revision="currentRevision"
|
||||
/>
|
||||
<revisions-modal-preview v-if="currentTab[0] === 'preview'" :revision="currentRevision" />
|
||||
<revisions-modal-updates
|
||||
v-if="currentTab[0] === 'updates'"
|
||||
:revision="currentRevision"
|
||||
|
||||
@@ -3,12 +3,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
|
||||
import VueCompositionAPI from '@vue/composition-api';
|
||||
import { i18n } from '@/lang';
|
||||
|
||||
import VList, {
|
||||
VListItem,
|
||||
VListItemIcon,
|
||||
VListItemContent,
|
||||
VListItemHint,
|
||||
} from '@/components/v-list/';
|
||||
import VList, { VListItem, VListItemIcon, VListItemContent, VListItemHint } from '@/components/v-list/';
|
||||
import VIcon from '@/components/v-icon';
|
||||
import VMenu from '@/components/v-menu';
|
||||
|
||||
|
||||
@@ -33,10 +33,7 @@ export default defineComponent({
|
||||
}
|
||||
});
|
||||
|
||||
const emitValue = debounce(
|
||||
(event: InputEvent) => emit('input', (event.target as HTMLInputElement).value),
|
||||
850
|
||||
);
|
||||
const emitValue = debounce((event: InputEvent) => emit('input', (event.target as HTMLInputElement).value), 850);
|
||||
|
||||
return { active, disable, input, emitValue, emptyAndClose };
|
||||
|
||||
|
||||
@@ -22,9 +22,7 @@
|
||||
</v-avatar>
|
||||
<div class="data">
|
||||
<div class="name type-title">{{ data.first_name }} {{ data.last_name }}</div>
|
||||
<div class="status-role" :class="data.status">
|
||||
{{ $t(data.status) }} {{ data.role.name }}
|
||||
</div>
|
||||
<div class="status-role" :class="data.status">{{ $t(data.status) }} {{ data.role.name }}</div>
|
||||
<div class="email">{{ data.email }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -64,9 +62,8 @@ export default defineComponent({
|
||||
const avatarSrc = computed(() => {
|
||||
if (data.value === null) return null;
|
||||
|
||||
return data.value.avatar?.data?.thumbnails?.find(
|
||||
(thumbnail) => thumbnail.key === 'directus-medium-crop'
|
||||
)?.url;
|
||||
return data.value.avatar?.data?.thumbnails?.find((thumbnail) => thumbnail.key === 'directus-medium-crop')
|
||||
?.url;
|
||||
});
|
||||
|
||||
const active = ref(false);
|
||||
@@ -93,14 +90,7 @@ export default defineComponent({
|
||||
try {
|
||||
const response = await api.get(`/${currentProjectKey}/users/${props.user}`, {
|
||||
params: {
|
||||
fields: [
|
||||
'first_name',
|
||||
'last_name',
|
||||
'avatar.data',
|
||||
'role.name',
|
||||
'status',
|
||||
'email',
|
||||
],
|
||||
fields: ['first_name', 'last_name', 'avatar.data', 'role.name', 'status', 'email'],
|
||||
},
|
||||
});
|
||||
data.value = response.data.data;
|
||||
|
||||
@@ -1,11 +1,6 @@
|
||||
<template>
|
||||
<div class="private-view" :class="{ theme, dragging }">
|
||||
<aside
|
||||
role="navigation"
|
||||
aria-label="Module Navigation"
|
||||
class="navigation"
|
||||
:class="{ 'is-open': navOpen }"
|
||||
>
|
||||
<aside role="navigation" aria-label="Module Navigation" class="navigation" :class="{ 'is-open': navOpen }">
|
||||
<module-bar />
|
||||
<div class="module-nav alt-colors">
|
||||
<project-chooser />
|
||||
@@ -16,15 +11,8 @@
|
||||
</div>
|
||||
</aside>
|
||||
<div class="content" ref="contentEl">
|
||||
<header-bar
|
||||
:title="title"
|
||||
@toggle:drawer="drawerOpen = !drawerOpen"
|
||||
@toggle:nav="navOpen = !navOpen"
|
||||
>
|
||||
<template
|
||||
v-for="(_, scopedSlotName) in $scopedSlots"
|
||||
v-slot:[scopedSlotName]="slotData"
|
||||
>
|
||||
<header-bar :title="title" @toggle:drawer="drawerOpen = !drawerOpen" @toggle:nav="navOpen = !navOpen">
|
||||
<template v-for="(_, scopedSlotName) in $scopedSlots" v-slot:[scopedSlotName]="slotData">
|
||||
<slot :name="scopedSlotName" v-bind="slotData" />
|
||||
</template>
|
||||
</header-bar>
|
||||
@@ -112,14 +100,7 @@ export default defineComponent({
|
||||
|
||||
provide('main-element', contentEl);
|
||||
|
||||
const {
|
||||
onDragEnter,
|
||||
onDragLeave,
|
||||
onDrop,
|
||||
onDragOver,
|
||||
showDropEffect,
|
||||
dragging,
|
||||
} = useFileUpload();
|
||||
const { onDragEnter, onDragLeave, onDrop, onDragOver, showDropEffect, dragging } = useFileUpload();
|
||||
|
||||
useEventListener(window, 'dragenter', onDragEnter);
|
||||
useEventListener(window, 'dragover', onDragOver);
|
||||
@@ -174,9 +155,7 @@ export default defineComponent({
|
||||
event.preventDefault();
|
||||
dragCounter.value++;
|
||||
|
||||
const isDropzone =
|
||||
event.target &&
|
||||
(event.target as HTMLElement).getAttribute?.('data-dropzone') === '';
|
||||
const isDropzone = event.target && (event.target as HTMLElement).getAttribute?.('data-dropzone') === '';
|
||||
|
||||
if (
|
||||
dragCounter.value === 1 &&
|
||||
@@ -205,10 +184,7 @@ export default defineComponent({
|
||||
disableDropEffect();
|
||||
}
|
||||
|
||||
if (
|
||||
event.target &&
|
||||
(event.target as HTMLElement).getAttribute?.('data-dropzone') === ''
|
||||
) {
|
||||
if (event.target && (event.target as HTMLElement).getAttribute?.('data-dropzone') === '') {
|
||||
enableDropEffect();
|
||||
dragCounter.value = 1;
|
||||
}
|
||||
@@ -241,8 +217,7 @@ export default defineComponent({
|
||||
});
|
||||
|
||||
await uploadFiles(files, (progress) => {
|
||||
const percentageDone =
|
||||
progress.reduce((val, cur) => (val += cur)) / progress.length;
|
||||
const percentageDone = progress.reduce((val, cur) => (val += cur)) / progress.length;
|
||||
|
||||
const total = files.length;
|
||||
const done = progress.filter((p) => p === 100).length;
|
||||
|
||||
@@ -1,11 +1,5 @@
|
||||
<template>
|
||||
<v-menu
|
||||
v-if="project"
|
||||
show-arrow
|
||||
placement="bottom-start"
|
||||
close-on-content-click
|
||||
:disabled="projects.length <= 1"
|
||||
>
|
||||
<v-menu v-if="project" show-arrow placement="bottom-start" close-on-content-click :disabled="projects.length <= 1">
|
||||
<template #activator="{ toggle }">
|
||||
<div class="project-chooser" @click="toggle">
|
||||
<div class="public-view-logo" v-if="project && project.logo">
|
||||
|
||||
@@ -30,21 +30,18 @@ const mockProject: ProjectWithKey = {
|
||||
database: 'mysql',
|
||||
project_name: 'Thumper',
|
||||
project_logo: {
|
||||
full_url:
|
||||
'http://localhost:8080/uploads/my-project/originals/19acff06-4969-5c75-9cd5-dc3f27506de2.svg',
|
||||
full_url: 'http://localhost:8080/uploads/my-project/originals/19acff06-4969-5c75-9cd5-dc3f27506de2.svg',
|
||||
url: '/uploads/my-project/originals/19acff06-4969-5c75-9cd5-dc3f27506de2.svg',
|
||||
asset_url: '/uploads/my-project/assets/abc',
|
||||
},
|
||||
project_color: '#4CAF50',
|
||||
project_foreground: {
|
||||
full_url:
|
||||
'http://localhost:8080/uploads/my-project/originals/f28c49b0-2b4f-571e-bf62-593107cbf2ec.svg',
|
||||
full_url: 'http://localhost:8080/uploads/my-project/originals/f28c49b0-2b4f-571e-bf62-593107cbf2ec.svg',
|
||||
url: '/uploads/my-project/originals/f28c49b0-2b4f-571e-bf62-593107cbf2ec.svg',
|
||||
asset_url: '/uploads/my-project/assets/abc',
|
||||
},
|
||||
project_background: {
|
||||
full_url:
|
||||
'http://localhost:8080/uploads/my-project/originals/03a06753-6794-4b9a-803b-3e1cd15e0742.jpg',
|
||||
full_url: 'http://localhost:8080/uploads/my-project/originals/03a06753-6794-4b9a-803b-3e1cd15e0742.jpg',
|
||||
url: '/uploads/my-project/originals/03a06753-6794-4b9a-803b-3e1cd15e0742.jpg',
|
||||
asset_url: '/uploads/my-project/assets/abc',
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user