FoundKeyGang/FoundKey
FoundKeyGang/FoundKey
7
19
Fork 22
Code Issues 37 Pull requests 4 Releases Activity

refactor: post-form-attaches to composition api

Browse source
This commit is contained in:
Norm 2022-08-05 15:33:27 -04:00
parent 4934303956
commit 0ce09d6753
2 changed files with 101 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

211
packages/client/src/components/post-form-attaches.vue
View file

@ -14,123 +14,112 @@
</div>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue';
<script lang="ts" setup>
import { defineProps, defineAsyncComponent, defineEmits, computed } from 'vue';
import { DriveFile } from 'misskey-js/built/entities';
import MkDriveFileThumbnail from './drive-file-thumbnail.vue';
import * as os from '@/os';
import { i18n } from '@/i18n';
export default defineComponent({
components: {
XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
MkDriveFileThumbnail,
const XDraggable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
const props = defineProps<{
files: DriveFile[];
detachMediaFn?: (id: string) => void;
}>();
const emit = defineEmits<{
(ev: 'updated', value: DriveFile[]): void;
(ev: 'detach', id: string): void;
(ev: 'changeSensitive', file: DriveFile, isSensitive: boolean): void;
(ev: 'changeName', file: DriveFile, name: string): void;
}>();
let menu: Promise<null> | null = $ref(null);
const _files = computed({
get() {
return props.files;
},
props: {
files: {
type: Array,
required: true,
},
detachMediaFn: {
type: Function,
required: false,
},
},
emits: ['updated', 'detach', 'changeSensitive', 'changeName'],
data() {
return {
menu: null as Promise<null> | null,
};
},
computed: {
_files: {
get() {
return this.files;
},
set(value) {
this.$emit('updated', value);
},
},
},
methods: {
detachMedia(id) {
if (this.detachMediaFn) {
this.detachMediaFn(id);
} else {
this.$emit('detach', id);
}
},
toggleSensitive(file) {
os.api('drive/files/update', {
fileId: file.id,
isSensitive: !file.isSensitive,
}).then(() => {
this.$emit('changeSensitive', file, !file.isSensitive);
});
},
async rename(file) {
const { canceled, result } = await os.inputText({
title: this.$ts.enterFileName,
default: file.name,
allowEmpty: false,
});
if (canceled) return;
os.api('drive/files/update', {
fileId: file.id,
name: result,
}).then(() => {
this.$emit('changeName', file, result);
file.name = result;
});
},
async describe(file) {
os.popup(defineAsyncComponent(() => import('@/components/media-caption.vue')), {
title: this.$ts.describeFile,
input: {
placeholder: this.$ts.inputNewDescription,
default: file.comment !== null ? file.comment : '',
},
image: file,
}, {
done: result => {
if (!result || result.canceled) return;
let comment = result.result.length === 0 ? null : result.result;
os.api('drive/files/update', {
fileId: file.id,
comment,
}).then(() => {
file.comment = comment;
});
},
}, 'closed');
},
showFileMenu(file, ev: MouseEvent) {
if (this.menu) return;
this.menu = os.popupMenu([{
text: this.$ts.renameFile,
icon: 'fas fa-i-cursor',
action: () => { this.rename(file); },
}, {
text: file.isSensitive ? this.$ts.unmarkAsSensitive : this.$ts.markAsSensitive,
icon: file.isSensitive ? 'fas fa-eye-slash' : 'fas fa-eye',
action: () => { this.toggleSensitive(file); },
}, {
text: this.$ts.describeFile,
icon: 'fas fa-i-cursor',
action: () => { this.describe(file); },
}, {
text: this.$ts.attachCancel,
icon: 'fas fa-times-circle',
action: () => { this.detachMedia(file.id); },
}], ev.currentTarget ?? ev.target).then(() => this.menu = null);
},
set(value: DriveFile[]) {
emit('updated', value);
},
});
function detachMedia(id: string): void {
if (props.detachMediaFn) {
props.detachMediaFn(id);
} else {
emit('detach', id);
}
}
function toggleSensitive(file: DriveFile): void {
os.api('drive/files/update', {
fileId: file.id,
isSensitive: !file.isSensitive,,
}).then(() => {
emit('changeSensitive', file, !file.isSensitive);
});
}
async function rename(file: DriveFile): Promise<void> {
const { canceled, result } = await os.inputText({
title: i18n.ts.enterFileName,
default: file.name,
allowEmpty: false,,
});
if (canceled) return;
os.api('drive/files/update', {
fileId: file.id,
name: result,,
}).then(() => {
emit('changeName', file, result);
file.name = result;
});
}
async function describe(file: DriveFile): Promise<void> {
os.popup(defineAsyncComponent(() => import('@/components/media-caption.vue')), {
title: i18n.ts.describeFile,
input: {
placeholder: i18n.ts.inputNewDescription,
default: file.comment !== null ? file.comment : '',
},
image: file,
}, {
done: result => {
if (!result || result.canceled) return;
let comment = result.result.length === 0 ? null : result.result;
os.api('drive/files/update', {
fileId: file.id,
comment,
}).then(() => {
file.comment = comment;
});
},
}, 'closed');
}
function showFileMenu(file: DriveFile, ev: MouseEvent): void {
if (menu) return;
menu = os.popupMenu([{
text: i18n.ts.renameFile,
icon: 'fas fa-i-cursor',
action: (): void => { rename(file); },
}, {
text: file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
icon: file.isSensitive ? 'fas fa-eye-slash' : 'fas fa-eye',
action: (): void => { toggleSensitive(file); },
}, {
text: i18n.ts.describeFile,
icon: 'fas fa-i-cursor',
action: (): void => { describe(file); },
}, {
text: i18n.ts.attachCancel,
icon: 'fas fa-times-circle',
action: (): void => { detachMedia(file.id); },
}], ev.currentTarget ?? ev.target).then(() => menu = null);
}
</script>
<style lang="scss" scoped>

1
packages/client/src/os.ts
View file

@ -239,6 +239,7 @@ export function inputText(props: {
text?: string | null;
placeholder?: string | null;
default?: string | null;
allowEmpty?: boolean;
}): Promise<{ canceled: true; result: undefined; } | {
canceled: false; result: string;
}> {