4aa4e2549f
This is the continuation of the design update for the settings screens. In this PR, the automation page is updated with the latest design. - Moved the row to a new component - Migrated both components to composition API. - Order by ID (Earlier this was order by updated_at which was confusing). | Light | Dark | | -- | -- | | <img width="1438" alt="Screenshot 2024-08-21 at 9 46 48 PM" src="https://github.com/user-attachments/assets/89d96745-6556-48a1-82fa-a115325c24c0"> | <img width="1398" alt="Screenshot 2024-08-21 at 9 46 57 PM" src="https://github.com/user-attachments/assets/5f1935ec-6d0e-4f82-b895-f47244764474"> | --------- Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
80 lines
2.1 KiB
Vue
80 lines
2.1 KiB
Vue
<script setup>
|
|
import { messageStamp } from 'shared/helpers/timeHelper';
|
|
|
|
const props = defineProps({
|
|
automation: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
loading: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['toggle', 'edit', 'delete', 'clone']);
|
|
|
|
const readableDate = date => messageStamp(new Date(date), 'LLL d, yyyy');
|
|
const readableDateWithTime = date =>
|
|
messageStamp(new Date(date), 'LLL d, yyyy hh:mm a');
|
|
|
|
const toggle = () => {
|
|
const { id, name, active } = props.automation;
|
|
emit('toggle', {
|
|
id,
|
|
name,
|
|
status: active,
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<tr>
|
|
<td class="py-4 ltr:pr-4 rtl:pl-4 min-w-[200px]">{{ automation.name }}</td>
|
|
<td class="py-4 ltr:pr-4 rtl:pl-4">{{ automation.description }}</td>
|
|
<td class="py-4 ltr:pr-4 rtl:pl-4">
|
|
<woot-switch :value="automation.active" @input="toggle" />
|
|
</td>
|
|
<td
|
|
class="py-4 ltr:pr-4 rtl:pl-4 min-w-[12px]"
|
|
:title="readableDateWithTime(automation.created_on)"
|
|
>
|
|
{{ readableDate(automation.created_on) }}
|
|
</td>
|
|
<td class="py-4 min-w-xs">
|
|
<div class="flex gap-1 justify-end flex-shrink-0">
|
|
<woot-button
|
|
v-tooltip.top="$t('AUTOMATION.FORM.EDIT')"
|
|
variant="smooth"
|
|
size="tiny"
|
|
color-scheme="secondary"
|
|
class-names="grey-btn"
|
|
icon="edit"
|
|
:is-loading="loading"
|
|
@click="$emit('edit', automation)"
|
|
/>
|
|
<woot-button
|
|
v-tooltip.top="$t('AUTOMATION.CLONE.TOOLTIP')"
|
|
variant="smooth"
|
|
size="tiny"
|
|
:is-loading="loading"
|
|
color-scheme="primary"
|
|
class-names="grey-btn"
|
|
icon="copy"
|
|
@click="$emit('clone', automation)"
|
|
/>
|
|
<woot-button
|
|
v-tooltip.top="$t('AUTOMATION.FORM.DELETE')"
|
|
variant="smooth"
|
|
:is-loading="loading"
|
|
color-scheme="alert"
|
|
size="tiny"
|
|
icon="dismiss-circle"
|
|
class-names="grey-btn"
|
|
@click="$emit('delete', automation)"
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|