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.

Sign up for GitHub

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: Add dialog component #7553

Merged
merged 1 commit into from
Dec 24, 2024
Merged

feat: Add dialog component #7553

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions frontend/src/components/backup/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,12 +67,11 @@
</template>
</DrawerPro>

<el-dialog
<DialogPro
v-model="open"
:title="isBackup ? $t('commons.button.backup') : $t('commons.button.recover') + ' - ' + name"
width="30%"
:close-on-click-modal="false"
:before-close="handleBackupClose"
size="small"
@close="handleBackupClose"
>
<el-form ref="backupForm" label-position="left" v-loading="loading">
<el-form-item
Expand All @@ -93,7 +92,7 @@
</el-button>
</span>
</template>
</el-dialog>
</DialogPro>

<OpDialog ref="opRef" @search="search" />
<TaskLog ref="taskLogRef" @close="search" />
Expand Down
9 changes: 2 additions & 7 deletions frontend/src/components/confirm-dialog/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
<template>
<el-dialog v-model="submitVisible" :destroy-on-close="true" :close-on-click-modal="false" width="20%">
<template #header>
<div class="card-header">
<span>{{ header }}</span>
</div>
</template>
<DialogPro v-model="submitVisible" :title="header" size="mini">
<div>
<span v-if="operationInfo" style="font-size: 12px">{{ operationInfo }}</span>
<div :style="{ 'margin-top': operationInfo ? '10px' : '0px' }">
Expand All @@ -23,7 +18,7 @@
</el-button>
</span>
</template>
</el-dialog>
</DialogPro>
</template>

<script lang="ts" setup>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/del-dialog/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div>
<el-dialog v-model="open" :title="form.title" width="30%" :close-on-click-modal="false" @close="handleClose">
<DialogPro v-model="open" :title="form.title" size="small" @close="handleClose">
<div v-loading="loading">
<el-row type="flex" justify="center">
<el-col :span="22">
Expand Down Expand Up @@ -30,7 +30,7 @@
</el-button>
</span>
</template>
</el-dialog>
</DialogPro>
</div>
</template>

Expand Down
29 changes: 27 additions & 2 deletions frontend/src/components/dialog-pro/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,13 @@
v-model="dialogVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:show-close="showClose"
:width="size"
:open="open"
@opened="opened"
:before-close="handleBeforeClose"
>
<slot name="header"></slot>
<div v-if="slots.content">
<slot name="content"></slot>
</div>
Expand All @@ -27,6 +32,10 @@ defineOptions({ name: 'DrawerPro' });

