frst-components 0.20.0

package/src/components/LXP/accordionTrack/IAccordionTrack.d.ts

@@ -0,0 +1,81 @@
+import React from "react"
+//import * as Icons from '../../shared/icons'
+export interface IAccordionTrack {
+    /**
+	 * @prop {any} trailData: Informações referente as trilhas
+	 */
+    trailsData?: any
+    /**
+     * @prop {any} courseData: Informações referente aos cursos 
+     */
+    courseData?: any    
+    /**
+     * @prop {any} courseIndividualData: Informações referente aos Cursos Individuais
+     */
+    courseIndividualData?: any        
+    /**
+     * @prop {() => {})} onNewTrail: Callback para adicionar novo conteúdo
+     */
+    isLoading?: boolean
+    TrailName?: string
+    key?: number
+    index?: number
+    data?: any
+    updateScrollSize?: number
+    src?: string
+    onNewTrail?: () => void
+    handleChange?: (trails: any) => void
+    handleClickSelect?: () => void,
+    handleClickContent?: () => void     
+    onSetNameTrail?: (name, id) => void
+    handleClickNew?: () => void,
+    handleEditCourse?: (id: string) => void
+    handlePopOverMove?: (id: string) => void
+    handlePopOverEdit?: (id: string) => void    
+    /**
+	 * @prop {(idCourse: string) => {}} handleDeleteCourse: Callback para deletar o curso 
+	 */
+    handleDeleteCourse?: (idCourse: string) => void
+	/**
+	 * @prop {(idCourse: string, idTrail: string) => {}} handleDeleteCourseTrail: Callback para deletar o vinculo do curso com a trilha
+	 */
+    handleDeleteCourseTrail?: (idTrailCourse: string) => void
+    handleSwitchAtivar? (idCourse: string, checked: boolean)
+    handleSwitchAtivarConteudo? (idCourse: string, checked: boolean)
+    handleSwitchAtivarTrail? (idTrailCourse: string, checked: boolean)
+    /**
+     * @prop {(errorCode: number) => {}} handleMessageError: Callback para mensagem de erro
+     */    
+    handleMessageError? (errorCode: string)   
+    handleSwitchActiveTrail?: (idTrail, active) => void     
+    /**
+     * @prop {(errorCode: number) => {}} handleUpdateTrail: Callback atualizar ordenação, exclusão e inserção de cursos nas trilahs
+     */           
+    handleUpdateTrail?: (deletedItem, insertItem, trailCoursesList) => void   
+    handlePopOverDuplicate?: (id: string) => void
+    handlePopOverTrailEdit?: (id: string) => void
+    handlePopOverTrailDelete?: (id: string) => void
+    handlePopOverRemoveIndividual?: (id: string) => void
+    handlePublicarTrilha?: (id: string) => void
+}
+
+export interface IAccordionTranslate extends IAccordionTrack {
+    textMeusConteudos?: string
+    textTotalDe?: string
+    textRegistros?: string
+    textMinhasTrihas?: string
+    txtAtivarCurso?: string
+    txtAtivarTrilha?: string
+    txtButtonLabel?: string
+    txtCriarNovoCurso?: string
+    txtCriarNovoCurso2?: string
+    txtPopOverEditContent?: string
+    txtPopOverMoveToTrails?: string
+    txtPopOverDeleteContent?: string
+    txtTrailsPopOverEdit?: string
+    txtTrailsPopOverDuplicar?: string
+    txtTrailsPopOverDelete?: string
+    txtPlacerolderInputNameTrail?: string
+    txtCursoIndividual?: string
+}
+

package/src/components/LXP/accordionTrack/accordionTrack.stories.tsx

