Skip to content
Snippets Groups Projects

Work items child widget: Migrate to crud

Merged Sascha Eggenberger requested to merge work-items-widgets-migration into master
20 files
+ 645
643
Compare changes
  • Side-by-side
  • Inline
Files
20
@@ -32,6 +32,16 @@ export default {
required: false,
default: null,
},
headerClass: {
type: [String, Object],
required: false,
default: null,
},
bodyClass: {
type: [String, Object],
required: false,
default: null,
},
},
data() {
return {
@@ -58,82 +68,86 @@ export default {
</script>
<template>
<section>
<div ref="crudComponent" class="crud gl-border gl-rounded-base gl-border-default gl-bg-subtle">
<header
class="gl-border-b gl-flex gl-flex-wrap gl-justify-between gl-gap-x-5 gl-gap-y-2 gl-rounded-t-base gl-border-default gl-bg-default gl-px-5 gl-py-4"
>
<div class="gl-flex gl-flex-col gl-self-center">
<h2
class="gl-m-0 gl-inline-flex gl-gap-3 gl-text-base gl-font-bold gl-leading-24"
data-testid="crud-title"
>
<slot v-if="$scopedSlots.title" name="title"></slot>
<template v-else>{{ title }}</template>
<span
v-if="displayedCount || $scopedSlots.count"
class="gl-inline-flex gl-items-center gl-gap-2 gl-text-sm gl-text-subtle"
data-testid="crud-count"
>
<slot v-if="$scopedSlots.count" name="count"></slot>
<template v-else>
<gl-icon v-if="icon" :name="icon" data-testid="crud-icon" />
{{ displayedCount }}
</template>
</span>
</h2>
<p
v-if="description || $scopedSlots.description"
class="gl-mb-0 gl-mt-1 gl-text-sm gl-text-subtle"
data-testid="crud-description"
>
<slot v-if="$scopedSlots.description" name="description"></slot>
<template v-else>{{ description }}</template>
</p>
</div>
<div class="gl-flex gl-items-baseline gl-gap-3" data-testid="crud-actions">
<gl-button
v-if="toggleText && !isFormVisible"
size="small"
data-testid="crud-form-toggle"
@click="toggleForm"
>{{ toggleText }}</gl-button
>
<slot name="actions"></slot>
</div>
</header>
<section
ref="crudComponent"
class="crud gl-border gl-rounded-base gl-border-default gl-bg-subtle"
>
<header
class="gl-border-b gl-flex gl-flex-wrap gl-justify-between gl-gap-x-5 gl-gap-y-2 gl-rounded-t-base gl-border-default gl-bg-default gl-px-5 gl-py-4"
:class="[headerClass, { 'gl-border-b-0 gl-rounded-base': !$scopedSlots.default }]"
>
<div class="gl-flex gl-flex-col gl-self-center">
<h2
class="gl-m-0 gl-inline-flex gl-gap-3 gl-text-base gl-font-bold gl-leading-24"
data-testid="crud-title"
>
<slot v-if="$scopedSlots.title" name="title"></slot>
<template v-else>{{ title }}</template>
<div
v-if="$scopedSlots.form && isFormVisible"
class="gl-border-b gl-border-default gl-bg-default gl-p-5 gl-pt-4"
data-testid="crud-form"
>
<slot name="form"></slot>
<span
v-if="displayedCount || $scopedSlots.count"
class="gl-inline-flex gl-items-center gl-gap-2 gl-text-sm gl-text-subtle"
data-testid="crud-count"
>
<slot v-if="$scopedSlots.count" name="count"></slot>
<template v-else>
<gl-icon v-if="icon" :name="icon" data-testid="crud-icon" />
{{ displayedCount }}
</template>
</span>
</h2>
<p
v-if="description || $scopedSlots.description"
class="gl-mb-0 gl-mt-1 gl-text-sm gl-text-subtle"
data-testid="crud-description"
>
<slot v-if="$scopedSlots.description" name="description"></slot>
<template v-else>{{ description }}</template>
</p>
</div>
<div
class="crud-body gl-mx-5 gl-my-4"
:class="{ 'gl-rounded-b-base': !$scopedSlots.footer }"
data-testid="crud-body"
>
<slot></slot>
<div
v-if="$scopedSlots.pagination"
class="gl-flex gl-justify-center gl-p-5 gl-border-t"
data-testid="crud-pagination"
<div class="gl-flex gl-items-baseline gl-gap-3" data-testid="crud-actions">
<gl-button
v-if="toggleText && !isFormVisible"
size="small"
data-testid="crud-form-toggle"
@click="toggleForm"
>{{ toggleText }}</gl-button
>
<slot name="pagination"></slot>
</div>
<slot name="actions"></slot>
</div>
</header>
<footer
v-if="$scopedSlots.footer"
class="gl-border-t gl-rounded-b-base gl-border-default gl-bg-default gl-px-5 gl-py-4"
data-testid="crud-footer"
<div
v-if="$scopedSlots.form && isFormVisible"
class="gl-border-b gl-border-default gl-bg-default gl-p-5 gl-pt-4"
data-testid="crud-form"
>
<slot name="form"></slot>
</div>
<div
v-if="$scopedSlots.default || $scopedSlots.pagination"
class="crud-body gl-mx-5 gl-my-4"
:class="[bodyClass, { 'gl-rounded-b-base': !$scopedSlots.footer }]"
data-testid="crud-body"
>
<slot></slot>
<div
v-if="$scopedSlots.pagination"
class="gl-flex gl-justify-center gl-p-5 gl-border-t"
data-testid="crud-pagination"
>
<slot name="footer"></slot>
</footer>
<slot name="pagination"></slot>
</div>
</div>
<footer
v-if="$scopedSlots.footer"
class="gl-border-t gl-rounded-b-base gl-border-default gl-bg-default gl-px-5 gl-py-4"
data-testid="crud-footer"
>
<slot name="footer"></slot>
</footer>
</section>
</template>
Loading