const props = defineProps({
title: String,
showClose: {
type: Boolean,
default: true,
},
size: {
type: String,
default: 'normal',
Expand All @@ -39,10 +48,12 @@ const props = defineProps({

const slots = useSlots();

const emit = defineEmits(['update:modelValue', 'close']);
const emit = defineEmits(['update:modelValue', 'close', 'open', 'opened']);

const size = computed(() => {
switch (props.size) {
case 'mini':
return '20%';
case 'small':
return '30%';
case 'normal':
Expand All @@ -51,8 +62,12 @@ const size = computed(() => {
return '50%';
case 'full':
return '100%';
case '60%':
case 'w-60':
return '60%';
case 'w-70':
return '70%';
case 'w-90':
return '90%';
default:
return '50%';
}
Expand All @@ -66,4 +81,14 @@ const dialogVisible = computed({
emit('update:modelValue', value);
},
});

const handleBeforeClose = () => {
emit('close');
};
const open = () => {
emit('open');
};
const opened = () => {
emit('opened');
};
</script>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The provided code is not complete, but I can still give some general guidance on how to improve it.

For efficiency and usability, here's an optimized version of your component:

<div class="drawer-pro" ref="rootRef"> <!-- Use slot prop instead of slot name -->
    <transition :name="slideName">
        <nav-component
            :title="$t(slotTitle)"
            :visible.sync="dialogVisible"
            :close-on-click-modal="true"
        ></nav-component>

@vue-router:beforeEnter

      <template #prepend>
      <div>Header</div>;
  </template>
}

<script setup lang="ts">

import { watch } from 'vue';

defineAsyncComponent( async () => import('./components/Header.vue') );
import { DialogPro } from './DialogPro.js';

const props = defineProps<{ 
   ...}>({});

4 changes: 2 additions & 2 deletions frontend/src/components/license-import/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div>
<el-dialog class="level-up-pro" v-model="open" :close-on-click-modal="false" @close="handleClose">
<DialogPro v-model="open" class="level-up-pro" @close="handleClose">
<div style="text-align: center" v-loading="loading">
<span class="text-3xl font-medium title">{{ $t('license.levelUpPro') }}</span>
<el-row type="flex" justify="center" class="mt-6">
Expand Down Expand Up @@ -36,7 +36,7 @@
<el-button text type="primary" @click="toHalo">{{ $t('license.knowMorePro') }}</el-button>
</div>
</div>
</el-dialog>
</DialogPro>
</div>
</template>

Expand Down
16 changes: 5 additions & 11 deletions frontend/src/components/port-jump/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,17 @@
<template>
<div>
<el-dialog
v-model="dialogVisible"
:title="$t('app.checkTitle')"
width="30%"
:close-on-click-modal="false"
:destroy-on-close="true"
>
<DialogPro v-model="open" :title="$t('app.checkTitle')" size="small">
<el-alert :closable="false" :title="$t('setting.systemIPWarning')" type="info">
<el-link icon="Position" @click="goRouter('/settings/panel')" type="primary">
{{ $t('firewall.quickJump') }}
</el-link>
</el-alert>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button @click="open = false">{{ $t('commons.button.cancel') }}</el-button>
</span>
</template>
</el-dialog>
</DialogPro>
</div>
</template>
<script lang="ts" setup>
Expand All @@ -28,7 +22,7 @@ import { MsgError, MsgWarning } from '@/utils/message';
import { useRouter } from 'vue-router';
const router = useRouter();

const dialogVisible = ref();
const open = ref();

interface DialogProps {
port: any;
Expand All @@ -44,7 +38,7 @@ const acceptParams = async (params: DialogProps): Promise<void> => {
let protocol = params.protocol === 'https' ? 'https' : 'http';
const res = await getSettingInfo();
if (!res.data.systemIP) {
dialogVisible.value = true;
open.value = true;
return;
}
if (res.data.systemIP.indexOf(':') === -1) {
Expand Down
10 changes: 2 additions & 8 deletions frontend/src/components/upload/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,13 +104,7 @@
</template>
</DrawerPro>

<el-dialog
v-model="open"
:title="$t('commons.button.recover') + ' - ' + name"
width="40%"
:close-on-click-modal="false"
:before-close="handleBackupClose"
>
<DialogPro v-model="open" :title="$t('commons.button.recover') + ' - ' + name" @close="handleBackupClose">
<el-form ref="backupForm" label-position="left" v-loading="loading">
<el-form-item
:label="$t('setting.compressPassword')"
Expand All @@ -130,7 +124,7 @@
</el-button>
</span>
</template>
</el-dialog>
</DialogPro>

<OpDialog ref="opRef" @search="search" />
</div>
Expand Down
18 changes: 6 additions & 12 deletions frontend/src/components/vscode-open/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
<template>
<div>
<el-dialog
v-model="dialogVisible"
:title="$t('app.checkTitle')"
width="30%"
:close-on-click-modal="false"
:destroy-on-close="true"
>
<DialogPro v-model="open" :title="$t('app.checkTitle')" size="small">
<el-row>
<el-col :span="22" :offset="1">
<el-alert :closable="false" :title="$t('file.vscodeHelper')" type="info"></el-alert>
Expand Down Expand Up @@ -37,14 +31,14 @@
</el-button>
</span>
</template>
</el-dialog>
</DialogPro>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { FormInstance } from 'element-plus';

const dialogVisible = ref();
const open = ref();

interface DialogProps {
path: string;
Expand All @@ -60,7 +54,7 @@ const addForm = reactive({

const em = defineEmits(['close']);
const handleClose = () => {
dialogVisible.value = false;
open.value = false;
if (vscodeConnectInfoForm.value) {
vscodeConnectInfoForm.value.resetFields();
}
Expand All @@ -73,7 +67,7 @@ const submit = async (formEl: FormInstance | undefined) => {
return;
}
localStorage.setItem('VscodeConnectInfo', JSON.stringify(addForm));
dialogVisible.value = false;
open.value = false;
const vscodeUrl = `vscode://vscode-remote/ssh-remote+${addForm.username}@${addForm.host}:${addForm.port}${addForm.path}?windowId=_blank`;
window.open(vscodeUrl);
});
Expand All @@ -91,7 +85,7 @@ const acceptParams = async (params: DialogProps): Promise<void> => {
}

addForm.path = params.path;
dialogVisible.value = true;
open.value = true;
};

defineExpose({ acceptParams });
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code looks fine according to my knowledge cutoff of September 2021. There don't appear to be any obvious issues, problems with coding style, bugs or inconsistencies between components. Everything seems to function as intended.

To suggest some minor improvements based on common practices:

  1. Consider adding comments for the different sections and key points in the documentation to make it more accessible and understandable.

    Example: Add "export" statements for better readability.

  2. Implementing type hints in Vue components could enhance type safety and improve typing clarity in the future versions of Vue.

For example:

interface DialogProps {
   path:string;
}
  1. You can also consider using TypeScript instead of JavaScript as it is widely used now across Vue projects.
type DialogProps = {
   path: string;
};

This allows for automatic static types in Visual Studio Code Editor which can help reduce boilerplate code.

However, since this is an older version where these features may not exist yet:

These suggestions are more related to best development practices than addressing specific code errors within your snippet. The provided template file appears valid in terms of structure, but I will proceed assuming the above information applies to modern Vue.js implementations.

It's always a good practice to review component files in isolation before merging them into a main package. This ensures that all changes have gone through proper testing stages.

Expand Down
4 changes: 2 additions & 2 deletions frontend/src/views/app-store/installed/check/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<el-dialog v-model="open" :title="$t('app.checkTitle')" width="50%" :close-on-click-modal="false">
<DialogPro v-model="open" :title="$t('app.checkTitle')" size="large">
<el-row>
<el-col :span="20" :offset="2" v-if="open">
<el-alert
Expand Down Expand Up @@ -37,7 +37,7 @@
</el-button>
</span>
</template>
</el-dialog>
</DialogPro>
</template>
<script lang="ts" setup>
import { App } from '@/api/interface/app';
Expand Down
10 changes: 2 additions & 8 deletions frontend/src/views/app-store/installed/delete/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
<template>
<el-dialog
v-model="open"
:title="$t('commons.button.delete') + ' - ' + appInstallName"
width="40%"
:close-on-click-modal="false"
:before-close="handleClose"
>
<DialogPro v-model="open" :title="$t('commons.button.delete') + ' - ' + appInstallName" @close="handleClose">
<el-form ref="deleteForm" label-position="left" v-loading="loading">
<el-form-item>
<el-checkbox v-model="deleteReq.forceDelete" :label="$t('app.forceDelete')" />
Expand Down Expand Up @@ -46,7 +40,7 @@
</el-button>
</span>
</template>
</el-dialog>
</DialogPro>
<TaskLog ref="taskLogRef" @close="handleClose" />
</template>
<script lang="ts" setup>
Expand Down
10 changes: 2 additions & 8 deletions frontend/src/views/app-store/installed/upgrade/diff/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
<template>
<el-dialog
v-model="open"
:title="$t('app.composeDiff')"
:destroy-on-close="true"
:close-on-click-modal="false"
width="90%"
>
<DialogPro v-model="open" :title="$t('app.composeDiff')" @close="handleClose" size="w-90">
<div>
<el-text type="warning">{{ $t('app.diffHelper') }}</el-text>
<div ref="container" class="compose-diff"></div>
Expand All @@ -21,7 +15,7 @@
</el-button>
</span>
</template>
</el-dialog>
</DialogPro>
</template>

<script setup lang="ts">
Expand Down
17 changes: 6 additions & 11 deletions frontend/src/views/container/compose/delete/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
<template>
<el-dialog
v-model="dialogVisible"
:title="$t('commons.button.delete') + ' - ' + composeName"
width="30%"
:close-on-click-modal="false"
>
<DialogPro v-model="open" :title="$t('commons.button.delete') + ' - ' + composeName" size="small">
<el-form ref="deleteForm" v-loading="loading">
<el-form-item>
<el-checkbox v-model="deleteFile" :label="$t('container.allDelete')" />
Expand All @@ -23,15 +18,15 @@
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false" :disabled="loading">
<el-button @click="open = false" :disabled="loading">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button type="primary" @click="submit" :disabled="deleteInfo != composeName || loading">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</el-dialog>
</DialogPro>
</template>
<script lang="ts" setup>
import { FormInstance } from 'element-plus';
Expand All @@ -40,7 +35,7 @@ import i18n from '@/lang';
import { MsgSuccess } from '@/utils/message';
import { composeOperator } from '@/api/modules/container';

let dialogVisible = ref(false);
let open = ref(false);
let loading = ref(false);
let deleteInfo = ref('');

Expand All @@ -61,7 +56,7 @@ const acceptParams = async (prop: DialogProps) => {
composeName.value = prop.name;
composePath.value = prop.path;
deleteInfo.value = '';
dialogVisible.value = true;
open.value = true;
};

const submit = async () => {
Expand All @@ -77,7 +72,7 @@ const submit = async () => {
loading.value = false;
emit('search');
MsgSuccess(i18n.global.t('commons.msg.deleteSuccess'));
dialogVisible.value = false;
open.value = false;
})
.catch(() => {
loading.value = false;
Expand Down
Loading
Loading