Skip to content

Commit

Permalink
-[x] Completed replacing text with component for activity elements
Browse files Browse the repository at this point in the history
  • Loading branch information
PG-Momik authored and aashish-t-magar committed Jan 23, 2024
1 parent 7bfad9f commit 422606c
Show file tree
Hide file tree
Showing 23 changed files with 1,905 additions and 654 deletions.
2 changes: 1 addition & 1 deletion .husky/pre-commit
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

php artisan test && \
#php artisan test && \
npx stylelint "resources/**/*.scss" --fix && \
npm run lint && \
npx lint-staged && \
Expand Down
1,871 changes: 1,407 additions & 464 deletions public/js/app.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/mix-manifest.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"/js/app.js": "/js/app.js?id=e296ba9ea3771f53bd685007a0ab5d11",
"/js/app.js": "/js/app.js?id=d03477f5371498a1d7abd7950da8287d",
"/js/script.js": "/js/script.js?id=4920eb85d84da1e87cb71769c04a12a2",
"/js/webportal-script.js": "/js/webportal-script.js?id=f9c23d4bccd261db9414465886315f45",
"/js/formbuilder.js": "/js/formbuilder.js?id=96f1b9dd5890b8ff09e613117dd94592",
Expand Down
12 changes: 12 additions & 0 deletions resources/assets/images/svg/warning-orange.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 39 additions & 0 deletions resources/assets/js/components/ConditionalTextDisplay.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<template>
<template v-if="condition">
{{ successText }}
</template>
<template v-else>
<!--Send failureText as prop, or empty string if failureText is empty.-->
<template v-if="showFailureTextAsPlainText">
{{ failureText }}
</template>
<template v-else>
<MissingDataItem :item="failureText || ''" />
</template>
</template>
</template>
<script setup lang="ts">
import { defineProps } from 'vue';
import MissingDataItem from 'Components/MissingDataItem.vue';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = defineProps({
condition: {
type: Object as () => unknown,
required: true,
},
successText: {
type: [String, Number],
required: true,
},
// eslint-disable-next-line vue/require-default-prop
failureText: {
type: String,
required: false,
},
showFailureTextAsPlainText: {
type: Boolean,
required: false,
},
});
</script>
34 changes: 34 additions & 0 deletions resources/assets/js/components/MissingDataItem.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<template>
<div class="inline-flex items-center align-middle">
<svg-vue icon="warning-orange" />
<span class="missing-text">{{ item }} {{ missing }}</span>
</div>
</template>
<script setup lang="ts">
import { capitalize, defineProps } from 'vue';
const props = defineProps({
// eslint-disable-next-line vue/require-default-prop
item: {
type: String,
required: false,
},
});
let missing = 'missing';
if (!props.item) {
missing = capitalize(missing);
}
</script>
<style>
.missing-text {
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 20px;
letter-spacing: -0.02em;
text-align: left;
@apply px-1 text-salmon-50;
}
</style>
7 changes: 5 additions & 2 deletions resources/assets/js/views/activity/elements/ActivityDate.vue
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,9 @@
{{ item.narrative }}
</span>
</div>
<span v-else class="italic">Missing</span>
<span v-else class="italic">
<MissingDataItem item="narrative" />
</span>
</td>
</tr>
</table>
Expand All @@ -48,10 +50,11 @@
import { defineComponent, inject } from 'vue';
import moment from 'moment';
import MissingDataItem from 'Components/MissingDataItem.vue';
export default defineComponent({
name: 'ActivityDate',
components: {},
components: { MissingDataItem },
props: {
data: {
type: Object,
Expand Down
6 changes: 5 additions & 1 deletion resources/assets/js/views/activity/elements/Conditions.vue
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,9 @@
item.narrative
}}</span>
</div>
<span v-else class="italic">Missing</span>
<span v-else class="italic">
<MissingDataItem item="narrative" />
</span>
</td>
</tr>
</tbody>
Expand All @@ -51,9 +53,11 @@
<script lang="ts">
import { defineComponent, inject } from 'vue';
import dateFormat from 'Composable/dateFormat';
import MissingDataItem from 'Components/MissingDataItem.vue';
export default defineComponent({
name: 'ActivityConditions',
components: { MissingDataItem },
props: {
data: {
type: Object,
Expand Down
96 changes: 62 additions & 34 deletions resources/assets/js/views/activity/elements/ContactInfo.vue
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,17 @@
>
<div class="language mb-1.5">
(Language:
{{
narrative.language
? types.languages[narrative.language]
: 'Missing'
}})
<ConditionalTextDisplay
:condition="narrative.language"
:success-text="types.languages[narrative.language]"
/>)
</div>
<div class="w-[500px] max-w-full">
{{ narrative.narrative ?? 'Missing' }}
<ConditionalTextDisplay
:condition="narrative.narrative"
:success-text="narrative.narrative"
failure-text="organisation"
/>
</div>
</div>
</td>
Expand All @@ -51,14 +54,17 @@
>
<div class="language mb-1.5">
(Language:
{{
narrative.language
? types.languages[narrative.language]
: 'Missing'
}})
<ConditionalTextDisplay
:condition="narrative.language"
:success-text="types.languages[narrative.language]"
/>)
</div>
<div class="w-[500px] max-w-full">
{{ narrative.narrative ?? 'Missing' }}
<ConditionalTextDisplay
:condition="narrative.narrative"
:success-text="narrative.narrative"
failure-text="person name"
/>
</div>
</div>
</td>
Expand All @@ -77,14 +83,17 @@
>
<div class="language mb-1.5">
(Language:
{{
narrative.language
? types.languages[narrative.language]
: 'Missing'
}})
<ConditionalTextDisplay
:condition="narrative.language"
:success-text="types.languages[narrative.language]"
/>)
</div>
<div class="w-[500px] max-w-full">
{{ narrative.narrative ?? 'Missing' }}
<ConditionalTextDisplay
:condition="narrative.narrative"
:success-text="narrative.narrative"
failure-text="department"
/>
</div>
</div>
</td>
Expand All @@ -102,14 +111,17 @@
>
<div class="language mb-1.5">
(Language:
{{
narrative.language
? types.languages[narrative.language]
: 'Missing'
}})
<ConditionalTextDisplay
:condition="narrative.language"
:success-text="types.languages[narrative.language]"
/>)
</div>
<div class="w-[500px] max-w-full">
{{ narrative.narrative ?? 'Missing' }}
<ConditionalTextDisplay
:condition="narrative.narrative"
:success-text="narrative.narrative"
failure-text="job title"
/>
</div>
</div>
</td>
Expand All @@ -126,7 +138,11 @@
}"
>
<div class="w-[500px] max-w-full">
{{ email_value.email ?? 'Missing' }}
<ConditionalTextDisplay
:condition="email_value.email"
:success-text="email_value.email"
failure-text="email"
/>
</div>
</div>
</td>
Expand All @@ -143,7 +159,11 @@
}"
>
<div class="w-[500px] max-w-full">
{{ tel.telephone ?? 'Missing' }}
<ConditionalTextDisplay
:condition="tel.telephone"
:success-text="tel.telephone"
failure-text="telephone"
/>
</div>
</div>
</td>
Expand All @@ -160,7 +180,11 @@
}"
>
<div class="w-[500px] max-w-full">
{{ w.website ?? 'Missing' }}
<ConditionalTextDisplay
:condition="w.website"
:success-text="w.website"
failure-text="website"
/>
</div>
</div>
</td>
Expand All @@ -182,14 +206,17 @@
>
<div class="language mb-1.5">
(Language:
{{
narrative.language
? types.languages[narrative.language]
: 'Missing'
}})
<ConditionalTextDisplay
:condition="narrative.language"
:success-text="types.languages[narrative.language]"
/>)
</div>
<div class="w-[500px] max-w-full">
{{ narrative.narrative ?? 'Missing' }}
<ConditionalTextDisplay
:condition="narrative.narrative"
:success-text="narrative.narrative"
failure-text="mailing address"
/>
</div>
</div>
</div>
Expand All @@ -203,10 +230,11 @@

<script lang="ts">
import { defineComponent, inject } from 'vue';
import ConditionalTextDisplay from 'Components/ConditionalTextDisplay.vue';
export default defineComponent({
name: 'ActivityContactInfo',
components: {},
components: { ConditionalTextDisplay },
props: {
data: {
type: Object,
Expand Down
Loading

0 comments on commit 422606c

Please sign in to comment.