@@ -0,0 +1,305 @@
+import React, { useEffect, useState } from 'react'
+import { v4 } from 'uuid'
+import AccordionTrackList from './accordionTrackList'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'LXP/AccordionTrack',
+    component: AccordionTrackList,        
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => {
+  // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+  const [Course, setCourse] = useState([
+    {
+    "id":63,
+    "uuid":"1b7179d4-b264-44ea-ae09-8c8b38994a4d",
+    "title":"Curso de HTML 5",
+    "language":"pt-br",
+    "desc":"Description content",
+    "tags":{
+        "custom":"#tag",
+        "category":[
+          "Gestão",
+          "Liderança"
+        ]
+    },
+    "settings":{
+        "cover_full_url":"",
+        "cover_thumb_url":"",
+        "cover_video_url":""
+    },
+    "excluded":false,
+    "private":false,
+    "active":true,
+    "active_individual":true,
+    "channel":104
+    },
+    {
+    "id":82,
+    "uuid":"63552d66-468e-4c44-87f8-7dca992d9dd9",
+    "title":"Entendendo funções recursivas",
+    "language":"pt-br",
+    "desc":"descrição",
+    "tags":{
+        "custom":"#tags",
+        "category":[
+          "Gestão"
+        ]
+    },
+    "settings":{
+        "cover_full_url":"https://cdn.discordapp.com/attachments/1001105882358226955/1058104301844693122/image.png",
+        "cover_thumb_url":"https://cdn.discordapp.com/attachments/1001105882358226955/1058104301844693122/image.png",
+        "cover_video_url":""
+    },
+    "excluded":false,
+    "private":false,
+    "active":true,
+    "active_individual":false,
+    "channel":104
+    },
+    {
+    "id":87,
+    "uuid":"89f06dc7-82b7-475f-aae0-f3d6b02bc9dc",
+    "title":"Conteúdo para deletar",
+    "language":"pt-br",
+    "desc":"teste",
+    "tags":{
+        "custom":"#a",
+        "category":[
+          "Gestão"
+        ]
+    },
+    "settings":{
+        "cover_full_url":"",
+        "cover_thumb_url":"",
+        "cover_video_url":""
+    },
+    "excluded":false,
+    "private":false,
+    "active":false,
+    "active_individual":false,
+    "channel":104
+    }
+  ])
+
+  const [Trail, setTrail] = useState([
+  {
+    "id": 174,
+    "uuid": "10e6c506-9d66-4312-bda6-3552de5c4a56",
+    "name": "O Líder que bate Metas",
+    "excluded": false,
+    "active": true,
+    "channel": 110,
+    "trail_course": [
+      {
+        "id":32,
+        "trail_id":174,
+        "course":{
+            "id":44,
+            "uuid":"ff58113f-9cf0-4b65-873c-68bd7624af48",
+            "title":"Curso de Programação Inicial",
+            "language":"pt-br",
+            "desc":"Test description",
+            "tags":{
+              "custom":"",
+              "category":[
+                
+              ]
+            },
+            "settings":{
+              "cover_full_url": 'https://cdn.discordapp.com/attachments/1001105882358226955/1058104301844693122/image.png',
+              "cover_thumb_url": 'https://cdn.discordapp.com/attachments/1001105882358226955/1058104301844693122/image.png',
+              "cover_video_url": 'https://cdn.discordapp.com/attachments/1001105882358226955/1058104301844693122/image.png',
+            },
+            "excluded":true,
+            "private":true,
+            "active":true,
+            "active_individual":false,
+            "channel":104
+        },
+        "course_id":75,
+        "order":0
+      },
+      {
+        "id":33,
+        "trail_id":174,
+        "course":{
+            "id":32,
+            "uuid":"ff58113f-9cf0-4b65-873c-68bd7624af48",
+            "title":"Finanças Básicas",
+            "language":"pt-br",
+            "desc":"Test description",
+            "tags":{
+              "custom":"",
+              "category":[
+                
+              ]
+            },
+            "settings":{
+              "cover_full_url": 'https://cdn.discordapp.com/attachments/1001105882358226955/1058104301844693122/image.png',
+              "cover_thumb_url": 'https://cdn.discordapp.com/attachments/1001105882358226955/1058104301844693122/image.png',
+              "cover_video_url": 'https://cdn.discordapp.com/attachments/1001105882358226955/1058104301844693122/image.png',
+            },
+            "excluded":true,
+            "private":true,
+            "active":true,
+            "active_individual":false,
+            "channel":104
+        },
+        "course_id":75,
+        "order":0
+      },
+    ]
+  },
+  {
+    "id": 179,
+    "uuid": "10e6c506-9d66-4312-bda6-3552de5c4a56",
+    "name": "Liderança que inspira",
+    "excluded": false,
+    "active": true,
+    "channel": 110,
+    "trail_course": [
+      {
+        "id":36,
+        "trail_id":179,
+        "course":{
+            "id":65,
+            "uuid":"ff58113f-9cf0-4b65-873c-68bd7624af48",
+            "title":"Educação Financeira",
+            "language":"pt-br",
+            "desc":"Test description",
+            "tags":{
+              "custom":"",
+              "category":[
+                
+              ]
+            },
+            "settings":{
+              "cover_full_url": 'https://cdn.discordapp.com/attachments/1001105882358226955/1058104301844693122/image.png',
+              "cover_thumb_url": 'https://cdn.discordapp.com/attachments/1001105882358226955/1058104301844693122/image.png',
+              "cover_video_url": 'https://cdn.discordapp.com/attachments/1001105882358226955/1058104301844693122/image.png',
+            },
+            "excluded":true,
+            "private":true,
+            "active":true,
+            "active_individual":false,
+            "channel":104
+        },
+        "course_id":75,
+        "order":0
+      },
+      {
+        "id":35,
+        "trail_id":179,
+        "course":{
+            "id":75,
+            "uuid":"ff58113f-9cf0-4b65-873c-68bd7624af48",
+            "title":"Curso de Bitcoin",
+            "language":"pt-br",
+            "desc":"Test description",
+            "tags":{
+              "custom":"",
+              "category":[
+                
+              ]
+            },
+            "settings":{
+              "cover_full_url": 'https://cdn.discordapp.com/attachments/1001105882358226955/1058104301844693122/image.png',
+              "cover_thumb_url": 'https://cdn.discordapp.com/attachments/1001105882358226955/1058104301844693122/image.png',
+              "cover_video_url": 'https://cdn.discordapp.com/attachments/1001105882358226955/1058104301844693122/image.png',
+            },
+            "excluded":true,
+            "private":true,
+            "active":true,
+            "active_individual":false,
+            "channel":104
+        },
+        "course_id":75,
+        "order":0
+      },
+    ]}  
+  ])
+
+  return <>
+    <AccordionTrackList  
+      // handleChange={(trailsChange) => { 
+      //   console.log('\n-----------------\ntrailsChange', trailsChange)
+      //   setTrail(trailsChange)
+      // }}
+      trailsData={Trail}
+      courseData={Course}
+      {...args} 
+    />
+  </>
+}
+
+/// Mesmo payload da API do LXP
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+
+export const Opened = Template.bind({})
+Opened.args = {
+    onNewTrail: () => {alert(`Adicionando novo Conteúdo`)},  
+    handleEditCourse: (id) => {alert(`Selected id: ${id}`)},  
+    handlePopOverMove: (id) => {alert(`Move id: ${id}`)},
+    handlePopOverEdit: (id) => {alert(`Content Edit id: ${id}`)},
+    handlePopOverDelete: (id) => {alert(`Content Deleted id: ${id}`)},
+    handleMessageError: (error) => {alert(error)},
+    handlePopOverTrailEdit: (id) => {alert(`Trail Edit id: ${id}`)},
+    handlePopOverTrailDelete: (id) => {alert(`Trail Deleted id: ${id}`)},
+    handleSwitchAtivar: (idCourse, checked) => {
+      alert(`Alterando conteúudo ${idCourse}: ${checked}`)
+    },    
+    handleDeleteCourse: (idCourse) => {
+      alert(`Deletando o Curso: ${idCourse}`)
+    },
+    handleDeleteCourseTrail: (idTrailCourse) => {
+      alert(`Deletando Relacionamento da trilha x curso de ID: ${idTrailCourse}`)
+    },    
+    handleSwitchActiveTrail: (idTrail, active) => {
+      alert(`Mudando status de Ativo da trilha ID: ${idTrail} para ${active}`)
+    },
+    onSetNameTrail: (idTrail, name) => { alert(`TrailName: ${idTrail} ${name}`) },
+    handleUpdateTrail: (deletedItem, insertItem, trailCoursesList) => {
+      console.log(`deletedItem`, deletedItem)
+      console.log(`insertItem`, insertItem)
+      console.log(`trailCoursesList`, trailCoursesList)
+    },
+    handlePopOverDuplicate: (id) => {alert(`Selected id: ${id}`)},
+    textMeusConteudos: "Meus Conteúdos",
+    textTotalDe: "Total de",
+    textRegistros: "registros",
+    textMinhasTrihas: "Minhas Trilhas",
+    txtAtivarCurso: "Ativar conteúdo",
+    txtAtivarTrilha: "Ativar trilha",
+    txtCriarNovoCurso: "Criar novo Conteúdo",
+    txtPopOverEditContent: "Edit content",
+    txtPopOverMoveToTrails: "Move to Trails",
+    txtPopOverDeleteContent:"Delete content",
+    txtTrailsPopOverEdit: "Editar nome da trilha",
+    txtTrailsPopOverDuplicar: "Duplicar trilha",
+    txtTrailsPopOverDelete: "Excluir trilha",
+    txtPlacerolderInputNameTrail: 'Enter track name'
+}
+
+export const Loading = Template.bind({})
+Loading.args = {
+    isLoading: true,
+    trailsData: [],
+    courseData: [],
+    textMeusConteudos: "My Contents",
+    textTotalDe: "Total of",
+    textRegistros: "records",
+    textMinhasTrihas: "My tracks",
+    txtAtivarCurso: "Ativar Indiv.",
+    txtAtivarTrilha: "Ativar trilha",
+    txtCriarNovoCurso: "Criar novo Conteúdo",
+    txtPopOverEditContent: "Edit content",
+    txtPopOverMoveToTrails: "Move to Trails",
+    txtPopOverDeleteContent:"Delete content",
+    txtTrailsPopOverEdit: "Editar nome da trilha",
+    txtTrailsPopOverDuplicar: "Duplicar trilha",
+    txtTrailsPopOverDelete: "Excluir trilha",
+    txtPlacerolderInputNameTrail: 'Enter track name'
+}